Форматуйте вміст публікації за допомогою registerFormatType

Останнє оновлення Лис 9, 2022

Зміст

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

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

Увесь код, який використовується в цьому підручнику, можна знайти в безкоштовному плагіні Highlighter.

Варто зазначити, що ви можете не лише застосовувати формати до виділеного тексту у ваших блоках, але також можете використовувати їх для вставлення інших об’єктів безпосередньо в блоки, наприклад вбудованих зображень і значків.

Застосування типу формату за допомогою плагіна Highlighter.

У відео вище показано плагін Highlighter і наш тип формату в дії. Переходимо до нього.

передумови

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

Налаштуйте файли плагінів

Якщо ви виконали передумови та дотримувалися посібника з плагінів, нам потрібно продовжити та видалити купу цих файлів.

У папці src видаліть усе, крім файлів index.jsі .style.scss
Видаліть вміст index.jsі 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 і використовувати Select, щоб визначити тип блоку, який ми вибрали.

Для цього додайте наведені нижче імпортовані файли.

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