Cuando entro la actualización de WordPress 5.0; con ello también llego el nuevo editor de bloques para WordPress llamado «Gutenberg»; que vino a remplazar al editor de contenido clásico que hasta ese entonces se utilizaba en WordPress.
Aunque no fue remplazado del todo al menos no hasta el momento; Si adquiriste WordPress recientemente pues ya no te toco la versión del editor clásico de WordPress; automáticamente tu WordPress viene con la versión del editor de bloques gutenberg.
El editor de bloques Gutenberg; es idéntico al editor de texto que se utiliza en Microsoft Word. Si has utilizado ese editor anteriormente y lo quieres usar en WordPress simplemente te tienes que dirigir a la sección de plugins; haces clic en Añadir plugin y en la barra de buscar vas a introducir el nombre de editor clásico; lo instalas, lo activas y vas a poder utilizarlo; ahora si quieres aprender como utilizar el editor de bloques Gutenberg sigue leyendo que en este tutorial aprenderás a como utilizarlo.
Tabla de Contenidos
Diferencia entre el editor de bloques Gutenberg y el editor clásico
Para aquellos que no tienen idea de que como era el editor clásico de WordPress; vamos a mostrar la diferencia que hubo entre ambos hasta antes de la actualización 5.0 de WordPress.
Así es como se veía el editor clásico de WordPress:
Esta es la forma que tiene el nuevo editor de bloques de Gutenberg después de la actualización de WordPress 5.0
Como te puedes dar cuenta son dos editores de contenido completamente diferentes; el antiguo editor como lo mencione anteriormente es muy similar al editor de texto de Microsoft Word. El nuevo editor tiene un enfoque totalmente diferente; llamado bloques de ahí el nombre de editor de bloques.
Los bloques son elementos de contenido que vas agregando a tu pantalla de edición para crear diseños de contenido; cada elemento que agregas a una entrada o página es un bloque. Puedes agregar bloques para cada párrafo, imágenes, videos, galería, audios, listas y muchos más.
Puedes mover los elementos de contenido hacia arriba o hacia abajo; editarlos como bloques individuales y enriquecer visualmente tu contenido. Pero lo más importante es que el nuevo editor de bloques de WordPress es fácil de usar y aprender.
Los bloques vienen divididos por categorías para que te sea más fácil encontrar y agregar elementos a tu diseño simplemente desplazándote hacia abajo entre las categorías.
Esto brinda una gran ventaja a todos los principiantes de WordPress que recién están creando su primer blog o construyendo un sitio web.
Como usar el nuevo editor de WordPress Gutenberg
El editor de bloques se ha diseñado para ser intuitivo y flexible; si bien es diferente al antiguo editor de WordPress, aún puedes realizar todas las cosas que se podían hacer en el editor clásico.
Vamos a empezar cubriendo como se hacían las cosas básicas en el editor clásico y como se hacen en el editor de bloques.
Creación de una entrada o página con el editor de bloques
Para crear una entrada o página; simplemente nos dirigimos a nuestro panel de WordPress hacemos clic en Entradas>Añadir nueva; si vas a crear una página te vas a la opción de Páginas>Añadir nueva.
Con esta acción se va a abrir el editor de bloques.
Como agregar un bloque en Gutenberg
El primer bloque de cada entrada o páginas que vayas a agregar va a ser tu título.
Después de eso; vas a utilizar el mouse para moverte hacia abajo y empezar a escribir en lo que sería tu segundo bloque.
Como puedes ver en la imagen; el segundo bloque es un párrafo lo que te permite escribir de inmediato. Sin embargo; si lo que necesitas es agregar un elemento diferente puedes hacer clic en el símbolo de + que tienes en la parte superior izquierda y se va a abrir un menú con todos los elementos que tienes disponibles para usar.
La otra opción que tienes es hacer clic en el párrafo y del lado derecho te va a aparecer el mismo símbolo de + para que puedas elegir el elemento que quieres utilizar; por defecto te muestra los elementos que más utilizas; sin embargo si quieres ver todos los elementos solo haces clic en la opción de ver todos y se va a abrir el menú con todos los elementos que tienes disponibles.
Si no quieres usar el mouse para desplazarte hacia abajo y buscar el elemento que necesitas; puedes utilizar la barra de buscar que aparece en la parte superior del menú y vas a escribir el nombre del elemento que estas buscando para que te aparezca rápidamente.
Trabajar con bloques en el nuevo editor
Cada bloque que insertas viene con su propia barra de herramientas que aparece en la parte superior del bloque. Los botones de la barra de herramientas cambiarán según el bloque en el que estés trabajando.
En este ejemplo estoy trabajando en un bloque de texto que muestra botones de formato básico como: alineación de texto, negritas, cursiva, insertar enlace y otras cuantas más opciones.
Además de la barra de herramientas; cada bloque tiene su propia configuración de bloque que se encuentra en la parte derecha de la pantalla de edición.
Otra de las opciones que tienes; es que puedes mover tus bloques hacia arriba o hacia abajo simplemente arrastrando y soltando el bloque hacia la posición deseada o utilizando las opciones de las flechas para desplazar el bloque a la posición deseada.
Guardar y reutilizar bloques en Gutenberg
Una de las mejores cosas que tiene Gutenberg; es que te permite guardar y reutilizar los bloques individualmente. Esto te va a ser muy útil; si frecuentemente necesitas agregar fragmentos de contenido específicos a tus entradas.
Simplemente haces clic en el botón de menú ubicado en la esquina derecha de la barra de herramientas de cada bloque. Aquí vas a seleccionar la opción que dice Añadir a bloques reutilizables.
Una vez que añades el bloque se te va a pedir que le des un nombre a ese bloque; después simplemente haces clic en publicar y después en guardar para que puedas utilizar ese bloque cada vez que lo necesites. Esta acción la vas a realizar en el lado derecho de las configuraciones en la pantalla de edición.
Tu bloque reutilizable se va a guardar en el menú donde se encuentran todos los elementos disponibles que tienes para diseñar tu contenido; para utilizarlo simplemente haces clic en la opción de Reutilizable y ahí vas a encontrar todos los reutilizables que vas guardando. También puedes encontrarlo escribiendo el nombre que le diste al bloque en la barra de buscar.
Si tienes varios bloques reutilizables y quieres agregar alguno; puedes pasar el mouse por encima del nombre del bloque y esto te dará una vista previa del bloque reutilizable para que puedas localizarlo fácilmente. Ahora para insertarlo simplemente haces clic sobre el bloque.
Dentro de los bloques reutilizables vas a encontrar la opción de Gestionar todos los bloques reutilizables; esta opción te llevará al administrador de bloques; desde aquí puedes editar o eliminar cualquiera de tus bloques reutilizables; al igual que también puedes exportarlos para utilizarlos en cualquier otro sitio web de WordPress.
Opciones de entradas y administración del editor de bloques Gutenberg
Cada entrada de WordPress contiene muchos metadatos. Esto incluye información como la fecha de publicación, categorías, etiquetas, imágenes destacas y más.
Estas opciones las vas a encontrar ubicadas ordenadamente en la columna de la derecha de la pantalla del editor.
Opciones de plugins en Gutenberg
Los plugins de WordPress pueden aprovechar la API del editor de bloques para integrar sus propias configuraciones dentro de la pantalla de edición; algunos plugins populares ya vienen disponibles como bloques. Por ejemplo el plugin WP Forms; este plugin te permite crear formularios de suscripción en tu contenido utilizando un bloque de widgets.
Del lado derecho de tu pantalla de edición y al final de la entrada vas a encontrar la opción que te permite editar la configuración de SEO para aumentar la visibilidad en los motores de búsqueda con el plugin de Yoast SEO.
Agrega bloques comunes al nuevo editor Gutenberg
Básicamente; con el nuevo editor puedes hacer todo lo que hacías con el editor clásico; sin embargo con el editor de bloques estarás haciendo las cosas de manera más rápida y mejor que antes.
1. Agrega una imagen en el nuevo editor de WordPress
Hay un bloque de imágenes listo para utilizar en el nuevo editor de WordPress; simplemente agregas el bloque y luego carga un archivo de imagen o selecciónalo de la biblioteca de medios.
También puedes arrastrar y soltar las imágenes desde tu computadora; y el editor creará automáticamente un bloque de imágenes para ello.
Una vez que has agregado una imagen; podrás ver la configuración del bloque donde puedes agregar metadatos para la imagen como texto alternativo, tamaño y agregar un enlace en la imagen.
2. Agrega un enlace en el nuevo editor de bloques
El editor de bloques viene con varios bloques para agregar texto; el más utilizado es el bloque de párrafo que viene con un botón de inserción de enlace en la barra de herramientas.
Solo tienes que seleccionar la parte donde quieres insertar el enlace y listo; los demás bloques de texto de uso común también incluyen un botón de enlace en la barra de herramientas.
3. Agrega una galería de imágenes en Gutenberg
El bloque de galería funciona como el bloque de imágenes; lo agregas y luego cargas o seleccionas un archivo de imagen.
4. Agregar códigos cortos en entradas de WordPress utilizando Gutenberg
Todos tus códigos cortos van a funcionar como lo hicieron en el editor clásico; simplemente puedes agregarlos a un bloque de párrafo o puedes usar el bloque de código abreviado.
Explorando los bloques de contenido nuevos en Gutenberg
El editor de Gutenberg promete resolver algunos problemas de usabilidad de larga data en WordPress mediante la introducción de algunos bloques nuevos.
1. Agrega una imagen junto a un texto en WordPress
Con el editor anterior; muchos de los usuarios no podían colocar una imagen junto al texto; ahora puedes hacerlo de forma fácil simplemente insertando el bloque medios y texto.
Este bloque simple viene con dos bloques colocados uno al lado del otro; lo que te permite agregar fácilmente una imagen y texto al lado.
2. Agregar un botón en entradas y páginas de WordPress
Agregar un botón en las entradas o página de tu blog fue otra molestia en el editor clásico; Gutenberg viene con un bloque de botones que te permite agregar rápidamente un botón a cualquier entrada o página.
Puedes agregar un enlace para un botón, cambiar colores y elegir entre 3 estilos de botones diferentes.
3. Agrega imágenes de portada en entradas del blog y páginas de destino
Otra característica interesante que puedes probar es el bloque ‘portada’; que te permite agregar imágenes de portada a tus entradas y páginas.
Una imagen de portada es una imagen más amplia que a menudo se usa como portada de una nueva sección en una página o el comienzo de una historia. Esto te va a permitir crear diseños atractivos.
Simplemente agregas un bloque de portada y luego cargas la imagen que deseas usar; puedes elegir un color de superposición para la portada o convertirlo en una imagen de fondo fija para crear un efecto de paralaje cuando los visitantes se desplazan hacia abajo en la página.
4. Creación de contenido de varias columnas
El editor de bloques te permite agregar un bloque de columnas; que básicamente agrega dos columnas o más de bloques de párrafo.
Este bloque de columnas es bastante flexible; puedes agregar hasta 6 columnas en una fila e incluso usar otros bloques dentro de cada columna.
Consejos adicionales para usar Gutenberg como un profesional
Para los usuarios más avanzados; aquí hay algunos consejos adicionales que te ayudaran a trabajar aún más rápido con el nuevo editor de WordPress.
1. Mueve la barra de herramientas del bloque a la parte superior
Como te puedes dar cuenta en las capturas de pantalla; hay una barra de herramientas que aparece en la parte superior de cada bloque; puedes mover esta barra de herramientas a la parte superior del editor.
Solo tienes que hacer clic en el botón de los tres puntos en la esquina superior derecha de la pantalla y luego selecciona la opción barra de herramientas superior.
2. Usa los atajos del teclado
Gutenberg viene con varios atajos útiles que te permitirán que el flujo de tu trabajo sea aún mejor; el primero que debes de empezar a usar es /. Simplemente ingresa el / y Gutenberg te mostrará los bloques que has utilizado recientemente.
Para obtener más atajos; haz clic en los tres puntos en la parte superior derecha de tu pantalla y selecciona la opción de ‘Atajos de teclado’.
Aparecerá una ventana emergente con la lista de todos los atajos que puedes utilizar. La lista tendrá diferentes accesos directos para usuarios de Windows y Mac.
3. Arrastra y suelta, medios para crear automáticamente bloques de medios
Gutenberg te permite simplemente arrastrar y soltar archivos en cualquier lugar de la pantalla y automáticamente creará un bloque para ti.
Puedes soltar una imagen o archivo de video y se creará un bloque para ti; también puedes soltar varios archivos de imagen para crear un bloque de galería.
4. Agrega YouTube, Twitter, Facebook y otras incrustaciones
Hay un bloque para todos los tipos de inserción compatibles; incluidos YouTube, Twitter, Facebook y más. Sin embargo; puedes simplemente copiar y pegar la URL de inserción en cualquier punto y automáticamente se creará un bloque para ti.
Por ejemplo; si agregas la URL de un video de YouTube automáticamente crearas un bloque de inserción de YouTube y se mostrara el video.
Agregar más bloques al editor de bloques Gutenberg en WordPress
Con el nuevo editor de bloques de WordPress; puedes integrar plugins que ofrecen paquetes de bloques para el nuevo editor. Aquí tienes algunos por mencionar:
Algunas preguntas sobre el nuevo editor de bloque
1. ¿Qué sucede con mis entradas y páginas más antiguas? ¿Puedo editarlas todavía?
Tus entradas y páginas antiguas están completamente seguras y no se ven afectadas por Gutenberg; aún puedes editarlas y Gutenberg las abrirá automáticamente en un bloque que contiene el editor clásico.
Puedes convertir tus antiguas entradas en bloques y usar el nuevo editor de bloques o puedes editarlas dentro del antiguo editor.
2. ¿Puedo seguir usando el antiguo editor?
Aún puedes seguir utilizando el editor anterior; simplemente instala y activa el editor clásico.
Tras la activación se desactivará el editor de bloques y vas a poder seguir utilizando el editor clásico.
Ten en mente que el editor clásico será compatible hasta el 2022.
