WP Manifestindependent plugin directory
manifest / editor / ud-team-cards-block

UD Block: Team Cards Block

Container- und Karten-Block zur Darstellung von Teammitgliedern mit optionalen Kontaktdaten.

by ulrich.digital gmbh · github.com/ulrich-digital/ud-team-cards-block

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/ulrich-digital/ud-team-cards-block/archive/refs/heads/main.zip
Readme github.com/ulrich-digital/ud-team-cards-block ↗

Zwei Gutenberg-Blöcke zur strukturierten Darstellung von Teammitgliedern mit Bild, Funktion, Kontaktdaten und optionalem Profillink.

Übersicht

Dieses Plugin stellt zwei Blöcke zur Verfügung:

  • Team Cards (Container): Gruppiert mehrere Team Cards und steuert das Layout
  • Team Card (Einzelelement): Stellt eine Person mit Bild, Name, Funktion sowie optionalen Kontakt- und Profillinks dar

Der Container sorgt für eine einheitliche Kartenstruktur. Die Inhalte jeder Person werden direkt in der jeweiligen Team Card gepflegt.

Funktionen

  • Container-Block für strukturierte Team-Layouts
  • Einzelne Team Cards mit:
    • Name und Funktion
    • Bild und Alt-Text aus der WordPress-Mediathek
    • optionaler E-Mail-Adresse und Telefonnummer
  • Direkte Kontaktaktionen über E-Mail- und Telefon-Icons
  • Optionaler Profillink als Pfeil-Icon
  • Linkauswahl direkt in der Team Card
  • Mehrere Team Cards innerhalb eines Containers möglich
  • Responsive Darstellung
  • Anchor-Unterstützung für beide Blöcke

Rendering-Kontext

Team Cards (Container)

  • Verantwortlich für Layout und Gruppierung
  • Unterstützt Align (wide / full) sowie Spacing (Margin / Padding)

Team Card (Einzelblock)

  • Statischer Block mit gespeicherten Attributen
  • Rendert Bild, Text und optionale Kontaktaktionen direkt im Frontend

Editor

Gutenberg-Editor mit zwei Team Cards, direkt bearbeitbaren Personendaten und Linksteuerung innerhalb der Karten.

Die Inhalte werden direkt im Block gepflegt:

  • Name und Funktion als direkt bearbeitbare Textinhalte
  • Bildauswahl über die WordPress-Mediathek
  • E-Mail-Adresse und Telefonnummer als optionale Eingabefelder
  • Profillink über das Link-Symbol setzen, bearbeiten oder entfernen

Frontend

Frontend-Darstellung zweier Team Cards mit Porträt, Funktion sowie Icon-Links für E-Mail, Telefon und Profil.

Die Team Cards erscheinen als strukturierte Kartenansicht innerhalb des Containers. E-Mail und Telefon werden als runde Icon-Links ausgegeben, der optionale Profillink als Pfeil. Farben und Abstände lassen sich über die Block-Styles und CSS Custom Properties auf das jeweilige Theme abstimmen.

Technische Hinweise

  • Block-Registrierung erfolgt dynamisch über block.json im src/blocks-Verzeichnis
  • Zwei getrennte Blöcke:
    • ud/team-cards (Container)
    • ud/team-card (Einzelkarte)
  • Attribute der Team Card umfassen Name, Funktion, Bild, Alt-Text, E-Mail-Adresse, Telefonnummer und Profillink
  • Plugin lädt zentrale Funktionen über Includes (helpers.php, render.php, enqueue.php)

Einblicke in die Umsetzung

Der Beitrag gibt Einblick in die entwickelte Lösung und ihre Funktionsweise.

Autor

ulrich.digital gmbh

Lizenz

Dieses Projekt steht unter der ulrich.digital Nutzungslizenz 1.0.

Die unveränderte Software darf in eigenen und kommerziellen Projekten eingesetzt werden. Auf jeder öffentlich erreichbaren Website oder Anwendung muss ulrich.digital gmbh im Impressum, in einem Credits-Bereich oder auf einer vergleichbaren Informationsseite genannt werden. Verkauf, eigenständige Weitergabe, Unterlizenzierung und Änderungen bedürfen der vorherigen schriftlichen Zustimmung von ulrich.digital gmbh.

Komponenten Dritter behalten ihre jeweiligen Lizenz- und Nutzungsbedingungen.