Hola mi nombre es Sara y soy redactora de artículos en Ruubay Empresas, hoy les traigo un artículo para todos los usuarios que usan WordPress y quieren añadir el editor de bloques de WordPress Gutenberg, en esta guía le explicamos todo lo que necesita saber para usar correctamente Gutenberg para WordPress, comencemos
En WordPress 5.0, el editor de contenido clásico fue reemplazado por un nuevo editor de bloques, conocido como Gutenberg. Desde entonces, varios de nuestros lectores nos han pedido que creemos un tutorial completo sobre cómo usar el editor de bloques de Gutenberg en WordPress.
El editor de bloques de WordPress es una forma totalmente nueva y diferente de crear contenido en WordPress. En este tutorial, le mostraremos cómo usar el nuevo editor de bloques de WordPress y cómo dominarlo para crear publicaciones y páginas de blogs visualmente impresionantes.
¿Cuál es la diferencia entre Block Editor (Gutenberg) y Classic Editor?
Antes de adentrarnos en el nuevo editor, primero comparemos y comprendamos las diferencias entre Gutenberg Block Editor y Classic Editor.
Aquí es cómo se veía el editor clásico en WordPress:
Si actualizas a WordPress 5.0 , así es como se ve el nuevo editor de bloques:
Como puede ver, son dos editores completamente diferentes para crear contenido en WordPress.
El antiguo editor clásico era un editor de texto con botones de formato muy similares a Microsoft Word.
El nuevo editor utiliza un enfoque totalmente diferente, llamado "Bloques" (de ahí el nombre de Editor de bloques).
[smartslider3 slider="378"]Los bloques son elementos de contenido que agrega a la pantalla de edición para crear diseños de contenido. Cada elemento que agregue a su publicación o página es un bloque.
Puede agregar bloques para cada párrafo, imágenes, videos, galerías, audio, listas y más. Hay bloques para todos los elementos de contenido comunes y los complementos de WordPress pueden agregar más .
¿Cómo es el nuevo editor de bloques de WordPress mejor que el editor clásico?
El nuevo editor de bloques de WordPress ofrece una forma sencilla de agregar diferentes tipos de contenido a tus publicaciones y páginas.
Por ejemplo, anteriormente, si deseaba agregar una tabla en su contenido, entonces necesitaba un complemento de tabla separado.
Con el nuevo editor, simplemente puede agregar un bloque de tabla, seleccionar sus columnas y filas y comenzar a agregar contenido.
Puede mover los elementos de contenido hacia arriba y hacia abajo, editarlos como bloques individuales y crear fácilmente contenido multimedia.
Lo más importante es que el nuevo editor de bloques de WordPress es fácil de usar y aprender.
Esto brinda una inmensa ventaja a todos los principiantes de WordPress que están comenzando su primer blog o construyendo un sitio web de negocios de bricolaje .
Dicho esto, echemos un vistazo a cómo usar el nuevo editor de bloques de WordPress como un profesional para crear un gran contenido.
Esto es lo que cubriremos en este tutorial de Gutenberg:
- Usando Gutenberg - El nuevo editor de bloques de WordPress
- Creando una nueva entrada de blog o página
- Cómo agregar un bloque en Gutenberg
- Trabajando con bloques en el nuevo editor.
- Salvando y reutilizando bloques en Gutenberg.
- Publicación y configuración de publicaciones en Gutenberg
- Configuraciones de plugin en nuevo editor
- Añadiendo algunos bloques comunes en Gutenberg.
- Explorando algunos nuevos bloques de contenido en Gutenberg
- Consejos adicionales sobre el uso de Gutenberg como un profesional.
- Añadiendo más bloques a Gutenberg Block Editor
- Preguntas frecuentes sobre Gutenberg
Listo? Empezemos...
Usando Gutenberg - El nuevo editor de bloques de WordPress
El editor de bloques está diseñado para ser intuitivo y flexible. Si bien se ve diferente al antiguo editor de WordPress, todavía hace todas las cosas que pudiste hacer en el editor clásico.
Comencemos por cubrir las cosas básicas que hizo en el editor clásico y cómo se hacen en el editor de bloques.
Creando una nueva publicación de blog o página usando el editor de bloques
Comenzarás a crear una nueva publicación de blog o página como lo harías normalmente. Simplemente haga clic en Publicaciones »Agregar nuevo menú en su administrador de WordPress. Si está creando una página, vaya a Páginas »Agregar nuevo menú.
Esto lanzará el nuevo editor de bloques.
Cómo agregar un bloque en Gutenberg
El primer bloque de cada publicación o página es el título.
Después de eso, puede usar el mouse para moverse debajo del título o presionar la tecla de tabulación en su teclado para moverse hacia abajo y comenzar a escribir.
Por defecto, el siguiente bloque es un bloque de párrafo. Esto permite a los usuarios comenzar a escribir de inmediato.
Sin embargo, si desea agregar algo diferente, puede hacer clic en el botón Agregar nuevo bloque en la esquina superior izquierda del editor, debajo de un bloque existente o en el lado izquierdo de un bloque.
[smartslider3 slider="356"]
Al hacer clic en el botón, se mostrará el menú Agregar bloque con una barra de búsqueda en la parte superior y los bloques que se usan comúnmente debajo.
Puede hacer clic en las pestañas para examinar las categorías de bloque o escribir la palabra clave para buscar rápidamente un bloque.
Si no desea usar un mouse para hacer clic en el botón, puede usar un atajo de teclado al escribir / para buscar y agregar un bloque.
Trabajando con bloques en el nuevo editor
Cada bloque viene con su propia barra de herramientas que aparece en la parte superior del bloque. Los botones en la barra de herramientas cambiarían dependiendo del bloque que esté editando.
Por ejemplo, en esta captura de pantalla, estamos trabajando en un bloque de párrafos que muestra botones de formato básico como: alineación de texto, negrita, cursiva, insertar-enlace y tachado.
Además de la barra de herramientas, cada bloque también puede tener sus propios ajustes de bloque que aparecerán en la columna derecha de la pantalla de edición.
Puede mover los bloques hacia arriba y hacia abajo simplemente arrastrando y soltando o haciendo clic en los botones arriba y abajo al lado de cada bloque.
Guardando y reutilizando bloques en Gutenberg
Una de las mejores cosas de los bloques es que se pueden guardar y reutilizar individualmente. Esto es particularmente útil para los bloggers que con frecuencia necesitan agregar fragmentos de contenido específicos a sus artículos.
Simplemente haga clic en el botón de menú ubicado en la esquina derecha de la barra de herramientas de cada bloque. En el menú, seleccione la opción 'Agregar a bloques reutilizables'.
Se le pedirá que proporcione un nombre para este bloque reutilizable. Ingrese un nombre para su bloque y luego haga clic en el botón Guardar.
El editor de bloques ahora guardará el bloque como un bloque reutilizable.
Ahora que ha guardado un bloque, veamos cómo agregar el bloque reutilizable a otras publicaciones y páginas de WordPress en su sitio.
Simplemente edite la publicación o la página donde desea agregar el bloque reutilizable. Desde la pantalla de edición posterior, haga clic en el botón Agregar bloque.
Encontrará su bloque guardado en la pestaña 'Reutilizable'. También puede encontrarlo escribiendo su nombre en la barra de búsqueda.
Puede colocar el mouse sobre él para ver una vista previa rápida del bloque. Simplemente haga clic en el bloque para insertarlo en su publicación o página.
Todos los bloques reutilizables se almacenan en su base de datos de WordPress, y puede administrarlos haciendo clic en el enlace 'Administrar todos los bloques reutilizables'.
Esto te llevará a la página del administrador de bloques. Desde aquí, puede editar o eliminar cualquiera de sus bloques reutilizables. También puede exportar bloques reutilizables y usarlos en cualquier otro sitio web de WordPress.
Opciones de publicación y gestión en Gutenberg Block Editor
Cada publicación de WordPress contiene muchos metadatos. Esto incluye información como la fecha de publicación, categorías y etiquetas , imágenes destacadas y más.
Todas estas opciones están cuidadosamente ubicadas en la columna derecha de la pantalla del editor.
Opciones de plugin en Gutenberg
Los complementos de WordPress pueden aprovechar la API del editor de bloques para integrar sus propios ajustes dentro de la pantalla de edición.
Algunos complementos populares ya están disponibles como bloques. Por ejemplo, WPForms , el mejor complemento del creador de formularios de WordPress le permite agregar formularios a su contenido mediante un bloque de widgets.
Aquí es cómo Yoast SEO le permite editar su configuración de SEO en el nuevo editor:
WooCommerce también incluye bloques de widgets que puede agregar fácilmente a cualquiera de sus publicaciones y páginas de WordPress.
Agregar algunos bloques comunes en el nuevo editor
Básicamente, el nuevo editor puede hacer todo lo que hizo el editor clásico. Sin embargo, estarás haciendo las cosas mucho más rápido y elegante que antes.
1. Agregar una imagen en el nuevo editor de WordPress
Hay un bloque de imágenes listo para usar en el nuevo editor de WordPress. Simplemente agregue el bloque y luego cargue un archivo de imagen o selecciónelo de la biblioteca de medios.
También puede arrastrar y soltar imágenes desde su computadora, y el editor creará automáticamente un bloque de imágenes para ella.
Una vez que haya agregado una imagen, podrá ver las configuraciones de bloque donde puede agregar metadatos para la imagen como el texto alternativo, el tamaño y agregar un enlace a la imagen.
2. Agregando un enlace en el nuevo editor de bloques.
El editor de bloques viene con varios bloques donde puede agregar texto. El más utilizado es el bloque de párrafo que viene con un botón de enlace de inserción en la barra de herramientas.
Todos los demás bloques de texto utilizados comúnmente también incluyen un botón de enlace en la barra de herramientas.
También puede insertar un enlace utilizando el método abreviado de teclado, que es Command + K para Mac y CTRL + K en computadoras con Windows.
3. Añadiendo una galería de imágenes en Gutenberg.
El bloque de la galería funciona como el bloque de la imagen. Lo agregas y luego subes o seleccionas archivos de imagen.
4. Agregar códigos cortos en las publicaciones de WordPress usando Gutenberg
Todos sus códigos cortos funcionarán como lo hicieron en el editor clásico. Simplemente puede agregarlos a un bloque de párrafo, o puede usar el bloque de código abreviado.
Explorando algunos nuevos bloques de contenido en Gutenberg
El editor de Gutenberg promete resolver algunos problemas de usabilidad de larga data en WordPress mediante la introducción de nuevos bloques.
Los siguientes son algunos de los favoritos que creemos que los usuarios encontrarán de gran ayuda.
50 páginas gratis para promocionar mi negocio en Internet
1. Agregar una imagen al lado de un texto en WordPress
Usando el antiguo editor, muchos de nuestros usuarios no pudieron colocar una imagen junto al texto. Puedes hacer esto ahora con el bloque de Medios y Texto .
Este bloque simple viene con dos bloques colocados lado a lado, lo que le permite agregar fácilmente una imagen y agregar un poco de texto al lado.
2. Agregando un botón en las publicaciones y páginas de WordPress.
Agregar un botón a las publicaciones o páginas de su blog fue otra molestia en el editor clásico. Tuviste que usar un complemento que creaba un código corto para el botón, o tenías que cambiar al modo HTML y escribir código.
[smartslider3 slider="148"]Gutenberg viene con un bloque de botones que te permite agregar rápidamente un botón a cualquier publicación o página.
Puede agregar un enlace para su botón, cambiar colores y elegir entre tres estilos de botón.
3. Agregar hermosas imágenes de portada en publicaciones de blog y páginas de destino.
Otra característica interesante que puede probar es el bloque 'Cubierta', que le permite agregar imágenes de portada a sus publicaciones y páginas.
Una imagen de portada es una imagen más amplia que a menudo se usa como portada para una nueva sección en una página o el comienzo de una historia. Se ven hermosos y te permiten crear diseños de contenido atractivos.
Simplemente agregue un bloque de cubierta y luego cargue la imagen que desea usar. Puede elegir un color de superposición para la portada o convertirla en una imagen de fondo fija para crear un efecto de paralaje cuando los usuarios se desplazan hacia abajo en la página.
4. Creación de tablas dentro de artículos.
El editor clásico no tenía un botón para agregar tablas a tus publicaciones de WordPress . Tuvo que usar un complemento o crear una tabla escribiendo CSS y HTML personalizados.
El nuevo editor de Gutenberg viene con un bloque de tabla predeterminado, lo que hace que sea muy fácil agregar tablas a tus publicaciones y páginas. Simplemente agregue el bloque y luego seleccione el número de columnas y filas que desea insertar.
Ahora puede seguir adelante y comenzar a agregar datos a las filas de la tabla. Siempre puede agregar más filas y columnas si es necesario. También hay dos opciones básicas de estilo disponibles.
5. Creando contenido multi-columna
La creación de contenido de varias columnas fue otro problema que el editor clásico no manejó en absoluto. El editor de bloques le permite agregar bloques de Columnas, que básicamente agrega dos columnas de bloques de párrafos por cierto estas invitado a publicar tu empresa gratis en Ruubay.
Este bloque de columnas es bastante flexible. Puede agregar hasta 6 columnas en una fila e incluso usar otros bloques dentro de cada columna.
Consejos de bonificación para usar Gutenberg como un profesional
Al mirar el nuevo editor de bloques, puede que se pregunte si pasará más tiempo agregando y ajustando bloques que creando contenido real.
Bueno, el nuevo editor es increíblemente rápido e incluso un uso muy básico durante unos minutos le permitirá agregar bloques al instante sin siquiera pensarlo.
Muy pronto se dará cuenta de cuánto más rápido se convertirá su flujo de trabajo con este nuevo enfoque.
Para usuarios avanzados, aquí hay algunos consejos adicionales para ayudarlo a trabajar aún más rápido con el nuevo editor de WordPress.
1. Mueva la barra de herramientas del bloque a la parte superior.
Como puede haber notado en las capturas de pantalla, hay una barra de herramientas que aparece encima de cada bloque. Puede mover esta barra de herramientas a la parte superior del editor por cierto estas invitado a publicar tu empresa gratis en Ruubay.
Simplemente haga clic en el botón de tres puntos en la esquina superior derecha de la pantalla y luego seleccione la opción Barra de herramientas superior.
2. Usa atajos de teclado
Gutenberg viene con varios atajos útiles que harán que su flujo de trabajo sea aún mejor. El primero que debe comenzar a usar de inmediato es el /.
Simplemente ingrese / y luego comience a escribir, y le mostrará los bloques coincidentes que puede agregar instantáneamente.
Para obtener más accesos directos, haga clic en el menú de tres puntos en la esquina superior derecha de la pantalla y luego seleccione 'Métodos abreviados de teclado'.
Aparecerá una ventana emergente con la lista de todos los métodos abreviados de teclado que puede utilizar. La lista tendrá diferentes accesos directos para usuarios de Windows y Mac.
3. Arrastre y suelte los medios para crear automáticamente bloques de medios.
Gutenberg le permite simplemente arrastrar y soltar archivos en cualquier lugar de la pantalla y automáticamente creará un bloque para usted.
Puede soltar una sola imagen o archivo de video, y creará el bloque para usted. También puede colocar varios archivos de imagen para crear un bloque de galería.
4. Agregar YouTube, Twitter, Facebook, Vimeo y otras incrustaciones
Gutenberg introduce nuevos bloques incrustados en el editor de bloques. Hay un bloqueo para todos los tipos de incrustaciones compatibles, incluidos YouTube, Twitter, Facebook y más.
Sin embargo, solo puede copiar y pegar la URL incrustada en cualquier momento, y automáticamente creará un bloque para usted.
Por ejemplo, si agregó una URL de video de YouTube, automáticamente creará un bloque de inserción de YouTube y mostrará el video.
Agregar más bloques al editor de bloques de Gutenberg en WordPress
El nuevo editor de bloques en WordPress permite a los desarrolladores crear sus propios bloques. Hay algunos complementos impresionantes de WordPress que ofrecen paquetes de bloques para el nuevo editor.
Éstos son algunos de ellos:
Advanced Gutenberg viene con varios bloques para elementos de contenido populares como el control deslizante de productos WooCommerce, testimonios, mapas, contadores, pestañas, acordeones y más.
También le brinda un control avanzado sobre qué usuarios pueden acceder a los bloques según sus roles de usuario . Puede crear perfiles de usuario y seleccionar qué bloques pueden agregar.
2. Apilable - Bloques de Gutenberg
Apilable: Gutenberg Blocks es una colección de bloques de Gutenberg bellamente diseñados que puede usar en su sitio web. Incluye bloques para el contenedor, publicaciones, cuadrícula de características, acordeón, cuadro de imágenes, lista de iconos, llamada a la acción y más.
Editor Blocks es otra colección ordenada de bloques Gutenberg que puedes usar. Viene con bloques útiles como perfil de autor, imagen de héroe, tabla de precios , marcas, características y más.
Preguntas frecuentes sobre Gutenberg - El nuevo editor de bloques en WordPress
Desde que Gutenberg se convirtió en el nuevo editor de WordPress, hemos estado recibiendo muchas preguntas. Aquí están las respuestas a algunas de las preguntas más frecuentes sobre Gutenberg.
Top 20 productos mas demandados de tendencias para vender en 2019
1. ¿Qué pasa con mis posts y páginas más antiguas? ¿Todavía puedo editarlos?
Tus publicaciones y páginas antiguas son completamente seguras y no se ven afectadas por el Gutenberg. Todavía puedes editarlos, y Gutenberg los abrirá automáticamente en un bloque que contiene el editor clásico.
Puede editarlos dentro del editor antiguo, o puede convertir artículos antiguos en bloques y usar el nuevo editor de bloques.
2. ¿Puedo seguir usando el antiguo editor?
Sí, todavía puedes seguir usando el antiguo editor. Simplemente instale y active el complemento Classic Editor .
Al activarse, deshabilitará el editor de bloques y podrá continuar usando el editor clásico.
Tenga en cuenta que el editor clásico será compatible hasta 2022.
3. ¿Qué hacer si el nuevo editor no funciona con un complemento o tema que estoy usando?
El proyecto Gutenberg estuvo en desarrollo durante mucho tiempo. Esto les dio a los autores de plugins y temas mucho tiempo para probar la compatibilidad de su código.
Sin embargo, todavía existe la posibilidad de que algunos complementos y temas no funcionen bien con el nuevo editor. En ese caso, puede instalar el complemento editor clásico, solicitar al desarrollador que agregue el soporte de Gutenberg o simplemente buscar un complemento o tema alternativo, por cierto estas invitado a publicar tu empresa gratis en Ruubay.
Lo estas usando actualmente déjanos tus consejos a continuación en los comentarios... y links a tus vídeos o web...
