Отформатируйте содержимое публикации с помощью registerFormatType.

Последнее обновление Авг 8, 2022

Содержание

Вы можете легко добавить пользовательские кнопки на панель инструментов в WordPress Gutenberg, но знаете ли вы, что вы также можете добавить элементы управления типом формата в меню форматирования?

В этом руководстве мы рассмотрим, как добавить элемент управления форматом registerFormatType, который позволит нам выбрать цвет выделения выделенного текста с помощью семантического <mark>тега HTML.

Весь код, использованный в этом руководстве, можно найти в бесплатном плагине «Highlighter».

Стоит отметить, что вы можете не только применять форматы к выделенному тексту в своих блоках, но также можете использовать их для вставки других объектов непосредственно в блоки, таких как встроенные изображения и значки.

Применение типа формата с помощью плагина Highlighter.

Видео выше показывает плагин Highlighter и наш тип формата в действии. Давайте перейдем к нему.

Предпосылки

Прочтите руководство «Создание плагина для редактора блоков WordPress» (Gutenberg), чтобы получить преимущество в создании плагина.
При желании скачайте бесплатный плагин Highlighter и посмотрите файл/src/formats/highlight.js

Настройте файлы плагина

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

В папке src удалите все, кроме файлов index.jsи .style.scss
Удалите содержимое файла index.jsand style.scssполностью.
В /buildпапке удалить все файлы. Мы восстановим их позже.
Удалить block.json. Мы не строим блок сегодня, поэтому нам это не нужно.

Поставить сценарии в очередь

В основной файл плагина (wholesome-plugin.phpесли вы дословно следовали предыдущему руководству) добавьте следующий код, чтобы поставить в очередь JavaScript и CSS для вашего плагина.

<?php

function setup(): void {

    load_plugin_textdomain( 'wholesome-highlighter', false, ROOT_DIR. 'languages' );

    add_action( 'enqueue_block_editor_assets', __NAMESPACE__. 'enqueue_block_editor_assets', 10 );

    add_action( 'enqueue_block_assets', __NAMESPACE__. 'enqueue_block_styles', 10 );
}

function enqueue_block_editor_assets(): void {

    $asset_path = ROOT_DIR. '/build/index.asset.php';

    if (! file_exists( $asset_path)) {
        throw new Error(
            esc_html__( 'You need to run `npm start` or `npm run build` in the root of the plugin "wholesome-highlighter" first.', 'wholesome-highlighter') );
    }

    $scripts = '/build/index.js';
    $assets  = include $asset_path;

    wp_enqueue_script(
        PLUGIN_SLUG. '-block-scripts',
        plugins_url( $scripts, ROOT_FILE ),
        $assets['dependencies'],
        $assets['version'],
        false
    );

    wp_set_script_translations(
        PLUGIN_SLUG. '-block-scripts',
        'wholesome-highlighter',
        ROOT_DIR. 'languages'
    );
}
add_action( 'plugins_loaded', __NAMESPACE__. 'setup' );

function enqueue_block_styles(): void {

    $styles = '/build/style-index.css';

    wp_enqueue_style(
        PLUGIN_SLUG. '-block-styles',
        plugins_url( $styles, ROOT_FILE ),
        array(),
        filemtime( ROOT_DIR. $styles) );
}

add_action( 'plugins_loaded', __NAMESPACE__. 'setup' );

Зарегистрируйте тип формата

Откройте /src/index.jsфайл и добавьте следующий код.


import { RichTextToolbarButton } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

const HighlighterButton = ({ isActive, onChange, value}) => {
    return (<RichTextToolbarButton
            icon='edit'
            isActive={ isActive }
            title={ __( 'Highlight', 'wholesome-highlighter') }
        />) };

Это создаст нашу кнопку выделения, которая появится в меню формата. Теперь мы будем использовать registerFormatTypeдля регистрации формат.

Во-первых, нам нужно отредактировать наш импорт, чтобы он также импортировал registerFormatTypeиз файлов @wordpress/rich-text.

import { registerFormatType, toggleFormat } from '@wordpress/rich-text';

Затем зарегистрируйте формат, добавив имя формата (wholesome/highlighter) и передав объект со следующими свойствами. toggleFormatбудет использоваться позже для нашего события клика.

className: имя класса, которое будет добавлено к тегу, окружающему выделенный текст.
edit: Кнопка, которую мы ранее зарегистрировали.
tagName: Тип тега, который будет применен к выделенному тексту. В данном случае мы используем <mark>семантически правильную разметку для выделения текста.
title: Название формата.


registerFormatType(
    'wholesome/highlighter', {
        className: 'wholesome-highlight',
        edit: HighlighterButton,
        tagName: 'mark',
        title: __( 'Highlight', 'wholesome-highlighter' ),
    }
);

Обработка клика

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

Отредактируйте RichTextToolbarButtonи добавьте onClickсобытие.

<RichTextToolbarButton
  icon='edit'
  isActive={ isActive }
  onClick={() => {
    onChange(
      toggleFormat( value, {
        type: 'wholesome/highlighter',
      }) );
  } }
  title={ __( 'Highlight', 'wholesome-highlighter') }
/>

В триггере мы вызываем toggleFormatпередачу значения (которое является выделенным текстом) и передаем объект со typeсвойством, установленным на имя нашего формата.

Теперь при первоначальном нажатии кнопки <mark>тег HTML будет применен к выделенному тексту, а при повторном нажатии он переключит формат, снова удалив его.

Чтобы просмотреть код полностью и просмотреть последние обновления , просмотрите полный /src/formats/highlight.jsфайл в плагине Highlighter.

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

Для этого нам потребуется использовать компонент более высокого порядка ifCondition и useSelect, чтобы определить тип блока, который мы выбрали.

Для этого добавьте следующие импорты в начало файла.

import { ifCondition  } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';

Над registerFormatTypeблоком кода добавьте следующий блок кода.


var HighlighterButtonContainer = ifCondition( (props) => {
    const selectedBlock = useSelect( (select) => select('core/block-editor').getSelectedBlock() );
    return (selectedBlock &&
        selectedBlock.name === 'core/paragraph'
    ); 
} )( HighlighterButton );

Как видно из кода, если выбранный блок является core/paragraphкомпонентом более высокого порядка ifCondition, он вернет true и, следовательно, позволит кнопке отобразиться.

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


registerFormatType(
    'wholesome/highlighter', {
        className: 'wholesome-highlight',
        edit: HighlighterButtonContainer,
        tagName: 'mark',
        title: __( 'Highlight', 'wholesome-highlighter' ),
    }
);

Чтобы просмотреть код полностью , посмотрите /src/formats/highlight-paragraph.jsфайл в плагине Highlighter.

Продвиньтесь дальше, добавив настраиваемые атрибуты в пользовательский формат с помощью модального всплывающего окна.
Добавьте боковую панель блока с помощью InspectorControls
Посмотрите на создание страницы параметров и настроек с использованием компонентов Gutenberg .

Источник записи: wholesomecode.ltd