Wordpress 将类添加到核心块工作但给出验证错误

Question

Following this guide from Jeffrey Carandang works with when a single class is added, no block validation errors.

But when I modify it to add more attributes and classes I get a block validation error.

The classes I want to add are added as expected on the front end.

I see that a validation error is expected when using blocks.getSaveContent.extraProps on existing content but the error appears when there is no content at all.

#imports

const allowedBlocks = ['core/button']

function addAttributes(settings) {
   if (allowedBlocks.includes(settings.name)) {
      settings.attributes = Object.assign(settings.attributes, {
         buttonColor: {
            type: 'string',
            default: 'color-blue',
         },
         buttonWidth: {
            type: 'string',
            default: 'width-default',
         },
         buttonStyle: {
            type: 'string',
            default: 'style-default',
         },
      })
   }

   return settings
}

const withAdvancedControls = createHigherOrderComponent((BlockEdit) => {
   return (props) => {
      const { name, attributes, setAttributes, isSelected } = props

      const { buttonColor, buttonWidth, buttonStyle } = attributes

      function onChangeButtonColor(newValue) {
         setAttributes({ buttonColor: newValue })
      }
      function onChangeButtonWidth(newValue) {
         setAttributes({ buttonWidth: newValue })
      }
      function onChangeButtonStyle(newValue) {
         setAttributes({ buttonStyle: newValue })
      }

      return (
         <Fragment>
            <BlockEdit {...props} />
            {isSelected && allowedBlocks.includes(name) && (
               <InspectorControls>
                  <PanelBody title="Button Settings" initialOpen={true}>
                     <PanelRow>
                        <RadioControl
                           label="Color"
                           selected={buttonColor}
                           options={[
                              { label: 'Blue', value: 'color-blue' },
                              {
                                 label: 'Light Gray',
                                 value: 'color-light-gray',
                              },
                              { label: 'Dark Gray', value: 'color-dark-gray' },
                           ]}
                           onChange={onChangeButtonColor}
                        />
                     </PanelRow>
                     <PanelRow>
                        <RadioControl
                           label="Width"
                           selected={buttonWidth}
                           options={[
                              { label: 'Default', value: 'width-default' },
                              { label: 'Full Width', value: 'width-full' },
                           ]}
                           onChange={onChangeButtonWidth}
                        />
                     </PanelRow>
                     <PanelRow>
                        <RadioControl
                           label="Style"
                           selected={buttonStyle}
                           options={[
                              { label: 'Default', value: 'style-default' },
                              { label: 'Outline', value: 'style-outline' },
                           ]}
                           onChange={onChangeButtonStyle}
                        />
                     </PanelRow>
                  </PanelBody>
               </InspectorControls>
            )}
         </Fragment>
      )
   }
}, 'withAdvancedControls')

function applyExtraClass(extraProps, blockType, attributes) {
   const { buttonColor, buttonWidth, buttonStyle } = attributes

   if (allowedBlocks.includes(blockType.name)) {
      const addedClasses = `${buttonColor} ${buttonWidth} ${buttonStyle}`
      extraProps.className = classnames(extraProps.className, addedClasses)
   }

   return extraProps
}

addFilter(
   'blocks.registerBlockType',
   'editorskit/custom-attributes',
   addAttributes
)

addFilter(
   'editor.BlockEdit',
   'editorskit/custom-advanced-control',
   withAdvancedControls
)

addFilter(
   'blocks.getSaveContent.extraProps',
   'editorskit/applyExtraClass',
   applyExtraClass
)

Any help would be appreciated.

Answer 1

I believe you may be over-thinking things in your use of the classname NPM package. The whole point of using it is that it strings the classes together for you. I suggest you replace classnames(extraProps.className, addedClasses) with classnames(extraProps.className, buttonColor, buttonWidth, buttonStyle) .