Добавление пользовательской категории как обёртки для кастомных блоков в редакторе Gutenberg

Question

Добавление пользовательской категории как обёртки для кастомных блоков в редакторе Gutenberg

29 сент. 2018 г., 18:23:58

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

Голосов: 11

Как известно из предоставленного API Gutenberg, мы можем создать кастомный блок следующим образом:

const { registerBlockType } = wp.blocks;

registerBlockType( 'my-namespace/my-block', {

})

Но как создать обёртку (категорию, например, для макетов) вокруг моих кастомных блоков в редакторе Gutenberg? Допустим, я хочу иметь коллектор для своих пользовательских элементов, таких как слайдер, галерея...

fefe

894

категории кастомизация редактор блок редактор

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

Комментарии

Выглядит хорошо, но у меня не получается заставить это работать. Я могу подтвердить, что фильтр вызывается в get_block_categories() в post.php, как обнаружил Pat J.

Ryan Bayne

11 февр. 2019 г. 16:10:42

Если вы используете плагин, вам нужно обновить строку заголовка на 'title' => __( 'MyTitle', 'my-plugin-slug' ). Убедитесь, что имя категории в вашем плагине php и в block js совпадают, и не забудьте переактивировать ваш плагин.

Hunter Nelson

19 окт. 2019 г. 08:43:47

Можно отфильтровать список категорий блоков по умолчанию с помощью фильтра block_categories. Поместите код в файл functions.php или your-plugin.php. Подробнее в руководстве WordPress Gutenberg Handbook

function my_plugin_block_categories( $categories, $post ) {
    if ( $post->post_type !== 'post' ) {
        return $categories;
    }
    return array_merge(
        $categories,
        array(
            array(
                'slug' => 'my-category',
                'title' => __( 'Моя категория', 'my-plugin' ),
                'icon'  => 'wordpress',
            ),
        )
    );
}
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );

Для использования SVG-иконки вы можете заменить иконку в JS. Определите свою иконку.

const icon = <svg className='components-panel__icon' width='20' height='20' viewBox='0 0 20 20' aria-hidden='true' role='img' focusable='false' xmlns='http://www.w3.org/2000/svg'>
    <rect fill="#ffffff" x="0" y="0" width="20" height="20"/>
    <rect fill="#1163EB" x="2" y="2" width="16" height="16" rx="16"/>
</svg>;

и замените иконку с помощью функции updateCategory из wp.blocks;. Добавление класса components-panel__icon добавит отступ в 6px слева от иконки.

( function() {
    wp.blocks.updateCategory( 'my-category', { icon: icon } );
} )();

Aamer Shahzad

1.67K

26 февр. 2019 г. 20:37:41

Комментарии

И куда нужно добавлять функцию wp.blocks.updateCategory? Я пробовал это сделать, но у меня не получается. Можете поделиться полным рабочим .js файлом? Также, если я регистрирую категорию и у меня нет блоков, назначенных для этой категории, должна ли она все равно отображаться? У меня также не получается зарегистрировать категорию. Еще я не вижу фильтр block_categories в справочной документации по фильтрам: https://codex.wordpress.org/Plugin_API/Filter_Reference

Radmation

9 апр. 2019 г. 19:56:32

Я не использую никаких шаблонов. Вот входной файл для моих блоков https://codepen.io/talentedaamer/pen/YMZzjY, используемый в https://wordpress.org/plugins/easy-blocks/

Aamer Shahzad

10 апр. 2019 г. 09:51:13

Работает отлично, спасибо! Сброс также работает: updateCategory('ghostkit', { icon: '' })

kero

17 мая 2019 г. 17:24:49

fefe 894 · Accepted Answer · 2018-09-30T22:51:03Z

Погружаясь глубже в документацию, я получил следующий результат.

Существует способ группировать пользовательские блоки по заданной категории в Gutenberg, для этого есть метод block_categories_all. С помощью фильтра можно расширить стандартные категории своими собственными.

Вот мой пример:

add_filter( 'block_categories_all', function( $categories, $post ) {
    return array_merge(
        $categories,
        array(
            array(
                'slug'  => 'my-slug',
                'title' => 'my-title',
            ),
        )
    );
}, 10, 2 );

Подробнее об этом можно узнать в предоставленном API.