Tutorial completo: editor Gutenberg WordPress

  • 3
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Tutorial completo del nuevo editor Gutenberg para wordpress 5.0

Dependiendo de cuán conectado esté usted a la comunidad de WordPress, puede o no estar familiarizado con el próximo editor de WordPress Gutenberg. El editor de Gutenberg ha provocado todo tipo de discusiones en ambos lados del pasillo. Pero esta publicación no intenta influir en ese debate …

En cambio, este post reconoce la inevitabilidad de Gutenberg y tiene como objetivo proporcionarle un recurso integral sobre cómo usar el editor de WordPress Gutenberg en su sitio para que pueda continuar generando contenido increíble cuando se haga público.Si esta es la primera vez que escuchas sobre el editor de WordPress Gutenberg o si ya estás familiarizado con él, esta publicación te ayudará a aprender cómo puedes utilizar el nuevo editor para crear diseños para tu contenido de WordPress .

¿Qué es Gutenberg?

En pocas palabras, Gutenberg es el próximo reemplazo del editor WordPress TinyMCE ( el actual editor de texto WYSIWYG donde usted escribe sus publicaciones y páginas).

Como un repaso rápido, así es como se ve el editor WordPress TinyMCE:original wordpress tinymce editor

Y así es como se ven las cosas en el nuevo editor de WordPress Gutenberg:nuevo editor de wordpress gutenberg

Sin embargo, es más que una actualización estética. Gutenberg va a cambiar completamente la experiencia de edición al pasar a un enfoque basado en bloques para el contenido (¡ más sobre qué bloques exactamente en un segundo! ).Si bien el enfoque actual está en la creación de contenido, el objetivo final es lograr que Gutenberg ” vaya más allá de la publicación en plantillas de página y, en última instancia, personalización completa del sitio “.

Eso significa que con el tiempo podrá construir todo su sitio usando Gutenberg, incluidas páginas de inicioy otro contenido importante.

¿Cuándo será Gutenberg una parte de WordPress?

Gutenberg no se convertirá oficialmente en parte del núcleo de WordPress hasta la próxima versión principal: WordPress 5.0.

¿Cuándo saldrá WordPress 5.0? Bueno, todavía no sabemos la fecha exacta, pero está programada para … en algún momento de 2018 .

Eso es bastante vago, pero también significa que el equipo central, con suerte, va a esperar para hacer las cosas bien antes de sacar a Gutenberg como el editor predeterminado de WordPress.

Habiendo dicho eso, todavía puedes instalar y usar el editor de WordPress Gutenberg ahora mismo a través de un complemento .Debido a que Gutenberg todavía está en beta, no recomendamos que hagas esto en un sitio en vivo, sin embargo.

Cómo funciona el editor WordPress Gutenberg

Hace un segundo, te dije que Gutenberg es un editor basado en bloques. Fue un poco grosero dejarte colgando porque, si eres como la mayoría de las personas, es posible que no sepas lo que eso significa.

Así que aquí está la edición basada en bloques 101:

Esencialmente, Gutenberg reemplaza el campo de edición único del actual editor de WordPress TinyMCE con muchos “bloques” individuales.

Estos bloques le permiten construir diseños más complejos que los permitidos en el editor actual de WordPress.

Entonces, ¿qué es un bloque?

Bueno, un bloqueo puede ser casi cualquier cosa. Por ejemplo, puedes tener bloques para:

  • Texto regular
  • Imágenes
  • Incrustaciones de video
  • Botones
  • Widgets ( sí, esos mismos widgets que usas en tu barra lateral)
  • Mesas
  • Etc.

Y lo que está claro es que los desarrolladores podrán crear sus propios bloques de terceros a los que se puede acceder a través de complementos para una mayor flexibilidad.

Cada bloque es su propia entidad que puede manipular de forma individual. Por ejemplo, aquí hay una publicación rápida de Gutenberg que contiene dos bloques:

  • Texto
  • Imagen

Mira con qué facilidad puedo reorganizar esos dos bloques simplemente haciendo clic en un botón:

Y como cada bloque está “separado”, también puede agregar elementos como fondos personalizados solo para bloques específicos .

En general, le da más flexibilidad y control en profundidad.

Entonces Gutenberg es un creador de páginas, ¿verdad?

Ehh, no del todo. Al menos no en su forma actual.

Gutenberg va a hacer mucho más fácil el estilo de contenido regular como publicaciones de blog o páginas estándar, pero no es un sustituto 1: 1 para los creadores de la página en su forma actual.

Justo en un nivel superficial, Gutenberg ya carece de dos cosas esenciales:

  • Columnas flexibles ( ahora hay un bloque de columna experimental, pero es bastante básico )
  • Arrastra y suelta ( aunque ahora puedes reorganizar el orden de bloques con arrastrar y soltar)

Con eso dicho, Gutenberg está preparado para eliminar la necesidad de constructores de páginas para la mayoría del contenido “estándar”, y también crea un único método unificado para crear diseños de post más complejos en WordPress.

Pero cuando se trata de construir páginas más complejas , como una página de aterrizaje, es probable que aprecie la mayor flexibilidad que ofrecen los creadores de páginas (al menos durante el lanzamiento inicial de Gutenberg ).

Por ejemplo, en nuestra comparación entre Elementor vs Divi Builder vs Beaver Builder , puede ver cómo los mejores constructores de páginas ofrecen cosas como:

  • Edición sin esfuerzo de arrastrar y soltar
  • Soporte verdadero de múltiples columnas donde puedes crear cualquier cantidad de columnas para arrastrar elementos individuales a
  • Toneladas de plantillas prefabricadas
  • Opciones de diseño avanzadas, con espacios para márgenes personalizados / relleno y mucho más
  • Configuraciones de diseño receptivo

Gutenberg podría llegar allí algún día. Pero al menos en su versión inicial, los creadores de páginas aún le darán la flexibilidad de diseñar páginas independientes más complicadas.

Cómo instalar Gutenberg en su sitio

¿Listo para ver cómo funciona Gutenberg?

Como dije, Gutenberg reemplazará el editor predeterminado de WordPress en WordPress 5.0. Pero por ahora, tu única opción para jugar con él es instalar el plugin de Gutenberg.

Sin embargo, recuerde: Gutenberg aún está en versión beta, por lo que definitivamente no recomendamos que lo instale en un sitio web en vivo .

Así es cómo instalar el plugin Gutenberg … sin embargo, es un proceso bastante estándar:

  • Ir a complementos → Agregar nuevo
  • Búsqueda de “Gutenberg”
  • Haga clic en Instalar ahora
  • Espere a que el botón Instalar ahora cambie a Activar
  • Haga clic en Activar

Una vez que active el complemento, su sitio utilizará automáticamente el editor de Gutenberg cuando vaya a Publicaciones → Agregar nuevo :

editor gutenberg

Use un tema de Gutenberg para obtener los mejores resultados

Si bien Gutenberg está diseñado para funcionar con cualquier tema de WordPress (al igual que el editor de WordPress), elegir un tema que ofrezca específicamente compatibilidad con Gutenberg ofrecerá algunos beneficios muy reales.

Primero, los temas pueden ofrecer un estilo incorporado para los bloques de Gutenberg. Mejor aún, los temas pueden cargar estos estilos dentro del editor . Eso significa que puedes ver el estilo real de tus bloques a medida que construyes tu contenido para una mejor experiencia WYSIWYG ( mira una versión básica de esto en acción aquí )

Los temas de Gutenberg también podrán ofrecer plantillas prefabricadas compuestas de varios bloques para que todo lo que necesite hacer sea conectar su contenido a los bloques existentes y presionar Publicar .

Debido a que Gutenberg todavía está en beta, actualmente no hay muchos temas que ofrezcan soporte. Si está ansioso por probarlo, puede instalar este tema de Tammie Lister en su sitio de prueba. De lo contrario, verifique que actualizaremos esta sección cuando los temas comiencen a ofrecer compatibilidad con Gutenberg.

Construyendo su primer diseño con el editor de WordPress Gutenberg

Ok, ahora que tienes instalado Gutenberg, profundicemos en la esencia de este artículo. A continuación, le mostraré cómo usar realmente el nuevo editor de WordPress Gutenberg para crear un diseño de página completo.

De esa forma, estarás listo para comenzar a ejecutar cuando se termine WordPress 5.0.

Un recorrido rápido por la interfaz de Gutenberg

Antes de comenzar a agregar algunos bloques, repasemos un desglose rápido de los elementos de la interfaz principal de Gutenberg:

Interfaz del editor wordpress gutenberg explicada

  • (A) – le permite agregar nuevos bloques.
  • (B) – botones de deshacer / rehacer
  • (C) : le da acceso a la configuración del documento, que abarca cosas como categorías y etiquetas, imágenes destacadas, etc. Esto es similar a la barra lateral actual en el editor de WordPress
  • (D) : cuando tiene seleccionado un bloque individual, le da acceso a la configuración específica de ese bloque
  • (E) : te permite acceder a una vista previa en vivo de tu publicación o publicar / actualizar tu publicación
  • (F) – una vez que agregue algunos bloques, aquí es donde realmente trabajará con el contenido de su publicación

Agregar bloques a Gutenberg

Como mencioné en la introducción, usará “bloques” separados para construir sus diseños con Gutenberg.

Para agregar un nuevo bloque, todo lo que necesita hacer es hacer clic en el ícono + Más y seleccionar el tipo de contenido que desea agregar:
En el ejemplo anterior, le mostré cómo agregar un bloque de párrafo básico. Pero Gutenberg en realidad incluye una tonelada de bloques diferentes, divididos en diferentes secciones:
tipos de bloques
Las secciones Sugerido y Compartido son exclusivas para ti y te ayudan a acceder rápidamente a los bloques que son relevantes para tu sitio. Sugerido está basado en los elementos que usted usa comúnmente, mientras que Compartido le permite guardar bloques para reutilizar en su sitio. Sin embargo, para acceder a todos los bloques, utilizará las pestañas Bloques e Inserciones .En la pestaña Bloques , tienes:

  • Bloques comunes : contiene bloques de construcción básicos, como imágenes, párrafos ( texto normal ), encabezados, citas, etc.
  • Formateo : le permite agregar más contenido formateado, como comillas de extracción, tablas o el clásico editor de texto de WordPress
  • Bloques de diseño : le permiten dividir texto en dos columnas, incluir botones, separadores o la etiqueta “Más”
  • Widgets : le permiten agregar códigos cortos, últimas publicaciones o categorías. Incluso es posible mostrar los widgets de la barra lateral directamente en Gutenberg.

En la pestaña Inserciones , puede incrustar contenido de toneladas de fuentes externas, incluida, en parte:

  • Youtube
  • Facebook
  • Gorjeo
  • Instagram

Construyendo un diseño básico con Gutenberg

Comencemos simple. Digamos que solo desea crear un diseño básico de publicación de blog que incluya:

  • Texto regular
  • Una imagen
  • Una cita de extracción
  • Un video de YouTube incrustado

Así es como lo harías con Gutenberg:

Primero, escribirías toda tu publicación en el editor. O, si eres como yo y prefieres escribir en Google Docs , puedes pegarlo todo y luego Gutenberg lo convertirá automáticamente en bloques.

Agregar los bloques que no son de texto

Ahora que su contenido está dividido en bloques, puede colocar el cursor sobre el lugar donde desea insertar su primera imagen y hacer clic en el icono más :

Esto le permitirá insertar un bloque de imágenes, desde el cual puede cargar o seleccionar imágenes de manera similar al editor actual de WordPress:
insertar imagen
Una vez que seleccione su imagen, debería verla allí mismo en el diseño de su página:
imagen en línea
A continuación, desplace el cursor sobre el lugar donde desea insertar la comilla de extracción e inserte otro bloque. Puede buscar “pull quote” o ir a la pestaña Blocks :
Luego, verás tu nuevo bloque de comillas de extracción. Para crear su presupuesto, todo lo que necesita hacer es hacer clic en el bloque y escribir:
Para insertar un video de YouTube, puede agregar un nuevo bloque de YouTube desde la pestaña Inserciones . Para insertar un video, todo lo que necesita hacer es ingresar la URL y hacer clic en Insertar :

Opcional: crear diferentes columnas

¿Quieres ser aún más creativo? Gutenberg ahora incluye una función de columnas experimentales que le permite crear rápidamente varias columnas. Todo lo que necesita hacer es agregar el bloque Columnas (Experimental) . Luego, puedes insertar otros bloques dentro de él :

Una vez que haya terminado, todo lo que debe hacer es hacer clic en el botón Publicar :
publicar publicación
Y tendrá su publicación de blog formateada en el front-end.

Cómo personalizar bloques individuales de Gutenberg

Debido a que el editor de WordPress Gutenberg incluye una tonelada de bloques diferentes, no puedo mostrarle cómo usar cada bloque individual.

Pero puedo darte un marco básico que se aplica a todos los bloques.

Básicamente, usted controla el contenido en el cuerpo real del editor:
Para el estilo y la alineación de texto básico, puede usar la barra de menú que aparece al pasar el mouse sobre un bloque:
Y para un estilo más avanzado, por lo general, le dará estilo al bloque en la pestaña Configuración de bloques .Para acceder a esa pestaña, seleccione el bloque que desea editar y vaya a la pestaña Bloquear :

Cómo reorganizar los bloques individuales de Gutenberg

Para reorganizar bloques, tienes dos opciones. Puedes usar la flecha hacia arriba o hacia abajocuando pasas el mouse sobre un bloque para mover el bloque en la dirección respectiva:

reordenamiento de bloques
O bien, puede aprovechar la nueva funcionalidad de arrastrar y soltar colocando el cursor sobre un bloque y arrastrándolo:

Poniendolo todo junto

Una vez que retome el flujo de cómo funcionan las cosas con Gutenberg, es bastante sencillo e intuitivo.

Al principio, puede experimentar algunos dolores de crecimiento y luchar para realizar acciones básicas que ha dado por sentado.

Pero una vez que te familiarices con las cosas, deberías navegar a través de los diseños de construcción. Y con los bloques más avanzados que ofrece Gutenberg, tendrá más flexibilidad que el Editor de TinyMCE WordPress.

Algunos trucos aseados, pero más avanzados, de Gutenberg

A medida que se familiarice con el editor de WordPress Gutenberg, puede encontrar que algunos de estos trucos ahorran tiempo.

Crear rápidamente un nuevo bloque con tipeo

Arriba, te mostré cómo crear bloques usando el botón Insertar. Pero para ahorrar tiempo, puedes crear bloques simplemente escribiendo esta sintaxis:

/BLOCK-NAME

Aparecerá un cuadro de sugerencia automática para ayudarlo a encontrar el bloque relevante.

Por ejemplo, a continuación se explica cómo crear un bloque de imágenes con solo su teclado:

Muy conveniente y un gran ahorro de tiempo!

Edite el código fuente directamente

En cualquier punto, puede editar el código fuente de su publicación completa haciendo clic en los tres puntos en la esquina superior derecha y seleccionando Editor de Código :

Gutenberg es el futuro

Mientras que Gutenberg tiene sus detractores, todavía viene en WordPress 5.0.

Para la mayoría de los usuarios casuales, después de algunos dolores de crecimiento, traerá una experiencia de creación de contenido más flexible.

Los que no sean desarrolladores podrán diseñar intuitivamente diseños más complejos con elementos adicionales como botones , incrustaciones de contenido y mucho más. Y eso, con suerte , ayudará a WordPress a seguir creciendo.

Hasta que se envíe WordPress 5.0, puede jugar con el editor de WordPress Gutenberg instalando el complemento. Y si desea mantenerse al tanto de las últimas actualizaciones de Gutenberg, puede seguir junto con la etiqueta #gutenberg en Make WordPress Core.

Fuente: Codeinwp

agosto 13, 2018