Cuando construyas un tema personalizado o trabajes con un tema hijo, es posible que necesites eliminar u ocultar ciertas funcionalidades de estilo, ya sea para un único bloque del núcleo o para una variación completa del estilo del tema.
Hacerlo no es sólo una cuestión de preferencia. A menudo aporta ventajas prácticas, como un mejor rendimiento, un diseño más coherente y una interfaz de usuario más sencilla.
Los enfoques adoptados para lograr estos objetivos varían y probablemente dependan de tus necesidades y tus habilidades. Para los ejemplos de este artículo, trabajamos con un tema hijo de Twenty Twenty-Five (TT5), un moderno tema de bloques de WordPress.
La anulación del registro depende de cómo se haya registrado.
Para nuestro propósito, cuando nos referimos a dar de baja una variación de estilo de bloque o tema, distinguimos entre eliminación completa y parcial, y si la variación se elimina por completo o simplemente se oculta de la interfaz. Las distinciones son importantes.
Para comprender cómo eliminar el registro de un bloque, primero hay que saber cómo se registró. Por ejemplo, los bloques del núcleo registrados con JavaScript se eliminan mejor con ese mismo lenguaje. Por el contrario, las variaciones de estilo de los temas se registran con PHP, por lo que puede ser necesario un enfoque diferente.
La eliminación del registro de bloques personalizados queda fuera del alcance de este artículo, y el enfoque que se adopte dependerá de cómo se hayan registrado originalmente dichos bloques.
¿Qué es una variación de estilo?
WordPress distingue entre estilos de bloque y variaciones de estilo de tema. Los estilos de bloque son alternativas visuales para un bloque específico, como los estilos «relleno» o «contorno» de un bloque de botón. Las variaciones de estilo de bloque se registran en el núcleo, theme.json, block.json (o en un plugin).
Las variaciones de estilo de tema, por otra parte, son alternativas visuales completas que incluyen colores, tipografía y diseños definidos en un único archivo theme.json. Permiten a los usuarios cambiar entre diferentes apariencias (skins) para un sitio sin cambiar el tema. TT5 viene con ocho variaciones de estilo además del estilo por defecto.
Da el primer paso: pon tus scripts en cola.
Como estamos trabajando con un tema hijo, debes asegurarte de poner en cola tus scripts correctamente.
Esta configuración te permite empezar, incluyendo la puesta en cola de nuestro archivo personalizado unregister-blocks.js.
// Enqueue Parent and Child Styles
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
['parent-style'],
wp_get_theme()->get('Version')
);
});
// Enqueue styles in the WordPress admin
add_action('admin_enqueue_scripts', function () {
wp_enqueue_style(
'child-admin-style',
get_stylesheet_uri(),
[],
wp_get_theme()->get('Version')
);
});
// Enqueue JavaScript for block editor
add_action('enqueue_block_editor_assets', function () {
wp_enqueue_script(
'unregister-core-blocks',
get_stylesheet_directory_uri() . '/js/unregister-blocks.js',
['wp-blocks', 'wp-dom-ready', 'wp-edit-post'],
null,
true
);
});Como puedes ver, tenemos un archivo JavaScript en js/unregister-blocks.js, que incluye todos nuestros scripts para este artículo.
No utilices get_template_directory_uri() para el archivo JavaScript, ya que éste apunta al tema padre.
La sincronización lo es todo
Saber cuándo se ejecuta un hook es fundamental cuando se trabaja con PHP en WordPress. Deberías estar familiarizado con la secuencia de carga básica, que comienza en wp-settings.php:
- Constantes
- Globales
- Componentes del núcleo
- Carga de plugins
- Carga del tema
Determinar el momento adecuado en el que debe ejecutarse una función personalizada es una de las partes más complicadas y frustrantes del desarrollo de WordPress.
Anular el registro de un estilo de bloque del núcleo
Consideremos una situación en la que deseas eliminar el estilo de un bloque del núcleo. En este caso, queremos eliminar el estilo de contorno del bloque del botón.
Como los estilos de relleno y contorno del botón están registrados en el archivo theme.json de TT5, utilizaremos JavaScript para gestionar el proceso.
wp.domReady(() => {
if (wp.blocks && wp.blocks.unregisterBlockStyle) {
wp.blocks.unregisterBlockStyle('core/button', 'outline');
}
});El resultado es la eliminación del estilo de contorno en la barra de herramientas y en la barra lateral.
Anular el registro de un bloque del núcleo
Supongamos que deseas eliminar todos los estilos de bloque para un bloque. Un enfoque más racional es anular el registro del bloque (o bloques). Esto agiliza el Insertador al eliminar el bloque o bloques que no quieres que utilicen los usuarios y mejora el rendimiento.
Aquí se elimina el bloque Cita.
wp.domReady(() => {
wp.blocks.unregisterBlockType('core/quote');
});¿Qué ocurre si el script se ejecuta cuando ya se ha utilizado el bloque Cita? WordPress muestra el mensaje «Este bloque ya no está disponible» en el Editor, pero el contenido sigue mostrándose en el front end. Los usuarios pueden editar manualmente o convertir la vista HTML sin formato a la que recurre el bloque.
Puedes dejarlo como está o convertirlo a HTML para conservar el contenido y el estilo.
¿Qué ocurre al eliminar más de un bloque? En este ejemplo, eliminamos los bloques Cita y Encabezado ejecutando un bucle foreach para proporcionar una forma muy eficiente de hacerlo.
wp.domReady(() => {
const blocksToRemove = [
'core/quote',
'core/heading',
];
blocksToRemove.forEach((blockName) => {
if (wp.blocks.getBlockType(blockName)) {
wp.blocks.unregisterBlockType(blockName);
}
});
});Este script facilita la eliminación de otros bloques si es necesario.
Anular el registro de una variación de estilo de un tema
Lo bueno de las variaciones de estilo en los temas de bloques es que no es necesario registrarlas, como podrías haber hecho en el pasado con otras extensiones de WordPress.
En su lugar, el Core las reconoce automáticamente simplemente colocando un archivo theme.json con el formato adecuado en el directorio raíz del tema hijo o en /styles.
Es fácil suponer que necesitas una función para anular el registro de las variaciones de estilo, pero los temas de bloques funcionan de forma diferente.
Al igual que con los estilos de bloque, no existe una interfaz de usuario predeterminada para eliminar las variaciones de estilo no deseadas.
Empecemos con los métodos más sencillos y sigamos a partir de ahí. Lo que hace que las variaciones de estilo sean tan fáciles de «registrar» o añadir a un tema de bloques es exactamente lo que hace que sea muy difícil «desregistrarlas». Por lo tanto, tenemos varios enfoques.
Eliminar una variación del estilo del tema
Hay algunas formas de eliminar la variación de estilo Evening en un tema de bloque como TT5.
Si no estás utilizando un tema hijo, la opción más directa es eliminar el archivo .json correspondiente del tema padre. Por ejemplo, eliminar 01-evening.json del directorio /styles elimina por completo la variación Evening.
Sin embargo, esto no es recomendable, ya que es probable que el archivo vuelva a aparecer tras la próxima actualización del tema.
Un método mejor y más seguro es utilizar un tema hijo y anular la variación de estilo. Puedes hacerlo creando un archivo vacío en la misma ruta con el mismo nombre de archivo. Para anular 01-evening.json, añade un archivo vacío llamado 01-evening.json dentro del directorio /styles de tu tema hijo.
Este método no «anula» realmente la variación; sólo la neutraliza. WordPress sigue reconociendo el archivo, pero como no contiene ninguna configuración, la variación se vuelve invisible en la interfaz de usuario y no es funcional. Esta anulación sólo funciona porque los temas hijo se cargan después que los temas padre, por lo que merece la pena confirmar que tu tema hijo está correctamente configurado.
Ocultar una variación con CSS
Otra solución alternativa es ocultar la variación de estilo de la interfaz de usuario mediante CSS. Esto no la elimina de la memoria ni de la API REST, y tampoco reducirá la sobrecarga del front end, pero impedirá que los usuarios la seleccionen en el Editor de Sitios.
Aquí tienes un ejemplo para ocultar la variación Evening:
/* Hide specific global style variations in the Site Editor */
.edit-site-global-styles-variations_item[data-slug="morning"],
.edit-site-global-styles-variations_item[data-name="evening"],
.edit-site-global-styles-variations_item[title="Evening"],
.edit-site-global-styles-variations_item[aria-label*="Evening"] {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}Esto funciona en el panel Editor > Estilos > Examinar Estilos. Si un usuario activó previamente la variación Evening, seguirá aplicándose, pero no podrá volver a seleccionarla o cambiar a ella.
Ocultar una variación con JavaScript
También puedes utilizar JavaScript para ocultar la variación, inyectada a través de PHP utilizando wp_add_inline_script. Se trata de un pequeño truco, ya que las variaciones de estilo se registran en PHP, pero a veces es la única forma práctica de manipular la interfaz de usuario de forma fiable.
Aquí tienes un ejemplo práctico:
// Inject JS to hide specific style variations in the Site Editor UI
add_action('enqueue_block_editor_assets', function () {
wp_add_inline_script(
'unregister-core-blocks',
<< {
const interval = setInterval(() => {
document.querySelectorAll(
'[aria-label*="Noon"], [title*="Evening"], [data-name="noon"], [data-slug="evening"]'
).forEach(el => {
el.style.display = 'none';
});
}, 500);
// Stop the interval after 5 seconds
setTimeout(() => clearInterval(interval), 5000);
});
JS
);
});Este script espera a que se cargue el DOM, luego busca repetidamente la variación y la oculta durante unos segundos. Es frágil (porque depende del tiempo y de los nombres de las clases), pero funciona cuando necesitas suprimir variaciones concretas sin tocar el sistema de archivos.
Resumen
Mantener tu sitio limpio y libre de elementos no utilizados mejora la experiencia del usuario y, en muchos casos, el rendimiento del sitio.
Los ejemplos que hemos dado aquí proporcionan enfoques sólidos para dar de baja variaciones de estilo. Esperamos que también proporcionen información sobre por qué la baja puede resultar desconcertante.
¿Buscas un alojamiento rápido y fiable para WordPress mientras creas y pruebas temas personalizados? Kinsta ofrece funcionalidades fáciles de usar para desarrolladores, entornos staging e infraestructura de rendimiento optimizado para respaldar tu flujo de trabajo desde el desarrollo local hasta la producción.
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
