La llegada de WordPress 6.3 trajo consigo una innovadora funcionalidad denominada Command Palette, diseñada para agilizar el acceso a las acciones más utilizadas dentro de la interfaz de administración del CMS. Esta herramienta permite a los usuarios navegar de manera eficiente por el editor, gestionar bloques, alternar preferencias y crear nuevos contenidos con solo unos clics.
Lo más interesante de esta nueva característica es que los desarrolladores pueden extender su funcionalidad mediante una API basada en JavaScript. Esto permite, por ejemplo, que un plugin de formularios agregue una entrada en el Command Palette para redirigir a los usuarios a la sección de resultados de envíos o que un plugin con numerosos shortcodes incluya una guía rápida de referencia.
A continuación, se explica cómo personalizar el Command Palette e integrarlo con un plugin propio en WordPress.
Fundamentos del Command Palette en WordPress
El Command Palette se activa mediante el atajo de teclado Cmd + K en macOS o Ctrl + K en Windows y Linux. También es posible iniciarlo haciendo clic en el campo de título del editor de entradas o del editor de sitios.
Entre los comandos predefinidos disponibles se encuentran opciones como:
- Editar plantilla
- Restaurar estilos a los valores predeterminados
- Alternar la barra lateral de configuración
- Cambiar al modo sin distracciones
- Abrir el editor de código
- Personalizar CSS
- Administrar patrones personalizados
Los desarrolladores pueden agregar sus propias funciones a esta lista mediante el uso de la API del Command Palette.
Requisitos para comenzar
Para añadir comandos personalizados, se necesita un entorno de desarrollo con WordPress instalado, ya sea de forma local o en un servidor remoto. Además, es necesario tener Node.js y npm configurados, ya que la API del Command Palette se basa en paquetes JavaScript de WordPress.
Creación de un plugin básico
En este ejemplo, se desarrollará un plugin llamado «Product Pages» que introduce un nuevo tipo de contenido denominado «Productos». Inicialmente, el plugin solo agregará este post type, pero se le añadirá una integración con el Command Palette para facilitar la creación de nuevos productos.
Instalación de dependencias
Para empezar, se debe crear un archivo package.json dentro del directorio del plugin ejecutando:
npm init
Se recomienda proporcionar un nombre y una descripción para la aplicación. Luego, en el archivo package.json, se añade un script de compilación:
"scripts": {
"build": "wp-scripts build --env mode=production"
},
A continuación, se instala el paquete principal de WordPress Scripts:
npm install @wordpress/scripts --save
Se crean las carpetas necesarias y un archivo JavaScript vacío:
mkdir src
touch src/index.js
npm run build
Luego, se instalan las dependencias necesarias para trabajar con la API del Command Palette:
npm install @wordpress/commands @wordpress/plugins @wordpress/icons --save
Implementación del comando personalizado
En el archivo src/index.js, se debe agregar el siguiente código:
import { useCommand } from '@wordpress/commands';
import { registerPlugin } from '@wordpress/plugins';
import { plus } from '@wordpress/icons';
const AddProductCommand = () => {
useCommand({
name: 'add-product',
label: 'Agregar nuevo producto',
icon: plus,
callback: ({ close }) => {
document.location.href = 'post-new.php?post_type=product';
close();
},
context: 'block-editor',
});
return null;
};
registerPlugin('products', { render: AddProductCommand });
export default AddProductCommand;
Aquí se está:
- Importando un icono desde la librería
@wordpress/icons. - Registrando el comando
Agregar nuevo productoen el Command Palette. - Definiendo una acción que redirige al usuario a la página de creación de productos.
Compilación y carga del script en WordPress
Se ejecuta la compilación del código:
npm run build
Por último, se debe encolar el script dentro del archivo principal PHP del plugin (products.php):
add_action( 'enqueue_block_editor_assets', 'enqueue_block_editor_assets' );
function enqueue_block_editor_assets() {
wp_enqueue_script(
'products',
plugins_url('build/index.js', __FILE__),
array(),
'1.0',
true
);
}
Verificación en el Command Palette
Tras activar el plugin en el panel de administración de WordPress, se debe abrir el Command Palette y escribir «Agregar nuevo producto». Si el comando aparece y al seleccionarlo se abre el editor de productos, significa que la integración ha sido exitosa.
Conclusión
El Command Palette API ofrece una forma flexible y potente de integrar funcionalidades personalizadas en WordPress. Gracias a su implementación basada en JavaScript, los desarrolladores pueden mejorar la experiencia del usuario y optimizar los flujos de trabajo dentro del CMS.
Referencia: Kinsta
