FrontBlocks para Gutenberg y GeneratePress

Descripción

FrontBlocks is a lightweight toolkit that extends the WordPress Block Editor (aka Gutenberg) with layout controls, interactive blocks, and content enhancements. Build richer pages with the blocks you already use, without relying on a page builder or custom code.

Turn Query Loops and grids into carousels, add animations and visual effects, improve layouts, and enable practical site utilities. FrontBlocks works with native WordPress blocks as well as supported GenerateBlocks elements, with optional integrations for WooCommerce, GenerateBlocks/GeneratePress and Gravity Forms.

Alineación de bordes del contenedor
Agrega controles personalizados a los bloques Container de GenerateBlocks y a los bloques nativos de WordPress Group/Container para eliminar el relleno del lado izquierdo o derecho, creando diseños de borde a borde. Esta característica solo aparece en contenedores que usan los ajustes de ancho máximo global de GeneratePress, ideal para crear disposiciones asimétricas en las que el contenido se extiende hasta un borde del navegador mientras se mantiene el espaciado adecuado en el otro lado.

Carrusel / control deslizante para la cuadrícula de GenerateBlocks y el bucle de consulta
Hemos agregado opciones a los bloques de Gutenberg que te permiten crear un carrusel o un control deslizante usando los bloques que prefieras. Los bloques compatibles incluyen GenerateBlocks Grid, GenerateBlocks Element, core/grupo y el bucle nativo de consulta de WordPress (core/query).

Para empezar a usar el carrusel, ve al bloque de cuadrícula o al bucle de consulta y selecciona la opción “Carrusel” o “Control deslizante” en la sección “Opción de cuadrícula de FrontBlocks”.

Atributos del carrusel/control deslizante:
– Autoplay: cambia automáticamente las diapositivas después de un tiempo concreto (en segundos).
– Elementos a mostrar: configura el número de elementos para distintos tamaños de pantalla:
* Escritorio (>1200px): número de elementos que se muestran en pantallas de escritorio.
* Portátil (992px-1199px): número de elementos que se muestran en pantallas de portátil.
* Tablet (768px-991px): número de elementos que se muestran en pantallas de tablet.
* Móvil (<768px): número de elementos que se muestran en dispositivos móviles. - Botones: el tipo de botones a mostrar en el carrusel/control deslizante (puntos, flechas o ninguno). - Color del botón: color de los botones. - Color de fondo del botón: color de fondo de los botones (puede ser transparente).

Patrón de carrusel:
Te ofrecemos un patrón de carrusel para Sección destacada listo para usar, hecho con bloques nativos de WordPress Cover. Este patrón se registra automáticamente en la pestaña “Patrones” del editor de WordPress, dentro de la categoría “FrontBlocks”. Solo tienes que hacer clic en el botón + del editor, ir a Patrones y buscar “Hero Carousel” o explorar la categoría de FrontBlocks. El patrón crea carruseles tipo Sección destacada de ancho completo con transiciones suaves, ideal para páginas de destino y contenido promocional. Incluye tres diapositivas personalizables con degradados, colores, encabezados, texto y botones de llamada a la acción. Mira la documentación para ver los detalles completos de implementación y las opciones de personalización.

Galería nativa de WordPress mejorada
Hemos agregado opciones a la galería nativa de WordPress que te permiten crear una disposición diferente, como cuadrícula o mosaico, y también activar un carrusel con imágenes en las que se puede hacer clic.

Animaciones para bloques
Puedes agregar animaciones a los bloques que quieras. Para hacer esto, ve a los ajustes del bloque y selecciona la sección “Opción de animación FrontBlocks”. Allí encontrarás una lista de animaciones que puedes aplicar al bloque.

Las animaciones se basan en Animate.css: Buscadores de atención, Entradas traseras, Salidas traseras, Entradas rebotantes, Salidas rebotantes, Entradas desvanecidas, Salidas desvanecidas, Volteadores, Entradas rotativas, Salidas rotativas, Especiales, Entradas al ampliar, Salidas al ampliar, y Entradas deslizantes.

Efectos de contenedor
Aplica efectos de glassmorphism a cualquier bloque con una intensidad de desenfoque personalizable. En los ajustes del bloque, abre el panel “Efectos de contenedor” para activar el efecto de vidrio y ajusta el nivel de desenfoque (0-50 px) para conseguir un aspecto moderno de cristal esmerilado. El efecto incluye un fondo semitransparente, un borde sutil y una sombra suave, creando un diseño en capas precioso. Perfecto para Sección destacada, tarjetas y superposiciones.

Efectos al pasar el cursor
Agrega efectos de ampliación suave a las imágenes de fondo cuando los usuarios pasan el cursor por encima de los elementos. Perfecto para cuadrículas de entradas, galerías y tarjetas. En los ajustes del bloque, abre el panel de “FrontBlocks Hover Effects” para activar el escalado del fondo. Características:
– Compatible con GenerateBlocks Query Loop (–inline-bg-image)
– Funciona con background-image estándar de CSS
– Cantidad de escala configurable de 1.0 a 2.0 (por defecto: 1.1 para un zoom del 110%)
– Transición suave de 0.4s con aceleración por GPU
– El contenido se mantiene legible y bien posicionado por encima de la imagen escalada
– La protección de overflow evita que las imágenes se salgan del contenedor

Columnas fijas:
La opción fija te permite hacer que una columna se quede adherida a la parte superior del área visible al desplazarte. Funciona tanto con bloques de GenerateBlocks Grid como con bloques nativos de WordPress. Activa la opción “Fijo” en los ajustes del bloque y la columna permanecerá fijada en la parte superior del área visible mientras el resto de la página se desplaza.

Insertar bloque de entrada:
Muestra contenido de otras entradas, páginas o tipos de contenido personalizados. Busca y selecciona cualquier contenido publicado para mostrar su título como H2 y el contenido completo. Perfecto para crear secciones de contenido dinámico sin duplicar contenido.

Decoración para el bloque de titular:
Agregar una línea decorativa al bloque de titular. Puedes elegir entre una línea vertical a la derecha o una línea horizontal a la derecha.

Titular Efecto Marquee:
Agregar un efecto marquee de desplazamiento infinito a los bloques de Titular/Texto. Funciona tanto con los bloques de Titular de GenerateBlocks como con los bloques nativos de WordPress de Encabezado/Párrafo. El texto se desplaza continuamente de derecha a izquierda, adaptándose automáticamente al ancho del contenedor. El texto corto se repite más veces y el texto largo menos. Características:
– Conmutador para activar o desactivar el efecto marquee
– Control de velocidad con tres preajustes: Rápido (10 s), Medio (20 s), Lento (40 s)
– Bucle infinito sin interrupciones, sin saltos
– Rellena automáticamente el ancho del contenedor con repeticiones de texto adecuadas
– Animación suave y fluida, optimizada para el rendimiento

Bloque de categorías de productos:
Muestra las categorías de productos de WooCommerce. Puedes elegir el número de categorías a mostrar, el orden y la forma de ordenar. También puedes optar por ocultar las categorías vacías. Además, puedes elegir cuántas columnas usar para mostrar las categorías. También puedes seleccionar el color de fondo, el color del borde, el grosor del borde, el radio del borde, el color del texto, el color de fondo al pasar el cursor, el color del borde al pasar el cursor y el color del texto al pasar el cursor.

Bloque de contador:
Muestra un contador con un valor inicial, un valor final y una duración. El contador aumentará desde el valor inicial hasta el valor final dentro del marco de tiempo especificado. Compatible con los bloques de texto de GenerateBlocks y los bloques de titulares, así como con los bloques nativos de WordPress núcleo/encabezado y núcleo/párrafo.

Testimonios:
Muestra testimonios de otras entradas, páginas o tipos de contenido personalizados. Busca y selecciona cualquier contenido publicado para mostrar su título como H2 y el contenido completo. Perfecto para crear secciones de contenido dinámico sin duplicar contenido.

Shortcode: [frontblocks_testimonials_carousel]

Bloque de tiempo de lectura:
Muestra el tiempo de lectura de una entrada. Puedes elegir el número de palabras por minuto para calcular el tiempo de lectura.
Shortcode: [frontblocks_reading_time]

Barra de progreso de lectura:
Muestra una barra de progreso vertical en el lado derecho de las entradas que se rellena a medida que los usuarios se desplazan por el contenido. La barra de progreso utiliza el color principal de tu sitio web y proporciona un indicador visual del progreso de lectura. Esta característica se puede activar o desactivar desde la página de ajustes de FrontBlocks en el administrador de WordPress.

Botón Atrás:
Muestra un botón flotante de volver en la esquina inferior izquierda que permita a los usuarios navegar a la página anterior. Actívalo desde la página de ajustes de FrontBlocks.

Tipografía fluida:
Convierte automáticamente los ajustes tipográficos estáticos de tu tema en una tipografía fluida moderna mediante CSS clamp(). En lugar de cambios bruscos del tamaño de fuente en los puntos de ruptura, esto crea una escalada suave y gradual desde móvil (320 px) hasta escritorio (1440 px). Compatible con todos los temas de WordPress.

Compatible con todos los elementos tipográficos configurados en GeneratePress:
– Body y párrafos (incluyendo los elementos de titular de GenerateBlocks)
– Todos los encabezados (H1-H6)
– Cada elemento mantiene sus propios valores responsivos
– Cero configuración – lee automáticamente del CSS dinámico de GeneratePress
– Transiciones suaves en todos los tamaños viewport sin saltos

Simplemente activa “Tipografía Fluida” en las opciones de FrontBlocks, ¡y toda tu tipografía adaptable se escalará sin problemas entre dispositivos!

Animaciones SVG personalizadas:
Agregar gráficos animados a los bloques Shape de GenerateBlocks y a los bloques nativos de íconos de WordPress importando archivos JSON. Admite dos formatos que se detectan automáticamente: Lottie/Bodymovin (importar JSON desde After Effects o LottieFiles.com) y CSS personalizado (SVG + @keyframes).

Bloque de animación de texto:
Agrega efectos dinámicos de texto animado a cualquier página o entrada. Inserta el bloque desde el inserter de Gutenberg dentro de la categoría FrontBlocks y elige entre más de 30 tipos de animación para que tus encabezados y tu texto destaquen.

Tipos de animación disponibles:
– Efectos de entrada: desvanecer, desenfocar, escalar, rebotar, caer, rodar, girar, voltear, rotar, resplandecer, deslizar arriba, deslizar abajo, deslizar izquierda, deslizar derecha
– Revelados de texto: máquina de escribir, revelar en bloques, expandir con seguimiento, escribir en terminal, revelar aleatorio, barajar texto
– Efectos de atención: pulso, destello, goma elástica, onda, balanceo, estiramiento, compresión
– Efectos creativos: glitch, glitch-rgb, parpadeo, gota de agua, salto de sombra, contorno sólido

Características:
– Vista previa animada en tiempo real directamente en el editor Gutenberg.
– Controles tipográficos completos: etiquetas de encabezado (H1–H6, p, span), familia de fuentes, tamaño, grosor, estilo y color.
– Controles de color de fondo y relleno/márgenes.
– Opciones de ancho máximo y alineación del texto.
– Control de velocidad para cada animación.

Bloque de comparación antes/después:
Muestra un control deslizante de comparación de imágenes interactivo que deja a los visitantes arrastrar un asa para revelar la diferencia entre dos imágenes. Perfecto para enseñar cambios de look, resultados de retoque, trabajos de renovación o cualquier transformación visual. Agrega el bloque desde el insertador de Gutenberg, dentro de la categoría FrontBlocks.

Características:
– Sube imágenes independientes de “Antes” y “Después” desde la biblioteca de medios de WordPress.
– Tirador arrastrable con flechas izquierda/derecha, también controlable con teclado para mejorar la accesibilidad.
– Etiquetas personalizables sobre cada imagen. Por defecto: “Antes” / “Después”.
– Control de la posición inicial del deslizador (0–100%) para elegir cuánto se muestra de cada imagen al cargar.
– Modo de altura fija con valor configurable en píxeles, para mantener el bloque compacto independientemente de las proporciones de las imágenes.

Subidas de SVG:
Sube archivos SVG directamente a la biblioteca de medios de WordPress. Solo los administradores pueden subir archivos SVG. Todos los archivos se desinfectan automáticamente en la subida: se eliminan elementos peligrosos (<script>, <iframe>, <object>, <embed>) y atributos de manejadores de eventos (on*) antes de guardarlos, protegiendo contra ataques XSS.

Bloque de acceso:
Agrega un bloque nativo de formulario de acceso de Gutenberg en cualquier página o entrada. Inserta el bloque desde el inserter de Gutenberg dentro de la categoría FrontBlocks. Incluye una conmutador para alternar entre las vistas de formulario de acceso y formulario de registro, con etiquetas y estilos totalmente personalizables. Ideal para sitios de membresía o páginas que requieran una experiencia de acceso limpia e integrada sin un shortcode.

Post Meta (Nativo) — FrontBlocks PRO:
Muestra valores de campos personalizados desde el meta de la entrada dentro de bloques nativos de WordPress directamente en el editor. Elige cualquier clave de meta registrada y muestra su valor integrado dentro de encabezados, párrafos u otros bloques de texto, sin shortcodes ni código PHP personalizado necesario. Útil para mostrar datos dinámicos como precios, fechas o cualquier campo personalizado guardado en el meta de la entrada. Disponible en FrontBlocks PRO.

Schema de FAQ (JSON-LD):
Genera automáticamente datos estructurados de FAQPage para los motores de búsqueda. Activa el conmutador “Schema de FAQ” en cualquier bloque tipo acordeón (núcleo/detalles) para marcarlo como un elemento de FAQ. FrontBlocks recopila todos los elementos activados en la página y genera un script JSON-LD válido de FAQPage en el pie de página, mejorando tus posibilidades de aparecer como resultado enriquecido en Google Search.

Estructura / disposición / diseño / plantilla integrada de Gravity Forms:
Muestra Gravity Forms con campos y botones en la misma línea. Perfecto para formularios de suscripción al boletín (correo electrónico + botón de suscribirse) o formularios de búsqueda (entrada + botón de buscar).

Para usar esta característica:
1. Selecciona un formulario en el bloque de Gravity Forms.
2. Busca el panel “FrontBlocks Gravity Form Options” en los ajustes del bloque, donde podrás:
– Activar la estructura/disposición/diseño/plantilla integrada con un simple conmutador
– Ajustar el espacio entre elementos (0-50 px)
– Diseño adaptable: se apilan automáticamente en dispositivos móviles.

Esta característica elimina la necesidad de CSS personalizado para conseguir formularios con diseños integrados.

Bloque de imágenes apiladas:
Muestra un conjunto de imágenes con un efecto de apilamiento animado. Las imágenes aparecen superpuestas entre sí y se animan desde una dirección configurable (arriba, abajo, izquierda o derecha). Inserta el bloque desde el inserter de Gutenberg dentro de la categoría FrontBlocks y sube varias imágenes. Características:
– Duración de la animación configurable y retraso entre cada imagen.
– Control de la altura del contenedor para adaptarse a cualquier estructura.
– Animaciones de entrada fluidas impulsadas por CSS/JS sin dependencias.

Eventos:
Registra y gestiona eventos directamente desde WordPress. Activa la característica de Eventos desde la página de ajustes de FrontBlocks y elige entre dos modos: un tipo de contenido personalizado (con su propio menú y taxonomía de categoría) o guardar los eventos como entradas normales. Cada evento incluye campos meta para:
– Conmutador de todo el día
– Fecha y hora de inicio y fin
– Costo
– URL del sitio web del evento

Banner de recomendación de idioma:
Muestra un banner inteligente que detecta el idioma del navegador del visitante y sugiere cambiar a la versión del sitio que coincida. Activa el banner desde la página de ajustes de FrontBlocks. El banner solo aparece cuando el sitio tiene una versión traducida que coincide con el idioma del navegador del usuario y respeta la acción de descartar del usuario mediante una cookie.

Cookie Notice:
Show a lightweight, configurable cookie consent banner with Accept and Reject actions. Choose between a full-width bottom bar, a boxed panel (bottom-left or bottom-right) or a centered popup, and customize the message, button labels, cookie policy page, accent color and cookie expiration. Google Tag Manager and/or GA4 are only requested and loaded after a visitor accepts — never before — and returning visitors who already accepted get the scripts on normal page load. The settings page also shows a simple accepted/rejected acceptance-rate stat (admins are excluded from the count). Implements Google Consent Mode v2, so it also holds back tracking from other analytics/ads plugins that respect it — including Google Site Kit — until the visitor decides.

Advanced Cookie Management (FrontBlocks PRO):
Extend Cookie Notice with separate Necessary, Analytics and Marketing preferences, a customizable preferences dialog and a reusable trigger that lets visitors update their choices later. Google Ads, Meta Pixel and Microsoft Clarity only run after the relevant category is accepted. It also supports the official Meta Pixel for WordPress plugin by holding its Pixel and Conversions API signals until Marketing consent.

Características de WooCommerce:
Características incluidas para WooCommerce FrontBlocks PRO.

FrontBlocks PRO:
FrontBlocks PRO es un plugin premium que amplía la funcionalidad de FrontBlocks. Incluye características adicionales y mejoras sobre la versión gratuita.

Features:
– Enable Gutenberg in the product editor.
– Enable simple prices for variable products.
– Block added after button.
– Product description behaviour.
– Disable zoom on product image.
– Share buttons.
– Custom Post Types Builder: Create and manage custom post types with advanced configuration options:
* Create custom post types with a simple interface from the FrontBlocks settings page
* Configure post type behavior (Post or Page style – hierarchical or not)
* Enable/disable categories taxonomy for each custom post type
* Add custom meta fields with multiple field types (Text, Textarea, URL, Date, File, Number, Email)
* Individual settings page for each custom post type accessible from the post type menu
* Delete custom post types easily with a single click
– Disable tabs on the product page.
– Horizontal product form layout (price, quantity, and add to cart button in one row).
– Checkout Inline: Display billing/shipping fields (email + phone, address line 1 + address line 2) side by side in a two-column layout. Compatible with Block Checkout (WooCommerce 8+) and legacy shortcode checkout.
– Full Page Scroll: Create fullpage scroll experiences with smooth section-by-section navigation and automatic side navigation dots. Perfect for landing pages, portfolios, and presentations.
– Footer Patterns: Ready-to-use footer block patterns (3 columns, 4 columns, hero contact) for native WordPress and Gutenberg.
– Login Block: Native Gutenberg block for user login and registration forms with customizable labels and …