如何在嵌套块的保存功能中访问父块的属性？

时间：2020-07-09 作者：Michael Cheng

我目前有一个街区通过了它的一些attributes 向下至嵌套InnerBlocks 使用React的上下文API（我使用的WordPress版本还没有Block Context 特色这允许我成功访问父块的attributes 在嵌套块中\'edit 作用

registerBlockType("myblock", {
  title: "My Block",
  attributes: {
    someValue: {
      type: \'string\',
      default: \'\',
    },
  },
  edit(props) {
    const { someValue } = props.attributes;

    // ...other code...

    return (
      <MyContext.Provider value={someValue}>
        <InnerBlocks />
      </MyContext.Provider>
    );
  },
  save(props) {
    const { someValue } = props.attributes;

    return (
      <InnerBlocks.Content />
    );
  }
});
但是，我还希望在中访问父块的属性save 嵌套块的功能。我无法使React的上下文API正常工作。WordPress的Block API中是否有这样做的方法？

2 个回复
SO网友:PattyOK

您可以通过选择和调度挂钩将数据传递给子级。因此，可以使用继承属性设置子块，并在父块上的设置更改时更新该属性。

Parent Block

导入依赖项

import { dispatch, select } from "@wordpress/data";
您的编辑功能可能如下所示：

edit({ attributes, className, setAttributes, clientId }) {
    const { headerStyle } = attributes;

    const updateHeaderStyle = function( value ) {
        setAttributes({ headerStyle: value });

        // Update the child block\'s attributes
        var children = select(\'core/block-editor\').getBlocksByClientId(clientId)[0].innerBlocks;
        children.forEach(function(child){
            dispatch(\'core/block-editor\').updateBlockAttributes(child.clientId, {inheritedHeaderStyle: value})
        });
    }
    

    return (
        <>
            <InspectorControls>
                <PanelBody>
          

                    <RadioControl
                        label="Section Header Style"
                        selected = {headerStyle}
                        options = { [
                            { label: \'h2\', value: \'h2\' },
                            { label: \'h3\', value: \'h3\' },
                            { label: \'h4\', value: \'h4\' },
                            { label: \'h5\', value: \'h5\' },
                            { label: \'h6\', value: \'h6\' },
                        ]}
                        onChange= {updateHeaderStyle}
                    />
                </PanelBody>
            </InspectorControls>
            <InnerBlocks
              ...
            />
         <>
  );
  }

Child Block

上述函数将在更改时更新，但在子块的编辑函数中，您可以获取父属性并在未定义的情况下进行设置。。。

if (!inheritedHeaderStyle) {
    var parent = select(\'core/block-editor\').getBlockParents(clientId);
    const parentAtts = select(\'core/block-editor\').getBlockAttributes(parent);
    setAttributes( { inheritedHeaderStyle: parentAtts.headerStyle } )
}

SO网友:Miroslav Peterka

要实现这一点，可以使用内置功能Context.

Parent Block

registerBlockType( \'my-plugin/parent\', {
 
    attributes: {
        switch: {
            type: \'boolean\',
            default:false
        },
    },
 
    providesContext: {
        \'my-plugin/switch\': \'switch\',
    },

    edit: Edit,

    save,
} );

Child Block

registerBlockType( \'my-plugin/child\', {
     attributes: {
        switch: {
            type: \'boolean\',
            default:false
        },
    },

    usesContext: [ \'my-plugin/switch\' ],
 
    edit({ attributes, setAttributes, context }) {

        // copy value from parent context into child attribute
        setAttributes({
          switch: context["my-plugin/switch"],
        });
    },
 
    save({ attributes }) {

        // use this attribute
        
    },
} );
API参考：https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/

标签： block-editor   小码农  

相关推荐