Formatta il contenuto del tuo post con registerFormatType

Last updated Nov 9, 2022

Contenuto

Puoi aggiungere pulsanti personalizzati alla barra degli strumenti in WordPress Gutenberg abbastanza facilmente, ma sapevi che puoi anche aggiungere controlli del tipo di formato al menu del formato?

In questa guida vedremo come aggiungere un controllo di formato registerFormatTypeche ci permetterà di scegliere il colore di evidenziazione del testo selezionato usando il <mark>tag HTML semantico.

Tutto il codice utilizzato in questo tutorial può essere trovato nel plugin gratuito ‘Evidenziatore’.

Vale la pena notare che non solo puoi applicare formati al testo selezionato all’interno dei tuoi blocchi, ma puoi anche usarli per inserire altri oggetti direttamente nei blocchi, come immagini e icone in linea.

Applicazione di un tipo di formato utilizzando il plug-in Evidenziatore.

Il video sopra mostra il plug-in Highlighter e il nostro tipo di formato in azione. Saltiamo ad esso.

Prerequisiti

Leggi la guida Creazione di un plug-in per l’editor di blocchi di WordPress (Gutenberg) in modo da poter ottenere un vantaggio nella creazione del plug-in.
Facoltativamente , scarica il plug-in ‘Evidenziatore’ gratuito e guarda il file/src/formats/highlight.js

Imposta i file plug-in

Se hai seguito il prerequisito e seguito la guida del plug-in, dobbiamo procedere e rimuovere un sacco di quei file.

Nella cartella src rimuovi tutto tranne i file index.jse style.scss.
Elimina il contenuto di index.jse style.scsscompletamente.
Nella /buildcartella elimina tutti i file. Li rigenereremo più tardi.
Rimuovi block.json. Oggi non stiamo costruendo un blocco, quindi non ne abbiamo bisogno.

Accoda gli script

Nel file del plugin principale (wholesome-plugin.phpse hai seguito testualmente il tutorial precedente) aggiungi il codice seguente per accodare JavaScript e CSS per il tuo 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' );

Registra il tipo di formato

Apri il tuo /src/index.jsfile e aggiungi il codice seguente.


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

Questo crea il nostro pulsante evidenziatore che apparirà nel menu del formato. Ora useremo registerFormatTypeper registrare il formato.

Per prima cosa, dobbiamo modificare le nostre importazioni per importare anche registerFormatTypeda @wordpress/rich-text.

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

Quindi registrare il formato aggiungendo il nome del formato (wholesome/highlighter) e passando un oggetto con le seguenti proprietà. toggleFormatverrà utilizzato in seguito per il nostro evento di clic.

className: il nome della classe che verrà aggiunto al tag che circonda il testo evidenziato.
edit: Il pulsante che abbiamo registrato in precedenza.
tagName: il tipo di tag che verrà applicato al testo evidenziato. In questo caso stiamo usando <mark>il markup semanticamente corretto per l’evidenziazione del testo.
title: Il titolo del formato.


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

Gestisci il clic

Ora che abbiamo aggiunto il pulsante al menu del formato, tutto ciò che dobbiamo fare è gestire l’evento click.

Modifica RichTextToolbarButtone aggiungi l’ onClickevento.

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

Sul trigger chiamiamo toggleFormatpassando il valore (che è il testo evidenziato) e passiamo un oggetto con la typeproprietà impostata al nome del nostro formato.

Ora, quando si fa clic inizialmente sul pulsante, applicherà il <mark>tag HTML al testo selezionato e, quando si fa nuovamente clic, cambierà il formato rimuovendolo di nuovo.

Per visualizzare il codice per intero e per visualizzare gli ultimi aggiornamenti , dai un’occhiata al /src/formats/highlight.jsfile completo all’interno del plug-in Highlighter.

Il codice sopra registrerà il blocco per tutti i tipi di blocco. Tuttavia, se vuoi che il blocco appaia solo su determinati tipi di blocco, puoi farlo anche tu.

Per fare ciò avremo bisogno di utilizzare il componente di ordine superiore ifCondition e useSelect per determinare il tipo di blocco che abbiamo selezionato.

Per fare ciò, aggiungi le seguenti importazioni all’inizio del tuo file.

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

Sopra il registerFormatTypeblocco di codice, aggiungi il seguente blocco di codice di composizione.


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

Come puoi vedere dal codice, se il blocco selezionato è core/paragraphil componente di ordine superiore ifConditionrestituirà true e quindi consentirà il rendering del pulsante.

Tutto ciò che dobbiamo fare ora è passare il Container che abbiamo appena creato nel registerBlockTypeblocco di codice e il nostro codice è finito.


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

Per visualizzare il codice per intero dai un’occhiata al /src/formats/highlight-paragraph.jsfile nel plugin Highlighter.

Porta le cose oltre aggiungendo attributi personalizzati al tuo formato personalizzato con un popover modale.
Aggiungi una barra laterale del blocco con InspectorControls
Guarda la creazione di una pagina di opzioni e impostazioni utilizzando i componenti Gutenberg

Fonte di registrazione: wholesomecode.ltd