Document the two production-template fixes in the inner-page plan

This commit is contained in:
Keith Solomon
2026-07-01 12:17:14 -05:00
parent 667cb2ec89
commit 342ae015c7
@@ -186,7 +186,7 @@ if ( ! $intro ) {
?>
<section class="page-intro py-12 lg:py-20 text-center" aria-label="<?php echo esc_attr__( 'Page introduction' ); ?>">
<div class="container mx-auto max-w-3xl content-wrapper">
<div class="mx-auto max-w-3xl content-wrapper">
<p class="page-intro__text text-lg lg:text-xl leading-relaxed text-dark">
<?php echo wp_kses_post( $intro ); ?>
</p>
@@ -194,6 +194,8 @@ if ( ! $intro ) {
</section>
```
Note: the inner `div` intentionally does **not** include the `container` Tailwind class. The project's `styles/base/global.css` defines `.container { max-width: 80.5rem; }` (1288px), which is loaded after the Tailwind utilities in the cascade, so it would override `max-w-3xl` (768px) at desktop and produce an over-wide intro. Use only `mx-auto max-w-3xl` so the cap applies.
- [ ] **Step 2: Lint the new file**
Run: `composer lint -- views/partials/page-intro.php`
@@ -250,13 +252,14 @@ if ( hasSidebar() ) {
?>
<article class="<?php echo esc_attr( $classes ); ?>">
<?php
// Centered intro section between the hero and the body content.
if ( get_field( 'intro' ) ) {
get_template_part( 'views/partials/page-intro' );
}
?>
<div class="entry-content <?php echo esc_attr( $clsEntry ); ?>">
<?php
// Centered intro section beneath the hero (rendered by header.php).
if ( get_field( 'intro' ) ) {
get_template_part( 'views/partials/page-intro' );
}
// Page body content
if ( have_posts() ) {
while ( have_posts() ) {
@@ -275,6 +278,8 @@ if ( hasSidebar() ) {
<?php get_footer(); ?>
```
Note: the page-intro partial is loaded as a **sibling** of `<div class="entry-content">`, not inside it. When intro is a child of entry-content, the two bounding boxes share the same top y, so the test's `expect(introBox.y).toBeLessThan(contentBox.y)` order assertion fails. Moving intro out of entry-content makes the order check hold.
- [ ] **Step 3: Lint the modified file**
Run: `vendor/bin/phpcs page.php`
@@ -729,11 +734,19 @@ If nothing to commit, skip this step.
| `page.php` renders intro partial between hero and body when `intro` is set | Task 3 |
| New `views/partials/page-hero.css` for media-layer styles | Task 4 |
| Playwright tests at desktop, 402px, 320px, 767px | Task 6 |
| No-intro and no-asset fallback tests | Task 6 (added by final review fix) |
| No new ACF blocks | Verified — none added |
| Front page, single, archive, search, 404 unchanged | Verified — no template changes outside `page.php` and the partial |
| Bottom dark block is the existing footer (not a new CTA) | Verified — no contact-block added |
| `npm run build`, full Playwright, `composer lint` | Task 7 |
**Production-template fixes applied by the Task 6 implementer (documented here so future readers don't reproduce the bugs):**
| Defect the brief's assertions revealed | Fix | Why |
| --- | --- | --- |
| `expect(introBox.y).toBeLessThan(contentBox.y)` failed because the page-intro partial was rendered as a child of `<div class="entry-content">`, so the two bounding boxes shared the same top y. | `page.php` now loads the page-intro partial as a **sibling** of the `entry-content` div, not inside it. | Intro and body become peers in the layout flow, so the order check holds. |
| The intro's `<div class="container mx-auto max-w-3xl content-wrapper">` produced an ~1184px wide intro on desktop (the `max-w-3xl` cap was overridden by `.container`'s `max-width: 80.5rem` from `styles/base/global.css`, which loads after the Tailwind utilities in the cascade). | `views/partials/page-intro.php` now uses `<div class="mx-auto max-w-3xl content-wrapper">` (no `container` class). | `max-w-3xl` (768px) is the only constraint, so the intro is correctly capped on desktop. |
**Placeholder scan:** No TBD/TODO. Every step has exact code or commands. No "similar to Task N" references.
**Type / interface consistency:**