Come aggiungere una classe CSS personalizzata ai blocchi core nell'editor Gutenberg?

Question

Come aggiungere una classe CSS personalizzata ai blocchi core nell'editor Gutenberg?

9 lug 2018, 08:23:30

Visualizzazioni: 26.9K

Voti: 14

Sto cercando di aggiungere una classe ai blocchi lista (core/list) in Gutenberg. Purtroppo, sembra che poiché alcuni blocchi come liste e paragrafi non hanno il nome della classe predefinita standard wp-block-{name}, non possono essere rinominati usando il filtro blocks.getBlockDefaultClassName.

Per aggirare questo problema, ho usato il filtro blocks.getSaveContent.extraProps, che sembra permettermi di aggiungere una classe a TUTTI i blocchi che non hanno già delle classi. Il codice qui sotto mostra come l'ho fatto funzionare. Sta aggiungendo added-class-name a blocchi come liste, paragrafi e così via.

function addBlockClassName( className ) {
  // Assegna la classe al blocco
  return Object.assign( className, { class: 'added-class-name' } );
}

wp.hooks.addFilter(
  'blocks.getSaveContent.extraProps',
  'gdt-guten-plugin/add-block-class-name',
  addBlockClassName
);

E lo sto accodando così:

function gdt_blocks_class_rename() {
  wp_enqueue_script(
      'gdt-plugin-blacklist-blocks',
      get_stylesheet_directory_uri() . '/dist/guten-addons.js',
      array( 'wp-blocks' )
  );
}
add_action( 'enqueue_block_editor_assets', 'gdt_blocks_class_rename' );

Tuttavia, quello che voglio fare è aggiungere una classe SOLO ai blocchi lista. È possibile farlo?

Trevor

717

filtri css javascript editor di blocks

Tutte le risposte alla domanda

Puoi utilizzare il secondo e il terzo argomento con questo hook, il secondo ti permette di ottenere il tipo di blocco.

https://wordpress.org/gutenberg/handbook/extensibility/extending-blocks/

Un filtro che si applica a tutti i blocchi che restituiscono un Elemento WP nella funzione di salvataggio. Questo filtro viene utilizzato per aggiungere proprietà aggiuntive all'elemento radice della funzione di salvataggio. Ad esempio: per aggiungere una className, un id o qualsiasi prop valida per questo elemento. Riceve le props correnti dell'elemento di salvataggio, il tipo di blocco e gli attributi del blocco come argomenti.

function addBlockClassName( props, blockType ) {
    if(blockType.name === 'core/list') {
        return Object.assign( props, { class: 'wp-block-list' } );
    }
    return props;
}

wp.hooks.addFilter(
    'blocks.getSaveContent.extraProps',
    'gdt-guten-plugin/add-block-class-name',
    addBlockClassName
);

Shibi

1.86K

9 lug 2018 12:48:15

Commenti

Non dovrebbe essere class: 'wp-block-list' invece className: 'wp-block-list'? Inoltre, ora esiste un filtro blocks.getBlockDefaultClassName. @see https://developer.wordpress.org/block-editor/developers/filters/block-filters/#blocks-getblockdefaultclassname

Pea

21 set 2019 23:26:27

Ci sono problemi nella risposta contrassegnata come corretta. Interromperà la funzionalità della classe di allineamento e non sta effettivamente aggiungendo alla classList, ma la sta sovrascrivendo. Inoltre, potrai utilizzare quella soluzione solo per l'intero tema.

Invece, puoi utilizzare "registerBlockStyle()" per aggiungere una variazione di stile al blocco lista e impostare "isDefault" su true per utilizzare quella classe/stile, pur mantenendo la possibilità di saltarne l'uso o aggiungere più variazioni se lo desideri.

La funzione wp.domReady() garantisce che il codice venga caricato al momento giusto e applica le modifiche

wp.domReady( () => {
  wp.blocks.registerBlockStyle( 'core/list', {
    name: 'custom-list-style',
    label: 'Stile lista personalizzato',
    isDefault: true
  } );
} );

MrVanilla

171

21 set 2020 10:35:10

Commenti

Concordo. Sebbene la risposta originale "funzioni", hai ragione nel dire che può causare problemi. Se provi ad aggiungere un'altra classe successivamente, l'editor di WordPress si blocca e le cose smettono di funzionare. Anche io sono passato all'utilizzo degli Stili di Blocco ora.

Trevor

18 gen 2021 07:57:03

mrwweb 10.3K · Accepted Answer · 2023-05-22T23:57:16Z

Innanzitutto, c'è una proposta per potenzialmente aggiungere questa classe di default in una futura versione di WordPress.

Se hai bisogno di aggiungere una classe solo sul front-end del sito (l'editor ha già wp-block-list sui blocchi lista), puoi farlo con PHP e la classe WP_HTML_Tag_Processor (nuova in WordPress 6.2) attraverso il filtro render_block.

<?php
add_filter( 'render_block', 'wpse308021_add_class_to_list_block', 10, 2 );
/**
 * Polyfill per la classe wp-block-list sui blocchi lista
 *
 * Non dovrebbe essere necessario nelle future versioni di WP:
 * @see https://github.com/WordPress/gutenberg/issues/12420
 * @see https://github.com/WordPress/gutenberg/pull/42269
 */
function wpse308021_add_class_to_list_block( $block_content, $block ) {

    if ( 'core/list' === $block['blockName'] ) {
        $block_content = new WP_HTML_Tag_Processor( $block_content );
        $block_content->next_tag(); /* il primo tag dovrebbe sempre essere ul o ol */
        $block_content->add_class( 'wp-block-list' );
        $block_content->get_updated_html();
    }

    return $block_content;
}