Los campos personalizados proporcionan una forma de añadir información adicional al contenido del sitio web. Estos fragmentos de información suelen conocerse como metadatos.

Los metadatos contienen información sobre la información. En el caso de WordPress, es información asociada a entradas, usuarios, comentarios y términos.

Dada la relación de muchos a uno de los metadatos en WordPress, tus opciones son bastante ilimitadas. Puedes tener tantas opciones de metadatos como desees, y puedes almacenar casi cualquier cosa en ellos.

–Plugin Handbook

Aquí tienes algunos ejemplos de metadatos que puedes adjuntar a una entrada utilizando campos personalizados:

  • Las coordenadas geográficas de un lugar o inmueble
  • La fecha de un evento
  • El ISBN o autor de un libro
  • El estado de ánimo del día del autor del post

Y existen muchas más.

De entrada, WordPress no proporciona una forma sencilla de añadir y gestionar campos personalizados. En el Editor clásico, los campos personalizados se muestran en un cuadro situado en la parte inferior de la página, debajo del editor de entradas.

Campos personalizados en el Editor clásico.
Campos personalizados en el Editor clásico.

En Gutenberg, los campos personalizados están desactivados por defecto, pero puedes mostrarlos seleccionando el elemento correspondiente en la configuración de la entrada.

Añadir el panel de campos personalizados al editor de bloques.
Añadir el panel de campos personalizados al editor de bloques.

Por desgracia, no hay forma de mostrar metadatos en el frontend sin utilizar un plugin o ensuciarse las manos con el código.

Si eres usuario, encontrarás por ahí varios plugins excelentes que hacen el trabajo por ti. Pero si eres desarrollador y quieres sacar más partido a los campos personalizados de WordPress, integrarlos perfectamente en el editor de bloques y mostrarlos en el frontend de tu sitio web de WordPress mediante un bloque personalizado de Gutenberg, entonces estás en el lugar adecuado.

Así que, si te preguntas cuál es la mejor forma de utilizar los campos personalizados de WordPress tanto en Gutenberg como en el Editor clásico para desarrolladores de WordPress, la respuesta rápida es «crear un plugin que funcione tanto para el Editor clásico como para Gutenberg».

Pero no te preocupes demasiado. Si crear un plugin para gestionar campos personalizados en ambos editores puede ser un poco complicado, intentaremos que el proceso sea lo más sencillo posible. Una vez que comprendas los conceptos que trataremos en este artículo, adquirirás las habilidades necesarias para gestionar metacampos personalizados en Gutenberg y construir todo tipo de sitios web.

Nota: Antes de empezar, asegúrate de que tienes una versión actualizada de Node.js en tu ordenador

Dicho esto, aquí tienes nuestra guía:

Crear un Plugin de Bloques con la Herramienta Oficial create-block

El primer paso es crear un nuevo plugin con todos los archivos y dependencias necesarias para registrar un nuevo tipo de bloque. El plugin de bloques te permitirá crear fácilmente un tipo de bloque personalizado para gestionar y mostrar metadatos personalizados.

Para crear un nuevo tipo de bloque, utilizaremos la herramienta oficial de create-block. Para obtener una descripción detallada de cómo utilizar la herramienta crear un bloque, consulta nuestro artículo anterior sobre el desarrollo de bloques Gutenberg.

Abre tu herramienta de línea de comandos, navega hasta el directorio de plugins de tu sitio web de desarrollo de WordPress y ejecuta el siguiente comando:

npx @wordpress/create-block

Cuando se te solicite, añade los siguientes datos:

  • La variante de plantilla a utilizar para este bloque: dynamic
  • El slug del bloque utilizado para la identificación (también el nombre de la carpeta de salida): metadata-block
  • El espacio de nombres interno para el nombre del bloque (algo único para tus productos): meta-fields
  • El título de visualización de tu bloque: Meta Fields
  • La descripción breve de tu bloque (opcional): Descripción del bloque
  • El dashicon para facilitar la identificación de tu bloque (opcional): book
  • El nombre de la categoría para ayudar a los usuarios a navegar y descubrir tu bloque: widgets
  • ¿Quieres personalizar el plugin de WordPress? Sí/No

Dediquemos un momento a revisar estos detalles e intentemos comprender dónde se utilizan.

  • El slug del bloque utilizado para la identificación define el nombre de la carpeta y el textdomain del plugin
  • El espacio de nombres interno para el nombre del bloque define el espacio de nombres interno del bloque y el prefijo de la función que se utiliza en todo el código del plugin.
  • El título de visualización de tu bloque define el nombre del plugin y el nombre del bloque utilizado en la interfaz del editor.

La configuración puede tardar un par de minutos. Cuando se complete el proceso, obtendrás una lista de los comandos disponibles.

Plugin de bloque instalado correctamente.
Plugin de bloque instalado correctamente.

Antes de pasar a la siguiente sección, en tu herramienta de línea de comandos, navega hasta la carpeta de tu plugin y ejecuta los siguientes comandos:

cd metadata-block
npm start

Ya estás listo para construir tu código. El siguiente paso es editar el archivo PHP principal del plugin para construir un meta box para el Editor Clásico.

Así que, antes de pasar a la siguiente sección, instala y activa el plugin Classic Editor.

A continuación, abre la pantalla Plugins y activa el nuevo plugin Meta Fields.

Activar plugins.
Activar plugins.

Añadir un Meta Box al Editor Clásico

En el contexto del Editor clásico, un metabox es un contenedor que contiene elementos de formulario para introducir información específica, como el autor de la entrada, etiquetas, categorías, etc.

Además de los meta boxes incorporados, los desarrolladores de plugins pueden añadir cualquier número de meta boxes personalizados para incluir elementos de formulario HTML (o cualquier contenido HTML) donde los usuarios del plugin puedan introducir datos específicos del plugin.

La API de WordPress proporciona funciones útiles para registrar fácilmente meta boxes personalizados que incluyan todos los elementos HTML que tu plugin necesita para funcionar.

Para empezar, añade el siguiente código al archivo PHP del plugin que acabas de crear:

// register meta box
function meta_fields_add_meta_box(){
	add_meta_box(
		'meta_fields_meta_box', 
		__( 'Book details' ), 
		'meta_fields_build_meta_box_callback', 
		'post',
		'side',
		'default'
	 );
}

// build meta box
function meta_fields_build_meta_box_callback( $post ){
	  wp_nonce_field( 'meta_fields_save_meta_box_data', 'meta_fields_meta_box_nonce' );
	  $title = get_post_meta( $post->ID, '_meta_fields_book_title', true );
	  $author = get_post_meta( $post->ID, '_meta_fields_book_author', true );
	  ?>
	  <div class="inside">
	  	  <p><strong>Title</strong></p>
		  <p><input type="text" id="meta_fields_book_title" name="meta_fields_book_title" value="<?php echo esc_attr( $title ); ?>" /></p>	
		  <p><strong>Author</strong></p>
		  <p><input type="text" id="meta_fields_book_author" name="meta_fields_book_author" value="<?php echo esc_attr( $author ); ?>" /></p>
	  </div>
	  <?php
}
add_action( 'add_meta_boxes', 'meta_fields_add_meta_box' );

La función add_meta_box registra un nuevo meta box, mientras que la función callback construye el HTML que se inyectará en el meta box. No profundizaremos en este tema porque está fuera del alcance de nuestro artículo, pero encontrarás todos los detalles que necesitas aquí, aquí y aquí.

El siguiente paso es crear una función que guarde los datos introducidos por el autor de la entrada cada vez que se active el gancho save_post (consulta Recursos para desarrolladores):

// save metadata
function meta_fields_save_meta_box_data( $post_id ) {
	if ( ! isset( $_POST['meta_fields_meta_box_nonce'] ) )
		return;
	if ( ! wp_verify_nonce( $_POST['meta_fields_meta_box_nonce'], 'meta_fields_save_meta_box_data' ) )
		return;
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
		return;
	if ( ! current_user_can( 'edit_post', $post_id ) )
		return;

	if ( ! isset( $_POST['meta_fields_book_title'] ) )
		return;
	if ( ! isset( $_POST['meta_fields_book_author'] ) )
		return;

	$title = sanitize_text_field( $_POST['meta_fields_book_title'] );
	$author = sanitize_text_field( $_POST['meta_fields_book_author'] );

	update_post_meta( $post_id, '_meta_fields_book_title', $title );
	update_post_meta( $post_id, '_meta_fields_book_author', $author );
}
add_action( 'save_post', 'meta_fields_save_meta_box_data' );

De nuevo, consulta la documentación online para más detalles. Aquí sólo señalaremos el carácter de subrayado (_) que precede a la meta clave. Esto indica a WordPress que oculte las claves de estos campos personalizados de la lista de campos personalizados disponibles por defecto y hace que tus campos personalizados sólo sean visibles en tu metabox personalizado.

La siguiente imagen muestra el aspecto del cuadro meta personalizado en el Editor clásico:

Un meta box personalizado en el Editor clásico.
Un meta box personalizado en el Editor clásico.

Ahora bien, si desactivas el plugin del Editor clásico y compruebas lo que ocurre en el editor de bloques, verás que el cuadro meta sigue apareciendo y funcionando, pero no exactamente de la forma que cabría esperar.

Nuestro objetivo es crear un sistema para gestionar los metadatos adjuntos a las entradas del blog o a los tipos de entrada personalizados que se integre perfectamente en el editor de bloques. Por esta razón, el código mostrado hasta ahora sólo será necesario para garantizar la compatibilidad con el Editor clásico.

Así que, antes de seguir adelante, le diremos a WordPress que elimine el metabox personalizado del editor de bloques añadiendo la bandera __back_compat_meta_box a la función add_meta_box (consulta también Banderas de compatibilidad de metabox y compatibilidad con versiones anteriores).

Volvamos a la función de devolución de llamada que registra el meta box y cambiémosla como sigue:

// register meta box
function meta_fields_add_meta_box(){
	add_meta_box(
		'meta_fields_meta_box', 
		__( 'Book details' ), 
		'meta_fields_build_meta_box_callback', 
		'post', 
		'side',
		'default',
		// hide the meta box in Gutenberg
		array('__back_compat_meta_box' => true)
	 );
}

Guarda el archivo del plugin y vuelve al administrador de WordPress. Ahora, ya no deberías ver el cuadro meta personalizado en el editor de bloques. Si, en cambio, reactivas el Editor clásico, tu metabox personalizado volverá a aparecer.

Añadir Metacampos Personalizados al Editor de Bloques de Gutenberg (Tres Opciones)

En nuestros artículos anteriores sobre el desarrollo de bloques de Gutenberg, proporcionamos descripciones detalladas del editor, sus partes y cómo desarrollar bloques estáticos y bloques dinámicos.

Como hemos mencionado, en este artículo iremos un paso más allá y hablaremos de cómo añadir metacampos personalizados a las entradas del blog.

Hay varias formas de almacenar y utilizar los metadatos de las entradas en Gutenberg. Aquí cubriremos las siguientes:

Crear un bloque personalizado para almacenar y mostrar metacampos personalizados

En esta sección, te mostraremos cómo crear y gestionar metacampos personalizados desde dentro de un bloque dinámico. Según el Manual del Editor de Bloques, un metacampo de una entrada «es un objeto de WordPress que se utiliza para almacenar datos adicionales sobre una entrada» y necesitamos registrar primero un nuevo meta campo antes de poder utilizarlo.

Registrar metacampos personalizados

Antes de registrar un meta campo personalizado, debes asegurarte de que el tipo de entrada que lo utilizará admite campos personalizados. Además, cuando registres un metacampo personalizado, debes establecer el parámetro show_in_rest en true.

Ahora, vuelve al archivo del plugin. Añade el siguiente código:

/**
 * Register the custom meta fields
 */
function meta_fields_register_meta() {

    $metafields = [ '_meta_fields_book_title', '_meta_fields_book_author' ];

    foreach( $metafields as $metafield ){
        // Pass an empty string to register the meta key across all existing post types.
        register_post_meta( '', $metafield, array(
            'show_in_rest' => true,
            'type' => 'string',
            'single' => true,
            'sanitize_callback' => 'sanitize_text_field',
            'auth_callback' => function() { 
                return current_user_can( 'edit_posts' );
            }
        ));
    }  
}
add_action( 'init', 'meta_fields_register_meta' );

register_post_meta registra una meta clave para los tipos de post especificados. En el código anterior, hemos registrado dos meta campos personalizados para todos los tipos de entrada registrados en tu sitio web que admiten campos personalizados. Para más información, consulta la referencia de la función.

Una vez hecho esto, abre el archivo src/index.js de tu plugin de bloque.

Registra el tipo de bloque en el cliente

Ahora ve a la carpeta wp-content/plugins/metadata-block/src y abre el archivo src/index.js:

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import metadata from './block.json';

registerBlockType( metadata.name, {
	edit: Edit,
} );

Con los bloques estáticos también habríamos visto una funciónsave. En este caso, falta la función save porque hemos instalado un bloque dinámico. El contenido mostrado en el frontend se generará dinámicamente mediante PHP.

Construye el tipo de bloque

Navega hasta la carpeta wp-content/plugins/metadata-block/src y abre el archivo edit.js. Deberías ver el siguiente código (sin comentarios):

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
	return (
		<p { ...useBlockProps() }>
			{ __( 'Meta Fields – hello from the editor!', 'metadata-block' ) }
		</p>
	);
}

Aquí añadirás el código para generar el bloque que se mostrará en el editor.

El primer paso es importar los componentes y funciones necesarios para construir el bloque. Aquí tienes la lista completa de dependencias:

import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls, RichText } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
import { TextControl, PanelBody, PanelRow } from '@wordpress/components';
import './editor.scss';

Si has leído nuestros artículos anteriores, deberías estar familiarizado con muchas de estas declaracionesimport. Aquí mostraremos sólo un par de ellas:

import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';

Una vez que hayas importado estas dependencias, así es como useSelect y useEntityProp en la función Edit():

const postType = useSelect(
		( select ) => select( 'core/editor' ).getCurrentPostType(),
		[]
	);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );

Este código proporciona el actual postType, un objeto de metacampos (meta), y una función setter para actualizarlos (setMeta).

Ahora sustituye el código actual de la función Edit() por el siguiente:

export default function Edit() {
	const blockProps = useBlockProps();
	const postType = useSelect(
		( select ) => select( 'core/editor' ).getCurrentPostType(),
		[]
	);
	const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
	const bookTitle = meta[ '_meta_fields_book_title' ];
	const bookAuthor = meta[ '_meta_fields_book_author' ];
	const updateBookTitleMetaValue = ( newValue ) => {
		setMeta( { ...meta, _meta_fields_book_title: newValue } );
    };
	const updateBookAuthorMetaValue = ( newValue ) => {
		setMeta( { ...meta, _meta_fields_book_author: newValue } );
	};
return ( ... );
}

Otra vez:

  • Utilizamos useSelect para obtener el tipo de entrada actual.
  • useEntityProp devuelve una matriz de metacampos y una función setter para establecer nuevos meta valores.
  • updateBookTitleMetaValue y updateBookAuthorMetaValue son dos manejadores de eventos para guardar los valores de los metacampos.

El siguiente paso es construir el código JSX (JavaScript XML) devuelto por la función Edit():

export default function Edit() {
	...
	return (
		<>
			<InspectorControls>
				<PanelBody 
					title={ __( 'Book Details' )}
					initialOpen={true}
				>
					<PanelRow>
						<fieldset>
							<TextControl
								label={__( 'Book title' )}
								value={ bookTitle }
								onChange={ updateBookTitleMetaValue }
							/>
						</fieldset>
					</PanelRow>
					<PanelRow>
						<fieldset>
							<TextControl
								label={ __( 'Book author' ) }
								value={ bookAuthor }
								onChange={ updateBookAuthorMetaValue }
							/>
						</fieldset>
					</PanelRow>
				</PanelBody>
			</InspectorControls>
			<div { ...blockProps }>
				<RichText 
					tagName="h3"
					onChange={ updateBookTitleMetaValue }
					allowedFormats={ [ 'core/bold', 'core/italic' ] }
					value={ bookTitle }
					placeholder={ __( 'Write your text...' ) }
				/>
				<TextControl
					label="Book Author"
					value={ bookAuthor }
					onChange={ updateBookAuthorMetaValue }
				/>
			</div>
		</>
	);
}

El componente RichText proporciona una entrada de contenido editable, mientras que TextControl proporciona campos de texto simples.

También creamos un panel de barra lateral que contiene dos campos de entrada para utilizarlos en lugar de los dos controles de formulario incluidos en el bloque.

Guarda el archivo y vuelve al editor. Añade el bloque Meta Fields desde el insertador de bloques y rellena el título y el autor del libro.

Un bloque personalizado que incluye dos metacampos personalizados.
Un bloque personalizado que incluye dos metacampos personalizados.

Observarás que cada vez que cambies el valor del campo en el bloque, también cambiará el valor del campo de texto correspondiente en la barra lateral.

A continuación, tenemos que crear el código PHP que genera el HTML que se mostrará en el frontend.

Mostrar el bloque en el frontend

Abre de nuevo el archivo PHP principal en tu editor de código y reescribe la función de llamada de retorno que genera la salida del bloque de la siguiente manera:

function meta_fields_metadata_block_block_init() {
	register_block_type(
		__DIR__ . '/build',
		array(
			'render_callback' => 'meta_fields_metadata_block_render_callback',
		)
	);
}
add_action( 'init', 'meta_fields_metadata_block_block_init' );

function meta_fields_metadata_block_render_callback( $attributes, $content, $block ) {
	
	$book_title = get_post_meta( get_the_ID(), '_meta_fields_book_title', true );
	$book_author = get_post_meta( get_the_ID(), '_meta_fields_book_author', true );
    
	$output = "";

	if( ! empty( $book_title ) ){
		$output .= '<h3>' . esc_html( $book_title ) . '</h3>';
	}
	if( ! empty( $book_author ) ){
		$output .= '<p>' . __( 'Book author: ' ) . esc_html( $book_author ) . '</p>';
	}
	if( strlen( $output ) > 0 ){
		return '<div ' . get_block_wrapper_attributes() . '>' . $output . '</div>';
	} else {
		return '<div ' . get_block_wrapper_attributes() . '>' . '<strong>' . __( 'Sorry. No fields available here!' ) . '</strong>' . '</div>';
	}
}

Este código se explica por sí mismo. En primer lugar, utilizamos get_post_meta para recuperar los valores de los metacampos personalizados. A continuación, utilizamos esos valores para construir el contenido del bloque. Por último, la función de devolución de llamada devuelve el HTML del bloque.

El bloque está listo para ser utilizado. Hemos mantenido intencionadamente el código de este ejemplo lo más sencillo posible, pero utilizando los componentes nativos de Gutenberg puedes construir bloques más avanzados y sacar el máximo partido de los metacampos personalizados de WordPress.

Un bloque personalizado que incluye varios metacampos.
Un bloque personalizado que incluye varios metacampos.

En nuestro ejemplo, hemos utilizado los elementos h3 y p para construir el bloque para el frontend.

Pero puedes mostrar los datos de muchas formas. La siguiente imagen muestra una simple lista desordenada de metacampos.

Un bloque de ejemplo en el frontend.
Un bloque de ejemplo en el frontend.

Encontrarás el código completo de este ejemplo en este gist público.

Añadir un meta box personalizado a la barra lateral del documento

La segunda opción es adjuntar metacampos personalizados a las entradas mediante un plugin que genera un panel de configuración en la barra lateral del documento.

El proceso es bastante similar al del ejemplo anterior, salvo que en este caso no necesitaremos un bloque para gestionar los metadatos. Crearemos un componente para generar un panel que incluya un conjunto de controles en la barra lateral Documento siguiendo estos pasos:

  1. Crea un nuevo plugin de bloque con create-block
  2. Registra un metacampo personalizado para el Editor Clásico
  3. Registra los campos meta personalizados en el archivo principal del plugin mediante la función register_post_meta()
  4. Registra un plugin en el archivo index.js
  5. Construye el componente utilizando los componentes integrados de Gutenberg

Crear un nuevo plugin de bloque con la herramienta create-block

Para crear un nuevo plugin de bloque, sigue los pasos de la sección anterior. Puedes crear un nuevo plugin o editar los scripts que construimos en el ejemplo anterior.

Registrar un Meta Box Personalizada para el Editor Clásico

A continuación, debes registrar un metabox personalizado para garantizar la compatibilidad con versiones anteriores de los sitios web de WordPress que aún utilicen el Editor clásico. El proceso es el mismo que el descrito en la sección anterior.

Registrar los metacampos personalizados en el archivo principal del plugin

El siguiente paso es registrar los metacampos personalizados en el archivo principal del plugin a través de la función register_post_meta(). De nuevo, puedes seguir el ejemplo anterior.

Registrar un plugin en el archivo index.js

Una vez que hayas completado los pasos anteriores, es hora de registrar un plugin en el archivo index.js para renderizar un componente personalizado.

Antes de registrar el plugin, crea una carpeta components dentro de la carpeta src del plugin. Dentro de la carpeta components, crea un nuevo archivo MetaBox.js. Puedes elegir el nombre que creas conveniente para tu componente. Sólo asegúrate de seguir las mejores prácticas de nomenclatura en React.

Antes de continuar, instala el módulo@wordpress/plugins desde tu herramienta de línea de comandos.

Detén el proceso (mac), instala el módulo y vuelve a iniciar el proceso:

^C
npm install @wordpress/plugins --save
npm start

Una vez hecho esto, abre el archivo index.js de tu plugin y añade el siguiente código.

/**
 * Registers a plugin for adding items to the Gutenberg Toolbar
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-sidebar/
 */
import { registerPlugin } from '@wordpress/plugins';

import MetaBox from './components/MetaBox';

Este código es bastante autoexplicativo. Sin embargo, queremos detenernos un momento en las dos declaraciones import para aquellos lectores que no tengan conocimientos avanzados de React.

Con la primera sentencia import, encerramos el nombre de la función entre llaves. Con la segunda sentencia import, el nombre del componente no va entre llaves.

A continuación, registra tu plugin:

registerPlugin( 'metadata-plugin', {
	render: MetaBox
} );

registerPlugin simplemente registra un plugin. La función acepta dos parámetros:

  • Una cadena única que identifica al complemento
  • Un objeto de configuración del plugin. Ten en cuenta que la propiedad render debe estar especificada y debe ser una función válida.

Construir el componente utilizando los componentes incorporados de Gutenberg

Es hora de construir nuestro componente React. Abre el archivo MetaBox.js (o como lo hayas llamado) y añade las siguientes sentencias import:

import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { PanelRow, TextControl, DateTimePicker } from '@wordpress/components';
  • La función compose realiza la composición de funciones, lo que significa que el resultado de una función se pasa a otra función.Antes de poder utilizar compose, puede que necesites instalar el módulo correspondiente: 
    npm install @wordpress/compose --save

    Veremos la función compose en acción dentro de un momento.

  • withSelect y withDispatch son dos componentes de orden superior que te permiten obtener o enviar datos desde o hacia un almacén de WordPress. withSelect se utiliza para inyectar accesorios derivados del estado utilizando selectores registrados, withDispatch se utiliza para enviar accesorios utilizando creadores de acciones registrados.
  • PluginDocumentSettingPanel renderiza elementos en la barra lateral del documento (consulta el código fuente en Github).

A continuación, crearás el componente para mostrar el panel metabox en la barra lateral del documento. En tu archivo MetaBox.js, añade el siguiente código:

const MetaBox = ( { postType, metaFields, setMetaFields } ) => {

	if ( 'post' !== postType ) return null;

	return(
		<PluginDocumentSettingPanel 
			title={ __( 'Book details' ) } 
			icon="book"
			initialOpen={ false }
		>
			<PanelRow>
				<TextControl 
					value={ metaFields._meta_fields_book_title }
					label={ __( "Title" ) }
					onChange={ (value) => setMetaFields( { _meta_fields_book_title: value } ) }
				/>
			</PanelRow>
			<PanelRow>
				<TextControl 
					value={ metaFields._meta_fields_book_author }
					label={ __( "Author" ) }
					onChange={ (value) => setMetaFields( { _meta_fields_book_author: value } ) }
				/>
			</PanelRow>
			<PanelRow>
				<TextControl 
					value={ metaFields._meta_fields_book_publisher }
					label={ __( "Publisher" ) }
					onChange={ (value) => setMetaFields( { _meta_fields_book_publisher: value } ) }
				/>
			</PanelRow>
			<PanelRow>
				<DateTimePicker
					currentDate={ metaFields._meta_fields_book_date }
					onChange={ ( newDate ) => setMetaFields( { _meta_fields_book_date: newDate } ) }
					__nextRemoveHelpButton
					__nextRemoveResetButton
				/>
			</PanelRow>
		</PluginDocumentSettingPanel>
	);
}

const applyWithSelect = withSelect( ( select ) => {
	return {
		metaFields: select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
		postType: select( 'core/editor' ).getCurrentPostType()
	};
} );

const applyWithDispatch = withDispatch( ( dispatch ) => {
	return {
		setMetaFields ( newValue ) {
			dispatch('core/editor').editPost( { meta: newValue } )
		}
	}
} );

export default compose([
	applyWithSelect,
	applyWithDispatch
])(MetaBox);

Vamos a desglosar este código.

  • El elementoPluginDocumentSettingPanel crea un nuevo panel en la barra lateral del documento. Establecemos el título («Book Details») y el icono, y establecemos initialOpen en false, lo que significa que inicialmente el panel está cerrado.
  • Dentro de PluginDocumentSettingPanel tenemos tres campos de texto y un elemento DateTimePicker que permite al usuario establecer la fecha de publicación.
  • withSelect proporciona acceso a la función select que estamos utilizando para recuperar metaFields y postType. withDispatch proporciona acceso a la función dispatch, que permite actualizar los valores de los metadatos.
  • Por último, la función compose nos permite componer nuestro componente con componentes de orden superior withSelect y withDispatch. Esto da acceso al componente a las propiedades metaFields y postType y a la función setMetaFields.

Guarda tu archivo MetaBox.js y crea una nueva entrada en tu sitio web de desarrollo de WordPress y echa un vistazo a la barra lateral del documento. Deberías ver el nuevo panel de Book Details.

Un panel metabox personalizado en Gutenberg.
Un panel metabox personalizado en Gutenberg.

Ahora haz tus pruebas. Establece los valores de tus meta campos personalizados y guarda la entrada. Después recarga la página y comprueba si los valores que has introducido están en su sitio.

Añade el bloque que hemos construido en la sección anterior y comprueba si todo funciona correctamente.

Añadir una barra lateral personalizada para gestionar los metadatos de la entrada

Si tienes un gran número de meta campos personalizados que añadir a tus entradas o tipos de entrada personalizados, también puedes crear una Barra Lateral de Configuración Personalizada específica para tu plugin.

El proceso es muy similar al del ejemplo anterior, así que si has entendido los pasos que se han comentado en la sección anterior, no tendrás ninguna dificultad para crear una Barra Lateral Personalizada para Gutenberg.

De nuevo:

  1. Crea un nuevo plugin de bloque con create-block
  2. Registra un metabox personalizado para el Editor Clásico
  3. Registra los campos meta personalizados en el archivo principal del plugin mediante la función register_post_meta()
  4. Registra un plugin en el archivo index.js
  5. Construye el componente utilizando los componentes integrados de Gutenberg

Crear un nuevo plugin de bloque con la herramienta create-block

De nuevo, para crear un nuevo plugin de bloque, sigue los pasos descritos anteriormente. Puedes crear un nuevo plugin o editar los scripts creados en los ejemplos anteriores.

Registra una Meta Box Personalizada para el Editor Clásico

Ahora registra un metabox personalizado para garantizar la compatibilidad con versiones anteriores de los sitios web de WordPress que aún utilizan el Editor clásico. El proceso es el mismo que el descrito en la sección anterior.

Registrar los metacampos personalizados en el archivo principal del plugin

Registra los metacampos personalizados en el archivo principal del plugin mediante la función register_post_meta().

Registrar un plugin en el archivo index.js

Ahora crea un archivo CustomSidebar.js vacío en tu carpeta de componentes.

Una vez hecho esto, cambia tu archivo index.js de la siguiente manera:

/**
 * Registers a plugin for adding items to the Gutenberg Toolbar
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-sidebar/
 */
import { registerPlugin } from '@wordpress/plugins';

import CustomSidebar from './components/CustomSidebar';
// import MetaBox from './components/MetaBox';

registerPlugin( 'metadata-block', {
    render: CustomSidebar
} );

Con el código anterior importamos primero el componente CustomSidebar, y luego le decimos a la función registerPlugin que renderice el nuevo componente.

Construir el componente utilizando los componentes incorporados de Gutenberg

A continuación, abre el archivo CustomSidebar.js y añade las siguientes dependencias:

import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
import { PanelBody, PanelRow, TextControl, DateTimePicker } from '@wordpress/components';

Deberías darte cuenta de que estamos importando dos nuevos componentes:

  • PluginSidebar añade un icono en la barra de herramientas de Gutenberg que, al hacer clic, muestra una barra lateral que incluye el contenido envuelto en el elemento<PluginSidebar /> (El componente también está documentado en GitHub).
  • PluginSidebarMoreMenuItem muestra un elemento de menú en Plugins en el menú desplegable More Menu y se puede utilizar para activar el componente PluginSidebar correspondiente (véase también en GitHub).

Ahora puedes crear tu componente personalizado:

const CustomSidebar = ( { postType, metaFields, setMetaFields } ) => {
        
    if ( 'post' !== postType ) return null;

    return (
        <>
            <PluginSidebarMoreMenuItem 
                target="metadata-sidebar" 
                icon="book"
            >
                Metadata Sidebar
            </PluginSidebarMoreMenuItem>
            <PluginSidebar 
                name="metadata-sidebar" 
                icon="book" 
                title="My Sidebar"
            >
                <PanelBody title="Book details" initialOpen={ true }>
                    <PanelRow>
                        <TextControl 
                            value={ metaFields._meta_fields_book_title }
                            label={ __( "Title" ) }
                            onChange={ (value) => setMetaFields( { _meta_fields_book_title: value } ) }
                        />
                    </PanelRow>
                    <PanelRow>
                        <TextControl 
                            value={ metaFields._meta_fields_book_author }
                            label={ __("Author", "textdomain") }
                            onChange={ (value) => setMetaFields( { _meta_fields_book_author: value } ) }
                        />
                    </PanelRow>
                    <PanelRow>
                        <TextControl 
                            value={ metaFields._meta_fields_book_publisher }
                            label={ __("Publisher", "textdomain") }
                            onChange={ (value) => setMetaFields( { _meta_fields_book_publisher: value } ) }
                        />
                    </PanelRow>
                    <PanelRow>
                        <DateTimePicker
                            currentDate={ metaFields._meta_fields_book_date }
                            onChange={ ( newDate ) => setMetaFields( { _meta_fields_book_date: newDate } ) }
                            __nextRemoveHelpButton
                            __nextRemoveResetButton
                        />
                    </PanelRow>
                </PanelBody>
            </PluginSidebar>
        </>
    )
}

El paso final es la composición del componente con los componentes de orden superior withSelect y withDispatch:

const applyWithSelect = withSelect( ( select ) => {
    return {
        metaFields: select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
        postType: select( 'core/editor' ).getCurrentPostType()
    };
} );

const applyWithDispatch = withDispatch( ( dispatch ) => {
    return {
        setMetaFields ( newValue ) {
            dispatch('core/editor').editPost( { meta: newValue } )
        }
    }
} );

export default compose([
    applyWithSelect,
    applyWithDispatch
])(CustomSidebar);

Guarda los cambios y comprueba la interfaz del editor. Si abres el desplegable Opciones, verás un nuevo elemento Barra lateral de metadatos en la sección Plugins. Si haces clic en el nuevo elemento, se activará tu flamante barra lateral personalizada.

El componente PluginSidebarMoreMenuItem añade un elemento de menú bajo Opciones - Plugins.
El componente PluginSidebarMoreMenuItem añade un elemento de menú bajo Opciones – Plugins.

Lo mismo ocurre cuando haces clic en el icono del libro de la esquina superior derecha.

La barra lateral de Configuración del Plugin.
La barra lateral de Configuración del Plugin.

Ahora vuelve a tu sitio web de desarrollo, y crea una nueva entrada de blog. Rellena tus meta campos, y luego añade el bloque al lienzo del editor. Debería incluir los mismos metavalores que introdujiste en tu barra lateral personalizada.

Guarda la entrada y previsualiza la página en el frontend. Deberías ver tu ficha con el título del libro, el autor, la editorial y la fecha de publicación.

Encontrarás el código completo de este artículo en este gist público.

Lecturas Adicionales

En este artículo hemos tratado múltiples temas, desde selectores hasta componentes de orden superior y mucho más. También hemos enlazado los principales recursos que hemos utilizado como referencia a lo largo del artículo.

Pero si deseas profundizar en esos temas, también puedes consultar los siguientes recursos adicionales:

Documentación de Gutenberg y Recursos Oficiales de WordPress

Más recursos oficiales

Recursos adicionales de la comunidad

Lecturas útiles del sitio web de Kinsta

Resumen

En este tercer artículo de nuestra serie sobre el desarrollo de bloques de Gutenberg, hemos tratado nuevos temas avanzados que deberían completar el panorama esbozado en los artículos anteriores sobre el desarrollo de bloques dinámicos y estáticos.

Ahora deberías ser capaz de aprovechar el potencial de los campos personalizados en Gutenberg y crear sitios web de WordPress más avanzados y funcionales.

Pero aún hay más. Con los conocimientos que has adquirido en nuestros artículos sobre el desarrollo de bloques, también deberías tener una buena idea de cómo desarrollar componentes React fuera de WordPress. Después de todo, Gutenberg es una SPA basada en React.

¡Y ahora te toca a ti! ¿Has creado ya bloques Gutenberg que utilicen metacampos personalizados? Comparte tus creaciones con nosotros en los comentarios.

Carlo Daniele Kinsta

Carlo es un diseñador y desarrollador de front-end freelance. Cuando escribe artículos y tutoriales, Carlo se ocupa principalmente de los estándares web, pero cuando juega con sitios web, su mejor compañero de trabajo es WordPress.