Верх страницы
Обложка к записи Полезные хуки редактора Gutenberg
Время для прочтения: 2 мин. 42 сек.

Полезные хуки редактора Gutenberg

Gutenberg — это новый брендовый интерфейс от Automattic, который призван изменить способ взаимодействия пользователя с WordPress.

Отключение Gutenberg

Полное отключение Gutenberg

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

Полное отключение может быть выполнено путём установки плагина Classic Editor или созданием настройки внутри вашего плагина, которая отключит Gutenberg:

add_filter( 'gutenberg_can_edit_post_type', '__return_false' );

Этот фильтр находится внутри функции gutenberg_can_edit_post_type(), которая проверяет нужно ли загружать Gutenberg для текущего типа поста. Если функция всегда будет возвращать false — это полностью отключит редактор Gutenberg.

Полное отключение TinyMCE

В некоторых кейса полезно отключить также и старый редактор TinyMCE, сделать можно при помощи хука:

add_filter( 'user_can_richedit', ' __return_false' );

Отключение Gutenberg для определённого CPT

Если в вашем плагине есть произвольный тип поста, то можно отключить Gutenberg только для него с помощью определённой конфигурации при регистрации CPT.

Поддержка визуального редактора

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

$args = array(
    'label'        => __( 'Simple Giveaways', 'giveasap' ),
    'labels'       => $labels,
    'supports'     => array(
    'title',
    //'editor', отключаем Gutenberg
    'thumbnail',
    'hierarchical' => false,
    // ...
);
register_post_type( 'giveasap', $args );

Поддержка REST API

Если вам всё-таки необходимо поле с визуальным редактором, но не требуется поддержка REST API, то избавиться от Gutenberg можно, отключив опцию show_in_rest:

$args = array(
    'label'        => __( 'Simple Giveaways', 'giveasap' ),
    // ...
    'show_in_rest' => false, // Отключение Gutenberg
    // ...
);
register_post_type( 'giveasap', $args );

Передав настройку show_in_rest, равную false, вы отключите редактор Gutenberg для текущего CPT.

Поддержка произвольного типа поста

Вы можете заюзать указанный выше фильтр gutenberg_can_edit_post_type, сделав внутри колбека проверку на нужный вам CPT:

add_filter(
    'gutenberg_can_edit_post_type',
    function( $can_edit, $post_type ){
        if ( $can_edit && 'giveasap' === $post_type ) {
             return false;
        }
        return $can_edit;
    },
    20,
    2
);

При помощи данного сниппета мы проверяем, что текущий пост — это giveasap и возвращаем false только для него.

Отключение Gutenberg при помощи метабоксов

Для отключения Gutenberg при регистрации вашего метабокса укажите, что редактор вам не нужен при помощи передачи параметра __block_editor_compatible_meta_box=false:

add_meta_box(
    'giveasap_users',
    __( 'Users', 'giveasap' ),
    'giveasap_metabox_users',
    array( 'giveasap' ),
    'side',
    'high',
    array(
        // Отключение Gutenberg.
        '__block_editor_compatible_meta_box' => false,
    )
);

Подробнее про метабоксы в Gutenberg можно почитать в официальном руководстве.

Поддержка Gutenberg

Альтернативой отключению Gutenberg является его поддержка в вашем плагине.

Регистрация блока

Для регистрации нового блока напишите такой кусок РНР кода:

add_action(
    'init',
    function() {
        wp_register_script(
            'guten-tuts',
            plugins_url( 'block.js', __FILE__ ),
            array( 'wp-blocks', 'wp-element', 'wp-i18n' )
        );
 
        register_block_type(
            'guten-tuts/alert',
            array(
                'editor_script' => 'guten-tuts',
            )
        );

        // Our Dynamic block.
        register_block_type(
            'guten-tuts/alertdynamic',
            array(
                'render_callback' => 'guten_tuts_dynamic_alert'
            )
        );
    }
);

При регистрации блока не забудьте указать зависимости. В данном примере — это wp-block и wp-element.

JavaScript файл блока

Создаём файл block.js и в его начало вставляем следующий JavaScript код:

var el = wp.element.createElement,
    __ = wp.i18n.__,
    registerBlockType = wp.blocks.registerBlockType,
    RichText = wp.blocks.RichText,
    blockStyle = {
        backgroundColor: '#900',
        color: '#fff',
        padding: '20px'
    };

Статический блок

Для его создания пишем следующее:

registerBlockType( 'guten-tuts/alert', {
	title: __( 'Guten Tuts - Alert' ),

	icon: 'megaphone',

	category: 'layout',

	attributes: {
		text: {
			type: 'array',
			source: 'children',
			selector: 'div',
		}
	},

	edit: function ( props ) {
		var content = props.attributes.text;

		function onChangeText( newText ) {
			props.setAttributes( { text: newText } );
		}

		return el(
			RichText,
			{
				tagName: 'div',
				className: props.className,
				onChange: onChangeText,
				value: content,
				isSelected: props.isSelected,
				style: blockStyle
			}
		);
	},

	save: function ( props ) {
		var text = props.attributes.text;

		return el( 'div', { style: blockStyle, className: props.className }, text );
	},
} );

В самом редакторе он будет выглядеть так:

Динамический блок

Для его создания регистрируем новый колбек guten_tuts_dynamic_alert:

register_block_type(
    'guten-tuts/alertdynamic',
    array(
        'render_callback' => 'guten_tuts_dynamic_alert'
    )
);

Сам колбек представляет из себя следующую функцию:

function guten_tuts_dynamic_alert( $attributes ) {
	if ( ! isset( $attributes['text'] ) || ! $attributes['text'] ) {
		return;
	}
	ob_start();
	?>
	<div style="background:red; color:white; padding:1em;"><?php echo esc_html( $attributes['text'] ); ?></div>
	<?php
	return ob_get_clean();
}

Полный код динамического блока:

registerBlockType( 'guten-tuts/alertdynamic', {
	title: __( 'Guten Tuts - Dynamic Alert' ),

	icon: 'megaphone',

	category: 'layout',

	attributes: {
		text: {
			type: 'string',
			selector: 'div',
		},
	},

	edit: function ( props ) {
		var content = props.attributes.text;
		blockStyle[ 'width' ] = '100%';

		function onChangeText( e ) {
			var newText = e.target.value;

			props.setAttributes( { text: newText } );
		}

		return el(
			'input',
			{
				className: props.className + ' widefat',
				onChange: onChangeText,
				value: content,
				isSelected: props.isSelected,
				style: blockStyle
			}
		);
	},

	save: function ( props ) {
		return null;
	},
} );

В самом редакторе динамический блок будет выглядеть так:

А отрендеренные версии обоих блоков на сайте во фронтенде будут выглядеть так:

Вместо заключения

Как видите, ничего сложного здесь нет, стоит только начать делать блоки под Gutenberg и ваш мир никогда больше не будет прежним. Дерзайте!

Обновление от 30.10.2018

В WordPress 5.0 блочный редактор теперь используется для всех типов постов, которые соответствуют двум кретериям:

  • При регистрации типа поста (или через add_post_type_support()) указана поддержка редактора.
  • При регистрации типа поста аргумент show_in_rest выставлен в true (по дефолту он false).

В плагине Gutenberg было два фильтра: gutenberg_can_edit_post и gutenberg_can_edit_post_type для включения/выключения блочного редактора у обычных записей и у произвольных типов записей.

Они были заменены соответствующими фильтрами use_block_editor_for_post и use_block_editor_for_post_type с выходом WordPress 5.0.

Используются они так:

function mihdan_post_filter( $use_block_editor, $post ) {
	$author = get_userdata( $post->post_author );
	if ( 'pento' === $author->user_login ) {
		return (bool) random_int( 0, 1 );
	}

	return $use_block_editor;
}

add_filter( 'use_block_editor_for_post', 'mihdan_post_filter', 10, 2 );

function mihdan_post_type_filter( $use_block_editor, $post_type ) {
	if ( 'my_mystical_post_type' === $post_type ) {
		return false;
	}

	return $use_block_editor;
}

add_filter( 'use_block_editor_for_post_type', 'mihdan_post_type_filter', 10, 2 );

Ссылки

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, OpenCart, DLE, Laravel, Moonshine, Symfony, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

4 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Damir
Damir
5 лет назад

Привет, как для конкретной страницы отключить не Гутенберг а его заголовок или сместить его например вниз, чтобы сначала шел Слайдер?

Анна
Анна
5 лет назад

Недавно нашла прикольну тулзу для Gutenberg, называется Getwid Blocks. Окола 40 кастомных блоков бесплатно!

Очень часто их использую в работе, так как CSS применяю крайне редко. Возможно, кому-то будет это полезно.

Предыдущая запись

Давайте дружить
в Telegram

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы