附加的 CSS 类不适用于自定义古腾堡块答案

【问题标题】：Additional CSS class not working with custom gutenberg block附加的 CSS 类不适用于自定义古腾堡块
【发布时间】：2021-10-25 15:50:41
【问题描述】：

我正在尝试在自定义 WordPress Gutenberg 块中添加一个带有 Additional CSS class 的新类。它会在 div 的编辑器端添加更改的类，但是当我保存并重新加载页面时，Additional CSS class 字段将为空白。

这是我的代码

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',
    edit,
    save(props) {
        const { attributes, className } = props;
        const classes = classnames(
            className,
            'button-wrap'
        );
        
        return (
            <Fragment>
                <div className={classes}>
                    sdfsd
                </div>
            </Fragment>
        );
    }
} );

如果有人有任何想法，请告诉我。谢谢

【问题讨论】：

标签： wordpress-gutenberg gutenberg-blocks

【解决方案1】：

函数useBlockProps() 可以在edit() 和save() 函数中添加任何其他类。

在您的代码中，添加 import { useBlockProps } from '@wordpress/block-editor' 然后替换：

const classes = classnames(
    className,
    'button-wrap'
);
...
<div className={classes}>sdfsd</div>

与：

const blockProps = useBlockProps( {
        className: 'button-wrap',
});
...
<div { ...blockProps }>sdfsd</div>

【讨论】：