Controle el diseño de bloques a través del complemento EditorPlus WordPress

La semana pasada, mientras hacía las ediciones finales de una revisión de su proyecto Gutenberg Forms, Munir Kamal se preparaba para el lanzamiento de otro tipo de complemento de WordPress para el editor de bloques. Este se llamaba EditorPlus, y crearía un sistema de diseño de bloques. Kamal y su equipo silenciosamente dieron los toques finales a la versión 1.0 y lanzaron el complemento en el repositorio de complementos de WordPress unos días después.

A diferencia de muchos otros complementos que crean bloques personalizados para lograr resultados de diseño específicos, EditorPlus brinda a los usuarios la flexibilidad de personalizar sus páginas con lo que tienen a mano. Agrega una gran cantidad de opciones de diseño a cada uno de los bloques existentes de WordPress. En la parte delantera, deja una huella ligera al generar solo el CSS necesario para esa página sobre la marcha.

Quizás lo mejor de este complemento en este momento es que sienta las bases para muchas características relacionadas con el diseño que probablemente encontrarán un hogar permanente en Gutenberg y eventualmente en el núcleo de WordPress. El equipo de Gutenberg puede tomar prestadas ideas, repetirlas y mejorarlas. Ya hemos visto la tierra de control de relleno experimental en Gutenberg 8.3. Tendría sentido que el equipo de desarrollo siga adelante con controles de diseño adicionales en el futuro. Lo bueno de que estos controles se implementen primero en complementos de terceros es que el equipo puede ver cómo reaccionan los usuarios ante ellos y tener una idea de si trabajarían directamente en Gutenberg antes de comprometerse con algo.

EditorPlus no tiene escasez de golosinas para aquellos a quienes les gusta tener mucha libertad de diseño sin tocar el código. Esencialmente, el complemento es un editor de CSS sin necesidad de saber CSS. Proporciona a los usuarios finales opciones para las funciones de CSS más necesarias a través de opciones de bloque. Es un patio de recreo para aquellos a quienes les gusta jugar con el diseño y lo suficientemente potente como para crear diseños únicos sin inflar el sitio en la interfaz.

Cómo funciona EditorPlus

Después de activar el complemento EditorPlus, los usuarios finales pueden comenzar a usar sus opciones de inmediato dirigiéndose al editor de publicaciones o páginas. Después de insertar un bloque, el complemento hace que las siguientes ocho pestañas estén disponibles en el panel de opciones de bloque (cada una está precedida por un símbolo + ):

• Frontera
• Sombra de la caja
• Dimensionamiento
• Fondo
• Margen
• Relleno
• Radio del borde
• Extras

Estas pestañas aparecerán solo para los bloques principales de WordPress y no para los bloques de complementos de terceros en este momento. Además de la pestaña Extras, cada pestaña corresponde a sus contrapartes CSS. La pestaña Extras proporciona una opción de "Visualización" más avanzada, que permite a los usuarios cambiar el valor de display del elemento de ajuste de bloque en CSS. Es mejor dejar esta opción para los usuarios más avanzados. También proporciona una opción de transición que funcionaría bien con los estilos de desplazamiento.

Cada una de las pestañas de opciones de bloque también tiene misteriosos botones "R" y "H". El botón "R" permite a los usuarios habilitar opciones de respuesta, lo que significa que pueden cambiar los estilos de bloque según las pantallas de escritorio, tableta y móvil. El botón "H" permite a los usuarios cambiar el diseño según el estado de desplazamiento del mouse.

El complemento incluye muchas opciones en un poco de espacio. Todas las nuevas pestañas de diseño pueden parecer un poco abrumadoras al principio. Sin embargo, con un poco de uso, es fácil ganar algo de memoria muscular y crear rápidamente diseños personalizados.

Cada una de las opciones del complemento es bastante sencilla. Y, cuando no lo son, obtiene el beneficio de la retroalimentación instantánea a través del editor de bloques.

Hay algunas áreas que podrían resultar problemáticas para algunos usuarios, dependiendo de cómo su tema diseñe ciertos bloques. Por ejemplo, es posible que la configuración de ancho en la pestaña Tamaño no siempre funcione. Algunos temas agregarán un ancho máximo a los bloques, lo que limitará el ancho general sin importar el tamaño. Es posible anular esto a través del complemento, pero Kamal ha optado por no hacerlo en la versión 1.0.

Cuidado con los márgenes. Dependiendo del diseño del tema, puede usar márgenes izquierdo y derecho para colocar el contenido. Incluso cuando se configura solo un margen superior o inferior, el complemento generará automáticamente 0 para los márgenes izquierdo y derecho. Esto podría romper el diseño del contenido de algunos temas.

Un problema que encontré con el complemento fue que los estilos de mi tema activo anulaban los estilos del complemento en general. Por ejemplo, el tema predeterminado Twenty Twenty apunta p.has-background en su CSS para agregar relleno personalizado. Por lo tanto, anula el CSS del complemento EditorPlus con mayor especificidad. Se esperaba este problema, y ​​el desarrollador del complemento agregó una solución en forma de una casilla de verificación "importante" para cada opción de diseño. Si un usuario marca esta casilla, agrega !important a la regla de estilo en la salida, lo que le permitirá anular los estilos de tema. No es una solución 100% infalible. Su kilometraje puede variar, según el tema, pero debería funcionar para la mayoría de los casos de uso.

No me gusta la idea de una casilla de verificación importante en la interfaz de usuario. No es algo de lo que un usuario deba preocuparse. Sin embargo, es la realidad de un mundo donde los temas y complementos no tienen una forma real de comunicar qué reglas de diseño son más importantes que otras. A pesar de no querer esto en la interfaz de usuario, fue una decisión inteligente incluirlo. De lo contrario, demasiadas reglas de estilo de temas habrían sobrescrito el CSS del complemento.

Pensamientos finales

Para un lanzamiento de la versión 1.0, EditorPlus ha tenido un comienzo sólido. En mis pruebas, encontré algunos defectos. Cualquier problema para el usuario promedio probablemente vendrá en forma de conflictos de temas, y esos conflictos probablemente se deban a temas que usan alta especificidad o !important en su CSS.

Kamal deja en claro en la página web del complemento que hay más por venir de este complemento. No estoy seguro de qué características tiene en mente, pero espero verlas. Me gustaría ver una opción de sombra de texto para bloques relacionados con texto, como Encabezado y Párrafo. También sería bueno ver algunas opciones de diseño para las imágenes dentro del bloque Galería en lugar de solo el elemento envolvente.

Si debe usar EditorPlus dependerá de si necesita controles de diseño adicionales. EditorPlus está dirigido a personas que necesitan algo más parecido a un generador de páginas ligero pero que quieren apegarse a WordPress nativo. Este complemento es un buen escaparate de lo que es posible y es un buen indicador de las posibles opciones de diseño que algún día pueden aterrizar en WordPress.