Bloques, patrones y FSE

Concepto de bloques en WordPress

A partir de la versión 5.0, WordPress introdujo el Editor de Bloques, también conocido como Gutenberg, lo que representó un cambio importante en la forma en que los usuarios crean y editan contenido. Este editor transforma cada elemento en un bloque independiente que puede ser personalizado y organizado de manera visual, sin necesidad de HTML o CSS.

¿Qué es un bloque?

Un bloque es una unidad de contenido independiente que cumple una función específica, como mostrar texto, imágenes, videos o botones. Cada bloque tiene su propia configuración de estilo y opciones, lo que permite ajustar cada parte de una página o entrada según las necesidades de diseño y funcionalidad del sitio. Algunos ejemplos de bloques incluyen:

• Párrafo: Para texto simple.
• Encabezado: Para organizar contenido en secciones jerárquicas.
• Imagen: Permite insertar y ajustar imágenes.
• Galería: Ideal para mostrar múltiples imágenes en una cuadrícula.
• Video: Inserta y configura videos, ya sea subidos o incrustados desde servicios externos como YouTube.
• Botón: Crea llamadas a la acción personalizables.
• Columnas: Facilita la creación de diseños en múltiples columnas.

Cada uno de estos bloques es manipulable y permite una amplia gama de configuraciones y estilos para adaptarse a las preferencias de diseño. Esto convierte al Editor de Bloques en una herramienta versátil y accesible para los usuarios.

Personalización de bloques

Cada bloque tiene opciones específicas que permiten ajustar su apariencia y comportamiento. Algunas de las configuraciones comunes incluyen:

• Estilo de fuente y color: Personaliza el color de fondo, el color del texto y el tipo de fuente.
• Alineación: Cambia la alineación del contenido a la izquierda, derecha o centrado.
• Tamaño: Ajusta el tamaño del bloque o de los elementos que contiene.
• Espaciado: Define márgenes y rellenos para organizar mejor los elementos.

Para conocer todos los bloques disponibles y sus características, consulta la documentación de bloques de WordPress.

Patrones de bloques en WordPress

Los patrones de bloques son grupos de bloques preconfigurados que se pueden insertar en una página o entrada para replicar diseños complejos de forma rápida y sencilla. Estos patrones están pensados para mejorar la productividad y la consistencia en el diseño del sitio.

¿Qué es un patrón de bloques?

Un patrón de bloques es una estructura de contenido predefinida que contiene múltiples bloques con una configuración específica. Por ejemplo, un patrón de encabezado de página puede contener un bloque de título, un bloque de imagen de fondo y un botón de llamada a la acción, todo configurado con estilos y espaciado coherente.

Ejemplos de patrones comunes

Algunos patrones de bloques que suelen estar disponibles de manera predeterminada o en temas específicos incluyen:

• Encabezado con Imagen de Fondo: Un bloque de imagen con un título y una descripción superpuestos, ideal para la parte superior de la página.
• Galería de Imágenes: Varios bloques de imagen configurados en una cuadrícula con bordes y espaciado consistentes.
• Testimonios: Un conjunto de bloques de citas o comentarios, generalmente con opciones de diseño para destacar testimonios de clientes.
• Llamada a la Acción: Un patrón que incluye texto persuasivo y botones de acción para motivar a los usuarios a tomar una acción específica.

WordPress permite guardar patrones personalizados, lo que significa que los usuarios pueden crear sus propios patrones y reutilizarlos en diferentes áreas del sitio.

Para explorar y descargar patrones, consulta la librería de patrones de WordPress.

Beneficios de usar patrones

El uso de patrones de bloques simplifica y acelera la creación de contenido, permitiendo a los usuarios crear secciones de diseño consistente sin tener que personalizar cada bloque individualmente. Además, los patrones proporcionan una estética profesional al diseño general del sitio, mejorando la experiencia visual sin requerir experiencia avanzada en diseño.

Full Site Editor (FSE) en WordPress

El Full Site Editor (FSE), introducido en la versión 5.9 de WordPress, permite a los usuarios modificar todos los elementos de un sitio, desde el encabezado hasta el pie de página, utilizando bloques y una interfaz visual unificada. Esta característica es un cambio importante en el ecosistema de WordPress, ya que tradicionalmente solo se podía personalizar el contenido del sitio sin acceder visualmente a la estructura completa.

¿Qué permite el Full Site Editor?

Con el FSE, ahora es posible: - Editar plantillas completas para tipos de contenido específicos (por ejemplo, la plantilla de entradas de blog o la de la página principal). - Modificar partes del sitio, como el encabezado, el pie de página o las áreas laterales, utilizando bloques de contenido. - Personalizar el diseño de cada sección del sitio de forma visual y sin código, lo cual otorga una flexibilidad mucho mayor en comparación con los métodos de edición tradicionales. - Crear plantillas específicas para diferentes tipos de páginas o categorías, lo que facilita la personalización de la experiencia del usuario en distintas partes del sitio.

Temas compatibles con el FSE

No todos los temas son compatibles con el Full Site Editor. Los temas compatibles se denominan temas de bloques o temas FSE, y están diseñados específicamente para aprovechar todas las características del editor de bloques y el Full Site Editor. Estos temas vienen con plantillas y patrones preconfigurados que se pueden personalizar según las necesidades del usuario.

Para explorar temas compatibles con el FSE, puedes visitar la galería de temas de WordPress.

Beneficios del Full Site Editor

Algunos beneficios clave del FSE son:

• Consistencia de diseño: Permite que todas las páginas y secciones del sitio mantengan un estilo visual coherente.
• Flexibilidad completa: Los usuarios pueden editar cualquier parte del sitio desde una única interfaz.
• Ahorro de tiempo: No se necesita cambiar entre el personalizador de temas y el editor de contenido; todo está en un solo lugar.
• Accesibilidad y facilidad de uso: Las personas sin experiencia en desarrollo web pueden personalizar completamente su sitio sin conocimientos técnicos.

Ejemplo de uso del Full Site Editor

Supongamos que quieres cambiar el diseño del encabezado del sitio en todas las páginas. Con el Full Site Editor, solo necesitas ir a la sección del encabezado y ajustar los bloques allí, agregando, eliminando o personalizando bloques como el logotipo, el menú de navegación o una barra de búsqueda. Al guardar los cambios, el nuevo diseño del encabezado se aplicará en todas las páginas de manera automática.

Para aprender más sobre cómo utilizar el Full Site Editor, consulta la guía del FSE en WordPress.

Actividades

• AC 414 (RA1 / CE1a CE1c CE1d CE1f CE1i / IC1/ 3p). Realiza una instalación nueva de WordPress, sobre ella, y haciendo uso del tema inicial, modifica la cabecera de manera que cumpla la siguiente estructura:menú | logo | búsqueda. Realiza un documento en el que muestres el proceso y el resultado. Se valorará que se realice la versión en escritorio y el móvil.

• AC 415 (RA1 / CE1a CE1c CE1d CE1f CE1i / IC1/ 3p). Sobre la instalación de la AC 414 edita los bloques de la home. Has de representar la siguiente estructura:

  • Hero banner
  • Texto SEO
  • Loop de Post de al menos 4 post.

  Para los posts deberás crear 4 post definiendo la miniatura en cada uno de ellos. Realiza un documento en el que muestres el proceso y el resultado. Se valorará que se realice la versión en escritorio y el móvil.

• AC 416 (RA1 / CE1a CE1c CE1d CE1f CE1i / IC1/ 3p). Sobre la instalación de la AC 414 edita los bloques del footer. Para ello has de respetar la siguiente estructura: métodos de contacto | redes sociales (al menos 3) | enlace a páginas de contacto y de quienes somos. Realiza un documento en el que muestres el proceso y el resultado. Se valorará que se realice la versión en escritorio y el móvil.

• AC 417 (RA1 / CE1a CE1c CE1d CE1f CE1i / IC1/ 3p). Sobre la instalación de la AC 414 edita un post. Has de hacer uso de los patrones del tema. Realiza un documento en el que muestres el proceso y el resultado. Se valorará el contenido del post y que se realice la versión en escritorio y el móvil.