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.
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.
En Gutenberg, los campos personalizados están desactivados por defecto, pero puedes mostrarlos seleccionando el elemento correspondiente en la configuración de la entrada.
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-blockCuando 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.
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 startYa 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.
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:
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' );useSelectes un gancho personalizado para recuperar accesorios de selectores registrados. Lo utilizaremos para recuperar el tipo de entrada actual (consulta también la referencia @wordpress/data y las introducciones useDispatch y useSelect)useEntityPropes un gancho personalizado que permite a los bloques recuperar y cambiar los campos meta de las entradas. Se define como un «gancho que devuelve el valor y un setter para la propiedad especificada de la entidad proporcionada más cercana del tipo especificado». Devuelve «un array donde el primer elemento es el valor de la propiedad, el segundo es el setter y el tercero es el objeto de valor completo de la API REST que contiene más información comoraw,renderedyprotectedprops». (Consulta también Actualizaciones generales de la API del Editor de bloques)
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
useSelectpara obtener el tipo de entrada actual. useEntityPropdevuelve una matriz de metacampos y una función setter para establecer nuevos meta valores.updateBookTitleMetaValueyupdateBookAuthorMetaValueson 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.
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.
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.
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:
- Crea un nuevo plugin de bloque con create-block
- Registra un metacampo personalizado para el Editor Clásico
- Registra los campos meta personalizados en el archivo principal del plugin mediante la función register_post_meta()
- Registra un plugin en el archivo index.js
- 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 startUna 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
renderdebe 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
composerealiza la composición de funciones, lo que significa que el resultado de una función se pasa a otra función.Antes de poder utilizarcompose, puede que necesites instalar el módulo correspondiente:npm install @wordpress/compose --saveVeremos la función
composeen acción dentro de un momento. withSelectywithDispatchson dos componentes de orden superior que te permiten obtener o enviar datos desde o hacia un almacén de WordPress.withSelectse utiliza para inyectar accesorios derivados del estado utilizando selectores registrados,withDispatchse utiliza para enviar accesorios utilizando creadores de acciones registrados.PluginDocumentSettingPanelrenderiza 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 elemento
PluginDocumentSettingPanelcrea un nuevo panel en la barra lateral del documento. Establecemos el título («Book Details») y el icono, y establecemosinitialOpenenfalse, lo que significa que inicialmente el panel está cerrado. - Dentro de
PluginDocumentSettingPaneltenemos tres campos de texto y un elementoDateTimePickerque permite al usuario establecer la fecha de publicación. withSelectproporciona acceso a la funciónselectque estamos utilizando para recuperarmetaFieldsypostType.withDispatchproporciona acceso a la funcióndispatch, que permite actualizar los valores de los metadatos.- Por último, la función
composenos permite componer nuestro componente con componentes de orden superiorwithSelectywithDispatch. Esto da acceso al componente a las propiedadesmetaFieldsypostTypey a la funciónsetMetaFields.
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.
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:
- Crea un nuevo plugin de bloque con create-block
- Registra un metabox personalizado para el Editor Clásico
- Registra los campos meta personalizados en el archivo principal del plugin mediante la función register_post_meta()
- Registra un plugin en el archivo index.js
- 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:
PluginSidebarañ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).PluginSidebarMoreMenuItemmuestra un elemento de menú en Plugins en el menú desplegable More Menu y se puede utilizar para activar el componentePluginSidebarcorrespondiente (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.
Lo mismo ocurre cuando haces clic en el icono del libro de la esquina superior derecha.
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
- Manual del Plugin / Custom Meta Boxes
- Manual del Plugin / Managing Post Metadata
- Guías Prácticas / Meta Boxes
- Guías Prácticas / Plugin Sidebar
- Manual del Editor de Bloques / PluginSidebar
- Referencia de Paquetes / @wordpress/compose
- Paquetes / data / Comparación con Redux
- Paquetes / data / withDispatch
- Paquetes / data / dispatch
- Paquetes / data / withSelect
- Paquetes / data / select
Más recursos oficiales
- Componentes de orden superior en React
- Creadores de acciones en Redux
- Derivar datos con selectores en Redux
Recursos adicionales de la comunidad
- Ganchos fantásticos y dónde utilizarlos (por Darren Ethier)
- Visión general e introducción a las series de datos de WordPress (por Darren Ethier)
- Guía de estilo React/JSX de Airbnb
- Componentes de orden superior (HOC) de React (por Robin Wieruch)
- Composición de funciones en JavaScript
- Solicitar datos en Gutenberg con getEntityRecords (por Ryan Welcher)
Lecturas útiles del sitio web de Kinsta
- ¿Qué es React.js? Un vistazo a la popular biblioteca JavaScript
- Las mejores prácticas de React para mejorar tu juego
- Bibliotecas de componentes de React UI
- Cómo crear un flujo de trabajo de WordPress eficaz para desarrolladores
- El salario de un desarrollador de WordPress: La media y cómo aumentar el tuyo
- ¿Qué es JavaScript? Un vistazo al lenguaje de programación más popular de la Web
- Guía definitiva para gestionar errores en JavaScript
- Las 40 mejores bibliotecas y marcos JavaScript para 2023
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.
Deja una respuesta