Sformatuj treść posta za pomocą registerFormatType

Ostatnia aktualizacja lis 9, 2022

Zadowolony

Możesz dość łatwo dodać niestandardowe przyciski do paska narzędzi w WordPress Gutenberg, ale czy wiesz, że możesz również dodać kontrolki typu formatu do menu formatu?

W tym przewodniku przyjrzymy się, jak dodać kontrolkę formatu registerFormatType, która pozwoli nam wybrać kolor podświetlenia zaznaczonego tekstu za pomocą semantycznego <mark>znacznika HTML.

Cały kod użyty w tym samouczku można znaleźć w bezpłatnej wtyczce „Highlighter".

Warto zauważyć, że nie tylko możesz zastosować formatowanie do zaznaczonego tekstu w swoich blokach, ale możesz również użyć ich do wstawienia innych obiektów bezpośrednio do bloków, takich jak obrazy i ikony w tekście.

Stosowanie typu formatu za pomocą wtyczki Highlighter.

Powyższy film pokazuje wtyczkę Highlighter i nasz typ formatu w akcji. Przejdźmy do tego.

Warunki wstępne

Przeczytaj przewodnik Tworzenie wtyczki do edytora bloków WordPress (Gutenberg), aby rozpocząć tworzenie wtyczki.
Opcjonalnie pobierz darmową wtyczkę „Highlighter” i spójrz na plik/src/formats/highlight.js

Skonfiguruj pliki wtyczek

Jeśli spełniłeś wymagania wstępne i postępujesz zgodnie z przewodnikiem dotyczącym wtyczek, musimy iść dalej i usunąć kilka tych plików.

W folderze src usuń wszystko poza plikami index.jsi .style.scss
Usuń zawartość index.jsi style.scsscałkowicie.
W /buildfolderze usuń wszystkie pliki. Zregenerujemy je później.
Usuń block.json. Nie budujemy dzisiaj bloku, więc nie potrzebujemy tego.

Kolejkuj skrypty

W głównym pliku wtyczki (wholesome-plugin.phpjeśli postępowałeś dokładnie zgodnie z poprzednim samouczkiem) dodaj następujący kod, aby umieścić w kolejce JavaScript i CSS dla swojej wtyczki.

<?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' );

Zarejestruj typ formatu

Otwórz /src/index.jsplik i dodaj następujący kod.


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') }
        />) };

Tworzy to nasz przycisk wyróżnienia, który pojawi się w menu formatu. Teraz użyjemy registerFormatTypedo zarejestrowania formatu.

Najpierw musimy edytować nasze importy, aby również importować registerFormatTypez @wordpress/rich-text.

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

Następnie zarejestruj format, dodając nazwę formatu (wholesome/highlighter) i przekazując obiekt o następujących właściwościach. toggleFormatzostanie wykorzystany później w naszym wydarzeniu dotyczącym kliknięć.

className: nazwa klasy, która zostanie dodana do tagu otaczającego podświetlony tekst.
edit: Przycisk, który wcześniej zarejestrowaliśmy.
tagName: typ tagu, który zostanie zastosowany do podświetlonego tekstu. W tym przypadku używamy <mark>który jest semantycznie poprawnym znacznikiem dla podświetlenia tekstu.
title: Tytuł formatu.


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

Obsługuj kliknięcie

Teraz, gdy dodaliśmy przycisk do menu formatu, wszystko, co musimy zrobić, to obsłużyć zdarzenie kliknięcia.

Edytuj RichTextToolbarButtoni dodaj onClickwydarzenie.

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

Na wyzwalaczu wywołujemy toggleFormatprzekazywanie wartości (która jest podświetlonym tekstem) i przekazujemy obiekt z typewłaściwością ustawioną na nazwę naszego formatu.

Teraz, gdy przycisk zostanie kliknięty początkowo, zastosuje <mark>tag HTML do zaznaczonego tekstu, a po ponownym kliknięciu przełączy format, usuwając go ponownie.

Aby wyświetlić kod w całości i zobaczyć najnowsze aktualizacje , spójrz na pełny /src/formats/highlight.jsplik we wtyczce Highlighter.

Powyższy kod zarejestruje blok dla wszystkich typów bloków. Jeśli jednak chcesz, aby blok pojawiał się tylko w niektórych typach bloków, możesz to zrobić.

Aby to zrobić, będziemy musieli użyć komponentu wyższego rzędu ifCondition i useSelect do określenia typu bloku, który wybraliśmy.

Aby to zrobić, dodaj następujące importy na początku pliku.

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

Nad registerFormatTypeblokiem kodu dodaj następujący blok tworzenia kodu.


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

Jak widać po kodzie, jeśli wybrany blok jest core/paragraphskładnikiem wyższego rzędu ifCondition, zwróci wartość true, a zatem pozwoli na renderowanie przycisku.

Wszystko, co musimy teraz zrobić, to przekazać właśnie utworzony kontener do registerBlockTypebloku kodu i nasz kod jest gotowy.


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

Aby zobaczyć kod w całości , spójrz na /src/formats/highlight-paragraph.jsplik we wtyczce Highlighter.

Idź dalej, dodając niestandardowe atrybuty do niestandardowego formatu za pomocą modalnego popovera.
Dodaj blokowy pasek boczny za pomocą InspectorControls
Spójrz na tworzenie strony opcji i ustawień za pomocą komponentów Gutenberg

Źródło nagrywania: wholesomecode.ltd