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

时间：2018-12-28 作者：Runnick

我正在尝试在古腾堡创建自定义列块。是否可以根据属性将类添加到编辑器中元素的包装器中？我想换一下??? 以类为基础，例如。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>

2 个回复
最合适的回答,由SO网友:Runnick 整理而成

实际上，可以用filter:

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 );

SO网友:SteveEmmE

我认为也可以使用useBlockProps管理包装器类。我在古腾堡官方文件中找到了这个解决方案，here

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

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

// ...

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

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

标签： block-editor   小码农  

相关推荐