Как скрыть интерфейс для определенных блоков Гутенберга?

Содержание

Вопрос или проблема
Ответ или решение
Как скрыть интерфейс для определённых Gutenberg-блоков в WordPress
Использование фильтра allowed_block_types
JavaScript-решение для скрытия блоков
Заключение

Вопрос или проблема

Я нашел статью об этом фильтре, но мне нужно передать ему массив допустимых блоков. Вот что у меня есть на данный момент: ddd — это моя функция отладки из Kint Debugger, она показывает, что $allowed_blocks содержит булевое значение true, а не массив всех блоков, которые я ожидал. Так где мне взять массив всех блоков? Какой ужасный WP API.

add_filter( 'allowed_block_types', __NAMESPACE__ .  '\remove_core_video_blocks' );

function remove_core_video_blocks( $allowed_blocks ) {

    #ddd($allowed_blocks);

    $allowed_blocks = array_diff( $allowed_blocks, [ 'core-embed/youtube' ] );

    return $allowed_blocks;
}

Я попробовал

return array(
    'core/image',
    'core/paragraph',
    'core/heading',
    'core/list'
);

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

Нашел решение на JavaScript. Если я правильно помню, была какая-то речь о временном решении в этом или связанных вопросах на Github, так что имейте это в виду. Но, похоже, это означает только серверную часть, так что для скрытия интерфейса, я думаю, это будет нормально.

const wp = window.wp; // при использовании webpack

wp.data.dispatch( 'core/edit-post' ).hideBlockTypes( [
    'core-embed/youtube',
    'core-embed/vimeo',
    'core-embed/dailymotion',
    'core-embed/collegehumor',
    'core-embed/ted',
] );

Также нашел некоторые неправильные PHP-коды, которые я исправил, но они все равно не работают корректно, так как массив не содержит всех блоков.

add_filter( 'allowed_block_types', __NAMESPACE__ .  '\remove_core_video_blocks' );

function remove_core_video_blocks( $allowed_blocks ) {

    $guten_blocks = \WP_Block_Type_Registry::get_instance()->get_all_registered();

    foreach ( $guten_blocks as $key => $value) {
        $registered_blocks[] = $key;
    }

    $allowed_blocks = array_diff(
        $registered_blocks, // ЗАМЕТКА зарегистрированные блоки НЕ содержат все блоки
        array( 'wp-embed/youtube' )
    );

    return $allowed_blocks;
}

Ответ или решение

Как скрыть интерфейс для определённых Gutenberg-блоков в WordPress

В WordPress Gutenberg-контентный редактор предоставляет разработчикам множество инструментов для настройки пользовательского интерфейса и ограничения доступных блоков. Если вы хотите скрыть интерфейс определённых блоков, таких как блоки для встраивания видео, вы можете использовать различные подходы как на стороне сервера, так и на стороне клиента. В этой статье рассмотрим, как правильно это сделать, объясним возможные проблемы и предложим решение.

Использование фильтра `allowed_block_types`

Фильтр allowed_block_types позволяет вам определить, какие блоки доступны для использования в редакторе. Ваша задача состоит в том, чтобы исключить из этого массива блоки, которые вы хотите скрыть.

Шаг 1: Правильная настройка фильтра

Ваша первоначальная реализация имеет правильный подход, но для корректной работы вам нужно убедиться, что вы правильно обрабатываете массив разрешённых блоков. Если $allowed_blocks по умолчанию содержит true, это может означать, что блоки по умолчанию не ограничены. Давайте изменим код, чтобы мы могли использовать все зарегистрированные блоки и убрать ненужные.

Вот пример кода, который подойдет для этой задачи:

add_filter( 'allowed_block_types', 'remove_core_video_blocks' );

function remove_core_video_blocks( $allowed_blocks ) {
    // Получаем все зарегистрированные блоки
    $all_blocks = \WP_Block_Type_Registry::get_instance()->get_all_registered();
    $registered_blocks = array_keys( $all_blocks );

    // Здесь мы определяем блоки, которые хотим исключить
    $blocks_to_exclude = array(
        'core-embed/youtube',
        'core-embed/vimeo',
        // Добавьте другие блоки для исключения по мере необходимости
    );

    // Удаляем из списка разрешённых блоков блоки, которые нужно скрыть
    $allowed_blocks = array_diff( $registered_blocks, $blocks_to_exclude );

    return $allowed_blocks;
}

Шаг 2: Проверка и отладка

Убедитесь, что ваш новый код корректно работает и блоки действительно скрываются. Если вы всё еще видите блоки, возможно, они были добавлены ранее в редакторе. Соответственно, использование JavaScript для скрытия блоков может помочь скрыть их из интерфейса, но не полностью запретит их использование в редакторе.

JavaScript-решение для скрытия блоков

Если необходимо решить проблему на стороне клиента, вы можете использовать следующий JavaScript-код:

const wp = window.wp;

wp.data.dispatch('core/edit-post').hideBlockTypes([
    'core-embed/youtube',
    'core-embed/vimeo',
    // Добавьте другие блоки для скрытия
]);

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

Заключение

Скрытие определённых Gutenberg-блоков требует понимания работы API WordPress. Использование фильтра allowed_block_types позволяет вам модифицировать разрешённые блоки на серверной стороне, тогда как JavaScript может временно скрывать блоки на клиентской стороне. Оба этих подхода могут быть применены вместе для достижения наилучшего результата. Убедитесь, что тестируете изменения в безопасной среде, чтобы предотвратить возможные конфликты и ошибки.

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