为Gutenberg自定义块添加内置调色板

Posted 2021-03-27

我创建了一个Gutenberg自定义块。 My Gutenberg custom block

在这个块中，我需要更改背景颜色（绿色）和文本颜色。有没有办法让我启用内置的Gutenberg颜色托盘，当我点击默认的Gutenberg段落和其他块时出现。

这是我的Gutenberg块的代码。

    ( 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;

    registerBlockType( 'futurelab/color-block', { // The name of our block. Must be a string with prefix. Example: my-plugin/my-custom-block.
        title: i18n.__( 'Color Block' ), // The title of our block.
        description: i18n.__( 'A custom block for displaying color blocks.' ), // The description of our block.
        icon: 'media-document', // Dashicon icon for our block. Custom icons can be added using inline SVGs.
        category: 'common', // The category of the block.

        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'
            },
        },


        // The "edit" property must be a valid function.
        edit: function( props ) {
            var title = props.attributes.title; // Content in our block.
            var content = props.attributes.content; // Content in our block.
            var buttonText = props.attributes.buttonText; // Content in our block.
            var buttonURL = props.attributes.buttonURL;


            /**
             * Update title on change.
             */
            function onChangeTitle( newTitle ) {
                props.setAttributes( { title: newTitle } );
            }
            function onChangeContent( newContent ) {
                props.setAttributes( { content: newContent } );
            }
            function onChangeButtonText( newButtonText ) {
                props.setAttributes( { buttonText: newButtonText } );
            }

            // The editable title.
            return [
                el( InspectorControls, { key: 'inspector' }, // Display the block options in the inspector panel.
                    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',
                    {className: props.className + ' color-content-block'},
                    el(RichText, // Editable React component.
                        {
                            tagName: 'h3', // <p></p>.
                            className: props.className, // The class="wp-editor-gb-03-block-editable".
                            value: title, // Content in our block. i.e. props.attributes.title;
                            placeholder: 'Block Title...',
                            keepPlaceholderOnFocus: true,
                            focus: focus, // Focus — should be truthy. i.e. props.focus;
                            onFocus: props.setFocus,
                            onChange: onChangeTitle
                        }
                    ),
                    el(RichText, // Editable React component.
                        {
                            tagName: 'p', // <p></p>.
                            className: props.className + ' block-content', // The class="wp-editor-gb-03-block-editable".
                            onChange: onChangeContent, // Run the onChangeContent() function onChange of title.
                            placeholder: 'Block Content...',
                            value: content, // Content in our block. i.e. props.attributes.title;
                            focus: focus, // Focus — should be truthy. i.e. props.focus;
                            onFocus: props.setFocus
                        }
                    ),
                    el (
                        'span',
                        {   className: props.className + ' btn' },
                        el(RichText, // Editable React component.
                            {
                                tagName: 'span', // <p></p>.
                                className: props.className, // The class="wp-editor-gb-03-block-editable".
                                placeholder: 'Button Title...',
                                onChange: onChangeButtonText, // Run the onChangeContent() function onChange of title.
                                value: buttonText, // Content in our block. i.e. props.attributes.title;
                                focus: focus, // Focus — should be truthy. i.e. props.focus;
                                onFocus: props.setFocus,
                            }
                        ),

                    ),
                    el (
                        'div',
                        {   className: props.className + ' display-none' },
                        buttonURL,
                    ),
                )
            ]
        },

        // The "save" property must be specified and must be a valid function.
        save: function( props ) {
            var title = props.attributes.title; // Content in our block.
            var content = props.attributes.content; // Content in our block.
            var buttonText = props.attributes.buttonText; // Content in our block.
            var buttonURL = props.attributes.buttonURL;

            // The frontend title.
            return el(
                'div',
                {className: 'color-title-block'},
                el( 'h3',  { // <p></p>.
                        className:'', // The class="wp-block-gb-block-editable-03".
                    },
                    title,
                ),
                el( 'p',  { // <p></p>.
                        className:'block-content', // The class="wp-block-gb-block-editable-03".
                    },
                    content,
                ),
                el('span', {
                        className: 'btn'
                    },
                    buttonText,
                ),
                el( 'div', {
                        className: ''
                    },
                    buttonURL
                ),
            );
        },
    } );

} )(
    window.wp.blocks,
    window.wp.components,
    window.wp.i18n,
    window.wp.element,
);

请帮帮我。

答案

您需要添加一个属性来存储颜色，然后将编辑函数包装在名为withColors的高阶组件中，并在InspectorControls中包含PanelColorSettings，两者都在wp.editor中。

var PanelColorSettings = wp.editor.ColorPanelSettings;
var withColors = wp.editor.withColors
var compose = wp.compose.compose

 ...

 attributes: {
   myColorAttributeName: {
     type: 'string'
   }
 }

 ...

 edit: compose([withColors('myColorAttributeName')])(myRegularEditFunction)

这会暴露一个新的prop函数，它自动被称为setMyColorAttributeName（如setAttributes()），您可以在PanelColorSettings元素onChange函数中使用它。

*更新：2019年3月*

使用更完整的示例更新响应

// get these from the wp object.
const { withColors, PanelColorSettings, getColorClassName } = wp.editor;
const { compose } = wp.compose;
const { Fragment } = wp.element;

...

/** extract your edit component into a function like this.
* this will give you a settings panel on the sidebar with
* the color swatches and handle the onChange function
*/
const EditComponent = ({colorScheme, setColorScheme} /* and your other props */) => (
  <Fragment>
    <InspectorControls>
       <PanelColorSettings
          title={ 'Color Options' }
          colorSettings={ [
              {
                value: colorScheme.color,
                label: 'Block Color Scheme',
                onChange: setColorScheme,
              },
          ] }
       />
    </InspectorControls>

    <YOUR-ACTUAL-BLOCK-MARKUP />
  <Fragment>
);

...

registerBlockType( 'namespace/blockslug', {
...
  edit: compose( [withColors('colorScheme')] )(EditComponent)

});

添加此标记后，您可以在渲染功能中访问getColorClassName( 'background-color', attributes.colorScheme)。在这个例子中它返回类似has-purple-background-color的东西。编写一些应该更容易的东西是很多代码，但它可以工作。

自从WP 5正式发布以来，WP和Gutenberg团队可能已经改变了这一点，但它仍然在WP 5.1.1上为我工作，所以，我正在提交它。