Uso de InspectorControls en Bloques de WordPress

En esta clase vas a poder mejorar la experiencia para la edición de tus bloques. Para eso aprenderás a utilizar el componente <InspectorControls> que nos permitirá desplazar nuestros campos a la sidebar del editor y renderizar la vista previa en el espacio del bloque.

Para ello lo primero que tienes que hacer es importarlo con la siguiente línea:

import { InspectorControls } from '@wordpress/block-editor'; // Esta librería está disponible desde que instalamos el paquete "wordpress/scripts desde NPM

Además, necesitarás tres componentes más para ordenar tus campos dentro del panel y renderizar el bloque desde el servidor. Estos son PanelBody, PanelRow y ServerSideRender.

Para esto modifica la importación de componentes del paquete @wordpress/components de la siguiente manera:

import { TextControl, PanelBody, PanelRow } from '@wordpress/components'; // Esta librería está disponible desde que instalamos el paquete "wordpress/scripts desde NPM

y agregar este nuevo paquete:

import ServerSideRender from '@wordpress/server-side-render'; // Esta librería está disponible desde que instalamos el paquete "wordpress/scripts" desde NPM

Ahora sólo necesitas modificar un poco el código que ya tenías armado en la función edit:

edit: (props) => {
    const { attributes: {content}, setAttributes, className, isSelected} = props;

    // Función para guardar el atributo content
    const handlerOnChangeInput = (newContent) => {
        setAttributes( {content: newContent})
    }

    return <>
        <InspectorControls>
            <PanelBody // Primer panel en la sidebar
                title="Modificar texto del Bloque Básico"
                initialOpen={ false }
            >
                <PanelRow>
                    <TextControl
                        label="Complete el campo" // Indicaciones del campo
                        value={ content } // Asignación del atributo correspondiente
                        onChange={ handlerOnChangeInput } // Asignación de función para gestionar el evento OnChange
                    />
                </PanelRow>
            </PanelBody>
        </InspectorControls>
        <ServerSideRender // Renderizado de bloque dinámico
            block="pg/basic" // Nombre del bloque
            attributes={ props.attributes } // Se envían todos los atributos
        />
    </>
}

Como se puede ver en el ejemplo, utilizamos el componente <></> (Fragment) para contener toda la UI. Dentro creamos el primer componente estructurándolo con InspectorControls, PanelBody y PanelRow. Dentro colocas el componente TextControl que ya habías utilizado previamente, sin aplicarle ningún cambio en su configuración.

Debajo del elemento InspectorControls, agregamos el componente ServerSideRender al que le pasamos el nombre del bloque y los atributos del mismo.

En el último paso para que se genere el renderizado también tienes que modificar la función PHP que creaste en el archivo functions.php para que el servidor sepa cuáles debe esperar. Para lograrlo modificamos la función de la siguiente manera:

// Asignación de la función de registro del bloque al Hook "init"
add_action('init', 'pgRegisterBlock');

// Función de registro del bloque
function pgRegisterBlock()
{
    // Tomamos el archivo PHP generado en el Build
    $assets = include_once get_template_directory().'/blocks/build/index.asset.php';

    wp_register_script(
        'pg-block', // Handle del Script
        get_template_directory_uri().'/blocks/build/index.js', // Usamos get_template_directory_uri() para recibir la URL del directorio y no el Path
        $assets['dependencies'], // Array de dependencias generado en el Build
        $assets['version'] // Cada Build cambia la versión para no tener conflictos de caché
    );

    register_block_type(
        'pg/basic', // Nombre del bloque
        array(
            'editor_script' => 'pg-block', // Handler del Script que registramos arriba
            'attributes'      => array( // Repetimos los atributos del bloque, pero cambiamos los objetos por arrays
                'content' => array(
                    'type'    => 'string',
                    'default' => 'Hello world'
                )
            ),
            'render_callback' => 'pgRenderDinamycBlock' // Función de callback para generar el SSR (Server Side Render)
        )
    );
}

De esta forma, construiste un panel de edición en la sidebar y una vista previa del render, en el espacio que ocupará el bloque, dándole al usuario una mejor experiencia para construir sus webs.

Para conocer más sobre los componentes que la comunidad de WordPress pone a tu disposición, puedes ingresar a este link.

Recuerda que siempre que hagas cambios en tu código JS tienes que volver a compilar o tienes que tener activado el comando npm run start para que cada vez que guardes compile nuevamente tu bloque.