Sven/JuConnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Patches

Browse Source
This commit is contained in:
Sven Steinert
2026-02-14 22:48:34 +01:00
parent 613f56e21b
commit 28b5061650
7 changed files with 523 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

313
juconnect-patterns-plugin/juconnect-patterns/juconnect-patterns.php
View File

@@ -2,7 +2,7 @@
/**
* Plugin Name: JuConnect Patterns
* Description: Gutenberg Block Patterns fuer JuConnect (Styleguide-Klassen).
* Version: 0.1
* Version: 0.2
*/
if (!defined('ABSPATH')) exit;
@@ -294,6 +294,317 @@ HTML
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
]);
register_block_pattern('juconnect/single-card-with-graphic-right', [
'title' => __('Info Card + Grafik rechts', 'juconnect'),
'categories' => ['juconnect'],
'description' => __('Zweispaltig: links eine einzelne Inhaltskarte, rechts Bild/Grafik.', 'juconnect'),
'content' => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">Leistung im Ueberblick</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Kerninformationen klar und ruhig dargestellt.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"grid grid--2"} -->
<div class="wp-block-group grid grid--2"><!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":3,"className":"h3"} -->
<h3 class="h3">Wann ist dieses Angebot passend?</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Fuer Traeger mit klaren Zielen, transparenten Ablaeufen und verbindlicher Kommunikation.</p>
<!-- /wp:paragraph -->
<!-- wp:list {"className":"list"} -->
<ul class="list"><li>klare Zustaendigkeiten</li><li>regelmaessige Rueckmeldungen</li><li>dokumentierte Entwicklung</li></ul>
<!-- /wp:list -->
<!-- wp:buttons {"className":"row wrap"} -->
<div class="wp-block-buttons row wrap"><!-- wp:button {"className":"btn--primary"} -->
<div class="wp-block-button btn--primary"><a class="wp-block-button__link wp-element-button" href="#kontakt">Kontakt aufnehmen</a></div>
<!-- /wp:button -->
<!-- wp:button {"className":"btn--secondary"} -->
<div class="wp-block-button btn--secondary"><a class="wp-block-button__link wp-element-button" href="#details">Mehr Details</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"img img--rounded"} -->
<figure class="wp-block-image size-large img img--rounded"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='560'%3E%3Crect width='100%25' height='100%25' fill='%23eef1f3'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23607384' font-family='Arial' font-size='28'%3EGrafik ersetzen%3C/text%3E%3C/svg%3E" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Rechts: Illustration oder Projektfoto.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
]);
register_block_pattern('juconnect/single-card-with-graphic-left', [
'title' => __('Grafik links + Info Card', 'juconnect'),
'categories' => ['juconnect'],
'description' => __('Zweispaltig: links Bild/Grafik, rechts eine einzelne Inhaltskarte.', 'juconnect'),
'content' => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">Leistung im Ueberblick</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Kerninformationen klar und ruhig dargestellt.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"grid grid--2"} -->
<div class="wp-block-group grid grid--2"><!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"img img--rounded"} -->
<figure class="wp-block-image size-large img img--rounded"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='560'%3E%3Crect width='100%25' height='100%25' fill='%23eef1f3'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23607384' font-family='Arial' font-size='28'%3EGrafik ersetzen%3C/text%3E%3C/svg%3E" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Links: Illustration oder Projektfoto.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":3,"className":"h3"} -->
<h3 class="h3">Wann ist dieses Angebot passend?</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Fuer Traeger mit klaren Zielen, transparenten Ablaeufen und verbindlicher Kommunikation.</p>
<!-- /wp:paragraph -->
<!-- wp:list {"className":"list"} -->
<ul class="list"><li>klare Zustaendigkeiten</li><li>regelmaessige Rueckmeldungen</li><li>dokumentierte Entwicklung</li></ul>
<!-- /wp:list -->
<!-- wp:buttons {"className":"row wrap"} -->
<div class="wp-block-buttons row wrap"><!-- wp:button {"className":"btn--primary"} -->
<div class="wp-block-button btn--primary"><a class="wp-block-button__link wp-element-button" href="#kontakt">Kontakt aufnehmen</a></div>
<!-- /wp:button -->
<!-- wp:button {"className":"btn--secondary"} -->
<div class="wp-block-button btn--secondary"><a class="wp-block-button__link wp-element-button" href="#details">Mehr Details</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
]);
register_block_pattern('juconnect/section-grid-2', [
'title' => __('Section + 2 Cards', 'juconnect'),
'categories' => ['juconnect'],
'description' => __('Standard-Zweispalter fuer Inhalte oder Angebotskarten.', 'juconnect'),
'content' => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">Schwerpunkte</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Zwei zentrale Themen kompakt nebeneinander.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"grid grid--2"} -->
<div class="wp-block-group grid grid--2"><!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":3,"className":"h3"} -->
<h3 class="h3">Begleitung</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Verlaessliche Begleitung mit klarer Struktur fuer alle Beteiligten.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a class="link" href="#!">Mehr erfahren</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":3,"className":"h3"} -->
<h3 class="h3">Koordination</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Abgestimmte Kommunikation zwischen Traegern, Familien und Fachkraeften.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a class="link" href="#!">Mehr erfahren</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
]);
register_block_pattern('juconnect/kpi-overview-3', [
'title' => __('KPI Ueberblick (3 Karten)', 'juconnect'),
'categories' => ['juconnect'],
'description' => __('Drei Kennzahlenkarten fuer Verlaesslichkeit, Bearbeitungszeit und Reichweite.', 'juconnect'),
'content' => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">Fakten im Ueberblick</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Beispielwerte fuer eine transparente Darstellung.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"grid grid--3"} -->
<div class="wp-block-group grid grid--3"><!-- wp:group {"className":"card card--tight"} -->
<div class="wp-block-group card card--tight"><!-- wp:group {"className":"kpi"} -->
<div class="wp-block-group kpi"><!-- wp:paragraph {"className":"kpi__label"} -->
<p class="kpi__label">Antwortzeit</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"kpi__value"} -->
<p class="kpi__value">&lt; 48h</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"card card--tight"} -->
<div class="wp-block-group card card--tight"><!-- wp:group {"className":"kpi"} -->
<div class="wp-block-group kpi"><!-- wp:paragraph {"className":"kpi__label"} -->
<p class="kpi__label">Abgestimmte Plaene</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"kpi__value"} -->
<p class="kpi__value">95%</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"card card--tight"} -->
<div class="wp-block-group card card--tight"><!-- wp:group {"className":"kpi"} -->
<div class="wp-block-group kpi"><!-- wp:paragraph {"className":"kpi__label"} -->
<p class="kpi__label">Kooperationspartner</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"kpi__value"} -->
<p class="kpi__value">24</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
]);
register_block_pattern('juconnect/contact-cta-split', [
'title' => __('Kontakt CTA (Split)', 'juconnect'),
'categories' => ['juconnect'],
'description' => __('Linke Infokarte mit Aktionen, rechte Karte mit Kontaktfakten.', 'juconnect'),
'content' => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"grid grid--2"} -->
<div class="wp-block-group grid grid--2"><!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:paragraph {"className":"badge badge--info"} -->
<p class="badge badge--info">Naechster Schritt</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">Unverbindlich Kontakt aufnehmen</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Wir melden uns zeitnah und klaeren den passenden Rahmen fuer Ihr Anliegen.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"className":"row wrap"} -->
<div class="wp-block-buttons row wrap"><!-- wp:button {"className":"btn--primary"} -->
<div class="wp-block-button btn--primary"><a class="wp-block-button__link wp-element-button" href="#kontakt">Anfrage senden</a></div>
<!-- /wp:button -->
<!-- wp:button {"className":"btn--ghost"} -->
<div class="wp-block-button btn--ghost"><a class="wp-block-button__link wp-element-button" href="#telefon">Telefonisch sprechen</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"card card--pad"} -->
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":3,"className":"h3"} -->
<h3 class="h3">Kontaktzeiten</h3>
<!-- /wp:heading -->
<!-- wp:group {"className":"kpi"} -->
<div class="wp-block-group kpi"><!-- wp:paragraph {"className":"kpi__label"} -->
<p class="kpi__label">Mo - Fr</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"kpi__value"} -->
<p class="kpi__value">08:00 - 17:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"kpi"} -->
<div class="wp-block-group kpi"><!-- wp:paragraph {"className":"kpi__label"} -->
<p class="kpi__label">E-Mail</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"kpi__value"} -->
<p class="kpi__value">kontakt@juconnect.de</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"callout callout--info"} -->
<div class="wp-block-group callout callout--info"><!-- wp:paragraph {"className":"callout__title"} -->
<p class="callout__title">Hinweis</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"callout__text"} -->
<p class="callout__text">Bitte Anlass und Rueckrufzeit kurz angeben.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
]);
register_block_pattern('juconnect/downloads-table', [
'title' => __('Downloads (Tabelle)', 'juconnect'),
'categories' => ['juconnect'],
'description' => __('Downloadbereich mit Tabelle im Styleguide-Look.', 'juconnect'),
'content' => <<<HTML
<!-- wp:group {"className":"section"} -->
<div class="wp-block-group section"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">Downloads</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Dokumente, Vorlagen und Nachweise auf einen Blick.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"card card--pad layout__table"} -->
<div class="wp-block-group card card--pad layout__table"><!-- wp:html -->
<div class="tablewrap">
<table class="table">
<thead>
<tr><th>Dokument</th><th>Status</th><th>Aktion</th></tr>
</thead>
<tbody>
<tr><td>Leistungsbeschreibung</td><td><span class="badge badge--info">Entwurf</span></td><td><a class="link" href="#!">Oeffnen</a></td></tr>
<tr><td>Datenschutz</td><td><span class="badge badge--success">Final</span></td><td><a class="link" href="#!">Oeffnen</a></td></tr>
<tr><td>Ansprechpartner</td><td><span class="badge badge--warn">Update</span></td><td><a class="link" href="#!">Oeffnen</a></td></tr>
</tbody>
</table>
</div>
<!-- /wp:html --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
]);
});