Показ или скрытие пользовательского мета-бокса не работает с Гутенбергом

Содержание

Вопрос или проблема
Ответ или решение
Полный ответ на вопрос о скрытии пользовательских мета-боксов в Gutenberg
Ваш оригинальный код
Решение
Проверка и доработка
Заключение

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

Я использую WordPress 5 beta 4, проблема в том, что метабоксы не могут быть скрыты при выборе конкретного шаблона в атрибутах страницы. Чтобы они появились или исчезли, нужно обновить страницу в браузере или выйти из созданной страницы и снова войти в нее. Это не очень удобно для пользователей. Вот мой код:

<?php
function willer_custom_meta_portfolio_standar() {
    global $post;

    if(!empty($post))
    {
        $pageTemplate = get_post_meta($post->ID, '_wp_page_template', true);
        if($pageTemplate == 'template-pages/page-portfolio-standar.php' )
        {
            add_meta_box(
                'page-portfolio-standar-meta-box', // $id
                esc_html__('Настроить Портфолио Стандарт','willer'), // $title
                'willer_portfolio_standar_meta_callback', // $callback
                'page', // $page
                'normal', // $context
                'high'); // $priority
            }
        }

    }
    add_action( 'add_meta_boxes', 'willer_custom_meta_portfolio_standar' );
    ?>

Проблема также возникает в WordPress 4.9.8 с использованием Gutenberg, при использовании классического редактора проблемы нет. Я думаю, это связано с тем, что Gutenberg использует Ajax для сохранения опций. У вас есть какие-нибудь предложения для решения проблемы? Спасибо.

Вот ответ для редактора Gutenberg от Кристин Купер.

Создайте JS файл /js/block-script.js и используйте функцию JS removeEditorPanel(), которая полностью удалит панель со всеми ее элементами управления:

// удалить панель краткого содержания
wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'post-excerpt' );

Добавьте это в файл function.php

function cc_gutenberg_register_files() {
    // скриптовый файл
    wp_register_script(
        'cc-block-script',
        get_stylesheet_directory_uri() .'/js/block-script.js', // отрегулируйте путь к JS файлу
        array( 'wp-blocks', 'wp-edit-post' )
    );
    // зарегистрировать скрипт редактора блоков
    register_block_type( 'cc/ma-block-files', array(
        'editor_script' => 'cc-block-script'
    ) );

}
add_action( 'init', 'cc_gutenberg_register_files' );

Вы можете найти оригинальный ответ здесь: https://wordpress.stackexchange.com/a/339437

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

Полный ответ на вопрос о скрытии пользовательских мета-боксов в Gutenberg

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

Ваш оригинальный код

Вы используете следующий код для добавления мета-боксов:

<?php
function willer_custom_meta_portfolio_standar() {
    global $post;

    if(!empty($post))
    {
        $pageTemplate = get_post_meta($post->ID, '_wp_page_template', true);
        if($pageTemplate == 'template-pages/page-portfolio-standar.php' ) {
            add_meta_box(
                'page-portfolio-standar-meta-box', // $id
                esc_html__('Customize Portfolio Standar','willer'), // $title
                'willer_portfolio_standar_meta_callback', // $callback
                'page', // $page
                'normal', // $context
                'high'); // $priority
            }
        }
    }
}
add_action( 'add_meta_boxes', 'willer_custom_meta_portfolio_standar' );
?>

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

Решение

Создайте JavaScript файл

Вы создадите новый JavaScript файл block-script.js, который будет содержать логику для скрытия или отображения мета-бокса:

// block-script.js
wp.data.dispatch('core/edit-post').removeEditorPanel('page-portfolio-standar-meta-box');

Этот код позволит полностью удалить панель редактирования, когда это будет необходимо.

Добавьте JavaScript в файл functions.php

Теперь необходимо зарегистрировать этот JavaScript файл в вашем functions.php:

function cc_gutenberg_register_files() {
    // Регистрация скрипта
    wp_register_script(
        'cc-block-script',
        get_stylesheet_directory_uri() . '/js/block-script.js', // Убедитесь, что путь верный
        array('wp-blocks', 'wp-edit-post'),
        null,
        true // Добавление в конец страницы
    );

    // Регистрация скрипта редактора блоков
    register_block_type('cc/ma-block-files', array(
        'editor_script' => 'cc-block-script',
    ));
}
add_action('init', 'cc_gutenberg_register_files');

Проверка и доработка

После того как вы добавите этот код и создадите файл block-script.js, не забудьте протестировать его работу. Если мета-бокс не скрывается, возможно, вам потребуется настроить логику в JavaScript файле под конкретные условия.

Заключение

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

Если будут дополнительные вопросы или нужна будет помощь, не стесняйтесь обращаться!