Parcourir la source

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 <jonger4@gmail.com>

* restore CSS  for backward compatibility

* updating missing separator

* Fix block markup.

* Fix block validation error

* Rebuild CSS

Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Sarah Norris <sarah@sekai.co.uk>
Matias Benedetto il y a 3 ans
Parent
commit
19cee32837

+ 4 - 5
skatepark/assets/theme.css

@@ -11,15 +11,14 @@ body:not(.has-featured-image) h1.wp-block-post-title {
 }
 
 /* Separator width */
+/* This can be removed when this issue gets fixed: https://github.com/WordPress/gutenberg/issues/40624 */
 .wp-block-separator {
-  /* https://github.com/WordPress/gutenberg/pull/38428 */
   opacity: 1;
 }
-.wp-block-separator.is-style-wide {
-  /* We can remove after https://github.com/WordPress/gutenberg/pull/38635 gets deployed */
-  border-width: 0 0 3px 0;
+.wp-block-separator.has-background:not(.is-style-dots) {
+  height: 3px;
 }
-.wp-block-separator.has-background {
+.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
   height: 3px;
 }
 

+ 1 - 1
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 -->

+ 10 - 8
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 -->

+ 3 - 2
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 -->
 

+ 3 - 2
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"} -->

+ 1 - 1
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} /-->

+ 3 - 3
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 -->
 

+ 1 - 1
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"} -->

+ 3 - 2
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"}}} -->

+ 3 - 2
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"}}}} -->

+ 10 - 10
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;
+		}
 	}
 }
 

+ 1 - 3
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"
 				}
 			},