web-dev-qa-db-fra.com

Ajouter un nom de classe au bloc enveloppe Gutenberg dans l'éditeur?

J'essaie de créer un bloc de colonnes personnalisé dans Gutenberg. Est-il possible d'ajouter une classe au wrapper de l'élément dans l'éditeur en fonction des attributs? J'aimerais passer de ??? à une classe, par exemple. columns-4. Sinon, il n'est pas possible d'utiliser 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>
block-editor
1
Runnick

En fait, cela peut être fait avec le filtre 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 );
4
Runnick