Wordpress 古腾堡锚点对动态块的支持

Question

我想为我的动态 WordPress 块提供锚点支持。我做到了

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

这将在侧边栏面板下添加 HTML 锚点控件。

我的块是一个动态块

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

我尝试了一切方法来将anchor属性添加到前端。根据这个github问题我应该添加

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

到块属性。这将使via 函数anchor中可用，但它永远不会出现在 my 中。saveprops.anchorrender_callback $attributes

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

Answer 1

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

所以这是我的自定义块注册，此语句将在选定的 gutenberg 块的“高级”选项卡下启用标准 WordPress HTML 锚点字段（对空格等进行有价值的验证）：

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'];
}