WordPress 5.0 introdujo un completamente nuevo editor basado en bloques llamado Gutenberg. Es una forma más fácil y nueva de crear contenido. En lugar de un editor simple y un editor de código de fondo, la nueva interfaz hace que sea más fácil arrastrar y soltar elementos en su sitio de WordPress.
Gutenberg básicamente ha eliminado elementos de algunos de los complementos de WordPress más populares como Elementor y Divi, que se consideran "compositores visuales". Gutenberg no es tan avanzado como esas soluciones, pero es un paso en la dirección correcta.
A continuación se muestra una captura de pantalla del Editor clásico de WordPress. Los botones de formato son como el editor de texto para Microsoft Word.
A partir de WordPress 5.0 y superior, se implementó el nuevo editor de bloques de Gutenberg que se muestra a continuación.
El nuevo editor utiliza el enfoque de agregar bloques o elementos para crear diseños de contenido. Cada elemento que agrega a su página o publicación se denomina bloque, incluidos videos, audio, listas, imágenes y galerías.
Beneficios del editor de WordPress Gutenberg
Es más fácil y simple agregar diferentes tipos de contenido a páginas y publicaciones agregando bloques. Por ejemplo, para agregar una tabla usando el editor clásico se requiere un complemento por separado.
In_content_1 all: [300x250] / dfp: [640x360]->Para agregar una tabla usando el editor Gutenberg de WordPress, todo lo que debe hacer es agregar un bloque de tabla, elegir sus filas y columnas, y agregar su contenido.
Cuando Con el editor Gutenberg de WordPress, es fácil mover las áreas de contenido hacia arriba y hacia abajo arrastrando los bloques.
En general, el nuevo editor de bloques Gutenberg es fácil de usar y aprender. Las herramientas de diseño de bloques incluyen muchas características como control de altura de línea, bloques de encabezado y párrafo, bloques de medios, gradiente de fondo y bloques de texto.
Creación de una nueva publicación o página de blog con el bloque Gutenberg de WordPress Editor
Al crear una nueva publicación o página con el editor Gutenberg de WordPress, se inicia el editor de bloques. El proceso es el mismo que con el editor clásico.
Desde su área de administración de WordPress, haga clic en
El primer bloque de todas las páginas y publicaciones es el título.
Después de escribir su título, puede presionar la tecla de tabulación o mover el mouse debajo de él y comenzar a escribir. De manera predeterminada, el siguiente bloque es un párrafo.
También puede agregar otro tipo de contenido haciendo clic en el signo + en la esquina superior izquierda del editor, en el lado izquierdo de un bloque, o debajo de uno existente.
Cuando haga clic en uno de los signos +, aparecerá el menú Bloquecon una barra de búsqueda en la parte superior y los bloques más utilizados debajo.
Cómo trabajar con bloques de WordPress Gutenberg
Todos los bloques tienen su propia barra de herramientas en la parte superior. Los botones de la barra de herramientas cambian según el tipo de bloque que está editando.
La siguiente captura de pantalla muestra un bloque de párrafo con formato básico como negrita, alineación de texto, inserción de un enlace y cursiva.
Además de la barra de herramientas, cada bloque tiene más configuraciones en la columna del lado derecho de la pantalla de edición.
Cómo guardar y reutilizar bloques en WordPress Gutenberg Editor
Una de las muchas ventajas de usar bloques es que puedes guardarlos y reutilizarlos individualmente. Para aquellos a quienes les gusta usar formatos consistentes o agregar fragmentos específicos a su contenido, esto es especialmente útil.
Desde el botón de menú en la esquina superior derecha de la barra de herramientas del bloque, haga clic en los tres puntos verticales . Luego elija Agregar a bloques reutilizables.
Dale al bloque reutilizable un nombre que reconocerás para que sea más fácil identificarlo cuando quieras volver a usarlo. Haga clic en Guardarcuando haya terminado.
Agregar un bloque reutilizable en una publicación o página
Elija la página o publicación donde desee para agregar un bloque reutilizable. Haga clic en un bloque de botón Agregar en la pantalla de publicación o edición de página.
Busque el bloque guardado en la pestaña Reutilizable, o puede buscarlo en el mismo lugar.
Mueva el mouse sobre el bloque para ver una vista previa rápida del mismo. Insértelo en su página o publicación haciendo clic en él.
Los bloques reutilizables se encuentran en el conjunto de datos de WordPress. Haga clic en el enlace Administrar todos los bloques utilizablespara administrarlos.
Administrar bloques reutilizables de WordPress Gutenberg
Desde la página del administrador de bloques, puede editar, eliminar o exportar bloques reutilizables para usar en otro sitio web de WordPress.
Administración y publicación de WordPress Gutenberg Editor Opciones
Cada página y publicación de WordPress incluye una gran cantidad de metadatos, como imágenes destacadas, fecha de publicación, etiquetas y categorías.
Estas opciones son todas ubicado en la columna de la derecha de la pantalla del editor.
Complementos de WordPress Gutenberg
Muchos complementos de WordPress están predefinidos como bloques que los hacen fácil y listo para usar con Gutenberg.
WP Forms permite a los usuarios agregar formularios a páginas y publicaciones utilizando un bloque de widgets.
WP Forms es un generador de formularios de arrastrar y soltar fácil de usar. Cree contactos, suscripciones, comentarios, pagos y otros tipos de formularios.
Utilice plantillas de formularios y flujos de trabajo preconstruidos para crear formularios atractivos con capacidad de respuesta móvil. WP Forms también ofrece una versión Pro si desea funciones y funciones más avanzadas.
Bloques de WooCommerce es uno de los complementos más conocidos y populares para integre las funciones de comercio electrónico en su sitio web.
Cree contenido atractivo utilizando texto y multimedia en un bloque con el editor Gutenberg. Presente productos individuales o un grupo de productos relacionados mediante la aplicación de un filtro basado en criterios tales como estadísticas y categorías de ventas.
Yoast SEO ejecuta su contenido hasta medidas convencionales de SEO para ayudar a optimizar y editar sus publicaciones o páginas.
WordPress Gutenberg Editor Usabilidad
El editor Gutenberg hace las mismas cosas que el clásico editor. A continuación se muestran algunos bloques comunes y populares utilizados.
Bloque de párrafo
Cree fácilmente contenido con este bloque Gutenberg predeterminado. Escriba el contenido como lo haría para cualquier documento. Cada párrafo se convierte automáticamente en un bloque detrás de escena.
Otra forma de usar el bloque de párrafo es hacer clic en Insertador de bloqueen la ventana emergente después de hacer clic el signo (+).
Columnas de texto
Use columnas de texto para crear párrafos de varias columnas que tengan el mismo ancho e igualmente distribuido en toda la página.
Agregar un enlace
Todos los bloques de texto estándar, incluido el bloque de párrafo, incluyen un botón de enlace en la barra de herramientas.
Agregar bloque de imagen
El editor Gutenberg de WordPress tiene un bloque de imagen listo para usar. Haga clic en él para agregar una imagen.
Hay tres formas de agregar una imagen. Suba, agregue desde su biblioteca de medios o arrastre desde su computadora.
Otra forma de agregar una imagen es arrastrarla y soltarla desde su computadora. El editor Gutenberg creará automáticamente un bloque de imagen para él.
Agregue metadatos como tamaño, texto alternativo y enlace de imagen en la configuración del bloque de imagen en el lado derecho.
Bloque de galería de imágenes
Agregue varias fotos con el bloque de galería. Controla el número de columnas y tamaños de imagen. Use el interruptor de palanca para recortar las imágenes de modo que se alineen de manera uniforme y automática.
El editor Gutenberg de WordPress incluye numerosos tipos de bloques adicionales para su uso. Para obtener una lista completa, lea WordPress.org artículo de soporte sobre bloques.
WordPress Gutenberg surgió como una solución a los problemas que algunos usuarios tenían al aprender el editor clásico. Su interfaz de arrastrar y soltar permite a los no expertos en tecnología diseñar y administrar un sitio web de aspecto profesional.