A lo largo de los años, hemos explorado Gutenberg desde muchas perspectivas. Hemos diseccionado las funcionalidades del editor, las hemos comparado con las de otros constructores de páginas, hemos construido bloques personalizados estáticos y dinámicos, y mucho más.
Con las últimas versiones de WordPress, las nuevas funcionalidades y herramientas te permiten crear diseños complejos más fácilmente, enriqueciendo y mejorando la funcionalidad del editor de bloques sin necesidad de construir bloques personalizados.
Gracias a la introducción de patrones de bloques y herramientas para desarrolladores como la API Block Bindings, hay menos casos de uso para los bloques personalizados. Ahora puedes crear estructuras de bloques complejas, inyectar valores de metadatos en tu contenido y automatizar buena parte de tu flujo de trabajo sin salir de la interfaz del editor. En resumen, ahora WordPress te permite crear sitios complejos con tan pocos clics como nunca antes.
Añadir controles y herramientas personalizados al editor puede ayudarte a que el proceso de creación de contenidos sea más fluido. Por ejemplo, puede que necesites añadir un panel a la barra lateral de publicaciones para añadir funcionalidad o crear una barra lateral personalizada para gestionar varios meta campos.
¡Vamos a empezar!
Cómo crear un plugin editor de bloques sin crear un bloque personalizado
WordPress proporciona una práctica herramienta de línea de comandos que te permite instalar un entorno de desarrollo local Node.js con todos los archivos y dependencias necesarios para crear un bloque personalizado. Sólo tienes que escribir npx @wordpress/create-block en la herramienta de línea de comandos, esperar unos segundos y listo.
Sin embargo, crear un bloque personalizado no es necesario cuando sólo necesitas añadir una barra lateral o un simple panel de configuración. En este caso, necesitas crear un plugin de Gutenberg.
WordPress no proporciona una utilidad para automatizar el proceso de creación de un plugin para Gutenberg, por lo que tendrás que hacerlo manualmente. Pero no te preocupes demasiado. El proceso es relativamente sencillo, y te guiaremos a través de él. Estos son los pasos a seguir:
1. Descarga e instala un entorno de desarrollo local
Lo primero es lo primero: Aunque puedes desarrollar tu plugin Gutenberg en un entorno remoto, puede que te resulte más cómodo instalar localmente un sitio web de WordPress para el desarrollo. Puedes utilizar cualquier entorno basado en PHP y MySQL. Entre las muchas alternativas disponibles ahí fuera, te recomendamos DevKinsta. Es gratuito, con todas las funcionalidades, fácil de usar y 100% compatible con el alojamiento de Kinsta.
Una vez que tengas configurado tu sitio de desarrollo, estarás listo para crear un plugin de editor de bloques Gutenberg.
2. Descarga e instala Node.js y npm
Descarga Node.js de nodejs.org e instálalo en tu ordenador. Esto también instalará npm, el gestor de paquetes de Node.
Una vez hecho esto, inicia tu herramienta de línea de comandos y ejecuta node -v y npm -v. Deberías ver las versiones instaladas de Node.js y npm.
3. Crea la carpeta de tu plugin
Crea una nueva carpeta en wp-content/plugins y renómbrala my-sidebar-plugin o algo similar. Recuerda que este nombre debe reflejar el nombre de tu plugin.
Abre el terminal, navega hasta la carpeta del plugin e inicializa un proyecto npm con el siguiente comando:
npm init -yEsto creará un archivo básico package.json.
4. Instala las dependencias
En tu herramienta de línea de comandos, escribe el siguiente comando:
npm install @wordpress/plugins @wordpress/scripts --save-dev@wordpress/pluginsinstala el módulo para WordPressplugins@wordpress/scriptsinstala una colección de scripts reutilizables para el desarrollo de WordPress.
Se debería haber añadido una nueva carpeta node_modules a tu proyecto.
Ahora, abre tu package.json y actualiza el scripts como se indica a continuación:
{
"name": "my-sidebar-plugin",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"@wordpress/plugins": "^7.14.0",
"@wordpress/scripts": "^30.7.0"
}
}Ahora puedes comprobar la carpeta del plugin:
5. Crea los archivos del plugin
En el directorio de tu plugin, crea un nuevo archivo .php y dale el mismo nombre que a tu carpeta. En nuestro ejemplo, es my-sidebar-plugin.php.
Abre el archivo y pega el siguiente código para registrar el plugin en el servidor:
<?php
/**
* Plugin Name: My Sidebar Plugin
*/
function my_sidebar_plugin_register_script() {
wp_enqueue_script(
'my_sidebar_plugin_script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-plugins', 'wp-edit-post' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
}
add_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );A continuación, crea una carpeta src en el directorio de tu plugin. En ella, crea un nuevo archivo index.js con el siguiente código:
import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/edit-post';
const MyPluginSidebar = () => (
<PluginSidebar
name="my-sidebar-plugin"
title="My Sidebar Plugin"
>
<div>
Hello my friends!
</div>
</PluginSidebar>
);
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );6. Compila el código
Sólo falta la compilación. Vuelve a la línea de comandos y ejecuta el siguiente comando:
npm run buildEsto crea una carpeta build con los archivos comprimidos del proyecto.
Cuando hayas terminado, ve a la pantalla de plugins de tu panel de control de WordPress y activa el plugin. Crea una nueva entrada o página y haz clic en el icono del plugin en la esquina superior derecha para mostrar tu barra lateral personalizada.
7. Desarrollar y construir
Hemos colocado el archivo index.js en la carpeta src. Utilizar una carpeta src es una convención común en el desarrollo de plugins y temas para WordPress, ya que facilita la comprensión de tu código a otros desarrolladores.
Al colocar tu código JS en la carpeta src, puedes utilizar el comando npm start o npm run start para iniciar un entorno de desarrollo que supervise los scripts y recompile automáticamente el código cuando sea necesario. Cuando hayas terminado con el desarrollo, el comando npm build o npm run build compilará el código JavaScript en la carpeta build, que contendrá el código optimizado para producción.
Ahora, pongamos en práctica lo que hemos aprendido y modifiquemos el plugin que hemos creado en la sección anterior para añadir un nuevo panel a la barra lateral del editor de entradas para gestionar los campos personalizados.
Cómo crear una barra lateral adicional para gestionar los campos meta de las entradas
Nuestro objetivo es crear una barra lateral personalizada que contenga un panel con un único campo de texto para añadir y editar un meta campo personalizado.
Antes de entrar en materia, debemos mencionar que podríamos utilizar una meta box personalizada para conseguir el mismo resultado. Con WordPress 6.7, los meta boxes se han actualizado y ahora son totalmente compatibles con el editor de bloques, así que puede que te preguntes por qué gestionar los meta campos desde una barra lateral personalizada en lugar de desde un meta box. La razón es que una barra lateral te permite aprovechar los componentes incorporados. Esto te ayuda a construir interfaces más amigables con potentes controles que también deberían resultar familiares a los usuarios.
Dicho esto, aquí tienes el proceso para crear una barra lateral personalizada que te permita gestionar campos personalizados desde el editor.
my-sidebar-plugin.php
Paso 1: Registrar el meta de la entrada
En primer lugar, debes registrar el campo meta. Añade el siguiente código al archivo principal del plugin:
function my_sidebar_plugin_register_meta() {
register_post_meta(
'post',
'meta_fields_book_title',
array(
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'sanitize_callback' => 'sanitize_text_field',
'label' => __( 'Book title', 'my-sidebar-plugin' ),
'auth_callback' => function() {
return current_user_can( 'edit_posts' );
}
)
);
}
add_action( 'init', 'my_sidebar_plugin_register_meta' );La función register_post_meta acepta tres argumentos:
- El tipo de publicación para el que se registrará la meta key. Si dejas la cadena vacía, la meta key se registrará en todos los tipos de publicación existentes.
- La meta key a registrar. Ten en cuenta que no estamos utilizando un guión bajo al principio de la meta key. Prefijar la meta key con un guión bajo ocultaría el campo personalizado, por lo que es posible que quieras utilizarlo en una meta box. Sin embargo, ocultar el campo personalizado impediría que el campo meta se utilizara a través de la API Block Bindings en el contenido de la entrada.
- Un array de argumentos. Ten en cuenta que debes establecer
show_in_restentrue. Esto expone el metacampo a la API Rest y nos permite vincular el metacampo a atributos de bloque. Para los demás atributos, consulta la referencia de la función.
Paso 2: Registrar el meta box
Para garantizar la compatibilidad con versiones anteriores de tu plugin, debes registrar un meta box personalizado para que los usuarios puedan gestionar tus campos personalizados, aunque utilicen el editor clásico. Añade el siguiente código al archivo PHP de tu plugin:
/**
* Register meta box
*
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*
*/
function my_sidebar_plugin_register_meta_box(){
add_meta_box(
'book_meta_box', // Unique ID
__( 'Book details' ), // Box title
'my_sidebar_plugin_meta_box_callback', // Content callback
array( 'post' ), // Post types
'advanced', // context
'default', // priority
array('__back_compat_meta_box' => true) // hide the meta box in Gutenberg
);
}
add_action( 'add_meta_boxes', 'my_sidebar_plugin_register_meta_box' );Ahora declara el callback que construye el formulario:
/**
* Build meta box form
*
* @link https://developer.wordpress.org/reference/functions/wp_nonce_field/
* @link https://developer.wordpress.org/reference/functions/get_post_meta/
*
*/
function my_sidebar_plugin_meta_box_callback( $post ){
wp_nonce_field( 'my_sidebar_plugin_save_meta_box_data', 'my_sidebar_plugin_meta_box_nonce' );
$title = get_post_meta( $post->ID, 'meta_fields_book_title', true );
?>
<div class="inside">
<p><strong><?php echo __( 'Book title', 'my-sidebar-plugin' ); ?></strong></p>
<p><input type="text" id="meta_fields_book_title" name="meta_fields_book_title" value="<?php echo esc_attr( $title ); ?>" /></p>
</div>
<?php
}A continuación, escribe la función para guardar tus metacampos en la base de datos:
/**
* Save metadata
*
* @link https://developer.wordpress.org/reference/functions/wp_verify_nonce/
* @link https://developer.wordpress.org/reference/functions/current_user_can/
* @link https://developer.wordpress.org/reference/functions/sanitize_text_field/
* @link https://developer.wordpress.org/reference/functions/update_post_meta/
*
*/
function my_sidebar_plugin_save_meta_box_data( $post_id ) {
if ( ! isset( $_POST['my_sidebar_plugin_meta_box_nonce'] ) )
return;
if ( ! wp_verify_nonce( $_POST['my_sidebar_plugin_meta_box_nonce'], 'my_sidebar_plugin_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;
$title = sanitize_text_field( $_POST['meta_fields_book_title'] );
update_post_meta( $post_id, 'meta_fields_book_title', $title );
}
add_action( 'save_post', 'my_sidebar_plugin_save_meta_box_data' );No profundizaremos en este código porque está fuera del alcance de este artículo, pero puedes encontrar toda la información que necesites siguiendo los enlaces de los encabezados de las funciones.
Por último, necesitamos poner en cola el archivo index.js de nuestro plugin:
function my_sidebar_plugin_register_script() {
wp_enqueue_script(
'my_sidebar_plugin_script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-plugins', 'wp-edit-post' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
}
add_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );Eso es todo para el archivo PHP. A continuación, tenemos que escribir el código JS.
index.js
Tu index.js se encuentra en la carpeta src, que es donde almacenas tus archivos JS durante la fase de desarrollo.
Abre tu index.js y añade las siguientes declaraciones import:
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/editor';
import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';Necesitas estos recursos para construir la barra lateral con los controles necesarios.
A continuación, tienes que construir el componente de la barra lateral:
const MyPluginSidebar = () => {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';
const updateBookTitleMetaValue = ( newValue ) => {
setMeta( { ...meta, meta_fields_book_title: newValue } );
};
if ( postType === 'post' ) {
return (
<PluginSidebar
name="my-sidebar-plugin"
icon="book"
title="My plugin sidebar"
>
<PanelBody title="Book details" initialOpen={ true }>
<PanelRow>
<TextControl
value={ bookTitle }
label={ __( "Book title" ) }
onChange={ updateBookTitleMetaValue }
__nextHasNoMarginBottom
/>
</PanelRow>
</PanelBody>
</PluginSidebar>
);
}
};
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );La función registerPlugin registra el plugin y genera el componente llamado MyPluginSidebar.
La función MyPluginSidebar declara algunas constantes y devuelve el código JSX del componente.
useSelectes un hook personalizado para recuperar accesorios de selectores registrados. Lo utilizamos para obtener el tipo de entrada actual. Consulta también esta entrada del blog de desarrolladores de WordPress.useEntityPropdevuelve un array de meta campos y una función setter para establecer nuevos valores meta. Consulta también la referencia online.updateBookTitleMetaValuees un controlador de eventos que guarda el valor del meta campobookTitle.
Hemos utilizado algunos componentes integrados para construir nuestra barra lateral:
PluginSidebarte permite añadir elementos a la barra de herramientas de las pantallas del editor de Entradas o de Sitios. (Consulta la referencia del componente.)PanelBodycrea un contenedor plegable que se puede abrir o cerrar. (Consulta la referencia del componente.)PanelRowes un contenedor genérico para filas dentro dePanelBody. (Consulta la referencia del componente.)TextControles un campo de una sola línea que puede utilizarse para introducir texto libre. (Consulta la referencia del componente.)
Ahora ejecuta el comando npm run build, activa el plugin y crea una nueva entrada. Debería aparecer un nuevo icono de libro en la barra lateral superior. Al hacer clic en ese icono, se mostrará la barra lateral de tu plugin.
¿Y si no necesitas una nueva barra lateral pero quieres mostrar tu campo personalizado en la barra lateral de la entrada incorporada? Sólo tienes que sustituir PluginSidebar por PluginDocumentSettingPanel. Este es tu nuevo archivo index.js:
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
const MyPluginSidebar = () => {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';
const updateBookTitleMetaValue = ( newValue ) => {
setMeta( { ...meta, meta_fields_book_title: newValue } );
};
if ( postType === 'post' ) {
return (
<PluginDocumentSettingPanel
name="my-sidebar-plugin"
title="Book details"
className="my-sidebar-plugin"
>
<PanelRow>
<TextControl
value={ bookTitle }
label={ __( "Book title" ) }
onChange={ updateBookTitleMetaValue }
__nextHasNoMarginBottom
/>
</PanelRow>
</PluginDocumentSettingPanel>
);
}
};
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );La siguiente imagen muestra el resultado.
Un caso de uso: la anulación de un patrón de bloque para automatizar tu flujo de trabajo
Ahora puedes añadir un valor para el campo personalizado, y estará disponible a través de la API Block Bindings para su uso con atributos de bloque. Por ejemplo, puedes añadir un bloque Párrafo a tu contenido y vincular el campo personalizado al atributo content del párrafo.
Eres libre de cambiar el valor de tu campo personalizado, y estos cambios se aplicarán automáticamente al contenido de tu párrafo.
Si te estás preguntando si hay algo más que puedas hacer con los campos personalizados y los Enlaces de Bloque, ¡la respuesta es sí! Los patrones de bloque y la API Block Bindings te permiten automatizar todo el proceso de creación de contenido.
Para tener una pista, crea un patrón con al menos un encabezado o un párrafo. En este ejemplo, creamos un patrón de bloques con un bloque Columnas, una Imagen, un Encabezamiento y un par de bloques Fila, con dos párrafos cada uno.
Cuando estés satisfecho con tu diseño, selecciona los elementos envolventes y crea un patrón sincronizado.
Añade un nombre y una categoría para el patrón de bloques, y asegúrate de sincronizarlo.
A continuación, si creaste el patrón en el editor de publicaciones, selecciónalo y haz clic en Editar original en la barra de herramientas del bloque. También puedes ir a la sección Patrones del editor de Sitios y encontrar el patrón en Mis Patrones o en la categoría de patrones que hayas establecido antes.
Abre el Editor de código y busca el bloque que quieras vincular a tu campo personalizado. En el delimitador del bloque, añade el siguiente código:
<!-- wp:heading {
"metadata":{
"bindings":{
"content":{
"source":"core/post-meta",
"args":{
"key":"meta_fields_book_title"
}
}
}
}
} -->
Guarda el patrón y crea un nuevo post. Añade el patrón a tu contenido y establece un valor para el campo personalizado. Deberías ver que ese valor se aplica automáticamente a tu patrón.
Ahora, puedes jugar con este plugin. Gracias a los campos personalizados y a la API Block Bindings, puedes añadir más campos y controles para rellenar automáticamente tus diseños.
Resumen
Desarrollar un bloque personalizado puede ser todo un reto. Pero, ¿necesitas construir un bloque cuando puedes hacer más con un patrón de bloque?
Con los avances en los patrones de bloques y la introducción de potentes funcionalidades para desarrolladores, como la API Block Bindings, ya no es necesario crear bloques personalizados para construir sitios web sofisticados y funcionales. Un simple plugin y un patrón de bloques pueden automatizar eficazmente una parte importante de tu flujo de trabajo.
Este tutorial ha demostrado cómo añadir funcionalidad al editor de entradas de WordPress mediante un plugin. Sin embargo, lo que hemos tratado en este post sólo rasca la superficie de lo que puedes conseguir con las sólidas funcionalidades que ahora ofrece WordPress
¿Has explorado ya estas funcionalidades y has añadido funcionalidad al editor de WordPress? Si es así, no dudes en compartir tus experiencias y puntos de vista en la sección de comentarios a continuación.
Deja una respuesta