Merge pull request #23 from Codeinwp/experiment/content-replace

experiment: content replace hooks
Codeinwp · Feb 1, 2024 · 5d00669 · 5d00669
2 parents e1672d9 + 157279f
commit 5d00669
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 66 deletions.
diff --git a/patterns/call-to-action-1.php b/patterns/call-to-action-1.php
@@ -17,11 +17,11 @@
 	<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"default"}} -->
 	<div class="wp-block-group alignwide">
 		<!-- wp:heading {"textAlign":"left","fontSize":"xx-large"} -->
-		<h2 class="wp-block-heading has-text-align-left has-xx-large-font-size"><?php echo esc_html( $quickwp_strings['quickwp_cta_title'] ); ?></h2>
+		<h2 class="wp-block-heading has-text-align-left has-xx-large-font-size"><?php echo esc_html( apply_filters( 'quickwp/call-to-action-1/title', $quickwp_strings['quickwp_cta_title'] ) ); ?></h2>
 		<!-- /wp:heading -->
 
 		<!-- wp:paragraph {"align":"left","fontSize":"large"} -->
-		<p class="has-text-align-left has-large-font-size"><?php echo esc_html( $quickwp_strings['feature_description'] ); ?></p>
+		<p class="has-text-align-left has-large-font-size"><?php echo esc_html( apply_filters( 'quickwp/call-to-action-1/subtitle', $quickwp_strings['feature_description'] ) ); ?></p>
 		<!-- /wp:paragraph -->
 	</div>
 	<!-- /wp:group -->
@@ -30,7 +30,7 @@
 	<div class="wp-block-buttons alignwide">
 		<!-- wp:button {"backgroundColor":"base-3","style":{"spacing":{"padding":{"left":"var:preset|spacing|60","right":"var:preset|spacing|60","top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"className":"is-style-fill","fontSize":"large"} -->
 		<div class="wp-block-button has-custom-font-size is-style-fill has-large-font-size">
-			<a class="wp-block-button__link has-base-3-background-color has-background wp-element-button" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--60)"><?php echo esc_html( $quickwp_strings['button_text_2'] ); ?></a>
+			<a class="wp-block-button__link has-base-3-background-color has-background wp-element-button" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--60)"><?php echo esc_html( apply_filters( 'quickwp/call-to-action-1/button', $quickwp_strings['button_text_2'] ) ); ?></a>
 		</div>
 		<!-- /wp:button -->
 	</div>

diff --git a/patterns/content-columns.php b/patterns/content-columns.php
@@ -8,7 +8,7 @@
 $quickwp_strings = apply_filters( 'quickwp_strings', array() );
 
 $images = array(
-	QUICKWP_URL . 'assets/images/qwp-img-03.webp',
+	apply_filters( 'quickwp/content-columns/image', QUICKWP_URL . 'assets/images/qwp-img-03.webp' ),
 );
 ?>
 
@@ -21,31 +21,31 @@
 			<!-- wp:column -->
 			<div class="wp-block-column">
 				<!-- wp:heading {"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","textTransform":"uppercase"}},"fontSize":"small"} -->
-				<h3 class="wp-block-heading has-small-font-size" style="font-style:normal;font-weight:600;text-transform:uppercase"><?php echo esc_html( $quickwp_strings['content_subtitle'] ); ?></h3>
+				<h3 class="wp-block-heading has-small-font-size" style="font-style:normal;font-weight:600;text-transform:uppercase"><?php echo esc_html( apply_filters( 'quickwp/content-columns/subtitle', $quickwp_strings['content_subtitle'] ) ); ?></h3>
 				<!-- /wp:heading -->
 
 				<!-- wp:heading -->
-				<h2 class="wp-block-heading"><?php echo esc_html( $quickwp_strings['content_title'] ); ?></h2>
+				<h2 class="wp-block-heading"><?php echo esc_html( apply_filters( 'quickwp/content-columns/title', $quickwp_strings['content_title'] ) ); ?></h2>
 				<!-- /wp:heading -->
 
 				<!-- wp:paragraph -->
-				<p><?php echo esc_html( $quickwp_strings['paragraph_text'] ); ?></p>
+				<p><?php echo esc_html( apply_filters( 'quickwp/content-columns/paragraph-1', $quickwp_strings['paragraph_text'] ) ); ?></p>
 				<!-- /wp:paragraph -->
 
 				<!-- wp:paragraph {"fontSize":"large"} -->
-				<p class="has-large-font-size"><?php echo esc_html( $quickwp_strings['feature_description'] ); ?></p>
+				<p class="has-large-font-size"><?php echo esc_html( apply_filters( 'quickwp/content-columns/paragraph-2', $quickwp_strings['feature_description'] ) ); ?></p>
 				<!-- /wp:paragraph -->
 
 				<!-- wp:paragraph -->
-				<p><?php echo esc_html( $quickwp_strings['paragraph_text'] ); ?></p>
+				<p><?php echo esc_html( apply_filters( 'quickwp/content-columns/paragraph-3', $quickwp_strings['paragraph_text'] ) ); ?></p>
 				<!-- /wp:paragraph -->
 			</div>
 			<!-- /wp:column -->
 
 			<!-- wp:column {"verticalAlignment":"top"} -->
 			<div class="wp-block-column is-vertically-aligned-top">
 				<!-- wp:paragraph {"fontSize":"large"} -->
-				<p class="has-large-font-size"><?php echo esc_html( $quickwp_strings['paragraph_text'] ); ?></p>
+				<p class="has-large-font-size"><?php echo esc_html( apply_filters( 'quickwp/content-columns/paragraph-4', $quickwp_strings['paragraph_text'] ) ); ?></p>
 				<!-- /wp:paragraph -->
 
 				<!-- wp:image {"id":234,"sizeSlug":"full","linkDestination":"none"} -->

diff --git a/patterns/feature-columns.php b/patterns/feature-columns.php
@@ -8,20 +8,20 @@
 $quickwp_strings = apply_filters( 'quickwp_strings', array() );
 
 $images = array(
-	QUICKWP_URL . 'assets/images/qwp-img-08.webp',
-	QUICKWP_URL . 'assets/images/qwp-img-06.webp',
-	QUICKWP_URL . 'assets/images/qwp-img-09.webp',
+	apply_filters( 'quickwp/feature-columns/item-1/image', QUICKWP_URL . 'assets/images/qwp-img-08.webp' ),
+	apply_filters( 'quickwp/feature-columns/item-2/image', QUICKWP_URL . 'assets/images/qwp-img-06.webp' ),
+	apply_filters( 'quickwp/feature-columns/item-3/image', QUICKWP_URL . 'assets/images/qwp-img-09.webp' ),
 );
 ?>
 
 <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"var:preset|spacing|40","right":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|40","margin":{"top":"0","bottom":"0"}}},"backgroundColor":"base-2","layout":{"type":"constrained"},"metadata":{}} -->
 <div class="wp-block-group alignfull has-base-2-background-color has-background" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--40)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained"},"metadata":{"name":"section title"}} -->
 <div class="wp-block-group"><!-- wp:heading {"textAlign":"center","fontSize":"x-large"} -->
-<h2 class="wp-block-heading has-text-align-center has-x-large-font-size"><?php echo esc_html( $quickwp_strings['feature_section_title'] ); ?></h2>
+<h2 class="wp-block-heading has-text-align-center has-x-large-font-size"><?php echo esc_html( apply_filters( 'quickwp/feature-columns/title', $quickwp_strings['feature_section_title'] ) ); ?></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-2"}}}},"textColor":"contrast-2","fontSize":"large"} -->
-<p class="has-text-align-center has-contrast-2-color has-text-color has-link-color has-large-font-size"><?php echo esc_html( $quickwp_strings['feature_description'] ); ?></p>
+<p class="has-text-align-center has-contrast-2-color has-text-color has-link-color has-large-font-size"><?php echo esc_html( apply_filters( 'quickwp/feature-columns/subtitle', $quickwp_strings['feature_description'] ) ); ?></p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->
 
@@ -35,17 +35,17 @@
 <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|30"}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
 <div class="wp-block-group has-base-background-color has-background" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:heading {"level":3} -->
-<h3 class="wp-block-heading"><?php echo esc_html( $quickwp_strings['feature_title'] ); ?></h3>
+<h3 class="wp-block-heading"><?php echo esc_html( apply_filters( 'quickwp/feature-columns/item-1/title', $quickwp_strings['feature_title'] ) ); ?></h3>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p><?php echo esc_html( $quickwp_strings['feature_description'] ); ?></p>
+<p><?php echo esc_html( apply_filters( 'quickwp/feature-columns/item-1/description', $quickwp_strings['feature_description'] ) ); ?></p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->
 
 <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
 <div class="wp-block-buttons"><!-- wp:button -->
-<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"><?php echo esc_html( $quickwp_strings['button_text'] ); ?></a></div>
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"><?php echo esc_html( apply_filters( 'quickwp/feature-columns/item-1/button', $quickwp_strings['button_text'] ) ); ?></a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons --></div>
 <!-- /wp:group --></div>
@@ -61,17 +61,17 @@
 <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|30"}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
 <div class="wp-block-group has-base-background-color has-background" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:heading {"level":3} -->
-<h3 class="wp-block-heading"><?php echo esc_html( $quickwp_strings['feature_title'] ); ?></h3>
+<h3 class="wp-block-heading"><?php echo esc_html( apply_filters( 'quickwp/feature-columns/item-2/title', $quickwp_strings['feature_title'] ) ); ?></h3>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p><?php echo esc_html( $quickwp_strings['feature_description'] ); ?></p>
+<p><?php echo esc_html( apply_filters( 'quickwp/feature-columns/item-2/description', $quickwp_strings['feature_description'] ) ); ?></p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->
 
 <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
 <div class="wp-block-buttons"><!-- wp:button -->
-<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"><?php echo esc_html( $quickwp_strings['button_text'] ); ?></a></div>
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"><?php echo esc_html( apply_filters( 'quickwp/feature-columns/item-2/button', $quickwp_strings['button_text'] ) ); ?></a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons --></div>
 <!-- /wp:group --></div>
@@ -87,17 +87,17 @@
 <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|30"}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
 <div class="wp-block-group has-base-background-color has-background" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:heading {"level":3} -->
-<h3 class="wp-block-heading"><?php echo esc_html( $quickwp_strings['feature_title'] ); ?></h3>
+<h3 class="wp-block-heading"><?php echo esc_html( apply_filters( 'quickwp/feature-columns/item-3/title', $quickwp_strings['feature_title'] ) ); ?></h3>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p><?php echo esc_html( $quickwp_strings['feature_description'] ); ?></p>
+<p><?php echo esc_html( apply_filters( 'quickwp/feature-columns/item-3/description', $quickwp_strings['feature_description'] ) ); ?></p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->
 
 <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
 <div class="wp-block-buttons"><!-- wp:button -->
-<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"><?php echo esc_html( $quickwp_strings['button_text'] ); ?></a></div>
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"><?php echo esc_html( apply_filters( 'quickwp/feature-columns/item-3/button', $quickwp_strings['button_text'] ) ); ?></a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons --></div>
 <!-- /wp:group --></div>

diff --git a/patterns/hero-centered.php b/patterns/hero-centered.php
@@ -8,7 +8,7 @@
 $quickwp_strings = apply_filters( 'quickwp_strings', array() );
 
 $images = array(
-	QUICKWP_URL . 'assets/images/qwp-img-09.webp',
+	apply_filters( 'quickwp/hero-centered/image', QUICKWP_URL . 'assets/images/qwp-img-09.webp' ),
 );
 ?>
 
@@ -17,21 +17,21 @@
 	<!-- wp:group {"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group">
 		<!-- wp:heading {"textAlign":"center","level":1,"align":"wide","fontSize":"xx-large"} -->
-		<h1 class="wp-block-heading alignwide has-text-align-center has-xx-large-font-size"><?php echo esc_html( $quickwp_strings['hero_title'] ); ?></h1>
+		<h1 class="wp-block-heading alignwide has-text-align-center has-xx-large-font-size"><?php echo esc_html( apply_filters( 'quickwp/hero-centered/title', $quickwp_strings['hero_title'] ) ); ?></h1>
 		<!-- /wp:heading -->
 
 		<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-2"}}}},"textColor":"contrast-2","fontSize":"large"} -->
-		<p class="has-text-align-center has-contrast-2-color has-text-color has-link-color has-large-font-size"><?php echo esc_html( $quickwp_strings['section_description'] ); ?></p>
+		<p class="has-text-align-center has-contrast-2-color has-text-color has-link-color has-large-font-size"><?php echo esc_html( apply_filters( 'quickwp/hero-centered/subtitle', $quickwp_strings['section_description'] ) ); ?></p>
 		<!-- /wp:paragraph -->
 
 		<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
 		<div class="wp-block-buttons">
 			<!-- wp:button {"className":"is-style-fill"} -->
-			<div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button"><?php echo esc_html( $quickwp_strings['button_text_2'] ); ?></a></div>
+			<div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button"><?php echo esc_html( apply_filters( 'quickwp/hero-centered/button-primary', $quickwp_strings['button_text_2'] ) ); ?></a></div>
 			<!-- /wp:button -->
 
 			<!-- wp:button {"className":"is-style-outline"} -->
-			<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php echo esc_html( $quickwp_strings['button_text'] ); ?></a></div>
+			<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php echo esc_html( apply_filters( 'quickwp/hero-centered/button-secondary', $quickwp_strings['button_text'] ) ); ?></a></div>
 			<!-- /wp:button -->
 		</div>
 		<!-- /wp:buttons -->

diff --git a/phpcs.xml.dist b/phpcs.xml.dist
@@ -58,4 +58,9 @@
 	<rule ref="WordPress.Files.FileName">
 		<exclude-pattern>*</exclude-pattern>
 	</rule>
+
+	<!-- We're using slashed hook names. -->
+	<rule ref="WordPress.NamingConventions.ValidHookName.UseUnderscores">
+		<exclude-pattern>*</exclude-pattern>
+	</rule>
 </ruleset>
diff --git a/styles/Quick.json b/styles/Quick.json
@@ -38,19 +38,49 @@
 			],
 			"palette": [
 				{
-					"color": "#F3F0E7",
-					"name": "Base",
-					"slug": "base"
+					"slug": "base",
+					"name": "Background",
+					"color": "#ffffff"
 				},
 				{
-					"color": "#ECEADF",
-					"name": "Base / 2",
-					"slug": "base-2"
+					"slug": "base-2",
+					"name": "Light Background",
+					"color": "#f7f7f3"
 				},
 				{
-					"color": "#A62B0C",
-					"name": "Contrast",
-					"slug": "contrast"
+					"slug": "base-3",
+					"name": "Dark Background",
+					"color": "#1A1919"
+				},
+				{
+					"slug": "contrast",
+					"name": "Text",
+					"color": "#0C0C0C"
+				},
+				{
+					"slug": "contrast-2",
+					"name": "Secondary text",
+					"color": "rgba(0,0,0, 0.5)"
+				},
+				{
+					"slug": "contrast-3",
+					"name": "Border",
+					"color": "rgba(0,0,0, 0.5)"
+				},
+				{
+					"slug": "contrast-4",
+					"name": "Text on dark",
+					"color": "#F8F8F8"
+				},
+				{
+					"slug": "accent",
+					"name": "Accent",
+					"color": "#325CE8"
+				},
+				{
+					"slug": "accent-2",
+					"name": "Accent 2",
+					"color": "#466DEC"
 				}
 			]
 		}

diff --git a/theme.json b/theme.json
@@ -43,54 +43,50 @@
 			],
 			"palette": [
 				{
-					"color": "#ffffff",
+					"slug": "base",
 					"name": "Background",
-					"slug": "base"
+					"color": "#ffffff"
 				},
-					{
-					"color": "#f7f7f3",
-					"name": "Light background",
-					"slug": "base-2"
+				{
+					"slug": "base-2",
+					"name": "Light Background",
+					"color": "#f7f7f3"
 				},
-					{
-					"color": "#1A1919",
-					"name": "Dark background",
-					"slug": "base-3"
+				{
+					"slug": "base-3",
+					"name": "Dark Background",
+					"color": "#1A1919"
 				},
 				{
-					"color": "#0C0C0C",
+					"slug": "contrast",
 					"name": "Text",
-					"slug": "contrast"
+					"color": "#0C0C0C"
 				},
 				{
-					"color": "#808080",
-					"name": "Secondary Text",
-					"slug": "contrast-2"
+					"slug": "contrast-2",
+					"name": "Secondary text",
+					"color": "rgba(0,0,0, 0.5)"
 				},
-					{
-					"color": "#DADADA",
+				{
+					"slug": "contrast-3",
 					"name": "Border",
-					"slug": "contrast-3"
+					"color": "rgba(0,0,0, 0.5)"
 				},
-
 				{
-					"color": "#F8F8F8",
+					"slug": "contrast-4",
 					"name": "Text on dark",
-					"slug": "contrast-4"
+					"color": "#F8F8F8"
 				},
-
-
 				{
-					"color": "#325CE8",
+					"slug": "accent",
 					"name": "Accent",
-					"slug": "accent"
+					"color": "#325CE8"
 				},
 				{
-					"color": "#466DEC",
+					"slug": "accent-2",
 					"name": "Accent 2",
-					"slug": "accent-2"
+					"color": "#466DEC"
 				}
-
 			]
 		},
 		"layout": {