update

2026-04-11 00:37:12 +02:00
parent 65d99059e0
commit 97778c38be
18 changed files with 1204 additions and 229 deletions
--- a/.paul/phases/01-acf-migration-2707/01-01-PLAN.md
+++ b/.paul/phases/01-acf-migration-2707/01-01-PLAN.md
@@ -0,0 +1,339 @@
+---
+phase: 01-acf-migration-2707
+plan: 01
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - wp-content/themes/ostal_WP/sections.php
+  - wp-content/themes/ostal_WP/page-2707.php
+  - wp-content/themes/ostal_WP/template-parts/sections/section-collaboration-steps.php
+  - wp-content/themes/ostal_WP/migrate-2707.php
+autonomous: false
+delegation: off
+---
+
+<objective>
+## Goal
+Migrate hardcoded content from `page-2707.php` (Ogrody zimowe — klienci indywidualni) to ACF Flexible Content, making all text, images, and sections editable from WordPress admin.
+
+## Purpose
+Currently all content is hardcoded in PHP — any change requires developer intervention. After migration, the client can edit headings, texts, images, and section order directly in WP admin.
+
+## Output
+- `page-2707.php` rewritten to use ACF Flexible Content via `sections.php`
+- Missing layouts added to `sections.php` dispatcher
+- New `section-collaboration-steps.php` partial for the numbered steps section
+- `migrate-2707.php` one-time script to populate ACF content programmatically
+</objective>
+
+<context>
+## Project Context
+@.paul/PROJECT.md
+@.paul/ROADMAP.md
+
+## Source Files
+@wp-content/themes/ostal_WP/page-2707.php
+@wp-content/themes/ostal_WP/sections.php
+@wp-content/themes/ostal_WP/template-parts/sections/section-hero-with-form.php
+@wp-content/themes/ostal_WP/template-parts/sections/section-two-col.php
+@wp-content/themes/ostal_WP/template-parts/sections/section-two-col-with-bg.php
+@wp-content/themes/ostal_WP/template-parts/sections/section-gallery.php
+@wp-content/themes/ostal_WP/template-parts/sections/section-boxes_repeater_img_title_text_cta.php
+</context>
+
+<acceptance_criteria>
+
+## AC-1: Flexible Content dispatcher complete
+```gherkin
+Given sections.php is loaded on page 2707
+When the ACF flexible content field "sections" contains layouts
+Then hero_with_form, gallery, and collaboration_steps layouts are dispatched to correct template-parts
+```
+
+## AC-2: Collaboration steps layout works
+```gherkin
+Given a "collaboration_steps" layout is added in ACF admin
+When a repeater with step titles is filled in
+Then the page renders numbered steps with connecting lines matching the current design
+```
+
+## AC-3: Page 2707 uses Flexible Content
+```gherkin
+Given page-2707.php is loaded
+When the page renders
+Then all content comes from ACF fields (no hardcoded text/images remain)
+And the visual output matches the current hardcoded version when same content is entered in ACF
+```
+
+## AC-4: Migration script populates ACF content
+```gherkin
+Given migrate-2707.php is executed once (via browser or WP-CLI)
+When the script runs with WordPress and ACF loaded
+Then all 10 flexible content layouts are created for page 2707
+And all text, headings, classes, shortcodes, and image URLs are populated
+And the page renders with full content without manual data entry
+```
+
+</acceptance_criteria>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Add missing layouts to sections.php dispatcher</name>
+  <files>wp-content/themes/ostal_WP/sections.php</files>
+  <action>
+    Add three missing layout dispatchers to the flexible content loop in sections.php:
+
+    1. `hero_with_form` → loads `template-parts/sections/section-hero-with-form`
+    2. `gallery` → loads `template-parts/sections/section-gallery`
+    3. `collaboration_steps` → loads `template-parts/sections/section-collaboration-steps`
+
+    Follow the exact same pattern as existing entries (get_row_layout() check + get_template_part).
+    Do NOT modify any existing layout dispatchers.
+  </action>
+  <verify>sections.php contains all 11 layout dispatchers (8 existing + 3 new) with no syntax errors</verify>
+  <done>AC-1 satisfied: All needed layouts are dispatched from sections.php</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Create collaboration-steps section partial</name>
+  <files>wp-content/themes/ostal_WP/template-parts/sections/section-collaboration-steps.php</files>
+  <action>
+    Create new template partial for the numbered collaboration steps section.
+    
+    ACF sub-fields to use (will need to be registered in ACF admin):
+    - `section_heading` (text) — section title, e.g. "Jak wygląda współpraca?"
+    - `steps` (repeater) with sub-field:
+      - `step_title` (text) — step name
+    - `bottom_text` (textarea) — text below the steps
+    
+    HTML structure must match the current hardcoded version exactly:
+    - Outer: `<section id="collaboration" class="section-boxes-repeater">`
+    - Inner: `.wrapper.wrapper--inner` > `h2.section-heading.heading--md`
+    - Steps container: `.collaboration-steps` with max-width 900px, margin auto, padding 20px 0
+    - Each step: `.collaboration-step` with flex layout, gap 20px, margin-bottom 40px (except last)
+    - Step number: `.step-number` — circular green gradient (#88b14b → #6a8f3a), 60x60, white text
+    - Connector line: `.step-connector` — 2px wide, gradient green to gray, between steps (not after last)
+    - Step content: `.step-content` — gray bg (#f8f9fa), 4px green left border, rounded
+    - Bottom text: `.col-text-content.mt-4.text-center` > `<p>`
+
+    Move inline styles to classes where possible, but keep them if removing would break existing CSS dependencies.
+    Include the existing hover/responsive CSS from page-2707.php as a <style> block in the partial.
+  </action>
+  <verify>Template renders numbered steps with ACF repeater data, matching current visual design</verify>
+  <done>AC-2 satisfied: Collaboration steps layout renders correctly from ACF data</done>
+</task>
+
+<task type="auto">
+  <name>Task 3: Rewrite page-2707.php to use Flexible Content</name>
+  <files>wp-content/themes/ostal_WP/page-2707.php</files>
+  <action>
+    Replace entire hardcoded content with ACF Flexible Content loader.
+
+    New page-2707.php should contain only:
+    ```php
+    <?php get_header(); ?>
+    <?php include( locate_template( 'sections.php' ) ); ?>
+    <?php get_footer(); ?>
+    ```
+
+    This delegates all section rendering to sections.php which dispatches based on ACF layouts.
+
+    The user will then need to configure the following layouts in WP admin for page 2707:
+    1. hero_with_form — heading, text (wysiwyg for multiple paragraphs + bold), form shortcode, bg image
+    2. two_col_section — "Nasze ogrody zimowe..." (imageLeft, bg-light)
+    3. two_col_section — "Co wyróżnia nasze ogrody zimowe" (imageLeft, bg-light)
+    4. collaboration_steps — 5 steps + bottom text
+    5. two_col_section — "Doświadczenie w systemach aluminiowych" (imageLeft, bg-light)
+    6. two_col_section — "Planowanie realizacji bez pośpiechu" (imageLeft, bg-light)
+    7. two_col_section — "Porozmawiajmy o twoim projekcie" (imageLeft, bg-light)
+    8. two_col_section_with_bg — CTA "Sprawdź orientacyjny budżet" (bg-dark)
+    9. two_col_section — "Funkcje ogrodów zimowych" (imageLeft, bg-light)
+    10. gallery — "Nasze realizacje ogrodów zimowych" (6 images)
+
+    NOTE on hero_with_form: Current template only outputs one <p> for text field.
+    The hardcoded page has 3 paragraphs (regular + strong/specs + CTA text).
+    If the ACF text field is wysiwyg type, all 3 paragraphs can be entered there.
+    If it's textarea, the template needs modification — check and adapt section-hero-with-form.php
+    to use wysiwyg or wrap text output in wpautop().
+  </action>
+  <verify>page-2707.php contains only header, sections.php include, and footer — no hardcoded content</verify>
+  <done>AC-3 satisfied: Page 2707 renders entirely from ACF Flexible Content</done>
+</task>
+
+<task type="auto">
+  <name>Task 4: Create migration script to populate ACF content</name>
+  <files>wp-content/themes/ostal_WP/migrate-2707.php</files>
+  <action>
+    Create a one-time PHP migration script that programmatically fills all ACF Flexible Content
+    data for page 2707 using `update_field()`.
+
+    Script structure:
+    1. WordPress bootstrap: require wp-load.php (relative path from theme dir)
+    2. Safety check: only run if GET param `?run=migrate-2707` is present
+    3. Safety check: abort if page 2707 already has sections data
+    4. Define $page_id = 2707
+    5. Build $sections array matching ACF Flexible Content structure
+
+    The $sections array must contain 10 layouts in this order:
+
+    Layout 1: hero_with_form
+    - acf_fc_layout: "hero_with_form"
+    - heading: "Całoroczne ogrody zimowe klasy premium"
+    - text: full HTML with 3 paragraphs (regular text, strong specs with <br>, CTA text)
+    - form_shortcode: '[contact-form-7 id="21a1143" title="Formularz kontaktowy"]'
+    - background_image: "/wp-content/uploads/2023/10/ogrody-zimowe.jpg"
+    - section_id: "hero_box"
+
+    Layout 2: two_col_section
+    - section_heading: "Nasze ogrody zimowe powstają z myślą o klientach, którzy szukają trwałego,<br>elastycznego i bezpiecznego rozwiązania na lata, a nie tymczasowej zabudowy."
+    - text: "<p>Każda realizacja jest projektowana indywidualnie...</p><p>Realizacje całorocznych ogrodów zimowych rozpoczynają się od około 100 000 zł netto.</p>"
+    - image: "https://ostal.pl/wp-content/uploads/2026/01/IMG_2832-scaled.jpg"
+    - additional_class: "imageLeft"
+    - additional_section_class: "bg-light"
+    - heading_position: "textRight"
+    - choose_heading: "h2"
+
+    Layout 3: two_col_section
+    - section_heading: "Co wyróżnia nasze ogrody zimowe"
+    - text: HTML <ul> list with 5 items + closing paragraph
+    - image: "https://ostal.pl/wp-content/uploads/2026/01/199-f27gxxl.jpg"
+    - additional_class: "imageLeft"
+    - additional_section_class: "bg-light"
+    - heading_position: "textRight"
+    - choose_heading: "h2"
+
+    Layout 4: collaboration_steps
+    - section_heading: "Jak wygląda współpraca?"
+    - steps: repeater with 5 rows:
+      1. "Rozmowa i analiza potrzeb."
+      2. "Koncepcja i dobór rozwiązań"
+      3. "Indywidualna oferta i harmonogram"
+      4. "Umowa i zaliczka rezerwująca termin"
+      5. "Produkcja i montaż"
+    - bottom_text: "Prowadzimy klienta przez cały proces - spokojnie krok po kroku."
+
+    Layout 5: two_col_section
+    - section_heading: "Doświadczenie w systemach aluminiowych"
+    - text: 2 paragraphs about aluminum systems experience
+    - image: "/wp-content/uploads/2026/02/att_698c47679eb9b4.14191582.jpeg"
+    - additional_class: "imageLeft", additional_section_class: "bg-light"
+
+    Layout 6: two_col_section
+    - section_heading: "Planowanie realizacji bez pośpiechu"
+    - text: paragraph about advance planning
+    - image: "/wp-content/uploads/2026/02/att_698c4767a04c46.41417006.jpg"
+    - additional_class: "imageLeft", additional_section_class: "bg-light"
+
+    Layout 7: two_col_section
+    - section_heading: "Porozmawiajmy o twoim projekcie"
+    - text: paragraph inviting contact
+    - image: "/wp-content/uploads/2026/02/att_698c47679ad0a0.33546122.jpeg"
+    - additional_class: "imageLeft", additional_section_class: "bg-light"
+
+    Layout 8: two_col_section_with_bg
+    - section_heading: "Sprawdź orientacyjny budżet projektu"
+    - cta: "#hero_box"
+    - cta_text: "Umów rozmowę"
+    - background_image: "https://ostal.pl/wp-content/uploads/2021/05/hero-about.jpg"
+    - additional_section_class: "bg-dark"
+
+    Layout 9: two_col_section
+    - section_heading: "Funkcje ogrodów zimowych"
+    - text: full paragraph about winter garden functions (preserve &nbsp; entities)
+    - image: "https://ostal.pl/wp-content/uploads/2023/10/DECORATION-PHOTO-1.jpg"
+    - additional_class: "imageLeft", additional_section_class: "bg-light"
+
+    Layout 10: gallery
+    - section_heading: "Nasze realizacje ogrodów zimowych"
+    - section_id: "galeria"
+    - gallery: For images, use helper function to find attachment IDs by URL:
+      function get_attachment_id_by_url($url) {
+        global $wpdb;
+        $path = parse_url($url, PHP_URL_PATH);
+        $path = preg_replace('/-\d+x\d+(?=\.\w+$)/', '', $path);
+        $sql = $wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid LIKE %s", '%' . $wpdb->esc_like(basename($path)) . '%');
+        return (int) $wpdb->get_var($sql);
+      }
+      Gallery images (6 URLs from hardcoded page):
+      - https://ostal.pl/wp-content/uploads/2023/10/202-4c7gxxl.jpg
+      - https://ostal.pl/wp-content/uploads/2023/10/199-f27gxxl.jpg
+      - https://ostal.pl/wp-content/uploads/2023/10/20170608_142315-1024x576.jpg
+      - https://ostal.pl/wp-content/uploads/2023/10/IMG_0535-1-1024x768.jpg
+      - https://ostal.pl/wp-content/uploads/2023/10/IMG_3754-1-1-1024x768.jpg
+      - https://ostal.pl/wp-content/uploads/2023/10/Frame-36-1-1024x728.jpg
+
+    6. Call update_field('sections', $sections, $page_id)
+    7. Output success message with count of layouts created
+    8. Add prominent reminder at end: "DELETE THIS FILE after migration!"
+
+    IMPORTANT: Use exact text content from the hardcoded page-2707.php. Copy text verbatim
+    including HTML tags, <br>, &nbsp; entities, and <strong> formatting.
+    
+    Script must be idempotent — if sections already exist, show warning and exit.
+  </action>
+  <verify>Script file exists, contains valid PHP, has safety checks, all 10 layouts defined</verify>
+  <done>AC-4 satisfied: Migration script ready to populate all ACF content for page 2707</done>
+</task>
+
+<task type="checkpoint:human-verify" gate="blocking">
+  <what-built>Page 2707 migrated to ACF Flexible Content with content populated by migration script</what-built>
+  <how-to-verify>
+    1. Visit: https://ostal.pl/wp-content/themes/ostal_WP/migrate-2707.php?run=migrate-2707
+       (or run via WP-CLI: wp eval-file wp-content/themes/ostal_WP/migrate-2707.php)
+    2. Open WordPress admin → Pages → page 2707 (Ogrody zimowe)
+    3. Verify "Sections" flexible content field shows all 10 layouts with content
+    4. Preview the page
+    5. Compare with the current live version — layout, spacing, styles should match
+    6. Test mobile responsiveness of collaboration steps section
+    7. DELETE migrate-2707.php after confirming
+  </how-to-verify>
+  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
+</task>
+
+</tasks>
+
+<boundaries>
+
+## DO NOT CHANGE
+- wp-content/themes/ostal_WP/template-parts/sections/section-hero-with-form.php (only modify if text field needs wpautop — minimal change)
+- wp-content/themes/ostal_WP/template-parts/sections/section-two-col.php
+- wp-content/themes/ostal_WP/template-parts/sections/section-two-col-with-bg.php
+- wp-content/themes/ostal_WP/template-parts/sections/section-gallery.php
+- wp-content/themes/ostal_WP/functions.php
+- Any other page-*.php files
+- wp-content/themes/ostal_WP/page-templates/*
+
+## SCOPE LIMITS
+- This plan only migrates page-2707.php
+- ACF field group for "sections" Flexible Content must already exist in WP (it does — used by other pages)
+- New layouts (hero_with_form, gallery, collaboration_steps) must be added to the field group in ACF admin
+- No CSS/JS file changes — all existing styles continue to work
+- No new dependencies
+- migrate-2707.php must be DELETED after successful migration
+
+</boundaries>
+
+<verification>
+Before declaring plan complete:
+- [ ] sections.php has 11 layout dispatchers (no duplicates, no syntax errors)
+- [ ] section-collaboration-steps.php exists and follows ACF sub_field pattern
+- [ ] page-2707.php contains only get_header, sections.php include, get_footer
+- [ ] No hardcoded content remains in page-2707.php
+- [ ] migrate-2707.php exists with all 10 layouts and safety checks
+- [ ] Migration script executed successfully (all content populated)
+- [ ] User has verified visual match in WordPress admin (checkpoint)
+- [ ] migrate-2707.php deleted after verification
+</verification>
+
+<success_criteria>
+- All 4 auto tasks completed
+- Human verification checkpoint approved
+- Page 2707 renders identically from ACF content as it did hardcoded
+- No regressions on other pages
+</success_criteria>
+
+<output>
+After completion, create `.paul/phases/01-acf-migration-2707/01-01-SUMMARY.md`
+</output>
--- a/.paul/phases/01-acf-migration-2707/01-01-SUMMARY.md
+++ b/.paul/phases/01-acf-migration-2707/01-01-SUMMARY.md
@@ -0,0 +1,120 @@
+---
+phase: 01-acf-migration-2707
+plan: 01
+subsystem: ui
+tags: [wordpress, acf, flexible-content, php, migration]
+
+requires:
+  - phase: none
+    provides: n/a
+provides:
+  - ACF Flexible Content integration for page 2707
+  - collaboration_steps ACF layout (reusable)
+  - Migration script pattern for future pages
+affects: [02-acf-migration-2598, 03-acf-migration-2101]
+
+tech-stack:
+  added: []
+  patterns: [acf-flexible-content-migration, one-time-php-migration-script]
+
+key-files:
+  created:
+    - wp-content/themes/ostal_WP/template-parts/sections/section-collaboration-steps.php
+    - wp-content/themes/ostal_WP/migrate-2707.php
+  modified:
+    - wp-content/themes/ostal_WP/sections.php
+    - wp-content/themes/ostal_WP/page-2707.php
+    - wp-content/themes/ostal_WP/template-parts/sections/section-hero-with-form.php
+    - wp-content/themes/ostal_WP/css/custom.css
+    - wp-content/themes/ostal_WP/acf-json/group_6494221367141.json
+
+key-decisions:
+  - "Hero text field: changed <p> to <div> wrapper to support multi-paragraph WYSIWYG content"
+  - "Migration approach: one-time PHP script using update_field() instead of manual WP admin entry"
+  - "ACF JSON: added collaboration_steps layout directly to JSON sync file"
+
+patterns-established:
+  - "ACF migration: create migrate-XXXX.php script with safety checks, run once, delete after"
+  - "New layouts: add to both sections.php dispatcher AND acf-json group file"
+
+duration: ~45min
+started: 2026-04-11
+completed: 2026-04-11
+---
+
+# Phase 1 Plan 01: ACF Migration page-2707 Summary
+
+**Migrated hardcoded "Ogrody zimowe" page (2707) to ACF Flexible Content with 10 layouts and auto-populated content via migration script.**
+
+## Acceptance Criteria Results
+
+| Criterion | Status | Notes |
+|-----------|--------|-------|
+| AC-1: Flexible Content dispatcher complete | Pass | 3 new layouts added to sections.php (hero_with_form, gallery, collaboration_steps) |
+| AC-2: Collaboration steps layout works | Pass | New partial renders numbered steps with repeater, hover effects, responsive CSS |
+| AC-3: Page 2707 uses Flexible Content | Pass | Page reduced to 3 lines (header + sections + footer) |
+| AC-4: Migration script populates content | Pass | All 10 layouts populated programmatically, user verified |
+
+## Accomplishments
+
+- Page 2707 fully editable from WP admin (10 ACF Flexible Content layouts)
+- New reusable `collaboration_steps` layout with ACF field group definition in JSON
+- Migration script pattern established for future page migrations (2598, 2101)
+
+## Files Created/Modified
+
+| File | Change | Purpose |
+|------|--------|---------|
+| `sections.php` | Modified | Added 3 layout dispatchers (hero_with_form, gallery, collaboration_steps) |
+| `page-2707.php` | Modified | Replaced ~225 lines of hardcoded content with 3-line Flexible Content loader |
+| `section-collaboration-steps.php` | Created | New partial for numbered cooperation steps with repeater |
+| `migrate-2707.php` | Created | One-time migration script populating all 10 layouts (TO DELETE) |
+| `section-hero-with-form.php` | Modified | Changed `<p>` to `<div>` for multi-paragraph WYSIWYG support |
+| `custom.css` | Modified | Added darker gradient overlay on hero for page 2707 |
+| `group_6494221367141.json` | Modified | Added collaboration_steps layout definition to ACF JSON sync |
+
+## Deviations from Plan
+
+### Summary
+
+| Type | Count | Impact |
+|------|-------|--------|
+| Auto-fixed | 3 | Essential fixes for visual fidelity |
+| Deferred | 0 | — |
+
+### Auto-fixed Issues
+
+**1. Hero text rendering broken (nested `<p>` tags)**
+- Found during: Checkpoint verification
+- Issue: Template wrapped text in `<p>`, WYSIWYG content also had `<p>` tags — browsers broke layout
+- Fix: Changed `<p class="hero-text">` to `<div class="hero-text">` in section-hero-with-form.php
+- Verification: User confirmed hero displays correctly
+
+**2. Hero background too bright for text readability**
+- Found during: Checkpoint verification
+- Issue: White text on light background image had poor contrast
+- Fix: Added `body.page-id-2707 .hero-with-form .bg-filter` rule with darker gradient (55% → 25% opacity)
+- Verification: User confirmed "Jest ok"
+
+**3. Layout 3 column order incorrect**
+- Found during: Checkpoint verification
+- Issue: "Co wyróżnia" section had image-left layout, user wanted text-left/image-right
+- Fix: Removed `imageLeft` class from layout 3 in migration script
+- Verification: User confirmed correct order
+
+## Next Phase Readiness
+
+**Ready:**
+- Migration pattern proven — same approach applies to page-2598 and page-2101
+- All existing ACF layouts verified working (two_col, two_col_with_bg, hero_with_form, gallery)
+- collaboration_steps layout reusable for page-2598 (which has identical section)
+
+**Concerns:**
+- `migrate-2707.php` must be deleted from server after verification (security risk)
+- Gallery images require attachment IDs — if images aren't in Media Library, they won't appear
+
+**Blockers:** None
+
+---
+*Phase: 01-acf-migration-2707, Plan: 01*
+*Completed: 2026-04-11*