La paleta de comandos de WordPress: Ctrl+K para ir a todas partes (y cómo agregar tus comandos)

Si usas WordPress todos los días, pasas mucho tiempo navegando menús: Entradas → Todas, buscar la entrada, abrirla; Apariencia → Editor → Plantillas… La paleta de comandos es un buscador que te lleva directo a donde quieres ir.

Cómo se abre

• Windows y Linux: Ctrl + K
• Mac: Cmd + K

Se abre un cuadro de búsqueda en el centro de la pantalla. Escribe lo que buscas y presiona Enter. Funciona en el editor de bloques y en el editor del sitio, y en las versiones recientes de WordPress también en el resto del escritorio. Si en alguna pantalla no se abre, actualiza WordPress o prueba desde el editor.

Qué puedes hacer

• Ir a una pantalla: escribe «plugins», «usuarios», «ajustes generales», «medios».
• Abrir una entrada o página: escribe parte de su título y aparecerá en los resultados.
• Crear algo nuevo: «añadir nueva entrada», «añadir nueva página».
• Dentro del editor: «mostrar u ocultar la barra lateral», «modo sin distracciones», «vista de lista», «editor de código», «preferencias».
• En el editor del sitio: ir a una plantilla, una parte de plantilla (cabecera, pie) o a los estilos.

No tienes que escribir la palabra exacta. La paleta busca por coincidencias parciales: «ajus» ya muestra todos los ajustes.

Los atajos que más tiempo ahorran

Junto con la paleta, estos atajos del editor de bloques valen la pena:

• / al comenzar un párrafo: insertar cualquier bloque escribiendo su nombre («/imagen», «/tabla»).
• Ctrl + Shift + Alt + M (Cmd + Shift + Option + M en Mac): cambiar entre el editor visual y el de código.
• Shift + Alt + H (Ctrl + Option + H en Mac): ver la lista completa de atajos.

Para desarrolladores: agregar tus propios comandos

La paleta es extensible. Puedes registrar comandos que lleven a pantallas de tu plugin o ejecuten una acción. Este ejemplo agrega dos comandos: uno para ir a los pedidos de WooCommerce y otro para vaciar la caché de tu propio plugin.

Primero, un mu-plugin que carga el script con las dependencias correctas (wp-content/mu-plugins/cwp-comandos.php):

<?php
/**
 * Plugin Name: Comandos propios (Curso WordPress)
 */

add_action( 'admin_enqueue_scripts', function () {
	if ( ! current_user_can( 'manage_options' ) ) {
		return;
	}
	wp_enqueue_script(
		'cwp-comandos',
		content_url( 'mu-plugins/cwp-comandos/comandos.js' ),
		array( 'wp-commands', 'wp-data', 'wp-dom-ready' ),
		'1.0',
		true
	);
} );

Y el script, en wp-content/mu-plugins/cwp-comandos/comandos.js:

wp.domReady( function () {
	var registrar = wp.data.dispatch( wp.commands.store ).registerCommand;

	registrar( {
		name: 'cwp/ver-pedidos',
		label: 'Ver pedidos de la tienda',
		searchLabel: 'pedidos ventas woocommerce',
		callback: function ( opciones ) {
			opciones.close();
			document.location.href = 'admin.php?page=wc-orders';
		},
	} );

	registrar( {
		name: 'cwp/vaciar-cache',
		label: 'Vaciar la caché del sitio',
		callback: function ( opciones ) {
			opciones.close();
			wp.apiFetch( { path: '/cwp/v1/vaciar-cache', method: 'POST' } );
		},
	} );
} );

El segundo comando llama a un endpoint de la API REST (/cwp/v1/vaciar-cache) que tienes que crear tú en tu plugin, con su permission_callback que compruebe los permisos. Un comando solo es un botón: la seguridad está en el servidor. Si usas wp.apiFetch, agrega también wp-api-fetch a las dependencias del script.

Las rutas relativas como admin.php?page=wc-orders funcionan porque la paleta se abre siempre dentro de /wp-admin/. Si tu comando es para el editor del sitio, la ruta cambia: revisa la URL de la pantalla a la que quieres llevar.

Si tu plugin está hecho con React y @wordpress/scripts, el paquete @wordpress/commands ofrece el hook useCommand, que registra el comando mientras el componente está en pantalla y lo quita al salir.

¿Qué comando te gustaría tener en la paleta? Propónlo en el foro y lo armamos en comunidad.