如何在WordPress Gutenberg父区块中统一配置自定义子区块样式？

1. 父区块添加子元素样式控制面板 #

在父区块的编辑逻辑文件（如edit.js）中，利用WordPress的InspectorControls组件创建专门的子元素样式设置面板：

import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ColorPicker, RangeControl } from '@wordpress/components';

export default function Edit({ attributes, setAttributes }) {
    const { childBgColor, childTextColor, childPadding } = attributes;

    return (
        <>
            {/* 父区块的编辑渲染内容 */}
            <InspectorControls>
                <PanelBody title="子元素统一样式" initialOpen={false}>
                    <ColorPicker
                        label="子元素背景色"
                        value={childBgColor}
                        onChange={(color) => setAttributes({ childBgColor: color })}
                    />
                    <ColorPicker
                        label="子元素文字颜色"
                        value={childTextColor}
                        onChange={(color) => setAttributes({ childTextColor: color })}
                    />
                    <RangeControl
                        label="子元素内边距"
                        value={childPadding}
                        onChange={(val) => setAttributes({ childPadding: val })}
                        min={0}
                        max={60}
                        unit="px"
                    />
                </PanelBody>
            </InspectorControls>
        </>
    );
}

2. 父区块传递CSS变量到子元素 #

在父区块的保存函数或前端渲染模板中，将设置的属性转化为CSS变量，通过父容器的样式传递给子元素：

export default function save({ attributes }) {
    const { childBgColor, childTextColor, childPadding } = attributes;
    const parentStyles = {
        '--child-bg': childBgColor,
        '--child-text': childTextColor,
        '--child-padding': `${childPadding}px`
    };

    return (
        <div style={parentStyles}>
            <InnerBlocks.Content />
        </div>
    );
}

3. 子区块引用父级CSS变量 #

在子区块的样式文件（或内联样式）中，使用父级传递的CSS变量定义样式：

.custom-child-block {
    background-color: var(--child-bg, #fff);
    color: var(--child-text, #000);
    padding: var(--child-padding, 16px);
    /* 其他子区块基础样式 */
}

4. 可选：禁用子区块单独样式设置 #

如果需要强制统一样式，可以移除子区块自身的样式控制面板，或者在子区块的编辑逻辑中添加判断：当父级设置了统一样式时，隐藏子元素的单独设置项。

内容的提问来源于stack exchange，提问作者Shishir Raven