Tipos de bloques comunes del editor Gutenberg y sus funciones explicadas

Editor GutenbergEsto puede hacerse mediante "terrón (de tierra)" (bloque) para crear contenido y maquetación web, proporcionando laMayor flexibilidad y personalización. Tanto si se trata de crear una simple entrada de blog como de diseñar un complejo diseño de página, el editor Gutenberg ayuda a los usuarios a alcanzar sus objetivos con facilidad. Este artículo detallará cómo añadir, utilizar y personalizar varios bloques en el editor Gutenberg y qué tipos de bloques están disponibles.

1. Añadir bloques en el editor Gutenberg

En el editor Gutenberg, los bloques son los elementos básicos para crear contenido de páginas y entradas.Cada bloque representa un elemento de contenidocomo párrafos, imágenes,botonesetc. Aquí están los pasos sobre cómo añadir bloques en Gutenberg:

Abra el editor de entradas/páginas

• Inicie sesión en el backend de WordPress.
• En el menú de la izquierda seleccione "tarjeta"o"página web".
• Pulse "Añadir nuevo puesto"o"compilador"Puestos/páginas existentes.

Añadir bloques

• Utilizar el icono más: En la interfaz del editor, haga clic en la parte superior de la página o área de contenido del post "+", aparecerá el panel del Insertador de bloques, que le permite examinar y seleccionar distintos tipos de bloques.

• Uso del comando barra oblicua: Escriba la barra diagonal ("/"), introduzca el nombre del bloque y el editor mostrará una lista rápida de los bloques disponibles. Basta con pulsar la tecla Intro para insertar rápidamente el bloque seleccionado.

Seleccionar e insertar bloques

• Insertador de bloques: Esto se puede hacerbloqueo del navegadorcategoría en el insertador para seleccionar el bloque deseado, o utilizando la parte superiortérmino de búsquedaBusque directamente un bloque concreto. Al hacer clic en un bloque, éste se inserta automáticamente en el área de contenidos.

2. Cómo personalizar los bloques de Gutenberg

En el editor Gutenberg, no sólo puede insertar bloques, sino que también puede hacerlo a petición.personalizaciónLos mismos. Los ajustes personalizados y las opciones varían según el tipo de bloque, pero la mayoría de los bloques pueden ajustar lo siguiente:

Bloquear la barra de herramientas

Cada bloque muestra una barra de herramientas contextual al seleccionarlo. Esta barra de herramientas se encuentra encima del bloque y proporciona un acceso rápido a las opciones de configuración habituales:

• opciones de alineación: Establece la alineación del bloque (justificado a la izquierda, centrado, justificado a la derecha, ancho completo).
• Formateo: por ejemplo, negrita, cursiva, inserción de enlaces, etc.
• Opciones de inserción: Se pueden insertar otros contenidos entre los bloques, comoincrustaciónycódigo cortoetc.

Panel de configuración de bloques

En la parte derecha del editor encontrará más opciones de personalización de los bloques. Estas opciones se distinguen por dos pestañas principales:

• Pestaña Bloques: Muestra las opciones de personalización asociadas al bloque seleccionado. Por ejemplo.pasaje pasajePuede cambiar el color del texto, el color de fondo, el tipo de letra, el interlineado y mucho más.

• Ficha Documentación: Se aplica a todo el documento (por ejemplo, página o entrada) e incluye ajustes para categorías, etiquetas, imágenes destacadas, etc.

Bloques reutilizables

Si necesita utilizar el mismo bloque varias veces, puede guardarlo como unBloques reutilizables. Esto facilita la inserción del mismo bloque de contenido en diferentes entradas o páginas:

• Seleccione el bloque deseado y pulsebloquesen la barra de herramientasmenú de tres puntos(más opciones).
• Seleccione "Añadir a bloques reutilizables"Opciones.

• Asigne un nombre al bloque y guárdelo para identificarlo y utilizarlo en el futuro.

3. Tipos de bloque en el editor Gutenberg

El editor Gutenberg proporcionaMúltiples tipos de bloquesque puede elegir utilizar en función de sus necesidades. He aquí los tipos de bloque habituales y sus funciones:

Bloques comunes

• pasajes: Se utiliza para añadir contenido de texto, admite funciones básicas de edición de texto como negrita, cursiva, adición de enlaces, etc.
• leyenda: para añadir títulos a páginas o artículos, admitecabecera multinivel(H1, H2, H3, etc.).
• imágenes: Sirve para insertar imágenes y realizar ajustes de alineación, tamaño y pie de foto.
• listados: Se utiliza para crear listas ordenadas o desordenadas.
• cita: Se utiliza para añadir una cita, normalmente para citar una frase o un párrafo.

bloque de formato

• codificación: paraMostrar códigofragmentos, normalmente manteniendo el código formateado y aplicando fuentes de igual anchura.
• reformatear: paraInserción de texto preformateado, manteniendo los espacios y los saltos de línea en el texto.
• cita: Para utilizar conestilizadoforma de mostrar citas o contenidos importantes.
• tabular: paraCreación de formulariosEl número de filas y columnas puede personalizarse.

Elementos de diseño

• botones: Se utiliza para crear enlazablesBotones personalizadosque suele utilizarse para guiar al usuario a través de una acción (por ejemplo, "Comprar ahora","Contacte con nosotros"etc.).
• columnas: Se utiliza para creardiseño multicolumna, puede colocar varios bloques en diferentes columnas.
• formulario: Se utiliza para convertirBloques múltiples combinadosEs fácil de gestionar y organizar.
• intervalos: utilizado entre bloquesAñadir espaciado, asegurándose de que existe una separación visual adecuada del contenido.

widgets

• código corto: Para insertarcódigo cortopara incrustar contenidos o funcionalidades dinámicas.
• archivos: Muestra un archivo de los mensajes del sitio, que pueden archivarse por mes, año, etc.
• formulario: Muestra una lista de las categorías de entradas del sitio, lo que facilita a los visitantes la búsqueda de contenidos sobre temas específicos.
• Últimas publicaciones: Se utiliza para mostrar los mensajes más recientes del sitio.

bloque incrustado

El editor Gutenberg también ofrece una variedad de bloques de incrustación para incrustar contenido externo en las entradas o páginas:

• YouTube: La incrustación de vídeos de YouTube permite a los usuarios reproducirlos directamente en la página.
• Twitter: Tweets de Twitter incrustados, que muestran el contenido y las interacciones de los tweets.
• Instagram: Incruste publicaciones de Instagram para mostrar contenidos de imagen o vídeo.
• Spotify: Incruste canciones o listas de reproducción de Spotify para mayor comodidad de quienes escuchan música.

4. Personalización avanzada y extensiones

Para los usuarios con mayores necesidades de personalización, el editor Gutenberg admite funciones de personalización adicionales, como bloques personalizados, modos de bloque y el uso de plugins de terceros.

Bloques a medida

Los desarrolladores pueden utilizar el Bloques de WordPress API Creación de bloques personalizados. Se trata de crear un bloque personalizado utilizando el JavaScript(Reaccione) para definir la funcionalidad y el estilo del bloque. Los bloques personalizados pueden empaquetarse como complementos y compartirse con otros usuarios, mejorando aún más la funcionalidad del editor Gutenberg.

modelo de bloques

Los patrones de bloques son diseños de bloques predefinidos que pueden insertarse rápidamente en diseños complejos. Puede personalizar estos patrones y guardarlos para reutilizarlos en otras páginas o entradas.

Plug-ins de terceros

Muchos plugins de terceros ofrecen nuevos bloques y funciones que amplían aún más las capacidades del editor Gutenberg. Los plugins más populares incluyen:

• Bloques Gutenberg avanzados: Añadidos bloques comunes como testimonios, tablas de precios, etc.
• CoBloques: Proporciona un rico conjunto de bloques para crear diseños de contenido altamente personalizables.
• Bloques KadenceBloques avanzados : Se proporcionan varios bloques avanzados para ayudarle a crear disposiciones y diseños complejos con facilidad.

CSS personalizado

Para los que estéis familiarizados con CSS, el editor de Gutenberg puede añadir la etiquetaCSS personalizado clase. Esto permite al usuario ajustar el estilo del bloque según sea necesario para que se adapte mejor al diseño de la página.

5. Resumen

El editor Gutenberg es una herramienta potente y flexible para todo, desde simples entradas de blog hasta complejos diseños web. Con una gran variedad de bloques incorporados y opciones de personalización, podrá crear, ajustar y optimizar fácilmente el contenido web. Para los desarrolladores, Gutenberg también ofrece la posibilidad de crear bloques personalizados, ampliando aún más su funcionalidad.