From 3a2311e0a8ecbc04c759f9434ea76afb86ee4ed7 Mon Sep 17 00:00:00 2001 From: Jasper Frumau Date: Sat, 6 Dec 2025 12:19:22 +0700 Subject: [PATCH] Theme WooCommerce Update --- AGENTS.md | 41 ++++ CHANGELOG.md | 12 +- CLAUDE.md | 37 ++++ app/setup.php | 72 +++++++ resources/css/app.css | 27 ++- .../woocommerce/content-single-product.php | 175 ++++++++++++------ style.css | 2 +- 7 files changed, 307 insertions(+), 59 deletions(-) create mode 100644 AGENTS.md diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..b33124b --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,41 @@ +# Repository Guidelines + +## Project Structure & Module Organization +- Theme lives at `site/web/app/themes/nynaeve/`. +- `app/`: PHP (Blocks, Providers, View Composers); `config/`: Sage/Acorn config. +- `resources/`: Tailwind (`css/`), JS (`js/`), Blade views (`views/`), native blocks (`js/blocks/`); block styles live with each block. +- Built assets in `public/build/` (Vite); static assets in `resources/images/`. +- Utilities in `scripts/`; theme docs in `docs/`; `archive/` is deprecated/read-only. + +## Build, Test, and Development Commands +- Install deps: `cd site && composer install`; then `cd site/web/app/themes/nynaeve && composer install && npm install`. +- Dev server (Vite + HMR): `npm run dev`; open `http://imagewize.test/` (HTTPS breaks HMR WebSockets). +- Production build: `npm run build`. +- Quality: `cd site && composer test` (phpcs); `composer pint` or `npm run pint` for formatting. +- Visual/E2E: `npm run pw`. + +## Coding Style & Block Standards +- PHP: PSR-4 under `App\\`, prefer strict types; format with Pint. +- JS/React: ES modules, functional components; block dirs kebab-case (`cta-block-blue`), components PascalCase. +- Blocks: InnerBlocks-first; use real content (no placeholders); no horizontal padding (theme handles spacing); keep styling on containers, not core child blocks. +- `block.json`: namespace/category/textdomain `imagewize`; default align `wide`; button styles via `core/buttons` container class (not individual buttons). +- Blade views in `resources/views`; reuse via `partials/` and `sections/`. CSS is Tailwind-first, custom in `resources/css` or block `style.css`. + +## Block Development Workflow (Trellis VM) +- DB lives in Trellis VM (local MySQL on 3306 conflicts). Run `trellis vm shell --workdir /srv/www/imagewize.com/current` and use `--path=web/wp`. +- Create native block: `wp acorn sage-native-block:create`; ACF block: `wp acorn acf:block MyBlock`. +- Blocks auto-register via ThemeServiceProvider; store under `resources/js/blocks/{block-name}/` with container-only CSS. + +## Testing Guidelines +- Before commits: `composer test`, `composer pint`/`npm run pint`. +- For block/JS edits: `npm run build` once to confirm clean Vite output; use real content to catch layout issues. +- Playwright: `npm run pw` or scoped (e.g., `npm run pw:mobile`). + +## Commit & Pull Request Guidelines +- Commits: short Title-Case (e.g., `Nynaeve Documentation Update`); scope narrowly. +- PRs: include purpose, affected theme paths, manual test commands, linked issues/trellis tickets; add screenshots/GIFs for UI/block changes. + +## Security & Configuration Tips +- Never commit `.env`, vault files, or generated credentials; use `.env.example`. +- Work from Trellis VM for any `wp`/`wp acorn` tasks (DB lives there; host MySQL on 3306 conflicts). Theme path in VM: `/srv/www/imagewize.com/current/web/app/themes/nynaeve`; demo: `/srv/www/demo.imagewize.com/current`. +- Flush caches with `wp cache flush` if changes look stale; prefer repo Playwright script for screenshots. diff --git a/CHANGELOG.md b/CHANGELOG.md index 7198ff2..14654eb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,16 @@ All notable changes to the Nynaeve theme will be documented in this file. For project-wide changes (infrastructure, tooling, cross-cutting concerns), see the [project root CHANGELOG.md](../../../../../CHANGELOG.md). +## [2.0.22] - 2025-12-06 + +### Added +- **Product Detail Field Groups**: New ACF fields for Features, What’s Included, and Pricing Details registered in [app/setup.php](app/setup.php#L203) and rendered as accordion sections on single product pages. +- **Automation Guidance**: Added theme-specific agent docs ([AGENTS.md](AGENTS.md), [CLAUDE.md](CLAUDE.md)) covering structure, commands, block standards, and Trellis VM workflows. + +### Changed +- **Single Product Layout Refresh**: Rebuilt WooCommerce single product template ([content-single-product.php](resources/views/woocommerce/content-single-product.php)) with a simplified hero (title/price/category), streamlined image rendering, short description, and ACF-driven accordion for detailed product info. +- **Product Typography Override**: Enforced dark text color for headings and paragraphs within product content areas in [resources/css/app.css](resources/css/app.css#L768) to keep product pages readable when block color classes are applied. + ## [2.0.21] - 2025-12-03 ### Changed @@ -1145,4 +1155,4 @@ For project-wide changes (infrastructure, tooling, cross-cutting concerns), see ### Fixed - Fixed related-articles block ignoring parent container constraints when resizing browser window - Related articles now properly adapt column count based on available container width rather than viewport width -- Improved tag-based article matching to avoid overly generic results \ No newline at end of file +- Improved tag-based article matching to avoid overly generic results diff --git a/CLAUDE.md b/CLAUDE.md index b369459..16a6558 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -487,6 +487,43 @@ We use **WordPress-native layout approach** with minimal custom CSS. - Adds "Request Quote" buttons on single product pages - Custom REST API endpoint to intercept checkout requests +**Creating Product Content (CRITICAL):** + +When creating or editing WooCommerce product content using Gutenberg blocks: + +❌ **DO NOT** add color classes to text, headings, or paragraphs: +- ❌ `textColor: "primary-accent"` in block attributes +- ❌ `has-primary-accent-color` classes +- ❌ `has-primary-color` classes +- ❌ `has-base-color` or `has-base-accent-color` +- ❌ `has-contrast-color` or `has-text-color` + +✅ **DO** let CSS control all colors automatically: +- ✅ Use only typography attributes (fontFamily, fontSize, fontWeight) +- ✅ Use spacing and layout attributes +- ✅ Headings automatically use contrast color (dark) +- ✅ Paragraphs automatically use main-accent color (readable gray) +- ✅ Cover blocks with dark backgrounds automatically use white text + +**Why:** +- Product page CSS (`app.css`) controls all colors for consistency +- Hardcoded color classes override CSS and break the design system +- Users cannot change colors in the editor when hardcoded +- Color accessibility is managed centrally via CSS variables + +**Example - Clean block markup:** +```html + +

+ Professional WordPress Development +

+ + +

+ Professional WordPress Development +

+``` + ### Modifying Styles 1. Edit `resources/css/app.css` for theme styles diff --git a/app/setup.php b/app/setup.php index 9ce2df6..5a8ea15 100644 --- a/app/setup.php +++ b/app/setup.php @@ -203,6 +203,78 @@ } }); +/** + * ACF Product Details Field Group + */ +add_action('acf/init', function () { + if (! function_exists('acf_add_local_field_group')) { + return; + } + + acf_add_local_field_group([ + 'key' => 'group_product_details', + 'title' => 'Product Details', + 'fields' => [ + [ + 'key' => 'field_product_features', + 'label' => 'Features', + 'name' => 'product_features', + 'type' => 'wysiwyg', + 'instructions' => 'Describe the key features of this product or service.', + 'required' => 0, + 'default_value' => '', + 'tabs' => 'all', + 'toolbar' => 'full', + 'media_upload' => 0, + 'delay' => 0, + ], + [ + 'key' => 'field_product_included', + 'label' => 'What\'s Included', + 'name' => 'product_included', + 'type' => 'wysiwyg', + 'instructions' => 'List what\'s included with this product or service.', + 'required' => 0, + 'default_value' => '', + 'tabs' => 'all', + 'toolbar' => 'full', + 'media_upload' => 0, + 'delay' => 0, + ], + [ + 'key' => 'field_product_pricing', + 'label' => 'Pricing Details', + 'name' => 'product_pricing', + 'type' => 'wysiwyg', + 'instructions' => 'Provide detailed pricing information for this product or service.', + 'required' => 0, + 'default_value' => '', + 'tabs' => 'all', + 'toolbar' => 'full', + 'media_upload' => 0, + 'delay' => 0, + ], + ], + 'location' => [ + [ + [ + 'param' => 'post_type', + 'operator' => '==', + 'value' => 'product', + ], + ], + ], + 'menu_order' => 10, + 'position' => 'normal', + 'style' => 'default', + 'label_placement' => 'top', + 'instruction_placement' => 'label', + 'hide_on_screen' => '', + 'active' => true, + 'description' => 'Custom fields for product detail sections displayed in accordion format on single product pages.', + ]); +}); + /** * WooCommerce Support */ diff --git a/resources/css/app.css b/resources/css/app.css index 4fdbf4c..0166a2d 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -18,6 +18,7 @@ * 10. Button Style Variants * 11. WordPress Layout Fixes * 12. Mobile Navigation Accordion + * 13. WooCommerce Product Page Content Styling */ /* ----------------------------------------------------------------------------- @@ -764,4 +765,28 @@ body .gform_wrapper .gform_body { opacity: 1; pointer-events: auto; } -} \ No newline at end of file +} + +/* ----------------------------------------------------------------------------- + * 13. WooCommerce Product Page Content Styling + * -------------------------------------------------------------------------- */ + +/** + * Single Product Page - Typography and Color Overrides + * + * Forces consistent dark text color (var(--color-main)) for all headings and + * paragraphs in product content area, overriding any block editor color classes. + * + * This ensures: + * - Headings (H2, H3) use main color (#171b23 - dark) + * - Paragraphs use main color for maximum readability + * - No hardcoded block editor color classes interfere with design + * + * Note: This overrides the default WordPress block color system for products only. + * Regular blog posts and pages use different color hierarchy via .e-content styles. + */ +.single-product .product-full-content h3, +.single-product .product-full-content h2, +.single-product .product-full-content p { + color: var(--color-main); +} diff --git a/resources/views/woocommerce/content-single-product.php b/resources/views/woocommerce/content-single-product.php index 9b06ead..41dfc9b 100644 --- a/resources/views/woocommerce/content-single-product.php +++ b/resources/views/woocommerce/content-single-product.php @@ -31,77 +31,140 @@ return; } ?> -
-
> - -
-
- get_gallery_image_ids(); -$main_image_id = $product->get_image_id(); +
> -if ($main_image_id) { - array_unshift($attachment_ids, $main_image_id); -} + +
+
+ + +
+

+ +

-if (! empty($attachment_ids)) { ?> -
-
- - <?php echo esc_attr($product->get_name()); ?> - -
- - 1) { ?> -
- $attachment_id) { - $thumb = wp_get_attachment_image_src($attachment_id, 'thumbnail'); - $full = wp_get_attachment_image_src($attachment_id, 'product-gallery-main'); - $full_srcset = wp_get_attachment_image_srcset($attachment_id, 'product-gallery-main'); - if ($thumb && $full) { ?> -
- -
- -
- + get_price_html()) { + ?> +
+ get_price_html(); ?>
-
-
-
-
'.strip_tags($categories).'

'; + echo '

'.strip_tags($categories).'

'; } ?> - -
- +
+ +
+ + +
+
+ get_image_id(); +if ($image_id) { + echo wp_get_attachment_image($image_id, 'medium_large', false, [ + 'class' => 'w-full h-auto rounded-lg shadow-lg', + 'alt' => $product->get_name(), + ]); +} else { + echo wc_placeholder_img('medium_large', 'w-full h-auto rounded-lg'); +} +?> +
+ + +
+
+ get_short_description()); ?> +
+ + +
+ +
+ + +
+ 'Features', + 'content' => $features, + ]; +} + +if ($included) { + $sections['included'] = [ + 'title' => 'What\'s Included', + 'content' => $included, + ]; +} + +if ($pricing) { + $sections['pricing'] = [ + 'title' => 'Pricing Details', + 'content' => $pricing, + ]; +} + +// Only display accordion if there are sections with content +if (! empty($sections)) { + foreach ($sections as $key => $section) { + ?> +
+ + + + + + +
+ +
+
+ +
+
+
+
-
-
-
-
-

Detailed Description

-
+ +
+
-
-
+ + + + + diff --git a/style.css b/style.css index 3921685..bc8d22c 100644 --- a/style.css +++ b/style.css @@ -2,7 +2,7 @@ Theme Name: Nynaeve Theme URI: https://imagewize.com Description: Modern WordPress theme built on Sage 11 with reusable custom blocks using WordPress native tools and the Roots.io stack. -Version: 2.0.21 +Version: 2.0.22 Author: Jasper Frumau Author URI: https://magewize.com Text Domain: nynaeve