自定义WordPress Gutenberg区块Additional CSS class功能失效问题

你遇到的问题是自定义Gutenberg区块默认未开启自定义CSS类的持久化支持，Gutenberg不会自动存储你在Additional CSS class字段输入的值，因此页面刷新后字段就会清空。

解决方法 #

只需要在registerBlockType的区块配置中添加supports参数，开启customClassName支持即可，修改后的完整代码如下：

import classnames from "classnames";
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { Component, Fragment } from '@wordpress/element';

class edit extends Component {
    constructor(){
        super(...arguments);
    }

    render(){
        const { attributes, setAttributes, className } = this.props;
        const classes = classnames(
            className,
            'button-wrap'
        );
        return (
            <Fragment>
                <div className={classes}>
                    sdfsd
                </div>
            </Fragment>
        )
    }
}

registerBlockType( 'gb/button', {
    title: __( 'Button' ),
    description: __( 'Button' ),
    icon: 'dashicons-admin-media',
    category: 'common',
    // 新增supports配置开启自定义CSS类支持
    supports: {
        customClassName: true
    },
    edit,
    save(props) {
        const { attributes, className } = props;
        const classes = classnames(
            className,
            'button-wrap'
        );
        
        return (
            <Fragment>
                <div className={classes}>
                    sdfsd
                </div>
            </Fragment>
        );
    }
} );

开启该配置后，Gutenberg会自动将Additional CSS class字段输入的值存储到区块属性中，同时自动注入到组件props的className参数里，你现有代码中对className的使用逻辑无需调整，修改后重新构建区块代码即可生效。

内容的提问来源于stack exchange，提问作者Sadik Multani