Blockbase: make post meta icons optional (#4891)

* move blockbase post meta icons to block styles

* refactored geologist, removed unneeded css coming from Quadrat

* added meta icons to russell

* seedlet, zoologist refactored like geologist

* refactored Quadrat

* more unnecesary css

* applied to Mayland

* removed CSS from videomaker

* built mayland

* refactored Skatepark

* correct icon and size for Skatepark

blockbase/assets/ponyfill.css

@@ -919,17 +919,17 @@ p.wp-block-site-tagline {
 	row-gap: var(--wp--custom--gap--baseline) !important;
 }
 
-.post-meta .wp-block-post-author,
-.post-meta .wp-block-post-date,
-.post-meta .taxonomy-post_tag,
-.post-meta .taxonomy-category {
+.is-style-post-author-icon,
+.is-style-post-date-icon,
+.is-style-post-category-icon,
+.is-style-post-tag-icon {
 	display: flex;
 }
 
-.post-meta .wp-block-post-author:before,
-.post-meta .wp-block-post-date:before,
-.post-meta .taxonomy-post_tag:before,
-.post-meta .taxonomy-category:before {
+.is-style-post-author-icon:before,
+.is-style-post-date-icon:before,
+.is-style-post-category-icon:before,
+.is-style-post-tag-icon:before {
 	align-self: center;
 	content: '';
 	display: inline-block;
@@ -943,22 +943,22 @@ p.wp-block-site-tagline {
 	background-color: currentColor;
 }
 
-.post-meta .wp-block-post-author:before {
+.is-style-post-author-icon:before {
 	-webkit-mask-image: url(svg/post-author.svg);
 	mask-image: url(svg/post-author.svg);
 }
 
-.post-meta .wp-block-post-date:before {
+.is-style-post-date-icon:before {
 	-webkit-mask-image: url(svg/post-date.svg);
 	mask-image: url(svg/post-date.svg);
 }
 
-.post-meta .taxonomy-category:before {
+.is-style-post-category-icon:before {
 	-webkit-mask-image: url(svg/post-category.svg);
 	mask-image: url(svg/post-category.svg);
 }
 
-.post-meta .taxonomy-post_tag:before {
+.is-style-post-tag-icon:before {
 	-webkit-mask-image: url(svg/post-tag.svg);
 	mask-image: url(svg/post-tag.svg);
 }

blockbase/block-template-parts/post-meta-icons.html

@@ -0,0 +1,8 @@
+<!-- wp:group {"className":"post-meta","layout":{"type":"flex"}} -->
+<div class="wp-block-group post-meta">
+    <!-- wp:post-author {"showAvatar":false,"showBio":false,"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}},"className":"is-style-post-author-icon"} /-->
+    <!-- wp:post-date {"isLink":true,"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}},"className":"is-style-post-date-icon"} /-->
+    <!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}},"className":"is-style-post-category-icon"} /-->
+    <!-- wp:post-terms {"term": "post_tag","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}},"className":"is-style-post-tag-icon"} /-->
+</div>
+<!-- /wp:group -->

blockbase/block-templates/single.html

@@ -12,7 +12,7 @@
 
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 
-<!-- wp:template-part {"slug":"post-meta","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"post-meta-icons","layout":{"inherit":true}} /-->
 </main>
 <!-- /wp:group -->
 

blockbase/inc/block-styles.php

@@ -24,6 +24,40 @@ if ( ! function_exists( 'blockbase_register_block_styles' ) ) :
 				)
 			);
 
+			//Post meta styles with icons
+			register_block_style(
+				'core/post-author',
+				array(
+					'name'         => 'post-author-icon',
+					'label'        => __( 'With icon', 'blockbase' ),
+					'style_handle' => 'post-author-icon',
+				)
+			);
+			register_block_style(
+				'core/post-date',
+				array(
+					'name'         => 'post-date-icon',
+					'label'        => __( 'With icon', 'blockbase' ),
+					'style_handle' => 'post-date-icon',
+				)
+			);
+			register_block_style(
+				'core/post-terms',
+				array(
+					'name'         => 'post-tag-icon',
+					'label'        => __( 'With tag icon', 'blockbase' ),
+					'style_handle' => 'post-tag-icon',
+				)
+			);
+			register_block_style(
+				'core/post-terms',
+				array(
+					'name'         => 'post-category-icon',
+					'label'        => __( 'With category icon', 'blockbase' ),
+					'style_handle' => 'post-category-icon',
+				)
+			);
+
 		}
 	}
 endif;

blockbase/sass/post/_meta.scss

@@ -2,30 +2,35 @@
 	// We're setting row-gap here as currently, we can't specify separate vertical and horizontal block gaps.
 	// Tracking in Gutenberg here: https://github.com/WordPress/gutenberg/issues/34529
 	row-gap: var(--wp--custom--gap--baseline) !important; // !important is needed to override the unique .wp-container-ID classes
-	.wp-block-post-author,
-	.wp-block-post-date,
-	.taxonomy-post_tag,
-	.taxonomy-category {
-		@include post-meta-icon;
-	}
+}
 
-	.wp-block-post-author:before {
+.is-style-post-author-icon,
+.is-style-post-date-icon,
+.is-style-post-category-icon,
+.is-style-post-tag-icon {
+	@include post-meta-icon;
+}
+.is-style-post-author-icon {
+	&:before {
 		-webkit-mask-image: url(svg/post-author.svg);
 		mask-image: url(svg/post-author.svg);
 	}
-
-	.wp-block-post-date:before {
+}
+.is-style-post-date-icon {
+	&:before {
 		-webkit-mask-image: url(svg/post-date.svg);
 		mask-image: url(svg/post-date.svg);
 	}
-
-	.taxonomy-category:before  {
+}
+.is-style-post-category-icon {
+	&:before {
 		-webkit-mask-image: url(svg/post-category.svg);
 		mask-image: url(svg/post-category.svg);
 	}
-
-	.taxonomy-post_tag:before {
+}
+.is-style-post-tag-icon {
+	&:before {
 		-webkit-mask-image: url(svg/post-tag.svg);
 		mask-image: url(svg/post-tag.svg);
 	}
-}
+}

geologist/assets/theme.css

@@ -338,39 +338,4 @@ textarea:focus {
 	margin-top: 0;
 }
 
-.post-meta {
-	display: initial;
-}
-
-@media (max-width: 599px) {
-	.post-meta {
-		padding-top: 0 !important;
-		margin-bottom: -20px;
-	}
-}
-
-.post-meta > *,
-.post-meta .wp-block-post-date {
-	margin: 0 8px;
-}
-
-.post-meta .wp-block-post-terms {
-	margin-left: 0;
-	color: transparent;
-}
-
-.post-meta .wp-block-post-terms::before {
-	color: var(--wp--custom--color--foreground);
-	content: "·";
-	margin-right: 8px;
-}
-
-.post-meta .wp-block-post-terms a {
-	color: var(--wp--custom--color--foreground);
-}
-
-.post-meta .wp-block-post-terms a:not(:last-child):after {
-	content: ",";
-}
-
 /*# sourceMappingURL=theme.css.map */

geologist/block-templates/index.html

@@ -8,7 +8,7 @@
 		<!-- wp:post-title {"isLink":true, "level": 3, "textAlign":"left"} /-->
 		<!-- wp:post-featured-image {"isLink":true} /-->
 		<!-- wp:post-excerpt /-->
-		<!-- wp:template-part {"slug":"post-meta","layout":{"inherit":true}} /-->
+		<!-- wp:template-part {"slug":"post-meta-icons","layout":{"inherit":true}} /-->
 		<!-- wp:spacer {"height":120} -->
 		<div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->

geologist/block-templates/single.html

@@ -12,7 +12,7 @@
 
 	<!-- wp:post-content {"layout":{"inherit":true}} /-->
 
-	<!-- wp:template-part {"slug":"post-meta","layout":{"inherit":true}} /-->
+	<!-- wp:template-part {"slug":"post-meta-icons","layout":{"inherit":true}} /-->
 
 	<!-- wp:spacer {"height":150} -->
 	<div style="height:150px" aria-hidden="true" class="wp-block-spacer"></div>

geologist/sass/templates/_meta.scss

@@ -1,32 +0,0 @@
-.post-meta {
-	display: initial;
-
-	@include break-small-only() {
-		padding-top: 0 !important;
-		margin-bottom: -20px;
-	}
-
-	> *,
-	.wp-block-post-date {
-		margin: 0 8px;
-	}
-
-	.wp-block-post-terms {
-		margin-left: 0;
-		&::before {
-			color: var(--wp--custom--color--foreground);
-			content: "·";
-			margin-right: 8px;
-		}
-
-		// Needed while https://github.com/WordPress/gutenberg/issues/31710 is sorted.
-		color: transparent;
-		a {
-			color: var(--wp--custom--color--foreground);
-			&:not(:last-child):after {
-				// to be removed after https://github.com/WordPress/gutenberg/pull/32812 lands
-				content: ",";
-			}
-		}
-	}
-}

geologist/sass/theme.scss

@@ -17,4 +17,3 @@
 @import "elements/links";
 @import "elements/forms";
 @import "templates/index";
-@import "templates/meta";

mayland-blocks/assets/theme.css

@@ -50,22 +50,22 @@ img {
 	color: currentColor;
 }
 
-.post-meta .wp-block-post-author:before {
+.is-style-post-author-icon:before {
 	-webkit-mask-image: url(svg/post-author.svg);
 	mask-image: url(svg/post-author.svg);
 }
 
-.post-meta .wp-block-post-date:before {
+.is-style-post-date-icon:before {
 	-webkit-mask-image: url(svg/post-date.svg);
 	mask-image: url(svg/post-date.svg);
 }
 
-.post-meta .taxonomy-category:before {
+.is-style-post-category-icon:before {
 	-webkit-mask-image: url(svg/post-category.svg);
 	mask-image: url(svg/post-category.svg);
 }
 
-.post-meta .taxonomy-post_tag:before {
+.is-style-post-tag-icon:before {
 	-webkit-mask-image: url(svg/post-tag.svg);
 	mask-image: url(svg/post-tag.svg);
 }

mayland-blocks/block-templates/index.html

@@ -10,7 +10,7 @@
 
 <!-- wp:post-excerpt /-->
 
-<!-- wp:template-part {"slug":"post-meta"} /-->
+<!-- wp:template-part {"slug":"post-meta-icons"} /-->
 
 <!-- wp:spacer -->
 <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

mayland-blocks/block-templates/single.html

@@ -8,7 +8,7 @@
 <main class="wp-block-group">
 <!-- wp:post-title {"level":1} /-->
 
-<!-- wp:template-part {"slug":"post-meta"} /-->
+<!-- wp:template-part {"slug":"post-meta-icons"} /-->
 
 <!-- wp:spacer {"height":16} -->
 <div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
@@ -26,7 +26,7 @@
 <div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:template-part {"slug":"post-meta"} /-->
+<!-- wp:template-part {"slug":"post-meta-icons"} /-->
 
 <!-- wp:spacer {"height":64} -->
 <div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>

mayland-blocks/sass/theme.scss

@@ -53,22 +53,22 @@ img {
 	color: currentColor;
 }
 
-.post-meta .wp-block-post-author:before {
+.is-style-post-author-icon:before {
 	-webkit-mask-image: url(svg/post-author.svg);
 	mask-image: url(svg/post-author.svg);
 }
 
-.post-meta .wp-block-post-date:before {
+.is-style-post-date-icon:before {
 	-webkit-mask-image: url(svg/post-date.svg);
 	mask-image: url(svg/post-date.svg);
 }
 
-.post-meta .taxonomy-category:before {
+.is-style-post-category-icon:before {
 	-webkit-mask-image: url(svg/post-category.svg);
 	mask-image: url(svg/post-category.svg);
 }
 
-.post-meta .taxonomy-post_tag:before {
+.is-style-post-tag-icon:before {
 	-webkit-mask-image: url(svg/post-tag.svg);
 	mask-image: url(svg/post-tag.svg);
 }

quadrat/assets/theme.css

@@ -597,45 +597,9 @@ textarea:focus {
 }
 
 .post-meta > *:not(:first-child):before {
-	align-items: center;
-	background: transparent;
 	color: var(--wp--custom--color--foreground);
 	content: "·";
-	display: flex;
-	margin-right: 0;
-	-webkit-mask-image: none;
-	mask-image: none;
-}
-
-.post-meta > *:first-child:before {
-	content: none;
-}
-
-.post-meta > * > * {
-	color: var(--wp--custom--color--foreground);
-	font-size: var(--wp--custom--font-sizes--tiny);
-}
-
-.post-meta .wp-block-post-author__content {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
-.post-meta .wp-block-post-author__name {
-	line-height: 1;
-}
-
-.post-meta .wp-block-post-author__avatar {
-	margin-right: 0.5em;
-	align-items: center;
-	display: flex;
-}
-
-.post-meta .wp-block-post-author__avatar .avatar {
-	border-radius: 50%;
-	height: 1.25em;
-	width: 1.25em;
+	margin-right: 1ch;
 }
 
 .wp-block-query .wp-block-post-featured-image {

quadrat/sass/templates/_meta.scss

@@ -14,47 +14,9 @@
 
 	> * {
 		&:not(:first-child):before {
-			align-items: center;
-			background: transparent;
 			color: var(--wp--custom--color--foreground);
 			content: "·";
-			display: flex;
-			margin-right: 0;
-			-webkit-mask-image: none;
-			mask-image: none;
-		}
-
-		&:first-child:before {
-			// Hide the date icon. This should be configurable in Blockbase:
-			// https://github.com/Automattic/themes/issues/4704
-			content: none;
-		}
-
-		> * {
-			color: var(--wp--custom--color--foreground);
-			font-size: var(--wp--custom--font-sizes--tiny);
-		}
-	}
-
-	.wp-block-post-author__content {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-	}
-
-	.wp-block-post-author__name {
-		line-height: 1;
-	}
-
-	.wp-block-post-author__avatar {
-		margin-right: 0.5em;
-		align-items: center;
-		display: flex;
-
-		.avatar {
-			border-radius: 50%;
-			height: 1.25em;
-			width: 1.25em;
+			margin-right: 1ch;
 		}
 	}
 }

russell/block-templates/single.html

@@ -12,7 +12,7 @@
 
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 
-<!-- wp:template-part {"slug":"post-meta","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"post-meta-icons","layout":{"inherit":true}} /-->
 </main>
 <!-- /wp:group -->
 

seedlet-blocks/block-templates/index.html

@@ -9,7 +9,7 @@
 
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 
-<!-- wp:template-part {"slug":"post-meta","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"post-meta-icons","layout":{"inherit":true}} /-->
 
 <!-- wp:spacer {"height":60} -->
 <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>

seedlet-blocks/block-templates/singular.html

@@ -6,7 +6,7 @@
 
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 
-<!-- wp:template-part {"slug":"post-meta","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"post-meta-icons","layout":{"inherit":true}} /-->
 
 <!-- wp:group {"className":"author-bio","layout":{"inherit":true}} -->
 <div class="wp-block-group author-bio"><!-- wp:post-author {"showAvatar":false,"showBio":true,"byline":"Published by","fontSize":"huge"} /-->

skatepark/assets/theme.css

@@ -460,30 +460,30 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
 	align-items: start;
 }
 
-.post-meta .wp-block-post-date,
-.post-meta .taxonomy-category,
-.post-meta .taxonomy-post_tag {
+.post-meta .is-style-post-date-icon,
+.post-meta .is-style-post-category-icon,
+.post-meta .is-style-post-tag-icon {
 	margin-bottom: 0.5em;
 }
 
-.post-meta .wp-block-post-date:before,
-.post-meta .taxonomy-category:before,
-.post-meta .taxonomy-post_tag:before {
+.is-style-post-date-icon:before,
+.is-style-post-category-icon:before,
+.is-style-post-tag-icon:before {
 	height: 18px;
 	width: 18px;
 }
 
-.post-meta .wp-block-post-date:before {
+.is-style-post-date-icon:before {
 	-webkit-mask-image: url(svg/post-date.svg);
 	mask-image: url(svg/post-date.svg);
 }
 
-.post-meta .taxonomy-category:before {
+.is-style-post-category-icon:before {
 	-webkit-mask-image: url(svg/post-category.svg);
 	mask-image: url(svg/post-category.svg);
 }
 
-.post-meta .taxonomy-post_tag:before {
+.is-style-post-tag-icon:before {
 	-webkit-mask-image: url(svg/post-tag.svg);
 	mask-image: url(svg/post-tag.svg);
 }

skatepark/block-templates/single.html

@@ -31,9 +31,9 @@
 	<!-- /wp:separator -->
 	<!-- wp:group {"className":"post-meta","layout":{"type":"flex"}} -->
 	<div class="wp-block-group post-meta">
-	<!-- wp:post-date {"isLink":true,"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
-	<!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
-	<!-- wp:post-terms {"term": "post_tag","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /--></div>
+    <!-- wp:post-date {"isLink":true,"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}},"className":"is-style-post-date-icon"} /-->
+	<!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}},"className":"is-style-post-category-icon"} /-->
+    <!-- wp:post-terms {"term": "post_tag","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}},"className":"is-style-post-tag-icon"} /--></div>
 	<!-- /wp:group -->
 
 	</div>

skatepark/sass/elements/_post-meta.scss

@@ -4,28 +4,34 @@
 		align-items: start;
 	}
 
-	.wp-block-post-date,
-	.taxonomy-category,
-	.taxonomy-post_tag {
+	.is-style-post-date-icon,
+	.is-style-post-category-icon,
+	.is-style-post-tag-icon {
 		margin-bottom: 0.5em;
-		&:before {
-			height: 18px;
-			width: 18px;
-		}
 	}
 
-	.wp-block-post-date:before {
-		-webkit-mask-image: url(svg/post-date.svg);
-		mask-image: url(svg/post-date.svg);
-	}
+}
 
-	.taxonomy-category:before  {
-		-webkit-mask-image: url(svg/post-category.svg);
-		mask-image: url(svg/post-category.svg);
+.is-style-post-date-icon,
+.is-style-post-category-icon,
+.is-style-post-tag-icon {
+	&:before {
+		height: 18px;
+		width: 18px;
 	}
+}
 
-	.taxonomy-post_tag:before {
-		-webkit-mask-image: url(svg/post-tag.svg);
-		mask-image: url(svg/post-tag.svg);
-	}
+.is-style-post-date-icon:before {
+	-webkit-mask-image: url(svg/post-date.svg);
+	mask-image: url(svg/post-date.svg);
+}
+
+.is-style-post-category-icon:before {
+	-webkit-mask-image: url(svg/post-category.svg);
+	mask-image: url(svg/post-category.svg);
+}
+
+.is-style-post-tag-icon:before {
+	-webkit-mask-image: url(svg/post-tag.svg);
+	mask-image: url(svg/post-tag.svg);
 }

videomaker/assets/theme.css

@@ -55,11 +55,6 @@ div.post-meta a {
 	text-decoration: none;
 }
 
-.wp-block-post-date::before,
-.wp-block-post-terms::before {
-	display: none !important;
-}
-
 .is-vertical.items-justified-right ul.wp-block-navigation__container {
 	align-items: flex-end;
 }

videomaker/sass/_meta.scss

@@ -5,11 +5,3 @@ div.post-meta {
 		text-decoration: none;
 	}
 }
-
-// TODO - this should be the default, and child themes should opt in to the icons.
-.wp-block-post-date,
-.wp-block-post-terms {
-	&::before {
-		display: none !important;
-	}
-}

zoologist/assets/theme.css

@@ -339,39 +339,4 @@ textarea:focus {
 	margin-top: 0;
 }
 
-.post-meta {
-	display: initial;
-}
-
-@media (max-width: 599px) {
-	.post-meta {
-		padding-top: 0 !important;
-		margin-bottom: -20px;
-	}
-}
-
-.post-meta > *,
-.post-meta .wp-block-post-date {
-	margin: 0 8px;
-}
-
-.post-meta .wp-block-post-terms {
-	margin-left: 0;
-	color: transparent;
-}
-
-.post-meta .wp-block-post-terms::before {
-	color: var(--wp--custom--color--foreground);
-	content: "·";
-	margin-right: 8px;
-}
-
-.post-meta .wp-block-post-terms a {
-	color: var(--wp--custom--color--foreground);
-}
-
-.post-meta .wp-block-post-terms a:not(:last-child):after {
-	content: ",";
-}
-
 /*# sourceMappingURL=theme.css.map */

zoologist/block-templates/single.html

@@ -12,7 +12,7 @@
 
 	<!-- wp:post-content {"layout":{"inherit":true}} /-->
 
-	<!-- wp:template-part {"slug":"post-meta","layout":{"inherit":true}} /-->
+	<!-- wp:template-part {"slug":"post-meta-icons","layout":{"inherit":true}} /-->
 
 	<!-- wp:spacer {"height":150} -->
 	<div style="height:150px" aria-hidden="true" class="wp-block-spacer"></div>

zoologist/sass/templates/_meta.scss

@@ -1,32 +0,0 @@
-.post-meta {
-	display: initial;
-
-	@include break-small-only() {
-		padding-top: 0 !important;
-		margin-bottom: -20px;
-	}
-
-	> *,
-	.wp-block-post-date {
-		margin: 0 8px;
-	}
-
-	.wp-block-post-terms {
-		margin-left: 0;
-		&::before {
-			color: var(--wp--custom--color--foreground);
-			content: "·";
-			margin-right: 8px;
-		}
-
-		// Needed while https://github.com/WordPress/gutenberg/issues/31710 is sorted.
-		color: transparent;
-		a {
-			color: var(--wp--custom--color--foreground);
-			&:not(:last-child):after {
-				// to be removed after https://github.com/WordPress/gutenberg/pull/32812 lands
-				content: ",";
-			}
-		}
-	}
-}

zoologist/sass/theme.scss

@@ -17,4 +17,3 @@
 @import "elements/links";
 @import "elements/forms";
 @import "templates/index";
-@import "templates/meta";