Merge pull request #72 from imagewize/patterns-contrast-improvement

Patterns Contrast Improvement

Author: jasperf

CHANGELOG.md

@@ -7,6 +7,44 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.6.4] - 2026-03-20
+
+### Added
+
+**Hero Landscape SVG Illustration:**
+- Added new `elayne_hero_landscape.svg` — a detailed mountain landscape at sunrise/sunset scene featuring layered mountains, reflective lake, pine tree silhouettes, moon, stars, and cloud wisps
+- Illustration uses theme color palette (dark navy sky, warm orange sun/horizon glow)
+- Licensed CC0 (public domain), attributed to Claude AI (Mar 2026)
+
+**Theme.json Presets:**
+- Added "Warm Glow" duotone preset (`#1F2937` / `#F5C070`) for warm sunrise-toned image treatments
+- Added "Warm Diagonal" gradient preset (`linear-gradient(135deg, rgba(230,92,0,0.88), rgba(11,19,36,0.70))`)
+
+### Changed
+
+**Hero Modern Light Pattern:**
+- Replaced `desktop.webp` placeholder image with the new `elayne_hero_landscape.svg` illustration
+- Updated image alt text to describe the mountain landscape scene
+- Reduced outer vertical padding from `xxx-large` to `xx-large` for a more compact hero section
+
+**Agency Services Showcase Pattern:**
+- Added `tertiary` background color to the outer section container for visual contrast
+- Added `border-light` 1px border to all four service cards (Web Design, Digital Marketing, Brand Strategy, E-commerce) for improved card definition
+
+### Fixed
+
+**SVG Editor Display:**
+- SVG images without intrinsic pixel dimensions now render at full width inside the block editor, matching frontend behaviour
+- Implemented via editor-scoped inline CSS rule targeting `.editor-styles-wrapper .wp-block-image img[src$=".svg"]`
+
+### Technical
+
+**block-extensions.php:**
+- Added `elayne_editor_svg_styles()` function hooked to `enqueue_block_editor_assets`, injecting SVG width fix via `wp_add_inline_style` on the `wp-edit-blocks` handle
+
+**screenshot.png:**
+- Updated theme screenshot to reflect current design",
+
 ## [3.6.3] - 2026-03-19
 
 ### Changed

inc/block-extensions.php

@@ -72,6 +72,20 @@ function(settings, name) {
 }
 add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\\elayne_enqueue_block_extensions' );
 
+/**
+ * Fix SVG images in the block editor.
+ *
+ * SVGs without intrinsic pixel dimensions render at partial width in the editor.
+ * This rule forces them to fill their container, matching the frontend behaviour.
+ */
+function elayne_editor_svg_styles(): void {
+	wp_add_inline_style(
+		'wp-edit-blocks',
+		'.editor-styles-wrapper .wp-block-image img[src$=".svg"] { width: 100%; }'
+	);
+}
+add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\\elayne_editor_svg_styles' );
+
 /**
  * Filter the post excerpt block output to add link functionality.
  *

patterns/agency-services-showcase.php

@@ -12,8 +12,8 @@
  * Grid Config: 18rem (simple cards: icon + heading + description)
  */
 ?>
-<!-- wp:group {"metadata":{"name":"Agency Services Showcase"},"align":"full","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|xx-large","bottom":"var:preset|spacing|xx-large","right":"var:preset|spacing|medium","left":"var:preset|spacing|medium"},"blockGap":"var:preset|spacing|x-large"}},"layout":{"inherit":true,"type":"constrained"}} -->
-<div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--xx-large);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--xx-large);padding-left:var(--wp--preset--spacing--medium)"><!-- wp:group {"metadata":{"name":"Header"},"style":{"spacing":{"blockGap":"var:preset|spacing|small"}}} -->
+<!-- wp:group {"metadata":{"name":"Agency Services Showcase"},"align":"full","backgroundColor":"tertiary","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|xx-large","bottom":"var:preset|spacing|xx-large","right":"var:preset|spacing|medium","left":"var:preset|spacing|medium"},"blockGap":"var:preset|spacing|x-large"}},"layout":{"inherit":true,"type":"constrained"}} -->
+<div class="wp-block-group alignfull has-tertiary-background-color has-background" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--xx-large);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--xx-large);padding-left:var(--wp--preset--spacing--medium)"><!-- wp:group {"metadata":{"name":"Header"},"style":{"spacing":{"blockGap":"var:preset|spacing|small"}}} -->
 <div class="wp-block-group"><!-- wp:paragraph {"align":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"500"}},"textColor":"primary","fontSize":"small"} -->
 <p class="has-text-align-center has-primary-color has-text-color has-small-font-size" style="font-style:normal;font-weight:500"><?php esc_html_e( 'Our Expertise', 'elayne' ); ?></p>
 <!-- /wp:paragraph -->
@@ -29,8 +29,8 @@
 
 <!-- wp:group {"metadata":{"name":"Services Grid"},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|large"}},"layout":{"type":"grid","minimumColumnWidth":"18rem"}} -->
 <div class="wp-block-group alignwide">
-	<!-- wp:group {"metadata":{"name":"Web Design"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}},"border":{"radius":"8px"}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
-	<div class="wp-block-group has-base-background-color has-background" style="border-radius:8px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
+	<!-- wp:group {"metadata":{"name":"Web Design"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}},"border":{"radius":"8px","color":"var(--wp--preset--color--border-light)","width":"1px"}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
+	<div class="wp-block-group has-base-background-color has-background has-border-color" style="border-color:var(--wp--preset--color--border-light);border-width:1px;border-radius:8px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
 		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"constrained"}} -->
 		<div class="wp-block-group">
 			<!-- wp:image {"width":"48px","sizeSlug":"full","linkDestination":"none"} -->
@@ -49,8 +49,8 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:group {"metadata":{"name":"Digital Marketing"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}},"border":{"radius":"8px"}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
-	<div class="wp-block-group has-base-background-color has-background" style="border-radius:8px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
+	<!-- wp:group {"metadata":{"name":"Digital Marketing"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}},"border":{"radius":"8px","color":"var(--wp--preset--color--border-light)","width":"1px"}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
+	<div class="wp-block-group has-base-background-color has-background has-border-color" style="border-color:var(--wp--preset--color--border-light);border-width:1px;border-radius:8px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
 		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"constrained"}} -->
 		<div class="wp-block-group">
 			<!-- wp:image {"width":"48px","sizeSlug":"full","linkDestination":"none"} -->
@@ -69,8 +69,8 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:group {"metadata":{"name":"Brand Strategy"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}},"border":{"radius":"8px"}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
-	<div class="wp-block-group has-base-background-color has-background" style="border-radius:8px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
+	<!-- wp:group {"metadata":{"name":"Brand Strategy"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}},"border":{"radius":"8px","color":"var(--wp--preset--color--border-light)","width":"1px"}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
+	<div class="wp-block-group has-base-background-color has-background has-border-color" style="border-color:var(--wp--preset--color--border-light);border-width:1px;border-radius:8px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
 		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"constrained"}} -->
 		<div class="wp-block-group">
 			<!-- wp:image {"width":"48px","sizeSlug":"full","linkDestination":"none"} -->
@@ -89,8 +89,8 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:group {"metadata":{"name":"E-commerce"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}},"border":{"radius":"8px"}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
-	<div class="wp-block-group has-base-background-color has-background" style="border-radius:8px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
+	<!-- wp:group {"metadata":{"name":"E-commerce"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}},"border":{"radius":"8px","color":"var(--wp--preset--color--border-light)","width":"1px"}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
+	<div class="wp-block-group has-base-background-color has-background has-border-color" style="border-color:var(--wp--preset--color--border-light);border-width:1px;border-radius:8px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
 		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"constrained"}} -->
 		<div class="wp-block-group">
 			<!-- wp:image {"width":"48px","sizeSlug":"full","linkDestination":"none"} -->

patterns/hero-modern-light.php

@@ -9,8 +9,8 @@
  */
 ?>
 
-<!-- wp:group {"align":"full","backgroundColor":"base","style":{"spacing":{"padding":{"top":"var:preset|spacing|xxx-large","bottom":"var:preset|spacing|xxx-large","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"},"margin":{"top":"0","bottom":"0"},"blockGap":"var:preset|spacing|x-large"}},"layout":{"type":"default"}} -->
-<div class="wp-block-group alignfull has-base-background-color has-background" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--xxx-large);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--xxx-large);padding-left:var(--wp--preset--spacing--medium)">
+<!-- wp:group {"align":"full","backgroundColor":"base","style":{"spacing":{"padding":{"top":"var:preset|spacing|xx-large","bottom":"var:preset|spacing|xx-large","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"},"margin":{"top":"0","bottom":"0"},"blockGap":"var:preset|spacing|x-large"}},"layout":{"type":"default"}} -->
+<div class="wp-block-group alignfull has-base-background-color has-background" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--xx-large);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--xx-large);padding-left:var(--wp--preset--spacing--medium)">
 	<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"constrained","contentSize":"800px"}} -->
 	<div class="wp-block-group">
 		<!-- wp:heading {"textAlign":"center","level":1,"style":{"typography":{"fontSize":"clamp(2.75rem, 6vw, 4.5rem)","fontWeight":"800","lineHeight":"1.1","letterSpacing":"-0.02em"}},"textColor":"main"} -->
@@ -38,7 +38,7 @@
 	<!-- wp:group {"layout":{"type":"constrained","contentSize":"1200px"}} -->
 	<div class="wp-block-group">
 		<!-- wp:image {"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":"12px"}}} -->
-		<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url(get_template_directory_uri() . '/patterns/images/desktop.webp'); ?>" alt="<?php echo esc_attr__( 'Dashboard preview', 'elayne' ); ?>" style="border-radius:12px"/></figure>
+		<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url(get_template_directory_uri() . '/patterns/images/elayne_hero_landscape.svg'); ?>" alt="<?php echo esc_attr__( 'Mountain landscape at sunrise with pine trees and reflective lake', 'elayne' ); ?>" style="border-radius:12px"/></figure>
 		<!-- /wp:image -->
 	</div>
 	<!-- /wp:group -->