Wordpress Gutenberg Anchor Support for Dynamic Block

Question

I want to have anchor support for my dynamic wordpress block. I did

//in registerBlockType
supports: {
    anchor: true,
},

This adds the HTML Anchor control under the sidebar panel.

My block is a dynamic block that has

save: ( props ) => {
  return <InnerBlocks.Content />;
}

I tried everything to get the anchor attribute to to frontend. According to this github issue I should add

anchor: { 
    type: 'string', 
    source: 'attribute', 
    attribute: 'id', 
    selector: '*', 
}, 

to the blocks attributes. This will make the anchor available in the save function via props.anchor, however it never appears in my render_callback $attributes.

This is basically a port of the github issue to SO. Hope anyone can help here.

Answer 1

Have you tried manually adding a field that will take care of the ID attribute?

Something like this:

<InspectorControls>
    <PanelBody title={ __( 'Element Settings' ) }>
        <TextControl
            label={ __( 'Element ID', 'fleximpleblocks' ) }
            value={ elementID}
            placeholder={ __( 'Type in the element ID…' ) }
            onChange={ ( value ) => setAttributes( { elementID: value } ) }
        />
    </PanelBody>
</InspectorControls>

And then:

save: ( props ) => {
    return <InnerBlocks.Content id={ props.attributes.elementID } />;
}

I'm not sure if it'll work, I'm just taking a wild guess here. Let me know how it goes :)

Answer 2

You could use this filter (targeting whatever blocks you want)

const withAnchor = props => {
  if (props.attributes) { // Some blocks don't have attributes
    props.attributes = {
      ...props.attributes,
      anchor: {
        type: 'string'
      }
    }
  }
  return props
}

wp.hooks.addFilter(
  'blocks.registerBlockType',
  'namespace/with-anchor',
  withAnchor
)

And then you can access the 'anchor' attribute in the render callback

'render_callback' => function($attributes) {
  echo $attributes['anchor'];
}

Answer 3

if anyone is still interested this worked for me:

so this is my custom block registering, this statement will enable standard wordpress HTML anchor field (with valuable validation for spaces etc.) under Advanced tab of selected gutenberg block:

supports: {
      anchor: true
    }

then in the same place we define:

attributes: {
      anchor: {
                type: 'string'
            }
    }

then in save function (I have it exactly for the same purpose of InnerBlocks:

save: function(props) {
      const { anchor } = props.attributes;
      return (
        el( anchor, {}),
        el( InnerBlocks.Content, {})
      );
    }

then in your render callback function (in php) it's going to be available via first arg's (which is array) element

function your_callback( $block, $content ) {
  // display your anchor value
  echo $block['anchor'];
}