Profundizando en el último editor de WordPress de Gutenberg (2021)

Cuando se lanzó el editor de bloques de WordPress, o Gutenberg, en diciembre de 2018, no sabíamos qué esperar. Claro, habíamos tenido mucho tiempo para jugar con su versión beta, pero no pudimos predecir qué tan bien iría el lanzamiento real o qué tan ansiosos los usuarios y desarrolladores adoptarían el nuevo editor.

Hemos visto al editor de Gutenberg experimentar un tremendo crecimiento en los más de dos años desde que publicamos esta publicación por primera vez. Se ha pasado de un lanzamiento de producto mínimo viable (MVP) a un proyecto más maduro que se acerca al objetivo de crear una experiencia unificada de edición completa del sitio para WordPress.

Para tener en cuenta estos cambios, hemos vuelto a visitar el editor de Gutenberg para mostrarle su nueva cara, incluido el próximo destino.

¿Qué es el editor de bloques de Gutenberg?

Gutenberg, también conocido como el «editor de bloques de WordPress» o simplemente el «editor de WordPress», es el editor de contenido de WordPress introducido en WordPress 5.0, lanzado el 6 de diciembre de 2018.

Si no ha escuchado ese término, es el editor predeterminado que usan todos los sitios de WordPress a menos que lo haya desactivado específicamente. Se parece a esto:

La gran diferencia entre el editor de WordPress de Gutenberg y el editor de WordPress anterior (ahora llamado «editor clásico» o «editor TinyMCE») es un nuevo enfoque basado en bloques para crear contenido.

Con Gutenberg, cada elemento de su contenido es un bloque, lo que permite una fácil manipulación del contenido. Cada párrafo es un bloque, cada imagen es un bloque, cada botón es un bloque, ¡lo entiendes!

Los desarrolladores de terceros también pueden crear bloques personalizados, lo que está ayudando a terminar con el asunto de WordPress con los códigos cortos. Digamos que desea insertar un formulario de contacto. En lugar de tener que agregar un código corto (por ejemplo, `[your-form-shortcode]`) como lo hizo en el pasado, ahora puede colocar el bloque del complemento de formulario.

Más allá de eso, también puede usar bloques para crear diseños más complejos, como configurar un diseño de varias columnas o agrupar bloques para crear una sección cohesiva.

A medida que profundicemos en mostrarte cómo usar el editor de bloques, tendrás una mejor idea de cómo puedes usar bloques para mejorar la forma en que creas contenido.

Gutenberg se lanzó en diciembre de 2018, ¡y muchas cosas han cambiado desde entonces! 🚀 Consulte esta guía actualizada para obtener más información ⬇️Haz clic para tuitear

Gutenberg no es solo un editor de contenido

Una cosa importante a entender es que el proyecto Gutenberg pretende ser más que un simple editor de contenido.

En julio de 2021, Gutenberg todavía es solo un editor de contenido (en su mayor parte). Pero el objetivo a largo plazo de Gutenberg es moverlo hacia algo llamado Edición del sitio completo.

La idea con Full Site Editing es que podrá diseñar el 100% de su sitio web utilizando el editor Gutenberg. Por ejemplo, en lugar de limitarse a las opciones de encabezado que vienen con su tema de WordPress, podrá usar Gutenberg para diseñar encabezados personalizados usando el editor de bloques.

Este tipo de funcionalidad no está disponible todavía, pero está en camino, y tenemos algunos proyectos de «prueba de concepto» que le daremos un vistazo cerca del final de esta publicación.

Pros y contras de Gutenberg frente a las alternativas populares

Ahora que hemos podido utilizar el editor de bloques de WordPress durante más de dos años, tenemos una buena idea de algunos de los pros y los contras de Gutenberg frente a otras soluciones.

Hay dos alternativas principales que tiene para crear contenido en WordPress:

En general, el editor clásico de TinyMCE ofrece una experiencia más sencilla, similar a la de un procesador de textos, mientras que los creadores de páginas brindan una experiencia de diseño visual de arrastrar y soltar mucho más flexible.

Si estuviéramos ordenando los tres editores en función de su flexibilidad de diseño, sería algo como esto:

Editor clásico de TinyMCE (menos flexible)

Ahora, hablemos de algunos de los pros y los contras del editor de bloques de Gutenberg frente a las alternativas.

Gutenberg vs editor clásico: pros y contras

Primero comparemos Gutenberg con el editor clásico de TinyMCE.

Pros:

• Gutenberg ofrece un fondo de diseño más visual
• No necesita usar códigos cortos para incrustar contenido, obtiene un sistema de bloqueo unificado

Contras:

• Algunas personas encuentran que escribir en Gutenberg es un poco difícil de manejar porque cada párrafo es un bloque separado. Para publicaciones largas, puede ser difícil manipular el texto. Es posible que prefiera escribir en otro editor y pegar el texto en Gutenberg cuando haya terminado.
• Si bien el rendimiento de Gutenberg ha mejorado significativamente, aún puede retrasarse en publicaciones masivas, lo que es menos probable que suceda con el editor clásico.

Si cree que el editor clásico de TinyMCE se adapta mejor a sus necesidades, puede desactivar el editor de Gutenberg por completo.

Gutenberg vs Page Builders: pros y contras

Ahora, echemos un vistazo a cómo se compara Gutenberg con los complementos de creación de páginas de terceros.

Pros:

• Gutenberg es una característica principal, lo que significa que no tiene que preocuparse por problemas de compatibilidad.
• Debido a que es una característica central, todos los desarrolladores pueden integrar el soporte de Gutenberg en sus complementos, mejorando la compatibilidad.
• Gutenberg genera un código más limpio y ligero. En igualdad de condiciones, un diseño creado con Gutenberg generalmente se cargará más rápido que el mismo diseño realizado con un creador de páginas.

Contras:

• Gutenberg no ofrece una edición visual adecuada como un creador de páginas. Es más accesible que el editor clásico, pero aún no es 100% perfecto como un creador de páginas.
• Los creadores de páginas aún le brindan opciones de diseño y diseño más flexibles.
• La mayoría de los creadores de páginas ofrecen un movimiento de arrastrar y soltar mucho más fluido y flexible.

Reflexiones sobre la comparación

Para la mayoría de los usuarios, Gutenberg da en el blanco en términos de flexibilidad.

La mayoría de las personas no necesitan la flexibilidad de un creador de páginas para su contenido, especialmente para las publicaciones de blogs. Pero al mismo tiempo, es bueno configurar rápidamente un diseño de varias columnas o insertar un botón, lo que el editor clásico no facilita.

Entonces, con eso en mente, veamos cómo puede comenzar a usar Gutenberg.

Cómo utilizar el editor de bloques de WordPress de Gutenberg

Ahora que sabe un poco sobre el editor de bloques de Gutenberg, profundicemos en cómo puede usarlo para comenzar a crear contenido.

Comenzaremos con una mirada introductoria a la interfaz y desarrollaremos gradualmente formas más avanzadas de usar el editor y mejorar sus flujos de trabajo.

La interfaz del editor de bloques de Gutenberg

Cuando abra el editor, ocultará la barra lateral del panel de WordPress y le brindará una experiencia de pantalla completa:

Hay tres partes principales para el editor:

• Contenido: Su contenido ocupa la mayor parte de la pantalla. Verá una vista previa visual de cómo se verá en la parte frontal de su sitio. No es 100% exacto, pero debería tener una idea bastante clara del diseño final.
• Barra de herramientas superior: La barra de herramientas en la parte superior lo ayuda a insertar nuevos bloques, deshacer / rehacer y acceder a otras configuraciones vitales
• Barra lateral: La barra lateral contiene dos pestañas. los Correo La pestaña te permite configurar los ajustes de nivel de publicación como sus categorías, etiquetas, imagen destacada, etc. Cuadra La pestaña muestra la configuración del bloque que ha seleccionado; más sobre esto más adelante.

Para crear una experiencia de escritura más inmersiva, puede ocultar la barra lateral haciendo clic en el icono de «engranaje» en la esquina superior derecha. Para recuperar la barra lateral, todo lo que necesita hacer es volver a hacer clic en el icono de «engranaje»:

Por ejemplo, así es como se ve la interfaz del editor si está utilizando el nuevo tema predeterminado Twenty Twenty-One:

Agregar bloques

Para agregar texto de párrafo regular a su publicación, simplemente haga clic y escriba. Cada vez que presione enter, el editor creará automáticamente un nuevo bloque de párrafo.

Para otros tipos de contenido, deberá insertar un nuevo bloque. Usarás bloques para imágenes, botones, incrustaciones de video, etc.

Para agregar un nuevo bloque, puede hacer clic en uno de los iconos «más» en la interfaz. Es el ícono del insertador de bloques principal en la esquina superior izquierda, pero también verá otros íconos dentro de la interfaz que abre una interfaz de inserción de bloques más pequeña:

Para comenzar, coloque el cursor del mouse donde desea insertar el nuevo bloque. Por ejemplo, para agregar un nuevo bloque debajo del botón, puede hacer clic debajo del botón y luego hacer clic en el + icono.

Debería ver un panel lateral que muestra todos los bloques disponibles, divididos en diferentes categorías. Puede buscar un bloque específico o simplemente elegir una opción de la lista. Cuando se desplaza sobre un bloque, verá una descripción de lo que hace y una vista previa.

Para insertar el bloque, solo necesita hacer clic en él. Por ejemplo, para insertar una imagen normal, simplemente haga clic en el bloque de imagen:

Luego puede seguir las instrucciones para cargar o elegir una imagen existente de su Biblioteca de medios.

Opciones de formato esenciales

Para realizar elecciones de formato básicas para sus bloques, obtendrá una barra de herramientas flotante que aparece cuando hace clic en cualquier bloque.

Si está formateando texto normal, aquí es donde puede:

• Agrega negrita o cursiva
• Insertar enlaces
• Cambiar alineaciones
• Agregue formato, como código en línea, tachado y suscripción

Por ejemplo, digamos que desea insertar un enlace en su contenido. Primero debe seleccionar el texto específico que desea vincular; en nuestro ejemplo, es «Para otros tipos de contenido». Luego, puede hacer clic en el icono de enlace en la barra de herramientas para abrir las opciones de inserción de enlaces:

Configuración de opciones de bloque avanzadas

Todos los bloques que inserta vienen con configuraciones adicionales en la barra lateral. Algunos bloques pueden brindarle algunas configuraciones, mientras que otros le brindan varias opciones para controlar el diseño, el diseño, la funcionalidad, etc.

Para abrir la configuración de un bloque, haga clic en el bloque en el editor para seleccionarlo. Luego, ve al Cuadra pestaña en la barra lateral para ver su configuración.

A continuación, puede ver la configuración del bloque de botones, que es uno de los bloques más flexibles. Podrías cambiar el color, ensancharlo y mucho más.

A medida que realiza cambios en la configuración de un bloque, verá instantáneamente esos cambios reflejados en el editor.

Nuevamente, cada bloque tendrá configuraciones que son únicas para ese bloque. Por ejemplo, si abre la configuración para texto de párrafo normal, solo obtendrá algunas opciones básicas de tipografía y color. A continuación, puede ver que pudimos aplicar un fondo de color para resaltar algún texto:

Reorganización de bloques

Además de simplemente usar copiar y pegar (lo que puede hacer con el texto como cualquier otro editor), Gutenberg le ofrece dos formas principales de reorganizar los bloques.

Primero, si desea mover un bloque hacia arriba o hacia abajo algunas posiciones, puede usar las flechas hacia arriba o hacia abajo en la barra de herramientas flotante.

Para movimientos extensos, puede usar la función de arrastrar y soltar. Para arrastrar y soltar un bloque, debe hacer clic en el icono de «seis puntos» a la izquierda de las flechas.

Una vez que haga clic y mantenga presionado el mouse sobre ese ícono, puede arrastrar el bloque a cualquier lugar de la página:

Incorporación de contenido de otras fuentes

Gutenberg viene con bloques dedicados para incrustar contenido de fuentes de terceros como YouTube, Vimeo, Soundcloud, etc. Puede encontrar todas estas opciones en el Incrusta sección del insertador de bloques.

Por ejemplo, para insertar un video de YouTube, todo lo que necesita hacer es:

1. Agrega el bloque de YouTube dedicado.
2. Pegue la URL directa del video.
3. Hacer clic Empotrar.

A continuación, debería ver una vista previa del video incrustado en el editor.

Creación de diseños de varias columnas o agrupados

Como mencionamos anteriormente, una de las ventajas significativas del editor de bloques sobre el editor TinyMCE más antiguo es que puede crear diseños más complejos sin necesidad de depender de códigos personalizados o códigos cortos.

El editor de bloques viene con dos bloques predeterminados para ayudarlo a hacer esto:

• Columnas: Crea un diseño de varias columnas.
• Grupos: Agrupa varios bloques. Por ejemplo, puede usar esto para establecer un color de fondo para una sección completa que se muestra detrás de numerosos bloques.

Ambos bloques funcionan según el principio de «anidar» bloques, lo que significa que colocará uno o más bloques dentro de otra cuadra.

Le mostraremos un ejemplo usando el bloque de columnas, pero el mismo principio básico se aplica al bloque de grupo.

Supongamos que desea crear un diseño de dos columnas donde la columna de la izquierda tiene un texto de párrafo regular y la columna de la derecha tiene un botón.

Para comenzar, usaría el insertador de bloques para agregar el bloque de columnas. Eso mostrará un mensaje donde puede elegir su diseño preferido:

Elegiremos un diseño 50/50 de dos columnas para este ejemplo. Con eso, verá dos cajas del mismo tamaño con + iconos en el interior. Para insertar contenido, puede hacer clic en ese + icono para abrir la interfaz del insertador de bloques:

Una vez que haya agregado el primer bloque a una columna, puede presionar el + icono para insertar bloques adicionales. O puede arrastrar y soltar un bloque desde fuera de la estructura de la columna a la columna.

10 consejos útiles de Gutenberg para trabajar de forma más productiva

Ahora que tiene una comprensión básica de cómo funciona Gutenberg, repasemos algunos consejos y trucos valiosos que lo ayudarán a usar el editor de bloques de manera más efectiva.

1. Utilizar / (Barra oblicua) para insertar bloques rápidamente

Si necesita insertar muchos bloques, abrir manualmente el insertador de bloques puede resultar un poco tedioso. Afortunadamente, una vez que comience a aprender los nombres de los bloques comunes que necesita usar, hay una forma mucho más rápida de insertar bloques usando solo su teclado: / (barra inclinada).

Si presiona «Enter» para comenzar un nuevo bloque de párrafo, puede insertar rápidamente un bloque escribiendo una barra inclinada, seguida del nombre del bloque que desea insertar.

Cuando empiece a escribir, verá una lista de todos los bloques que coinciden con su consulta. Luego puede usar las flechas de su teclado para navegar por los bloques y presionar «Enter» para seleccionar el bloque que desea insertar.

A continuación, se muestra un ejemplo del uso de inserción rápida para agregar un bloque de imagen:

2. Inserte imágenes arrastrándolas desde su escritorio

Si está insertando muchas imágenes, el editor de bloques incluye otra función para ahorrar tiempo que le permite eliminar la necesidad de agregar un bloque de imagen antes de cargar una imagen.

En su lugar, puede simplemente arrastrar el archivo de imagen directamente desde su escritorio a la ubicación donde desea agregarlo a su publicación. Cuando arrastre el archivo de imagen sobre el contenido de su sitio, verá una línea azul que marca el lugar donde aparece la imagen.

Una vez que libere el archivo, WordPress lo cargará automáticamente e insertará un bloque de imagen en la ubicación adecuada:

3. Utilice algún formato de Markdown

Si eres fanático de la sintaxis de Markdown para crear contenido, te alegrará saber que el editor de bloques admite un uso limitado de Markdown, principalmente para los títulos.

Por ejemplo, si desea insertar un bloque de encabezado con una etiqueta H3, puede escribir tres hashtags (`###`) y luego presionar la barra espaciadora. El editor lo convertirá automáticamente a un H3, y luego puede continuar escribiendo el encabezado:

Suponga que desea una compatibilidad con Markdown aún más avanzada. En ese caso, puede instalar un complemento gratuito como EditorsKit, que también le permite usar Markdown para negrita, cursiva y tachado; hablaremos más sobre los complementos de Gutenberg un poco más adelante en esta publicación.

4. Fija la barra de herramientas de formato en la parte superior del editor.

Si no le gusta cómo la herramienta de formato «flota» sobre un bloque, el editor de bloques incluye una función que le permite fijarlo debajo de la barra de herramientas superior:

5. Copiar un bloque y todas sus configuraciones

El editor de bloques te permite copiar y pegar texto como lo harías en cualquier editor – «control + C«O haciendo clic con el botón derecho y seleccionando Dupdo.

Sin embargo, no puede usar este método para copiar y pegar un bloque completo mientras conserva su configuración. En su lugar, necesitará:

1. Seleccione el bloque.
2. Haga clic en el icono de tres puntos en la barra de herramientas del bloque.
3. Seleccione Dupdo.

Una vez que haya copiado el bloque de esta manera, puede pegarlo como lo haría normalmente, es decir, «control + V«O haciendo clic con el botón derecho y eligiendo Pegar.

6. Seleccione rápidamente el bloque derecho usando la vista de lista de bloques

Para la mayoría de los bloques, puede hacer clic en el editor para seleccionar el bloque. Sin embargo, esto puede resultar complicado si comienza a utilizar bloques «anidados», como insertar bloques dentro de las columnas o bloques de grupo.

El editor incluye una opción de Vista de lista, que puede abrir desde la barra de herramientas superior para tener en cuenta esto. La vista de lista le mostrará todos los bloques, incluidos los bloques anidados con sangría.

Puede seleccionar un bloque haciendo clic en él en la lista, y el editor también resaltará el bloque cuando pase el cursor sobre él en la lista.

En el siguiente ejemplo, puede ver:

• El bloque de columnas padre primario
• Bloques anidados para cada columna
• Un bloque de grupo anidado dentro de una columna
• Un bloque de encabezado anidado dentro del bloque de grupo

Para seleccionar el bloque principal principal, puede abrir la vista de lista y seleccionarlo de la lista:

7. Abra el Editor de código (para bloques individuales o publicaciones completas)

Una de las ventajas del editor de bloques de Gutenberg es que te permite configurar muchos estilos y opciones de diseño sin tener que recurrir al código. Sin embargo, es posible que aún tenga algunas situaciones en las que desee acceder al código directamente para usuarios más avanzados.

Para ayudarlo a hacer eso, el editor de Gutenberg viene con algunas opciones diferentes.

Primero, puede editar el código de un bloque individual, útil para ajustes menores como insertar una clase CSS. Para hacer esto, abra el menú desplegable de la barra de herramientas del bloque y seleccione Editar como HTML:

Al seleccionar esta opción, la vista previa visual se convertirá en un editor de código solo para ese bloque, sin afectar las vistas previas visuales de otros bloques:

En segundo lugar, el editor incluye un bloque HTML personalizado que puede utilizar para incrustar fragmentos HTML completos. Todo lo que hace es agregar el bloque y pegar su código.

Finalmente, también puede abrir el editor de código completo para todo el documento usando el menú desplegable en la esquina superior derecha o un atajo de teclado: control + Cambio + Alt + METRO.

Tenga en cuenta que, cuando abra el editor de código completo, también verá el marcado de formato de bloque de Gutenberg, por lo que puede ser un poco complicado navegar:

8. Aprenda los atajos de teclado

El editor de bloques incluye una gran cantidad de atajos de teclado que le permiten realizar acciones comunes. Vale la pena tomarse el tiempo para aprenderlos porque lo harán más productivo y lo evitarán de muchos clics repetitivos del mouse.

Estos son algunos de los atajos más comunes: si está en una Mac, querrá cambiar «Ctrl» por «Comando (⌘)»:

• Abrir la vista de lista de bloques – Camisa + Alt + O
• Guarde sus cambios – control + S
• Deshaga sus últimos cambios – control + Z
• Rehaga su último deshacer – control + Cambio + Z
• Duplica los bloques seleccionados – control + Cambio + D
• Eliminar los bloques seleccionados – Cambio + Alt + Z
• Insertar un nuevo bloque antes de los bloques seleccionados – control + Alt + T
• Insertar un nuevo bloque después de los bloques seleccionados – control + Alt + Y

También puede abrir una hoja de trucos completa de todos los atajos de teclado cuando está en el editor. Para hacer esto, puede usar un atajo de teclado: Mayús + Alt + H – o haga clic en el icono de menú «tres puntos verticales» (⋮) en la esquina superior derecha del editor y elija Atajos de teclado desde el menú desplegable.

9. Limpia tu interfaz ocultando bloques

El editor de bloques agrega muchos bloques por defecto, pero probablemente no los usará todos. Para ayudarlo a limpiar la interfaz, el editor incluye una función llamada Administrador de bloques que te permite deshabilitar y ocultar bloques que no estás usando:

10. Agregar anclas para enlaces de salto

Finalmente, nuestro último consejo útil es la función de enlace de ancla HTML dedicada del editor de bloques, que le permite crear enlaces de salto a secciones específicas de su contenido (por ejemplo, para una tabla de contenido).

En el editor clásico, tenía que agregar anclajes HTML usando código manualmente. Pero con Gutenberg, puede ingresar el texto para su enlace de salto en el Ancla HTML campo en el Avanzado área de la configuración de cualquier bloque:

Profundizando en conceptos más avanzados del editor de bloques

En este punto, hemos cubierto bastante sobre cómo funciona el editor y algunos consejos para trabajar de manera más eficiente. Ahora que tiene ese conocimiento básico, repasemos dos tácticas un poco más avanzadas:

• Patrones de bloques
• Bloques reutilizables

Patrones de bloques

Un patrón de bloque es esencialmente una plantilla. Es una colección de bloques dispuestos en un diseño. Podría ser algo menor, como una disposición de botones. Incluso podría ser una plantilla para una sección completa, o incluso una página completa.

WordPress viene con sus propios patrones de bloques integrados, y los desarrolladores de complementos de terceros también pueden agregar los suyos propios.

Puede insertar nuevos patrones desde el Patrones pestaña del insertador de bloques principal:

Una vez que inserte el patrón de bloque, puede editar completamente todos los bloques que componen ese patrón, como si los hubiera agregado manualmente.

Actualmente, el editor principal de Gutenberg no le permite crear sus patrones de bloques (a menos que sepa cómo codificar). Sin embargo, puede solucionar este problema con el complemento gratuito Block Pattern Builder de Justin Tadlock. Con el complemento activado, puede crear sus diseños usando Gutenberg y luego guardar ese diseño como un patrón.

Para empezar, ve a Patrones de bloques > Agregar nuevo para crear un nuevo patrón usando el editor. Asegúrate de publicarlo cuando hayas terminado:

Una vez que haya hecho eso, podrá insertar su patrón de bloque como cualquier otro; búsquelo en el Sin categorizar sección:

El equipo central de WordPress también lanzó una biblioteca oficial de patrones de bloques en WordPress.org. Puede insertarlos en el editor usando copiar y pegar. Simplemente haga clic en el Dupdo en el sitio web de la biblioteca de patrones de bloques y luego péguelo en el editor.

Bloques reutilizables

Los bloques reutilizables son una colección de uno o más bloques que puede insertar como grupo. Son similares a los patrones de bloque, pero con una diferencia clave:

Mientras que un patrón de bloque es una plantilla inicial que editará en cada instancia, un bloque reutilizable será el mismo en todas las instancias donde lo incluya.

Si actualiza el bloque reutilizable, esos cambios se aplicarán automáticamente a todas las instancias existentes.

Por ejemplo, podrías usar un bloque reutilizable para crear una llamada a la acción (CTA) que quieras que sea igual en todo tu contenido. Luego, si alguna vez desea actualizar el CTA, solo necesita actualizar el bloque reutilizable una vez para cambiarlo en todo el sitio.

Para crear un bloque reutilizable en el editor de Gutenberg WordPress, haga clic y arrastre para seleccionar uno o más bloques. Luego, haga clic en el Agregar a bloques reutilizables opción. (El complemento que mencionamos anteriormente también le permite crear un patrón de bloque de esta manera).

Luego, tus bloques se agruparán; puedes darle un nombre a tu bloque reutilizable en la configuración del bloque reutilizable en la barra lateral.

Ahora, podrá insertar ese bloque reutilizable buscando su nombre. Puede usar `/` para insertar rápidamente el bloque:

Si cambia el bloque reutilizable, tendrá la opción de publicar esos cambios cuando actualice la publicación. Y si decide publicar los cambios del bloque reutilizable, esos cambios se aplicarán automáticamente a cada instancia del bloque reutilizable:

Ampliación del editor de bloques con complementos

Hasta ahora, nos hemos centrado en las funciones del editor de bloques principales, con algunas excepciones.

Sin embargo, una de las mejores cosas del editor de bloques es que puede usar complementos para extenderlo, al igual que puede hacerlo con el resto de su sitio de WordPress.

Puede usar complementos para algunas cosas diferentes:

• Agregar nuevos bloques de contenido: Los complementos pueden agregar nuevos bloques que puede usar en sus diseños. Es el caso de uso más común para los complementos de Gutenberg en este momento.
• Agregue nuevas plantillas / patrones de bloques: Algunos complementos utilizan el sistema de patrones de bloques centrales, mientras que otros han creado sus propios sistemas de plantillas.
• Cambiar la interfaz / funciones del editor: Puede utilizar complementos para modificar el propio editor. Por ejemplo, puede agregar un mejor soporte de Markdown.

Más allá de los complementos creados específicamente para Gutenberg, muchos otros complementos de WordPress también pueden usar el editor de bloques.

Por ejemplo, si está utilizando un complemento de formulario de contacto, el complemento puede darle un bloque dedicado que puede usar para incrustar sus formularios. Lo mismo se aplica a muchos otros tipos de complementos.

Una vez que domine los conceptos básicos del editor, vale la pena explorar estos complementos para ver si encuentra alguno que pueda mejorar su experiencia.

Estas son algunas de las opciones más populares en el momento en que escribimos esta publicación:

Puede ver más en la sección de complementos habilitados para bloques de WordPress.org.

Editor de WordPress de Gutenberg y edición del sitio completo

Como mencionamos al comienzo de esta publicación, el proyecto Gutenberg pretende ser mucho más que un simple editor de contenido.

El plan a largo plazo es que WordPress se mueva Edición del sitio completo. Significa exactamente lo que dice: el objetivo es que eventualmente pueda editar todas las partes de su sitio utilizando el editor de Gutenberg. Y eso incluye el encabezado, pie de página, barras laterales, etc. de su sitio.

A diferencia del lanzamiento del editor de bloques en WordPress 5.0, la edición completa del sitio tiene un enfoque iterativo. Será una adición gradual de funciones, donde cada nueva versión se basa en las anteriores.

Por ejemplo, a partir de WordPress 5.8, ahora usará el editor de bloques para administrar los widgets de su sitio. También tendrá acceso a algunos bloques nuevos centrados en temas, como el logotipo del sitio, la navegación, el bucle de consultas (le permite crear plantillas para publicaciones de listas) y más.

Pero aunque la edición oficial del sitio completo todavía es un trabajo en progreso, algunos intrépidos desarrolladores de temas ya han comenzado a lanzar temas basados ​​en bloques, lo que nos da algunos buenos ejemplos de cómo podría funcionar la edición completa del sitio.

Además, puede acceder a algunas de las funciones experimentales de edición completa del sitio en la versión del complemento de Gutenberg.

Entonces, veamos dos cosas:

1. Las funciones principales de edición de sitio completo existentes que tenemos ahora a partir de WordPress 5.8
2. Cómo podría funcionar la edición «completa» del sitio completo en función de las funciones experimentales

Usar bloques en lugar de widgets

A partir de WordPress 5.8, ahora usará bloques para controlar sus barras laterales y pies de página en lugar de widgets (de forma predeterminada, puede deshabilitar esto si lo desea).

Cuando vas a Apariencia > Widgets, podrá administrar el contenido de cada área de widget utilizando el editor de bloques.

Puede ver que cada área de widget tiene un editor separado, que puede abrir haciendo clic en los botones de acordeón. También puede mover bloques entre diferentes áreas de widgets haciendo clic en los íconos de flecha en forma de gancho cerca de la parte superior:

Usar nuevos bloques temáticos

WordPress 5.8 también agrega nuevos bloques temáticos dedicados que le permiten insertar contenido dinámico en su sitio. Estos bloques también desempeñarán un papel fundamental cuando diseñe plantillas para su tema en versiones futuras.

Por ejemplo, supongamos que desea insertar una lista de su contenido más reciente en una página. Ahora, puede simplemente agregar el bloque Query Loop y podrá insertar dinámicamente contenido de un tipo de publicación en particular (por ejemplo, publicaciones de blog), incluido el filtrado por categorías, autores, palabras clave y más:

Dentro del bloque Query Loop, puede anidar los otros bloques de temas para controlar la plantilla del contenido que se muestra allí. Por ejemplo, puede mostrar la fecha de cada publicación agregando el bloque Fecha de publicación a su plantilla.

Con el bloque Query Loop en WordPress 5.8, esencialmente puede diseñar su propia página de lista de blogs personalizada. La edición adecuada del sitio completo ampliará eso a todo su tema, así que veamos eso a continuación.

Diseño de plantillas de contenido

El modo de edición de plantillas es otra característica nueva de WordPress 5.8. Te permite usar Gutenberg para diseñar las plantillas para tus publicaciones y páginas usando bloques.

Actualmente, esta función solo está disponible si el desarrollador de su tema la ha habilitado específicamente, por lo que es posible que no la vea si el desarrollador de su tema aún no lo ha hecho.

Si tu están usando un tema que admita el modo de edición de plantillas en WordPress 5.8, verá un nuevo Plantilla sección en el Publicación / Página pestaña de la barra lateral cuando estás editando una publicación o página. Puede crear una nueva plantilla o elegir una de sus plantillas existentes:

Si crea una nueva plantilla, podrá ponerle un nombre que le ayude a recordarla. Luego, puedes diseñar la plantilla usando el modo de editor de plantillas especial, junto con los nuevos bloques temáticos que detallamos en la sección anterior:

Ejemplo de edición de sitio completo de Blockbase

Blockbase es un tema de Automattic que funciona como una especie de «prueba de concepto» y un campo de juego para la edición completa del sitio. Todavía es experimental, por lo que podría cambiar antes de que estas características estén en el software principal de WordPress. Pero proporciona una idea de sitio completo Edición.

Con el tema y la versión del complemento de Gutenberg instalados, obtienes un nuevo Editor del sitio área que le permite «construir» su tema usando el mismo editor que vio arriba.

Sin embargo, la diferencia fundamental es que no solo está creando una sola publicación o página. En su lugar, está utilizando el editor de bloques de WordPress de Gutenberg para crear las plantillas reales que usará todo el contenido de su sitio, por ejemplo, la plantilla para su encabezado.

Para ayudarlo a lograr esto, obtendrá una gama de nuevos bloques de diseño, incluidos algunos de los bloques temáticos que vio anteriormente:

Para navegar entre diferentes plantillas, puede hacer clic en el logotipo de WordPress en la esquina superior izquierda para editar otras plantillas y crear nuevas:

Una vez más, la idea es que finalmente podrá utilizar el editor de Gutenberg para controlar todas las plantillas / diseños de su tema. Y cuando eso suceda, la creación de un sitio de WordPress se verá bastante diferente de lo que vemos como «normal» en 2021.

En los más de 2 años transcurridos desde el lanzamiento de Gutenberg, mucho ha cambiado, ¡y aún hay más por venir! 😲 Consulte esta guía para ver lo que vendrá en los meses y años venideros 👀Haz clic para tuitear

Resumen

Desde 2018, el editor de bloques de Gutenberg ha avanzado mucho. Con el próximo movimiento hacia la edición completa del sitio, el editor de bloques solo se convertirá en una parte aún más importante de WordPress.

En esta publicación, hemos cubierto todo, desde los conceptos básicos del editor de bloques hasta consejos y funciones avanzadas. También hemos analizado cómo se vería la edición completa del sitio en el futuro.

Si aún no está listo para probarlo, puede desactivar Gutenberg permanentemente y usar el editor clásico. Sin embargo, Gutenberg seguirá creciendo, por lo que no es algo que quieras ignorar para siempre.

¿Todavía tienes preguntas o pensamientos sobre el editor? Si es así, nos encantaría escuchar sus comentarios, tanto buenos como malos.