Muotoile viestisi sisältö registerFormatTypellä

Viimeisin päivitys marras 9, 2022

Sisältö

Voit lisätä mukautettuja painikkeita WordPress Gutenbergin työkalupalkkiin melko helposti, mutta tiesitkö, että voit myös lisätä muototyyppisäätimiä muotovalikkoon?

Tässä oppaassa aiomme tarkastella, kuinka lisätä muotosäädin käyttämällä registerFormatType, jonka avulla voimme valita valitun tekstin korostusvärin semanttisen <mark>HTML-tunnisteen avulla.

Kaikki tässä opetusohjelmassa käytetty koodi löytyy ilmaisesta Highlighter-laajennuksesta.

On syytä huomata, että et vain voit käyttää muotoja valittuun tekstiin lohkoissasi, vaan voit myös käyttää niitä muiden objektien lisäämiseen suoraan lohkoihin, kuten upotettuihin kuviin ja kuvakkeisiin.

Muototyypin käyttäminen Highlighter-laajennuksella.

Yllä oleva video näyttää Highlighter-laajennuksen ja muototyyppimme toiminnassa. Hyppäämme siihen.

Edellytykset

Lue WordPress Block Editorin (Gutenberg) laajennuksen luominen -opas, jotta saat etumatkan laajennuksen luomiseen.
Vaihtoehtoisesti lataa ilmainen Highlighter-laajennus ja katso tiedostoa/src/formats/highlight.js

Määritä liitännäistiedostot

Jos olet noudattanut edellytystä ja noudattanut laajennusopasta, meidän on edettävä ja poistettava joukko näitä tiedostoja.

Poista src-kansiosta kaikki paitsi tiedostot index.jsja style.scss.
index.jsPoista ja sisältö style.scsskokonaan.
Poista kansiosta kaikki /buildtiedostot. Uudistamme nämä myöhemmin.
Poista block.json. Emme rakenna lohkoa tänään, joten emme tarvitse tätä.

Aseta komentosarjat jonoon

Lisää päälaajennustiedostoon (wholesome-plugin.phpjos olet noudattanut edellistä opetusohjelmaa sanatarkasti) seuraava koodi lisätäksesi laajennuksen JavaScript- ja CSS-koodit.

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

Rekisteröi muototyyppi

Avaa /src/index.jstiedosto ja lisää seuraava koodi.


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

Tämä luo korostuspainikkeen, joka tulee näkyviin muotovalikkoon. Nyt käytämme registerFormatTypemuodon rekisteröimiseen.

Ensinnäkin meidän on muokattava tuontiamme voidaksemme tuoda myös registerFormatTypeosoitteesta @wordpress/rich-text.

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

Rekisteröi sitten muoto lisäämällä muodon nimi (wholesome/highlighter) ja välittämällä objekti, jolla on seuraavat ominaisuudet. toggleFormatkäytetään myöhemmin klikkaustapahtumassamme.

className: Luokan nimi, joka lisätään korostettua tekstiä ympäröivään tunnisteeseen.
edit: Painike, jonka olemme aiemmin rekisteröineet.
tagName: Korostettuun tekstiin käytettävän tunnisteen tyyppi. Tässä tapauksessa käytämme <mark>semanttisesti oikeaa tekstin korostuksen merkintää.
title: muodon otsikko.


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

Käsittele napsautusta

Nyt kun olemme lisänneet painikkeen muotovalikkoon, meidän tarvitsee vain käsitellä klikkaustapahtuma.

Muokkaa tapahtumaa RichTextToolbarButtonja lisää se onClick.

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

Triggerissä kutsumme toggleFormatarvon välittämistä (joka on korostettu teksti) ja välitämme objektin, jonka typeominaisuus on asetettu muotomme nimeen.

Nyt kun painiketta napsautetaan aluksi, se lisää <mark>HTML-tunnisteen valittuun tekstiin, ja kun sitä painetaan uudelleen, se vaihtaa muotoa poistamalla sen uudelleen.

Jos haluat nähdä koodin kokonaisuudessaan ja nähdäksesi viimeisimmät päivitykset , katso koko /src/formats/highlight.jstiedosto Highlighter-laajennuksessa.

Yllä oleva koodi rekisteröi lohkon kaikille lohkotyypeille. Jos kuitenkin haluat lohkon näkyvän vain tietyissä lohkotyypeissä, se voidaan myös tehdä.

Tätä varten meidän on käytettävä Higher Order -komponenttia ifCondition ja määritettävä valitsemamme lohkotyyppi käyttämällä Select-toimintoa.

Voit tehdä tämän lisäämällä seuraavat tuontitiedostot tiedostosi alkuun.

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

registerFormatTypeLisää koodilohkon yläpuolelle seuraava koodinkirjoituslohko.


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

Kuten koodista näkyy, jos valittu lohko on core/paragraphkorkeamman järjestyksen komponentti ifCondition, palauttaa tosi, ja antaa siksi painikkeen renderöidä.

Meidän tarvitsee vain siirtää juuri luomamme säilö registerBlockTypekoodilohkoon ja koodimme on valmis.


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

Jos haluat nähdä koodin kokonaisuudessaan , katso /src/formats/highlight-paragraph.jstiedostoa Highlighter-laajennuksessa.

: wholesomecode.ltd