Con WordPress 5.0, WordPress está a punto de sufrir uno de los mayores cambios en mucho tiempo.
¿Nueva caracteristica? Nuevo editor de contenido predeterminado, llamado Gutenberg.t
El editor de bloques de Gutenberg reemplazará por completo antes el editor TinyMCE predeterminado que ha estado usando durante años. Como tal, la forma en que crea contenido en su sitio de WordPress cambiará por completo.
Para que esta transición sea lo menos dolorosa posible, hemos creado este tutorial de WordPress Gutenberg para que pueda comenzar a trabajar inmediatamente después de actualizar su sitio a WordPress 5.0.
¿Cuál es la diferencia entre el editor de bloques de WordPress Gutenberg?
Ok, si estaba un poco confundido acerca de lo que estoy hablando, así es como se ve el Editor TinyMCE (debe ser bastante familiar para usted!):
Así es como se ve el nuevo editor de bloques de Gutenberg:
Entonces… ¿cuál es la diferencia?
Bueno, la palabra más grande es – «bloquear».
En lugar de usar un campo para todo el contenido, como el editor TinyMCE, cada «cosa» en Gutenberg es un bloque separado.
Asi que:
- Cada párrafo es un bloque separado.
- La imagen es un bloque separado.
- El precio es un bloque separado
- El video incrustado es un bloque separado
- …¡Tienes una idea! Todo lo que puedes usar es un bloque separado
Siguiente pregunta: ¿por qué los bloques son beneficiosos? ¿Por qué cambiar el estado de cosas?
Bueno, el editor de bloques de Gutenberg hace que sea mucho más fácil crear diseños más complejos y usar tipos de contenido más interesantes. Además, también es mucho más visual, ya que puedes ver exactamente cómo se verá cada bloque.
Por ejemplo, suponga que desea agregar un botón a su publicación.
En el editor TinyMCE tienes que usar Texto pestaña para agregar una clase CSS o usar el código abreviado de un complemento de botón. En el caso de Gutenberg, solo agregue Botón Unidad y puedes ver el botón en el editor:
Otra gran ventaja de Gutenberg y los bloques se relaciona con los atajos que mencioné anteriormente.
Los accesos directos no son una forma muy intuitiva o visual de agregar contenido. Con Gutenberg, los desarrolladores de complementos pueden crear sus propios bloques en lugar de depender de códigos abreviados, lo que hace que agregar contenido de complemento sea mucho más fácil.
Tutorial de WordPress Gutenberg: Uso del nuevo editor
Ahora que tiene los conceptos básicos sobre el nuevo editor, vayamos a la parte correcta de esta guía práctica.
Voy a dividir este tutorial del editor de Gutenberg en dos partes.
Primero, le mostraré cómo usar Gutenberg para hacer el mismo tipo de cosas que hace ya se puede hacer con el editor TinyMCE. El objetivo de esta primera sección es permitirle crear el mismo tipo de contenido que ya está creando sin interrupción.
Luego profundizaré un poco más y le mostraré algunos consejos de productividad avanzada, así como algunos de estos Nuevo cosas que Gutenberg te permitirá hacer.
¿Cómo crear una publicación de blog básica o un sitio web con Gutenberg?
Agregar texto sin formato a Gutenberg es simple. Como antes, haces clic y escribes. La única diferencia es que cada vez que presione Entrar, Gutenberg ahora creará un nuevo bloque de párrafo.
Para dar formato al texto (negrita, alineación, etc.), verá una barra de herramientas flotante que aparece cuando deja de escribir:
A muchas personas no les gusta este enfoque de «barra de herramientas flotante». Entonces, si prefiere un enfoque permanente a la barra de herramientas del editor TinyMCE, puede usar la lista desplegable en la esquina superior derecha para «adjuntar» la barra de herramientas a la parte superior del editor. Solo elige una opción para Barra de herramientas superior:
Cómo insertar un nuevo bloque
Siempre que escriba, puede crear automáticamente nuevos bloques escribiendo.
Para todo lo demás (imágenes, videos, encabezados, etc.), deberá agregar un nuevo bloque.
Hay varias formas de agregar nuevos bloques:
- Para agregar un nuevo bloque en la parte inferior del editorpuede hacer clic en el ícono más en la esquina superior izquierda del editor.
- Para agregar un nuevo bloque entre bloques existentespuede pasar el mouse sobre el lugar donde desea insertar el bloque y hacer clic en el ícono más allí.
Al hacer clic en uno de los más Aparecerá una ventana emergente con una lista de todos los bloques disponibles.
En la parte superior de la ventana emergente, verá una lista de los bloques que más utiliza:
Pero también puedes:
- Use el cuadro de búsqueda para buscar un bloque por nombre
- Desplácese hacia abajo para ver las pestañas de acordeón para todas las categorías de bloques disponibles
Dejanos considerar algunos ejemplos …
Si quieres insertar una imagen…
Puedes añadir Imagen Unidad. Luego puede usar las opciones para elegir desde dónde desea descargar la imagen:
Si desea incrustar un video de YouTube…
Puedes añadir YouTube Unidad. Luego simplemente pegue la URL en el video y verá una vista previa en vivo:
Si desea insertar un encabezado (h2, h3, etc.)
Puedes añadir Bóveda bloque y seleccione un nivel de encabezado de la barra de herramientas:
O bien, puede seleccionar un bloque de párrafo existente y usar la barra de herramientas para «convertirlo» en un bloque de encabezado (o algún otro tipo de bloque, como una cita):
¿Cómo configurar un bloque?
Utilizará la barra de herramientas para cosas básicas como negrita, cursiva, alineación, etc.
Sin embargo, para otras configuraciones de bloqueo, usará Unidad pestaña de la barra lateral a la derecha.
Por ejemplo, si agrega Botón block, puedes usar la barra lateral a la derecha para cambiar sus colores:
Cómo reorganizar el contenido
En el editor de TinyMCE, tenías que cortar y pegar si querías reorganizar el contenido.
Con Gutenberg, tienes dos opciones:
- Flechas arriba/abajo que mueven el bloque hacia arriba o hacia abajo un lugar
- Una función de arrastrar y soltar que te permite arrastrar el bloque donde quieras
Para habilitar estos controles, desplace el cursor sobre el bloque que desea mover.
Si desea utilizar la función de arrastrar y soltar, debe pasar el mouse sobre seis puntos entre las flechas. Entonces podrás arrastrar y soltar así:
Cómo configurar la información básica sobre una entrada (categorías, caracol, etc.)
Los pasos anteriores deberían brindarle todo lo que necesita para crear publicaciones y páginas básicas.
Pero, ¿qué pasa con la información detrás de escena como:
- error de URL
- Categorías
- Etiquetas
- Etc.
Para configurar toda esta información, puede utilizar Documento pestaña de la barra lateral, que funciona de manera muy parecida a la barra lateral en el Editor TinyMCE:
¿Qué pasa con los complementos como Yoast SEO?
Probablemente tenga otros complementos que necesitará configurar post por post. Los ejemplos comunes son complementos de SEO, complementos de redes sociales, etc.
¿Entonces, cómo funciona?
Bueno, algunos complementos, como Yoast SEO, ya tienen incorporado el soporte de Gutenberg. Para acceder a la configuración de Yoast SEO u otros complementos habilitados para Yoast SEO, puede hacer clic en el icono en la esquina superior derecha. Luego podrá configurar el complemento en la barra lateral:
Para otros complementos, aún podrá usar los «metaboxes» que aparecen debajo del editor de texto como antes:
Cinco consejos más avanzados para usar el editor de bloques de Gutenberg
El tutorial anterior del editor Gutenberg lo ayudará a continuar creando el mismo tipo de contenido que ya creó con el editor TinyMCE.
Ahora analicemos algunos consejos más avanzados sobre cómo sacar más provecho del editor de Gutenberg.
1. Aprende atajos de teclado para una mejor productividad
Dado que todo es un bloque separado en Gutenberg, hay muchos más «clics del mouse» para hacer las cosas. Esto significa un funcionamiento más lento, especialmente al principio.
La mejor manera de eliminar este problema es conocer los atajos de teclado del editor Gutenberg. Le permitirán agregar o eliminar bloques rápidamente según sea necesario.
Para abrir una lista completa de accesos directos, use Mayús + Alt + H Atajo:
2. Inserción rápida de bloques con una barra
En lugar de usar la ventana emergente de inserción de bloque cada vez que desee agregar un bloque, un método más rápido es simplemente escribir «/» en un bloque vacío y buscar el bloque por nombre.
Aquí hay un ejemplo:
3. Arrastra imágenes desde el escritorio a Gutenberg
Para acelerar la adición de imágenes, puede arrastrarlas directamente desde el escritorio a un lugar específico en el editor. Gutenberg los subirá automáticamente a la Biblioteca multimedia:
4. Use un bloque de columnas para diseños más complicados
Si desea crear diseños más complejos, Gutenberg lo hace columnas Unidad. Después de agregar el bloque de columnas, puede agregar otros bloques en el interior:
Para una mayor flexibilidad en términos de diseños, puede instalar Complemento de bloque de Kadence. Hablando sobre…
5. Aproveche los complementos de bloqueo de terceros
Una de las mejores cosas de Gutenberg es que puede usar complementos de terceros para agregar nuevos bloques. Muchos desarrolladores están trabajando en la creación de nuevos bloques de diseño y contenido que pueden ayudar a ampliar la funcionalidad de Gutenberg. Algunas cosas buenas para empezar son:
los Complemento de la nube de Gutenberg también es un proyecto interesante que te permite instalar bloques específicos de diferentes desarrolladores.
Además, algunos complementos que ya usa agregarán bloques para reemplazar códigos cortos. Por ejemplo, si tiene una tienda WooCommerce, podrá insertar productos WooCommerce en su contenido con un nuevo bloque.
¿Qué sucede con su contenido anterior después de actualizar a WordPress 5.0?
Si ya tiene un sitio de WordPress, es natural preguntarse qué pasará con todo el contenido que ya ha creado con TinyMCE Editor.
No se preocupe, el equipo central no ha olvidado su contenido anterior.
Así es como funcionará.
Supongamos que tiene una publicación creada con el Editor TinyMCE que se ve así:
Cuando cambie a WordPress 5.0 y al editor de bloques de Gutenberg, WordPress pondrá todo su contenido antiguo en uno Clásico Unidad. Classic Block es básicamente un editor de TinyMCE… justo en la interfaz de Gutenberg.
Entonces, en lugar de que cada elemento sea un bloque separado, todo está solo dentro de ese bloque clásico. Se parece a esto:
Si desea editar el contenido, puede editarlo en el bloque Clásico al igual que en el Editor TinyMCE:
También puedes elegir una opción: Convertir a bloques. Cuando seleccione esta opción, Gutenberg dividirá todo su contenido antiguo en bloques separados y podrá trabajar con él como si hubiera creado una publicación desde cero con Gutenberg.
¿Tienes que usar el editor de Gutenberg? ¿Aún puedes usar el Editor TinyMCE?
Tú haces no Usa el nuevo editor de bloques de Gutenberg. Si bien se convertirá en el editor predeterminado en WordPress 5.0, también es oficial Complemento de editor clásico de esta manera, aún podrá usar el editor TinyMCE original que ya conoce. Además, el equipo central de WordPress continuará apoyando oficialmente al editor TinyMCE al menos hasta finales de 2021.
Simplemente instale el complemento de WordPress.org. Cuando se activa, desactiva el editor de bloques de Gutenberg y creará contenido exactamente igual que antes de WordPress 5.0.
Si es necesario, el enchufe también tiene otra opción que le permite usar Ambas cosas El editor TinyMCE y el editor de bloques Gutenberg y cambia entre ellos según el contenido.
Para activar esta configuración, vaya a Ajustes → Escritura y seleccione una opción para Utilice el editor de bloques de forma predeterminada e incluya enlaces opcionales de vuelta al editor clásico:
¡Aquí está el tutorial del editor de WordPress Gutenberg!
Hay mucha discusión en la comunidad de WordPress sobre el nuevo editor de bloques de Gutenberg.
No tratamos de sopesar si es algo bueno o malo. Todo lo que queremos hacer es asegurarnos de que aún pueda disfrutar de una excelente experiencia de WordPress después de que se lance WordPress 5.0, y esperamos que este tutorial del editor de Gutenberg lo ayude.
Y si está buscando un tipo diferente de editor que lo ayude a crear contenido más complejo, puede consultar nuestra publicación sobre los mejores creadores de páginas de WordPress de arrastrar y soltar.
¿Tienes otras preguntas sobre el nuevo editor de bloques de Gutenberg? ¡Deja un comentario e intentaremos ayudarte!
