# Project Development Plan

This document outlines the development phases for building the Modern WordPress Block Theme, based on the architecture defined in `README.md`.

---

## Phase 1: Project Setup & Foundation

The goal of this phase is to establish a working local development environment and ensure all the core tooling is functioning correctly.

- [x] **Initialize Git Repository:** Create a new repository for the project.
- [x] **Local Environment Setup:** Configure a local WordPress installation (e.g., using LocalWP, DDEV).
- [x] **Theme Installation:**
    - [x] Clone the starter theme into the `wp-content/themes/` directory.
    - [x] Navigate to the theme directory in the terminal.
- [x] **Install Dependencies:** Run `npm install` to download Node.js dependencies (Tailwind CSS, PostCSS, etc.).
- [x] **Verify Build Process:**
    - [x] Run `npm run dev` to start the file watcher.
    - [x] Make a small change to a template file (e.g., add a Tailwind class to `index.html`) and verify that the `style.css` file is updated and the change is reflected on the front-end.
- [x] **Initial `functions.php` Configuration:**
    - [x] Ensure `add_theme_support('block-templates')` and other necessary supports are active as per the `README.md`.

---

## Phase 2: Core Styling & `theme.json` Sync

This phase focuses on defining the visual identity of the theme and ensuring a seamless sync between WordPress's global styles and Tailwind's utility classes.

- [x] **Define Design System in `theme.json`:**
    - [x] **Colors:** Define the color palette (primary, secondary, accent, text, background) under `settings.color.palette`.
    - [x] **Typography:** Define font families and font sizes under `settings.typography`.
    - [x] **Spacing & Layout:** Define content/wide widths and spacing presets under `settings.layout` and `settings.spacing`.
- [x] **Configure `tailwind.config.js`:**
    - [x] Modify the `tailwind.config.js` file to extend its `theme` section.
    - [x] Reference the CSS Custom Properties generated by `theme.json` for colors, font sizes, etc. (e.g., `primary: 'var(--wp--preset--color--primary)'`).
- [x] **Test the Sync:**
    - [x] In the WordPress editor, apply a color from the `theme.json` palette to a block.
    - [x] In a template file, apply the corresponding Tailwind utility class (e.g., `bg-primary`) to an element.
    - [x] Verify that both the editor and the front-end render the same color, sourced from `theme.json`.

---

## Phase 3: Build Core Templates & Parts

With the foundation in place, this phase involves building the main structural components and page templates of the theme.

- [x] **Create Template Parts (`/parts`):**
    - [x] Build `header.html` with site branding, navigation, and other header elements.
    - [x] Build `footer.html` with footer navigation, copyright info, etc.
- [x] **Create Page Templates (`/templates`):**
    - [x] Develop `index.html` as the main wrapper, including the header and footer parts.
    - [x] Create `page.html` for standard pages.
    - [x] Create `single.html` for single blog posts.
    - [x] Create `archive.html` for post archives.
    - [x] Create `404.html` for handling "not found" errors.
- [x] **Styling:** Use Tailwind CSS utility classes for all layout and styling within these HTML files. Leverage core blocks (Group, Stack, Row) for structural layout within the editor.

---

## Phase 4: Develop Custom Blocks

This phase is for creating complex, reusable components that require structured data, going beyond what core blocks offer.

- [x] **Identify Required Blocks:** List the custom components needed (e.g., Hero, Testimonial Slider, Call to Action, Icon Grid).
- [ ] **For each block:**
    - [x] **Hero Banner:**
        - [x] Scaffold Block, `block.json`, `index.js`, `render.php`.
    - [ ] **CTA Bubble Stats:**
        - [x] Scaffold Block, `block.json`, `index.js`, `render.php`.
    - [ ] **Card Grid (3-Col):**
        - [x] Scaffold Block, `block.json`, `index.js`, `render.php`.
    - [ ] **Testimonial Slider:**
        - [ ] Scaffold Block, `block.json`, `index.js`, `render.php`.
    - [x] **Fluid Container:**
        - [x] Scaffold Block, `block.json`, `index.js`, `render.php`.

---

## Phase 5: Content Population & Full Site Editing

This phase involves using the WordPress admin and Full Site Editor (FSE) to build out the site's content and layouts.

- [x] **Populate Content:** Create pages, posts, and custom post types as needed.
- [x] **Build with FSE:**
    - [x] Use the Site Editor to assemble templates using the created template parts and blocks.
    - [x] Create and assign Template Parts for different sections (e.g., a unique blog post header).
    - [x] Build out key pages using the custom blocks and core layout blocks.
- [x] **Responsive Testing:** Thoroughly review the entire site on various screen sizes (desktop, tablet, mobile) and address any styling issues.
- [x] **Cross-Browser Testing:** Check for compatibility and consistent appearance in major web browsers (Chrome, Firefox, Safari, Edge).

---

## Phase 6: Finalization & Production Deployment

The final phase involves optimizing the theme for performance and deploying it to a live server.

- [x] **Run Production Build:** Execute `npm run build` to purge unused CSS and minify the final stylesheet.
- [x] **Code Review & Cleanup:** Remove any console logs, commented-out code, and unused files.
- [ ] **Deployment:**
    - [ ] Deploy the theme files to the production/staging server.
    - [ ] Migrate the database if necessary.
- [ ] **Final QA:** Perform a final round of testing on the live server to catch any environment-specific issues.