Wordpress gutenberg 锚支持动态块

1wnzp6jl  于 2022-12-11  发布在  WordPress
关注(0)|答案(4)|浏览(173)

我想有锚支持我的动态WordPress块。我做到了

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

这将在侧栏面板下添加HTML锚控件。
我的图块是动态图块,具有

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

我尝试了所有方法来将anchor属性设置为frontend。

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

这将使anchor通过props.anchorsave函数中可用,但它从未出现在我的render_callback$attributes中。
这基本上是一个移植到SO的github问题。希望任何人都能在这里提供帮助。

3yhwsihp

3yhwsihp1#

您可以使用此过滤器(针对您想要的任何块)

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
)

然后您可以访问呈现回调中的“锚”属性

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

iezvtpos2#

如果有人仍然感兴趣,这对我来说很有效:
因此,这是我的自定义块注册,此语句将启用标准的WordPress HTML锚字段(与宝贵的验证空格等)下所选 gutenberg 块的高级选项卡:

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

5hcedyr03#

您是否尝试过手动添加一个将处理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 } />;
}

我不确定它是否可行,我只是在这里胡乱猜测。让我知道它的进展:)

11dmarpk

11dmarpk4#

基于上述答案。
您只需要创建一个属性,它将所有其他属性/变量/任何东西收集到字符串中。
第一步
创建字符串类型的属性(在block.json中)

"phpRender": {
    "type": "string"
}

第二步
在块的“edit”函数中,创建一个函数来保存你需要的任何属性。将这个函数放在“useEffect”钩子中。

const saveAllToString = () => {
    const blockProps = {
        id: attributes.anchor,
    }

    setAttributes({phpRender: JSON.stringify(blockProps)});
}

useEffect(() => {
    saveAllToString();
});

第三步
现在,您可以解码此字符串并轻松地使用变量。

$blockProps = !empty($attributes['phpRender']) ? json_decode($attributes['phpRender']) : false;
echo $blockProps->id;

相关问题