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

Plugin erweitert, um die CSS-Datei zu aktualisieren und die neuen Styles für die Juconnect Patterns hinzuzufügen. Außerdem wurden einige Anpassungen am Footer und den Funktionen des Juconnect Strict Themes vorgenommen, um die Kompatibilität mit den neuen Patterns zu gewährleisten. Alle Änderungen wurden in den entsprechenden ZIP-Dateien aktualisiert, um sicherzustellen, dass die neuesten Versionen der Plugins und Themes bereitgestellt werden können.
Some checks failed
Deploy static site to pages / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Sven Steinert
2026-02-19 20:09:15 +01:00
parent 60cade23b2
commit 41e4f5b591
7 changed files with 791 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
juconnect-patterns-plugin/juconnect-patterns.zip
View File

Binary file not shown.

219
juconnect-patterns-plugin/juconnect-patterns/assets/css/juconnect-patterns.css Normal file
View File

@@ -0,0 +1,219 @@
.ju-process-flow {
--ju-flow-gap: var(--s4, 18px);
--ju-step-stack-gap: var(--s4, 18px);
--ju-step-body-mt: var(--s2, 10px);
}
.ju-process-flow__steps,
.ju-process-flow__steps > .wp-block-group__inner-container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(260px, 1fr);
gap: var(--ju-flow-gap);
align-items: start;
counter-reset: ju-flow-step;
}
.ju-process-flow__steps {
position: relative;
overflow-x: auto;
padding: 2px calc(var(--s6, 32px) + 6px) var(--s3, 14px) 2px;
}
.ju-process-flow__steps::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 30px;
height: 2px;
background: linear-gradient(90deg, rgba(29, 53, 79, 0.12) 0%, rgba(29, 53, 79, 0.3) 50%, rgba(29, 53, 79, 0.12) 100%);
pointer-events: none;
}
.ju-process-flow__steps > .wp-block-group__inner-container {
width: max(100%, max-content);
min-width: 100%;
max-width: none !important;
margin: 0 !important;
}
.ju-process-flow__steps > .ju-process-step,
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step {
counter-increment: ju-flow-step;
display: grid;
grid-template-rows: auto 1fr;
gap: var(--ju-step-stack-gap);
min-width: 260px;
max-width: none;
--ju-step-head: var(--primary, #1d354f);
}
.ju-process-flow__steps > .ju-process-step:nth-child(2),
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(2) {
--ju-step-head: #255683;
}
.ju-process-flow__steps > .ju-process-step:nth-child(3),
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(3) {
--ju-step-head: #2b6cb0;
}
.ju-process-flow__steps > .ju-process-step:nth-child(4),
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(4) {
--ju-step-head: #235e9a;
}
.ju-process-flow__steps > .ju-process-step:nth-child(5),
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(5) {
--ju-step-head: #1f4d7e;
}
.ju-process-flow__steps > .ju-process-step:nth-child(6),
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:nth-child(6) {
--ju-step-head: #183d64;
}
.ju-process-step__head,
.ju-process-step > .ju-process-step__label {
position: relative;
z-index: 1;
margin: 0;
min-height: 58px;
display: flex;
align-items: center;
padding: 11px 72px 11px 16px;
border: 1px solid rgba(16, 25, 34, 0.16);
border-radius: 12px;
color: #ffffff !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
var(--ju-step-head) !important;
box-shadow: 0 10px 22px rgba(16, 25, 34, 0.14);
clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 12px 50%);
transition: transform 0.16s ease, box-shadow 0.2s ease;
}
.ju-process-step__head > .wp-block-group__inner-container {
display: flex;
align-items: center;
min-height: 36px;
}
.ju-process-step__head::after,
.ju-process-step > .ju-process-step__label::after {
content: counter(ju-flow-step, decimal-leading-zero);
position: absolute;
right: 26px;
top: 50%;
transform: translateY(-50%);
font-size: 1.65rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.94);
font-variant-numeric: tabular-nums;
}
.ju-process-flow__steps > .ju-process-step:last-child .ju-process-step__head,
.ju-process-flow__steps > .ju-process-step:last-child > .ju-process-step__label,
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:last-child .ju-process-step__head,
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step:last-child > .ju-process-step__label {
margin-right: var(--s2, 10px);
}
.ju-process-step__label {
margin: 0;
color: inherit;
font-size: var(--fs-s, 0.92rem);
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.ju-process-step__body.card,
.ju-process-step > .card {
position: relative;
margin-top: var(--ju-step-body-mt) !important;
min-height: 212px;
padding: var(--s4, 18px);
border: 1px solid var(--line, #d7dee5);
border-top: 4px solid var(--ju-step-head);
border-radius: 16px;
background: var(--surface, #ffffff) !important;
color: var(--text2, #3c4a58) !important;
box-shadow: var(--shadow-sm, 0 6px 16px rgba(16, 25, 34, 0.08));
overflow: hidden;
transition: transform 0.16s ease, box-shadow 0.2s ease;
}
.ju-process-step__body.card::before,
.ju-process-step > .card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(29, 53, 79, 0.06) 0%, rgba(29, 53, 79, 0) 42%);
pointer-events: none;
}
.ju-process-step__body.card > .wp-block-group__inner-container,
.ju-process-step > .card > .wp-block-group__inner-container {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--s2, 10px);
}
.ju-process-step__body.card .muted,
.ju-process-step > .card .muted {
margin: 0;
color: var(--text2, #3c4a58) !important;
}
@media (hover: hover) {
.ju-process-step:hover .ju-process-step__head,
.ju-process-step:hover > .ju-process-step__label,
.ju-process-step:hover .ju-process-step__body.card,
.ju-process-step:hover > .card {
transform: translateY(-2px);
}
.ju-process-step:hover .ju-process-step__head,
.ju-process-step:hover > .ju-process-step__label {
box-shadow: 0 12px 24px rgba(16, 25, 34, 0.17);
}
.ju-process-step:hover .ju-process-step__body.card,
.ju-process-step:hover > .card {
box-shadow: 0 12px 24px rgba(16, 25, 34, 0.12);
}
}
.ju-process-flow__steps::-webkit-scrollbar {
height: 8px;
}
.ju-process-flow__steps::-webkit-scrollbar-thumb {
background: rgba(29, 53, 79, 0.24);
border-radius: 999px;
}
@media (max-width: 1020px) {
.ju-process-flow__steps::before {
display: none;
}
.ju-process-flow__steps,
.ju-process-flow__steps > .wp-block-group__inner-container {
grid-auto-flow: row;
grid-template-columns: 1fr;
width: 100%;
min-width: 0;
}
.ju-process-flow__steps > .ju-process-step,
.ju-process-flow__steps > .wp-block-group__inner-container > .ju-process-step {
min-width: 0;
}
}

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

@@ -2,11 +2,36 @@
/**
* Plugin Name: JuConnect Patterns
* Description: Gutenberg Block Patterns fuer JuConnect (Styleguide-Klassen).
* Version: 0.2
* Version: 0.3.0
*/
if (!defined('ABSPATH')) exit;
define('JUCONNECT_PATTERNS_VERSION', '0.3.0');
function juconnect_patterns_enqueue_styles() {
$css_rel_path = 'assets/css/juconnect-patterns.css';
$css_abs_path = plugin_dir_path(__FILE__) . $css_rel_path;
if (!file_exists($css_abs_path)) {
return;
}
$css_ver = (string) filemtime($css_abs_path);
if ('' === $css_ver) {
$css_ver = JUCONNECT_PATTERNS_VERSION;
}
$deps = [];
if (wp_style_is('juconnect-style', 'registered') || wp_style_is('juconnect-style', 'enqueued')) {
$deps[] = 'juconnect-style';
}
wp_enqueue_style('juconnect-patterns', plugin_dir_url(__FILE__) . $css_rel_path, $deps, $css_ver);
}
add_action('wp_enqueue_scripts', 'juconnect_patterns_enqueue_styles', 20);
add_action('enqueue_block_editor_assets', 'juconnect_patterns_enqueue_styles', 20);
add_action('init', function () {
if (!function_exists('register_block_pattern')) return;
@@ -605,6 +630,69 @@ HTML
<!-- /wp:html --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
]);
register_block_pattern('juconnect/process-flow-flex', [
'title' => __('Prozessablauf (flexibel, horizontal)', 'juconnect'),
'categories' => ['juconnect'],
'description' => __('Flexibler Ablauf mit einzeln bearbeitbaren Schritten. Schritte einfach duplizieren, verschieben oder entfernen.', 'juconnect'),
'content' => <<<HTML
<!-- wp:group {"className":"section ju-process-flow"} -->
<div class="wp-block-group section ju-process-flow"><!-- wp:group {"className":"section__head"} -->
<div class="wp-block-group section__head"><!-- wp:heading {"level":2,"className":"h2"} -->
<h2 class="h2">So laeuft die Zusammenarbeit ab</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Jeder Schritt ist ein einzelner Block und kann beliebig angepasst, dupliziert oder entfernt werden.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"ju-process-flow__steps"} -->
<div class="wp-block-group ju-process-flow__steps"><!-- wp:group {"className":"ju-process-step"} -->
<div class="wp-block-group ju-process-step"><!-- wp:group {"className":"ju-process-step__head"} -->
<div class="wp-block-group ju-process-step__head"><!-- wp:paragraph {"className":"ju-process-step__label"} -->
<p class="ju-process-step__label">Anfrage</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"ju-process-step__body card"} -->
<div class="wp-block-group ju-process-step__body card"><!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Kontakt aufnehmen, Anlass schildern und den Rahmen fuer die Begleitung klaeren.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"ju-process-step"} -->
<div class="wp-block-group ju-process-step"><!-- wp:group {"className":"ju-process-step__head"} -->
<div class="wp-block-group ju-process-step__head"><!-- wp:paragraph {"className":"ju-process-step__label"} -->
<p class="ju-process-step__label">Abstimmung</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"ju-process-step__body card"} -->
<div class="wp-block-group ju-process-step__body card"><!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Ziele, Rollen und Kommunikationswege gemeinsam festlegen.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"ju-process-step"} -->
<div class="wp-block-group ju-process-step"><!-- wp:group {"className":"ju-process-step__head"} -->
<div class="wp-block-group ju-process-step__head"><!-- wp:paragraph {"className":"ju-process-step__label"} -->
<p class="ju-process-step__label">Umsetzung</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"ju-process-step__body card"} -->
<div class="wp-block-group ju-process-step__body card"><!-- wp:paragraph {"className":"muted"} -->
<p class="muted">Begleitung starten, Fortschritt transparent dokumentieren und regelmaessig nachsteuern.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
HTML
]);
});