如何在 WordPress gutenberg 中设置父块中嵌套块的样式

Question

结构

- > Custom Parent Block 
    -> Custom Child Block
         -> Inner Blocks
    -> Custom Child Block
         -> Inner Blocks

要求 我想在检查器视图中有一个部分，我可以在其中更改自定义子块类型的子组件的样式（间距、背景颜色、文本颜色等）。

现在我可以在自定义子块中拥有样式，但我无法保持一致性。

示例案例

• 手风琴 - 在这里我们可以有选项卡和选项卡内容区域，它们可以具有相同的样式。
• 幻灯片 - 所有项目都可以具有相同的边框样式

请注意：有规定启用对块的尺寸、背景颜色和文本颜色的支持，但是如何添加一个部分，在其中可以为子元素添加相同的支持。

理想的解决方案

• 我在子块中标记某些 CSS 变量（如 --border-child），并从父检查器视图中更新变量值。

Answer 1

块上下文可用于将属性值从自定义父块属性提供给自定义子块。

对于您的场景，检查器控件将位于“自定义父块”中，以设置自定义“边框”块属性的值。 自定义子块然后使用上下文来获取父级的值 - 与InnerBlocks非常有用。

使用背景颜色或文本颜色等属性，在

自定义父块

上启用块支持，以将内置 CSS 类应用到块。接下来，将选定的类提供给子级 - 或者使用 CSS 选择器处理样式，该样式应用于应用了 .parent-block-name 的

--example-style

的后代。

Answer 2

在 block.json 文件中定义属性。

1. 将它们应用到您的孩子身上

block.json：

"attributes": {
    "backgroundColor": "#eee"
},

这将允许输入背景颜色，但不允许输入文本颜色。

编辑()

        <InspectorControls style={{ marginBottom: '30px' }}>
            <PanelBody title={'Color'}>
                <p><strong>Select a backdrop color:</strong></p>
                <ColorPalette
                    value={backgroundColor}
                    onChange={(value) => setAttributes({ backgroundColor: value })}
                ></ColorPalette>
            </PanelBody>
        </InspectorControls>,
...

保存（）

export default function save({ attributes }) {
return (
        <div {...useBlockProps.save()}>
                <div className="backdrop" style={{backgroundColor:attributes.backgroundColor}}></div>
                <InnerBlocks.Content />
    </div>
)

}

在 block.json 文件中使用“supports”属性也很好，但这有一些问题。我在

这里

发布了一个关于此的问题。