I am overriding the core image block in PHP. Everything goes well except I found out not all attributes of that block in Javascript passed to PHP for me to use.
How I override the image block:
//Override core/image block with render callback
function override_image_block_output($attributes, $content){
//Override the image block
var_dump($attributes);
}
function reregister_image_block(){
register_block_type( 'core/image', array(
'render_callback' => 'override_image_block_output',
) );
}
add_action('init', 'reregister_image_block');
When I do this and var_dump the $attributes
, thats all I got
array(3) { ["id"]=> int(282) ["sizeSlug"]=> string(5) "large" ["linkDestination"]=> string(6) "custom" }
But in Javascript, which you can view the attributes of that block this way:
const { addFilter } = wp.hooks;
const __ = wp.i18n.__; // The __() for internationalization.
const el = wp.element.createElement; // The wp.element.createElement() function to create elements.
const { RichText } = wp.blockEditor;
const { InnerBlocks } = wp.blockEditor;
const OverrideImageBlock = (element, blockType, attributes) => {
if ( blockType.name === 'core/image' ) {
console.log(attributes);
return element;
}
return element;
};
addFilter(
"blocks.getSaveElement",
"custom-blocks/override-core-image-block",
OverrideImageBlock
);
The attributes returned the following:
How can I pass 'href' from block's attribute to PHP? Why some were passed but some were not initially?