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 es de extrañar que los estilos de un tema de WordPress solo afecten al front-end de su sitio web. El editor de ramilletes de back-end generalmente no se parece en nada al resultado de front-end. Estamos acostumbrados. Pero, ¿qué pasa si digo que es totalmente posible que el editor de WordPress casi refleje la apariencia del front-end?
Todo lo que necesita es una hoja de estilo personalizada.
Mente. Estropeado. ¿Correcto? Bueno, tal vez no sea tan increíble, pero puede ahorrarle algo de tiempo como mínimo. 🙂
WordPress nos da una pista de lo que es posible aquí. Encienda el tema Twenty Twenty predeterminado que está empaquetado con WordPress, encienda el editor y luce un estilo ligero.
Todo esto consta de dos cambios bastante básicos:
- Algunas líneas de PHP en su tema
functions.phparchivo que le dice al editor que desea cargar una hoja de estilo personalizada para los estilos del editor - Dicha hoja de estilo personalizada
En ese momento, ¡suficiente pre-gofre! Sigamos haciendo que el editor de WordPress se vea como la interfaz, ¿de acuerdo?
Paso 1: Abra el archivo functions.php
Está bien, estaba mintiendo, solo un poco más de tonterías. Si está utilizando un tema de WordPress que no desarrolló usted mismo, probablemente sea mejor que configure un tema infantil antes de realizar cambios en su tema principal. </pre-waffle>
Encienda su editor de texto favorito y abra el tema functions.php archivo que normalmente se encuentra en la raíz de la carpeta del tema. Dejemos caer las siguientes líneas al final del archivo:
// Gutenberg custom stylesheet
add_theme_support('editor-styles');
add_editor_style( 'editor-style.css' ); // make sure path reflects where the file is locatedLo que hace este pequeño fragmento de código es decirle a WordPress que agregue soporte para una hoja de estilo personalizada que se usará con Gutenberg, luego apunta hacia dónde esa hoja de estilo (que estamos llamando editor-style.css) se encuentra. WordPress tiene documentación sólida para add_theme_support función si quieres profundizar un poco más.
Paso 2: trucos CSS (¡¿ves lo que hice allí ?!)
Ahora estamos entrando directamente en nuestra timonera: ¡escribiendo CSS!
Hemos agregado editor-styles soporte a nuestro tema, por lo que lo siguiente que debe hacer es agregar la bondad CSS a la hoja de estilo que definimos en functions.php para 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. En cambio, les mostraré un ejemplo basado en el tema que uso en mi sitio web. Esto debería darle una idea de cómo construir el stylesheet para su sitio. También incluiré una plantilla al final, que debería ayudarlo a comenzar.
OK, creemos un nuevo archivo llamado editor-style.css y colóquelo en el directorio raíz del tema (o nuevamente, el tema hijo si está personalizando un tema de terceros).
Escribir CSS para el editor de bloques no es tan simple como usar elementos CSS estándar. Por ejemplo, si usáramos lo siguiente en nuestra hoja de estilo del editor, no aplicaría el tamaño del texto a <h2> elementos en la publicación.
h2 {
font-size: 1.75em;
}En lugar de elementos, nuestra hoja de estilo debe apuntar a bloques del Editor de bloques. De esta manera, sabemos que el formato debe ser lo más preciso posible. Eso significa <h2> los elementos deben tener un alcance .rich-text.block-editor-rich-text__editable clase para darle estilo a las cosas.
Basta echar un vistazo a DevTools para encontrar una clase a la que podamos aferrarnos.
h2.rich-text.block-editor-rich-text__editable {
font-size: 1.75em;
}Por casualidad hice un archivo CSS de línea de base que diseña elementos comunes del editor de bloques siguiendo este patrón. Siéntete libre de engancharlo en GitHub y cambiar los estilos para que complementen tu tema.
Podría seguir construyendo la hoja de estilo aquí, pero creo que la plantilla le da una idea de lo que necesita completar dentro de su 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 es probable que deba 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 las DevTools de su navegador para averiguar 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:
El editor de bloques luce una IU limpia y austera en su apariencia predeterminada. Está sacando Noto Serif de Google Fonts, pero todo lo demás es bastante básico.
Comparemos 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 por 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 son exactamente bordes cuadrados.
Lo amas o lo odias, creo que estarás de acuerdo en que esta es una gran desviación de la interfaz de usuario predeterminada del editor de 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 cosas:
¡Bien, mira eso! La interfaz de usuario del editor ahora se ve casi exactamente igual que la interfaz de mi sitio web. El ancho del contenido, las fuentes, los colores y varios elementos son los mismos que en la interfaz. ¡Incluso tengo el 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 se vea como su interfaz es una buena conveniencia. 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 mojo, así que prefiero no hacerlo.
¡Estos dos pasos rápidos también deberían poder hacer lo mismo por usted!