Cum adaugi o clasă CSS personalizată blocurilor de bază în editorul Gutenberg?

Question

Cum adaugi o clasă CSS personalizată blocurilor de bază în editorul Gutenberg?

9 iul. 2018, 08:23:30

Vizualizări: 26.9K

Voturi: 14

Încerc să adaug o clasă blocurilor de tip listă (core/list) în Gutenberg. Din păcate, se pare că deoarece unele blocuri precum listele și paragrafele nu au numele standard de clasă wp-block-{name}, acestea nu pot fi redenumite folosind filtrul blocks.getBlockDefaultClassName.

Pentru a rezolva asta, am folosit filtrul blocks.getSaveContent.extraProps, care pare să-mi permită să adaug o clasă TUTUROR blocurilor care nu au deja clase. Codul de mai jos arată cum am reușit asta. Acesta adaugă added-class-name blocurilor precum liste, paragrafe și așa mai departe.

function addBlockClassName( className ) {
  // Adaugă clasa nouă la proprietățile blocului
  return Object.assign( className, { class: 'added-class-name' } );
}

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

Și îl încarc astfel:

function gdt_blocks_class_rename() {
  // Înregistrează scriptul pentru editorul de blocuri
  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' );

Totuși, ceea ce vreau să fac este să adaug o clasă DOAR blocurilor de tip listă. Este posibil acest lucru?

Trevor

717

filtre css javascript editor pe blocuri

Toate răspunsurile la întrebare

Ai al doilea și al treilea argument cu acest hook pe care le poți folosi pe al doilea pentru a obține tipul de bloc.

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

Un filtru care se aplică tuturor blocurilor returnând un WP Element în funcția save. Acest filtru este folosit pentru a adăuga proprietăți suplimentare elementului rădăcină al funcției save. De exemplu: pentru a adăuga o clasă (className), un id sau orice altă proprietate validă pentru acest element. Primește ca argumente proprietățile curente ale elementului save, tipul blocului și atributele blocului.

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 iul. 2018 12:48:15

Comentarii

Nu ar trebui ca class: 'wp-block-list' să fie className: 'wp-block-list'? De asemenea, acum există un filtru blocks.getBlockDefaultClassName. @see https://developer.wordpress.org/block-editor/developers/filters/block-filters/#blocks-getblockdefaultclassname

Pea

21 sept. 2019 23:26:27

Există probleme în răspunsul marcat ca corect. Acesta va afecta funcționalitatea clasei de aliniere și nu adaugă efectiv la classList, ci îl înlocuiește. Și veți putea folosi doar acea soluție pentru întreaga temă.

În schimb, puteți folosi "registerBlockStyle()" pentru a adăuga o variație de stil la blocul de listă și setați "isDefault" pe true pentru a utiliza acea clasă/stil, dar totuși să puteți sări peste utilizarea ei sau să adăugați mai multe variații dacă doriți.

wp.domReady() asigură că se încarcă atunci când ar trebui și aplică modificările

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

MrVanilla

171

21 sept. 2020 10:35:10

Comentarii

Sunt de acord. Deși răspunsul original "funcționează", ai dreptate că poate cauza probleme. Dacă încerci să adaugi o altă clasă mai târziu în editorul WP, acesta va refuza și lucrurile se vor strica. Am trecut și eu la utilizarea Block Styles acum.

Trevor

18 ian. 2021 07:57:03

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

În primul rând, există o propunere de a adăuga această clasă în mod implicit într-o versiune viitoare a WordPress.

Dacă aveți nevoie doar să adăugați o clasă în partea de front-end a site-ului (editorul are deja clasa wp-block-list pe blocurile de listă), puteți face acest lucru cu PHP și clasa WP_HTML_Tag_Processor (nouă în WordPress 6.2) prin intermediul filtrului render_block.

<?php
add_filter( 'render_block', 'wpse308021_add_class_to_list_block', 10, 2 );
/**
 * Polifilare pentru clasa wp-block-list pe blocurile de listă
 *
 * Nu ar trebui să fie necesar în versiunile viitoare de 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(); /* primul tag ar trebui să fie întotdeauna ul sau ol */
        $block_content->add_class( 'wp-block-list' );
        $block_content->get_updated_html();
    }

    return $block_content;
}