Cómo tu plugin puede personalizar la Paleta de Comandos de WordPress

El lanzamiento de WordPress 6.3 introdujo la Paleta de Comandos, una función que ofrece acceso rápido a acciones utilizadas frecuentemente por quienes editan contenidos o temas dentro de la interfaz de administración del CMS.

La Paleta de Comandos, similar a un menú, permite a los usuarios filtrar las tareas disponibles mediante una sencilla interfaz de búsqueda y seleccionar opciones para navegar por la interfaz de usuario del editor, alternar preferencias, transformar estilos, manipular bloques e incluso empezar a crear nuevas entradas y páginas.

También está disponible una API habilitada para JavaScript que permite a los desarrolladores añadir funcionalidad a la Paleta de Comandos. Por ejemplo, el creador de un plugin de WordPress que genere formularios web podría añadir una entrada en la Paleta de comandos que dirija a los usuarios a una página que muestre los resultados del envío de formularios.

El desarrollador de un plugin que utiliza muchos shortcodes podría enlazar una entrada de la Paleta de Comandos a una «hoja de referencia» emergente para recordar a los usuarios cómo utilizar esos códigos.

Las posibilidades son infinitas, y te ofrecemos una muestra de cómo funciona la API para inspirarte a utilizar la Paleta de Comandos en tu próximo proyecto para crear un plugin para WordPress.

Conceptos básicos de la Paleta de Comandos de WordPress

Puedes iniciar la Paleta de Comandos utilizando el atajo de teclado Cmd + k (Mac) o Ctrl + k (Windows y Linux) o haciendo clic en el campo Título de la parte superior del Editor de entradas o del Editor de sitios:

La parte superior de la Paleta incluye un campo de búsqueda que filtra las entradas a medida que escribes. Puedes seleccionar entradas utilizando el ratón o sólo el teclado.

Entre los comandos disponibles en la Paleta se incluyen los siguientes:

• Editar Plantilla (al editar una página)
• Volver a la página (después de editar su plantilla)
• Restablecer plantilla
• Restablecer parte de la plantilla
• Restablecer estilos por defecto
• Borrar plantilla
• Borrar parte de la plantilla
• Activar la barra lateral de configuración
• Activar el inspector de bloques
• Activar el modo foco
• Activar el modo sin distracciones
• Activar la barra de herramientas superior
• Abrir el editor de código
• Salir del editor de código
• Conmutar la vista de lista
• Activar el modo de pantalla completa
• Preferencias del editor
• Atajos de teclado
• Mostrar/ocultar las migas de pan del bloque
• Personalizar CSS
• Revisiones de estilos
• Abrir estilos
• Restablecer estilos
• Ver sitio
• Ver plantillas
• Ver partes de plantillas
• Abrir menús de navegación
• Renombrar patrón
• Duplicar patrón
• Gestionar todos los patrones personalizados

Y, por supuesto, los desarrolladores pueden añadir los suyos propios para mejorar sus aplicaciones de WordPress. ¡Entremos de lleno en el proceso!

Qué necesitarás para empezar

La API de la Paleta de Comandos está soportada por paquetes JavaScript que añadirás a tus proyectos utilizando npm, el Gestor de Paquetes de Node. Necesitarás una instalación de WordPress (local o remota) a la que puedas acceder a través del terminal para ejecutar comandos en la línea de comandos.

Para ponernos en marcha, hemos creado un plugin de WordPress que albergará el código que modifica la Paleta de Comandos. El plugin hace poco más que crear un tipo de entrada personalizado que llamamos Productos. (Todo lo que necesitas saber para llegar tan lejos con un plugin rudimentario está disponible en nuestra guía para crear tipos de entrada personalizados).

Cuando nuestro plugin Páginas de Producto está activado, obtenemos una entrada en el menú del Panel de control para crear y navegar por las entradas de Producto:

Nuestro plugin no dispone de ninguna ayuda exclusiva de la Paleta de Comandos de WordPress. Por ejemplo, la funcionalidad por defecto de la Paleta de Comandos proporciona atajos para añadir nuevas entradas y páginas de WordPress:

Sin embargo, la Paleta de Comandos ignora la creación de nuestras páginas de Producto. A continuación añadimos esa funcionalidad.

Añadir un comando personalizado a la Paleta de Comandos

En este momento, nuestro plugin de Páginas de productos consiste en un único archivo PHP al que hemos llamado products.php  y que hemos colocado en wp-content/plugins/products. Aparte de habilitar el tipo de entrada Productos, todavía no hace nada. Volveremos a este archivo cuando hayamos configurado la API basada en JavaScript para la Paleta de Comandos.

Instalación de las dependencias de la API

Empezaremos creando un archivo genérico package.json en el directorio products desplazándonos a ese directorio en el terminal y ejecutando el comando:

npm init

No es fundamental cómo respondas a las preguntas de init, pero deberás proporcionar un nombre y una descripción para tu aplicación. (Nosotros hemos utilizado products como nombre y Product Pages como descripción).

Ahora que tienes un esqueleto del archivo package.json, ábrelo en tu editor de código favorito y añade las siguientes líneas en algún lugar del cuerpo, por ejemplo después de la línea description:

"scripts": {
        "build": "wp-scripts build --env mode=production"
},

Todavía en el terminal, podemos añadir la dependencia para el paquete WordPress Scripts – @wordpress/scripts -:

npm install @wordpress/scrips --save

Eso añadirá las siguientes líneas al archivo package.json de nuestro plugin:

"dependencies": {
    "@wordpress/scripts": "^30.5.1"
}

Ahora, podemos ejecutar npm run build, pero el proceso espera un archivo index.js (aunque esté vacío) en el directorio src de nuestro plugin. Los crearemos y ejecutaremos la construcción utilizando los siguientes comandos en el terminal:

mkdir src
touch src/index.js
npm run build

Esto creará un directorio build para nuestro JavaScript de producción (index.js). Al igual que el de src, ese archivo estará vacío en este momento. Además, en el directorio build, deberías encontrar el archivo index.asset.php.

Si parece que todo se ha construido correctamente, vamos a añadir las dependencias restantes ejecutando estos comandos en el terminal dentro del directorio root del plugin:

npm install @wordpress/commands @wordpress/plugins @wordpress/icons --save

Ahora, echa un vistazo al archivo package.json, y el bloque de dependencias debería tener este aspecto:

"dependencies": {
    "@wordpress/commands": "^1.12.0",
    "@wordpress/icons": "^10.12.0",
    "@wordpress/plugins": "^7.12.0",
    "@wordpress/scripts": "^30.5.1"
}

El nuevo paquete de Comandos de WordPress interactúa con la Paleta de Comandos, el paquete de Plugins se ocupa de los plugins de WordPress y el paquete de Iconos permite seleccionar y mostrar miembros de una biblioteca de imágenes predefinida.

Añadir un hook de la Paleta de Comandos y poner en cola nuestro script

Ahora que ya tenemos nuestros recursos, tenemos que añadir código a nuestro archivo vacío src/index.js que hará hook en la Paleta de Comandos. Abre el archivo en tu editor y añade este código:

import { useCommand } from '@wordpress/commands';
import { registerPlugin } from '@wordpress/plugins';
import { plus } from '@wordpress/icons';

const AddProductCommand = () => {
    useCommand( {
        name: 'add-product',
        label: 'Add new product',
        icon: plus,
        callback: ( { close } ) => {
            document.location.href = 'post-new.php?post_type=kinsta_product';
            close();
         },
         context: 'block-editor',
     } );
    return null;
}
registerPlugin( 'products', { render: AddProductCommand } );
export default AddProductCommand;

Algunas notas sobre el código anterior:

• Se importa un único icono (el símbolo más) del paquete Iconos.
• useComand() es el hook que registra el comando.
• La etiqueta Añadir nuevo producto es el texto que se convertirá en una entrada de la Paleta de Comandos.
• El callback (lo que ocurre cuando un usuario hace clic en Añadir nuevo producto) simplemente abre el archivo PHP de nueva entrada de WordPress con una cadena de consulta que especifica una entrada de Producto. (Hasta ahora, lo único que podía hacer nuestro plugin).

Una vez guardado esto, ha llegado el momento de la construcción final:

npm run build

Tras la construcción, build/index.js incluirá nuestro JavaScript de producción. El paso final es poner en cola el script en WordPress. Para ello, añadiremos el siguiente código al final de nuestro archivo products.php (el archivo PHP básico que establece el plugin y define el tipo de entrada Producto):

// Enqueue assets.
add_action( 'enqueue_block_editor_assets', 'enqueue_block_editor_assets' );

/**
 * Enqueue assets.
 *
 * @return void
 */

function enqueue_block_editor_assets() {
    wp_enqueue_script(
    'products',
    plugins_url( 'build/index.js', __FILE__ ),
    array(),
    '1.0',
    true
  );
}

Una vez hecho esto, volveremos al editor de WordPress y activaremos la Paleta de Comandos. Deberíamos ver Añadir nuevo producto en la lista tras escribir el texto de búsqueda adecuado:

Si seleccionamos Añadir nuevo producto en la Paleta, WordPress abrirá el Editor de entradas en la ruta de acceso reservada para nuestro nuevo tipo de contenido Producto.

Resumen

La API de la Paleta de Comandos abre una forma flexible de integrar tu aplicación con una de las funcionalidades más interesantes del WordPress moderno. Nos interesaría saber si has aprovechado la API y qué has conseguido.

Los desarrolladores como tú pueden contar con Kinsta para que les proporcione soluciones potentes de Alojamiento Administrado para WordPress que soporten proyectos de alto rendimiento y escalables.

Prueba Kinsta hoy mismo para ver cómo podemos ayudarte a construir sitios WordPress de primer nivel.

Steve Bonisteel Kinsta

Steve Bonisteel es un Editor Técnico de Kinsta que comenzó su carrera de redactor como periodista de prensa escrita, persiguiendo ambulancias y camiones de bomberos. Lleva tratando temas relacionados con la tecnología de Internet desde finales de la década de 1990.