Formatera ditt inläggsinnehåll med registerFormatType

Senaste uppdateringen nov 9, 2022

Innehåll

Du kan lägga till anpassade knappar till verktygsfältet i WordPress Gutenberg ganska enkelt, men visste du att du också kan lägga till formattypkontroller i formatmenyn?

I den här guiden kommer vi att titta på hur man lägger till en formatkontroll registerFormatTypesom gör att vi kan välja markeringsfärgen för vald text med hjälp av den semantiska <mark>HTML-taggen.

All kod som används i denna handledning finns i det kostnadsfria insticksprogrammet ’Highlighter’.

Det är värt att notera att du inte bara kan använda format på vald text i dina block, utan du kan också använda dem för att infoga andra objekt direkt i block, till exempel inlinebilder och ikoner.

Använda en formattyp med hjälp av Highlighter-plugin.

Videon ovan visar Highlighter-pluginen och vår formattyp i aktion. Låt oss hoppa till det.

Förutsättningar

Läs guiden Skapa ett plugin för WordPress Block Editor (Gutenberg) så att du kan få ett försprång med att skapa plugin.
Du kan eventuellt ladda ner det kostnadsfria "Highlighter"-pluginet och titta på filen/src/formats/highlight.js

Konfigurera plugin-filerna

Om du har följt förutsättningen och följt pluginguiden måste vi gå vidare och ta bort ett gäng av dessa filer.

Ta bort allt förutom filerna index.jsoch i src-mappen.style.scss
Ta bort innehållet i index.jsoch style.scsshelt.
/buildTa bort alla filer i mappen. Vi kommer att återskapa dessa senare.
Ta bort block.json. Vi bygger inte ett block idag, så vi behöver inte det här.

Ställ skripten i kö

I huvudpluginfilen (wholesome-plugin.phpom du har följt föregående handledning ordagrant) lägg till följande kod för att ställa JavaScript och CSS för din plugin.

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

Registrera formattyp

Öppna din /src/index.jsfil och lägg till följande 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') }
        />) };

Detta skapar vår överstrykningsknapp som visas i formatmenyn. Nu kommer vi att använda registerFormatTypeför att registrera formatet.

Först måste vi redigera våra importer för att även importera registerFormatTypefrån @wordpress/rich-text.

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

Registrera sedan formatet genom att lägga till formatets namn (wholesome/highlighter), och skicka in ett objekt med följande egenskaper. toggleFormatkommer att användas senare för vårt klickevenemang.

className: Klassnamnet som kommer att läggas till taggen som omger den markerade texten.
edit: Knappen som vi tidigare registrerat.
tagName: Typen av tagg som kommer att tillämpas på den markerade texten. I det här fallet använder vi <mark>som är semantiskt korrekt markering för en textmarkering.
title: Formatets titel.


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

Hantera klicket

Nu när vi har lagt till knappen i formatmenyn behöver vi bara hantera klickhändelsen.

Redigera RichTextToolbarButtonoch lägg till onClickhändelsen.

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

På triggern anropar vi toggleFormatpassing in värdet (som är den markerade texten) och skickar ett objekt med typeegenskapen inställd på namnet på vårt format.

När du nu klickar på knappen initialt kommer den att applicera <mark>HTML-taggen på den markerade texten, och när du klickar igen kommer den att växla format genom att ta bort den igen.

För att se koden i sin helhet och för att se de senaste uppdateringarna, ta en titt på hela /src/formats/highlight.jsfilen i Highlighter-plugin.

Koden ovan kommer att registrera blocket för alla blocktyper. Men om du vill att blocket endast ska visas på vissa blocktyper kan det också göras.

För att göra detta måste vi använda Higher Order Component ifCondition och användaSelect för att bestämma blocktypen som vi har valt.

För att göra detta lägg till följande importer överst i filen.

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

Lägg till följande kodblock ovanför registerFormatTypekodblocket.


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

Som du kan se av koden, om blocket som väljs är kommer core/paragraphHigher Order-komponenten ifConditionatt returnera sant och därför tillåta knappen att rendera.

Allt vi behöver göra nu är att skicka behållaren vi just har skapat till registerBlockTypekodblocket och vår kod är klar.


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

För att se koden i sin helhet, ta en titt på /src/formats/highlight-paragraph.jsfilen i Highlighter-plugin.

Ta saker längre genom att lägga till anpassade attribut till ditt anpassade format med en modal popover.
Lägg till en blockad sidofält med InspectorControls
Titta på att bygga en alternativ- och inställningssida med hjälp av Gutenberg-komponenter

Inspelningskälla: wholesomecode.ltd