Ya hemos hablado sobre que es Gutenberg (el editor nativo de WordPress, para este artículo será Gutenberg y punto 😁), de como usar Gutenberg en WordPress y como funciona.
En este caso vamos a profundizar más en este editor y como sacarle todo el partido posible para que puedas crear tu página web sin necesidad de ningún maquetador, que como puedes ver en esta comparativa de velocidad de carga, perjudican bastante este punto.
También te daré una serie de razones por las que no necesitas ningún maquetador web para crear una página profesional y atractiva para tu negocio.
Veremos como diseñar una página web con Gutenberg, los bloques y sus ajustes y una serie de trucos que usamos en nuestro día a día y hacen mucho más fácil el trabajo con esta herramienta.
Después de ver todas estas características comprobarás como Gutenberg es #noCode. También te hablaré de algunas librerías extras que te ayudarán a crear webs mucho más elegantes y el porque es mejor usar estas librerías que un maquetador.
Vamos al lío!!
¿Porqué usar Gutenberg en WordPress y no otro maquetador web?
Para empezar ya pongo a Gutenberg contra el resto de maquetadores web, así en general, todos empaquetados en el mismo saco. Porque todos los demás tienen una contra muy grande frente a Gutenberg, son un sustituto a este.
Y está bien la competencia y tener grandes apuestas como Elementor o Divi para motivar más aún el desarrollo de Gutenberg.
Incluso habrá quien se siente más cómodo trabajando con alguno de ellos (que con este artículo no pretendemos criminalizar a nadie 😉).
Pero yo os voy a contar una serie de cosas de porque usar Gutenberg y no cualquiera de los otros.
No me voy a meter con el tema de la velocidad de carga y la optimización que ya dejamos claro que en este punto Gutenberg gana por goleada 😉.
Gutenberg viene de «serie» con WordPress
En primer lugar, y lo más obvio, Gutenberg, al ser el editor nativo de WordPress, viene ya integrado en la instalación por defecto. No hay que instalar nada a mayores.
Como consecuencia de ello es gratuito, al igual que todos los temas y plugins que hay en el repositorio de WordPress.
Tienen licencia GPL, por lo que es Software libre y todo lo que se haga para WordPress tiene que llevar esa licencia.
El código que se genera también es importante
Otro punto a destacar es que todo el código que se genera con Gutenberg es HTML puro. Aquí no hay shortcodes, ni código javaScript que crea lo que visualizas.
Aparte que es código «muy limpio», o sea que usa el mínimo número de etiquetas para darle forma a tu web. Por ejemplo, para poner un título h2, solo va poner las etiquetas ‘<h2>El título</h2>’.
Con Elementor para poner un simple título te crea una cantidad de contenedores que envuelven el título brutal!!
Pero una imagen vale más que mil palabras. Aquí tienes un ejemplo con Gutenberg. El div que ves es el contenedor de la página que genera la plantilla.
Ahora vamos a ver el mismo título en la misma página y desde el mismo contenedor de la plantilla con Elementor.
Flipante, no?? 11 niveles antes de poner el h2. Vale que el h2 que puse en Gutenberg es sencillo de todo y con Elementor le puedes dar espacio, ponerlo muy bonito y todo lo que tu quieras. Ponle un par de divs a Gutenberg para ello.
Aún así, estamos hablando de 9 niveles más en Elementor que en Gutenberg. No hace falta ser desarrollador para ver que la cantidad de código que se genera es mucho mayor.
Y dirás tú ¿ y a mi qué? Pues a ti puede ser que te dé igual mientras todo vaya bien, pero si tienes que hacer alguna modificación a nivel de código el tiempo invertido en ella será 9 veces mayor.
Y por el momento Google no se mete mucho en ello y «lee» igual una página con tanto código, pero entre los avisos de LiteSpeed ya empieza aparecer «Evita un tamaño excesivo del DOM» que viene a reflejar el problema que os comentaba.
Y cuando Google empieza con avisos….
Carga excesiva de CSS y javaScript
Para que todas las funcionalidades que los maquetadores como Divi o Elementor ofrece funcionen, se necesita mucho código. Y ese código te lo meten en toda tu web, lo uses o no.
Para usar el 10% de las funcionalidades que ofrecen estás usando una cantidad de código innecesaria.
En Gutenberg eso no pasa, ya que solo se carga el código de aquellos bloques que uses. A parte el CSS o javaScript que se necesiten con Gutenberg se va cargar de todos modos (por el rollo este de venir de «serie» en WordPress).
Típico anuncio de PageSpeed, elimina los archivos CSS sin usar. Y para que no haya disputas, aquí pongo como ejemplo Divi.
Pero esto mismo ocurre con otros maquetadores. Lo importante es ver que generan mucho código del cual, en este ejemplo, sobra 70,9 KiB ( unidad similar al KB ), de los 73,5 KiB que carga.
Este es una web sencilla, pero es que nos sobra el 96,4% del CSS que carga Divi.
Algo similar pasa con javaScript.
Y a todo esto, los archivos de Gutenberg se cargan igual.
En el ejemplo anterior sale el aviso de que eliminemos los recursos que no usemos (Gutenberg nos lo cargamos al sobreescribir con Divi).
Pero fijaros en un detalle muy importante, el CSS de Gutenberg solo ocupa 7,8KiB frente a los 73,5KiB de Divi. Y todo esto en los archivos básicos. Extrapola a los que no te enseño. Que ya te adelanto que son unos cuantos!!
Gutenberg sigue los standars de desarrollo de WordPress
Vamos por partes.
En WordPress hay una serie de standars de desarrollo, buenas prácticas que todo desarrollador de temas o plugins debería seguir.
Al estar integrado en el propio WordPress, Gutenberg sigue esas buenas prácticas de desarrollo.
No quiero decir con esto que los otros maquetadores estén mal programados o que no usen buenas prácticas de desarrollo, sino que en muchos casos, no siguen las de WordPress.
Prueba de que se las saltan es quitando el maquetador de serie y poniendo el suyo. Si usas Divi, Elementor, WP Bakery o cualquier otro de los que hay, no puedes editar su código. Te bloquean la página y te obligan a usar su propio editor.
Desde mi punto de vista, con esto ya se pierde la esencia de WordPress y ya no cumplen con sus standars.
¿Qué implica esto para ti? Pues una dependencia de ese software para ver la página. No puedes desinstalar Divi en este caso, o el diseño que has hecho se te irá al garete.
Y ya no voy entrar en el tema de que estos maquetadores (a excepción de Elementor), trabajan con shortcodes, por lo que si lo deshabilitas te queda una estampa nada agradable ( si es que queda algo 😅 ).
Compatibilidad con el resto de plugins que hay en el repositorio
Cuando un plugin se sube al repositorio de WordPress es revisado para ver que cumple con las buenas prácticas de desarrollo de WordPress.
Eso lo sabemos bien en Destaca ya que recientemente hemos publicado nuestro propio plugin en el repositorio ( Destaca Post List 😎 ).
Muchos maquetadores como Divi o WP Bakery no pasan ese filtro ya que se venden en sus propias plataformas o sus propias webs.
Aunque se preocupan en afinar todo lo posible para que no haya conflicto con otros plugins, la realidad es que no suele ocurrir eso.
En nuestras tareas de mantenimiento habituales nos encontramos con problemas causados por este motivo, incompatibilidades de plugins con estos maquetadores. Con Gutenberg, obviamente, no pasa.
Lo curioso es que la mayoría de esos problemas suelen ocurrir cuando nos ponemos a intentar optimizar la carga de una web.
La compresión y minimización del código suele ser un dolor de cabeza muy grande con estos maquetadores. Y lo habitual es conseguir resultados más bien pobres.
Es muy difícil conseguir buena puntuación en PageSpeed con Elementor, por ejemplo. Cuando con Gutenberg, a nada que lo optimices, rozas el 90% en móvil y el 100% en escritorio. Y eso es una auténtica pasada.
El mantenimiento de una web te sale más barato con Gutenberg
Hacer el mantenimiento de cualquier web con Gutenberg te sale mucho más barato que con cualquier maquetador.
En primer lugar porque no suele dar tanto problemas. No te cuento la de problemas que dan páginas web hechas con WP Bakery!! Hasta el punto en que en muchas ocasiones, nuestro principal consejo es «cambia a Gutenberg» y te ahorras muchos disgustos.
Por otro lado, no hay que pagar suscripciones, las actualizaciones vienen con WordPress y no suele romperse nada.
Luego está el detalle de añadir funcionalidades extras que estos maquetadores no traen. Si encuentras algún addon que lo hace, genial (aunque más código que penaliza los tiempos de carga).
Pero si lo hay que hacer en exclusiva, las horas de desarrollo son mucho mayores.
Y si te vas a la comparativa del código de Gutenberg frente a Elementor, podrás ver que si hay que hacer una modificación con javaScript en el segundo caso es muy complejo poder hacerla con esa estructura, mientras que con Gutenberg suele funcionar a la primera. Lo mismito pasaría con personalizaciones por CSS.
Lleva más tiempo darle ese estilo por código que el propio maquetador no te deja. Vamos, que el tiempo que ganas en el diseño de la web, al final lo pierdes en ajustes por código 🤷♂️. Tiempo que al final se traduce en dinero.
Como diseñar una web con Gutenberg
Ya hablamos de los distintos bloques que trae Gutenberg por defecto y para que se puede usar cada uno.
Pero en este caso vamos ver como trabajamos con esos bloques y cual es el comportamiento de Gutenberg a la hora de trabajar con él.
Estructura de Gutenberg
Vamos a tomar como referencia la siguiente imagen para irnos situando.
- Al pulsar en el símbolo del más que nos señala el 1 nos abre el panel con todos los bloques disponibles, tanto los que hay por defecto, como los que puedas añadir de librerías externas, separados por categorías. También nos aparece la pestaña de Patrones y Bloques reutilizables ( si los tenemos, que no es el caso ).
- En la parte derecha del editor tenemos en el punto 2 las opciones generales del documento, como pueden ser las categorías, estado de publicación, etiquetas, imagen destacada y diferentes opciones que puedan meter otros plugins o nuestro tema.
- En el punto 3 tenemos las opciones del bloque que estemos editando en ese momento. Nada más seleccionar un bloque nos abre esta pestaña y nos aparecen todas las opciones de personalización del bloque en general. Aquí lo ideal es que estén opciones como tamaño de la letra del bloque, color del texto, color de fondo, espaciado, etc.
- El icono que marca el punto 4 es para ocultar o mostrar esa barra lateral. Por defecto está visible, pero si quieres escribir un articulo, igual te interesa ocultarla para focalizar tu atención en el texto 😉.
- Los 3 puntitos que señala el punto 5 son los ajustes generales de Gutenberg que podemos personalizar para poner nuestro editor más a nuestro gusto. Lo veremos en detalle más abajo.
- El punto 6 son distintas opciones de edición y ayuda que trae Gutenberg. Con el primer icono podemos elegir entre editar o seleccionar. Si está marcado seleccionar podemos elegir mucho más fácil el bloque que queremos con el ratón. Luego tenemos las típicas opciones de deshacer y rehacer. En el icono de exclamación tenemos información sobre el número de palabras escritas, encabezados, párrafos, bloques e incluso tiempo estimado de lectura. También aparece un pequeño esquema de la estructura de la web. Aquí un ejemplo de la información que hay en nuestra home.
El icono de las tres barras es dónde nos muestra la navegación a nivel esquemático de los bloques. Puede ser la navegación de una sección determinada si lo pulsamos estando en un bloque determinado o de toda la web.
Aquí un ejemplo de parte de nuestra home.
Cuando tenemos un bloque activo nos aparece una serie de opciones adiciones que son referentes a la disposición del bloque o la edición del texto. Esta barra se llama Barra de herramientas.
Estas opciones varían mucho en función del bloque que estemos seleccionando, pero suelen ser relativas al centrado del texto, a la disposición del bloque, el formato del texto y otras opciones de formato que aparecen al pulsar el botón 1.
Si pulsamos el botón dos nos aparecen opciones para añadir bloques adiciones antes o después de este, copiar el bloque (para hacer un copia y pega de toda la vida), editarlo como HTML, añadirlo a bloques reutilizables, agruparlo con otros bloques de manera que se crea una estructura fácil de mover y la opción de eliminar el bloque.
Ahora vamos a ver las distintas opciones que tenemos en los 3 puntitos que señala el punto 5 de la primera imagen.
- Si pulsamos en Barra de herramientas superior y la marcamos, la Barra de herramientas quedará anclada en la parte superior del editor en vez de flotando en nuestro bloque individual.
- El modo enfoque sirve para enfocar solo el bloque en el que estés trabajando, dejando los otros con cierta transparencia para no confundirte.
- El modo a pantalla completa viene marcado por defecto, pero puedes quitarlo y así te aparecen la barra lateral derecha del menú de WordPress. Que estando activado tendrías que pulsar en el símbolo de WordPress izquierdo para salir e ir a ella.
- Luego tenemos las opciones de editor visual o editor de código. Por si quieres meter HMTL a saco o editar ciertas partes de algún bloque. Ojito a esto, que si modificas algún bloque igual luego no lo reconoce como tal y te lo mete en el bloque de HTML.
- Luego tenemos distintas Herramientas para gestionar los bloques (podemos activar o desactivar aquellos que no usemos), gestionar los bloques reutilizables, atajos de teclado, ver el aviso de Bienvenida y Ayuda.
- La última herramienta de la lista es Opciones que nos permite activar o desactivar muchos de los módulos que vienen en en el editor y que nos da una interfaz que se ajuste más a nuestras necesidades.
Creo que con todo esto ya te puedes hacer una idea global del funcionamiento de Gutenberg y con ello has dado el primer paso para crear tus post o diseñar tus páginas.
Trucos para sacar el máximo rendimiento a Gutenberg
Al trabajar todos los días con Gutenberg para desarrollar páginas webs, se cogen una serie de trucos o formas de hacer las cosas que te facilitan el trabajo diario.
Obviamente cada uno tiene los suyos, pero yo te voy a contar los que solemos usar el equipo de Destaca cuando diseñamos una página web.
La opción de agrupar. Cuando tu creas un diseño que se compone de varios bloques, es muy interesante en muchas ocasiones agrupar ese diseño en un solo bloque, el bloque Grupo.
De este modo puedes copiarlo fácilmente para replicar en otro punto de la web, ponerle un color de fondo, el mismo color de texto a todo el bloque, y mover todo el conjunto fácilmente por la web.
Otra opción muy interesante es la posibilidad de convertir cierto grupo de bloques o una sección entera en bloques reutilizables.
Por ejemplo, el diseño anterior se puede convertir en un bloque reutilizable, de modo que puede usarse en otras páginas de la misma web y si modificamos el título, por ejemplo, quedaría modificado en todos los sitios dónde incluyamos ese bloque.
Otra opción muy interesante con los bloques reutilizables es la de coger esos mismos bloques para convertirlos en bloques normales modificando su contenido.
De manera que tu puedes crear un diseño que se puede repetir en muchas otra páginas de tu web pero con distinto contenido.
Creas el primer diseño, lo conviertes en bloque reutilizable y cuando lo vayas usar en otra página lo insertas y lo conviertes a bloque normal pulsando en los 3 puntos, de manera que ya puedes modificar el contenido del bloque.
No tienes que saber código para diseñar tu página. Gutenberg es #noCode
Hay una tendencia en la última época que se llama el movimiento #noCode. Al final se trata de hacer cosas sin necesidad de escribir código.
Es curioso que cuando tocan el tema del desarrollo de páginas web con #noCode, WordPress no suele ser una de esas herramientas que recomiendan. Y si la recomiendan, es con Elementor o Divi como maquetadores.
Pues WordPress con Gutenberg también es una herramienta #noCode. Tu puedes crear una web funcional, atractiva y perfectamente optimizada para tus landing pages o tus ideas de proyecto sin necesidad de escribir ni una sola línea de código.
Si os interesa ver algún tutorial de como hacer una landing page con un diseño llamativo y con Gutenberg sin escribir ni una sola línea de código, cuéntanoslo en los comentarios 😁.
Sino te llega lo que trae de serie, puedes complementar con librerías extras
La maravilla de WordPress y de la comunidad que tiene a su alrededor, es la posibilidad que te da tener un montón de plugins en el repositorio oficial de manera gratuita.
Un tipo de plugins son las librerías de bloques o plugins con un solo bloque.
Si con todos los bloques nativos que trae WordPress no te llega, aquí te dejamos unas cuantas librerías de bloques que nosotros usamos habitualmente y recomendamos:
- Gutenberg Blocks by Kadence Blocks – Page Builder Features
- Genesis Blocks (antiguamente Atomic Blocks)
- Gutenberg Blocks – Ultimate Addons for Gutenberg
- Page Builder Gutenberg Blocks – CoBlocks
- Stackable – Page Builder Gutenberg Blocks
- Powerful Gutenberg Blocks and Templates – Ghost Kit
Y por supuesto, no podemos dejar de recomendar nuestro propio bloque Destaca Block List que sirve para crear un listado de entradas dónde podéis hacer un filtrado por categoría, elegir el número de entradas a mostrar, si tienen paginación o no, y diversas funciones de estilos que le da un toque distinto. Ideal para crear una llamativa página de blog!!
Seguro que estás pensando, «pues vaya, no uso un maquetador, pero tengo que instalar uno o varios plugins a mayores para diseñar con Gutenberg, ¿dónde está la ventaja entonces?».
La ventaja de usar librerías de bloques antes que un maquetador, es que los bloques usan las mismas funciones y el mismo ecosistema que Gutenberg. Realmente lo que hacen estas librerías es ampliar las funciones que trae Gutenberg, no las sustituyen, las amplían.
Esa es una diferencia muy importante ya que se aprovechan de ese ecosistema creado, de todas sus funciones y componentes y lo que hacen es crear diferentes diseños que te facilitan la creación de sitios web espectaculares.
!Al final tu estás creando con la esencia de Gutenberg desde el principio!
¿Nada más? Bueno, un poquito más sí
El título puede ser muy triunfalista, con WordPress, Gutenberg y nada más.
La verdad es que hay una serie de plugins que son necesarios a mayores, como pueden ser los plugins de caché, los de SEO ( como Yoast o Rank Math), alguno de optimización de imágenes y otros de seguridad.
Pero también es verdad que el uso de Gutenberg facilita enormemente la implementación de estos plugins. Por ejemplo, los plugins de caché se llevan muy bien con Gutenberg, cosa que no ocurre con los otros maquetadores.
Conclusión
Si has llegado hasta aquí y aún no has empezado a crear tu sitio web con Gutenberg, ya estás tardando. Si necesitas ayuda en la creación de tu página web, nosotros te ayudaremos encantados.
Y si necesitas un servicio de mantenimiento para tener tu WordPress a punto y preocuparte solo de tu negocio, con Gutenberg lo haremos mejor 😉
