Question

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

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

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

我的区块是具有

的动态区块

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

我尽一切努力将anchor属性添加到前端。根据{{3}}，我应该添加

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

到块属性。这将使anchor通过save在props.anchor函数中可用，但是它永远不会出现在我的render_callback $attributes中。

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

Answer 1

您是否尝试过手动添加用于处理ID属性的字段？

类似这样的东西：

<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>

然后：

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

我不确定是否会奏效，我只是在这里疯狂猜测。让我知道怎么回事：）

Answer 2

您可以使用此过滤器（定位所需的任何块）

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
)

然后您可以在渲染回调中访问“ anchor”属性

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

Answer 3

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

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

supports: {
      anchor: true
    }

然后在我们定义的同一位置：

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

然后使用保存功能（出于与InnerBlocks相同的目的，我拥有它：

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

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

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

Wordpress Gutenberg锚对动态块的支持

3 个答案: