Cómo agregar metacampos de publicación a la barra lateral del documento de Gutenberg

En esta publicación, veremos cómo agregar metaconfiguraciones de publicaciones personalizadas a la barra lateral de Gutenberg, en la pestaña "Documento", en lugar de depender de agregar metacuadros de la manera tradicional (y, sinceramente, mucho más manual).

Si ha trabajado con WordPress un tiempo antes de que Gutenberg existiera, probablemente esté familiarizado con la adición de metadatos de publicaciones personalizadas con [add_meta_box](https://developer.wordpress.org/reference/functions/add_meta_box/)(). Esta función le permite agregar un cuadro meta con su contenido personalizado en la parte inferior o al costado al editar una publicación. ¡Este método todavía funciona, también en el editor de Gutenberg!

Sin embargo, se ve un poco fuera de lugar en comparación con el resto del contenido de la barra lateral de Gutenberg. Y sin mencionar que necesitaría escribir manualmente el código de entrada (casilla de verificación, entradas de texto, etc.) con PHP y también escribir código adicional para guardarlos cuando se actualice la publicación. Y si desea que la metaconfiguración de su publicación sea dinámica (digamos que desea ocultar un campo a menos que se haya activado algún otro campo), entonces tendría que poner en cola manualmente un script y sí, lo adivinó, manejar manualmente la lógica dinámica. de ocultar y mostrar. Todo esto ahora está desactualizado y es más fácil con el nuevo editor de Gutenberg basado en Javascript. Fácilmente podemos hacer algo como esto:

El proceso

El proceso es el siguiente:

• Registramos cada meta clave de publicación personalizada que queremos agregar en PHP usando [register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/)()y la configuramos como disponible en la API REST de WP. Este es un paso necesario para que la publicación meta esté disponible en el editor de Gutenberg.
• Creamos un archivo Javascript y lo ponemos en cola específicamente para el editor (solo).
• Dentro del archivo Javascript registramos un complemento [registerPlugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerPlugin)()diciéndole que represente nuestro componente.
• Dentro de ese componente podemos generar lo que necesitemos. Podemos usar los componentes integrados de WordPress para representar fácilmente diferentes tipos de configuraciones. Y al usar el paquete de datos de WordPress, podemos obtener y actualizar los valores meta de la publicación de inmediato a medida que se modifican.

Entremos directamente, comenzando con la parte de PHP; registrando el post meta.

Registro de la publicación meta

Para cada meta de publicación que desee agregar a la barra lateral de Gutenberg, deberá registrarse usando [register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/)(). Esto es necesario para que estén disponibles a través de la API REST de WP (que usa Gutenberg) y, por lo tanto, disponibles en nuestro Javascript.

En el functions.phparchivo de su tema o en algún otro archivo PHP activo, agregue una función enganchada al initgancho ‘ ‘. Dentro de la función, repite un register_post_meta()para cada meta de publicación personalizada que desea agregar. La función toma tres argumentos; El primer parámetro es el tipo de publicación para el que desea registrar el meta (establecido como cadena vacía para todos los tipos de publicación). El segundo parámetro es el nombre de la meta clave para su meta. Y el tercero es una serie de configuraciones. Es aquí donde definimos que este meta debe ser accesible en la API REST de WP configurando ‘ show_in_rest‘ en verdadero.

Por ejemplo, digamos que quiero agregar un interruptor de encendido/apagado y una entrada de texto a la barra lateral del editor. Eso significa que register_post_meta()solicito un tipo de valor booleano y de cadena, respectivamente. También quiero limitar estos metadatos de publicación al tipo de publicación ‘publicación’ solamente. Eso se vería algo como:

Ahora tengo una meta clave de publicación lista _my_custom_booly _my_custom_textdisponible en Gutenberg. Te recomiendo que les cambies el nombre a algo que tenga sentido para ti.

Registrando nuestro plugin Javascript

Para nuestro próximo paso, agregaremos un archivo Javascript y nos aseguraremos de ponerlo en cola usando PHP.

Tenga en cuenta que escribo el código Javascript en sintaxis ES6. Esto significa que configuré una configuración de paquete web/Babel para compilar mi archivo en un archivo Javascript legible separado para el navegador.

Tengo una guía sobre cómo configurar esto si no está seguro de cómo funciona:

Necesitamos asegurarnos de que WordPress cargue nuestro script en el editor. Hacemos esto conectando una función enqueue_block_editor_assetsy llamando a [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)():

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_script(
        'awp-custom-meta-plugin', 
        get_template_directory_uri(). '/assets/js/gutenberg/plugin-awp-custom-postmeta.js', 
        [ 'wp-edit-post' ],
        false,
        false
    );
} );

Supongo que está familiarizado con la forma de poner en cola los scripts y puede reemplazar los valores con los suyos. Como segundo parámetro, proporciono la ruta al archivo de compilación (no el archivo fuente). Para garantizar que nuestro script no se cargue demasiado pronto, configuré ‘ wp-edit-post‘ como una dependencia. Ese es el paquete que necesitamos para manejar la publicación meta.

Ahora pasemos a la parte de Javascript.

Primero necesitamos llamar [registerPlugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerPlugin)()y pasar nuestro componente para renderizar el panel en la barra lateral del Documento Gutenberg. Esta función está disponible en el wp.pluginspaquete, así que la desestructuraré en la parte superior. Me gusta mantener mis archivos ordenados, así que creo otro archivo; "awp-custom-postmeta-fields.js" para contener el componente representado e importarlo.

Escribiendo nuestro componente

Empecemos a crear un componente básico que no haga nada más que sentarse allí en el lugar correcto, así que lo eliminamos primero. Para renderizar un componente en la barra lateral Documento de Gutenberg, usamos el [PluginDocumentSettingPanel](https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-document-setting-panel/)componente. Podemos establecer atributos como a title, icony className. Y lo que haya dentro se representará en la barra lateral del Documento. Por ahora, solo estoy enviando un mensaje de texto "Hola".

Con el código anterior (compilado), obtenemos esto:

Impresionante. Sin embargo, queremos agregar algunas entradas. Pero para conectar esas entradas con nuestra publicación meta personalizada, necesitamos componer nuestro componente con los componentes de orden superior withSelect(para obtener los valores meta de la publicación) y withDispatch(para actualizar los valores meta de la publicación). Puede parecer un poco complejo si no ha trabajado antes con componentes de orden superior, pero una vez que lo comprende, es bastante simple.

Necesitamos primero cambiar nuestra exportdeclaración. En lugar de simplemente devolver nuestro componente solo, debemos componerlo con withSelecty withDispatch, ambos en el wp.datapaquete.

En su interior withSelect()tenemos acceso a la potente select()función. Usando select()podemos obtener los valores meta de la publicación actual. También podemos buscar el tipo de publicación actual, si queremos. Como mencioné anteriormente al registrar meta de publicaciones, podemos limitar las metas de publicaciones a un tipo de publicación específico. Si buscamos el tipo de publicación de la publicación actual, podemos asegurarnos en nuestro componente de mostrar nuestro código solo si estamos en el tipo de publicación correcto. Más sobre eso más adelante.

En withDispatch()podemos definir funciones que podemos ejecutar en nuestro componente. Hacemos una función que usaremos dispatch()para actualizar el meta de la publicación.

Cambiemos la exportdeclaración a esto:

También necesitamos desestructurarlos de los siguientes paquetes en la parte superior del archivo:

const { compose } = wp.compose;
const { withSelect, withDispatch } = wp.data;

Con esto, nuestro AWP_Custom_Plugincomponente tiene acceso a tres nuevos accesorios; postMetaque contiene todos los metavalores de la publicación actual; postTypeque contiene el tipo de publicación de la publicación actual; y finalmente la función setPostMeta()que hicimos en withDispatch()la cual se actualizará el meta de la publicación.

Entonces, en nuestra definición de componente, podemos desestructurar esos tres nuevos accesorios;

Y ahora podemos agregar algunas entradas a nuestro renderizado, asegurándonos de que muestren el valor actual y que actualicen el meta de la publicación en el evento de cambio. Registré un valor booleano y una cadena, por lo que, como ejemplo, agregaré un ToggleControlpara alternar y un simple TextControlpara una entrada de texto.

Si no está seguro acerca de los componentes integrados en WordPress, tengo un libro electrónico completamente gratuito que cubre casi la mayoría de los componentes disponibles en Gutenberg, incluidos los accesorios que podemos configurar para cada uno.

Aquí hay un ejemplo de cómo podría verse nuestro componente:

En línea #9-10y #16-17encontramos las partes críticas. Establecemos el valor actual de las entradas postMeta.<your meta key here>y en su evento onChange ejecutamos la función setPostMeta( { <your meta key here>: ... } )al nuevo valor actualizado.

Finalmente, una palabra sobre cómo limitar su componente a un tipo de publicación específico. En nuestro withSelect()estamos pasando el tipo de publicación de la publicación actual en el prop postType. Todo lo que tenemos que hacer en nuestro componente es comparar este valor con un tipo de publicación y devolver un valor nulo si no coincide:

¡Y eso es! Nuestro código ahora debería estar funcionando. El resultado final debe ser algo como:

Código definitivo

Registrando post meta y poniendo en cola el archivo Javascript:

Los dos archivos Javascript: