From 4afa0138ef380a75859fbaaee01d88c73c66f275 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 17 May 2026 18:29:26 +0000
Subject: [PATCH] Add 'Einstieg' tab with introduction and fix form field
 spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add new 'Einstieg' (Introduction) tab as Tab 0 with welcome content
- Include brief explanation of Open Data Wizard from README
- Present 5-step wizard structure overview
- Remove mandatory field hint from Tab 1 (only on Einstieg)
- Fix 'Dateigröße' field spacing: add 20px padding to form fields
- Ensure consistent margin/padding across all form fields
- All 90 tests pass, PHPCS validates

https://claude.ai/code/session_01JB1xUQM892bVZ4Yv3MZjvq
---
 assets/css/admin.css      |  17 +++++++
 includes/class-fields.php | 103 +++++++++++++++++++++++++++++++++++++-
 2 files changed, 118 insertions(+), 2 deletions(-)

diff --git a/assets/css/admin.css b/assets/css/admin.css
index 00c4d6e..486bff4 100644
--- a/assets/css/admin.css
+++ b/assets/css/admin.css
@@ -99,6 +99,23 @@
     padding: 20px 0;
 }
 
+.cf-field {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+/* Consistent spacing for all form fields */
+.cf-container__tab .cf-field {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+/* Specific spacing for the file size field */
+[data-odw-backing="byte_size"] {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
 /* =========================================================================
    Required field indicators
    ========================================================================= */
diff --git a/includes/class-fields.php b/includes/class-fields.php
index 9116273..bca37dd 100644
--- a/includes/class-fields.php
+++ b/includes/class-fields.php
@@ -42,6 +42,7 @@ public static function register(): void {
 	/**
 	 * Registers the tabbed meta container with all dataset fields.
 	 * Tab structure (v2.1+):
+	 *   0 — Einstieg
 	 *   1 — Grundlegende Informationen
 	 *   2 — Inhaltliche Angaben
 	 *   3 — Datenbereitstellung (Lizenz + Distribution)
@@ -53,14 +54,23 @@ private static function register_required_fields(): void {
 			->where( 'post_type', '=', 'odw_dataset' )
 			->set_priority( 'high' )
 
+		// -----------------------------------------------------------------
+		// Tab 0 — Einstieg
+		// -----------------------------------------------------------------
+			->add_tab(
+				__( '0 — Einstieg', 'open-data-wizard' ),
+				array(
+					Field::make( 'html', 'odw_introduction_html' )
+					->set_html( self::get_introduction_html() ),
+				)
+			)
+
 		// -----------------------------------------------------------------
 		// Tab 1 — Grundlegende Informationen
 		// -----------------------------------------------------------------
 			->add_tab(
 				__( '1 — Grundlegende Informationen', 'open-data-wizard' ),
 				array(
-					Field::make( 'html', 'odw_tab1_hint' )
-					->set_html( '<p class="description">' . esc_html__( 'Pflichtfelder gemäß DCAT-AP 3.0. Ohne diese Angaben kann der Datensatz nicht veröffentlicht werden.', 'open-data-wizard' ) . '</p>' ),
 
 					Field::make( 'text', 'odw_publisher', __( 'Wer gibt diese Daten heraus?', 'open-data-wizard' ) )
 						->set_required( true )
@@ -610,6 +620,95 @@ public static function get_political_geocoding_level_options(): array {
 	 *
 	 * @return string HTML markup.
 	 */
+	/**
+	 * Generates the HTML for the introduction tab.
+	 *
+	 * @return string HTML output.
+	 */
+	private static function get_introduction_html(): string {
+		ob_start();
+		?>
+		<div class="odw-introduction-wrapper">
+			<h2><?php esc_html_e( 'Willkommen im Open Data Wizard', 'open-data-wizard' ); ?></h2>
+
+			<p class="description">
+		<?php esc_html_e( 'Der Open Data Wizard ermöglicht es Ihnen, Datensätze direkt in WordPress zu beschreiben und als maschinenlesbare, standardkonforme Metadaten bereitzustellen — ohne technische Vorkenntnisse.', 'open-data-wizard' ); ?>
+			</p>
+
+			<h3><?php esc_html_e( 'Das Problem', 'open-data-wizard' ); ?></h3>
+			<p>
+		<?php esc_html_e( 'Offene Daten zu veröffentlichen ist schwieriger als es sein müsste. Komplexe Formulare und unbekannte Fachbegriffe erschweren die Arbeit. Der Open Data Wizard vereinfacht dies, indem er Sie mit verständlichen Fragen durch den Prozess führt.', 'open-data-wizard' ); ?>
+			</p>
+
+			<h3><?php esc_html_e( 'Die Idee', 'open-data-wizard' ); ?></h3>
+			<p>
+		<?php esc_html_e( 'Beschreiben Sie Ihre Datensätze dort, wo Sie ohnehin arbeiten – direkt in WordPress. Das Plugin generiert daraus eine maschinenlesbare Beschreibung nach dem internationalen Standard DCAT-AP 3.0 und stellt sie unter einer persistenten URL bereit.', 'open-data-wizard' ); ?>
+		<?php esc_html_e( 'Open-Data-Plattformen können diese URL als Harvest-Quelle einbinden und die Metadaten automatisch einsammeln.', 'open-data-wizard' ); ?>
+			</p>
+
+			<h3><?php esc_html_e( 'Wie funktioniert es?', 'open-data-wizard' ); ?></h3>
+			<p><?php esc_html_e( 'Das Wizard-Formular ist in fünf einfache Schritte unterteilt:', 'open-data-wizard' ); ?></p>
+			<ol>
+				<li>
+					<strong><?php esc_html_e( '1 — Grundlegende Informationen', 'open-data-wizard' ); ?></strong><br>
+			<?php esc_html_e( 'Wer gibt diese Daten heraus? Worum geht es? In welche Kategorie gehört der Datensatz?', 'open-data-wizard' ); ?>
+				</li>
+				<li>
+					<strong><?php esc_html_e( '2 — Inhaltliche Angaben', 'open-data-wizard' ); ?></strong><br>
+			<?php esc_html_e( 'Sprache, Schlagworte, Veröffentlichungs- und Änderungsdatum, Themenklassifikation.', 'open-data-wizard' ); ?>
+				</li>
+				<li>
+					<strong><?php esc_html_e( '3 — Datenbereitstellung', 'open-data-wizard' ); ?></strong><br>
+			<?php esc_html_e( 'Download-URL, Format, Dateigröße, Lizenz und Zuschreibungstext.', 'open-data-wizard' ); ?>
+				</li>
+				<li>
+					<strong><?php esc_html_e( '4 — Erweiterte Angaben', 'open-data-wizard' ); ?></strong><br>
+			<?php esc_html_e( 'Projektseite, Aktualisierungsfrequenz, geografische und zeitliche Abdeckung, Kontaktinformationen.', 'open-data-wizard' ); ?>
+				</li>
+				<li>
+					<strong><?php esc_html_e( '5 — Vorschau', 'open-data-wizard' ); ?></strong><br>
+			<?php esc_html_e( 'Generiertes JSON-LD live einsehen und über die REST-API abrufen.', 'open-data-wizard' ); ?>
+				</li>
+			</ol>
+
+			<h3><?php esc_html_e( 'Erste Schritte', 'open-data-wizard' ); ?></h3>
+			<p>
+		<?php esc_html_e( 'Füllen Sie die Pflichtfelder aus (mit * gekennzeichnet) und speichern Sie den Datensatz. Sie können ihn später noch bearbeiten. Jedes Feld hat hilfreiche Beispiele – schauen Sie in den Hilfetexten vorbei!', 'open-data-wizard' ); ?>
+			</p>
+
+			<style>
+				.odw-introduction-wrapper {
+					padding: 20px 0;
+					line-height: 1.6;
+					color: var(--odw-color-text);
+				}
+				.odw-introduction-wrapper h2 {
+					margin-top: 0;
+					color: var(--odw-color-primary);
+				}
+				.odw-introduction-wrapper h3 {
+					margin-top: 24px;
+					color: var(--odw-color-primary);
+					font-size: 16px;
+				}
+				.odw-introduction-wrapper ol {
+					list-style-position: inside;
+					padding-left: 0;
+				}
+				.odw-introduction-wrapper li {
+					margin-bottom: 12px;
+					padding-left: 0;
+				}
+				.odw-introduction-wrapper .description {
+					font-size: 15px;
+					color: var(--odw-color-text);
+				}
+			</style>
+		</div>
+		<?php
+		return ob_get_clean();
+	}
+
 	/**
 	 * Generates the HTML for the JSON-LD preview tab.
 	 *