在编辑器中将类名添加到Gutenberg块包装器？

Question

我试图在古腾堡创建自定义列块。可以根据属性将类添加到编辑器中的元素包装器中吗？我想把???换成基于类的，例如columns-4。否则，不可能使用flex。

<div id="..." class="wp-block editor-block-list__block ???" data-type="my-blocks/column" tabindex="0" aria-label="Block: Single Column">
 <div>
      <div class="this-can-be-set-in-edit-or-attributes">
         ...
     </div>
 </div>

</div>

Answer 1

实际上，它可以通过过滤器来完成：

const { createHigherOrderComponent } = wp.compose;
const withCustomClassName = createHigherOrderComponent( ( BlockListBlock ) => {
    return ( props ) => {
        if(props.attributes.size) {
            return <BlockListBlock { ...props } className={ "block-" + props.attributes.size } />;
        } else {
            return <BlockListBlock {...props} />
        }

    };
}, 'withClientIdClassName' );

wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-name', withCustomClassName );

Answer 2

我认为也可以使用useBlockProps管理包装类。我在官方的古登堡博士，这里中找到了这个解决方案。

import { useBlockProps } from '@wordpress/block-editor';

// ...
const blockSettings = {
apiVersion: 2,

// ...

edit: () => {
    const blockProps = useBlockProps( {
        className: 'my-random-classname',
    } );

    return <div { ...blockProps }>Your block.</div>;
},
};