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?

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?

• block-editor

• Did you see this ? wordpress.stackexchange/questions/343037/… – BenB Commented Mar 9, 2020 at 5:08

1 Answer 1

I don't believe you can. Not easily anyway. I'm happy to be corrected, but this is my understanding of the issue:

Blocks can store their attribute in several ways. They can be stored as JSON inside the block comment, like this example from the documentation:

<!-- wp:latest-posts {"postsToShow":4,"displayPostDate":true} /-->

These are the attributes that are likely accessible in PHP, because they can be parsed with parse_blocks().

But, most other blocks, including the image block, reconstruct their attributes by parsing the HTML. In this other example, no attributes are specified in the block comment. There is only the final HTML:

<!-- wp:image -->
<figure class="wp-block-image"><img src="source.jpg" alt="" /></figure>
<!-- /wp:image -->

For blocks like this, the attributes are reconstructed from the HTML. The logic to do this is only available in block.json, and looks like this:

"url": {
    "type": "string",
    "source": "attribute",
    "selector": "img",
    "attribute": "src"
},
"alt": {
    "type": "string",
    "source": "attribute",
    "selector": "img",
    "attribute": "alt",
    "default": ""
},

That tells the block that the alt attribute can be found by looking for the alt attribute of the img tag in the block, and the url attribute can be found by looking at the src attribute. You can see some of the ways block attributes are found here.

In your example you'll notice that the attributes that you do have access to are values that are not otherwise stored in the HTML of the block.

So for many blocks, the logic for reconstructing the attributes for editing/modification is only defined in the JavaScript for that block. This logic does not exist in PHP.

If you need to access these attributes from PHP, you will need to parse them out of the HTML yourself. The logic for this will be different for every block.