Patterns Patch V2

CHANGELOG.md

@@ -20,6 +20,68 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Additional pattern categories
 - Pattern preview in admin interface
 
+## [1.0.0-beta.10] - 2025-10-28
+
+### Fixed
+- **CRITICAL**: Fixed double horizontal padding issue introduced in beta.9
+  - Beta.9 added explicit horizontal padding to inner constrained groups
+  - This conflicted with WordPress's automatic `has-global-padding` class
+  - WordPress applies theme.json global padding automatically when `useRootPaddingAwareAlignments: true`
+  - Result: Content had double the intended horizontal padding (2x `var:preset|spacing|50`)
+  - **Solution**: Removed explicit horizontal padding from inner constrained groups
+  - WordPress now automatically applies correct padding via `has-global-padding` class
+  - Patterns now properly leverage WordPress's built-in root padding awareness system
+- **CRITICAL**: Fixed column width inconsistency across all patterns
+  - Columns blocks were receiving extra horizontal padding from theme CSS rule at app.css:691-694
+  - Theme rule `:where(.is-layout-constrained) > :not(.alignfull):not(.alignwide)` was adding padding to columns
+  - This made pattern columns appear narrower than custom blocks like CTA Columns
+  - **Solution**: Added `"align":"wide"` attribute to all columns blocks in all patterns
+  - Columns now use theme's `wideSize: 64rem` and are excluded from the extra padding rule
+  - All patterns now have consistent, proper column widths matching theme standards
+- **Fixed**: Hero Two-Tone heading color visibility issue
+  - Heading text defaulted to white color from theme's h1 CSS rule (app.css:96-102)
+  - "Hero" and "2.0" text were invisible against white background
+  - **Solution**: Added explicit `textColor:"main"` attribute to heading block
+  - Now displays proper two-tone effect: "Hero" (black) + "Section" (primary blue) + "2.0" (black)
+
+### Changed
+- **All patterns updated to remove duplicate horizontal padding:**
+  - contact/contact-info.php
+  - cta/cta-newsletter.php
+  - features/feature-grid.php
+  - hero/hero-with-cta.php
+  - hero/hero-two-tone.php
+  - pricing/pricing-table.php
+  - team/team-grid.php
+  - testimonials/testimonial-card.php
+- **All patterns with columns updated to use wide alignment:**
+  - contact/contact-info.php - columns now `align="wide"`
+  - cta/cta-newsletter.php - columns now `align="wide"`
+  - features/feature-grid.php - columns now `align="wide"`
+  - hero/hero-two-tone.php - columns now `align="wide"`
+  - pricing/pricing-table.php - columns now `align="wide"`
+  - team/team-grid.php - columns now `align="wide"`
+  - testimonials/testimonial-card.php - columns now `align="wide"`
+
+### Technical Details
+- Outer group: `align="full"` with vertical padding only (top/bottom)
+- Inner group: `layout:{"type":"constrained"}` with **NO explicit horizontal padding**
+- Columns blocks: `align="wide"` to prevent extra padding from theme CSS rules
+- WordPress automatically adds `has-global-padding` class to constrained layouts inside full-width blocks
+- Theme.json global styles (lines 6-10) define horizontal padding: `var(--wp--preset--spacing--50)`
+- Columns use theme's `wideSize: 64rem` for consistent width across all patterns
+- This approach follows WordPress core's `useRootPaddingAwareAlignments` standard
+- All 8 patterns pass WordPress Coding Standards (PHPCS) validation
+
+### Why Beta.9 Didn't Work
+- Beta.9 approach: Explicit `padding-left` and `padding-right` on inner group
+- Conflicted with automatic padding from `has-global-padding` class
+- Created double padding (theme padding + pattern padding)
+- Beta.10 removes explicit padding, relies on WordPress automatic system
+- Columns without `align="wide"` received extra padding from theme's constrained layout rules
+- Beta.10 adds wide alignment to columns for consistent width behavior
+- Cleaner, more maintainable, follows WordPress best practices
+
 ## [1.0.0-beta.9] - 2025-10-28
 
 ### Fixed

callandor.php

@@ -3,7 +3,7 @@
  * Plugin Name:       Callandor
  * Plugin URI:        https://github.com/imagewize/callandor
  * Description:       Pattern library for Sage 11 hybrid themes with Tailwind CSS support
- * Version:           1.0.0-beta.9
+ * Version:           1.0.0-beta.10
  * Requires at least: 6.6
  * Requires PHP:      8.2
  * Author:            Imagewize
@@ -24,7 +24,7 @@
 /**
  * Current plugin version.
  */
-define( 'CALLANDOR_VERSION', '1.0.0-beta.9' );
+define( 'CALLANDOR_VERSION', '1.0.0-beta.10' );
 define( 'CALLANDOR_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
 define( 'CALLANDOR_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
 define( 'CALLANDOR_PLUGIN_BASENAME', plugin_basename( __FILE__ ) );

patterns/contact/contact-info.php

@@ -15,8 +15,8 @@
 	'viewportWidth' => 1200,
 	'content'       => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"backgroundColor":"base","layout":{"type":"default"}} -->
 <div class="wp-block-group alignfull has-base-background-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
-	<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
-	<div class="wp-block-group" style="padding-left:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50)">
+	<!-- wp:group {"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
 		<!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|20"}}},"fontSize":"5xl"} -->
 		<h2 class="wp-block-heading has-text-align-center has-5-xl-font-size" style="margin-bottom:var(--wp--preset--spacing--20)">' . __( 'Get In Touch', 'callandor' ) . '</h2>
 		<!-- /wp:heading -->
@@ -25,8 +25,8 @@
 		<p class="has-text-align-center has-main-accent-color has-text-color has-xl-font-size" style="margin-bottom:var(--wp--preset--spacing--50)">' . __( 'We\'re here to help. Reach out and let\'s discuss how we can support your business goals.', 'callandor' ) . '</p>
 		<!-- /wp:paragraph -->
 
-		<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|40"}}}} -->
-		<div class="wp-block-columns">
+		<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|40"}}}} -->
+		<div class="wp-block-columns alignwide">
 		<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|40","bottom":"var:preset|spacing|50","left":"var:preset|spacing|40"}},"border":{"width":"1px","radius":"8px"}},"borderColor":"border-light","backgroundColor":"tertiary"} -->
 		<div class="wp-block-column has-border-color has-border-light-border-color has-tertiary-background-color has-background" style="border-width:1px;border-radius:8px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)">
 			<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}}},"textColor":"primary","fontSize":"3xl"} -->

patterns/cta/cta-newsletter.php

@@ -15,10 +15,10 @@
 	'viewportWidth' => 1200,
 	'content'       => '<!-- wp:group {"align":"full","backgroundColor":"primary-accent","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"default"}} -->
 <div class="wp-block-group alignfull has-primary-accent-background-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
-	<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
-	<div class="wp-block-group" style="padding-left:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50)">
-		<!-- wp:columns {"verticalAlignment":"center"} -->
-		<div class="wp-block-columns are-vertically-aligned-center">
+	<!-- wp:group {"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+		<!-- wp:columns {"align":"wide","verticalAlignment":"center"} -->
+		<div class="wp-block-columns alignwide are-vertically-aligned-center">
 		<!-- wp:column {"verticalAlignment":"center","width":"60%"} -->
 		<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:60%">
 			<!-- wp:heading {"level":2,"fontSize":"4xl"} -->

patterns/features/feature-grid.php

@@ -15,8 +15,8 @@
 	'viewportWidth' => 1200,
 	'content'       => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"backgroundColor":"tertiary","layout":{"type":"default"}} -->
 <div class="wp-block-group alignfull has-tertiary-background-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
-	<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
-	<div class="wp-block-group" style="padding-left:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50)">
+	<!-- wp:group {"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
 		<!-- wp:heading {"textAlign":"center","fontSize":"5xl"} -->
 		<h2 class="wp-block-heading has-text-align-center has-5-xl-font-size">' . __( 'Why Businesses Choose Us', 'callandor' ) . '</h2>
 		<!-- /wp:heading -->
@@ -25,8 +25,8 @@
 		<p class="has-text-align-center has-lg-font-size" style="margin-bottom:var(--wp--preset--spacing--50)">' . __( 'We deliver results that matter to your bottom line', 'callandor' ) . '</p>
 		<!-- /wp:paragraph -->
 
-		<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|40"}}}} -->
-		<div class="wp-block-columns">
+		<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|40"}}}} -->
+		<div class="wp-block-columns alignwide">
 		<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"backgroundColor":"base"} -->
 		<div class="wp-block-column has-base-background-color has-background" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">
 			<!-- wp:heading {"level":3,"textColor":"primary","fontSize":"3xl"} -->

patterns/hero/hero-two-tone.php

@@ -15,14 +15,14 @@
 	'viewportWidth' => 1200,
 	'content'       => '<!-- wp:group {"align":"full","backgroundColor":"base","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"default"}} -->
 <div class="wp-block-group alignfull has-base-background-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
-	<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
-	<div class="wp-block-group" style="padding-left:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50)">
-		<!-- wp:columns {"verticalAlignment":"center","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|50"}}}} -->
-		<div class="wp-block-columns are-vertically-aligned-center">
+	<!-- wp:group {"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+		<!-- wp:columns {"align":"wide","verticalAlignment":"center","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|50"}}}} -->
+		<div class="wp-block-columns alignwide are-vertically-aligned-center">
 		<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
 		<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%">
-			<!-- wp:heading {"level":1,"style":{"typography":{"fontSize":"4.5rem","lineHeight":"1.1"},"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}},"fontFamily":"open-sans"} -->
-			<h1 class="wp-block-heading has-open-sans-font-family" style="margin-bottom:var(--wp--preset--spacing--40);font-size:4.5rem;line-height:1.1">' . __( 'Hero ', 'callandor' ) . '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-primary-color">' . __( 'Section', 'callandor' ) . '</mark> ' . __( '2.0', 'callandor' ) . '</h1>
+			<!-- wp:heading {"level":1,"textColor":"main","style":{"typography":{"fontSize":"4.5rem","lineHeight":"1.1"},"spacing":{"margin":{"bottom":"var:preset|spacing|40"}},"elements":{"link":{"color":{"text":"var:preset|color|main"}}}},"fontFamily":"open-sans"} -->
+			<h1 class="wp-block-heading has-main-color has-text-color has-link-color has-open-sans-font-family" style="margin-bottom:var(--wp--preset--spacing--40);font-size:4.5rem;line-height:1.1">' . __( 'Hero ', 'callandor' ) . '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-primary-color">' . __( 'Section', 'callandor' ) . '</mark> ' . __( '2.0', 'callandor' ) . '</h1>
 			<!-- /wp:heading -->
 
 			<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50"}},"typography":{"fontSize":"1.125rem","lineHeight":"1.6"}},"textColor":"main-accent","fontFamily":"open-sans"} -->

patterns/hero/hero-with-cta.php

@@ -13,26 +13,26 @@
 	'categories'    => array( 'hero', 'cta' ),
 	'keywords'      => array( 'hero', 'call-to-action', 'landing', 'business', 'header' ),
 	'viewportWidth' => 1200,
-	'content'       => '<!-- wp:group {"align":"full","backgroundColor":"primary","textColor":"base","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"default"}} -->
-<div class="wp-block-group alignfull has-base-color has-primary-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
-	<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
-	<div class="wp-block-group" style="padding-left:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50)">
-		<!-- wp:heading {"textAlign":"center","level":1,"fontSize":"6xl"} -->
-		<h1 class="wp-block-heading has-text-align-center has-6-xl-font-size">' . __( 'Transform Your Business with Professional Solutions', 'callandor' ) . '</h1>
+	'content'       => '<!-- wp:group {"align":"full","backgroundColor":"base","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-group alignfull has-base-background-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
+	<!-- wp:group {"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+		<!-- wp:heading {"textAlign":"center","level":1,"textColor":"main","fontSize":"5xl","fontFamily":"open-sans"} -->
+		<h1 class="wp-block-heading has-text-align-center has-main-color has-text-color has-open-sans-font-family has-5-xl-font-size">' . __( 'Launch your idea with confidence', 'callandor' ) . '</h1>
 		<!-- /wp:heading -->
 
-		<!-- wp:paragraph {"align":"center","fontSize":"xl"} -->
-		<p class="has-text-align-center has-xl-font-size">' . __( 'Deliver measurable results and drive growth with our proven strategies designed for ambitious SME businesses', 'callandor' ) . '</p>
+		<!-- wp:paragraph {"align":"center","textColor":"main-accent","fontSize":"lg","fontFamily":"open-sans"} -->
+		<p class="has-text-align-center has-main-accent-color has-text-color has-open-sans-font-family has-lg-font-size">' . __( 'Build your product, attract users, and grow faster with our powerful tools designed for startups.', 'callandor' ) . '</p>
 		<!-- /wp:paragraph -->
 
 		<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}},"layout":{"type":"flex","justifyContent":"center"}} -->
 		<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--40)">
-		<!-- wp:button {"backgroundColor":"base","textColor":"primary","fontSize":"lg"} -->
-		<div class="wp-block-button has-custom-font-size has-lg-font-size"><a class="wp-block-button__link has-primary-color has-base-background-color has-text-color has-background wp-element-button">' . __( 'Get Started Today', 'callandor' ) . '</a></div>
+		<!-- wp:button {"backgroundColor":"main","textColor":"base","fontSize":"base"} -->
+		<div class="wp-block-button has-custom-font-size has-base-font-size"><a class="wp-block-button__link has-base-color has-main-background-color has-text-color has-background wp-element-button">' . __( 'Get Started', 'callandor' ) . '</a></div>
 		<!-- /wp:button -->
 
-		<!-- wp:button {"backgroundColor":"primary-dark","textColor":"base","fontSize":"lg"} -->
-		<div class="wp-block-button has-custom-font-size has-lg-font-size"><a class="wp-block-button__link has-base-color has-primary-dark-background-color has-text-color has-background wp-element-button">' . __( 'Learn More', 'callandor' ) . '</a></div>
+		<!-- wp:button {"backgroundColor":"base","textColor":"primary","style":{"border":{"width":"2px"}},"borderColor":"main","className":"is-style-outline","fontSize":"base"} -->
+		<div class="wp-block-button has-custom-font-size has-base-font-size is-style-outline"><a class="wp-block-button__link has-primary-color has-base-background-color has-text-color has-background has-border-color has-main-border-color wp-element-button" style="border-width:2px">' . __( 'Learn More', 'callandor' ) . '</a></div>
 		<!-- /wp:button -->
 		</div>
 		<!-- /wp:buttons -->

patterns/pricing/pricing-table.php

@@ -15,8 +15,8 @@
 	'viewportWidth' => 1200,
 	'content'       => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"backgroundColor":"tertiary","layout":{"type":"default"}} -->
 <div class="wp-block-group alignfull has-tertiary-background-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
-	<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
-	<div class="wp-block-group" style="padding-left:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50)">
+	<!-- wp:group {"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
 		<!-- wp:heading {"textAlign":"center","fontSize":"5xl"} -->
 		<h2 class="wp-block-heading has-text-align-center has-5-xl-font-size">' . __( 'Choose Your Plan', 'callandor' ) . '</h2>
 		<!-- /wp:heading -->
@@ -25,8 +25,8 @@
 		<p class="has-text-align-center has-lg-font-size" style="margin-bottom:var(--wp--preset--spacing--50)">' . __( 'Flexible packages designed to scale with your business', 'callandor' ) . '</p>
 		<!-- /wp:paragraph -->
 
-		<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|40"}}}} -->
-		<div class="wp-block-columns">
+		<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|40"}}}} -->
+		<div class="wp-block-columns alignwide">
 		<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}},"border":{"width":"1px"}},"borderColor":"border-light","backgroundColor":"base"} -->
 		<div class="wp-block-column has-border-color has-border-light-border-color has-base-background-color has-background" style="border-width:1px;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">
 			<!-- wp:heading {"textAlign":"center","level":3,"fontSize":"3xl"} -->