Gutenberg blocks

Drei Gutenberg-Blöcke zum Einfügen von Shop-Modulen. Jeder Block bietet eine Vorschau im Editor (Server-side Render) und eine Konfiguration im seitlichen Panel.

Anforderungen

• WordPress 6.0 oder neuer
• Gutenberg-Blockeditor (nicht der klassische Editor)
• Das entsprechende Modul in den Einstellungen von Polski for WooCommerce aktiviert

Blöcke einfügen

Die Blöcke von Polski for WooCommerce finden Sie im Block-Inserter (die Schaltfläche +) in der Kategorie Polski for WooCommerce. Sie können sie auch über den Namen finden, indem Sie “Polski” oder den Modulnamen eingeben.

Block: AJAX-Suche

Blockname: polski/ajax-search

Fügt ein Suchfeld mit AJAX-Vorschlägen ein. Die Ergebnisse erscheinen während der Eingabe eines Suchbegriffs in einem Dropdown.

Block-Attribute

Attribut	Typ	Standard	Beschreibung
placeholder	string	Search products...	Platzhaltertext im Feld
width	string	100%	Feldbreite
showIcon	bool	true	Lupensymbol
showCategory	bool	false	Dropdown zur Kategoriefilterung
limit	number	8	Limit der Vorschläge
minChars	number	3	Min. Zeichen für die Suche
style	string	default	Stil: default, rounded, flat

Seitliches Panel (Inspector Controls)

Das seitliche Panel des Blocks enthält folgende Abschnitte:

Sucheinstellungen:

• Platzhaltertext
• Mindestanzahl an Zeichen
• Ergebnislimit
• Kategoriefilter (ja/nein)

Darstellung:

• Feldbreite
• Stil (default, rounded, flat)
• Lupensymbol (ja/nein)
• Rahmen (ja/nein)
• Schatten (ja/nein)

Erweitert:

• Zusätzliche CSS-Klassen
• HTML-Anker

Beispiel für die Blockregistrierung (interne Implementierung)

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,
        ],
    ],
]);

Render-Filter

add_filter('polski/blocks/ajax_search/output', function (string $html, array $attributes): string {
    // Block-HTML anpassen
    return $html;
}, 10, 2);

Block: AJAX-Filter

Blockname: polski/ajax-filters

Fügt eine Reihe von AJAX-Filtern ein, um die Produktliste ohne Neuladen der Seite zu filtern.

Block-Attribute

Attribut	Typ	Standard	Beschreibung
filters	array	['category', 'price', 'stock']	Aktive Filter
style	string	expanded	Stil: expanded, compact, accordion
showCount	bool	true	Produktzähler
showReset	bool	true	Zurücksetzen-Schaltfläche
columns	number	1	Filterspalten
collapsible	bool	true	Einklappbare Abschnitte

Seitliches Panel

Filterauswahl:

• Kontrollkästchen für jeden Filtertyp
• Sortierung der Reihenfolge per Drag & Drop
• Konfiguration je Filter (z. B. Preisspannen)

Darstellung:

• Anzeigestil (expanded, compact, accordion)
• Anzahl der Spalten
• Zähler (ja/nein)
• Zurücksetzen-Schaltfläche (ja/nein)
• Standardmäßig eingeklappt/ausgeklappt

Erweitert:

• Modus AJAX / GET-Fallback
• Zusätzliche CSS-Klassen

Verfügbare Filter

Der Block erkennt verfügbare Filter automatisch anhand der Produktdaten:

Filter	Typ	Beschreibung
category	Hierarchie	Produktkategorien
price	Range-Slider	Preisspanne
stock	Checkbox	Lagerstatus
sale	Checkbox	Nur im Angebot
brand	Liste	Hersteller/Marke
pa_*	Liste/Swatch	Produktattribute
rating	Sterne	Kundenbewertung

Render-Filter

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

Platzierung in der Seitenleiste

Der AJAX-Filter-Block funktioniert am besten in der Seitenleiste der Shop-Seite. In einem Block-Theme (FSE) fügen Sie ihn im Template Archive: Product in die Seitenspalte ein.

In klassischen Themes verwenden Sie den Block im Widget-Bereich Shop Sidebar.

Block: Produkt-Slider

Blockname: polski/product-slider

Fügt ein Produktkarussell mit Pfeilnavigation und optionalen Paginierungspunkten ein.

Block-Attribute

Attribut	Typ	Standard	Beschreibung
type	string	latest	Typ: related, sale, featured, bestsellers, latest, category, ids
limit	number	8	Produktlimit
columns	number	4	Spalten Desktop
columnsTablet	number	2	Spalten Tablet
columnsMobile	number	1	Spalten Mobil
category	string	“	Kategorie-Slug
productIds	array	[]	Produkt-IDs
showArrows	bool	true	Navigationspfeile
showDots	bool	false	Paginierungspunkte
autoplay	bool	false	Automatisches Scrollen
autoplaySpeed	number	5000	Pause zwischen Slides (ms)
gap	string	16px	Abstand zwischen Karten
title	string	“	Titel
orderby	string	date	Sortieren nach
order	string	DESC	Richtung

Seitliches Panel

Produktquelle:

• Slider-Typ (Dropdown mit Optionen)
• Kategorieauswahl (für type=category)
• Produktauswahl (für type=ids) - Suche mit Autovervollständigung
• Produktlimit
• Sortierung

Anzeige:

• Spalten (Desktop / Tablet / Mobil)
• Abstand (Gap)
• Pfeile (ja/nein)
• Punkte (ja/nein)
• Titel

Animation:

• Autoplay (ja/nein)
• Autoplay-Geschwindigkeit (Slider 1000-10000 ms)
• Pause beim Hover

Vorschau im Editor

Der Block rendert eine Slider-Vorschau direkt im Gutenberg-Editor (Server-side Render). Die Vorschau zeigt echte Produkte aus der Datenbank und ermöglicht es, die Darstellung vor der Veröffentlichung zu beurteilen.

Wenn der Shop keine Produkte hat, die dem gewählten Typ entsprechen (z. B. keine Angebotsprodukte), zeigt der Block einen Platzhalter mit einer Meldung an.

Render-Filter

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

// Produktabfrage anpassen
add_filter('polski/blocks/product_slider/query_args', function (array $args, array $attributes): array {
    // Produkte aus der Kategorie "hidden" ausschließen
    $args['tax_query'][] = [
        'taxonomy' => 'product_cat',
        'field'    => 'slug',
        'terms'    => 'hidden',
        'operator' => 'NOT IN',
    ];
    return $args;
}, 10, 2);

Kompatibilität mit Block-Themes (FSE)

Die Blöcke von Polski for WooCommerce funktionieren vollständig mit Block-Themes (Full Site Editing). Sie können eingefügt werden in:

• Seiten-Templates
• Templates für Produktarchive
• Template-Teile - Header, Footer, Seitenleiste
• Patterns

Blöcke stylen

Jeder Block erzeugt CSS-Klassen gemäß der BEM-Konvention. Zusätzlich unterstützen die Blöcke die nativen Stileinstellungen von Gutenberg:

• Farben (Text, Hintergrund)
• Typografie (Größe, Stärke, Schriftfamilie)
• Außen- und Innenabstände (Spacing)
• Rahmen

Fehlerbehebung

Die Blöcke erscheinen nicht im Inserter - stellen Sie sicher, dass das entsprechende Modul unter WooCommerce > Polski > Shop-Module aktiviert ist. Die Blöcke erfordern die Aktivierung des entsprechenden Moduls.

Die Blockvorschau ist leer - prüfen Sie, ob der Shop Produkte hat, die dem gewählten Typ entsprechen. Eine leere Produktdatenbank erzeugt keine Vorschau.

Die Blöcke funktionieren nicht in Elementor - diese Blöcke sind für den Gutenberg-Editor konzipiert. Für Elementor verwenden Sie Shortcodes oder dedizierte Elementor-Widgets (verfügbar für die AJAX-Suche).

Probleme melden: github.com/wppoland/polski/issues

Diese Seite dient ausschließlich Informationszwecken und stellt keine Rechtsberatung dar. Konsultieren Sie vor der Umsetzung einen Anwalt. Polski for WooCommerce ist Open-Source-Software (GPLv2), die ohne Gewährleistung bereitgestellt wird.