Создаем новый блок с подсветкой кода Prism.js для редактора Gutenberg

При разработке этого блога столкнулся с проблемой подсветки кода и вообще с новым редактором WordPress.

Решил не устанавливать сторонние плагины, а написать свой мини-плагин с блоком для Gutenberg.

Пошел гуглить и курить мануалы, оказывается все достаточно просто.

Решил описать процесс в этой статье по шагам.

1) Скачиваем и подключаем скрипт подсветки кода Prism

Первым делом нам понадобится prism.js его можно скачать по ссылке: https://prismjs.com/download.html.

Открываем скачанный архив и забрасываем файлы в папки на сервере

/wp-content/themes/наша тема/js/
/wp-content/themes/наша тема/css/

Подключаем

function register_assets() {
	wp_enqueue_script( 'code', get_template_directory_uri() . '/js/prism.js' );
	wp_enqueue_style( 'code', get_template_directory_uri() . '/css/code.css' );
}

2) Создаем плагин с блоком для Gutenberg

Заходим в папку /wp-content/plugins/ и создаем там папку с любым названием, я назвал code внутри создаем файл code.php
Копируем в него содержимое приведенное ниже:

<?php
/**
 * Plugin Name: Code Wrapper for Gutenberg
 * Author: Name
 * Version: 1.0.0
 */

function loadCodeBlock() {
	wp_enqueue_script(
		'code-block',
		plugin_dir_url(__FILE__) . 'code-block.js', // JS-файл который мы добавим ниже
		array('wp-blocks','wp-editor'),
		true
	);
}

add_action('enqueue_block_editor_assets', 'loadCodeBlock');

В этой же папке создаем файл code-block.js

Вставляем вот этот код:

wp.blocks.registerBlockType('brad/border-box', {
    title: 'Код с подсветкой', // Заголовок блока в меню
    icon: 'editor-code',       // Иконка из Dashicons
    category: 'common',        // Категория в которой отображать блок
    attributes: {
        lang: {type: 'string'},
        code: {type: 'string'}
    },

    edit: function (props) {
        function updateLang(event) {
            props.setAttributes({lang: event.target.value})
        }

        function updateContent(event) {
            props.setAttributes({code: event.target.value})
        }

        return React.createElement(
            "div",
            {class: "wp-block-html"},
            null,
            React.createElement("p", {}, 
                React.createElement("select", {class: "", value: props.attributes.lang, onChange: updateLang},
                    React.createElement("option", {value: "php"}, "PHP"),
                    React.createElement("option", {value: "css"}, "CSS"),
                    React.createElement("option", {value: "javascript"}, "JavasSript"),
                    React.createElement("option", {value: "clike"}, "Clike"),
                    React.createElement("option", {value: "markup"}, "Markup"),
                    React.createElement("option", {value: "markup-templating"}, "Markup-templating"),
                    React.createElement("option", {value: "yaml"}, "YAML")
                )
            ),
            React.createElement("textarea", {
                class: "block-editor-plain-text",
                placeholder: "Вставьте код...",
                value: props.attributes.code,
                onChange: updateContent
            })
        );
    },
    save: function (props) {
        return wp.element.createElement(
            "pre", {class: "language-" + (props.attributes.lang || "php")},
            wp.element.createElement("code", {}, props.attributes.code)
        );
    }
});

Еще необходимо для безопасности создать файл index.php со следующим содержимым:

<?php
# Silence is golden.

Должно получиться что-то типа того:)

3) Проверяем работоспособность

Заходим в админку wordpress во вкладку плагины и включаем наш плагин.

Готово! Теперь можно зайти в редактор Gutenberg и увидеть там наш блок с подсветкой кода.

Выглядит это вот так:

Готово! Пользуемся.