Screenshots im README, JSON-LD-Vorschau repariert (v2.47.3)

CHANGELOG.md

@@ -7,6 +7,35 @@ und dieses Projekt folgt [Semantic Versioning](https://semver.org/spec/v2.0.0.ht
 
 ---
 
+## [2.47.3] — 2026-11-06
+
+### 🐛 Fixed
+- **Die JSON-LD-Ansicht in Tab 5 „Vorschau" fehlte bei jedem Datensatz.** Das HTML des Reiters
+  entstand bei der Feldregistrierung, bevor WordPress den bearbeiteten Datensatz kennt:
+  `get_the_ID()` lieferte dort `false`, und unter dem Hinweis „Die JSON-LD-Ansicht unten zeigt
+  das zuletzt gespeicherte Ergebnis" standen weder das JSON-LD noch der Button
+  „REST-Endpoint öffnen". Carbon Fields bekommt jetzt einen Callback, der erst beim Rendern
+  läuft. Neuer E2E-Test in `admin-workflow.spec.js`.
+- **Lange Zeilen sprengen das Formular nicht mehr.** Das `<fieldset>` von Carbon Fields hat ab
+  Werk `min-width: min-content`; die nun sichtbare JSON-LD-Ansicht schob den ganzen Kasten über
+  den rechten Rand, statt im Code-Block zu scrollen (`assets/css/admin.css`, Block
+  `FORMULAR-DESIGN`).
+- **Live-Vorschau mit Klartext:** Die Zusammenfassung zeigte beim Thema die EU-URI
+  (`http://publications.europa.eu/…/data-theme/ENVI`) statt „Umwelt" und die Dateigröße in Bytes.
+  Sie nennt jetzt die Beschriftungen der Mehrfachauswahl und die Größe wie die Download-Card
+  („15 MB") und liest die Werte beim Wechsel des Reiters neu ein — die Mehrfachauswahl meldet
+  Änderungen nicht über `input`/`change`.
+- **Beispieldaten:** Zwei Datensätze („Radverkehrszählstellen", „Ladesäulen") trugen den
+  HVD-Code `c_b79e35eb` als Schlagwort; im Katalog erschien er als Filterwert und Badge. Jetzt
+  „Mobilität". `test-batch-import.php` lässt keine Vokabular-Codes als Schlagworte mehr durch.
+
+### 📝 Docs
+- **Screenshots im README** (`docs/screenshots/`, nicht im Plugin-ZIP): Formular, Datenkatalog mit
+  Filtern und Detailansicht, Datensatzliste, Vorschau, Qualitätsprüfung und Batch-Import —
+  aufgenommen in einem deutschen WordPress mit den mitgelieferten Beispieldaten.
+
+---
+
 ## [2.47.2] — 2026-11-03
 
 ### 🐛 Fixed

CLAUDE.md

@@ -828,7 +828,7 @@ Update **both** locations:
 - MINOR: New features (backward-compatible)
 - PATCH: Bug fixes only
 
-Current: **v2.47.2**
+Current: **v2.47.3**
 
 ---
 
@@ -981,6 +981,6 @@ Neue technische Festlegungen gehören dorthin, nicht in README oder CLAUDE.md.
 
 ---
 
-**Zuletzt aktualisiert**: Version 2.47.2 (November 2026)
+**Zuletzt aktualisiert**: Version 2.47.3 (November 2026)
 **Autor**: Open Data Wizard Team (nozilla)
 **License**: GPL-2.0-or-later

README.md

@@ -6,7 +6,7 @@
 
 <p align="center">
   <img src="https://img.shields.io/github/license/daimpad/OpenDataWizard?style=flat-square&color=03FF9A&labelColor=101010&label=Lizenz" alt="Lizenz">
-  <img src="https://img.shields.io/badge/Version-2.47.2-03FF9A?style=flat-square&labelColor=101010" alt="Version">
+  <img src="https://img.shields.io/badge/Version-2.47.3-03FF9A?style=flat-square&labelColor=101010" alt="Version">
   <img src="https://img.shields.io/badge/DCAT--AP-3.0-03FF9A?style=flat-square&labelColor=101010" alt="DCAT-AP 3.0">
   <img src="https://img.shields.io/badge/PHP-%3E%3D%208.1-03FF9A?style=flat-square&labelColor=101010&logo=php&logoColor=white" alt="PHP >= 8.1">
   <img src="https://img.shields.io/badge/WordPress-6.4%2B-03FF9A?style=flat-square&labelColor=101010&logo=wordpress&logoColor=white" alt="WordPress 6.4+">
@@ -28,6 +28,19 @@
 
 Open Data Wizard ermöglicht es Organisationen und Einzelpersonen, Datensätze direkt in WordPress zu beschreiben und als maschinenlesbare, standardkonforme Metadaten bereitzustellen — ohne technische Vorkenntnisse, ohne externe Plattformabhängigkeit.
 
+<table>
+  <tr>
+    <td width="58%"><img src="docs/screenshots/formular.png" alt="Datensatz bearbeiten: Formular mit fünf Reitern, Fragen in Alltagssprache und Pflichtfeld-Sternchen"></td>
+    <td width="42%"><img src="docs/screenshots/katalog.png" alt="Datenkatalog auf der Website mit Suche, Filtern und Datensätzen samt Thema, Format, Größe und Lizenz"></td>
+  </tr>
+  <tr>
+    <td align="center"><sub>Erfassen im WordPress-Backend: Fragen statt Fachbegriffe</sub></td>
+    <td align="center"><sub>Veröffentlichen auf der eigenen Website: der Datenkatalog</sub></td>
+  </tr>
+</table>
+
+<sub>Alle Screenshots zeigen die mitgelieferten <a href="#-beispieldaten-zum-ausprobieren">Beispieldaten</a> (frei erfunden: Musterstadt, Musterkreis, Musterland).</sub>
+
 ---
 
 ## Das Problem
@@ -82,6 +95,10 @@ Open Data Wizard implementiert **DCAT-AP 3.0** und erzeugt valide **JSON-LD**-Au
 ### 🗂 Datensätze verwalten
 Eigener Bereich im WordPress-Backend mit Übersicht, Filterung und Statusverwaltung (Entwurf / Veröffentlicht).
 
+<p align="center">
+  <img src="docs/screenshots/datensatzliste.png" alt="Datensatzliste im Backend mit Spalten für Lizenz, Thema, Qualität, Status, Änderungsdatum und Shortcode" width="900">
+</p>
+
 ### 😊 Benutzerfreundliche Formularsprache
 Das Wizard-Formular wurde vollständig überarbeitet, um es auch ohne DCAT-AP-Kenntnisse intuitiv zu machen:
 - **Klare Fragen statt technischer Begriffe:** Statt „Herausgebende Organisation (dct:publisher)" fragt das Plugin: „Wer gibt diese Daten heraus?"
@@ -98,6 +115,12 @@ Fünf-Tab-Assistent mit praktischen Beispielen. Pflichtfelder sind mit einem rot
 4. **Erweiterte Angaben** — Projektseite, Erstveröffentlichung, Aktualisierungsfrequenz, geografische und zeitliche Abdeckung, Kontaktinformationen, Verantwortlichkeiten (Urheber/pflegende Stelle, GovData-Contributor-ID), High-Value-Datensatz (HVD) Kategorie
 5. **Vorschau** — generiertes JSON-LD live einsehen
 
+Der Reiter **Vorschau** prüft die Pflichtangaben noch während des Ausfüllens und zeigt darunter das zuletzt gespeicherte JSON-LD — genau das, was Harvester abrufen.
+
+<p align="center">
+  <img src="docs/screenshots/vorschau.png" alt="Reiter Vorschau: Live-Prüfung der Pflichtangaben, Zusammenfassung und das gespeicherte JSON-LD" width="720">
+</p>
+
 ### 🏷 Lizenz-Auswahl
 - Vordefinierte Auswahlliste mit ausgeschriebenen Lizenznamen (z. B. „CC BY 4.0 — Namensnennung")
 - Unter der Auswahl erscheint eine allgemeinverständliche Erklärung, was die gewählte Lizenz erlaubt
@@ -133,6 +156,10 @@ Datensätze → Batch-Import
 ```
 Importiere mehrere Datensätze auf einmal aus CSV oder JSON Dateien. Der Import-Wizard zeigt eine Vorschau aller gültigen Zeilen, markiert Fehler, und lässt dich auswählen, welche Datensätze importiert werden. Alle importierten Datensätze werden als **Entwürfe** erstellt — zur Bearbeitung vor Publishing bereit.
 
+<p align="center">
+  <img src="docs/screenshots/batch-import.png" alt="Batch-Import: Vorschau mit drei gültigen Datensätzen und einer Fehlermeldung für eine Zeile ohne Lizenz" width="820">
+</p>
+
 **Unterstützte Formate:**
 - **CSV**: Spaltenköpfe = Feldnamen (siehe unten); Reihenfolge beliebig, nicht benötigte Spalten dürfen fehlen
 - **JSON**: Array von Objekten oder einzelnes Objekt mit gleichen Feldnamen
@@ -225,6 +252,10 @@ Automatische Metadaten-Qualitätsprüfung nach der [EU-MQA-Methodik](https://dat
 
 Berechnung nach jedem Speichern. Die **Listenspalte** zeigt Prozent + Stufe; die **Qualitäts-Meta-Box** ergänzt den MQA-Rohwert (z. B. „54 / 259 Punkte, von max. 405") als Detailzeile.
 
+<p align="center">
+  <img src="docs/screenshots/qualitaet.png" alt="Qualitätsprüfung (MQA): 100 Prozent, Stufe Ausgezeichnet, Punkte je Kriterium" width="720">
+</p>
+
 ### 📥 Download-Card — Block oder Shortcode
 
 Zwei Wege zur selben Karte. **Empfohlen ist der Block:**
@@ -262,6 +293,10 @@ Datenangebot. Ein Klick auf den Titel öffnet die vollständige Download-Card **
 Seite** (`?odw_ds=<ID>`); „Zurück zum Katalog" führt auf die zuvor besuchte Listenseite zurück.
 Ab mehr Einträgen als `per_page` blättert eine eigene Seitennavigation (`?odw_page=<n>`).
 
+<p align="center">
+  <img src="docs/screenshots/katalog-detail.png" alt="Detailansicht im Datenkatalog: Download-Card mit Format, Größe, Lizenz und aufgeklappten Metadaten" width="560">
+</p>
+
 | Attribut | Standard | Bedeutung |
 |---|---|---|
 | `per_page` | `20` | Einträge pro Seite (1–50) |
@@ -303,6 +338,10 @@ zurücksetzen" führt zur ungefilterten Liste. Fest eingestellte Themen (`theme`
 dem Weg in die Detailansicht und zurück erhalten. Ohne die beiden Attribute sieht ein Katalog genau
 so aus wie bisher.
 
+<p align="center">
+  <img src="docs/screenshots/katalog-filter.png" alt="Datenkatalog mit Suche nach „Daten", Thema Umwelt mit Trefferzahl und aktiven Filtern als Chips" width="560">
+</p>
+
 | Eintrag in `filters` | Feld im Formular |
 |---|---|
 | `theme`, `license`, `format` | Auswahlfeld Thema, Lizenz bzw. Format |

assets/css/admin.css

@@ -1297,7 +1297,7 @@ input.odw-cessda-input,
    Dieser Block hängt an Klassennamen von Carbon Fields und ist damit die
    Stelle, die nach einem CF-Update zu prüfen ist. Betroffen sind:
 
-     .cf-container__tab
+     .cf-container__tab, .cf-container__fields, .carbon-box fieldset
      .cf-field, .cf-field__head, .cf-field__label, .cf-field__body,
      .cf-field__help
      .cf-complex, .cf-complex__group, .cf-complex__group-head,
@@ -1334,6 +1334,17 @@ input.odw-cessda-input,
 	min-width: 0;
 }
 
+/* Breiter Inhalt darf das Formular nicht aufspannen. Das <fieldset> um den
+ * Container hat ab Werk `min-width: min-content`, die Flex-Kinder darunter
+ * `min-width: auto` — die längste Zeile der JSON-LD-Ansicht in Tab 5 schob
+ * so den ganzen Kasten über den Rand hinaus, statt im Code-Block zu
+ * scrollen. */
+.postbox.carbon-box fieldset,
+.cf-container__fields,
+.cf-container__fields > .cf-field {
+	min-width: 0;
+}
+
 /* Der horizontale Abstand kommt jetzt vom Container. */
 .cf-container__tab > .cf-field,
 .cf-container__tab > .odw-cessda-widget,

assets/js/odw-admin-fields.js

@@ -778,11 +778,41 @@
 		return document.querySelector( '[name$="[_' + key + ']"]' );
 	}
 
+	// Wie ODW_Shortcode::format_bytes() — dieselbe Anzeige wie auf der Karte.
+	function formatBytes( bytes ) {
+		var units = [ [ 1073741824, 'GB' ], [ 1048576, 'MB' ], [ 1024, 'KB' ] ];
+		for ( var i = 0; i < units.length; i++ ) {
+			if ( bytes >= units[ i ][ 0 ] ) {
+				return ( Math.round( bytes / units[ i ][ 0 ] * 10 ) / 10 ) + ' ' + units[ i ][ 1 ];
+			}
+		}
+		return bytes + ' B';
+	}
+
 	function fieldValue( key ) {
 		var el = fieldInput( key );
 		if ( ! el ) {
 			return '';
 		}
+		// Mehrfachauswahl (Thema, Engagementfeld …): Das versteckte Feld trägt
+		// die URIs, durch „|" getrennt. Angezeigt werden die Beschriftungen,
+		// die Carbon Fields als Chips rendert — sonst stünde in der Vorschau
+		// „http://publications.europa.eu/…/data-theme/ENVI" statt „Umwelt".
+		var multi = el.closest( '.cf-multiselect' );
+		if ( multi ) {
+			var labels = Array.prototype.map.call(
+				multi.querySelectorAll( '.cf-multiselect__multi-value__label' ),
+				function ( node ) {
+					return ( node.textContent || '' ).trim();
+				}
+			).filter( Boolean );
+			if ( labels.length ) {
+				return labels.join( ', ' );
+			}
+		}
+		if ( 'odw_byte_size' === key && /^\d+$/.test( ( el.value || '' ).trim() ) ) {
+			return formatBytes( parseInt( el.value, 10 ) );
+		}
 		if ( 'SELECT' === el.tagName && el.selectedIndex >= 0 ) {
 			var opt = el.options[ el.selectedIndex ];
 			// Skip empty placeholder options ("— bitte wählen —" style: empty value).
@@ -862,6 +892,13 @@
 		// Update on any field change anywhere in the form (events bubble).
 		document.addEventListener( 'input',  refresh );
 		document.addEventListener( 'change', refresh );
+		// Die Mehrfachauswahl setzt ihren Wert ohne input-/change-Ereignis.
+		// Beim Wechsel auf einen Reiter (also auch auf „Vorschau") neu lesen.
+		document.addEventListener( 'click', function ( event ) {
+			if ( event.target.closest && event.target.closest( '.cf-container__tabs-item' ) ) {
+				refresh();
+			}
+		} );
 		refresh();
 	}
 

includes/class-fields.php

@@ -646,8 +646,13 @@ static function (): string {
 			->add_tab(
 				__( '5 — Vorschau', 'open-data-wizard' ),
 				array(
+					// Als Callback, nicht als fertiger String: Die Felder werden
+					// registriert, bevor WordPress den bearbeiteten Datensatz
+					// kennt — get_the_ID() liefert dort false, und die
+					// JSON-LD-Ansicht samt REST-Link fehlte bei jedem Datensatz.
+					// Carbon Fields ruft den Callback erst beim Rendern auf.
 					Field::make( 'html', 'odw_preview_html' )
-					->set_html( self::get_preview_html() ),
+					->set_html( static fn (): string => self::get_preview_html() ),
 
 					Field::make( 'html', 'odw_datenatlas_publish' )
 					->set_html(

open-data-wizard.php

@@ -3,7 +3,7 @@
  * Plugin Name:       Open Data Wizard
  * Plugin URI:        https://github.com/daimpad/OpenDataWizard
  * Description:       DCAT-AP 3.0 konforme Open Data Metadatenverwaltung für WordPress. Bereitstellung als maschinenlesbarer JSON-LD-Endpoint für offene Daten.
- * Version:           2.47.2
+ * Version:           2.47.3
  * Requires at least: 6.4
  * Requires PHP:      8.1
  * Author:            nozilla
@@ -26,7 +26,7 @@
 	exit;
 }
 
-define( 'ODW_VERSION', '2.47.2' );
+define( 'ODW_VERSION', '2.47.3' );
 define( 'ODW_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
 define( 'ODW_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
 define( 'ODW_PLUGIN_FILE', __FILE__ );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "open-data-wizard",
-  "version": "2.47.2",
+  "version": "2.47.3",
   "description": "WordPress plugin for publishing open data as DCAT-AP 3.0 compliant metadata",
   "author": "Open Data Wizard Team",
   "license": "GPL-2.0-or-later",

samples/import-example.csv

@@ -49,7 +49,7 @@ Haltestellen
 Mobilität","de","ZIP","application/zip","23068672","2024-01-02","2024-01-01","2024-12-31","WEEKLY","Musterland","state","https://www.vv-musterland.example/projekte/oepnv-fahrplan","Fahrplandaten-Team","opendata@vv-musterland.example","https://www.vv-musterland.example/kontakt","PUBLIC","STABLE","ja","c_b79e35eb","2024.52","https://gtfs.org/schedule/reference/"
 "Radverkehrszählstellen: Stundenwerte 2021–2024","Stadt Musterstadt – Mobilitätsamt","Gezählte Radfahrten je Stunde und Fahrtrichtung an den zwölf automatischen Zählstellen im Stadtgebiet. Ausfälle einzelner Zählstellen sind gekennzeichnet.","https://www.musterstadt.example/opendata/radzaehlstellen","https://www.musterstadt.example/opendata/radzaehlstellen/radzaehlstellen.csv","dl-de-zero","","Nutzung ohne Einschränkungen, auch ohne Nennung der Quelle.","TRAN","Radverkehr
 Verkehrszählung
-c_b79e35eb
+Mobilität
 Messwerte","de","CSV","text/csv","18874368","2025-01-07","2021-01-01","2024-12-31","DAILY","Musterstadt","municipality","https://www.musterstadt.example/projekte/radzaehlstellen","Mobilitätsamt, Verkehrsplanung","mobil@musterstadt.example","https://www.musterstadt.example/kontakt","PUBLIC","STABLE","ja","c_b79e35eb","1.4",""
 "Luftqualität: Stundenmittel Stickstoffdioxid und Feinstaub 2018–2024","Stadt Musterstadt – Umweltamt","Stundenmittelwerte für NO₂, PM10 und PM2,5 an den drei städtischen Messstationen. Die Werte sind geprüft; vorläufige Werte des laufenden Jahres sind nicht enthalten.","https://www.musterstadt.example/opendata/luftqualitaet","https://www.musterstadt.example/opendata/luftqualitaet/luftqualitaet.json","dl-de-zero","","Nutzung ohne Einschränkungen, auch ohne Nennung der Quelle.","ENVI","Luftqualität
 Umwelt
@@ -133,7 +133,7 @@ Klimaschutz
 Energie","de","CSV","text/csv","58368","2025-01-30","2018-01-01","2024-12-31","QUARTERLY","Musterstadt","municipality","https://www.stadtwerke-musterstadt.example/projekte/photovoltaik-staedtisch","Stadtwerke, Abteilung Energiedaten","opendata@stadtwerke-musterstadt.example","https://www.stadtwerke-musterstadt.example/kontakt","PUBLIC","STABLE","nein","","1.2",""
 "Ladesäulen für Elektrofahrzeuge 2024","Stadtwerke Musterstadt GmbH","Öffentlich zugängliche Ladepunkte im Stadtgebiet mit Betreiber, Ladeleistung, Steckertyp und Standort, Stand Ende 2024.","https://www.stadtwerke-musterstadt.example/opendata/ladesaeulen","https://www.stadtwerke-musterstadt.example/opendata/ladesaeulen/ladesaeulen.geojson","dl-de-zero","","Nutzung ohne Einschränkungen, auch ohne Nennung der Quelle.","ENER,TRAN","Elektromobilität
 Ladeinfrastruktur
-c_b79e35eb
+Mobilität
 Geodaten","de","GeoJSON","application/geo+json","131072","2025-01-08","2024-01-01","2024-12-31","MONTHLY","Musterstadt","municipality","https://www.stadtwerke-musterstadt.example/projekte/ladesaeulen","Stadtwerke, Abteilung Energiedaten","opendata@stadtwerke-musterstadt.example","https://www.stadtwerke-musterstadt.example/kontakt","PUBLIC","STABLE","ja","c_b79e35eb","2024.12","https://www.rfc-editor.org/rfc/rfc7946"
 "Polizeiliche Kriminalstatistik Musterkreis 2015–2024","Polizeidirektion Musterkreis","Erfasste Straftaten, Aufklärungsquoten und Tatverdächtige nach Deliktgruppe und Gemeinde. Die Zahlen folgen den Richtlinien der Polizeilichen Kriminalstatistik.","https://www.polizei-musterkreis.example/opendata/kriminalstatistik","https://www.polizei-musterkreis.example/opendata/kriminalstatistik/kriminalstatistik.xlsx","dl-de-by","Datenquelle: Polizeidirektion Musterkreis, 2025, Lizenz Datenlizenz Deutschland – Namensnennung 2.0","Nutzung für jeden Zweck erlaubt, auch kommerziell; die Quelle ist zu nennen.","JUST","Kriminalität
 Sicherheit

samples/import-example.json

@@ -393,7 +393,7 @@
     "attribution": "",
     "rights": "Nutzung ohne Einschränkungen, auch ohne Nennung der Quelle.",
     "theme": "TRAN",
-    "keywords": "Radverkehr\nVerkehrszählung\nc_b79e35eb\nMesswerte",
+    "keywords": "Radverkehr\nVerkehrszählung\nMobilität\nMesswerte",
     "language": "de",
     "format": "CSV",
     "media_type": "text/csv",
@@ -1065,7 +1065,7 @@
     "attribution": "",
     "rights": "Nutzung ohne Einschränkungen, auch ohne Nennung der Quelle.",
     "theme": "ENER,TRAN",
-    "keywords": "Elektromobilität\nLadeinfrastruktur\nc_b79e35eb\nGeodaten",
+    "keywords": "Elektromobilität\nLadeinfrastruktur\nMobilität\nGeodaten",
     "language": "de",
     "format": "GeoJSON",
     "media_type": "application/geo+json",

tests/e2e/admin-workflow.spec.js

@@ -235,6 +235,27 @@ test.describe('Formular', () => {
     );
   });
 
+  // Bis 2.47.2 entstand das HTML dieses Reiters schon bei der Feldregistrierung,
+  // bevor WordPress den Datensatz kannte: JSON-LD und REST-Link fehlten immer,
+  // nur der Hinweis „Die JSON-LD-Ansicht unten …" stand da.
+  test('die Vorschau zeigt das gespeicherte JSON-LD und den REST-Link', async ({ page }) => {
+    await page.goto(LIST_URL);
+    await page.locator('#the-list a.row-title', { hasText: 'E2E: Schulstandorte' }).click();
+
+    await page.locator('.cf-container__tabs-item button', { hasText: 'Vorschau' }).click();
+
+    const code = page.locator('#odw-jsonld-preview pre.odw-jsonld-code');
+    await expect(code).toBeVisible();
+    await expect(code).toContainText('"@type": "dcat:Dataset"');
+    await expect(code).toContainText('E2E: Schulstandorte');
+    await expect(page.getByRole('link', { name: 'REST-Endpoint öffnen' })).toHaveAttribute('href', /datenatlas\/v1\/datasets\/\d+/);
+
+    // Die Zusammenfassung nennt das Thema beim Namen, nicht als EU-URI.
+    const card = page.locator('[data-odw-live-card]');
+    await expect(card).toContainText('Bildung');
+    await expect(card).not.toContainText('publications.europa.eu');
+  });
+
   test('wechselt auf den zweiten Reiter', async ({ page }) => {
     await page.goto('/wp-admin/post-new.php?post_type=odw_dataset');