Gutenberg Wordpress o Page builder wordpress (también lo podríamos llamar así)

Gutenberg el nuevo editor de wordpress

En este artículo voy a realizar un análisis en profundidad del nuevo Editor de Gutenberg y su impacto en el desarrollo web de WordPress.

Te explicare algunos trucos prácticos que resultarán útiles, especialmente si está utilizando Gutenberg por primera vez.

Parece que Gutenberg ha sido un término de controversia en el mundo de WordPress últimamente. Aclamado como el cambio más significativo para WordPress 5.0 este año, el editor de Gutenberg ha recibido una respuesta mixta de los desarrolladores web y la gente común por igual.

Todo este caos hace que sea difícil ver a Gutenberg por lo que realmente es. Por lo tanto, intentaré quitar un poco de la confusión para aclararnos de una vez por todas.

1. ¿Qué es Gutenberg?

Nombrado en honor a Johannes Gutenberg, quien inventó la imprenta mecánica, Gutenberg fue presentado al mundo por Matt Mullenweg en WordCamp Europe en 2017 .

En esencia, Gutenberg es un nuevo editor de WordPress o Page Builder Wordpress, con docenas de características de vanguardia. Simplifica la creación y edición de sitios web para el usuario medio no técnico.

Ha obtenido varios reconocimientos, desde “la nueva experiencia de publicación de WordPress” hasta “el futuro de la creación de sitios web”.

Algunos escépticos piensan que es el clavo en el ataúd para WordPress. Dejando de lado todo esto, Gutenberg va a ser mucho más que un simple editor de WordPress (que discutiré a continuación).

Permite a los creadores de sitios web crear un sitio web utilizando bloques, que son pequeñas unidades de arrastrar y soltar.

Por lo tanto, reemplaza el actual proceso de personalización inconsistente y que distrae. También habilita etiquetas HTML como sectiony figure, generando HTML sólido.

A partir de la actualización de wordpress 5.0  Gutenberg ya viene integrado por defecto solo tienes que activarlo si lo quieres utilizar o seguir con el antiguo editor.

2. Más que solo un editor

Gutenberg es más que un simple editor porque te permite manejar el contenido del sitio web en bloques o bloques personalizables. Clic para tuitear

No necesitas ser un fluido experto en HTML o escribir códigos cortos. Puedes controlar el diseño completo de un sitio web (tanto back-end como front-end) desde una única consola.

Este nuevo editor intenta combinar las mejores características de los complementos de creación de páginas como Elementor Divi y Visual Composer , así como las plataformas “hágalo usted mismo” como Medium, Wix y Squarespace.

Por lo tanto, al igual que esos complementos de creación de páginas, puedes manejar diseños de varias columnas a través de una única interfaz.

¿Esto significa el final de complementos como Elementor Divi y Beaver Builder?

Yo no lo creo aunque el editor de wordpress ha mejorado una barbaridad con gutenberg todavía no llega  a editores como divi elementor , así que la respuesta corta es no.

Es improbable que Gutenberg reemplace esos complementos completamente. Puedes seguir usándolos incluso una vez que Gutenberg se convierta en tu editor predeterminado.

3. ¿Qué cambia Gutenberg en WordPress?

El único propósito del editor de Gutenberg es proporcionar una alternativa a los editores de texto que están saliendo en la actualidad, sin mencionar los códigos cortos difíciles de recordar, con una interfaz de usuario ágil y visual (UI). Entonces, a diferencia del anterior editor de WordPress, no tienes que:

·        importar imágenes, archivos multimedia  de la biblioteca de medios o agregar códigos cortos HTML;

·        copiar y pegar enlaces para incrustar;

·        escribir shortcodes para activos especializados de diferentes complementos;

·        crear imágenes destacadas para agregarlas en la parte superior de una publicación o página;

·        agregar extractos de los subtítulos;

·        agregar widgets para el contenido en el lado de una página.

En resumen, Gutenberg no cambia cómo funciona WordPress. Sin embargo, sí cambia la forma en que los propietarios de sitios web (o creadores) interactúan con él. En lugar de una gran cantidad de códigos cortos y metacuadros, utilizarás bloques simples

¿Qué son los bloques?

Consideremos un bloque como la unidad más básica (por lo tanto, más pequeña) del nuevo editor.

Serán los bloques de construcción de WordPress 5.0. En otras palabras, todo, incluyendo contenido, imágenes, citas, galerías, imágenes de portada, audio, vídeo, encabezados, incrustaciones, códigos personalizados, párrafos, separadores y botones, se convertirán en bloques distintos.

Debido a que puedes arrastrar y soltar cada bloque, identificar estos elementos y colocarlos en la página es mucho más fácil.

4. Instalar Gutenberg

Puedes descargar la última versión de Gutenberg directamente desde el repositorio de WordPress .

También puedes buscarlo en los plugin “Agregar nuevo” en tu panel de WordPress. ( más abajo te dejo una imagen para que lo veas)

Te recomendaría instalarlo en un entorno de prueba. Sin embargo, necesitarás la última versión de WordPress ( versión 4.8 o posterior) para instalar el editor de Gutenberg.

1.    Inicia sesión en tu panel de administración de WordPress.

2.    Ve al menú plugins en el lado izquierdo del panel de control.

3.    Haz clic en “plugin” para abrir el menú “Agregar nuevo”.

4.    Escribe “Gutenberg” en el cuadro de búsqueda, ubicado en la esquina superior izquierda.

5.    Verás el plugin de Gutenberg en los resultados.

6.    Haz clic en el botón “Instalar ahora”.

7.    Haz clic en el botón “Activar” para iniciar el complemento.

editor gutenberg

5. Explorando Gutenberg en longitud

Una vez instalado y activado, Gutenberg mostrará un icono en la barra de menú izquierda. Cuando lo lances por primera vez, verás una nueva publicación de muestra, titulada “Gutenberg Demo”. Puedes practicar en la publicación de la demo antes de crear la tuya.

AÑADIR NUEVA ENTRADA
Ve a “Entradas” en la barra de menú izquierda de tu panel de WordPress. El nuevo post será lanzado en Gutenberg primero. Más tarde puedes editarlo tanto en el editor clásico como en Gutenberg.

EDITAR
Ve al menú “Entradas” y pasa el mouse sobre una publicación guardada para ver la opción de elegir entre los dos editores. Aunque la opción de editor clásico está disponible por el momento, lo más probable es que se elimine con el lanzamiento de WordPress 5.0.

CAMBIAR ENTRE EDITORES
También puedes cambiar entre los dos editores al editar una publicación. Haz clic en el menú desplegable en la esquina superior derecha para alternar entre el modo de editor visual y el editor de texto (es decir, el código). Alternativamente, también puedes usar el acceso directo Ctrl+ Shift+ Alt+ M para cambiar entre editores.

COPIAR TODO EL CONTENIDO
Esta función te permite copiar todo el contenido en la versión HTML con un solo clic. Puedes abrir esta función en ambos editores haciendo clic en el menú desplegable en la esquina superior derecha del tablero.

ESTRUCTURAS DE CONTENIDO
Esta función te permite contar el número de palabras en una publicación completa. También puedes ver el número de encabezados, párrafos y bloques con solo un clic. Haz clic en el icono de información (i) en el área superior izquierda.

editor gutenberg

 

 

REHACER Y DESHACER
Puedes encontrar estas opciones al lado del icono de información (i). Te permiten deshacer o rehacer el último comando.

editor wordpress gutenberg

 

CONFIGURACIÓN DE PÁGINA Y DOCUMENTO
Esto te permite cambiar varias configuraciones de página y documento. Lo puedes encontrar en la barra de menú de la derecha. Puedes realizar los siguientes ajustes:

·        Haz una publicación pública o privada.

·        Cambia la fecha de publicación.

·        Selecciona el formato de una publicación.

·        Añadir o editar categorías y etiquetas.

·        Sube imágenes destacadas.

·        Escribe un extracto.

·        Habilitar y deshabilitar comentarios, pingbacks y trackbacks.

 

 

STICK A LA PORTADA
Esta característica será útil si estás ejecutando un blog.

Cuando activas el tilde en la configuración del documento, esa publicación en particular siempre aparecerá en la página principal de tu blog. Y simplemente apágalo para quitarlo de la página principal.

editor gutenberg

 

USANDO BLOQUES
Como ya mencione antes, los bloques son la unidad fundamental del nuevo editor de Gutenberg.

Para usar Gutenberg de manera eficiente, debes comprender cómo usar estos bloques.

Cubriré los bloques principales uno por uno. Haz clic en el botón más (+) junto a la opción rehacer / deshacer para abrir el menú de bloques.

editor gutenberg

Bloques comunes
Los bloques comunes te permiten agregar los elementos necesarios para crear una interfaz de usuario enriquecida.

·        Párrafo
El bloque de párrafos incluye algunas características excelentes, como tamaños de fuente personalizados, mayúsculas, colores de fondo y colores de texto, entre otros. También puedes agregar más clases de CSS en este bloque.

·        Imagen
Este elemento viene con una nueva característica que te permite alternar entre la galería y los diseños de imagen. También obtienes un mayor control sobre las imágenes porque puedes establecer dimensiones de tamaño particulares, porcentajes de tamaño porcentuales y una descripción de texto alternativa para cada imagen.

·        Otros elementos incluyen :

o   citas,

o   galerías

o   cubrir las imágenes,

o   encabezados

o   liza,

o   audio,

o   archivos,

o   subtítulos

o   vídeo.

Formateo
Como su nombre nos indica, estos bloques comprenden todas las herramientas de formato.

·        Tabla
Agregar una tabla usando un código HTML personalizado era y es un trabajo tedioso. Con el bloque de tabla, sin embargo, la tarea es mucho más fácil. Puedes agregar y eliminar filas y columnas de una tabla sin codificación.

·        HTML personalizado
Puedes utilizar un código HTML personalizado en Gutenberg. Y lo bueno es que puedes insertar tu código y ver una vista previa en el propio bloque.

·        Otros elementos incluyen :

o   código,

o   clásico,

o   preformateado

o   tire de la cita,

o   verso.

.      Diseño
Usa tu imaginación para crear un diseño impresionante utilizando este bloque. Cada elemento en este bloque viene con excelentes características.

·        Botón
Puedes agregar botones como “Suscribirse ahora” y “Comprar ahora” usando este bloque. Tiene diferentes opciones, incluyendo alineación y estilos de fuente. También puedes establecer el color de fondo y la forma del botón.

·        Columnas (beta)
Crear columnas en el editor basado en código requiere mucho tiempo y es laborioso. Este bloque te permite agregar columnas de texto. Puedes agregar de una a seis columnas en una sola fila.

·        Otros elementos incluyen :

o   Lee mas,

o   salto de página,

o   separador,

o   espaciador.

.       Widgets
Estos bloques te permiten agregar un archivo, categorías, las últimas publicaciones y los últimos comentarios con un solo clic en cualquier parte de la página. También puedes ajustar estos elementos sin ningún tipo de codificación.

·   Última publicación
Con este elemento de bloque, puedes mostrar las publicaciones en una vista de cuadrícula o vista de lista, organizarlas en categorías y ordenarlas alfabéticamente o según la fecha de publicación. También puedes optar por mostrar la fecha de publicación.

.    Insertar
Puedes acceder fácilmente a cualquier incrustación utilizando estos bloques. Ya sea que desees agregar un enlace de YouTube o Twitter, es muy fácil y rápido. Todo lo que necesitas hacer es pegar la URL en el espacio en blanco dado, y Gutenberg insertará el código por ti.

Bloques reutilizables
Los bloques reutilizables dan a los desarrolladores una mejor usabilidad. Puedes convertir cualquier bloque en un bloque reutilizable para que puedas usarlo en una ubicación diferente. Puedes editar el mismo y guardarlo como un nuevo bloque reutilizable nuevamente.

También puedes ver una vista previa de un bloque reutilizable.

Todos los bloques reutilizables están disponibles en las opciones de “Bloque compartido”. Lo más importante es que puedes convertir uno en un bloque regular en cualquier momento.

.   Más usado
Bajo esta opción, verá los bloques más utilizados, para un acceso rápido. Alternativamente, puede usar el cuadro de búsqueda para encontrar un bloque por nombre.

.   Editar bloque
Para editar cualquier bloque, abre el menú desplegable haciendo clic en la esquina superior derecha del bloque. Verás diferentes opciones, incluyendo editar como HTML, duplicar y agregar a los bloques reutilizables.

 Insertar bloques
Usando esta característica, puedes insertar un nuevo bloque en cualquier momento. Cuando colocas el mouse sobre un bloque, verás un ícono más (+). Haz clic en él para insertar un nuevo bloque.

.   Slash Autocompletar

La función Slash Autocomplete está disponible en Gutenberg 1.1.0 y versiones posteriores. Es probable que ya estés familiarizado con la función similar en Slack. Se agregó para reducir la cantidad de apuntar y hacer clic para crear nuevos bloques.

Cuando abras un nuevo bloque, simplemente presiona /(tecla de barra) en tu teclado para seleccionar cualquiera de las opciones de autocompletar. Funciona solo en el bloque de párrafo predeterminado, pero podría convertirse en parte de otros tipos de bloques en el futuro.

.   Mover bloques

Gutenberg te permite mover cada bloque hacia arriba y hacia abajo. Puedes usar las flechas (en el lado izquierdo de cada bloque) para moverlas verticalmente.

Gutenberg Pros y contras

PROS
·        No se requieren habilidades técnicas para hacer un diseño personalizado para una publicación de blog o sitio web. Funciona como Medium , por lo que a las personas que buscan ese tipo de estilo y una experiencia de edición fácil de usar les encantará.

·        Te permite crear un diseño consistente y avanzado sin depender mucho del plugin TinyMCE .

·        Además, los bloques son un excelente concepto. Permiten a los no desarrolladores crear diseños complejos de manera intuitiva. Si tu eres nuevo en WordPress o no tienes conocimiento de ello en absoluto, todavía lo va a querer más😉 .

·        El editor de Gutenberg en sí mismo funciona bien en dispositivos móviles. A diferencia de su predecesor, te permite realizar ediciones rápidas sobre la marcha. De hecho, los desarrolladores expertos en dispositivos móviles pueden administrar y hacer más que unas pocas ediciones rápidas.

·        El aumento de espacio en la pantalla está demostrando ser una experiencia de usuario menos distraída para muchos desarrolladores.

·        Los desarrolladores expertos aún pueden crear bloques reutilizables personalizados utilizando HTML5. Por lo tanto, parece un ganar-ganar para los geeks y los usuarios no técnicos.

CONTRAS
·        Por el momento, no hay soporte de Markdown en la versión beta del editor de WordPress.

·        Todavía no soporta columnas de respuesta. Tendrás que hacer un código personalizado para que esta característica sea receptiva. Por lo tanto, usar esta función en el móvil no es una opción en este momento.

·        Las opciones de diseño de diseño son inadecuadas en este momento.

·        Los problemas de compatibilidad podrían ser una preocupación importante para algunos usuarios de WordPress.

·        Solo obtiene soporte parcial para las meta box, sin embargo, los desarrolladores están trabajando arduamente para ampliar el soporte de meta box.

·        La compatibilidad con versiones anteriores será una de las principales preocupaciones de la mayoría de los desarrolladores. Destruirá los complementos y temas actuales, especialmente aquellos que requieren integración con TinyMCE.

Comprender los problemas de compatibilidad
A pesar de su simplicidad y agilidad, Gutenberg podría no ser una taza de té para todos. La mayoría de los desarrolladores de WordPress pueden tener dificultades para trabajar, especialmente al principio. Tendrán que volver a entrenar sus reflejos para acostumbrarse a la nueva UX.

·        Debido al problema de compatibilidad con versiones anteriores, deberá actualizar muchos complementos y temas para asegurarse de que sean totalmente compatibles con el nuevo editor.

·        Por el momento, los bloques están más centrados en el contenido. Como resultado, Gutenberg carece de precisión y control sobre el diseño de sitios web personalizados.

·        Los códigos cortos son reemplazados por bloques de códigos cortos. Sin embargo, aún podrás agregar códigos cortos desde el bloque de widgets.

·        Las cajas de meta estarán disponibles con un nuevo nombre y una nueva interfaz de usuario. Es probable que las metacuadras en conflicto te conduzcan al editor clásico, en lugar de a Gutenberg, con una alerta. Si bien este sistema puede resultar útil, algunas cajas de metadatos no serán compatibles con Gutenberg.

·        Los tipos de publicación personalizados son compatibles y siguen siendo compatibles con versiones anteriores en Gutenberg.

·        No podrás desactivar Gutenberg una vez que estés integrado en el núcleo de WordPress. Sin embargo, puedes desactivarlo usando el complemento oficial en cualquier momento.

Gutenberg es el futuro
Contrariamente a la opinión popular, Gutenberg no es un reemplazo para el editor de texto actual. Es una nueva forma de construir sitios web. Me gusta considerarlo como Facebook para WordPress. Clic para tuitear

No necesitas ser un geek de la computadora para publicar cosas en Facebook o en cualquier otra plataforma de redes sociales.

Gutenberg es solo una forma de llevar esta simplicidad y flexibilidad a WordPress, para que las personas no necesiten un código para crear y publicar sitios web. Por eso creo que va a ser el futuro, no solo para WordPress, sino para la web en general.

La  verdad es que Gutenberg tiene un largo camino por recorrer. Las personas (incluido yo) han tenido problemas con su implementación, pero pronto tendremos temas, complementos y herramientas listos para Gutenberg que surgirán en todas partes. Sin embargo, tienes que empezar en alguna parte. Por lo tanto, podrías ser parte de este cambio desde el principio.

Si hay algo que no has entendido con tanta letra aquí te dejo un vídeo para verlo mejor:

Espero que esta guía te aclare un poco más que es el nuevo editor Gutenberg de Wordpress

 

 

 

Compartelo con tus amigos

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.