wordpress-gutenberg - 调色板样式未正确添加

Question

由于我无法理解的原因，自定义 CSS 颜色名称未正确添加到 html 元素中。例如 - 我的自定义块有 text-color-red 调色板，它完美地显示出来。当我选择颜色时，相应的 HTML 元素会添加 text-color-#F44336 CSS 类而不是 text-color-red 。因此，颜色不应用于元素。任何帮助将不胜感激

函数.php代码

function mytheme_setup_theme_supported_features() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name' => __( 'red', 'tar' ),
            'slug' => 'red',
            'color' => '#F44336',
        ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

块代码

/**
 * BLOCK:  Accordion Image Block
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './style.scss';
import './editor.scss';




// let's us call registerBlockType() directly from the wp.blocks library
const { 
    registerBlockType, 
} = wp.blocks;


// let's us use the withAPIData() function from the wp.components library to access the Rest API
const {
    PanelBody,
    PanelColor,
    FormToggle,
    RangeControl,
    SelectControl,
    ToggleControl,
    Button 
} = wp.components;

// let's us use the __() function from the wp.i18n library to translate strings
const { __ } = wp.i18n;


const { Fragment } = wp.element;
const {
    RichText,
    BlockControls,
    InspectorControls,
    MediaUpload,
    ColorPalette,
    BlockDescription,
    BlockAlignmentToolbar,
    PanelColorSettings,
} = wp.editor;


const accordionImageEdit = ( props ) => {

    const { isSelected, className, setAttributes } = props;

    const { 
        textColor,
        imgOneID,
        imgOneURL,
        imgOneTxt,

     } = props.attributes;

    //Handle Image changes
    const onSelectImageOne = ( media ) => {
        setAttributes( {
            imgOneURL: media.url,
            imgOneID: media.id,
        } );
    };



     return [
         isSelected && (
            <InspectorControls key= { 'inspector' } >

                <PanelBody title={__('Image Accordion Block Settings', 'text-domain')}>

                    <PanelColorSettings 
                        title={ __('Color Settings', 'text-domain') }
                        colorSettings= { [ 
                            {
                            value: textColor,
                            onChange: (colorValue) => setAttributes ( { textColor: colorValue } ),
                            label: __('Text Color', 'text-domain'),
                            },
                         ] }
                    />
                </PanelBody>

            </InspectorControls>
         ),

         <div class="accordimg">
            <ul>
            <li>
                <MediaUpload
                        onSelect={ onSelectImageOne }
                        type="image"
                        value={ imgOneID }
                        render={ ( { open } ) => (
                            <Button className={ imgOneID ? 'image-button' : 'button button-large' } onClick={ open }>
                                { ! imgOneID ? __( 'Upload Image', 'text-domain' ) :  <img src={ imgOneURL } alt={ __( 'Upload Image', 'text-domain' ) } /> }
                            </Button>
                        ) }
                    />


                <div className="text--container">
                <RichText
                    tagName="h3"
                    placeholder={ __( 'Nature', 'text-domain' ) }
                    value={ imgOneTxt }
                    onChange={  (onChangeImgOneTxt) => setAttributes({ imgOneTxt: onChangeImgOneTxt}) }
                    className={ `font-size-${textSize} text-color-${textColor}` }

                />
                </div>


                </li>


            </ul>
            </div>

     ]

}

const accordionImageSave = ( props ) => {
    const { isSelected, className, setAttributes } = props;

    const { 
        textColor,
        imgOneID,
        imgOneURL,
        imgOneTxt,

     } = props.attributes;

     return (
         <div className="accordimg">
             <ul>
                <li 
                 style= { { backgroundImage: 'url(' + imgOneURL + ')',} }
                >

                    <div className="text--container">
                        <RichText.Content
                        tagName="h3"
                        value={ imgOneTxt }
                        className={ `font-size-${textSize} text-color-${textColor}` }
                        />
                    </div>
                </li>


             </ul>
         </div>
     )
}

 registerBlockType('theme/accordion-image-block',{
     title: __( 'Image accordion', 'text-domain' ),
     icon: 'megaphone',
     description: __('Image accordion block for  Theme', 'text-domain'),
     category: __('blocks', 'text-domain'),
     keywords: [
         __( 'Accordion Block', 'text-domain' ),
     ],
     attributes: {

         textColor: {
            type: 'string',
            default: '#111'
         },


        imgOneID: {
             type: 'number',
        },
        imgOneURL: {
            type: 'string',
        },
        imgOneTxt: {
            type: 'string',
            selector: 'h3',
            default: __('Nature', 'text-domain') ,
        },

     },

     edit: accordionImageEdit,

     save: accordionImageSave,

 })

editor.css 和 style.css

  .text-color-red {
    color:#F44336;
  }