Hacer que el editor de bloques de WordPress se parezca al diseño del front-end

Soy un usuario de WordPress y, si eres como yo, siempre tienes dos pestañas abiertas cuando editas una publicación: una con el nuevo editor de bloques de pantalones elegantes, también conocido como Gutenberg, y otra con una vista previa de la publicación para que puedas Sepa que no se verá torcido en la parte delantera.

No sorprende que los estilos de un tema de WordPress solo afecten la interfaz de su sitio web. El editor de posy de back-end generalmente no se parece en nada al resultado de front-end. Estamos acostumbrados. Pero, ¿qué pasaría si dijera que es totalmente posible que el editor de WordPress casi refleje la apariencia del front-end?

Todo lo que necesitas es una hoja de estilo personalizada.

Mente. Estropeado. ¿Bien? Bueno, tal vez no sea tan alucinante, pero puede que te ahorre algo de tiempo al menos.

WordPress nos da una idea de lo que es posible aquí. Inicie el tema Twenty Twenty predeterminado que viene incluido con WordPress, inicie el editor y tendrá un estilo ligero.

Todo esto consta de dos cambios bastante básicos:

1. Algunas líneas de PHP en functions.phpel archivo de su tema que le indican al editor que desea cargar una hoja de estilo personalizada para los estilos del editor.
2. Dicha hoja de estilo personalizada.

Ahora mismo, ¡basta de gofres anteriores! Seguimos haciendo que el editor de WordPress parezca la interfaz, ¿de acuerdo?

Paso 1: abra el archivo funciones.php

OK, estaba mintiendo, solo un poco más de palabrería. Si está utilizando un tema de WordPress que no desarrolla usted mismo, probablemente sea mejor que configure un tema secundario antes de realizar cambios en su tema principal./pre-waffle

Inicie su editor de texto favorito y abra el functions.phparchivo del tema que generalmente se encuentra en la raíz de la carpeta del tema. Colocamos las siguientes líneas al final del archivo:

// Gutenberg custom stylesheetadd_theme_support('editor-styles');add_editor_style( 'editor-style.css' ); // make sure path reflects where the file is located

editor-style.cssLo que hace este pequeño fragmento de código es decirle a WordPress que agregue soporte para una hoja de estilo personalizada para usar con Gutenberg, luego señala dónde se encuentra esa hoja de estilo (a la que llamamos). WordPress tiene documentación sólida para la add_theme_supportfunción si desea profundizar un poco más en ella.

Paso 2: trucos de CSS (¡¿ves lo que hice allí?!)

Ahora estamos entrando directamente en nuestra timonera: ¡escribir CSS!

Agregamos editor-stylessoporte a nuestro tema, por lo que lo siguiente que debemos hacer es agregar las bondades de CSS a la hoja de estilos que definimos functions.phppara que nuestros estilos se carguen correctamente en Gutenberg.

Hay miles de temas de WordPress, por lo que no podría escribir una hoja de estilo que haga que el editor sea exactamente igual a cada uno de ellos. En lugar de eso, les mostraré un ejemplo basado en el tema que uso en mi sitio web. Esto debería darle una idea de cómo crear el sitio stylesheetpara su sitio. También incluiré una plantilla al final, que debería ayudarte a empezar.

Bien, creamos un nuevo archivo llamado editor-style.cssy colóquelo en el directorio raíz del tema (o nuevamente, el tema secundario si está personalizando un tema de terceros).

Escribir CSS para el editor de bloques no es tan sencillo como utilizar elementos CSS estándar. Por ejemplo, si usáramos lo siguiente en la hoja de estilo de nuestro editor, no aplicaría el tamaño del texto a h2los elementos de la publicación.

h2 {  font-size: 1.75em;}

En lugar de elementos, nuestra hoja de estilo debe centrarse en los bloques del Editor de bloques. De esta manera, sabemos que el formato debe ser lo más preciso posible. Eso significa h2que los elementos deben tener como alcance la .rich-text.block-editor-rich-text__editableclase para darle estilo a las cosas.

h2.rich-text.block-editor-rich-text__editable {  font-size: 1.75em;}

Dio la casualidad de que creé un archivo CSS de referencia que diseña elementos comunes del editor de bloques siguiendo este patrón. Siéntete libre de adquirirlo en GitHub e intercambiar los estilos para que complementen tu tema.

Podría seguir construyendo la hoja de estilo aquí, pero creo que la plantilla te da una idea de lo que necesitas completar dentro de tu propia hoja de estilo. Un buen punto de partida es revisar la hoja de estilo de su interfaz y copiar los elementos desde allí, pero probablemente necesitará cambiar algunas de las clases de elementos para que se apliquen a la ventana del Editor de bloques.

En caso de duda, juegue con los elementos de DevTools de su navegador para determinar qué clases se aplican a qué elementos. Sin embargo, la plantilla vinculada anteriormente debería capturar la mayoría de los elementos.

Los resultados

En primer lugar, echemos un vistazo a cómo se ve el editor de WordPress sin una hoja de estilo personalizada:

Comparamos eso con la interfaz de mi sitio de prueba:

Las cosas son bastante diferentes, ¿verdad? Aquí todavía tenemos un diseño simple, pero estoy usando degradados en todas partes, ¡al máximo! También hay una fuente personalizada, un estilo de botón y una cita en bloque. Incluso los contenedores no tienen bordes exactamente cuadrados.

Lo ames o lo odies, creo que estarás de acuerdo en que esta es una gran desviación de la interfaz de usuario predeterminada del editor Gutenberg. ¿Ves por qué tengo que tener una pestaña separada abierta para obtener una vista previa de mis publicaciones?

Ahora carguemos nuestros estilos personalizados y veamos las cosas:

¡Bueno, mira eso! La interfaz de usuario del editor ahora se ve prácticamente igual que la interfaz de mi sitio web. El ancho del contenido, las fuentes, los colores y varios elementos son todos iguales que los de la interfaz. ¡Incluso tengo un fondo elegante contra el título de la publicación!

Ipso facto: no más vistas previas en otra pestaña. Genial, ¿eh?

---

Hacer que el editor de WordPress parezca su interfaz es una gran comodidad. Cuando estoy editando una publicación, pasar de una pestaña a otra para ver cómo se ven las publicaciones en la parte frontal arruina mi encanto, así que prefiero no hacerlo.

¡Estos pocos pasos rápidos deberían poder hacer lo mismo por ti también!