Gutenberg blocks

Tres bloques de Gutenberg para insertar módulos de la tienda. Cada bloque tiene una vista previa en el editor (renderizado del lado del servidor) y una configuración en el panel lateral.

Requisitos

WordPress 6.0 o posterior
Editor de bloques Gutenberg (no el editor clásico)
El módulo correspondiente activo en los ajustes de Polski for WooCommerce

Insertar bloques

Los bloques de Polski for WooCommerce se encuentran en el insertador de bloques (el botón +) en la categoría Polski for WooCommerce. También puede buscarlos por nombre escribiendo “Polski” o el nombre del módulo.

Bloque: búsqueda AJAX

Nombre del bloque: polski/ajax-search

Inserta un campo de búsqueda con sugerencias AJAX. Los resultados aparecen en un desplegable mientras se escribe una frase.

Atributos del bloque

Atributo	Tipo	Por defecto	Descripción
`placeholder`	string	`Search products...`	Texto del marcador de posición en el campo
`width`	string	`100%`	Anchura del campo
`showIcon`	bool	`true`	Icono de lupa
`showCategory`	bool	`false`	Desplegable de filtrado por categoría
`limit`	number	`8`	Límite de sugerencias
`minChars`	number	`3`	Mín. caracteres para buscar
`style`	string	`default`	Estilo: default, rounded, flat

Panel lateral (Inspector Controls)

El panel lateral del bloque contiene secciones:

Ajustes de búsqueda:

Texto del marcador de posición
Número mínimo de caracteres
Límite de resultados
Filtro de categoría (sí/no)

Apariencia:

Anchura del campo
Estilo (default, rounded, flat)
Icono de lupa (sí/no)
Borde (sí/no)
Sombra (sí/no)

Avanzado:

Clases CSS adicionales
Ancla HTML

Ejemplo de registro del bloque (implementación interna)

register_block_type('polski/ajax-search', [
    'api_version'     => 3,
    'editor_script'   => 'polski-blocks-editor',
    'editor_style'    => 'polski-blocks-editor-style',
    'style'           => 'polski-blocks-style',
    'render_callback' => [AjaxSearchBlock::class, 'render'],
    'attributes'      => [
        'placeholder' => [
            'type'    => 'string',
            'default' => __('Search products...', 'polski'),
        ],
        'width' => [
            'type'    => 'string',
            'default' => '100%',
        ],
        'showIcon' => [
            'type'    => 'boolean',
            'default' => true,
        ],
        'showCategory' => [
            'type'    => 'boolean',
            'default' => false,
        ],
        'limit' => [
            'type'    => 'number',
            'default' => 8,
        ],
    ],
]);

Filtro de renderizado

add_filter('polski/blocks/ajax_search/output', function (string $html, array $attributes): string {
    // Modificar el HTML del bloque
    return $html;
}, 10, 2);

Bloque: filtros AJAX

Nombre del bloque: polski/ajax-filters

Inserta un conjunto de filtros AJAX para filtrar la lista de productos sin recargar la página.

Atributos del bloque

Atributo	Tipo	Por defecto	Descripción
`filters`	array	`['category', 'price', 'stock']`	Filtros activos
`style`	string	`expanded`	Estilo: expanded, compact, accordion
`showCount`	bool	`true`	Contadores de productos
`showReset`	bool	`true`	Botón de restablecer
`columns`	number	`1`	Columnas de filtros
`collapsible`	bool	`true`	Secciones plegables

Panel lateral

Selección de filtros:

Casillas de verificación para cada tipo de filtro
Ordenación mediante arrastrar y soltar
Configuración por filtro (p. ej. rangos de precio)

Apariencia:

Estilo de visualización (expanded, compact, accordion)
Número de columnas
Contadores (sí/no)
Botón de restablecer (sí/no)
Plegado/desplegado por defecto

Avanzado:

Modo AJAX / respaldo GET
Clases CSS adicionales

Filtros disponibles

El bloque detecta automáticamente los filtros disponibles según los datos de los productos:

Filtro	Tipo	Descripción
`category`	Jerarquía	Categorías de productos
`price`	Range slider	Rango de precios
`stock`	Checkbox	Estado de inventario
`sale`	Checkbox	Solo en oferta
`brand`	Lista	Fabricante/marca
`pa_*`	Lista/Swatch	Atributos de productos
`rating`	Estrellas	Valoración de clientes

Filtro de renderizado

add_filter('polski/blocks/ajax_filters/output', function (string $html, array $attributes): string {
    return $html;
}, 10, 2);

Ubicación en la barra lateral

El bloque de filtros AJAX funciona mejor en la barra lateral de la página de la tienda. En un tema de bloques (FSE), añádalo a la plantilla Archive: Product en la columna lateral.

En temas clásicos, utilice el bloque en el área de widgets Shop Sidebar.

Bloque: slider de productos

Nombre del bloque: polski/product-slider

Inserta un carrusel de productos con navegación por flechas y puntos de paginación opcionales.

Atributos del bloque

Atributo	Tipo	Por defecto	Descripción
`type`	string	`latest`	Tipo: related, sale, featured, bestsellers, latest, category, ids
`limit`	number	`8`	Límite de productos
`columns`	number	`4`	Columnas en escritorio
`columnsTablet`	number	`2`	Columnas en tableta
`columnsMobile`	number	`1`	Columnas en móvil
`category`	string	“	Slug de categoría
`productIds`	array	`[]`	IDs de productos
`showArrows`	bool	`true`	Flechas de navegación
`showDots`	bool	`false`	Puntos de paginación
`autoplay`	bool	`false`	Desplazamiento automático
`autoplaySpeed`	number	`5000`	Pausa entre slides (ms)
`gap`	string	`16px`	Espacio entre tarjetas
`title`	string	“	Título
`orderby`	string	`date`	Ordenar por
`order`	string	`DESC`	Dirección

Panel lateral

Fuente de productos:

Tipo de slider (desplegable con opciones)
Selección de categoría (para type=category)
Selección de productos (para type=ids) - búsqueda con autocompletado
Límite de productos
Ordenación

Visualización:

Columnas (escritorio / tableta / móvil)
Espacio (gap)
Flechas (sí/no)
Puntos (sí/no)
Título

Animación:

Autoplay (sí/no)
Velocidad de autoplay (slider 1000-10000 ms)
Pausa al pasar el cursor

Vista previa en el editor

El bloque renderiza una vista previa del slider directamente en el editor de Gutenberg (renderizado del lado del servidor). La vista previa muestra productos reales de la base de datos, lo que permite evaluar la apariencia antes de publicar.

Si la tienda no tiene productos que coincidan con el tipo seleccionado (p. ej. sin productos en oferta), el bloque muestra un marcador de posición con un mensaje.

Filtro de renderizado

add_filter('polski/blocks/product_slider/output', function (string $html, array $attributes): string {
    return $html;
}, 10, 2);

// Modificar la consulta de productos
add_filter('polski/blocks/product_slider/query_args', function (array $args, array $attributes): array {
    // Excluir productos de la categoría "hidden"
    $args['tax_query'][] = [
        'taxonomy' => 'product_cat',
        'field'    => 'slug',
        'terms'    => 'hidden',
        'operator' => 'NOT IN',
    ];
    return $args;
}, 10, 2);

Compatibilidad con temas de bloques (FSE)

Los bloques de Polski for WooCommerce funcionan por completo con temas de bloques (Full Site Editing). Se pueden insertar en:

Plantillas de página
Plantillas de archivo de productos
Partes de plantilla - cabecera, pie de página, barra lateral
Patrones

Aplicar estilos a los bloques

Cada bloque genera clases CSS siguiendo la convención BEM. Además, los bloques admiten los ajustes de estilo nativos de Gutenberg:

Colores (texto, fondo)
Tipografía (tamaño, grosor, familia tipográfica)
Márgenes y rellenos (spacing)
Borde

Resolución de problemas

Los bloques no aparecen en el insertador - asegúrese de que el módulo correspondiente esté activo en WooCommerce > Polski > Módulos de la tienda. Los bloques requieren la activación del módulo correspondiente.

La vista previa del bloque está vacía - compruebe que la tienda tenga productos que coincidan con el tipo seleccionado. Una base de datos de productos vacía no generará una vista previa.

Los bloques no funcionan en Elementor - estos bloques están diseñados para el editor de Gutenberg. Para Elementor, utilice shortcodes o widgets de Elementor dedicados (disponibles para la búsqueda AJAX).

Informar de problemas: github.com/wppoland/polski/issues

Esta página tiene únicamente carácter informativo y no constituye asesoramiento legal. Consulte a un abogado antes de la implementación. Polski for WooCommerce es software de código abierto (GPLv2) proporcionado sin garantía.