Vormindage oma postituse sisu registerFormatType’iga

Viimati uuendatud nov. 9, 2022

Sisu

Saate WordPress Gutenbergis tööriistaribale kohandatud nuppe lisada üsna lihtsalt, kuid kas teadsite, et saate vormingumenüüsse lisada ka vormingutüübi juhtnuppe?

Selles juhendis vaatleme, kuidas lisada vormingu juhtelementi, mis võimaldab meil semantilise HTML-märgendi registerFormatTypeabil valida valitud teksti esiletõstmise värvi .<mark>

Kogu selles õpetuses kasutatud koodi leiate tasuta pistikprogrammist Highlighter.

Väärib märkimist, et mitte ainult ei saa oma plokkides valitud tekstile vorminguid rakendada, vaid saate neid kasutada ka muude objektide (nt tekstisisesed kujutised ja ikoonid) otse plokkidesse sisestamiseks.

Vormingutüübi rakendamine Highlighteri pistikprogrammi abil.

Ülaltoodud video näitab Highlighteri pistikprogrammi ja meie vormingutüüpi töös. Hüppame selle juurde.

Eeldused

Lugege WordPressi plokiredaktori (Gutenbergi) pistikprogrammi loomise juhendit, et saaksite pistikprogrammi loomisel edumaa.
Soovi korral laadige alla tasuta pistikprogramm Highlighter ja vaadake faili/src/formats/highlight.js

Seadistage pistikprogrammi failid

Kui olete järginud eeltingimust ja järginud pistikprogrammi juhendit, peame jätkama ja eemaldama hulga neid faile.

Eemaldage kaustast src kõik peale index.jsja style.scssfailide.
index.jsKustutage ja sisu style.scsstäielikult.
/buildKustutage kaustas kõik failid. Me taastame need hiljem.
Eemalda block.json. Me ei ehita täna plokki, seega pole seda vaja.

Pange skriptid järjekorda

Lisage pistikprogrammi põhifaili (wholesome-plugin.phpkui olete eelmist õpetust sõna-sõnalt järginud) järgmine kood, et lisada oma pistikprogrammi JavaScripti ja CSS-i järjekorda.

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

Registreerige vormingu tüüp

Avage /src/index.jsfail ja lisage järgmine kood.


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

See loob meie esiletõstmisnupu, mis kuvatakse vormindamismenüüs. Nüüd kasutame registerFormatTypevormingu registreerimiseks.

Kõigepealt peame muutma oma importi, et importida registerFormatTypeka @wordpress/rich-text.

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

Seejärel registreerige vorming, lisades vormingu nime (wholesome/highlighter) ja edastades järgmiste omadustega objekti. toggleFormatkasutatakse hiljem meie klikiüritusel.

className: klassi nimi, mis lisatakse esiletõstetud teksti ümbritsevale sildile.
edit: nupp, mille me varem registreerisime.
tagName: sildi tüüp, mis rakendatakse esiletõstetud tekstile. Sel juhul kasutame <mark>teksti esiletõstmiseks semantiliselt õiget märgistust.
title: vormingu pealkiri.


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

Käsitsege klõpsamist

Nüüd, kui oleme nupu vormindamismenüüsse lisanud, pole meil vaja muud teha kui klikisündmust.

Muutke RichTextToolbarButtonja lisage onClicksündmus.

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

Päästikul kutsume toggleFormatväärtuse sisestamist (mis on esiletõstetud tekst) ja edastame objekti, mille typeatribuut on seatud meie vormingu nimele.

Nüüd, kui nuppu algselt klõpsate, rakendab see <mark>valitud tekstile HTML-märgendi ja uuesti klõpsamisel lülitab see vormingu välja, eemaldades selle uuesti.

Koodi täismahus vaatamiseks ja viimaste värskenduste vaatamiseks vaadake /src/formats/highlight.jsHighlighteri pistikprogrammi täisfaili.

Ülaltoodud kood registreerib ploki kõigi plokitüüpide jaoks. Kui aga soovite, et plokk ilmuks ainult teatud plokitüüpide puhul, saate seda ka teha.

Selleks peame kasutama kõrgema järgu komponenti ifCondition ja meie valitud ploki tüübi määramiseks kasutama Select.

Selleks lisage faili ülaossa järgmised impordid.

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

registerFormatTypeLisage koodiploki kohale järgmine koodi koostamisplokk .


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

Nagu koodist näha, tagastab kui valitud plokk on core/paragraphkõrgema järgu komponent ifCondition, tõene ja võimaldab seega nupul renderdada.

Kõik, mida me nüüd tegema peame, on äsja loodud konteineri registerBlockTypekoodiplokki edastada ja meie kood on valmis.


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

Koodi täielikuks vaatamiseks vaadake /src/formats/highlight-paragraph.jsfaili Highlighteri pistikprogrammis.

: wholesomecode.ltd