如何为自定义Gutenberg区块启用内置调色板？

咱们可以通过添加颜色属性、引入内置的ColorPalette组件，让你的自定义区块完全复用Gutenberg默认的调色板，实现背景色和文字颜色的自定义。下面是具体的修改步骤和完整代码：

核心修改说明 #

• 新增颜色存储属性：在区块的attributes里添加backgroundColor和textColor，用来保存用户选择的颜色值
• 引入颜色选择器：在侧边栏的InspectorControls中添加官方的ColorPalette组件，绑定颜色变更事件
• 实时预览样式：在编辑模式的容器上应用选中的颜色，让用户能即时看到效果
• 同步前端样式：在save函数里把颜色样式输出到最终HTML，确保前端显示一致

修改后的完整代码 #

( function( blocks, components, i18n, element ) { 
    var el = element.createElement; 
    var registerBlockType = wp.blocks.registerBlockType; 
    var RichText = wp.blocks.RichText; 
    var BlockControls = wp.blocks.BlockControls; 
    var AlignmentToolbar = wp.blocks.AlignmentToolbar; 
    var MediaUpload = wp.blocks.MediaUpload; 
    var InspectorControls = wp.blocks.InspectorControls; 
    var TextControl = wp.components.TextControl;
    // 引入官方颜色调色板组件
    var ColorPalette = wp.components.ColorPalette;

    registerBlockType( 'futurelab/color-block', { 
        title: i18n.__( 'Color Block' ), 
        description: i18n.__( 'A custom block for displaying color blocks.' ), 
        icon: 'media-document', 
        category: 'common', 
        attributes: { 
            title: { 
                type: 'array', 
                source: 'children', 
                selector: 'h3', 
            }, 
            content: { 
                type: 'array', 
                source: 'children', 
                selector: 'p', 
            }, 
            buttonText: { 
                type: 'array', 
                source: 'children', 
                selector: 'span', 
            }, 
            buttonURL: { 
                type: 'url', 
                selector:'div' 
            },
            // 新增背景色和文字颜色属性
            backgroundColor: {
                type: 'string',
            },
            textColor: {
                type: 'string',
            }
        }, 
        edit: function( props ) { 
            var title = props.attributes.title; 
            var content = props.attributes.content; 
            var buttonText = props.attributes.buttonText; 
            var buttonURL = props.attributes.buttonURL;
            var backgroundColor = props.attributes.backgroundColor;
            var textColor = props.attributes.textColor;

            function onChangeTitle( newTitle ) { 
                props.setAttributes( { title: newTitle } ); 
            } 
            function onChangeContent( newContent ) { 
                props.setAttributes( { content: newContent } ); 
            } 
            function onChangeButtonText( newButtonText ) { 
                props.setAttributes( { buttonText: newButtonText } ); 
            }
            // 更新背景色的回调函数
            function onChangeBackgroundColor( newColor ) {
                props.setAttributes( { backgroundColor: newColor } );
            }
            // 更新文字颜色的回调函数
            function onChangeTextColor( newColor ) {
                props.setAttributes( { textColor: newColor } );
            }

            return [ 
                el( InspectorControls, { key: 'inspector' }, 
                    el( components.PanelBody, { 
                        title: i18n.__( 'Color Block Settings' ), 
                        className: 'block-social-links', 
                        initialOpen: true, 
                    }, 
                        el( 'p', {}, i18n.__( 'Enter the button url here to navigate button when click.' ) ), 
                        el( TextControl, { 
                            type: 'url', 
                            label: i18n.__( 'Button URL' ), 
                            value: buttonURL, 
                            onChange: function( newButton ) { 
                                props.setAttributes( { buttonURL: newButton } ); 
                            }, 
                        } ),
                        // 添加背景色选择器
                        el( 'div', { style: { margin: '16px 0' } },
                            el( 'label', { style: { display: 'block', marginBottom: '8px', fontWeight: 'bold' } },
                                i18n.__( 'Background Color' )
                            ),
                            el( ColorPalette, {
                                value: backgroundColor,
                                onChange: onChangeBackgroundColor,
                            } )
                        ),
                        // 添加文字颜色选择器
                        el( 'div', { style: { margin: '16px 0' } },
                            el( 'label', { style: { display: 'block', marginBottom: '8px', fontWeight: 'bold' } },
                                i18n.__( 'Text Color' )
                            ),
                            el( ColorPalette, {
                                value: textColor,
                                onChange: onChangeTextColor,
                            } )
                        )
                    ), 
                ), 
                el( 'div', {
                    className: props.className + ' color-content-block',
                    // 应用选中的颜色样式到编辑容器
                    style: {
                        backgroundColor: backgroundColor,
                        color: textColor,
                        padding: '16px', // 加内边距优化显示效果
                    }
                }, 
                    el(RichText, { 
                        tagName: 'h3', 
                        className: props.className, 
                        value: title, 
                        placeholder: 'Block Title...', 
                        keepPlaceholderOnFocus: true, 
                        focus: props.focus, 
                        onFocus: props.setFocus, 
                        onChange: onChangeTitle 
                    } ), 
                    el(RichText, { 
                        tagName: 'p', 
                        className: props.className + ' block-content', 
                        onChange: onChangeContent, 
                        placeholder: 'Block Content...', 
                        value: content, 
                        focus: props.focus, 
                        onFocus: props.setFocus 
                    } ), 
                    el ( 'span', { className: props.className + ' btn' }, 
                        el(RichText, { 
                            tagName: 'span', 
                            className: props.className, 
                            placeholder: 'Button Title...', 
                            onChange: onChangeButtonText, 
                            value: buttonText, 
                            focus: props.focus, 
                            onFocus: props.setFocus, 
                        } ), 
                    ), 
                    el ( 'div', { className: props.className + ' display-none' }, 
                        buttonURL, 
                    ), 
                ) 
            ];
        }, 
        save: function( props ) { 
            var title = props.attributes.title; 
            var content = props.attributes.content; 
            var buttonText = props.attributes.buttonText; 
            var buttonURL = props.attributes.buttonURL;
            var backgroundColor = props.attributes.backgroundColor;
            var textColor = props.attributes.textColor;

            return el( 'div', {
                className: 'color-title-block',
                // 保存时将颜色样式同步到前端
                style: {
                    backgroundColor: backgroundColor,
                    color: textColor,
                    padding: '16px',
                }
            }, 
                el( 'h3', {}, title ), 
                el( 'p', { className:'block-content' }, content ), 
                el('span', { className: 'btn' }, buttonText ), 
                el( 'div', {}, buttonURL ), 
            ); 
        }, 
    } ); 
} )( window.wp.blocks, window.wp.components, window.wp.i18n, window.wp.element );

额外小贴士 #

• 代码里加了padding: '16px'是为了避免内容贴在区块边缘，你可以根据自己的设计需求调整
• 如果你的WordPress主题自定义了Gutenberg调色板，这个组件会自动复用主题的颜色配置，不用额外修改
• 如果需要单独设置按钮的颜色，可以再添加一个buttonColor属性和对应的调色板组件

内容的提问来源于stack exchange，提问作者Pavithra Isuru