Geologist: code quality (#4532)

* refactor outline button styles

* removed block patterns styles

* renamed mixin

blockbase/sass/blocks/_button-mixins.scss

@@ -62,3 +62,18 @@
 		}
 	}
 }
+
+//Mixins for the alternative outline style
+@mixin button-outline-hover-styles {
+	&:hover,
+	&:focus,
+	&.has-focus {
+		border-style: var(--wp--custom--button--border--style);
+		border-color: currentColor;
+		border-width: var(--wp--custom--button--border--width);
+		padding-top: var(--wp--custom--button--spacing--padding--top);
+		padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
+		padding-left: var(--wp--custom--button--spacing--padding--left);
+		padding-right: var(--wp--custom--button--spacing--padding--right);
+	}
+}

blockbase/sass/blocks/_buttons-outline-style.scss

@@ -0,0 +1,41 @@
+@import 'button-mixins';
+.wp-block-button {
+	&.wp-block-button__link,
+	.wp-block-button__link {
+	   	&:not(.has-background):not(.has-text-color) {
+		   @include button-outline-hover-styles;
+	   	}
+   	}
+}
+.wp-block-file .wp-block-file__button {
+   @include button-outline-hover-styles;
+}	
+
+.wp-block-search {
+   	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
+   	.wp-block-search__button {
+	   @include button-outline-hover-styles;
+   	}
+}
+
+.wp-block-post-comments {
+   	input[type="submit"], .reply a {
+	   @include button-outline-hover-styles;
+   	}
+}
+
+//NOTE: Double-classed to raise specificity above parent theme's outline hover styles
+//as an alternative to !important.  Only needed for the editor.
+.wp-block-button.wp-block-button.is-style-outline {
+	&.wp-block-button__link,
+	.wp-block-button__link {
+	   &:not(.has-background):not(.has-text-color) {
+		   &:hover,
+		   &:focus,
+		   &.has-focus {
+			   color: var(--wp--custom--button--color--background);
+			   background-color: var(--wp--custom--button--color--text);
+		   	}
+	   	}
+   	}
+}

geologist/assets/theme.css

@@ -36,144 +36,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-@media (max-width: 599px) {
-	.headlines-pattern {
-		padding-top: 50px !important;
-		padding-bottom: 50px !important;
-	}
-}
-
-.subscription-column {
-	text-align: right;
-}
-
-.wp-block-cover.is-style-quadrat-cover-diamond::after {
-	background-image: url(rotated.svg);
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: auto 70%;
-	content: "";
-	mix-blend-mode: soft-light;
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	z-index: 0 !important;
-}
-
-.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color.wp-block-cover.has-background-dim:not(.has-background-gradient)::before, .wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color.wp-block-cover.has-background-dim:not(.has-background-gradient)::before {
-	opacity: 0;
-}
-
-.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color::after, .wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color::after {
-	mix-blend-mode: normal;
-	mask-image: url(rotated.svg);
-	mask-repeat: no-repeat;
-	mask-size: auto 70%;
-	mask-position: center;
-	opacity: 0.25;
-}
-
-.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color::after {
-	background: #000;
-}
-
-.wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color::after {
-	background: #fff;
-}
-
-.is-style-quadrat-diamond-posts .post-meta {
-	display: flex;
-	justify-content: flex-start;
-}
-
-.is-style-quadrat-diamond-posts .wp-block-post-title a,
-.is-style-quadrat-diamond-posts .wp-block-query-pagination a,
-.is-style-quadrat-diamond-posts .post-meta a {
-	text-decoration: none;
-}
-
-.is-style-quadrat-diamond-posts .wp-block-post-title a:hover,
-.is-style-quadrat-diamond-posts .wp-block-query-pagination a:hover,
-.is-style-quadrat-diamond-posts .post-meta a:hover {
-	text-decoration: underline;
-}
-
-.is-style-quadrat-diamond-posts .wp-block-column {
-	flex-basis: auto;
-}
-
-@media (min-width: 600px) {
-	.is-style-quadrat-diamond-posts .wp-block-column:last-child {
-		max-width: 300px;
-		flex-shrink: 0;
-	}
-	.is-style-quadrat-diamond-posts .wp-block-column:first-child {
-		padding-right: 2em;
-	}
-}
-
-.is-style-quadrat-diamond-posts .wp-block-post-featured-image {
-	width: 300px;
-}
-
-@media (max-width: 599px) {
-	.is-style-quadrat-diamond-posts .wp-block-post-featured-image {
-		width: 100%;
-	}
-}
-
-.is-style-quadrat-diamond-posts .wp-block-post-featured-image img {
-	object-fit: cover;
-	width: 100%;
-	height: 300px;
-}
-
-.is-style-quadrat-diamond-posts .wp-block-post-template li {
-	display: flex;
-	align-items: center;
-	min-height: 400px;
-	position: relative;
-}
-
-.is-style-quadrat-diamond-posts .wp-block-post-template li > * {
-	flex-basis: 100%;
-}
-
-.is-style-quadrat-diamond-posts .wp-block-post-template li:before {
-	content: "";
-	background: var(--wp--preset--color--secondary);
-	width: 375px;
-	height: 375px;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: -1;
-	opacity: 0;
-	transition: all 0.4s ease-in-out;
-}
-
-.is-style-quadrat-diamond-posts .wp-block-post-template li:hover:before {
-	opacity: 1;
-}
-
-.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+1):before {
-	transform: rotate(16deg) translate(-130px, -20px);
-}
-
-.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+1):hover:before {
-	transform: rotate(-8deg) translate(-110px, 0);
-}
-
-.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+2):before {
-	transform: rotate(24deg) translate(-130px, 20px);
-}
-
-.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+2):hover:before {
-	transform: rotate(16deg) translate(-110px, 40px);
-}
-
 .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,

geologist/sass/block-patterns/_headlines.scss

@@ -1,6 +0,0 @@
-.headlines-pattern {
-	@include break-small-only(){
-		padding-top: 50px !important;
-		padding-bottom: 50px !important;
-	}
-}

geologist/sass/block-patterns/_join.scss

@@ -1,3 +0,0 @@
-.subscription-column {
-	text-align: right;
-}

geologist/sass/block-styles/_cover.scss

@@ -1,42 +0,0 @@
-.wp-block-cover.is-style-quadrat-cover-diamond {
-
-	&::after {
-		background-image: url(rotated.svg);
-		background-position: center;
-		background-repeat: no-repeat;
-		background-size: auto 70%;
-		content: "";
-		mix-blend-mode: soft-light;
-		position: absolute;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
-		z-index: 0 !important; 
-	}
-
-	&.has-white-background-color,
-	&.has-black-background-color {
-
-		&.wp-block-cover.has-background-dim:not(.has-background-gradient)::before {
-			opacity: 0;
-		}
-
-		&::after {
-			mix-blend-mode: normal;
-			mask-image: url(rotated.svg);
-			mask-repeat: no-repeat;
-			mask-size: auto 70%;
-			mask-position: center;
-			opacity: 0.25;
-		}
-	}
-
-	&.has-white-background-color::after {
-		background: #000;
-	}
-
-	&.has-black-background-color::after {
-		background: #fff;
-	}
-}

geologist/sass/block-styles/_query.scss

@@ -1,78 +0,0 @@
-.is-style-quadrat-diamond-posts {
-	.post-meta {
-		display: flex;
-		justify-content: flex-start;
-	}
-
-	.wp-block-post-title,
-	.wp-block-query-pagination,
-	.post-meta {
-		a {
-			text-decoration: none;
-			&:hover {
-				text-decoration: underline;
-			}
-		}
-	}
-	.wp-block-column {
-		flex-basis: auto;
-		@include break-small() {
-			&:last-child {
-				max-width: 300px;
-				flex-shrink: 0;
-			}
-			&:first-child {
-				padding-right: 2em;
-			}
-		}
-	}
-	.wp-block-post-featured-image {
-		width: 300px;
-		@include break-small-only() {
-			width: 100%;
-		}
-		img {
-			object-fit: cover;
-			width: 100%;
-			height: 300px;
-		}
-	}
-	.wp-block-post-template {
-		li {
-			display: flex;
-			align-items: center;
-			min-height: 400px;
-			position: relative;
-			& > * {
-				flex-basis: 100%;
-			}
-			&:before {
-				content: "";
-				background: var(--wp--preset--color--secondary);
-				width: 375px;
-				height: 375px;
-				position: absolute;
-				top: 0;
-				left: 0;
-				z-index: -1;
-				opacity:0;
-				transition: all 0.4s ease-in-out; 
-			}
-			&:hover:before {
-				opacity:1;
-			}
-			&:nth-child(2n+1):before {
-				transform: rotate(16deg) translate(-130px, -20px);
-			}
-			&:nth-child(2n+1):hover:before {
-				transform: rotate(-8deg) translate(-110px, 0);
-			}
-			&:nth-child(2n+2):before {
-				transform: rotate(24deg) translate(-130px, 20px);
-			}
-			&:nth-child(2n+2):hover:before {
-				transform: rotate(16deg) translate(-110px, 40px);
-			}
-		}
-	}
-}

geologist/sass/blocks/_buttons.scss

@@ -1,53 +0,0 @@
-@mixin quadrat_button_hover_styles {
-	&:hover,
-	&:focus,
-	&.has-focus {
-		border-style: var(--wp--custom--button--border--style);
-		border-color: currentColor;
-		border-width: var(--wp--custom--button--border--width);
-		padding-top: var(--wp--custom--button--spacing--padding--top);
-		padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
-		padding-left: var(--wp--custom--button--spacing--padding--left);
-		padding-right: var(--wp--custom--button--spacing--padding--right);
-	}
-}
-.wp-block-button {
- 	&.wp-block-button__link,
- 	.wp-block-button__link {
-		&:not(.has-background):not(.has-text-color) {
-			@include quadrat_button_hover_styles;
-		}
-	}
-}
-.wp-block-file .wp-block-file__button {
-	@include quadrat_button_hover_styles;
-}	
-
-.wp-block-search {
-	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
-	.wp-block-search__button {
-		@include quadrat_button_hover_styles;
-	}
-}
-
-.wp-block-post-comments {
-	input[type="submit"], .reply a {
-		@include quadrat_button_hover_styles;
-	}
-}
-
-//NOTE: Double-classed to raise specificity above parent theme's outline hover styles
-//as an alternative to !important.  Only needed for the editor.
-.wp-block-button.wp-block-button.is-style-outline {
- 	&.wp-block-button__link,
- 	.wp-block-button__link {
-		&:not(.has-background):not(.has-text-color) {
-			&:hover,
-			&:focus,
-			&.has-focus {
-				color: var(--wp--custom--button--color--background);
-				background-color: var(--wp--custom--button--color--text);
-			}
-		}
-	}
-}

geologist/sass/theme.scss

@@ -1,10 +1,6 @@
 @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 "block-patterns/headlines";
-@import "block-patterns/join";
-@import "block-styles/cover";
-@import "block-styles/query";
-@import "blocks/buttons";
+@import "../../blockbase/sass/blocks/_buttons-outline-style";
 @import "blocks/calendar";
 @import "blocks/list";
 @import "blocks/media-text";

geologist/theme.json

@@ -673,6 +673,9 @@
 				}
 			}
 		},
+		"spacing": {
+			"blockGap": "var(--wp--custom--margin--vertical)"
+		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",
 			"fontFamily": "var(--wp--preset--font-family--dm-sans)",

quadrat/sass/blocks/_buttons.scss

@@ -1,53 +0,0 @@
-@mixin quadrat_button_hover_styles {
-	&:hover,
-	&:focus,
-	&.has-focus {
-		border-style: var(--wp--custom--button--border--style);
-		border-color: currentColor;
-		border-width: var(--wp--custom--button--border--width);
-		padding-top: var(--wp--custom--button--spacing--padding--top);
-		padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
-		padding-left: var(--wp--custom--button--spacing--padding--left);
-		padding-right: var(--wp--custom--button--spacing--padding--right);
-	}
-}
-.wp-block-button {
- 	&.wp-block-button__link,
- 	.wp-block-button__link {
-		&:not(.has-background):not(.has-text-color) {
-			@include quadrat_button_hover_styles;
-		}
-	}
-}
-.wp-block-file .wp-block-file__button {
-	@include quadrat_button_hover_styles;
-}	
-
-.wp-block-search {
-	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
-	.wp-block-search__button {
-		@include quadrat_button_hover_styles;
-	}
-}
-
-.wp-block-post-comments {
-	input[type="submit"], .reply a {
-		@include quadrat_button_hover_styles;
-	}
-}
-
-//NOTE: Double-classed to raise specificity above parent theme's outline hover styles
-//as an alternative to !important.  Only needed for the editor.
-.wp-block-button.wp-block-button.is-style-outline {
- 	&.wp-block-button__link,
- 	.wp-block-button__link {
-		&:not(.has-background):not(.has-text-color) {
-			&:hover,
-			&:focus,
-			&.has-focus {
-				color: var(--wp--custom--button--color--background);
-				background-color: var(--wp--custom--button--color--text);
-			}
-		}
-	}
-}

quadrat/sass/theme.scss

@@ -4,7 +4,7 @@
 @import "block-patterns/join";
 @import "block-styles/cover";
 @import "block-styles/query";
-@import "blocks/buttons";
+@import "../../blockbase/sass/blocks/_buttons-outline-style";
 @import "blocks/calendar";
 @import "blocks/list";
 @import "blocks/media-text";

skatepark/assets/theme.css

@@ -82,11 +82,6 @@ p {
 	padding-right: var(--wp--custom--button--spacing--padding--right);
 }
 
-.wp-block-file .wp-block-file__button {
-	text-transform: uppercase;
-	letter-spacing: 0.1em;
-}
-
 .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
 	border-style: var(--wp--custom--button--border--style);
 	border-color: currentColor;
@@ -97,16 +92,10 @@ p {
 	padding-right: var(--wp--custom--button--spacing--padding--right);
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
-.wp-block-search .wp-block-search__button.wp-block-search__button {
-	text-transform: uppercase;
-	letter-spacing: 0.1em;
-}
-
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button.has-focus,
-.wp-block-search .wp-block-search__button.wp-block-search__button:hover,
-.wp-block-search .wp-block-search__button.wp-block-search__button:focus,
-.wp-block-search .wp-block-search__button.wp-block-search__button.has-focus {
+.wp-block-search .wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button:focus,
+.wp-block-search .wp-block-search__button.has-focus {
 	border-style: var(--wp--custom--button--border--style);
 	border-color: currentColor;
 	border-width: var(--wp--custom--button--border--width);
@@ -116,11 +105,6 @@ p {
 	padding-right: var(--wp--custom--button--spacing--padding--right);
 }
 
-.wp-block-post-comments input[type="submit"], .wp-block-post-comments .reply a {
-	text-transform: uppercase;
-	letter-spacing: 0.1em;
-}
-
 .wp-block-post-comments input[type="submit"]:hover, .wp-block-post-comments input[type="submit"]:focus, .wp-block-post-comments input[type="submit"].has-focus, .wp-block-post-comments .reply a:hover, .wp-block-post-comments .reply a:focus, .wp-block-post-comments .reply a.has-focus {
 	border-style: var(--wp--custom--button--border--style);
 	border-color: currentColor;
@@ -139,6 +123,22 @@ p {
 	background-color: var(--wp--custom--button--color--text);
 }
 
+.wp-block-file .wp-block-file__button {
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+}
+
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
+.wp-block-search .wp-block-search__button.wp-block-search__button {
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+}
+
+.wp-block-post-comments input[type="submit"], .wp-block-post-comments .reply a {
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+}
+
 .wp-block-post-comments .reply a {
 	--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
 	border-style: var(--wp--custom--button--border--style);

skatepark/sass/blocks/_buttons.scss

@@ -1,28 +1,6 @@
-@mixin skatepark_button_hover_styles {
-	&:hover,
-	&:focus,
-	&.has-focus {
-		border-style: var(--wp--custom--button--border--style);
-		border-color: currentColor;
-		border-width: var(--wp--custom--button--border--width);
-		padding-top: var(--wp--custom--button--spacing--padding--top);
-		padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
-		padding-left: var(--wp--custom--button--spacing--padding--left);
-		padding-right: var(--wp--custom--button--spacing--padding--right);
-	}
-}
-.wp-block-button {
- 	&.wp-block-button__link,
- 	.wp-block-button__link {
-		&:not(.has-background):not(.has-text-color) {
-			@include skatepark_button_hover_styles;
-		}
-	}
-}
 .wp-block-file .wp-block-file__button {
 	text-transform: uppercase;
 	letter-spacing: 0.1em;
-	@include skatepark_button_hover_styles;
 }	
 
 .wp-block-search {
@@ -30,7 +8,6 @@
 	.wp-block-search__button.wp-block-search__button {
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
-		@include skatepark_button_hover_styles;
 	}
 }
 
@@ -38,22 +15,5 @@
 	input[type="submit"], .reply a {
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
-		@include skatepark_button_hover_styles;
-	}
-}
-
-//NOTE: Double-classed to raise specificity above parent theme's outline hover styles
-//as an alternative to !important.  Only needed for the editor.
-.wp-block-button.wp-block-button.is-style-outline {
- 	&.wp-block-button__link,
- 	.wp-block-button__link {
-		&:not(.has-background):not(.has-text-color) {
-			&:hover,
-			&:focus,
-			&.has-focus {
-				color: var(--wp--custom--button--color--background);
-				background-color: var(--wp--custom--button--color--text);
-			}
-		}
 	}
 }

skatepark/sass/theme.scss

@@ -3,6 +3,7 @@
 @import "base/text";
 @import "base/mixins";
 @import "blocks/author";
+@import "../../blockbase/sass/blocks/_buttons-outline-style";
 @import "blocks/buttons";
 @import "blocks/post-comments";
 @import "blocks/post-title";