Как добавить пользовательский CSS класс к базовым блокам в редакторе Gutenberg?

Question

Как добавить пользовательский CSS класс к базовым блокам в редакторе Gutenberg?

9 июл. 2018 г., 08:23:30

Просмотры: 26.9K

Голосов: 14

Я пытаюсь добавить класс к блокам списка (core/list) в Gutenberg. К сожалению, похоже, что некоторые блоки, такие как списки и параграфы, не имеют стандартного имени класса wp-block-{name}, поэтому их нельзя переименовать с помощью фильтра blocks.getBlockDefaultClassName.

Чтобы обойти это, я использовал фильтр blocks.getSaveContent.extraProps, который, похоже, позволяет добавить класс ко ВСЕМ блокам, у которых еще нет классов. Ниже код, как я это реализовал. Он добавляет added-class-name к блокам типа списков, параграфов и так далее.

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

И я подключаю его следующим образом:

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

Однако я хочу иметь возможность добавлять класс ТОЛЬКО к блокам списка. Возможно ли это вообще?

Trevor

717

фильтры css javascript блок редактор

Все ответы на вопрос

У этого хука есть второй и третий аргументы, вы можете использовать второй для получения типа блока.

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

Фильтр, который применяется ко всем блокам, возвращающим элемент WP в функции сохранения. Этот фильтр используется для добавления дополнительных пропсов к корневому элементу функции сохранения. Например: для добавления className, id или любого другого допустимого пропса для этого элемента. Он получает текущие пропсы элемента сохранения, тип блока и атрибуты блока в качестве аргументов.

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 июл. 2018 г. 12:48:15

Комментарии

Не должно ли быть class: 'wp-block-list' вместо className: 'wp-block-list'? Кроме того, теперь есть фильтр blocks.getBlockDefaultClassName. @see https://developer.wordpress.org/block-editor/developers/filters/block-filters/#blocks-getblockdefaultclassname

Pea

21 сент. 2019 г. 23:26:27

В ответе, отмеченном как правильный, есть проблемы. Он нарушит функциональность класса выравнивания и фактически не добавляет к classList, а перезаписывает его. Кроме того, вы сможете использовать только одно решение для всей темы.

Вместо этого вы можете использовать "registerBlockStyle()", чтобы добавить вариацию стиля к блоку списка, и установить "isDefault" в значение true, чтобы использовать этот класс/стиль, но при этом сохранить возможность пропустить его или добавить несколько вариаций, если нужно.

Функция wp.domReady() гарантирует, что код загрузится в нужный момент и применит изменения.

wp.domReady( () => {
  wp.blocks.registerBlockStyle( 'core/list', {
    name: 'custom-list-style',
    label: 'Пользовательский стиль списка',
    isDefault: true
  } );
} );

MrVanilla

171

21 сент. 2020 г. 10:35:10

Комментарии

Я согласен. Хотя оригинальный ответ действительно "работает", вы правы - это может вызвать проблемы. Если позже попытаться добавить еще один класс в редактор WP, он отказывается работать, и все ломается. Я тоже теперь перешел на использование Block Styles.

Trevor

18 янв. 2021 г. 07:57:03

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

Во-первых, есть предложение добавить этот класс по умолчанию в будущей версии WordPress.

Если вам нужно добавить класс только на фронтенде сайта (в редакторе уже есть wp-block-list для блоков списка), вы можете сделать это с помощью PHP и класса WP_HTML_Tag_Processor (новый в WordPress 6.2) через фильтр render_block.

<?php
add_filter( 'render_block', 'wpse308021_add_class_to_list_block', 10, 2 );
/**
 * Добавляет класс wp-block-list к блокам списка (полифил)
 *
 * В будущих версиях 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(); /* первый тег всегда должен быть ul или ol */
        $block_content->add_class( 'wp-block-list' );
        $block_content->get_updated_html();
    }

    return $block_content;
}