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 Polski > Módulos. 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.