UD Block: Link Filter Container

Ein WordPress-Block, der als Container für mehrere UD-Link-Blöcke dient und deren Anzeige dynamisch anhand von Filter-Interaktionen gesteuert wird. Die Filterung erfolgt über Isotope, wobei der Block als empfangendes System ausschliesslich auf externe Filterwerte reagiert.

Funktionen

• Container-Block für mehrere ud/link-block-Instanzen
• Reagiert auf externe Filter-Trigger (z. B. Buttons, Kategorien, Attribute)
• Übergibt Filterwerte an Isotope zur Steuerung von Sichtbarkeit und Gruppierung
• Frontend-Optimierung über frontend.js und frontend.css
• Editor-Darstellung mit Hinweis-Text und Container-Styling

Empfangen und Verarbeiten von Filtern

Der Link Filter Container ist ein rein empfangendes System. Er reagiert ausschliesslich auf Filterinformationen, die von aussen bereitgestellt werden.

Der Block kann folgende Eingaben empfangen und verarbeiten:

1. Aktive Filterwerte aus .filter-button-group

   • Empfangen über das Attribut data-current-filter
   • Typische Werte: Kategorie, Tag, Typ
   • "*" (= keine Filterung) wird berücksichtigt

2. Filterbare Werte der einzelnen Link-Blöcke

   • Empfangen über DOM-Attribute wie data-tags oder data-category
   • Diese Werte steuern, ob ein Link-Block zu einem aktiven Filter passt

Anhand dieser beiden Quellen entscheidet der Container (via Isotope):

• Welche Link-Blöcke sichtbar bleiben
• Welche ausgeblendet werden
• In welcher Reihenfolge Links dargestellt werden

Der Block sendet selbst keine Filterdaten zurück und ersetzt kein anderes Filtersystem. Er erweitert ausschliesslich die vorhandene Logik.

Screenshots

Die Abbildung zeigt den Aufbau des Link Filter Containers:

1. Obere Reihe – Filterelemente Externe Filter (z. B. Kategorien oder Attribute) steuern, welche Links sichtbar bleiben. Jeder Filter ist farblich hervorgehoben und repräsentiert eine aktive oder inaktive Auswahl.

2. Grosser Container (gestrichelte Linie) Dieser Bereich stellt den eigentlichen Link Filter Container dar. Er nimmt alle untergeordneten Link-Blöcke auf und reagiert auf Filter-Signale.

3. Accordion-Gruppen (3 Spalten) Farbliche Spalten repräsentieren Kategorien oder Filtergruppen. Jede Box ist ein einzelner ud/link-block. Der Container blendet nicht passende Blöcke aus oder markiert sie als klickbar, abhängig vom aktiven Filter.

Technische Details

Block-Definition

Der Block wird über block.json registriert und bindet eigene Editor- und Frontend-Dateien ein.

Wesentliche Dateien

• block.json – Block-Definition (Name, Scripts, Styles, Meta)
• index.js – Editor-Logik
• style.css – Editor-Styles
• frontend.js – Filter- und Isotope-Integration
• frontend.css – Frontend-Styling für Link-Blöcke und Container

Relevante CSS-Klassen

• .link-block-container – Grundcontainer
• .wp-block-ud-link-block – einzelner Link
• .link-editor-hint – Editor-Hinweis für Redakteure

Verhalten im Frontend

• Link-Blöcke werden von Isotope sortiert, gruppiert und ein-/ausgeblendet
• Der Container selbst steuert keine Animationen, sondern übergibt Filterwerte an Isotope
• Darstellung der Links erfolgt in einem flexiblen, visuell reduzierten Layout

Beispiel (vereinfachtes Markup)

<div class="link-block-container">
    <div class="wp-block-ud-link-block" data-tags="abc">
        <a href="#">
            <span class="ud-link-block__title">Beispiel-Link</span>
        </a>
    </div>

    <div class="wp-block-ud-link-block" data-tags="xyz">
        …
    </div>
</div>

Installation

• Plugin-Ordner in wp-content/plugins/ ablegen
• Plugin in WordPress aktivieren
• Im Site-Editor oder Block-Editor den Block Link Filter Container hinzufügen
• Beliebig viele UD-Link-Blöcke einfügen

Anforderungen

• WordPress 6.4+
• Gutenberg / Block-Editor aktiviert
• UD Link Block installiert (Abhängigkeit)
• Isotope muss im Frontend geladen sein

Autor

ulrich.digital gmbh

Lizenz

GPL v2 or later https://www.gnu.org/licenses/gpl-2.0.html