All notable changes to the Elayne WordPress theme will be documented in this file.
The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.
theme.json: Border radius preset system (settings.border.radiusSizes) using WordPress 6.9radiusSizesAPI — slugssm(0.625rem),md(0.75rem),lg(1rem),pill(999px). Enablesvar:preset|border-radius|{slug}references across all patterns.theme.json: Addedxx-smallfont size (fluid 0.625–0.6875rem, ~11px) tosettings.typography.fontSizes— sits belowx-small, used for small uppercase labels and month labels in event patterns.docs/elayne/BORDER-PRESETS.md: New reference document covering WP 6.9 border radius preset system, valid preset slugs, border-width conventions, and missing slug warnings.
event-upcoming-grid.php: Replaced all invalidvar:preset|border|radiusandvar:preset|border|widthreferences (no such preset exists) with correctvar:preset|border-radius|{slug}and hardcoded1pxborder-width.event-upcoming-grid.php: Replaced all invalidvar:preset|spacing|xx-smallreferences (slug does not exist in theme.json) with validvar:preset|spacing|2-x-small(badge padding) andvar:preset|spacing|x-small(tag padding, button padding, date box padding).event-upcoming-grid.php: Replacedvar:preset|font-size|xx-smallreferences with the now-definedxx-smallfont size slug after adding it to theme.json.event-upcoming-grid.php: Date boxblockGapset to hardcoded3px(below minimum spacing preset granularity — valid exception).
Pattern Compliance — Hardcoded CSS Values:
- Replaced hardcoded CSS values with semantic variables in 4 pattern files:
event-upcoming-grid.php: Fixed 19px, 14px, 13px font-sizes → semantic variableslegal-hero-split.php: Fixed 4px, 14px, 2.25rem, 1.25rem, 1.125rem, 8px, 12px → semantic variablespage-coming-soon.php: Fixed 4rem, 1.25rem, 3rem, 0.875rem, 8px, 100px → semantic variables
- All hardcoded CSS values now use
var:preset|font-size|*andvar:preset|spacing|*semantic variables
Pattern Compliance — Untranslated Text Strings:
- Wrapped all user-facing text strings with
esc_html_e()for translation readiness:header-double-bar.php: Wrapped "Email" text stringlegal-hero-split.php: Wrapped all text strings including "Trusted Since 1985", "Years", "Cases Won", "Success Rate", "Client Reviews", "Based on 500+ verified client reviews", "Schedule Consultation", "Call Now"page-coming-soon.php: Wrapped all text strings including "Coming Soon", "We're working on something amazing...", "Days", "Hours", "Minutes", "Seconds", "Get Notified When We Launch", "Notify Me", "We respect your privacy..."
- All text strings now properly wrapped for WordPress translation system
WP.org Translation Compliance — Pattern Text Strings:
Pattern Compliance — Hardcoded CSS Values:
- Replaced hardcoded CSS values with semantic variables in 4 pattern files:
event-upcoming-grid.php: Fixed 19px, 14px, 13px font-sizes → semantic variableslegal-hero-split.php: Fixed 4px, 14px, 2.25rem, 1.25rem, 1.125rem, 8px, 12px → semantic variablespage-coming-soon.php: Fixed 4rem, 1.25rem, 3rem, 0.875rem, 8px, 100px → semantic variables
- All hardcoded CSS values now use
var:preset|font-size|*andvar:preset|spacing|*semantic variables
Pattern Compliance — Untranslated Text Strings:
- Wrapped all user-facing text strings with
esc_html_e()for translation readiness:header-double-bar.php: Wrapped "Email" text stringlegal-hero-split.php: Wrapped all text strings including "Trusted Since 1985", "Years", "Cases Won", "Success Rate", "Client Reviews", "Based on 500+ verified client reviews", "Schedule Consultation", "Call Now"page-coming-soon.php: Wrapped all text strings including "Coming Soon", "We're working on something amazing...", "Days", "Hours", "Minutes", "Seconds", "Get Notified When We Launch", "Notify Me", "We respect your privacy..."
- All text strings now properly wrapped for WordPress translation system
WP.org Translation Compliance — Pattern Text Strings:
- Wrapped all user-facing text in
esc_html_e( 'Text', 'elayne' )across 12 pattern files to meet WordPress.org theme review requirements - Wrapped all non-empty image
altattributes inesc_attr__( 'Text', 'elayne' )for i18n compliance - Affected patterns:
card-call-to-action.php,case-study-detailed.php,client-logo-wall.php,client-success-stories.php,hero-modern-dark.php,hero-modern-light.php,overlapping-feature-columns.php,overlapping-feature-columns-reversed.php,pricing-comparison.php,review-text-image-overlap.php,testimonials-grid.php,two-column-review.php - Covers headings, paragraphs, button labels, stat numbers, badge tags, testimonial quotes, job titles, and CTA text
WP.org External URL Compliance — Pattern Image Sources:
- Replaced hardcoded external URLs (
http://demo.imagewize.test/app/themes/elayne/patterns/images/...) withget_template_directory_uri()calls inclient-success-stories.php - Fixes WP.org theme review rejection caused by environment-specific URLs in avatar images
Pattern Compliance — Margin Reset:
- Added missing full-width margin reset (
"margin":{"top":"0","bottom":"0"}) to outeralignfullgroups inclient-success-stories.php,client-logo-wall.php, andtwo-column-review.php - Corrects patterns that relied on
className="alignfull"without the required block-level margin reset in the JSON attributes
Pattern Compliance — Hardcoded Font Sizes:
- Removed duplicate inline
font-sizestyles fromhero-modern-dark.phpandhero-modern-light.phpwhere paragraphs already had semanticfontSizeblock attributes (medium,base) - Removed
font-sizeinline styles andhas-custom-font-sizeclass from button elements in both hero patterns - Replaced hardcoded
font-size:3rem,font-size:3.5rem,font-size:1.5rem,font-size:1.25rem, andfont-size:1.125remincase-study-detailed.phpwith semanticfontSizeblock attributes (xx-large,large,medium)
Pattern Compliance — Responsive Grid Layout:
- Converted two
wp:columns3-column blocks incase-study-detailed.phptowp:groupgrid layout withminimumColumnWidth(18rem for phase steps, 14rem for phase metrics) for proper 3→2→1 responsive behaviour - Increased metrics grid
minimumColumnWidthfrom10remto14remto preventxx-largestat numbers from overflowing and overlapping at narrow widths - Added
align="wide"to main content group incase-study-detailed.phpso the content section expands beyond the outer constrained layout's defaultcontentSize(740px) - Fixed "Start Your Project" CTA button
textColorfrom undefinedcontrasttomain(dark gray) so button text is visible on white (base) background
Pattern Compliance — Undefined contrast Color Slug:
- Fixed patterns using
contrastas a color slug, which does not exist in Elayne's theme palette. Root cause: WordPress core themes (Twenty Twenty-Three/Four/Five) usecontrastas the slug for their dark color; Elayne renamed it tomainbut kept"name": "Contrast"as the editor display label, leading tocontrastbeing used by mistake in several patterns event-upcoming-grid.php: fixedbackgroundColor:"contrast"on all 3 event cards →base; fixedbackgroundColor:"contrast"on all 3 "Details" buttons →base(buttons on white cards now have a valid white background)legal-hero-split.php: fixedtextColor:"contrast"on 3 stat labels (Years, Cases Won, Success Rate) →main-accent; fixed bordercolor:"var:preset|color|contrast"on stats divider →border-light; fixedtextColor:"contrast"on "Client Reviews" label →mainheader-double-bar.php: fixed linkcolor:"var:preset|color|contrast"on email and phone links in top bar →mainpage-coming-soon.php: fixedbackgroundColor:"contrast-2"on countdown timer box →tertiary(contrast-2is also not a defined Elayne color slug)
Pattern — client-logo-wall.php:
- Increased logo image width from
120pxto180pxfor all 12 logos for better visual presence on frontend - Increased grid
minimumColumnWidthfrom10remto12remto match larger logo size
Pattern — client-success-stories.php:
- Changed outer section background color from
base(white) totertiary(light gray) for better visual differentiation - Changed main testimonial block alignment from
widetofullfor edge-to-edge impact - Replaced
className:"alignwide"on secondary testimonials grid with properalign:"wide"andlayout:{"type":"grid","minimumColumnWidth":"19rem"}for correct 3→2→1 responsive behaviour
Pattern — event-upcoming-grid.php:
- Increased pill/tag group
blockGapfromxx-smalltosmallfor better spacing between location and detail tags (3 instances)
Pattern — legal-hero-split.php:
- Changed stats grid
minimumColumnWidthfrom hardcoded100pxto semantic12remfor proper responsive column behaviour - Reduced stats grid
blockGapfromx-largetomediumto prevent excessive spacing between stat columns - Converted stat number headings (
35+,2,500+,98%) from inlinefontSizestyle to semanticfontSize:"xx-large"block attribute
style.css — Safari Scrollbar Visibility Fix:
- Added
::-webkit-scrollbarrules to make scrollbar thumb visible in the block editor on Safari/macOS, where overlay scrollbars render with a near-invisible light gray thumb on white/light backgrounds - Scrollbar track: transparent; thumb:
rgba(0,0,0,0.35)withborder-radius:4px; hover:rgba(0,0,0,0.55)
Pattern Compliance Workflow — Extended Checks:
- Added check for hardcoded external URLs in
srcattributes: flags anysrc="https?://..."in pattern files (WP.org rejection cause) - Added check for untranslated user-facing text in HTML tags: detects bare text in
<h1-6>,<p>,<a>,<button>,<span>,<li>, etc. on lines without<?php - Added check for untranslated non-empty
altattributes: flagsalt="..."values without PHP translation call - Narrowed hardcoded CSS check from
(font-size|padding|margin|border-radius)tofont-sizeonly —border-radiusandpaddinghave no WP semantic preset alternatives and produced false positives
CLAUDE.md — Translation Readiness Guidelines (CRITICAL):
- Expanded Translation Readiness section into a comprehensive reference table covering
esc_html_e(),esc_attr__(), andwp_kses_post( __() )with usage examples - Documented what to wrap (all headings, paragraphs, button labels, stat numbers, alt text, CTA text) and what NOT to wrap (empty
alt="", block JSON attributes, PHP expressions) - Added quick
grepcheck command to find unwrapped strings before committing - Removed outdated mention of
__()/_e()in favour of escaping variants
CLAUDE.md — External Image URL Rule:
- Added explicit rule to the pattern standards table: never use hardcoded external URLs (e.g.
http://demo.imagewize.test/...) — flagged as WP.org rejection cause - Added rule that all image
srcattributes must useget_template_directory_uri()wrapped inesc_url() - Updated pattern creation checklist (steps 5–7) to include translation wrapping and URL requirements before testing
- Deleted
assets/js/block-extensions/navigation.js— thedropdownSpacingattribute and editor UI panel it registered had no corresponding PHPrender_blockhandler, so the setting was saved but never applied on the frontend. Dead code removed. - Removed the
elayne-navigation-extensionscript enqueue frominc/block-extensions.php.
WordPress.org Review — Navigation Submenus (Issue 1):
- Removed
openSubmenusOnClick,hasClickableParents, andhasImprovedChevronsattributes from all header patterns (header-standard,header-mobile,header-double-bar,header-social-logo-hamburger,header-social-logo-hamburger-light,header-standard-with-tel-number,spa-home-hero). WordPress native hover/focus behaviour now handles submenu visibility without theme interference. - Removed "prevent hover" CSS override block from
core-navigation.cssthat was suppressing WP core:hover/focus-withinsubmenu display. - Added
::beforepseudo-element bridge on desktop submenu containers so:hoveris maintained across themargin-topgap between parent item and dropdown. - Mobile overlay rebuild: Replaced
opacity/visibility/heightsubmenu toggle withdisplay: none !important/display: flex !importantdriven by:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]). Submenu icon (.wp-block-navigation__submenu-icon) repositioned absolutely atright: 0; top: 0; width: 44px; height: 44pxwithin theli. Removed chevron-moving JS section (section 1 ofnavigation-frontend.js). Removed dash pseudo-element (content: "\2014") prepended to submenu items in mobile overlay. Addedpadding-right: 44pxon parent link content to prevent text running under icon.
WordPress.org Review — Template Part Area (Issue 2):
- Registered
"menu"template part area infunctions.phpviadefault_wp_template_part_areasfilter. Resolves PHP notice:_filter_block_template_part_area(): "menu" is not a supported wp_template_part area value.
WordPress.org Review — Translation-Ready Strings (Issue 3):
- Replaced all
'moiraine'text domains with'elayne'inassets/js/block-extensions/navigation.jsandassets/js/block-extensions/post-excerpt.js. - Localized frontend aria-label strings in
functions.phpviawp_localize_script().
WordPress.org Review — External Image Sources (Issue 4):
- Removed hardcoded
imagewize.comlink fromparts/sidebar.html. No external image or link sources remain in the theme package.
WordPress.org Review — JavaScript Prefixing (Issue 5):
- Renamed all
moiraine-*CSS classes toelayne-*inassets/styles/core-navigation.css(.moiraine-hamburger-large,.moiraine-nav-parent-wrapper,.moiraine-nav-parent-link,.moiraine-nav-toggle). - Renamed all
moiraine/filter name prefixes toelayne/in both block extension JS files. - Renamed
moiraine-linked-excerptCSS class andmoiraine-excerpt-link-settingspanelclassNametoelayne-*equivalents.
hasImprovedChevrons feature removed entirely:
- Removed
hasImprovedChevronsattribute and itsToggleControlfromassets/js/block-extensions/navigation.js— no longer needed with icon-absolute mobile overlay positioning. - Removed
$has_improved_chevronsPHP class injection frominc/block-extensions.php. - Removed CSS section 6.2 (Improved Chevrons, ~50 lines) from
core-navigation.css. - Removed dead
has-clickable-parentsCSS section (~90 lines) fromcore-navigation.css.
- Deleted
assets/js/navigation-frontend.js(clickable parents DOM manipulation — no longer needed). - Added file-level docblock and inline comments to
assets/js/block-extensions/navigation.jsdocumenting the dropdown spacing feature, CSS custom property data flow, and enqueue location.
Vibe Prompt Configuration:
- Added
.vibe/prompts/vibe.mdfor Mistral Vibe prompting - Added
.vibe/config.tomlwith Mistral Vibe Config - Vibe Tooling files excluded from theme builds
- Mistral Vibe AI Integration: Added
.vibe/prompt.mdwith project-specific instructions for working with Mistral Vibe AI agent - Distribution Exclusion: Added
.vibe/*to.distignoreto exclude AI guidance files from theme zip distributions
Post Tag Colors - Replaced Secondary with Main Accent:
- Updated post tag term button color from
secondarytomain-accentacross all post template patterns - Affects all four post layout templates: centered, left sidebar, right sidebar, and wide
- Post tags and comment action links now consistently use the main accent color
Comment Action Links Color Consistency:
- Updated comment edit and reply link colors from
secondarytomain-accentin all post templates - CSS class updated from
has-secondary-colortohas-main-accent-colorfor proper styling
Link Underline Styles (WordPress.org Requirement):
- Added underline styles for links in post content (
.wp-block-post-content), comment content, and widgets - Navigation-like contexts (menus, buttons, post titles) remain exempt from underline styling
- Added
textDecoration: underlineto body link elements intheme.jsonincluding hover state
Comment Form Submit Button Spacing:
- Added
margin-top: 1remto the comment form submit button for improved visual separation
Removed Redundant index.php:
- Deleted
index.phpfrom Elayne theme root (required file for WP.org review compliance — silence is golden placeholder removed as it is not needed for block themes)",
Navigation Overlay Alignment:
- Added support for left-aligned and right-aligned overlay menus in mobile navigation
- Overlay content, menu items, chevrons, submenus, and close button now properly align based on hamburger menu position
- Improved visual consistency for different header patterns
Pattern Compliance:
- Fixed header-mobile pattern margin reset - Added complete margin reset (
"margin":{"top":"0","bottom":"0"}) to full-width header group with background color to prevent gaps between patterns
CSS Improvements:
- Added
.has-left-aligned-overlayand.has-right-aligned-overlayclasses for flexible overlay positioning - Used
!importantselectors to override WordPress core navigation styles where necessary - Maintained proper z-index and spacing for close button in both alignment modes
- Added comprehensive comments explaining the alignment logic
Documentation URL Update:
- Updated theme documentation links from
/resources/elayneto/themes/elayne - Affects README links in "Quick Links" table, "Getting Started" section, and "Community & Support" section
- Reflects new documentation location on imagewize.com",
Pattern Images - File Size Optimization:
- Reduced file sizes for three pattern images while maintaining visual quality
banner-boats-16x9.webp: Optimized general banner imagecafe-terrace-hero.webp: Optimized Food & Beverage demo hero imagebanner-boats-4x3.webp: Optimized Legal demo banner image- Improves page load times and reduces bandwidth usage across demo pages
Development Script Cleanup:
- Removed
check-patternsscript from theme root - This was a development convenience script for the main site repository and doesn't belong in the theme distribution - Cleaner theme package without repository-specific development tools
Pattern Icons Replacement:
- Replaced emoji icons with SVG icons in the announcement banner and legal contact pattern for better visual consistency and accessibility
- Added vertical alignment to the announcement banner group for improved layout
Pattern Compliance:
- Removed hardcoded
border-radius:8pxvalues from legal-contact pattern to comply with semantic variable standards - Fixed compliance checker violations in legal-contact.php (outer container, button, and 4 contact info cards)
New SVG Icons:
- Added
icon-clock.svgfor office hours display - Added
icon-location.svgfor office location display - Added
icon-star-celebration.svgfor announcement banners (currentColor) - Added
icon-star-celebration-white.svgfor announcement banners on dark backgrounds (white fill #FFFFFF) - Added
icon-phone.svgfor phone contact information - Added
icon-email.svgfor email contact information",
Heading Block Styles:
- New dedicated CSS file
core-heading.cssfor heading-specific styles - New 'Logo Link' heading style that removes underline decoration on hover/focus
- Gradient Text style now available for heading blocks
- Gradient Text Animated style now available for heading blocks
- Underline Slide style now available for heading blocks
Accessibility Improvements:
- Enhanced focus states for logo link headings with visible outline
- Fallback support for browsers without background-clip text support
- Reduced motion support for all heading animations
- Print-friendly styles that remove effects for printed documents
- RTL (right-to-left) language support for underline animations
Code Organization:
- Moved heading-specific styles from
core-paragraph.cssto newcore-heading.css - Cleaner separation of concerns between paragraph and heading styles
- Improved maintainability with dedicated heading stylesheet
- Created
assets/styles/core-heading.csswith 157 lines of heading-specific styles - Registered 'logo-link' block style for core/heading in
functions.php - Removed 106 lines of heading styles from
core-paragraph.css - All heading styles include accessibility features (reduced motion, print, RTL support)",
Template Reduction (5 → 2):
- Simplified from 5 page templates down to 2 active templates
page.html→template-page(with title, top padding only)page-no-title.html→template-page-no-title(no title, zero padding)
Template Pattern Renaming:
template-page-centered.php→template-page.php(slug:elayne/template-page)template-page-full.php→template-page-no-title.php(slug:elayne/template-page-no-title)- Updated all template HTML files to reference new pattern slugs
Removed Templates (Breaking Change):
- ❌
template-page-wide-no-title.php+page-wide-no-title.html- REMOVED - ❌
template-page-hero.php+page-hero.html- REMOVED - ❌
template-page-wide.php+page-wide.html- REMOVED - Pages using removed templates will fall back to default
page.html
Padding Strategy:
template-page.php- Keptpadding-top: var:preset|spacing|xx-largeon<main>group (required for title spacing from header)template-page-no-title.php- Zero padding (patterns control all spacing)- Templates provide structure only (title vs no-title), patterns/blocks control spacing
Benefits:
- Cleaner template architecture (2 templates instead of 5)
- Clear naming convention (page vs page-no-title)
- Patterns get full control over spacing and layout
- Full-width backgrounds extend properly to edges
- Aligns with modern FSE theme approach (Twenty Twenty-Five, Ollie)
Affected Pages (7 total):
- Main demo (3 pages): Blog, FAQ, Services - using
page-wide-no-title.html - Kafe demo (4 pages): Drinks, Food, Home - using
page-hero.html; Events - usingpage-wide-no-title.html
Verification Results (2026-02-11):
- ✅ All 7 affected pages audited locally with screenshots
- ✅ Zero spacing issues found - patterns already handle their own spacing correctly
- ✅ No manual migration needed - pages will work with default template fallback
Files Modified:
- Renamed:
template-page-centered.php→template-page.php - Renamed:
template-page-full.php→template-page-no-title.php - Updated:
page.html,page-no-title.htmlwith new pattern slugs - Removed: 6 files (3 pattern files + 3 template HTML files)
Version Bump:
- Major version increment (2.4.1 → 3.0.0) due to breaking changes
- Follows semantic versioning for template architecture changes
Pattern Compliance Automation:
- GitHub Actions workflow for automated pattern compliance checks
- Checks only modified patterns (new or edited files) instead of all patterns
- Validates patterns against CLAUDE.md coding standards
- Prevents PRs from merging if modified patterns have violations
- Allows gradual fixing of existing non-compliant patterns
Compliance Checks:
- No hardcoded CSS values (use semantic variables from theme.json)
- No spacer blocks (use semantic blockGap instead)
- No emoji icons (use SVG icons for consistency)
- Proper margin reset on full-width patterns
- Responsive grid layouts for 3+ column patterns
- No hardcoded media IDs in patterns
- No HTML comments between block markup
Development Workflow:
- Updated CONTRIBUTING.md with pattern compliance documentation
- Documented CI/CD integration and common compliance issues
- Added local testing commands for pattern validation
Git Hooks:
- Removed
.githooks/pre-commithook (replaced by GitHub Actions) - Eliminated path dependency issues with external scripts
CI/CD Integration:
- Pattern compliance workflow:
.github/workflows/pattern-compliance.yml - Uses
tj-actions/changed-files@v44to detect modified patterns - PHP 8.0+ compliance checker embedded in workflow YAML
- Incremental enforcement allows fixing 67 existing violations gradually
Food & Beverage Style Variation:
- New "Food & Beverage" style variation for restaurant, cafe, and bar websites
- Warm earth-toned color palette: Pine Green (#034521), Teal Deep (#169179), Warm Gold (#dcb171), Creamy Beige (#eadfbf)
- Custom typography: Anton (headings), Asap Condensed (body), Orbitron (decorative), Inter (utility)
- Duotone filters: Green & Gold, Pine & Cream, Teal & Beige
- Gradient presets: Warm Earth, Cream Fade
- Global background and text colors: Secondary (Light Cream) background with Main text color
Drinks Menu Pattern:
- Four-section responsive drinks menu grid (Coffee/Tea, Wines, Beers, Snacks)
- Color-coded category cards with distinct backgrounds
- Full-width cover block with background image overlay
- Responsive grid layout adapts to mobile, tablet, and desktop
- Pre-styled menu items with prices and country/origin labels
- Enhanced blockGap spacing for improved visual hierarchy
- Refined padding and margins for better readability
- Improved card layouts for menu sections
- Better responsive behavior on mobile devices
Pattern Category:
- New "Food & Beverage" pattern category (
elayne/food-beverage) for industry-specific content
F&B Header Patterns:
- Three new header patterns designed for Food & Beverage sites:
header-social-logo-hamburger(dark) - Dark background with Pine Green accentsheader-social-logo-hamburger-light- Light background with border bottom- Original F&B header with top bar layout
- Left social media icons, centered logo, hamburger menu on right
- Responsive layout optimized for restaurant and cafe websites
- Instagram and Facebook integration with custom SVG icons
F&B Blog Pattern:
blog-post-columns-fandb- Three-column blog grid with Light Cream (secondary) background- Optimized for Food & Beverage content with brand colors
- Responsive grid layout (3→2→1 columns)
Social Media Icons:
- Added Instagram and Facebook SVG icons (default and F&B variants)
- F&B variants use Pine Green color (#034521) matching the style
- Default variants use
currentColorfor theme flexibility - 24x24px viewBox for consistent sizing across patterns
Food Menu Pattern:
menu-food-grid.php- Four-section responsive food menu (Appetizers, Mains, Desserts, Sides)- Color-coded sections with distinct backgrounds (Light Cream, Sage Green, Dark Moss, Creamy Beige)
- Menu item descriptions with pricing and gold separators
- Responsive grid layout (4→3→2→1 columns, 19rem minimum width)
Daily Specials Pattern:
menu-daily-specials.php- Featured daily specials with large dish images- 2-column layout with alternating image placement
- Chef's notes and detailed descriptions
- Price and availability indicators
- Full-width tertiary background for visual separation
Menu Pricing Table Pattern:
menu-pricing-table.php- Simple, elegant pricing list for wine lists and quick menus- Category headers with decorative gold underlines
- Item descriptions with dot separators
- Clean typography hierarchy optimized for readability
- Constrained 700px width for optimal scanning
F&B Hero Patterns:
hero-fandb-cover-fullwidth- Full-width hero with large cover image, overlay, and centered contenthero-fandb-split-layout- Split-screen hero with image on left, content on right- Both patterns optimized for restaurant and cafe websites with F&B color palette
F&B Content Patterns:
fandb-about-intro- About section with image and text introductionfandb-amenities- Grid layout showcasing restaurant amenities and featuresfandb-chef-profile- Chef profile section with photo and biographyfandb-hours-location- Operating hours and location information displayfandb-testimonials-food- Testimonials section specifically styled for food/beverage businesses
F&B Events Pattern:
fandb-events-grid- Responsive 3-column grid for restaurant events (wine tastings, live music, chef's tables)- Calendar-style date badges with month, day, and weekday display
- Event type tags (Wine Tasting, Live Music, Chef's Table)
- Time display and pricing information
- Reservation CTAs with event-specific wording
- Card-based design with 19rem minimum column width for complex event metadata
F&B Image Assets:
- Added
cafe-terrace-hero.webp- Outdoor cafe seating for hero sections - Added
cafe-interior-about.webp- Cozy cafe interior for about sections - Added
chef-profile.webp- Professional chef portrait for profile patterns - Added 6 amenity SVG icons for restaurant features:
icon-parking.svg- Parking amenity iconicon-outdoor.svg- Outdoor seating iconicon-wifi.svg- WiFi amenity iconicon-events.svg- Private events iconicon-accessible.svg- Wheelchair accessibility iconicon-bar.svg- Bar/beverage service icon
Pattern Development Guidelines:
- Pattern Icon Guidelines: Documentation emphasizing use of SVG icons over emojis for cross-platform consistency
- Image Block Syntax: Critical guidelines for proper WordPress image block attribute order and
is-resizedclass usage - WP-CLI Pattern Integration: Expanded documentation for programmatically adding patterns to pages using pattern references
Restaurant Amenities Pattern:
- Enhanced image block structure with correct attribute ordering for WordPress standards
- Added
is-resizedclass to figure elements for proper image sizing behavior - Improved pattern metadata with category, pattern name, and display name
Page Template (Centered):
- Removed horizontal padding from main wrapper to allow full-width patterns to extend edge-to-edge
- Maintains vertical padding (top only) for proper content spacing
Footer Patterns:
- Updated
footer-simple,footer-standard, andfooter-with-nav-columnsto use Elayne branding - Changed theme link from Moiraine to Elayne with proper attribution
- WordPress.org theme directory link updated to reflect Elayne theme
Font Assets:
- Added 12 new font files for Food & Beverage style:
- Anton regular (WOFF2)
- Asap Condensed (8 weights: 200-900)
- Inter variable font (TTF)
- Orbitron variable font (TTF)
- All fonts optimized with
font-display: swapfor performance
Template Part Spacing:
- Added CSS fix to remove global blockGap spacing for template parts (header/footer)
- Prevents unwanted gaps between full-width patterns and template parts
- Allows full-width patterns with background colors to be flush with header/footer
Menu Template Part Area Registration:
- Removed menu template part area registration from theme
- Menu area now registered by Elayne Blocks plugin instead
- Ensures mega menu functionality works independently of the theme
Plugin Integration:
- Menu template part area (
area=menu) moved to Elayne Blocks plugin for better separation of concerns - Added documentation comment explaining the architectural change
- Sidebar template part area remains in theme",
Navigation UI Rebranding:
- Updated all UI labels and text strings from "Moiraine" to "Elayne" branding
- Renamed CSS class from
moiraine-navigation-settingstoelayne-navigation-settings - Updated text domain from
moirainetoelaynefor all navigation extension strings",
Navigation Dropdown Spacing Control:
- Added new "Dropdown spacing" setting in Navigation block Inspector Controls
- Allows users to adjust the gap between parent menu items and their dropdown menus (desktop only)
- Range slider control with values from 0px to 32px in 4px increments
- Default value: 16px
- Spacing is applied via CSS custom property
--nav-dropdown-spacing
Block Extensions Enhancement:
- Added
dropdownSpacingattribute to Navigation block (type: number, default: 16) - Implemented
RangeControlcomponent in navigation.js block extension - Added
elayne_add_nav_inline_style()helper function to inject CSS custom properties into Navigation block output - Dynamic inline styles automatically applied to
<nav>element viarender_blockfilter - CSS variable fallback ensures backwards compatibility with existing navigation blocks",
Navigation Dropdown Spacing:
- Added consistent top margin to dropdown menus for better visual separation from parent items
- Dropdowns now appear with 16px spacing below the parent menu item
- Improves clickability and visual hierarchy in navigation menus",
Navigation chevron rotation:
- Rotate submenu chevrons on desktop when dropdowns open via hover/focus
- Rotate chevrons for expanded submenus in the mobile overlay
- Keep chevrons visible in overlay mode so state changes are clear
Custom Template Part Areas:
- Registered two new template part areas: Menu and Sidebar
- Menu area uses
<div>tag for mega menus and navigation templates - Sidebar area uses
<aside>tag for sidebar content - Both areas display in the Site Editor with appropriate icons (navigation and layout)
Mega Menu Template Part:
- Added
mega-menu-template.htmlin parts directory - Template loads the
elayne-blocks/mega-menu-featured-contentpattern by default - Registered in theme.json as "Mega Menu" template part with menu area
Sidebar Template Part:
- Registered "Sidebar" template part in theme.json
- Uses sidebar area for proper semantic markup
Template Part Registration:
- Implemented
elayne_template_part_areas()function hooked todefault_wp_template_part_areasfilter - Extends WordPress core template part system with custom areas
- Follows WordPress best practices for template part area registration",
Contact Details Pattern Markup:
- Removed stray closing group wrapper so block comments stay balanced
- Prevents Gutenberg from inserting a Classic block due to mismatched wrappers Legal Team Pattern Markup:
- Removed an extra closing group comment at the end of the pattern
- Keeps the block structure valid and predictable in the editor",
Pattern Library Expansion Overview:
- Updated pattern library counts and category breakdown to reflect 81 patterns and 17 templates
- Reorganized categories into Core, Specialized, and Industry Verticals for clearer browsing Hero Modern Light Copy Refresh:
- Rewrote hero headline and supporting paragraph for a more business-focused message Stats Showcase Branding + Styling:
- Replaced Moiraine references with Elayne in testimonial and intro copy
- Switched accent text and link colors to the tertiary palette for consistent styling
New Card Pattern Set:
- Added an Image Card Grid pattern with three image-led cards, CTAs, and responsive grid behavior Industry Verticals:
- Added Spa & Wellness and Legal Services vertical pattern groups to the library listings
Legal Services Pattern Markup:
- Removed stray closing group markup to keep block wrappers balanced and avoid editor issues
Marketing Assets:
- Updated theme screenshot to reflect current design set and pattern coverage",
Legal Stats Grid Responsiveness:
- Switched the pattern grid layout to use a
minimumColumnWidthof 18rem - Enables more fluid 3→2→1 column behavior for better readability across breakpoints",
Pattern Spacing Standards:
- Shifted multiple patterns from manual margins and spacer blocks to semantic
blockGapusage for cleaner spacing control - Removed hardcoded margin overrides on headings, paragraphs, buttons, separators, and featured images to align with block theme spacing behavior Banner Header Typography:
- Updated page header banner headings to rely on block gap spacing (no manual bottom margins) and adjusted size on the accent variant to
x-largeLegal Hero with Statistics: - Updated badge and button color treatments for stronger contrast in the legal hero stats pattern Grid Sizing & Metadata:
- Standardized grid minimum widths to
rem-based sizes, including 18rem simple card grids in the Agency Services Showcase - Added Grid Config guidance and card complexity tags in pattern headers for clearer usage intent
Pattern Categories:
- New pattern categories for card complexity:
elayne/card-simple,elayne/card-extended, andelayne/card-profilesAuthoring Guidance: - New documentation on grid category tags, Grid Config header fields, balanced block comments, and environment URL replacement for pattern assets
- Expanded spacing and blockGap standards reference for consistent pattern construction
Background Section Gaps:
- Corrected margin reset values to use unitless
0for full-width background sections to prevent unintended gaps Pattern Layout Consistency: - Removed unnecessary spacer blocks and manual margin styles that could create uneven vertical spacing in blog and testimonial patterns
Theme Documentation Updates:
- Updated theme agent and authoring docs with commit hygiene rules, grid standards, spacing checklist, and pattern insertion caveats Pattern Header Compliance:
- Ensured pattern headers include keywords and Grid Config notes where applicable to improve editor discovery and maintenance ",
Page Header Banner simplified:
- Converted the default page header banner to a solid background layout instead of a diagonal image cover.
- Updated copy and color usage to match the simpler, text-forward presentation.
Accent page header banner:
- Introduced a new accent-colored page header banner pattern for bold, simple headers.
Slanted page header banner:
- Added a slanted overlay banner with a background image for more dramatic headers.
Legal hero pattern update:
- Renamed the legal hero pattern to “Hero Cover (Slanted Legal)” with updated labels/keywords.
- Switched the overlay styling to a solid accent overlay for the slanted legal hero.
Hero Cover (Slanted):
- Added a general slanted hero cover pattern with image and diagonal gradient styling.
Legal header cleanup:
- Removed the old Legal Page Header Banner pattern to reduce duplicate/legacy variants.
Pattern metadata updates:
- Adjusted slugs, titles, descriptions, and keywords to reflect new banner and hero variants.",
Banner Pattern Category:
- New "Banners" pattern category (
elayne/banner) registered in theme functions - Organized location for banner and header patterns in block inserter
New Banner Patterns:
banner-announcement-bar.php- Slim top bar for announcements, promotions, or important noticesbanner-page-header.php- Page header banner with title, description, and optional background image for internal pagesbanner-page-header-legal.php- Professional page header banner tailored for law firm practice areas and service pages- Keywords: banner, header, announcement, alert, legal, attorney, practice area
Skip Link Accessibility Improvements:
- Enhanced skip link styling following WordPress accessibility standards
- Hidden by default using
clip-pathandclipfor legacy browser support - Highly visible focus state with distinct background, outline, and box shadow
- Skip link target includes
scroll-margin-topfor better viewport positioning - Improves keyboard navigation experience for screen reader users
Diagonal Hero Overlay:
- Switched legal hero diagonal overlay to use the Cover block gradient for easier editing
Image Attribution Updates:
- Updated harbor-sunset.webp attribution in CHANGELOG.md and readme.txt
- Changed photographer credit to "Pexels Contributor"
- Added "GPL-compatible" clarification to license description
- Avoids potential GPL license checker false positives
Footer Theme Link:
- Updated footer pattern to reference "Elayne" theme instead of "Moiraine"
- Link now points to WordPress.org theme directory:
https://wordpress.org/themes/elayne/ - Ensures accurate theme attribution in footer copyright text
Gradient Tokens:
- Added a "Main Diagonal" gradient to theme.json and all style variations
Diagonal Banner Styles:
- Added diagonal banner CSS that clips both solid and gradient overlays
Pattern Assets:
- Added new banner images and updated the legal attorney portrait asset
Legal Hero Diagonal Pattern:
- New block pattern
legal-hero-diagonalfor professional service websites - Diagonal overlay effect with gradient from primary color (92% opacity) to primary-alt (88% opacity)
- Desktop layout: Text content left (65% width), background image visible right
- Mobile layout: Full overlay for better text readability
- Includes harbor sunset background image (Pexels license, GPL-compatible)
- Responsive breakpoints: 1024px, 768px, 480px with adjusted overlay angles and heights
- Pattern categories: hero, legal
- Keywords: hero, diagonal, overlay, legal, law firm, attorney, professional
New Pattern Image:
harbor-sunset.webp- Professional waterfront harbor scene at sunset (Pexels License, GPL-compatible)- Licensed attribution documented in readme.txt
CSS Additions:
- New
.diagonal-hero-sectionclass with diagonal overlay styling - Uses
clip-path: polygon()for diagonal effect (65% width on desktop, 70% on tablet, 100% on mobile) - Pseudo-element
::beforefor overlay layer with proper z-index stacking - Responsive min-height adjustments: 600px (desktop), 500px (tablet), 450px (mobile)
- Pointer-events handling for overlay layer to preserve interactivity",
New Header Pattern - Header Double Bar:
- Two-bar header design with top contact bar and bottom navigation
- Top bar features email, phone, and search overlay trigger (right-aligned)
- Bottom bar includes left-aligned logo with navigation menu
- Top bar hides on mobile for optimal responsive experience
- Utilizes Elayne Blocks Search Overlay Trigger for enhanced search functionality
- Includes SVG icons for email, phone, and search (Eva Icons, MIT licensed)
New Icon Assets:
- Added icon-email.svg, icon-phone.svg, and icon-search.svg from Eva Icons collection
- Icons use
currentColorfor automatic theme color inheritance - Licensed under MIT License (GPL-compatible)
Header Pattern Refinements:
- Reduced site title font size in "Header Top Bar Centered Menu" from 2.5rem to 1.8rem for better proportion
Documentation Updates:
- Updated pattern count from 73 to 74 patterns in README.md and readme.txt
- Updated Headers & Footers category from 7 to 8 patterns
- Added Elayne Blocks Search Overlay Trigger to companion plugin description
- Enhanced companion plugin documentation with detailed block descriptions
Inline Icon Alignment:
- Fixed vertical alignment issues for small inline icons (e.g., 20×20px images)
- Applied
display: inline-flexandalign-items: centerto resized image blocks - Ensures icons align properly with adjacent text in header patterns
CSS Improvements:
- Added new section in core-image.css for inline icon alignment fixes
- Targets
.wp-block-image.is-resizedelements to prevent baseline misalignment - Zero margin on resized image figures to eliminate unwanted spacing",
Legal Hero Split Layout:
- Converted from CSS columns to CSS grid layout for better responsive control
- Improved mobile layout: image appears first, followed by content, then reviews
- Enhanced desktop layout: content spans full height in left column, image and reviews stack in right column
- Reduced top/bottom padding from
xxx-largetolargefor more compact section spacing
Legal Pattern Spacing Adjustments:
- Reduced vertical padding in multiple legal patterns (services, testimonials, contact) from
xxx-largetolargeorxx-largefor better visual rhythm - More balanced spacing throughout legal template sections
Code Quality Improvements:
- Removed organizational HTML comments from legal pattern files (legal-team.php, legal-stats.php, legal-testimonials.php)
- Fixed block validation issues caused by HTML comments between opening tags and WordPress block comments
- Added comprehensive documentation in CLAUDE.md about HTML comment restrictions in block patterns
- Cleaner pattern markup improves WordPress block validation and prevents console errors",
Developer Installation Documentation:
- Added detailed developer installation instructions in CONTRIBUTING.md
- Included GitHub repository clone commands for theme and Elayne Blocks plugin
- Added activation instructions via WordPress admin
CSS Effects Documentation:
- Documented 32 interactive block styles across 4 categories (Button, Card/Group, Image, Text/Link)
- Added technical implementation details: pure CSS, hardware-accelerated, accessibility features
- Explained browser compatibility and print optimization
README.md Structure:
- Streamlined installation section with link to detailed developer guide in CONTRIBUTING.md
- Condensed pattern library description from detailed list to concise summary format
- Simplified style variations from detailed descriptions to compact list format
- Restructured typography section with complete font details and design system overview
- Condensed "Working with Full Site Editing" section to "Getting Started" with streamlined guidance
- Simplified Elayne Blocks plugin section with concise feature list
Font Licensing Documentation:
- Expanded font licensing section in readme.txt with detailed information for all 6 fonts
- Added complete font details: license type, source URLs, weights, variants, and usage context
- Organized fonts with clear headings: Open Sans, Cormorant Garamond, Quicksand, Bodoni Moda, Mona Sans, Bitter
- Specified which style variations use which fonts
Documentation Organization:
- Moved developer-specific content from README.md to CONTRIBUTING.md
- Separated user-facing documentation from contributor/developer documentation
- Improved information hierarchy and discoverability",
New Interactive Block Styles:
- Button Effects: 6 new animation styles including Arrow Slide (arrow slides right on hover), Gradient Shift (animated gradient background), Shimmer (light sweep effect), Glow (glowing shadow), Border Draw (outline fills on hover), and Slide Up (background slides from bottom)
- Card/Group Effects: 7 new interactive styles including Elevate on Hover (card lifts with shadow), Glow Border (animated gradient border), Image Zoom (zoom nested images), Tilt Card (3D perspective tilt), Scale Hover (subtle scale up), Border Pulse (pulsing border animation), and Slide Border (border slides from edges)
- Image Effects: 9 new hover styles including Zoom Hover, Grayscale to Color, Rotate Icon, Blur, Brightness, Sepia, Lift Shadow, Border Reveal, and Tilt 3D
- Text/Link Effects: 10 new typography styles including Animated Underline (expands from left), Animated Underline Center (expands from center), Gradient Text (gradient clipped to text), Gradient Text Animated (shifting gradient), Highlight Fade (background appears on hover), Link Hover Shift (slides right with underline), Underline Slide (animated heading underline), Fade In (text fades in with upward movement), and Animated Markers (list markers slide on hover)
Effect System Features:
- Pure CSS animations with hardware acceleration for smooth 60fps performance
- Comprehensive accessibility support with enhanced focus states and reduced motion preferences
- Print stylesheet optimization (removes all effects for clean printing)
- RTL language support for text/link effects
- Cross-browser compatibility with fallbacks for unsupported features
Link Styling:
- Removed default underline from all links (modern, cleaner appearance)
- Added medium font weight (500) to paragraph links for better visual hierarchy
- Links now only show underline on hover state
New Stylesheet Files:
- Added
assets/styles/core-button.css- Button effect system (260 lines) - Added
assets/styles/core-image.css- Image effect system (231 lines) - Added
assets/styles/core-paragraph.css- Text/link effect system (348 lines) - Updated
assets/styles/core-group.css- Complete rewrite with card/group effects (271 lines, previously 73 lines)
Block Style Registration:
- Added
elayne_register_effect_block_styles()function infunctions.php - Registers 32 new block style variations across 6 core blocks
- Supports core/button, core/group, core/image, core/paragraph, core/heading, and core/list blocks
Performance Optimizations:
- Uses CSS
will-changeproperty for transform-heavy animations - Leverages GPU acceleration via
transformandopacitytransitions - Media query for hover capability detection (
@media (hover: hover) and (pointer: fine)) - Automatic animation disabling for
prefers-reduced-motionusers",
Pattern Library Count Update:
- Updated pattern count from 72 to 73 professionally designed patterns
- Headers & Footers category expanded from 6 to 7 patterns
- Added standard header with phone number to header variations
README.md Documentation Completion:
- Completed documentation restructure started in 1.3.2
- Finalized separation of user-facing documentation (README.md) from developer documentation (CONTRIBUTING.md)
- Pattern library section now reflects accurate counts across all categories",
Navigation Styling:
- Removed underline decoration from current menu items and hovered parent menu buttons for cleaner appearance
Firefox Link Rendering:
- Added browser-specific fix to standardize link underline thickness at 0.1rem in Firefox
New Header Pattern:
- Added "Header Standard with Phone Number" pattern (header-standard-with-tel-number) with logo, inline navigation, and phone number
- Phone number displays on mobile only, with full navigation visible on desktop
- Includes responsive visibility classes (hide-on-desktop/hide-on-mobile)
CSS Enhancements:
- Added media query for .hide-on-desktop class (min-width: 782px)
- Added Firefox-specific @-moz-document rule for consistent link underline thickness",
CONTRIBUTING.md Developer Guide:
- Comprehensive developer documentation covering technical requirements, project structure, and contribution guidelines
- Detailed pattern development guidelines including responsive grid layouts and horizontal padding best practices
- Industry vertical pattern creation guidelines with naming conventions and image organization
- Translation, code standards, and testing checklists for contributors
Legal Services Industry Vertical:
- New legal-focused patterns and content optimized for law firms and legal professionals
- Legal Blue style variation with professional navy blue and gold palette
- Legal-specific images stored in
patterns/images/legal/directory
README.md Documentation Restructure:
- Condensed pattern library section from detailed 100+ line listing to concise category-based overview
- Simplified documentation by moving developer details to CONTRIBUTING.md
- Pattern count updated from 47 to 72 patterns with reorganized category counts
- Industry verticals section now includes Legal Services alongside Spa & Wellness and Real Estate
Documentation Organization:
- Separated user-facing documentation (README.md) from developer documentation (CONTRIBUTING.md) for better organization
New Vertical Pattern Categories:
- Added Legal Services category (
elayne/legal) with professional law firm patterns - Added Fintech & Technology category (
elayne/fintech) for financial and tech businesses - Added Beauty & Salon category (
elayne/salon) for beauty and wellness services - Added Retail & E-commerce category (
elayne/retail) for online and physical stores
Legal Services Patterns:
- Legal Services Hero (
elayne/legal-hero) - Professional hero section with call-to-action buttons - Legal Hero with Statistics (
elayne/legal-hero-with-stats) - Premium hero with integrated statistics and gradient background - Legal Hero Split Layout (
elayne/legal-hero-split) - Split-screen hero with trust badge, features, and client reviews - Legal Contact Information (
elayne/legal-contact) - Contact details with office location, phone, email, and hours
Legal Services Assets:
- Added 6 custom SVG icons for practice areas: business law, criminal defense, estate planning, family law, litigation, and real estate law
- Added 3 attorney portrait images (WebP format) for team sections
- Added professional law office hero image (WebP format)
Pattern System Enhancements:
- Extended pattern category registration to support vertical-specific content organization
- All new patterns include proper metadata, categories, keywords, and viewport width settings
- Legal patterns feature responsive layouts with grid-based column systems
Pattern URL Documentation:
- Added comprehensive documentation about pattern URL behavior and database content
- Documented how
get_template_directory_uri()returns environment-specific URLs that get hardcoded into database - Included troubleshooting steps for mixed content warnings when moving content between environments
- Added search-replace commands for URL sanitization when deploying content to production
- Cross-referenced main CLAUDE.md documentation for URL sanitization workflows
Logo Asset Cleanup:
- Removed unused PNG logo files in multiple sizes (16x16, 32x32, 48x48)
- Removed dark, outline, primary, and white logo variants
- Theme now uses SVG logos exclusively for better scalability and performance
Navigation Chevron Spacing:
- Reduced gap between parent menu text and chevron from 0.5rem to 0.25rem
- Updated
.moiraine-nav-parent-wrappergap property in core-navigation.css - Updated
.moiraine-nav-togglemargin-left in overlay mode - Tighter, more compact visual appearance for navigation menus
- Consistent spacing across desktop and mobile overlay modes
- Updated
Post Author and Date Alignment:
- Added CSS fixes for vertical alignment of post author and post date blocks
.wp-block-post-authornow uses flexbox withalign-items: center.wp-block-post-author__contentaligns author name with avatar center.wp-block-post-datealigns with author name when in flex container- Prevents misaligned metadata in post layouts
- Navigation spacing improvements enhance visual consistency
- Post metadata alignment fixes improve readability in sidebar and post layouts
- CSS changes isolated to core-navigation.css and style.css
License Version Update:
- Updated theme license from GPL v2 to GPL v3
- style.css: Changed license from "GNU General Public License v2 or later" to "GNU General Public License v3 or later"
- License URI updated from https://www.gnu.org/licenses/gpl-2.0.html to https://www.gnu.org/licenses/gpl-3.0.html
- Added full GPL v3 license text to LICENSE.md file
- Removed redundant license section from README.md (license details now in LICENSE.md)
- readme.txt updated to reflect GPL v3 licensing
- Theme now consistently uses GPL v3 across all files
- LICENSE.md contains complete GPL v3 license text (674 lines)
- Copyright notice in style.css and readme.txt updated accordingly
Pattern Fixes:
- services-feature-cards - Fixed missing horizontal padding on mobile
- Added
var:preset|spacing|mediumto left/right padding on outer full-width group - Prevents edge-to-edge content on mobile devices
- Corrects regression from version 1.2.1 where horizontal padding was incorrectly removed
- Pattern now follows Elayne responsive padding standard
- Added
Pattern Improvements:
- three-column-feature-grid - Code formatting and spacing refinements
- Removed background colors from individual feature cards (cleaner tertiary background)
- Adjusted bottom margin spacing from
xx-largetolargefor better vertical rhythm - Changed grid
blockGapfromx-largeto0for consistent card spacing - Added
blockGap: 0to individual cards for tighter content spacing - Improved code formatting with cleaner indentation
- More maintainable markup structure
- Mobile spacing now consistent across all full-width patterns
- Constrained layout containers require horizontal padding for proper mobile display
- Pattern code quality improvements for better maintainability
Pattern Responsiveness Enhancements:
- shop-overview-three-columns - Converted from 3-column layout to grid layout with
minimumColumnWidth: 280px- Responsive breakpoints: 3 columns (desktop) → 2 columns (tablet) → 1 column (mobile)
- Smoother responsive behavior across all device sizes
- Better user experience with proper tablet layout
- team-grid - Converted from columns to grid layout with
minimumColumnWidth: 280px- Proper 3-2-1 column responsive flow
- Improved tablet display (2 columns instead of cramped 3)
- stats-showcase - Converted stats grid from columns to grid layout with
minimumColumnWidth: 280px- Better responsive behavior for statistics cards
- stats-list - Converted feature list from columns to grid layout with
minimumColumnWidth: 280px- Improved mobile and tablet display
- services-feature-cards - Removed horizontal padding from outer container (padding: 0)
- Full-width background now extends properly on all screen sizes
- Removed redundant backgroundColor from outer group (already on constrained inner group)
- career-opportunities - Removed horizontal padding from outer container (padding: 0)
- Consistent with other full-width patterns
- template-page-centered - Changed default alignment to "full" for better pattern display
- Patterns with full-width backgrounds now work correctly
- wellness-cover-highlight - Removed default backgroundColor (uses cover block background)
- Cleaner pattern structure
Header Pattern Updates:
- header-standard - Major responsive improvements
- Added horizontal padding (left/right:
var:preset|spacing|medium) to header container - Changed navigation flexWrap from "wrap" to "nowrap" for better mobile behavior
- Added "hide-on-mobile" class to social links (hidden on mobile, shown on desktop)
- Removed unnecessary wrapper group around site title
- Simplified header structure for better mobile display
- Navigation and site title now properly aligned on all screen sizes
- Added horizontal padding (left/right:
Navigation Improvements:
- Added
.hide-on-mobileCSS rule tocore-navigation.css- Hides elements with this class on screens ≤781px
- Used for social links in header-standard pattern
- Provides cleaner mobile header layout
Template Parts:
- Updated default header (
parts/header.html) from header-mobile to header-standard- header-standard now properly optimized for both desktop and mobile
- Single header pattern for all screen sizes
- Simplified theme architecture
- Converted 5 patterns from
wp:columnsto grid layout withminimumColumnWidth - Grid layouts provide automatic 3→2→1 column responsive behavior
- Eliminated cramped 3-column layouts on tablet devices
- Full-width pattern padding now consistently applied only to constrained inner groups
- Header pattern now uses single responsive design instead of separate mobile/desktop variants
WooCommerce Product Archive Support:
- Custom Product Archive Template - New
templates/archive-product.htmltemplate for WooCommerce shop pages- Responsive 3-2-1 column grid layout (3 desktop, 2 tablet, 1 mobile)
- Product collection block with breadcrumbs, sorting, and pagination
- Review testimonial pattern at bottom of shop page
- Integrates seamlessly with WooCommerce product displays
- Uses Elayne design system (spacing, colors, typography)
Responsive Product Grid CSS:
- Custom CSS Grid override for WooCommerce Product Collection block
- Overrides WooCommerce's default flexbox layout with CSS Grid
- Responsive breakpoints: 3 columns (>1024px), 2 columns (641px-1024px), 1 column (≤640px)
- Properly sized columns using
grid-template-columns: repeat(n, 1fr) - Removes WooCommerce's width constraints on list items (
width: auto !important) - Better responsive behavior than WooCommerce's default (which uses flexbox + percentage widths)
- Defined in
style.csslines 223-246
- Template references
elayne/two-column-reviewpattern for social proof - CSS targets
.wc-block-product-template.is-flex-containerfor grid conversion - Uses
!importantdeclarations to override WooCommerce's inline styles - Grid gap adjusts responsively (2rem desktop, 1.5rem tablet, 1rem mobile)
- Compatible with WooCommerce Product Collection block (modern block-based approach)
- No JavaScript required - pure CSS solution
New Logo Assets:
- Elayne Logo Collection - Complete logo system in multiple formats and sizes
- Primary gold logo (SVG + PNG): elayne-logo-primary.svg, elayne-logo-primary.png
- Dark logo (SVG + PNG): elayne-logo-dark.svg, elayne-logo-dark.png
- White logo (SVG + PNG): elayne-logo-white.svg, elayne-logo-white.png
- Outline logo (SVG + PNG): elayne-logo-outline.svg, elayne-logo-outline.png
- Favicon sizes (16x16, 32x32, 48x48 PNG) for all logo variants
- All logos stored in
assets/images/logos/directory - SVG format for scalability, PNG with drop shadows for raster use
- Gold color (#D4AF37) for premium branding
README Updates:
- Updated README.md with Elayne logo header
- Replaced text banner with centered SVG logo
- Cleaner, more professional presentation
- Logo at 120x140px for optimal display
Pattern Updates:
- portfolio-grid-masonry - Layout and link styling improvements
- Changed from CSS Grid to true masonry layout using CSS columns
- Added
portfolio-masonry-gridclass with column-count: 3 - Responsive breakpoints: 2 columns (tablet), 1 column (mobile)
- Portfolio item titles now have hover underline effect
- Added text-decoration: none to default state for cleaner appearance
- Better visual hierarchy with improved link states
- card-call-to-action - Code cleanup and formatting
- Simplified markup with cleaner indentation
- Removed unnecessary shadow styling (uses default card styling)
- More maintainable code structure
- team-grid - Code formatting improvements
- Cleaner indentation for better readability
- stats-showcase - Minor spacing adjustments
- Improved consistency with other patterns
CSS Enhancements:
- core-navigation.css - Underline styling refinements
- Added
text-decoration-thickness: 1pxto navigation links - Consistent underline thickness across all navigation states
- Applied to both standard navigation and clickable parent links
- Better visual consistency for hover states
- Added
- style.css - Portfolio masonry layout system
- Added
.portfolio-masonry-gridclass with CSS column layout - Three-column masonry on desktop (column-count: 3)
- Two-column on tablet (max-width: 1024px)
- Single-column on mobile (max-width: 640px)
- Prevents column breaks within portfolio items (break-inside: avoid)
- Configurable column gap (16px default)
- Added
- Total logo files: 20 (4 variants × 4 sizes + 4 SVG originals)
- Logo design features lily flower symbolism for elegance and sophistication
- All PNG logos include subtle drop shadows for depth
- SVG logos provide scalability for all screen sizes
- Masonry layout uses CSS columns (no JavaScript required)
- Improved pattern code maintainability with consistent formatting
Navigation Enhancements:
- Clickable Parent Menu Items - Parent menu items can now be both clickable links AND dropdown toggles
- Click text to navigate to parent page
- Click chevron to toggle submenu
- Uses
hasClickableParentsattribute on Navigation block - Preserves WordPress Interactivity API compatibility
- Includes fallback JavaScript for enhanced compatibility
- Improved Chevron Positioning - Better chevron icon placement in navigation menus
- Chevron icons properly nested inside buttons for HTML5 validation
- Cleaner DOM structure for accessibility
- Uses
hasImprovedChevronsattribute on Navigation block
- Custom Navigation Styles - Comprehensive navigation styling system
- New
assets/styles/core-navigation.csswith organized CSS architecture - Desktop dropdown styling with shadows and borders
- Mobile overlay menu styling
- CSS custom properties for consistent spacing and sizing
- Responsive design for all viewport sizes
- New
- Navigation Frontend Script - Client-side enhancement for navigation functionality
- Automatically enqueued for all pages
- Handles clickable parent conversion
- Fixes HTML5 validation issues
- Lightweight (no dependencies)
Pattern Updates:
- header-standard - Updated site title styling
- Changed font weight from 300 (light) to 600 (semi-bold) for better visibility
- Adjusted font size from "medium" to "base" for consistency
- Removed custom "has-bottom-border" class
- Added
hasClickableParentsandhasImprovedChevronsto navigation block
- footer-simple - Updated footer link colors
- Changed default text color from "secondary" to "main" for better contrast
- Updated link hover color from "main" to "primary" for better visual feedback
- stats-showcase - Improved avatar styling
- Removed hardcoded width/height (60px) from avatar image
- Added
is-avatarclass for consistent avatar sizing via theme.json - Uses
var(--wp--custom--avatar-size)for centralized sizing - Maintains
is-style-rounded-fullandis-style-roundedclasses
- Frontend JavaScript uses vanilla DOM manipulation (no dependencies)
- CSS organized with table of contents and clear sections
- WordPress Interactivity API attributes preserved on converted elements
- HTML5 validation improved by proper chevron icon nesting
- Navigation enhancements work with all WordPress themes (not theme-specific)
- Avatar sizing now centralized via theme.json custom properties
New Style Variation:
- Spa & Wellness - Elegant spa and wellness color scheme with sophisticated typography
- Cormorant Garamond serif font for elegant headings with refined letterforms
- Quicksand sans-serif for clean, friendly body text
- Soothing spa color palette: Teal (#5BBCD6), Ocean Sage (#2D4A4E), soft accent tones
- Three custom duotone presets (Spa Teal, Ocean Sage, High Contrast)
- Three gradient presets (Spa Teal, Ocean Depth, Peaceful Sky)
- Perfect for spas, wellness centers, yoga studios, and health retreats
- Accessible via Appearance > Editor > Styles
New Fonts:
- Cormorant Garamond - Elegant serif typeface (variable weight 300-700) with italic variant
- Quicksand - Modern rounded sans-serif (variable weight 300-700)
- Self-hosted WOFF2 format for optimal performance
New Patterns (13):
Header Patterns (1):
- header-top-bar-centered-menu - Header with centered logo and navigation menu with top bar
- Clean centered layout
- Optional top announcement bar
- Perfect for spa and wellness sites
Footer Patterns (1):
- footer-with-nav-columns - Two-column footer with site info/social and multi-column navigation
- Site title, description, and social links on left
- Three navigation columns on right (About, Services, Visit)
- Copyright and legal links at bottom
- Flexible layout for any business type
Hero Patterns (1):
- spa-home-hero - Hero section with overlapping colored box on image background
- Dramatic overlapping layout
- Image on left, content box overlaps on right
- Perfect for spa homepages and landing pages
Call-to-Action Patterns (1):
- spa-booking-cta - Booking call-to-action with form integration
- Encourages appointment bookings
- Form-ready layout
- Conversion-optimized design
Features Patterns (4):
- two-column-feature - Two-column feature section with image and content
- Balanced 50/50 layout
- Image on left, content on right
- Versatile for services, features, about sections
- overlapping-feature-columns - Feature columns with overlapping image effect
- Modern overlapping design
- Image overlaps content box
- Creates visual depth and interest
- overlapping-feature-columns-reversed - Reversed overlapping feature columns
- Mirror layout of overlapping-feature-columns
- Content on left, image overlaps from right
- Provides layout variety
- wellness-cover-highlight - Full-width wellness cover section with highlight box
- Dramatic full-width cover image
- Overlay content box
- Perfect for hero sections and feature highlights
Testimonials & Reviews (3):
- testimonials-grid - Three-column testimonial grid with star ratings
- Client testimonials in card layout
- Star ratings for credibility
- Professional presentation
- two-column-review - Two-column review section with image and testimonial
- Client photo with testimonial
- Quote-style formatting
- Personal touch for reviews
- review-text-image-overlap - Review with overlapping text and image
- Text overlaps image for visual interest
- Modern magazine-style layout
- Engaging testimonial presentation
Blog/Posts Patterns (1):
- four-column-wellness-posts - Four-column grid for wellness blog posts
- Compact grid layout
- Perfect for blog archives and related posts
- Optimized for wellness content
Shop/E-commerce Patterns (1):
- shop-overview-three-columns - Three-column product grid for spa/wellness shops
- Product showcase layout
- Image-focused cards
- Perfect for WooCommerce integration
New Pattern Images:
- Added spa-focused images in
patterns/images/spa/directory:- Treatment images: back-massage.webp, spa-treatment-hot-stones.webp, spa-treatment-landscape.webp, spa-treatment-zoomed.webp, yoga-pose.webp
- Client avatars: avatar-1.webp, avatar-2.webp, avatar-3.webp, avatar-4.webp, review-profile.webp
- Product images (shop subdirectory): bath-salt.webp, massage-oil.webp, serum.webp, supplements.webp
- All images optimized WebP format for fast loading
CSS Enhancements:
- Added overlapping columns styling (
.is-style-overlap-columns,.is-style-overlap-columns-reversed)- Creates modern overlapping layouts on desktop (min-width: 782px)
- Second column overlaps first by -10% with z-index layering
- Centered vertical alignment for visual balance
- Enhanced spa post grid styling for consistent image display
- Added cart icon styling with hover effects and transitions
- Mobile navigation adjustments for centered logo and menu button
- Pattern count increased from 34 to 47 total patterns
- Enhanced pattern library with spa and wellness industry focus
- Improved layout variety with overlapping column techniques
- Better responsive design across all new patterns
- Updated palette tokens to use
primary-altand addprimary-alt-accentacross style variations - Added Spa & Wellness pattern category for easier pattern browsing
- Total style variations: 5 (Ink & Sand, Teal Bay, Denim Copper, Forest Sage, Spa & Wellness)
- All new patterns follow Elayne design system with theme color tokens
- Variable fonts provide flexible typography and better performance
- Self-hosted fonts ensure GDPR compliance and fast loading
- CSS improvements for modern overlapping layouts
- All content fully translatable with proper text domain
- Added custom avatar size configuration in theme.json (
settings.custom.avatarSize: "80px") - Updated stats-list pattern avatar styling to use theme.json custom variable instead of hardcoded pixel values
- CSS now references
var(--wp--custom--avatar-size)for consistent, maintainable avatar sizing across the theme - Avatar images properly sized at 80x80px with circular shape using WordPress core
is-style-roundedclass - Removed redundant custom CSS for rounded styling (WordPress core handles this via
border-radius: 9999px)
- Centralized avatar size definition in theme.json for single source of truth
- More maintainable CSS with semantic variable naming
- Better integration with WordPress theme.json design token system
- Leverages WordPress core block styles instead of custom CSS for rounded images
- Updated hero-modern-dark pattern with improved styling:
- Simplified background gradient from complex radial/linear combo to cleaner diagonal linear gradient (135deg)
- Changed from
radial-gradient(ellipse at top, rgba(99, 102, 241, 0.15) 0%, transparent 50%), radial-gradient(ellipse at bottom, rgba(139, 92, 246, 0.15) 0%, transparent 50%), linear-gradient(180deg, rgb(15, 23, 42) 0%, rgb(30, 41, 59) 100%)tolinear-gradient(135deg,rgb(11,19,36) 0%,rgb(101,106,113) 100%) - Added top spacer (50px) before heading for better vertical rhythm
- Added bottom spacer (4rem) after hero image for consistent spacing
- Reformatted code indentation for better maintainability (tabs instead of spaces)
- Improved hero-modern-dark pattern markup with cleaner indentation
- Enhanced visual consistency with simplified gradient approach
- Better vertical spacing throughout pattern
- Added template-page-hero (slug:
elayne/template-page-hero) for pages that start with a full-width hero and need no top padding.
New Portfolio Category Patterns:
-
portfolio-grid-masonry (slug:
elayne/portfolio-grid-masonry) - Masonry-style portfolio grid- Showcases creative work in visually engaging grid layout
- Category filter pills (All, Branding, Web Design, Development, Marketing)
- Variable height cards (320px and 480px) for dynamic masonry effect
- Project cards with overlay titles and category tags
- Rounded corners (16px) and professional card design
- Perfect for agencies, designers, and creative professionals
- Uses existing pattern images (desktop.webp, computer-hands.webp, guy-laptop.webp, wellness.webp)
-
case-study-detailed (slug:
elayne/case-study-detailed) - Comprehensive project case study- Structured storytelling format: Challenge, Approach, Results
- Hero cover image with project title and metadata
- Three-phase approach section with numbered steps
- Results metrics display (3-column stats grid)
- Client testimonial quote with border accent
- Project gallery (WordPress gallery block)
- Services provided tags (pill-style badges)
- Full-width CTA section at bottom
- Perfect for showcasing detailed client work and case studies
New Pages Category Patterns:
- page-coming-soon (slug:
elayne/page-coming-soon) - Pre-launch/maintenance page- Full-height centered layout (100vh min-height)
- Site logo at top (200px width)
- Large "Coming Soon" heading (4rem)
- Countdown timer display (Days, Hours, Minutes, Seconds)
- Email notification signup CTA
- Social media links (Twitter, LinkedIn, Instagram)
- Clean, minimal design on base background
- Perfect for product launches and website maintenance
New Call-to-Action Patterns:
- card-call-to-action (slug:
elayne/card-call-to-action) - Modular CTA component- Compact card design (400px max width)
- Shadow and rounded corners for depth
- Centered heading and description
- Full-width button (100% width)
- Perfect for landing pages, blog sidebars, and conversion sections
- Reusable component for various page contexts
New Features Patterns:
- client-logo-wall (slug:
elayne/client-logo-wall) - Client logo showcase- "Trusted by Leading Brands" heading section
- Responsive grid layout (minimum 10rem columns)
- 12 logo placeholders in duotone effect
- Rounded card container (8px border-radius)
- "View Our Portfolio" CTA button
- Builds credibility and social proof
- Uses existing logo images (logo-1 through logo-6)
New Template:
- landing-page.html template - Full-screen landing page without header/footer
- Referenced by
template-landing-page.phppattern - Zero margins on main container
- Perfect for coming soon pages and dedicated landing pages
- Allows full creative control without site chrome
- Referenced by
New Pattern Image:
- Added
wellness.webp- Meditation/wellness scene for portfolio masonry pattern
- Pattern count increased from 21 to 26 original content patterns (34 total including templates)
- Added new "Portfolio" category (elayne/portfolio) with 2 patterns
- Added new "Pages" category (elayne/pages) with 1 pattern
- Enhanced "Call-to-Action" category with card component
- Enhanced "Features" category with client logo wall
- Updated README.md with new pattern descriptions and categorization
- Optimized readme-banner.png size (1.45MB → 236KB, 84% reduction)
- Updated pattern listings in documentation
- Total patterns: 50 files (34 content patterns + 16 template patterns)
- New template type: Landing Page (full-screen, no header/footer)
- All new patterns follow Elayne design system
- Fully translatable with proper text domain
- Responsive grid layouts with modern CSS
- Pattern categories properly registered in functions.php
- Added new "Events" category (elayne/events) for event-related patterns.
- Added event-upcoming-grid pattern (slug:
elayne/event-upcoming-grid) - Responsive 3-column event grid- Displays upcoming events with date badges, time, location, and registration buttons
- Calendar-style date display with month, day, and weekday
- Event type badges (Online/In-person) with custom styling
- Time display with timezone support
- Location and capacity information with emoji icons
- Dual CTA buttons (Register/Details, Get tickets/Details, Save seat/Details)
- Card-based design with rounded corners and borders
- Perfect for workshops, webinars, conferences, and community events
- Fully translatable content with proper text domain
- Reorganized theme documentation files for better project structure
- Improved organization for development and planning documents
- Better separation between theme files and project documentation
- Pattern count increased from 20 to 21 original patterns
- Event pattern features responsive grid layout with
minimumColumnWidth: 20rem - All event content properly localized with
esc_html_e()for translations - Event category added to theme pattern registration in functions.php
- Added "Cards" category (elayne/card) for reusable card-style patterns.
- Provides better organization for card components like author boxes, contact cards, and other card-based layouts.
- Fixed duplicate pattern categories by standardizing all patterns to use namespaced categories (elayne/*).
- Updated hero patterns to use elayne/hero category instead of WordPress core categories (banner, featured).
- Updated blog/post patterns to use elayne/posts category instead of core "posts" category.
- Updated author-box pattern to use elayne/card category for better categorization.
- Updated contact-side-by-side pattern to use elayne/contact category.
- Resolved duplicate category display issue in pattern library.
- All patterns now properly organized under registered theme categories.
- Eliminated confusion from mixing WordPress core categories with theme categories.
- Pattern categories now consistently use theme namespace (elayne/*) for custom patterns.
- WordPress core categories (header, footer) still used appropriately for template parts.
- Improved pattern discoverability and organization in Site Editor.
- Removed horizontal padding from header patterns (header-standard, header-mobile) to allow full-width alignment.
- Updated client-success-stories pattern with improved styling:
- Adjusted star rating font sizes (large → medium for main testimonial, large → base for supporting testimonials).
- Removed border styling from testimonial cards for cleaner appearance.
- Changed secondary color references to main-accent for better consistency.
- Added is-style-rounded class to avatar images.
- Fixed hardcoded image URLs to use proper template directory function.
- Updated agency-services-showcase pattern with additional wrapper group for improved layout structure.
- Adjusted header navigation font size (medium → base) in header-mobile pattern.
- Improved semantic HTML structure with proper wrapper elements.
- Enhanced compatibility with theme color palette by using consistent color tokens.
- Better responsive behavior for header elements with full-width alignment.
- Added three new color scheme styles: Teal Bay, Denim Copper, and Forest Sage.
- Each style provides a complete alternative color palette accessible via Appearance > Editor > Styles.
- Updated default theme.json color palette to use warmer "Ink & Sand" color scheme.
- Changed from bright teal/cyan to softer ink blue and warm sand tones for more sophisticated default appearance.
- Original teal color scheme now available as "Teal Bay" style variation.
- Fixed template-page-wide-no-title.php to allow full-width (alignfull) patterns to work correctly.
- Removed incorrect alignwide wrapper that was boxing content and preventing edge-to-edge patterns.
- Template now matches template-page-full.php structure with vertical padding but no horizontal constraints.
- Wide No Title template now properly supports full-width pattern layouts for landing pages.
- Maintains vertical spacing (top/bottom padding) while allowing horizontal edge-to-edge content.
- Implemented WordPress theme.json styles system for color variations.
- Created styles/teal-bay.json, styles/denim-copper.json, and styles/forest-sage.json.
- Added new "3xl" font size (xxx-large) to theme.json with responsive clamp sizing (5rem to 9rem).
- Simplified client-success-stories pattern markup with cleaner wrapper structure and removed redundant inline styles.
- Completed full-width pattern padding consistency - ensured all full-width patterns have horizontal padding on left/right sides.
- All alignfull patterns now consistently include horizontal padding (left/right) for proper edge gutters on all screen sizes.
- Improved pattern code quality with cleaner markup and better maintainability.
- Added horizontal padding to full-width patterns (client reviews, newsletter CTA, hero variants, pricing) to preserve side gutters on smaller screens.
- Updated wide page templates to use constrained post content layouts so alignfull patterns can break out correctly without unintended max-width constraints.
- Added layout helper CSS that lets alignfull blocks inside post content span edge-to-edge while respecting global padding.
New Patterns:
- faq (slug:
elayne/faq) - Collapsible FAQ section with accordion-style questions- Uses WordPress Details block for native accordion functionality
- 9 pre-written agency-focused questions and answers
- Rounded card design on tertiary background
- Contact CTA section at bottom
- Perfect for service pages, support sections, and informational content
- agency-services-showcase (slug:
elayne/agency-services-showcase) - Four-column service grid with custom icons- Showcases Web Design & Development, Digital Marketing, Brand Strategy, and E-commerce
- Custom SVG icons for each service
- Grid layout with responsive cards
- Professional presentation for agency offerings
- career-opportunities (slug:
elayne/career-opportunities) - Job listings section for recruitment- Detailed job position cards with role, type, and location
- Multiple job listings with consistent formatting
- Call-to-action for applications
- Ideal for careers/jobs pages
- client-success-stories (slug:
elayne/client-success-stories) - Enhanced testimonial layout with ratings- Featured main testimonial with star ratings
- Supporting testimonials grid
- Client names, titles, and company information
- Professional presentation for case studies and reviews
- author-box (slug:
elayne/author-box) - Author biography card- Avatar with rounded border
- Author name and bio
- Social media links (Twitter, LinkedIn, Facebook, Instagram, GitHub)
- Perfect for blog posts and team pages
New Assets:
- Added 4 custom service icons in
patterns/images/:icon-service-web.svg- Web design and development iconicon-service-marketing.svg- Digital marketing iconicon-service-strategy.svg- Brand strategy iconicon-service-commerce.svg- E-commerce solutions icon
Pattern Renamings:
- feature-boxes-with-icon-dark → agency-services-showcase (slug:
elayne/agency-services-showcase)- Better reflects professional agency use case
- More descriptive name for service showcases
- testimonials-with-big-text → client-success-stories (slug:
elayne/client-success-stories)- Clearer purpose for success stories and case studies
- Emphasizes results and client satisfaction
Pattern Improvements:
- agency-services-showcase - Style updates for improved visual hierarchy
- career-opportunities - Enhanced spacing and layout improvements
- Various minor pattern refinements for consistency
- Pattern count increased from 15 to 20 original patterns
- All new patterns follow Elayne design system
- Service icons optimized for web delivery (SVG format)
- Improved pattern metadata and categorization
New Pattern:
- pricing-comparison (slug:
elayne/pricing-comparison) - Three-column pricing comparison grid- Monthly/annual toggle capability
- Feature comparison with checkmark lists
- Highlighted recommended plan (center column elevated with shadow)
- Three pricing tiers (Guardian/Free, Mage/$480, Phantom/$600)
- Rounded corners and modern card design
- Perfect for SaaS products, membership sites, and subscription services
New Block Style:
- Checkmark List (
.is-style-checkmark-list) - Custom list style with checkmark icons- Uses SVG checkmark icon from
patterns/images/check-circle.svg - Flex layout with proper spacing
- Works with any list block
- Used in pricing comparison pattern
- Defined in
style.css
- Uses SVG checkmark icon from
New Pattern:
- hero-modern-light (slug:
elayne/hero-modern-light) - Light variant of modern hero- Light background (base color) instead of dark gradient
- Large centered headline with responsive typography (clamp-based sizing)
- Tagline with medium font size
- Dual CTA buttons (primary solid, secondary with border)
- Hero image below content with rounded corners
- Fully responsive with fluid spacing
- Complements existing
hero-modern-darkpattern
Pattern Renamings:
- contact-info → contact-details (slug:
elayne/contact-details)- More descriptive name for contact information display
- Better reflects pattern purpose (office hours, phone, email, address)
- footer-light → footer-standard (slug:
elayne/footer-standard)- Renamed for consistency with header naming convention
- Matches standard footer pattern naming
- header-light-with-hamburger-menu → header-mobile (slug:
elayne/header-mobile)- Simplified name reflects mobile-first design
- Clearer purpose (hamburger menu = mobile navigation)
- header-light-with-standard-menu → header-standard (slug:
elayne/header-standard)- Simplified name for desktop navigation
- Better consistency with footer naming
- hero-modern → hero-modern-dark (slug:
elayne/hero-modern-dark)- Clarifies dark background variant
- Distinguishes from new light variant
Internationalization:
- Added Dutch (nl_NL) translation files
languages/nl_NL.po- Translation stringslanguages/nl_NL.mo- Compiled translationslanguages/elayne.pot- Translation template with 50+ translatable strings
- Full theme translation coverage
- All pattern text translatable
- Button labels, headings, descriptions
- Contact information, testimonials, team content
- Pricing table content
Template Updates:
- Updated
parts/header.htmlto referenceheader-standardinstead ofheader-light-with-standard-menu - Updated
parts/footer.htmlto referencefooter-standardinstead offooter-light - Maintains consistency with renamed patterns
- Added checkmark SVG icon asset (
patterns/images/check-circle.svg) - Added README banner image (
assets/images/readme-banner.png) - Pattern metadata updated to reflect new naming conventions
- All pattern slugs follow consistent
elayne/pattern-nameformat - CSS additions for checkmark list style in
style.css
Two New Style Variations:
- Gray & Gold - Sophisticated grayscale palette with gold accents
- Bodoni Moda serif font for elegant headings
- Open Sans for clean body text
- Professional gray tones (#1a1a1a, #f8f8f8) with gold accent (#FFD700)
- Ideal for luxury brands, professional services, and upscale businesses
- Includes 5 duotone presets (Primary, Secondary, Accent, Neutral, High Contrast)
- Orange - Vibrant orange-focused color scheme
- Mona Sans variable font for modern headings
- Open Sans for body text, Bitter for serif elements
- Bold orange palette (#e65c00) with warm accents
- Perfect for creative agencies, startups, and energetic brands
- Includes 3 duotone presets (Primary, Secondary, High Contrast)
New Bodoni Moda Font:
- Variable font family (weights 400-900)
- Includes italic variant
- Classic serif typeface for elegant, sophisticated designs
- Self-hosted WOFF2 format for optimal performance
Style Variations Implementation:
- Style variations stored in
styles/directory - Users can switch entire design system via Site Editor → Styles
- Each variation includes complete color palette, typography, and block styles
- Fully compatible with Global Styles interface
New Pattern:
- hero-modern (slug:
elayne/hero-centered) - Modern centered hero with gradient background- Dramatic gradient background (dark slate with purple/indigo accents)
- Large centered headline with responsive typography (clamp-based sizing)
- Dual CTA buttons (primary solid, secondary translucent)
- Hero image below content with rounded corners
- Fully responsive with fluid spacing
- Perfect for SaaS products, tech startups, and modern web apps
Pattern Improvements:
- client-reviews-orange → client-reviews - Renamed and refactored to use theme colors
- Now follows theme color palette instead of hardcoded orange (#ff6b35)
- Uses
primary-darkbackground color for better theme compatibility - Maintains same layout and structure
- Better integration with style variations
- three-column-feature-grid - Renamed from
feature-gridfor clarity- Added top/bottom spacers for improved vertical rhythm
- Added margin reset (top/bottom: 0) for cleaner full-width sections
- Pattern metadata updated to match new name
- Slug changed to
elayne/three-column-feature-grid
- blog-post-columns and blog-post-columns-portrait - Spacing improvements
- Removed hardcoded horizontal padding from group wrapper
- Cleaner full-width alignment
- Better responsive behavior
Pattern Metadata Updates:
- Updated hero-two-tone and hero-with-cta with proper metadata structure
- Improved contact-info and cta-newsletter pattern spacing
- Enhanced consistency across all pattern files
- Style variations follow WordPress theme.json v3 specification
- Variable fonts provide better performance and flexible typography
- All patterns now use theme color tokens for better customization
- Pattern naming convention standardized (hyphenated slugs, descriptive titles)
Block Style Infrastructure:
- New block-specific styles directory (
assets/styles/) - Automatic block style loading system via
wp_enqueue_block_style() - Only loads styles when blocks are used (performance optimization)
- Supports custom styling for core blocks
Custom Block Styles:
- core-site-title.css - Bottom border decoration for site title/logo
- Centered underline effect (50% width)
- Hover opacity transition
- Editor-compatible styles
- core-group.css - Enhanced group block styling
- Removes default global padding from full-width sections
- Background blur style variant (
is-style-background-blur) - Responsive row improvements with mobile stacking (
elayne-row-stack) - Flexible alignment utilities
New Image Size:
- elayne-portrait-xs (350×525) - 2:3 aspect ratio for extra small portrait layouts
- Complements existing portrait size family
- Optimized for smaller grid displays
New Header Pattern:
- header-light-with-standard-menu - Header with logo, inline navigation, and social icons
- Alternative to hamburger menu variant
- Desktop-optimized with inline navigation
- Mobile responsive with overlay menu
- Includes social media links (Mastodon, Instagram, Bluesky)
- Clean, minimal design with border separator
New Footer Pattern:
- footer-simple - Minimal footer with single-line menu navigation
- Centered horizontal layout with separator dots
- Copyright year, site name, and essential links
- Lightweight alternative to complex footer layouts
- Responsive text sizing
- Added custom typography styling to site titles in header patterns
- Font weight: 300 (light) for refined appearance
- Uses primary font family from theme.json
- Applied to both hamburger and standard menu headers
- Consistent with modern, clean design aesthetic
- Updated post template patterns for improved consistency
- Refined blog post column patterns with better spacing
- Enhanced sidebar template styling
- Improved single post template structure
- Block styles loaded conditionally via
wp_enqueue_block_style()API - Automatic style discovery from
assets/styles/directory - Pattern-based architecture for custom block styling
- Maintains WordPress 6.6+ block theme standards
New Page Layout Patterns:
- template-page-left-sidebar - Page layout with left sidebar (33.33% sidebar, 66.66% content)
- Complements existing right sidebar layout
- Tertiary background color on sidebar area
- Full-width featured image support
- Consistent spacing with theme design system
New Post Layout Patterns:
- template-post-left-sidebar - Post layout with left sidebar (33.33% sidebar, 66.66% content)
- Post metadata (category, title, author, date)
- Featured image and post content
- Post tags display
- Full comments section with tertiary background
- Latest posts grid (3-column) at bottom
- Sidebar hidden on mobile devices
- template-post-right-sidebar - Post layout with right sidebar (66.66% content, 33.33% sidebar)
- Mirror layout of left sidebar variant
- Same post metadata and content structure
- Full comments and latest posts sections
- Responsive sidebar behavior
- template-post-wide - Wide post layout with expanded content area
- Wide-aligned title, featured image, and content
- Post metadata (category, author, date)
- Post tags display
- Full comments section with tertiary background
- Latest posts grid (3-column) at bottom
- Optimized for long-form content and visual storytelling
New Blog Index Pattern:
- template-index-list - Single-column list layout for blog posts
- Alternative to grid layout (Elayne's default)
- Full-width post entries with featured images
- Category, title, author, and date metadata
- Post excerpt display
- Horizontal separator between posts
- Query pagination at bottom
- References new
blog-post-listpattern
Supporting Pattern:
- blog-post-list - Reusable single-column blog post query loop
- Can be used independently in page/post content
- Fully customizable query parameters
- Responsive design with proper spacing
- Insertable pattern (appears in block inserter)
Layout Enhancements:
- Enhanced layout flexibility to match Ollie theme capabilities
- Expanded post layout options from 1 variant (centered) to 4 variants (centered, left sidebar, right sidebar, wide)
- Expanded page sidebar options from 1 variant (right) to 2 variants (left, right)
- Added blog index layout options: grid (existing) and list (new)
Technical Implementation:
- All new patterns follow Elayne design system (spacing, colors, typography)
- Template patterns marked with
Inserter: false(not shown in block inserter) - Proper
Template Typesmetadata for automatic template picker integration - Consistent comment section implementation across all post layouts
- Latest posts section included in all post sidebar/wide layouts
- Mobile-responsive with sidebar hidden via
elayne-hide-on-mobileclass - Uses theme preset spacing variables and color palette
- Bundled SVGs for Mastodon, Instagram, LinkedIn, and Bluesky under
patterns/images/ - Synced shared pattern assets into a new
patterns/images/directory for consistent rendering- All pattern images now stored in centralized location for better maintainability
- Ensures consistent image paths across all patterns
- Simplifies theme distribution and updates
- Swapped social links in header/footer patterns to Mastodon-first and removed Twitter/Facebook
- Reflects shift toward open-source, decentralized social platforms
- Header pattern updated: header-light-with-hamburger-menu
- Footer patterns updated to match new social media strategy
- Maintains professional social presence while supporting federated platforms
Development Infrastructure:
- composer.json with WordPress Coding Standards (WPCS) support
- phpcs.xml configuration for code quality checks
- package.json with theme metadata
- Composer scripts:
lint,wpcs:scan,wpcs:fixcomposer lint- Run PHP linting for syntax errorscomposer wpcs:scan- Scan for WordPress Coding Standards violationscomposer wpcs:fix- Automatically fix WPCS violations where possible
GitHub Actions workflow for automated theme review checks:
- Runs WordPress theme-review-action on pull requests and pushes
- Tests accessibility-ready compliance
- Validates theme against WordPress.org requirements
- Automates quality assurance workflow
- Ensures consistent code quality before deployment
- Added php-parallel-lint/php-parallel-lint for PHP syntax checking
- Added wp-coding-standards/wpcs v3.0.0 for WordPress coding standards
- Added phpcompatibility/phpcompatibility-wp for PHP compatibility checks
- Configured automated CI/CD for theme quality assurance
- Ensures WordPress.org compliance through automated checks
Core Theme Features:
- Full Site Editing (FSE) support with WordPress 6.6+
- 15 original block patterns across 8 categories
- Custom pattern categories for organized content blocks
- theme.json for global styles and settings
- HTML templates: index, single, page, front-page, home
- Template parts: header, footer
- Block-specific styles
- Functions.php with theme setup and customizations
- RTL language support
- Translation-ready with text domain 'elayne'
Block Patterns (15):
Header Patterns (1):
- header-light-with-hamburger-menu - Header with hamburger navigation and social icons
- Mobile-first responsive design
- Integrated social media links
- Clean, professional appearance
Hero Patterns (2):
- hero-two-tone - Split two-tone hero with dual CTA buttons and contrasting backgrounds
- Eye-catching split-screen design
- Dual call-to-action buttons for multiple conversion paths
- Customizable background colors for brand alignment
- hero-with-cta - Centered business hero with primary CTA button and supporting description
- Classic centered layout for professional services
- Single focused call-to-action
- Supporting descriptive text for context
Call-to-Action & Contact (3):
- cta-newsletter - Newsletter/lead capture CTA with headline, description, and full-width submit button
- Optimized for email list building
- Full-width design for maximum visibility
- Clear value proposition
- contact-info - Modern contact info row with office hours, phone/email card, and address/location card
- Three-column layout for organized information
- Office hours, contact methods, and physical location
- Professional card-based design
- contact-side-by-side - Two-column contact layout with form and contact information
- Balanced layout for contact pages
- Integrated contact form
- Side-by-side information display
Features & Services (2):
- feature-grid - Three-column feature/service grid with icon circles and supporting text
- Showcases key features or services
- Icon-based visual hierarchy
- Responsive grid layout
- services-feature-cards - Service cards with icons and descriptions
- Professional service presentation
- Card-based design for visual separation
- Icon + title + description format
Team & Testimonials (3):
- team-grid - Three-column team grid with avatars, names, and job titles
- Professional team member showcase
- Avatar-based visual identity
- Name and role information
- testimonial-card - Single testimonial card with quote and client attribution
- Featured testimonial display
- Client attribution and credibility
- Quote-based design
- client-reviews-orange - Triple testimonial row on bold orange background with circular avatars
- Multi-testimonial display
- Bold brand color (customizable)
- Circular avatar design for visual interest
Statistics (2):
- stats-showcase - Two-column section combining promotional content with statistics display (4 stat cards in 2x2 grid)
- Data-driven credibility
- Promotional content + statistics combination
- 2x2 grid layout for metrics
- stats-list - Two-column section with promotional content and feature list (3 feature items with icons)
- Feature highlights with supporting content
- Icon-based visual hierarchy
- Two-column balanced layout
Blog/Posts (2):
- blog-post-columns-portrait - Three-column blog post grid with portrait-oriented featured images
- Portrait image format (2:3 aspect ratio)
- Three-column responsive grid
- Optimized for blog archives and portfolio displays
- post-featured-two-column - Single featured post with portrait image (2:3) and large excerpt
- Featured post highlight
- Portrait image + large excerpt format
- 40/60 column split for visual balance
Block Extensions:
Navigation Block Enhancements:
- Clickable parent items - Parent menu items become clickable links (click text = navigate, click chevron = toggle submenu)
- Improves user experience by making parent items functional
- Separates navigation (text click) from submenu toggle (chevron click)
- Maintains WordPress Interactivity API compatibility
- Improved chevron positioning - Better inline positioning of chevrons on mobile devices
- Fixes mobile menu alignment issues
- Chevrons align properly next to menu text
- Touch-friendly spacing on mobile devices
Post Excerpt Block Enhancements:
- Link excerpt to post - Wrap entire excerpt in clickable link to post
- Increases clickable area for better UX
- Makes entire excerpt interactive, not just "Read more"
- Improves accessibility and usability
- Underline link control - Toggle link underline styling on/off
- Designer control over link styling
- Clean typography options
- Maintains accessibility while offering design flexibility
Custom Image Sizes:
elayne-portrait-small(380×570) - 2:3 aspect ratio for portrait blog/portfolio gridselayne-portrait-medium(380×507) - 3:4 aspect ratio for medium portrait layoutselayne-portrait-large(380×475) - 4:5 aspect ratio for larger portrait displayselayne-single-hero(700×400) - 16:9-ish landscape for single post/page hero images- All sizes optimized for WordPress regeneration
- Maintains consistent aspect ratios across layouts
- Balances quality and performance
Typography & Design:
- Fluid typography system with responsive font scaling using clamp()
- Automatically scales typography based on viewport
- Maintains readability across all devices
- No breakpoint-based media queries needed
- Open Sans variable font (weights 300-800)
- Wide range of font weights for design flexibility
- Single font file for better performance
- Professional, clean typography
- Professional business-focused color palette
- Curated color scheme for business websites
- High contrast for accessibility
- Customizable through Global Styles
- Custom shadow presets for visual depth
- Multiple shadow options for elevation
- Consistent visual hierarchy
- Easy to apply through block settings
Block Extensions Implementation:
- Block extensions directory (assets/js/block-extensions/) with:
- navigation.js - Enhanced navigation block controls
- Inspector panel controls for clickable parents and chevron positioning
- Frontend JavaScript for DOM manipulation
- Preserves WordPress Interactivity API
- post-excerpt.js - Enhanced post excerpt block controls
- Inspector panel controls for excerpt linking and underline control
- CSS class application
- Accessible link wrapping
- navigation.js - Enhanced navigation block controls
- Block extensions PHP handler (inc/block-extensions.php) for server-side rendering
- Server-side block filtering
- Attribute persistence
- CSS class injection
- Minimum WordPress version: 6.6
- Minimum PHP version: 8.0
- Tested up to WordPress 6.9
- GPL v2+ licensed
- Clean block theme architecture
- No jQuery dependencies
- Optimized for performance
- Minimal CSS and JavaScript
- Efficient asset loading
- No external dependencies beyond WordPress core
First beta release of Elayne business block theme with 15 professional patterns, block extensions, and comprehensive design system.
Note: For detailed information about pattern usage and customization, see the theme documentation at https://imagewize.com