12punkt Baukasten self-updates

Layout-Baukasten als ACF-Blocks für Gutenberg, mit Seiten-Templates, Sektionen und Style-Einstellungen. Bringt Bootstrap 5.3 (CSS + JS), Grid-Erweiterungen, Spacing-/Typo-Utilities, Iconfonts (Bootstrap Icons, Font Awesome Free, Material Icons – lokal, zuschaltbar), Photoswipe und Masonry mit. Benötigt ACF Pro.

Blocks

Aufbau: Row → Spalte → Komponenten. Spalte und Komponente werden getrennt eingestellt; die Spaltenbreite steht nur an der Spalte.

Die Block-Felder sind in der Seitenleiste in aufklappbare Bereiche gegliedert (ACF-Feld „Akkordeon“ mit Wrapper-Klasse zpt-panel, erster Bereich offen, immer nur einer offen, am Ende ein Akkordeon-Endpunkt). assets/css/editor.css gleicht sie optisch an die nativen Bereiche („Erweitert“) an.

Bereich CSS (letzter Bereich jedes Blocks): CSS ID (css_id, Row: Wrapper ID + Row ID) und alle Klassen-Felder (Row: Wrapper, Container, Row, Inline Style; Spalte; Komponenten; Bild: Figure, Container, Bild, Bildunterschrift). Die CSS ID geht vor dem HTML-Anker aus „Erweitert“; „#“ und Leerzeichen werden bereinigt (zpt_css_id()). Hilfetext einheitlich „ohne „.“, trennen mit Leerzeichen“. Ausnahmen (bleiben in ihrer Gruppe): Klassen je Button im Repeater, Klassen des Hintergrundvideos der Row.

Message (Bild, Galerie – Bereich „Message“, Vorlage group_zpt_tpl_message): Text-Container über dem Bild bzw. der ganzen Galerie. Position je Breakpoint (oben/Mitte/unten × links/mittig/rechts oder „unter dem Bild“), Breite je Breakpoint (100 … 25 %, passend zum Text), Innenabstand, Abstand zum Rand, Hintergrundfarbe und eigene Schrift (Schriftrolle, Gewicht, Farbe; Schriftgröße und Ausrichtung je Breakpoint → .font-size-{bp}-{stufe}, .text-{bp}-{start|center|end}). Leer = keine Message. Im Editor in Tabs: Text / Position / Schrift / Hintergrund. Ausgabe zpt_message_html() → .zpt-has-message + .zpt-message .zpt-msg-{bp}-{pos} .zpt-msg-w-{bp}-{breite} (scss/components/_message.scss), Klassen über „CSS Message“ im Bereich CSS.

Feldbreiten: In der Seitenleiste ist jedes Feld 100 % breit. Die Breiten in den Feldgruppen (50 %, 33 %) gelten nur im Expanded Editor („Open Expanded Editor“). Ausnahme: Wrapper-Klasse zpt-cols-2 an einer Gruppe → deren Felder in der Seitenleiste 2 pro Zeile (Spaltenbreite XS–XXL).

Bereiche Schrift und Hintergrund (Row: nur Schrift, eigener Hintergrund; Spalte und Komponenten; Button: Bereich „Darstellung“ = Ausrichtung + Hintergrund): je ein Klon einer Gruppe aus group_zpt_tpl_properties – font (Schriftrolle, Schriftgröße, Gewicht, Textausrichtung, Schriftfarbe) bzw. colors (Hintergrundfarbe). Die Gruppen tragen die Klasse zpt-group-plain (ohne Rahmen/Titel, die Felder stehen direkt im Bereich). Werte also font_zpt_font_role, font_color, colors_background_color usw. Die Schriftrolle bietet nur Rollen mit zugeordneter Schrift (Typografie → Rollen) und speichert den Rollen-Schlüssel (serif, mono …); ausgegeben wird .font-serif, .font-mono … bzw. für die Grundschrift deren .ff-{schrift} (zpt_font_role_class()). ausgelesen von zpt_properties() (includes/helpers.php).

Komponenten-Markup überschreiben: Datei aus templates/components/ ins Theme kopieren nach {theme}/zpt-baukasten/components/{name}.php.

Block-Editor

Der Seitentitel wird im Inhaltsbereich ausgeblendet und rechts in der Seitenleiste (Übersicht bei Status/Template) als Feld „Titel“ bearbeitet – für Seiten, Beiträge und Sektionen (Filter zpt/editor/hide_title, leeres Array = Titel wieder normal). Code: includes/editor.php.

Die Seitenleiste des Block-Editors ist 360px statt 280px breit (ab 782px Fensterbreite). Ändern: add_filter('zpt/editor/sidebar_width', fn() => 400); (0 = WordPress-Standard).

Seiten-Templates und Sektionen

• Block-Seite (tmpl-blocks.php): Inhalt der Seite aus zpt/row-Blocks.

• Sektionen-Seite (tmpl-sections_page.php): gibt die im Feld „Sektionen“ gewählten Sektionen nacheinander aus (<section id="section-{slug}" class="zpt-section">). Solche Seiten öffnen im klassischen Editor (Titel, Feld „Sektionen“, Seiten-Attribute; Inhaltsfeld ausgeblendet) – Filter use_block_editor_for_post, Gutenberg bleibt für alles andere aktiv. Wird im Block-Editor auf „Sektionen-Seite“ gewechselt, lädt die Seite nach dem Speichern klassisch neu (assets/js/editor-sections-page.js); umgekehrt öffnet sie nach Wechsel auf ein anderes Template wieder im Block-Editor.

• Sektionen (CPT section, Menü „Sektionen“): wiederverwendbare Bereiche, ebenfalls mit zpt/*-Blocks gebaut. Container „wie Seite“ bezieht sich auf die Sektion selbst. Direkt aufgerufen (/section/{slug}/, auch „Vorschau“ im Editor): wer die Sektion bearbeiten darf, sieht sie einzeln mit Header/Footer (templates/single-section.php, noindex, nicht in der Sitemap); alle anderen werden per 302 umgeleitet – auf die erste Seite, die sie im Feld „Sektionen“ hat (#section-{slug}), bei der Footer-Sektion auf /#footer, sonst auf die Startseite (Filter zpt/section/target_url).

• Footer: Das Plugin gibt eine Sektion als Footer aus (<footer id="footer" class="zpt-footer">, im wp_footer-Hook vor den Skripten, also nach </main>). Welche: Sektion mit Haken „Als Footer verwenden“ (Seitenleiste der Sektion, Feld zpt_footer, immer nur eine), sonst die mit Slug footer; in der Sektionen-Liste als „Footer“ markiert. Ohne passende Sektion kein Footer. Theme mit eigenem Footer: add_theme_support('zpt-theme-footer');. Andere Position: zpt_the_footer() in der footer.php des Themes aufrufen (wird nur einmal ausgegeben). Filter zpt/footer/section, zpt/footer/enabled.

• Styleguide (tmpl-styleguide.php): zeigt die Style-Einstellungen zur Kontrolle, Bereich per Feld (Übersicht, Typografie, Farben, Abstände, Buttons). Neben jedem Beispiel stehen die im Browser gemessenen Werte. Seiten sind noindex. Code: includes/styleguide.php, templates/styleguide/.

Die Templates liegen in templates/ und nutzen get_header()/get_footer() des Themes. Überschreiben: gleichnamige Datei ins Theme legen. Ausgabe im eigenen Template: zpt_the_sections() bzw. zpt_the_section($id).

Abstände und Größen (Bootstrap Utility API)

Die Bootstrap-Spacing-Skala ist durch eine 5px-Skala (0–300) ersetzt; die Klassennamen folgen Bootstrap (logische Seiten s/e statt l/r, Breakpoint vor dem Wert):

Achtung: Bootstraps .mb-1 … .mb-4 gibt es nicht mehr, .m-5 ist 5px (nicht 3rem). Skala ändern (eigener Build): $zpt-spacer-step, $zpt-spacer-count bzw. $spacers.

Einstellungen (Menü „Baukasten“ → Farben, Typografie, Elemente, Buttons, Icons, Logo & Bilder, Layout, Meta Infos, Import / Export)

• Farben → Tab „Einstellungen“: Shade-Skala (Repeater zpt_shade_scale: Name, Mischen aufhellen/Grundfarbe/ abdunkeln, Anteil in %), Reihenfolge hell → dunkel, genau eine Grundfarbe. Vorlagen (ZPT_SHADE_PRESETS): Bootstrap (100–900), Tailwind (50–950), Simple (light, base, dark) – laden ihre Shades in die Tabelle, danach anpassbar („Eigene“). Benennt man die Grundfarbe um (500 → base), ziehen die Grundfarben der Palette beim Speichern mit. Code: zpt_color_scale(), zpt_color_base().
• Farben → Tab „Farbpalette“ (Repeater zpt_palette): eigene Farben mit Name (ecos-blau: Kleinbuchstaben, Ziffern, Bindestrich; nicht wie eine Systemfarbe, nicht mit Shade-Endung) und Grundfarbe. Die Shade-Felder (shade_{name}) erzeugt das Plugin aus der Skala als lokale ACF-Unterfelder (acf/include_fields). Leere Shades werden berechnet, eingetragene überschreiben; im Admin live als Platzhalter/Vorschau. Ausgabe: --theme-ecos-blau, --theme-ecos-blau-{shade}, Klassen .text-/.bg-/.border-/.color-/.fill-ecos-blau[-{shade}] (inline, zpt_color_classes_css()).
• Farben → Tab „Systemfarben“ (Repeater zpt_system_colors: Name + Farbe, gewählt wie in den Props mit Farbe + Shading, aber nur Palettenfarben, oder „eigene“): ganze Palettenfarbe → deren Shades; mit Shading oder eigene Farbe → wird Grundfarbe, Shades berechnet (zpt_system_color_shades()) → --theme-{name}, --theme-{name}-{shade}, -hover, -contrast, Shade-Klassen .bg-primary-300 usw. (inline). Bootstrap-Namen (ZPT_BOOTSTRAP_THEME_COLORS: primary … dark, ZPT_BOOTSTRAP_BASIC_COLORS: black, white, gray) setzen auch --bs-{name}, -rgb (Theme-Farben zusätzlich subtle/emphasis), primary auch die Link-Farben → .text-*, .bg-*, .btn-*, .text-bg-* … folgen. Nicht angelegt gilt Bootstraps Wert (SCSS: --theme-primary: var(--bs-primary)). Eigene Namen (accent) ergeben nur --theme-accent… und .text-/.bg-/.border-/.color-/.fill-accent[-{shade}] – so auch Hintergründe (section → .bg-section, .bg-section-100).
• Farben → Tab „WordPress“ (Repeater zpt_wp_colors, Farbe + Shading): welche Farben in WordPress erscheinen – in allen Farbauswahlen der Komponenten/Einstellungen (Farbe + Shading, außer der Systemfarben-Definition) und in der WordPress-Farbpalette (Block-Editor, Global Styles, TinyMCE; zpt_wp_palette()). Leer = alle (Palette des Editors: alle Grundfarben). Buttons über der Liste (fehlende anhängen): „Gesamte Farbpalette übernehmen“ (Palette mit allen Shades, zpt_wp_palette_shade_tokens()), „nur Grundfarben übernehmen“ (Palette), „Systemfarben übernehmen“. Code: zpt_wp_color_tokens(), JS: zptColors.allowed.
• Farbfelder (Props „Hintergrund/Schrift Farbe“, Row-Wrapper, Einstellungen): Textfeld mit Wrapper-Klasse zpt-color-field, Vorschau und Farbwähler daneben. Mit zpt-color-tokens (Props, Row, Elemente) statt Textfeld: Auswahl Farbe (Baukasten-Farben, „eigene“ → Textfeld für Hex/Farbname) + Shading (100–900, 500 = Grundfarbe) + Swatch; gespeichert wird ein Wert. Werte: primary, primary-300, tomato, #ff6347. Baukasten-Farben werden als var(--theme-…) ausgegeben (zpt_color_value()).
• WordPress-Farbpalette: Die Grundfarben (Systemfarben, dann Palette) gehen als Theme-Palette an WordPress (Filter wp_theme_json_data_theme, zpt_wp_palette()) – in jeder nativen Farbauswahl (Core-Blocks …) und im Textfarben-Knopf von TinyMCE (klassischer Editor, ACF-WYSIWYG, textcolor_map). WordPress-Standardfarben ausgeblendet. Core-Blocks speichern die Klasse .has-{name}-color (folgt späteren Farbänderungen), TinyMCE einen festen Hexwert. Anpassen/abschalten: Filter zpt/wp_palette.
• Typografie (eigene Seite, Postboxen):
  • Schriftquellen: WP-Schriftbibliothek (installierte Schriften anhaken, Standard alle), System-Standard (Stack, Standard Arial, "Helvetica Neue", Helvetica, sans-serif), Theme-Ordner.
  • Schriftgrößen: Skala der Stufen (Repeater zpt_type_scale: Name, Größe, Zeilenhöhe, Fließtext) mit Vorlagen „12punkt“ (sm, copy, copy-l, l, xl, xxl, xxxl) und „Einfach“ (small, base, large, extra-large), ZPT_TYPE_PRESETS in includes/config.php. Daraus --theme-font-size-{stufe} / --theme-line-height-{stufe} auf :root, Klassen .font-size-{stufe} und .font-size-{bp}-{stufe}, body in der Fließtext-Stufe sowie die Größen-Felder je Schrift und die Auswahlen „Größe“.
  • Schriftschnitte & Maße: Repeater, je Zeile eine Schrift aus WP-Schriftbibliothek, System-Standard oder Theme-Ordner (Feld „Theme-Ordner“: CSS-Dateien werden geladen, sonst @font-face aus den Dateien – Familie = Unterordner bzw. Dateiname bis -/_, Gewicht/Stil aus dem Namen). Pro Schrift Größe und Zeilenhöhe je Stufe (leer = Skala) sowie Laufweite je Gewicht (Zeilen je geladenem Gewicht beim Speichern). Ausgabe als Klasse .ff-{schrift} (z. B. .ff-inter), die --theme-font-size-*, --theme-line-height-* und --zpt-ls-{gewicht} im eigenen Bereich setzt: .ff-inter.font-size-xl.fw-700 = Größe, Zeilenhöhe und Laufweite von Inter.
  • Rollen: Grundschrift (→ :root), Sans-Serif, Serif, Deko, Mono (.font-serif …). Laufweite greift über .fw-100 … .fw-900, .fw-bold, strong usw. (_typography.scss). Im Block-Editor: Bereich Schrift → Schriftrolle / Schriftgröße / Gewicht. Code: includes/fonts.php (Laden), includes/typography.php (Werte, Klassen).
• Elemente (Tabs Überschriften / Text / Auszeichnung / Forms / Klassen, je Element ein Akkordeon mit Zusammenfassung der gesetzten Werte im Titel): h1–h6, body, p, ul, ol, blockquote, small, figcaption, hr, strong, em, a; Forms: Feld-Label, Eingabefeld (.form-control, .form-select + Textfelder ohne Klasse), Platzhalter, Checkbox-/Radio-Label, Hilfetext, Fehlermeldung; Klassen: .lead, .blockquote-footer, .zpt-sg-label (Styleguide-Beschriftungen). Jedes Element hat nur die passenden Einstellungen: Schrift-Rolle, Gewicht (nur Gewichte der Schrift), Großbuchstaben, Farbe (Token wie primary-700), Aufzählungszeichen (ul/ol), Hover-Farbe und „nicht unterstrichen“ (a); als Matrix je Breakpoint XS–XXL: Größe (Typo-Stufe), Margin und Padding oben/rechts/unten/links in px (5er-Schritte, Margin auch negativ). Leer = wie umgebend bzw. „wie kleiner“ (leere Felder zeigen den geerbten Wert) – nur XS ausgefüllt gilt also für alle Breiten. Ausgabe mit Element-Selektoren nach zpt.css → Klassen am Element (.mt-20, .font-size-xl …) gewinnen. Werte: options_zpt_element_{element}_{feld}. Felder werden erzeugt: Elemente und ihre Einstellungen stehen in ZPT_ELEMENTS (includes/config.php), danach npm run build:acf → acf-json/group_zpt_settings_elements.json (nicht im ACF-Backend bearbeiten). Code: includes/elements.php, bin/build-acf-elements.php. Felder werden erst beim Aufklappen geladen (AJAX zpt_element_fields, assets/js/admin-elements.js): die Seite enthält je Element nur Titel + Zusammenfassung (zpt_element_summary()); gespeichert werden nur geöffnete Elemente, alle anderen bleiben unverändert. Größen-Auswahl = aktuelle Typo-Skala. Leere Werte werden nach dem Speichern aus wp_options gelöscht (zpt_elements_cleanup()), nur die Gruppen-Zeilen options_zpt_element_{element} bleiben (für get_field()). Alle Style-Variablen lassen sich per Filter zpt/style/vars ergänzen.
• Buttons (Tabs Grundeinstellungen / Templates / Varianten), leer = Bootstrap-Standard:
  • Grundeinstellungen – Repeater „Größen“ (vorbelegt mit Standard / Klein / Groß): nur Name und CSS-Klasse. md = Standard (.btn ohne Klasse), sonst .btn-{klasse} – eigene Größen wie xl stehen im Button-Block unter „Größe“ (je Breakpoint, .btn-md-lg).
  • Templates (Repeater, vorbelegt mit btn default / Pill / Outlined): Name, Kürzel, Schriftrolle, Gewicht, Großbuchstaben, Rahmenbreite, Eckenradius, Hintergrund (aus = transparent, Hover mit Rahmenfarbe gefüllt), Outline (Schrift in Rahmenfarbe) und Repeater Größen: je Größe Schriftgröße (CSS-Wert oder Stufe copy, l …), Zeilenhöhe, Laufweite, Innenabstand oben/unten und links/rechts. btn default (Kürzel default) gilt für alle .btn und lässt sich nicht löschen (Admin-Skript assets/js/admin-buttons.js + Prüfung beim Speichern); leere Werte je Größe = Bootstrap-Wert der Größe. Weitere Templates werden zu .btn-{kürzel} (.btn-pill); ihre Werte je Größe gelten als .btn-pill / .btn-pill.btn-sm / .btn-pill.btn-md-lg, leer = btn default. Längen ohne Einheit = px. Rahmenbreite: leer bei btn default = kein Rahmen; „none“/„keine“ = 0.
  • Varianten (Repeater): eine Klasse wie .btn-primary, .btn-outline-danger überschreiben oder eine eigene anlegen (.btn-black). Sobald Varianten angelegt sind, bietet der Button-Block unter „Stil“ nur diese an (plus Link-Stile). Je Variante Farben normal und Hover/Aktiv (Schrift-, Hintergrund-, Rahmenfarbe – Farbfelder mit Baukasten-Farben), Template (übernimmt dessen Werte inkl. Outline/Hintergrund, eigene Angaben gehen vor), Rahmen (Breite, Radius), Schriftrolle (Grundschrift, Sans-Serif, Serif, Deko, Mono), Gewicht, Großbuchstaben und Größen wie bei den Templates (leer = wie Template). Ohne Angabe: Schriftfarbe = Kontrastfarbe, Rahmenfarbe = Hintergrund, Hover = 30 % dunkler; Deaktiviert = normal. Ausgabe als --bs-btn-* nach zpt.css (Reihenfolge .btn → Größen → Templates → Varianten → Größen je Breakpoint; Outline/Hintergrund als .btn.btn-{kürzel}, damit sie die Farben überschreiben). Da zpt.css mit $enable-rounded: false gebaut ist, setzt das Plugin bei Eckenradius auch border-radius und die Ecken in .btn-group. Ohne Variante kommen die Farben aus Baukasten → Farben. Code: includes/buttons.php, Kontrolle: Styleguide → Buttons.
• Icons (je Set eine Box, einzeln zuschaltbar; nur aktive Sets werden geladen und in der Icon-Auswahl angeboten):
  • Bootstrap Icons (Standard: an), Font Awesome Free 7 (Stile solid/regular/brands; optional eigene CSS-URL, z. B. Pro), Material Icons (Stile filled/outlined/round/sharp/two-tone, Ligaturen) – alle lokal aus assets/vendor/ (nicht vom CDN/Google). Bootstrap Icons stecken nicht mehr in zpt.css (.link-further-Pfeil ist eine SVG-Maske).
  • Eigenes SVG Icon Set: Ordner im Theme (*.svg, Name = Dateiname, Child- vor Eltern-Theme) und/oder Repeater Name + SVG-Code (geht bei gleichem Namen vor). Bereinigt (zpt_sanitize_svg(); CSS aus `