340 lines
16 KiB
Markdown
340 lines
16 KiB
Markdown
---
|
|
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 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>, 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>
|