Formatieren Sie Ihren Beitragsinhalt mit registerFormatType

Last updated 6. August 2022

Inhalt

Stellen Sie die Skripts in die Warteschlange

Du kannst ganz einfach benutzerdefinierte Schaltflächen zur Symbolleiste in WordPress Gutenberg hinzufügen, aber wusstest du, dass du auch Formattyp-Steuerelemente zum Formatmenü hinzufügen kannst?

In diesem Handbuch werden wir uns ansehen, wie man ein Formatsteuerelement hinzufügt, mit registerFormatTypedem wir die Hervorhebungsfarbe von ausgewähltem Text mithilfe des semantischen <mark>HTML-Tags auswählen können.

Der gesamte Code, der in diesem Tutorial verwendet wird, ist im kostenlosen Plugin „Highlighter“ zu finden .

Es ist erwähnenswert, dass Sie Formate nicht nur auf ausgewählten Text in Ihren Blöcken anwenden können, sondern Sie können sie auch verwenden, um andere Objekte direkt in Blöcke einzufügen, z. B. eingebettete Bilder und Symbole.

Anwenden eines Formattyps mit dem Highlighter-Plugin.

Das obige Video zeigt das Highlighter-Plugin und unseren Formattyp in Aktion. Springen wir dazu.

Voraussetzungen

Lesen Sie den Leitfaden zum Erstellen eines Plugins für den WordPress-Blockeditor (Gutenberg), damit Sie mit der Erstellung des Plugins beginnen können.
Laden Sie optional das kostenlose „Highlighter“-Plugin herunter und sehen Sie sich die Datei an/src/formats/highlight.js

Richten Sie die Plugin-Dateien ein

Wenn Sie die Voraussetzung befolgt und die Plugin-Anleitung befolgt haben, müssen wir fortfahren und eine Reihe dieser Dateien entfernen.

Entfernen Sie im Ordner src alles außer den Dateien index.jsund .style.scss
Löschen Sie den Inhalt von index.jsund style.scssvollständig.
Löschen Sie im /buildOrdner alle Dateien. Wir werden diese später regenerieren.
Entfernen block.json. Wir bauen heute keinen Block, also brauchen wir das nicht.

Stellen Sie die Skripts in die Warteschlange

Fügen Sie in der Haupt-Plugin-Datei (wholesome-plugin.phpwenn Sie das vorherige Tutorial wörtlich befolgt haben) den folgenden Code hinzu, um das JavaScript und CSS für Ihr Plugin einzureihen.

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

Registrieren Sie den Formattyp

Öffnen Sie Ihre /src/index.jsDatei und fügen Sie den folgenden Code hinzu.


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

Dadurch wird unsere Textmarker-Schaltfläche erstellt, die im Formatmenü angezeigt wird. Jetzt werden wir verwenden registerFormatType, um das Format zu registrieren.

Zuerst müssen wir unsere Importe bearbeiten, um auch registerFormatTypeaus @wordpress/rich-text.

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

Registrieren Sie dann das Format, indem Sie den Namen des Formats (wholesome/highlighter) hinzufügen und ein Objekt mit den folgenden Eigenschaften übergeben. toggleFormatwird später für unser Click-Event verwendet.

className: Der Klassenname, der dem Tag hinzugefügt wird, der den hervorgehobenen Text umgibt.
edit: Die Schaltfläche, die wir zuvor registriert haben.
tagName: Der Tag-Typ, der auf den markierten Text angewendet wird. In diesem Fall verwenden wir <mark>das semantisch korrekte Markup für eine Texthervorhebung.
title: Der Titel des Formats.


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

Behandeln Sie den Klick

Jetzt, da wir die Schaltfläche zum Formatmenü hinzugefügt haben, müssen wir nur noch das Click-Ereignis behandeln.

Bearbeiten Sie die RichTextToolbarButtonund fügen Sie die onClickVeranstaltung hinzu.

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

Beim Trigger rufen wir die toggleFormatÜbergabe des Werts auf (das ist der hervorgehobene Text) und übergeben ein Objekt, dessen typeEigenschaft auf den Namen unseres Formats gesetzt ist.

Wenn jetzt auf die Schaltfläche zum ersten Mal geklickt wird, wird das <mark>HTML-Tag auf den ausgewählten Text angewendet, und wenn es erneut geklickt wird, wird das Format umgeschaltet, indem es wieder entfernt wird.

Um den vollständigen Code und die neuesten Updates anzuzeigen, werfen Sie einen Blick auf die vollständige /src/formats/highlight.jsDatei im Highlighter-Plugin.

Der obige Code registriert den Block für alle Blocktypen. Wenn Sie jedoch möchten, dass der Block nur bei bestimmten Blocktypen angezeigt wird, ist dies ebenfalls möglich.

Dazu müssen wir die Komponente höherer Ordnung ifCondition verwenden und useSelect verwenden, um den ausgewählten Blocktyp zu bestimmen.

Fügen Sie dazu die folgenden Importe am Anfang Ihrer Datei hinzu.

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

Fügen Sie über dem registerFormatTypeCodeblock den folgenden Compose-Codeblock hinzu.


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

Wie Sie anhand des Codes sehen können, gibt core/paragraphdie Komponente höherer Ordnung ifConditionwahr zurück, wenn der ausgewählte Block ausgewählt ist, und ermöglicht daher das Rendern der Schaltfläche.

Jetzt müssen wir nur noch den Container, den wir gerade erstellt haben, in den registerBlockTypeCodeblock übergeben, und unser Code ist fertig.


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

Um den Code vollständig anzuzeigen , schauen Sie sich die /src/formats/highlight-paragraph.jsDatei im Highlighter-Plugin an .

Gehen Sie noch einen Schritt weiter, indem Sie benutzerdefinierte Attribute mit einem modalen Popover zu Ihrem benutzerdefinierten Format hinzufügen.
Fügen Sie eine Blockseitenleiste mit InspectorControls hinzu
Sehen Sie sich das Erstellen einer Options- und Einstellungsseite mit Gutenberg-Komponenten an

Aufnahmequelle: wholesomecode.ltd