Blockbase: Add a mixin for post meta (#4897)

blockbase/inc/block-styles.php

@@ -2,7 +2,7 @@
 /**
  * Blockbase Theme: Block Styles
  *
- * @package Blockbase 
+ * @package Blockbase
  * @since 1.2.8
  */
 
@@ -57,7 +57,6 @@ if ( ! function_exists( 'blockbase_register_block_styles' ) ) :
 					'style_handle' => 'post-category-icon',
 				)
 			);
-
 		}
 	}
 endif;

blockbase/sass/base/_mixins.scss

@@ -29,3 +29,18 @@
 		background-color: currentColor;
 	}
 }
+
+@mixin post-meta-with-separator( $content ) {
+	&.wp-block-group {
+		gap: 0;
+	}
+
+	> * {
+		&:not(:first-child):before {
+			color: var(--wp--custom--color--foreground);
+			content: $content;
+			margin-left: var(--wp--custom--gap--baseline);
+			margin-right: var(--wp--custom--gap--baseline);
+		}
+	}
+}

blockbase/sass/post/_meta.scss

@@ -33,4 +33,4 @@
 		-webkit-mask-image: url(svg/post-tag.svg);
 		mask-image: url(svg/post-tag.svg);
 	}
-}
+}

payton/assets/theme.css

@@ -1,4 +1,41 @@
 @charset "UTF-8";
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
 .wp-block-separator {
 	border-width: 0 0 2px 0;
 }
@@ -42,49 +79,21 @@
 }
 
 .wp-block-group .post-meta {
-	gap: calc( var(--wp--custom--gap--baseline) + 1px);
+	gap: 0;
 }
 
-.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;
+@media (max-width: 599px) {
+	.post-meta {
+		padding-top: 0 !important;
+		margin-bottom: -20px;
+	}
 }
 
-.post-meta > *:first-child:before {
-	content: none;
-}
-
-.post-meta > * > * {
+.post-meta > *:not(:first-child):before {
 	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;
+	content: "·";
+	margin-left: var(--wp--custom--gap--baseline);
+	margin-right: var(--wp--custom--gap--baseline);
 }
 
 /*# sourceMappingURL=theme.css.map */

payton/sass/templates/_meta.scss

@@ -1,55 +1,11 @@
 .post-meta {
+	@include post-meta-with-separator('·');
+
 	align-items: center;
 	justify-content: center;
 
-	.wp-block-group & {
-		// 1px needed to account for the separator
-		gap: calc( var(--wp--custom--gap--baseline) + 1px);
-	}
-
-	> * {
-		&: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;
-		}
+	@include break-small-only() {
+		padding-top: 0 !important;
+		margin-bottom: -20px;
 	}
 }

payton/sass/theme.scss

@@ -1,3 +1,5 @@
+@import "../../blockbase/sass/base/breakpoints"; // Get the mobile-only media query and make it available to this theme's styles
+@import "../../blockbase/sass/base/mixins";
 @import "blocks/separator";
 @import "blocks/post-navigation-link";
 @import "templates/meta";

quadrat/assets/theme.css

@@ -585,8 +585,15 @@ textarea:focus {
 	justify-content: center;
 }
 
-.wp-block-group .post-meta {
-	gap: calc( var(--wp--custom--gap--baseline) + 1px);
+.post-meta.wp-block-group {
+	gap: 0;
+}
+
+.post-meta > *:not(:first-child):before {
+	color: var(--wp--custom--color--foreground);
+	content: "·";
+	margin-left: var(--wp--custom--gap--baseline);
+	margin-right: var(--wp--custom--gap--baseline);
 }
 
 @media (max-width: 599px) {
@@ -596,12 +603,6 @@ textarea:focus {
 	}
 }
 
-.post-meta > *:not(:first-child):before {
-	color: var(--wp--custom--color--foreground);
-	content: "·";
-	margin-right: 1ch;
-}
-
 .wp-block-query .wp-block-post-featured-image {
 	margin-top: calc( var(--wp--custom--gap--vertical) / 2);
 }

quadrat/sass/templates/_meta.scss

@@ -1,22 +1,11 @@
 .post-meta {
+	@include post-meta-with-separator('·');
+
 	align-items: center;
 	justify-content: center;
 
-	.wp-block-group & {
-		// 1px needed to account for the separator
-		gap: calc( var(--wp--custom--gap--baseline) + 1px);
-	}
-
 	@include break-small-only() {
 		padding-top: 0 !important;
 		margin-bottom: -20px;
 	}
-
-	> * {
-		&:not(:first-child):before {
-			color: var(--wp--custom--color--foreground);
-			content: "·";
-			margin-right: 1ch;
-		}
-	}
 }

videomaker/assets/theme.css

@@ -1,3 +1,40 @@
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
 .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
 .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
 .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
@@ -51,10 +88,6 @@ div.post-meta {
 	gap: 0;
 }
 
-div.post-meta a {
-	text-decoration: none;
-}
-
 div.post-meta > *:not(:first-child):before {
 	color: var(--wp--custom--color--foreground);
 	content: "/";
@@ -62,6 +95,10 @@ div.post-meta > *:not(:first-child):before {
 	margin-right: var(--wp--custom--gap--baseline);
 }
 
+div.post-meta a {
+	text-decoration: none;
+}
+
 .is-vertical.items-justified-right ul.wp-block-navigation__container {
 	align-items: flex-end;
 }

videomaker/sass/_meta.scss

@@ -1,16 +1,7 @@
 div.post-meta {
-	gap: 0;
+	@include post-meta-with-separator('/');
 
 	a {
 		text-decoration: none;
 	}
-
-	> * {
-		&:not(:first-child):before {
-			color: var(--wp--custom--color--foreground);
-			content: "/";
-			margin-left: var(--wp--custom--gap--baseline);
-			margin-right: var(--wp--custom--gap--baseline);
-		}
-	}
 }

videomaker/sass/theme.scss

@@ -1,3 +1,5 @@
+@import "../../blockbase/sass/base/breakpoints"; // Get the mobile-only media query and make it available to this theme's styles
+@import "../../blockbase/sass/base/mixins";
 @import "../../blockbase/sass/blocks/_buttons-outline-style";
 @import "links";
 @import "meta";