Skatepark: update separator block (#5940)

* removing unneeded definitions from theme.json * fixing the heigth of the separator block * update the separators included in templates * fix typo Co-authored-by: Jeff Ong <[email protected]> * restore CSS for backward compatibility * updating missing separator * Fix block markup. * Fix block validation error * Rebuild CSS Co-authored-by: Jeff Ong <[email protected]> Co-authored-by: Sarah Norris <[email protected]>
Automattic · May 9, 2022 · 19cee32 · 19cee32
1 parent 7ce3942
commit 19cee32
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 40 deletions.
diff --git a/skatepark/assets/theme.css b/skatepark/assets/theme.css
diff --git a/skatepark/block-templates/search.html b/skatepark/block-templates/search.html
@@ -15,7 +15,7 @@
 		<!-- wp:post-title {"level":3,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"800"},"spacing":{"margin":{"top":"1em"}}},"fontSize":"x-large"} /-->
 		<!-- wp:post-excerpt {"style":{"spacing":{"padding":{"bottom":"2em"}}}} /-->
 		<!-- wp:separator {"className":"is-style-wide"} -->
-			<hr class="wp-block-separator is-style-wide"/>
+		<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
 		<!-- /wp:separator -->
 
 	<!-- /wp:post-template -->

diff --git a/skatepark/block-templates/single.html b/skatepark/block-templates/single.html
@@ -18,8 +18,9 @@
 <div class="wp-block-group" style="padding-top:5em;padding-bottom:5em">
 <!-- wp:columns {"align":"wide"} -->
 <div class="wp-block-columns alignwide"><!-- wp:column {"width":"58%"} -->
-	<div class="wp-block-column" style="flex-basis:58%"><!-- wp:separator {"className":"is-style-wide"} -->
-	<hr class="wp-block-separator is-style-wide"/>
+	<div class="wp-block-column" style="flex-basis:58%">
+	<!-- wp:separator {"className":"is-style-wide"} -->
+	<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
 	<!-- /wp:separator -->
 	<!-- wp:post-author {"showAvatar":false,"showBio":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"small"} /-->
 
@@ -28,8 +29,9 @@
 	<!-- /wp:column -->
 
 	<!-- wp:column -->
-	<div class="wp-block-column"><!-- wp:separator {"className":"is-style-wide"} -->
-	<hr class="wp-block-separator is-style-wide"/>
+	<div class="wp-block-column">
+	<!-- wp:separator {"className":"is-style-wide"} -->
+	<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
 	<!-- /wp:separator -->
 	<!-- wp:group {"className":"post-meta"} -->
 	<div class="wp-block-group post-meta">
@@ -53,8 +55,8 @@
 <!-- wp:group {"style":{"spacing":{"padding":{"top":"3em","bottom":"3em"}}},"layout":{"inherit":true}} -->
 <div class="wp-block-group" style="padding-top:3em;padding-bottom:3em">
 
-	<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
-	<hr class="wp-block-separator alignwide is-style-wide"/>
+	<!-- wp:separator {"className":"is-style-wide"} -->
+	<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
 	<!-- /wp:separator -->
 
 	<!-- wp:columns {"align":"wide","className":"next-prev-links"} -->
@@ -72,8 +74,8 @@
 	</div>
 	<!-- /wp:columns -->
 
-	<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
-	<hr class="wp-block-separator alignwide is-style-wide"/>
+	<!-- wp:separator {"className":"is-style-wide"} -->
+	<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
 	<!-- /wp:separator -->
 </div>
 <!-- /wp:group -->

diff --git a/skatepark/patterns/blog-posts.php b/skatepark/patterns/blog-posts.php
@@ -11,8 +11,9 @@
 <!-- wp:group {"style":{"spacing":{"padding":{"top":"30px"}}},"layout":{"inherit":false}} -->
 <div class="wp-block-group" style="padding-top:30px">
 <!-- wp:group {"style":{"spacing":{"padding":{"bottom":"var( --wp--style--block-gap )"}}}} -->
-<div class="wp-block-group" style="padding-bottom:var( --wp--style--block-gap )"><!-- wp:separator {"className":"is-style-wide"} -->
-<hr class="wp-block-separator is-style-wide"/>
+<div class="wp-block-group" style="padding-bottom:var( --wp--style--block-gap )">
+<!-- wp:separator {"className":"is-style-wide"} -->
+<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
 <!-- /wp:separator --></div>
 <!-- /wp:group -->
 

diff --git a/skatepark/patterns/full-width-image-with-aside-caption.php b/skatepark/patterns/full-width-image-with-aside-caption.php
@@ -15,8 +15,9 @@
 <!-- /wp:column -->
 
 <!-- wp:column {"width":"40%"} -->
-<div class="wp-block-column" style="flex-basis:40%"><!-- wp:separator {"className":"is-style-wide"} -->
-<hr class="wp-block-separator is-style-wide"/>
+<div class="wp-block-column" style="flex-basis:40%">
+<!-- wp:separator {"className":"is-style-wide"} -->
+<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
 <!-- /wp:separator -->
 
 <!-- wp:paragraph {"fontSize":"small"} -->

diff --git a/skatepark/patterns/hidden-home-patterns.php b/skatepark/patterns/hidden-home-patterns.php
@@ -24,7 +24,7 @@
 <div class="wp-block-group" style="padding-top:30px">
 
 <!-- wp:separator {"className":"is-style-wide"} -->
-<hr class="wp-block-separator is-style-wide"/>
+<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
 <!-- /wp:separator -->
 
 <!-- wp:post-featured-image {"style":{"spacing":{"margin":{"top":"calc(2 * var( --wp--style--block-gap ))"}}},"isLink":true} /-->

diff --git a/skatepark/patterns/mixed-media-in-container.php b/skatepark/patterns/mixed-media-in-container.php
@@ -67,8 +67,8 @@
 
 <!-- wp:columns {"align":"wide"} -->
 <div class="wp-block-columns alignwide"><!-- wp:column -->
-<div class="wp-block-column"><!-- wp:separator {"color":"primary","className":"is-style-wide"} -->
-<hr class="wp-block-separator has-text-color has-background has-primary-background-color has-primary-color is-style-wide"/>
+<div class="wp-block-column"><!-- wp:separator {"className":"is-style-wide"} -->
+<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
 <!-- /wp:separator --></div>
 <!-- /wp:column -->
 
@@ -78,7 +78,7 @@
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
-<p><?php echo esc_html( 'Work 1:1 with our team of coaches to learn how to skate. They’ll be your mentors and guides while you’re at camp. Plus, many of our older campers will mentor the younger skaters.', 'skatepark' ); ?></p>
+<p><?php echo esc_html( 'Work 1:1 with our team of coaches to learn how to skate. They\'ll be your mentors and guides while you\'re at camp. Plus, many of our older campers will mentor the younger skaters.', 'skatepark' ); ?></p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:column -->
 

diff --git a/skatepark/patterns/paragraph-with-quote.php b/skatepark/patterns/paragraph-with-quote.php
@@ -29,7 +29,7 @@
 <div class="wp-block-column" style="padding-top:4.1em;flex-basis:22%">
 
 <!-- wp:separator {"className":"is-style-wide"} -->
-<hr class="wp-block-separator is-style-wide"/>
+<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
 <!-- /wp:separator -->
 
 <!-- wp:paragraph {"style":{"typography":{"lineHeight":1.4}},"fontSize":"medium"} -->

diff --git a/skatepark/patterns/testimonial.php b/skatepark/patterns/testimonial.php
@@ -9,8 +9,9 @@
 <!-- wp:columns {"align":"wide"} -->
 <div class="wp-block-columns alignwide"><!-- wp:column {"width":"25%","style":{"spacing":{"padding":{"top":"3em","right":"2em"}}}} -->
 
-<div class="wp-block-column" style="padding-top:3em;padding-right:2em;flex-basis:25%"><!-- wp:separator {"className":"is-style-wide"} -->
-<hr class="wp-block-separator is-style-wide"/>
+<div class="wp-block-column" style="padding-top:3em;padding-right:2em;flex-basis:25%">
+<!-- wp:separator {"className":"is-style-wide"} -->
+<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
 <!-- /wp:separator -->
 
 <!-- wp:paragraph {"align":"right","style":{"typography":{"fontStyle":"normal","fontWeight":"500"}}} -->

diff --git a/skatepark/patterns/text-list-with-button.php b/skatepark/patterns/text-list-with-button.php
@@ -11,8 +11,9 @@
 <div class="wp-block-column" style="flex-basis:75%">
 <!-- wp:group {"layout":{"type":"flex","allowOrientation":false}} -->
 <div class="wp-block-group"><!-- wp:group -->
-<div class="wp-block-group"><!-- wp:separator {"className":"is-style-wide"} -->
-<hr class="wp-block-separator is-style-wide"/>
+<div class="wp-block-group">
+<!-- wp:separator {"className":"is-style-wide"} -->
+<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
 <!-- /wp:separator -->
 
 <!-- wp:heading {"level":4,"style":{"spacing":{"margin":{"top":"1em"}}}} -->

diff --git a/skatepark/sass/theme.scss b/skatepark/sass/theme.scss
@@ -16,19 +16,19 @@ h1.wp-block-post-title {
 }
 
 /* Separator width */
-.wp-block-separator {
-
-	/* https://github.com/WordPress/gutenberg/pull/38428 */
-	opacity: 1;
 
-	&.is-style-wide {
+/* This can be removed when this issue gets fixed: https://github.com/WordPress/gutenberg/issues/40624 */
+.wp-block-separator {
+	opacity: 1; // opacity for backwars compatibility of separators added using block patterns before new separator implementation
+	&.has-background {
 
-		/* We can remove after https://github.com/WordPress/gutenberg/pull/38635 gets deployed */
-		border-width: 0 0 3px 0;
-	}
+		&:not(.is-style-dots) {
+			height: 3px;
+		}
 
-	&.has-background {
-		height: 3px;
+		&:not(.is-style-wide):not(.is-style-dots) {
+			height: 3px;
+		}
 	}
 }
 

diff --git a/skatepark/theme.json b/skatepark/theme.json
@@ -408,11 +408,9 @@
 			},
 			"core/separator": {
 				"color": {
-					"text": "var(--wp--custom--color--foreground)"
+					"background": "var(--wp--custom--color--foreground)"
 				},
 				"border": {
-					"color": "currentColor",
-					"style": "solid",
 					"width": "0 0 3px 0"
 				}
 			},