我一直在编写各种自定义块，但遇到了一个小问题：我希望能够在自定义父块中直接引用自定义子块。问题是父级中已经有了InnerBlocks组件。
子块在独立上下文中工作良好，其目的是从第三方API获取特定事件的数据。索引。js非常标准：
import edit from \'./edit\';
import save from \'./save\';
import metadata from \'./block.json\';
registerBlockType( metadata.name, {
/**
* @see ./edit.js
*/
edit,
/**
* @see ./save.js
*/
save,
} );
父块当前只是围绕
core/embed 在其保存方法中附加了一些额外内容的块。当
core/embed 但是，更新会触发一个事件，我想将其传递给自定义子块。
父块当前使用InnerBlocks 组成部分
return (
<div { ...useBlockProps({ className: customClass }) }>
<InnerBlocks
allowedBlocks={[\'core/embed\']}
template={EMBED_TEMPLATE}
templateLock="all"
__experimentalLayout={defaultLayout}
></InnerBlocks>
/* And then ideally... */
<ChildBlock propsAndListeners/>
</div>
)
To be clear: 父/子块不是供公共使用的，它们只供特定公司使用，并带有自己的品牌等，因此目前重用不是真正的优先事项。其目的是移交古腾堡网站建设者，并根据他们的需要定制区块。
我假设可以从其索引导出子块。js，但这方面运气不好。我如何将其导出，以便import ChildBlock from \'../path 在另一个文件中，与我引用核心块的方式大致相同？
SO网友:Tom J Nowell
不能以这种方式将块嵌入为react组件，也不应通过使用锁定模板设置innerblocks来尝试将其他块用作用户界面组件。
相反，使用2个过滤器修改核心/嵌入块：
使用editor.BlockListBlock 在…上core/embed 要修改编辑组件，请将其包装到具有额外用户界面反应组件的您自己的组件中blocks.registerBlockType 过滤器以修改core/embed 注册以包含其他属性使用PHP调整core/embed 块是使用过滤器渲染的，这样您就可以使用标准的核心嵌入块，不再需要注册新块。
例如，这会在每个块的工具栏中添加一个按钮：
import { BlockControls } from \'@wordpress/block-editor\';
import {
ToolbarButton,
ToolbarGroup,
} from \'@wordpress/components\';
import { createHigherOrderComponent } from \'@wordpress/compose\';
import { addFilter } from \'@wordpress/hooks\';
addFilter(
\'editor.BlockListBlock\',
\'verism/toolbar-button\',
AddToolbarButton,
10
);
const AddToolbarButton = createHigherOrderComponent( BlockEdit => {
return ( props ) => {
if ( props.name != \'core/embed\' ) {
return <BlockEdit { ...props } />;
}
return (
<Fragment>
<BlockControls>
<ToolbarGroup>
<ToolbarButton
className="verisms-really-nice-button"
label="Verisms really nice button"
onClick={ () => {
console.log( \'button pressed\' );
} }
/>
</ToolbarGroup>
</BlockControls>
<BlockEdit { ...props } />
</Fragment>
);
};
}, \'AddToolbarButton\' );
https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#editor-blockedit
您可以插入边栏面板、文本字段、工具栏按钮等。
您还可以通过block_type_metadata 过滤器：
https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#block_type_metadata
