Install
This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.
Install straight from GitHub with WP-CLI:
wp plugin install https://github.com/exzenter/press-cards-wp/archive/refs/heads/main.zipGutenberg-Block für Pressezitate / Testimonials – wie im Bereich „What the press says“ auf mominstruments.com.
- Desktop: So viele Karten nebeneinander, wie bei der eingestellten Mindestbreite Platz haben (auf volle Breite gestreckt). Was nicht passt, slidet – es wird nie umgebrochen.
- Tablet / Mobile: Gleiche Logik, auf dem Handy in der Regel eine Karte – wischbar, mit Pfeilen und Punkten.
- Autoplay (optional), pausiert bei Hover, Touch, Tastaturfokus, unsichtbarem Tab und bei „Bewegung reduzieren“.
- Kein Build-Schritt: reines PHP/JS/CSS, kein npm.
Installation
- Ordner
press-testimonials-sliderzippen (oder die mitgeliefertepress-testimonials-slider.zipnehmen). - WordPress → Plugins → Installieren → Plugin hochladen → aktivieren.
Alternativ den Ordner per FTP nach
wp-content/plugins/kopieren.
Voraussetzungen: WordPress 6.1+, PHP 7.4+.
Benutzung
- Im Editor den Block „Testimonials Slider“ einfügen (Suche: „testimonial“, „press“, „slider“).
- Es werden drei leere Karten angelegt. Pro Karte:
- Logo – auf „Add logo“ klicken (Mediathek). Klick aufs Logo ersetzt es.
- Zitat – direkt in die Karte tippen.
Enter= Zeilenumbruch. Text markieren → Link setzen (wie im Original die erste Zeile). - Name (z. B. „CDM“) und Untertitel (z. B. „Create Digital Music“).
- In der rechten Sidebar: Link-URL (Logo und Name verlinken dorthin), „In neuem Tab öffnen“, Alt-Text, Invert logo colors (schwarzes Logo → weiß, praktisch bei dunklem Hintergrund – so wird es auch auf der aktuellen Seite gemacht).
- „+ Add testimonial“ rechts neben den Karten fügt weitere Karten hinzu. Reihenfolge ändern über die Pfeile in der Block-Toolbar.
Einstellungen (Eltern-Block, rechte Sidebar)
Alle Standardwerte entsprechen dem Look der aktuellen Seite – ohne Änderung sieht der Block genauso aus wie dort.
| Panel | Option | Standard |
|---|---|---|
| Layout | Karten pro Breakpoint – Desktop (≥ 1024 px): Auto oder 1–8; Tablet (600–1023 px): Auto oder 1–4; Mobile (< 600 px): Auto oder 1–3 | Auto / Auto / Auto |
| Layout | Mindestbreite pro Karte (px) – im Auto-Modus steuert sie, wie viele Karten nebeneinander passen | 300 |
| Layout | Max. Karten nebeneinander – Obergrenze für sehr breite Bildschirme (z. B. 6 auf 4K), „Reset“ = unbegrenzt | unbegrenzt |
| Layout | Abstand zwischen Karten (px) | 24 |
| Layout | Kartenhöhe: „Equal“ (alle Karten einer Reihe gleich hoch, Name unten bündig) oder „Auto“ (jede Karte so hoch wie ihr Inhalt; die Gesamthöhe animiert beim Sliden auf die höchste sichtbare Karte) | Equal |
| Layout | Logo auf Mobile ausblenden (< 600 px) | aus |
| Slider | Loop: „Infinite carousel“ (läuft endlos in eine Richtung weiter) oder „Rewind to start“ (springt nach der letzten Karte zurück zur ersten) | Infinite |
| Slider | Autoplay + Intervall (Sekunden) | an, 6 s |
| Slider | Pfeile / Punkte anzeigen | an / an |
| Slider | Barrierefreie Bezeichnung (Screenreader) | „Testimonials“ |
| Card style | Eckenradius / Rahmenstärke (px) | 10 / 1 |
| Card style | Innenabstand horizontal / vertikal (px) | 28 / 24 |
| Card style | Schatten (none / soft / medium / strong) | none |
| Card style | Textausrichtung (auch in der Block-Toolbar) | links |
| Card style | Karte bei Hover anheben | aus |
| Typography | Zitat-Schriftgröße (px, „Reset“ = responsiv 14–17 px) | responsiv |
| Typography | Zitat-Zeilenhöhe / kursiv | 1.65 / aus |
| Typography | Schriftgröße Name / Untertitel (px) | 18 / 14 |
| Typography | Zitat-Icon anzeigen + Größe (px) | an, 30 |
| Typography | Trennlinie über dem Namen | an |
| Logo area | Mindesthöhe des Logo-Bereichs / max. Logo-Höhe / Innenabstand (px) | 124 / 72 / 28 |
| Arrows & dots | Pfeilposition auf Desktop (außen halb über der Kante / innen) | außen |
| Arrows & dots | Pfeilgröße / Punktgröße (px) | 44 / 10 |
| Colors | Akzent, Rahmen, Zitat-Icon, Karten-Hintergrund, Logo-Bereich, Text, Untertitel, Trennlinie, Pfeil-Hintergrund, Pfeil-Icon, Pfeil-Hover, Punkt, aktiver Punkt | wie auf der aktuellen Seite |
Farben, die auf „(default: …)“ stehen, erben ohne Angabe von Akzent bzw. Rahmen – man muss sie nur setzen, wenn man abweichen will.
Der Block unterstützt Breite „Weit“ / „Volle Breite“ und Abstände (Margin/Padding).
Beispiel-Breiten (alles auf „Auto“, Mindestbreite 300 px, Abstand 24 px)
| Container | Karten nebeneinander |
|---|---|
| ≥ 1296 px | 4 |
| 948 – 1295 px | 3 |
| 624 – 947 px | 2 |
| < 624 px | 1 |
Passen alle Karten auf einmal, werden Pfeile/Punkte automatisch ausgeblendet und die Karten auf die volle Breite gestreckt.
Wie der Endlos-Modus funktioniert
Es werden keine Karten dupliziert – das HTML bleibt exakt so groß wie die Anzahl der Testimonials. Stattdessen werden die vorhandenen Karten im DOM rotiert (die erste ans Ende bzw. die letzte nach vorn) und die Scrollposition im selben Frame um genau eine Kartenbreite korrigiert. Das ist unsichtbar, funktioniert mit Pfeilen, Punkten, Autoplay, Tastatur und beim Wischen. Im Ruhezustand liegt immer eine Karte „Puffer“ links vom sichtbaren Bereich, damit man auch rückwärts wischen kann.
Im Endlos-Modus schaltet der Slider um jeweils eine Karte weiter (die Punkte zeigen dann die Karte ganz links). Im Rewind-Modus wird seitenweise geblättert (z. B. 3 Karten auf einmal).
Anpassen per CSS
Alle Farben/Größen sind CSS-Variablen auf dem Block (.wp-block-pts-testimonials):
--pts-accent, --pts-border, --pts-border-w, --pts-quote, --pts-quote-size, --pts-card-bg, --pts-shadow, --pts-align,
--pts-logo-bg, --pts-logo-h, --pts-logo-img-h, --pts-logo-pad, --pts-text, --pts-sub, --pts-sep,
--pts-font-quote, --pts-lh, --pts-font-name, --pts-font-sub, --pts-pad-x, --pts-pad-y,
--pts-min, --pts-gap, --pts-radius, --pts-nav-size, --pts-nav-bg, --pts-nav-color, --pts-nav-hover, --pts-dot-size, --pts-dot, --pts-dot-active.
Dateien
press-testimonials-slider/
├── press-testimonials-slider.php Plugin-Header, Registrierung der Assets & Blöcke
├── assets/
│ ├── editor.js Editor (wp.element.createElement, kein JSX)
│ ├── editor.css Editor-Styles
│ ├── style.css Frontend + Editor Basis-Styles
│ └── view.js Slider-Logik im Frontend
└── blocks/
├── testimonials/ Eltern-Block „Testimonials Slider“ (block.json + render.php)
└── testimonial/ Kind-Block „Testimonial“ (block.json + render.php)Beide Blöcke werden serverseitig gerendert (render.php). Dadurch gibt es bei späteren Änderungen am HTML keine „Dieser Block enthält unerwarteten Inhalt“-Meldungen.