300 lines
11 KiB
PHP
300 lines
11 KiB
PHP
<?php
|
|
/**
|
|
* Plugin Name: JuConnect Patterns
|
|
* Description: Gutenberg Block Patterns fuer JuConnect (Styleguide-Klassen).
|
|
* Version: 0.1
|
|
*/
|
|
|
|
if (!defined('ABSPATH')) exit;
|
|
|
|
add_action('init', function () {
|
|
if (!function_exists('register_block_pattern')) return;
|
|
|
|
register_block_pattern_category('juconnect', [
|
|
'label' => __('JuConnect', 'juconnect'),
|
|
]);
|
|
|
|
register_block_pattern('juconnect/hero-pagehead', [
|
|
'title' => __('Hero (Styleguide)', 'juconnect'),
|
|
'categories' => ['juconnect'],
|
|
'description' => __('Hero wie im lokalen Styleguide (einspaltig).', 'juconnect'),
|
|
'content' => <<<HTML
|
|
<!-- wp:group {"className":"hero"} -->
|
|
<div class="wp-block-group hero"><!-- wp:group {"className":"hero__inner"} -->
|
|
<div class="wp-block-group hero__inner"><!-- wp:heading {"level":1,"className":"h1"} -->
|
|
<h1 class="h1">Hilfen zur Erziehung - strukturiert und verlaesslich</h1>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph {"className":"lead"} -->
|
|
<p class="lead">Informationen fuer oeffentliche Traeger und Kooperationspartner.</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">Kontakt</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="#leistungen">Leistungen</a></div>
|
|
<!-- /wp:button --></div>
|
|
<!-- /wp:buttons --></div>
|
|
<!-- /wp:group --></div>
|
|
<!-- /wp:group -->
|
|
HTML
|
|
]);
|
|
|
|
register_block_pattern('juconnect/section-grid-3', [
|
|
'title' => __('Section + 3 Cards', 'juconnect'),
|
|
'categories' => ['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">Leistungen</h2>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Kurz erklaert - Details findest du auf den Unterseiten.</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--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">Card 1</h4>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Kurzbeschreibung.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"className":"card card--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">Card 2</h4>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Kurzbeschreibung.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"className":"card card--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">Card 3</h4>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Kurzbeschreibung.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group --></div>
|
|
<!-- /wp:group --></div>
|
|
<!-- /wp:group -->
|
|
HTML
|
|
]);
|
|
|
|
register_block_pattern('juconnect/steps-4', [
|
|
'title' => __('Ablauf (4 Steps)', 'juconnect'),
|
|
'categories' => ['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">So laeuft's ab</h2>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Transparent und nachvollziehbar.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"className":"grid grid--4"} -->
|
|
<div class="wp-block-group grid grid--4">
|
|
<!-- wp:group {"className":"card card--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">1. Anfrage</h4>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Kontakt aufnehmen, kurz klaeren.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"className":"card card--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">2. Erstgespraech</h4>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Ziele, Rahmen, Erwartungen.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"className":"card card--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">3. Start</h4>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Plan + regelmaessige Termine.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"className":"card card--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">4. Review</h4>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Fortschritt messen, nachsteuern.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
</div>
|
|
<!-- /wp:group --></div>
|
|
<!-- /wp:group -->
|
|
HTML
|
|
]);
|
|
|
|
register_block_pattern('juconnect/steps-4-with-graphic-right', [
|
|
'title' => __('Ablauf (4 Steps) + Grafik rechts', 'juconnect'),
|
|
'categories' => ['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">So laeuft's ab</h2>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Transparent und nachvollziehbar.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"className":"grid grid--2"} -->
|
|
<div class="wp-block-group grid grid--2"><!-- wp:group -->
|
|
<div class="wp-block-group"><!-- wp:group {"className":"grid grid--4"} -->
|
|
<div class="wp-block-group grid grid--4">
|
|
<!-- wp:group {"className":"card card--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">1. Anfrage</h4>
|
|
<!-- /wp:heading -->
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Kontakt aufnehmen, kurz klaeren.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"className":"card card--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">2. Erstgespraech</h4>
|
|
<!-- /wp:heading -->
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Ziele, Rahmen, Erwartungen.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"className":"card card--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">3. Start</h4>
|
|
<!-- /wp:heading -->
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Plan + regelmaessige Termine.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"className":"card card--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">4. Review</h4>
|
|
<!-- /wp:heading -->
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Fortschritt messen, nachsteuern.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
</div>
|
|
<!-- /wp:group --></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='500'%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: Grafik oder Bild.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group --></div>
|
|
<!-- /wp:group --></div>
|
|
<!-- /wp:group -->
|
|
HTML
|
|
]);
|
|
|
|
register_block_pattern('juconnect/steps-4-with-graphic-left', [
|
|
'title' => __('Ablauf (4 Steps) + Grafik links', 'juconnect'),
|
|
'categories' => ['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">So laeuft's ab</h2>
|
|
<!-- /wp:heading -->
|
|
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Transparent und nachvollziehbar.</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='500'%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: Grafik oder Bild.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group -->
|
|
<div class="wp-block-group"><!-- wp:group {"className":"grid grid--4"} -->
|
|
<div class="wp-block-group grid grid--4">
|
|
<!-- wp:group {"className":"card card--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">1. Anfrage</h4>
|
|
<!-- /wp:heading -->
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Kontakt aufnehmen, kurz klaeren.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"className":"card card--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">2. Erstgespraech</h4>
|
|
<!-- /wp:heading -->
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Ziele, Rahmen, Erwartungen.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"className":"card card--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">3. Start</h4>
|
|
<!-- /wp:heading -->
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Plan + regelmaessige Termine.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
|
|
<!-- wp:group {"className":"card card--pad"} -->
|
|
<div class="wp-block-group card card--pad"><!-- wp:heading {"level":4,"className":"h4"} -->
|
|
<h4 class="h4">4. Review</h4>
|
|
<!-- /wp:heading -->
|
|
<!-- wp:paragraph {"className":"muted"} -->
|
|
<p class="muted">Fortschritt messen, nachsteuern.</p>
|
|
<!-- /wp:paragraph --></div>
|
|
<!-- /wp:group -->
|
|
</div>
|
|
<!-- /wp:group --></div>
|
|
<!-- /wp:group --></div>
|
|
<!-- /wp:group --></div>
|
|
<!-- /wp:group -->
|
|
HTML
|
|
]);
|
|
});
|