César Bla | Al día de hoy, y desde que se presentó Gutemberg 6.5 es el editor por defecto de WordPress, así como de los cuatro temas propuestos por los desarrolladores del potente CMS hasta la actualidad, de los cuales el último y más versátil es el Twenty Twenty Two.
Indice de Contenido
- Editor de Bloques
- Menú lateral
- Ventajas del editor de bloques
- Inconvenientes del editor de bloques
- Bloques reutilizables
Teniendo en cuenta los grandes beneficios de este editor con respecto a otros, parece que tenemos editor visual para largo, no será una solución definitiva ya que en tecnología la caducidad llega de un día para otro . Si lo conoces pero no lo usas lee este artículo que seguro te dará razones para probarlo.
Editor de Bloques
Para utilizar los bloques necesitamos acceder al editor de nuestro WordPress y dentro de una página o entrada. En el cuerpo del mensaje vemos que aparece un recuadro negro con un símbolo «Más» para añadir un bloque nuevo.
Si hacemos clic en el bloque nuevo vemos que aparece una pantalla emergente con una selección de los últimos utilizados además del botón inferior para ver todos los bloques.
Junto al menú Bloques aparece otro con los Patrones, que nos va a ayudar con composiciones más elaboradas que ya vienen definidas por defecto.
Menú lateral
Cada uno de los bloques que trabajemos muestra en el menú lateral una serie de opciones que permitirá trabajar la gráfica y el estilo de una forma muy rápida e intuitiva. En pocos segundos convertiremos un bloque plano en nuestro diseño único que se adapte a la gráfica corporativa de nuestra empresa.
En el menú desplegable de la derecha encontramos dos opciones muy interesantes dentro del apartado «Avanzado»:
- Anclaje HTML
Seleccionamos una cadena de textos y añadimos un identificador con la etiqueta id=»» con el texto que escribamos. En este campo evitamos crear espacios en blanco, por lo que definiremos el texto con guiones del siguiente modo: ejemplo-de-identificador
- Clase(s) CSS adicional(es)
Cualquier elemento que trabajemos puede además tener una o varias clases adicionales. Si trabajamos con Bootstrap 5 en este apartado podremos añadir clases a nuestros párrafos, imágenes, tablas, etc. para multiplicar las opciones de personalización de nuestros bloques.
Ventajas del editor de Bloques
Es muy fácil de combinar con las páginas diseñadas en HTML y PHP, por ejemplo en entradas del blog que requieren un diseño más sencillo se pueden crear en pocos minutos.
- Es gratuito
- Es muy intuitivo y fácil de usar
- Etiquetas HTML semánticas
- Muchas opciones predefinidas
- Se pueden crear bloques reutilizables
- Los bloques se pueden exportar e importar en otras webs
- El CSS para los bloques es el mismo en otros WordPress
Inconvenientes del editor Gutemberg
- No es realmente un Page Builder, construyes la página añadiendo bloques
- CSS inline: Algunas opciones (como los colores) introducen estilos inline
- Para construir bloques elaborados se necesita dedicación
- No hay tantas opciones como en otros editores
Otros editores visuales para WordPress
Los siguientes editores visuales son los más utilizados para la maquetación de proyectos WordPress a un bajo precio. Son editores Drag and Drop, es decir que no necesitas saber nada de código para conseguir resultados atractivos. Los resultados se muestran en tiempo real, durante años han sido los más elegidos por diseñadores.
El principal inconveniente común es que añaden mucho código como este ejemplo de una página diseñada con DIVI que incluye un exceso de elementos DOM.
Aunque parezca fácil, la curva de aprendizaje es muy superior a los bloques de Gutemberg.
Los bloques reutilizables
Podemos acceder al catálogo de bloques reutilizables desde el menú superior derecha haciendo clic en los 3 puntitos.
Por defecto no aparece ninguno, pero si que podemos ir creando de uno en uno desde este panel. La otra opción para añadir bloques propios a este catálogo es ir haciendo composiciones de diseño en el cuerpo de nuestro artículo y hacer clic en el menú emergente para «añadir bloque reutilizable».
A continuación puedes ver uno de los bloques reutilizables de esta página web, para suscribirse al Newsletter de SMiLE:
Los Bloques más usados:
Ahora sí, vamos a ver cuáles son los bloques que nos presenta Gutemberg y cuáles son las opciones principales que tenemos a nuestra disposición.
Primeramente asegúrate que tienes todos los bloques visibles editando el Gestor de Bloques en el menú que se despliega desde los 3 puntos arriba a la izquierda.
Bloques de texto
Párrafo
Escribe texto en un párrafo que se transformará dentro de una etiqueta html <p>. En la columna de la derecha encontramos las opciones de personalización para el tipo de letra, color de texto o fondo, etc.
Encabezados
Nos permite definir fácilmente nuestros encabezados o etiquetas H1, H2, H3, etc.
Por defecto el encabezado se convierte en H2 y tenemos que navegar en el menú emergente haciendo clic en H2 y remplazarlo por el Header que más nos convenga.
👉 Recordemos que el título debería de ser el único H1, para mantener una estructura de contenido tradicional para nuestra página.
Listas
Podemos seleccionar el bloque de lista o seleccionamos distintos párrafos y en el editor emergente le atribuimos el estilo de lista. A continuación aparecerá la opción de cambiar la apariencia de los puntitos a lista numerada, similar que en cualquier editor de texto como Word.
Tablas
Con el bloque Tabla podemos insertar y editar una tabla en pocos segundos.
Seleccionamos la cantidad de filas y columnas con el menú que aparece sobre el bloque así como las opciones de alineación y algunas preferencias más que aparecen en el menú derecho.
👉 Si quieres añadir a tu Tabla los estilos de Bootstrap 5 puedes conseguir que una extensa tabla horizontal sea totalmente responsive y tenga el aspecto que deseemos.
Bloques de Medios
Los medios ayudan a que los artículos sean más dinámicos siempre que estén colocados de forma natural entre el contenido. Los principales medios visuales son las imágenes, galería de imágenes, audio, video y el más resultón es el fondo de imagen con texto sobrepuesto.
Bloques de Diseño
Estos bloques configuran el aspecto general del diseño de la página como son los espaciados, saltos de línea, botones, columnas, etc.
Bloques de Widgets
Podemos mostrar los widgets de WordPress, fundiona del mismo modo que la sección que encontramos en la sección Apariencia > Widgets.
En la última versión también aparece la opción Shortcodes.
Bloques de Tema
Importa funciones relacionadas con el tema y los artículos publicados como el título, fecha, imagen destacada, extracto, etc.
Bloques Incrustados
Muestran contenido de otros sitios como Twitter, Tik Tok, Instagram o Youtube y lo incrusta añadiendo la URL de la publicación.
👉 Además de ser una solución fácil y rápida para editar el aspecto visual del contenido de tu web, los bloques de Gutemberg te van a permitir evitar los problemas comunes de WordPress que nadie te cuenta en los tutoriales.
