如何向核心块添加锚点支持？

Question

我想为核心块添加锚点 (id) 支持。我在编辑器中尝试了下面的 JS 代码来更改 cover 块。它在高级属性下正确添加了锚字段；然而，重新加载编辑页面会导致 This Block Contains Unexpected or Invalid Content 错误。

我还需要什么额外的挂钩？这可以用 easy/elegant 的方式来做吗？

function addBlockAnchor( settings, name ) {
    if ( name !== 'core/cover' ) {
        return settings;
    }

    return lodash.assign( {}, settings, {
        supports: lodash.assign( {}, settings.supports, {
            anchor: true
        } ),
    } );
}
wp.hooks.addFilter(
    'blocks.registerBlockType',
    'my-plugin/addBlockAnchor',
    addBlockAnchor
);

我用@niklas 回答的最终代码：

function addBlockAnchor( settings, name ) {
    if ( name !== 'core/cover' ) {
        return settings;
    }

    lodash.assign( settings, settings, {
        supports: lodash.assign( {}, settings.supports, {
            anchor: true
        } ),
        attributes: lodash.assign( {}, settings.attributes, {
            anchor: { type: 'string' }
        } ),

    } );

    return settings;
}

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'norpel-blocks/addBlockAnchor',
    addBlockAnchor
);

Answer 1

您还必须像这样向块属性添加锚点属性。未测试，但应该可以。

const addBlockAnchor = 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',
  addBlockAnchor
)

如何向核心块添加锚点支持？

How to add anchor support to a core block?

wordpress

wordpress-gutenberg