Wordpress Gutenberg anchor 支持动态 block

Question

我想为我的动态 wordpress block 提供 anchor 支持。我做了

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

这会在侧边栏面板下添加 HTML anchor 控件。

我的 block 是一个动态 block ，有

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

我尝试了所有方法来将 anchor 属性添加到前端。根据this github issue我应该补充

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

block 属性。这将使 anchor 通过 props.anchor 在 save 函数中可用，但是它从未出现在我的 render_callback 中$属性。

这基本上是 github 问题到 SO 的端口。希望任何人都可以在这里提供帮助。

Answer 1

如果有人仍然对此感兴趣，这对我有用:

所以这是我的自定义 block 注册，此语句将在所选古腾堡 block 的“高级”选项卡下启用标准 wordpress HTML anchor 字段(对空格等进行有值(value)的验证):

supports: {
  anchor: true
}

然后在同一个地方我们定义:

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

然后在保存函数中(我使用它的目的与 InnerBlocks 完全相同):

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

如果您使用的是 jsx，保存函数可能如下所示:

save: function(props) {
  const { anchor } = props.attributes;
  return (
    <div id={anchor}>
      <InnerBlocks.Content />
    </div>
  );
}

然后在您的渲染回调函数中(在 php 中)它将通过第一个 arg 的(数组)元素可用

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