Formatea el contenido de tu publicación con registerFormatType

Last updated Nov 9, 2022

Contenido

Puede agregar botones personalizados a la barra de herramientas en WordPress Gutenberg con bastante facilidad, pero ¿sabía que también puede agregar controles de tipo de formato al menú de formato?

En esta guía, veremos cómo agregar un control de formato registerFormatTypeque nos permitirá elegir el color de resaltado del texto seleccionado usando la <mark>etiqueta HTML semántica.

Todo el código utilizado en este tutorial se puede encontrar en el complemento gratuito ‘Highlighter’.

Vale la pena señalar que no solo puede aplicar formatos al texto seleccionado dentro de sus bloques, sino que también puede usarlos para insertar otros objetos directamente en los bloques, como imágenes e íconos en línea.

Aplicar un tipo de formato usando el complemento Highlighter.

El video de arriba muestra el complemento Highlighter y nuestro tipo de formato en acción. Saltemos a ello.

requisitos previos

Lea la guía Creación de un complemento para el editor de bloques de WordPress (Gutenberg) para que pueda comenzar a crear el complemento.
Opcionalmente , descargue el complemento gratuito ‘Highlighter’ y mire el archivo/src/formats/highlight.js

Configurar los archivos del complemento

Si ha seguido el requisito previo y la guía del complemento, debemos seguir adelante y eliminar un montón de esos archivos.

En la carpeta src, elimine todo excepto los archivos index.jsy .style.scss
Elimine el contenido de index.jsy por style.scsscompleto.
En la /buildcarpeta elimina todos los archivos. Los regeneraremos más tarde.
quitar block.json_ No estamos construyendo un bloque hoy, así que no necesitamos esto.

Poner en cola los scripts

En el archivo principal del complemento (wholesome-plugin.phpsi ha seguido el tutorial anterior al pie de la letra), agregue el siguiente código para poner en cola JavaScript y CSS para su complemento.

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

Registrar el tipo de formato

Abra su /src/index.jsarchivo y agregue el siguiente código.


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

Esto crea nuestro botón resaltador que aparecerá en el menú de formato. Ahora usaremos registerFormatTypepara registrar el formato.

Primero, necesitamos editar nuestras importaciones para importar también registerFormatTypedesde @wordpress/rich-text.

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

Luego registre el formato agregando el nombre del formato (wholesome/highlighter) y pasando un objeto con las siguientes propiedades. toggleFormatse usará más tarde para nuestro evento de clic.

className: El nombre de la clase que se agregará a la etiqueta que rodea el texto resaltado.
edit: El botón que registramos previamente.
tagName: El tipo de etiqueta que se aplicará al texto resaltado. En este caso, estamos usando <mark>el marcado semánticamente correcto para resaltar un texto.
title: El título del formato.


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

Manejar el clic

Ahora que hemos agregado el botón al menú de formato, todo lo que tenemos que hacer es manejar el evento de clic.

Edite RichTextToolbarButtony agregue el onClickevento.

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

En el disparador llamamos a toggleFormatpasar el valor (que es el texto resaltado) y pasamos un objeto con la typepropiedad establecida en el nombre de nuestro formato.

Ahora, cuando se hace clic inicialmente en el botón, se aplicará la <mark>etiqueta HTML al texto seleccionado y, cuando se vuelva a hacer clic, cambiará el formato al eliminarlo nuevamente.

Para ver el código en su totalidad y ver las últimas actualizaciones , eche un vistazo al /src/formats/highlight.jsarchivo completo dentro del complemento Highlighter.

El código anterior registrará el bloque para todos los tipos de bloque. Sin embargo, si desea que el bloque solo aparezca en ciertos tipos de bloques, también puede hacerlo.

Para hacer esto, necesitaremos usar el componente de orden superior ifCondition y useSelect para determinar el tipo de bloque que hemos seleccionado.

Para hacer esto, agregue las siguientes importaciones en la parte superior de su archivo.

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

Encima del registerFormatTypebloque de código, agregue el siguiente bloque de código de redacción.


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

Como puede ver en el código, si el bloque seleccionado es core/paragraphel componente de orden superior ifCondition, devolverá verdadero y, por lo tanto, permitirá que el botón se procese.

Todo lo que tenemos que hacer ahora es pasar el Contenedor que acabamos de crear al registerBlockTypebloque de código y nuestro código estará terminado.


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

Para ver el código completo , eche un vistazo al /src/formats/highlight-paragraph.jsarchivo en el complemento Highlighter.

Lleve las cosas más lejos agregando atributos personalizados a su formato personalizado con una ventana emergente modal.
Agregue una barra lateral de bloque con InspectorControls
Mire la creación de una página de opciones y configuraciones usando componentes de Gutenberg

Fuente de grabación: wholesomecode.ltd