¿Cómo añadir una clase CSS personalizada a los bloques principales en el editor Gutenberg?

Question

¿Cómo añadir una clase CSS personalizada a los bloques principales en el editor Gutenberg?

9 jul 2018, 08:23:30

Vistas: 26.9K

Votos: 14

Estoy intentando añadir una clase a los bloques de lista (core/list) en Gutenberg. Desafortunadamente, parece que debido a que algunos bloques como listas y párrafos no tienen el nombre de clase predeterminado estándar wp-block-{name}, no pueden ser renombrados usando el filtro blocks.getBlockDefaultClassName.

Para evitar esto, he usado el filtro blocks.getSaveContent.extraProps, que parece permitirme añadir una clase a TODOS los bloques que aún no tienen clases. El código a continuación muestra cómo lo hice funcionar. Está añadiendo added-class-name a bloques como listas, párrafos y similares.

// Función para añadir nombre de clase al bloque
function addBlockClassName( className ) {
  return Object.assign( className, { class: 'added-class-name' } );
}

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

Y lo estoy encolando así:

// Encolar el script para renombrar clases de bloques
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' );

Sin embargo, lo que quiero hacer es añadir una clase SOLAMENTE a los bloques de lista. ¿Es posible hacer esto?

Trevor

717

filtros css javascript block editor

Todas las respuestas a la pregunta

Tienes segundo y tercer argumentos con este hook que puedes usar el segundo para obtener el tipo de bloque.

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

Un filtro que se aplica a todos los bloques que devuelven un elemento WP en la función save. Este filtro se usa para agregar propiedades adicionales al elemento raíz de la función save. Por ejemplo: para agregar un className, un id, o cualquier propiedad válida para este elemento. Recibe las props actuales del elemento save, el tipo de bloque y los atributos del bloque como argumentos.

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

Comentarios

¿No debería ser class: 'wp-block-list' en lugar de className: 'wp-block-list'? Además, ahora existe un filtro blocks.getBlockDefaultClassName. @see https://developer.wordpress.org/block-editor/developers/filters/block-filters/#blocks-getblockdefaultclassname

Pea

21 sept 2019 23:26:27

Hay problemas en la respuesta marcada como correcta. Romperá la funcionalidad de la clase de alineación, y en realidad no está añadiendo al classList, sino que lo está sobrescribiendo. Además, solo podrás usar esa solución para todo tu tema.

En su lugar, puedes usar "registerBlockStyle()" para añadir una variación de estilo al bloque de lista, y establecer "isDefault" como verdadero para que use esa clase/estilo pero aún así puedas omitir su uso, o añadir múltiples variaciones si lo deseas.

El wp.domReady() asegura que se cargue cuando debería y aplique los cambios

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

MrVanilla

171

21 sept 2020 10:35:10

Comentarios

Estoy de acuerdo. Si bien la respuesta original "funciona", tienes razón en que puede causar problemas. Si intentas agregar otra clase más adelante al editor de WP, este se resiste y las cosas se rompen. Yo también he cambiado a usar Block Styles ahora.

Trevor

18 ene 2021 07:57:03

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

Primero, existe una propuesta para potencialmente añadir esta clase por defecto en una futura versión de WordPress.

Si solo necesitas añadir una clase en el front-end del sitio (el editor ya incluye wp-block-list en los bloques de lista), puedes hacerlo con PHP y la clase WP_HTML_Tag_Processor (novedad en WordPress 6.2) mediante el filtro render_block.

<?php
add_filter( 'render_block', 'wpse308021_add_class_to_list_block', 10, 2 );
/**
 * Polifuncionalidad para añadir la clase wp-block-list a bloques de lista
 *
 * No debería ser necesario en futuras versiones 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(); /* el primer tag siempre debería ser ul u ol */
        $block_content->add_class( 'wp-block-list' );
        $block_content->get_updated_html();
    }

    return $block_content;
}