Block Theme: Style pattern grid using fixed-height cards

See #635
WordPress · Mar 21, 2024 · d26d2c9 · d26d2c9
1 parent 2a7f193
commit d26d2c9
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 33 deletions.
diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/patterns/_grid-mine.php b/public_html/wp-content/themes/wporg-pattern-directory-2024/patterns/_grid-mine.php
@@ -33,7 +33,11 @@
 	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"grid","columnCount":3}} -->
 		<!-- wp:group {"style":{"spacing":{"blockGap":"5px"}}} -->
 		<div class="wp-block-group">
-			<!-- wp:wporg/pattern-preview {"isLink":true} /-->
+			<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"backgroundColor":"light-grey-2","layout":{"type":"constrained"},"className":"wporg-pattern-thumbnail__container"} -->
+			<div class="wp-block-group has-light-grey-2-background-color has-background wporg-pattern-thumbnail__container" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">
+				<!-- wp:wporg/pattern-preview {"isLink":true} /-->
+			</div>
+			<!-- /wp:group -->
 
 			<!-- wp:wporg/post-status /-->
 

diff --git a/...p-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/frame/style.scss b/...p-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/frame/style.scss
@@ -1,8 +1,4 @@
 .wp-block-wporg-pattern-preview {
-	border-color: var(--wp--custom--wporg-pattern-thumbnail--border--color);
-	border-radius: var(--wp--custom--wporg-pattern-thumbnail--border--radius);
-	border-style: solid;
-	border-width: var(--wp--custom--wporg-pattern-thumbnail--border--width);
 	margin: 0;
 	position: relative;
 	width: 100%;

diff --git a/...ml/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-thumbnail/render.php b/...ml/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-thumbnail/render.php
@@ -58,6 +58,7 @@
 	<?php endif; ?>
 
 	<div
+		class="wporg-pattern-thumbnail__container"
 		data-wp-class--wporg-pattern-thumbnail__loader="!state.hasLoaded"
 		data-wp-class--wporg-pattern-thumbnail__error="state.hasError"
 	>

diff --git a/...ml/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-thumbnail/style.scss b/...ml/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-thumbnail/style.scss
@@ -1,30 +1,38 @@
 .wp-block-wporg-pattern-thumbnail {
-	border-color: var(--wp--custom--wporg-pattern-thumbnail--border--color);
-	border-radius: var(--wp--custom--wporg-pattern-thumbnail--border--radius);
-	border-style: solid;
-	border-width: var(--wp--custom--wporg-pattern-thumbnail--border--width);
-	margin: 0;
 	position: relative;
-	width: 100%;
-	overflow: hidden;
+	margin: 0;
+	background-color: var(--wp--custom--wporg-pattern-thumbnail--color--background);
+	border-radius: 4px;
 
-	&:where(.is-linked-image):hover,
-	&:where(.is-linked-image):focus-within {
-		--wp--custom--wporg-pattern-thumbnail--border--color: rgba(30, 30, 30, 0.25);
+	&:where(.is-linked-image) a {
+		display: block;
+		padding: var(--wp--preset--spacing--40);
+	}
+
+	&:where(.is-linked-image):hover {
+		--wp--custom--wporg-pattern-thumbnail--color--background: rgba(0, 0, 0, 0.1);
 	}
 
 	&:where(.is-linked-image):focus-within {
 		outline: 1.5px solid var(--wp--custom--link--color--text);
 		outline-offset: -1.5px;
 	}
 
-	img {
-		width: 100%;
-		vertical-align: middle;
+	&:where(.is-linked-image) a:focus {
+		box-shadow: none;
 	}
 
-	&:not(.has-loaded) {
-		aspect-ratio: 21 / 9;
+	.wporg-pattern-thumbnail__container {
+		aspect-ratio: 4 / 3;
+		display: flex;
+		align-items: center;
+	}
+
+	img {
+		display: block;
+		margin: auto;
+		max-width: 100%;
+		max-height: 100%;
 	}
 
 	.wporg-pattern-thumbnail__loader {
@@ -46,8 +54,8 @@
 			width: 16px;
 			border: 1.5px solid;
 			border-color:
-				var(--wp--custom--wporg-pattern-thumbnail--border--color)
-				var(--wp--custom--wporg-pattern-thumbnail--border--color)
+				var(--wp--custom--wporg-pattern-thumbnail--color--background)
+				var(--wp--custom--wporg-pattern-thumbnail--color--background)
 				var(--wp--custom--link--color--text);
 			border-radius: 50%;
 			animation: rotate-360 1.4s linear infinite;

diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/post-status/style.scss b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/post-status/style.scss
@@ -2,7 +2,7 @@
 	display: inline-block;
 	padding: 0.1rem 0.75rem;
 	border-radius: 2px;
-	background: var(--wp--preset--color--blueberry-4);
+	background: var(--wp--preset--color--blueberry-3);
 	color: var(--wp--preset--color--charcoal-1);
 	font-weight: 600;
 	font-size: var(--wp--preset--font-size--extra-small);
@@ -11,15 +11,15 @@
 
 	&.is-pending,
 	&.is-pending-review {
-		background: var(--wp--preset--color--lemon-2);
+		background: var(--wp--preset--color--lemon-1);
 	}
 
 	&.is-unlisted {
-		background: var(--wp--preset--color--pomegrade-3);
+		background: var(--wp--preset--color--pomegrade-2);
 	}
 
 	&.is-published {
-		background: var(--wp--preset--color--acid-green-2);
+		background: var(--wp--preset--color--acid-green-1);
 	}
 }
 
@@ -29,8 +29,8 @@
 
 	.wp-block-wporg-post-status {
 		position: absolute;
-		top: calc(var(--wp--preset--spacing--10) * -1);
-		left: var(--wp--preset--spacing--10);
+		top: calc(var(--wp--preset--spacing--10) / 2);
+		left: calc(var(--wp--preset--spacing--10) / 2);
 		margin-block-start: 0 !important;
 	}
 }
diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/style.css b/public_html/wp-content/themes/wporg-pattern-directory-2024/style.css
@@ -36,7 +36,7 @@
 	margin-top: 0;
 }
 
-/* Both blocks are in the local header, but  */
+/* Both blocks are in the local header, but only one should be shown at any given time. */
 body.blog .wp-block-wporg-local-navigation-bar .wp-block-post-title,
 body.archive .wp-block-wporg-local-navigation-bar .wp-block-post-title,
 body.search .wp-block-wporg-local-navigation-bar .wp-block-post-title {
@@ -90,6 +90,7 @@ body.page .wp-block-wporg-local-navigation-bar .wp-block-query-title {
 	width: var(--wp--preset--spacing--10);
 }
 
+/* Styles for the `is-edit-link` helper class. */
 .wp-block-button.is-edit-link a {
 	display: flex;
 	align-items: center;
@@ -115,13 +116,48 @@ body.page .wp-block-wporg-local-navigation-bar .wp-block-query-title {
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' fill='none' viewBox='0 0 24 25'%3E%3Cpath fill='%23ffffff' d='m19 7.478-3-3-8.5 8.5-1 4 4-1 8.5-8.5ZM12 18.978H5v1.5h7v-1.5Z'/%3E%3C/svg%3E");
 }
 
+/* Style the pattern grid. */
+.wp-block-query .wp-block-post-title {
+	flex-shrink: 1;
+	overflow: hidden;
+	padding: 1.5px; /* Add space for the focus style. */
+}
+
+.wp-block-query .wp-block-button,
+.wp-block-query .wp-block-wporg-favorite-button {
+	flex-shrink: 0;
+}
+
+.wp-block-query .wp-block-post-title a {
+	max-width: 100%;
+	overflow-x: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+}
+
+/* Style "My patterns" grid. */
+.wporg-my-patterns .wporg-pattern-thumbnail__container {
+	aspect-ratio: 4 / 3;
+	display: flex;
+	align-items: center;
+}
+
 /* Drop to a two column layout for grids (except the "more by"). */
 @media (max-width: 1280px) {
 	:where(body:not(.single-wporg-pattern)) .wp-block-post-template.is-layout-grid.columns-3 {
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
 }
 
+/* Prevent pattern cells from breaking out of page on small screens. */
+@media (max-width: 600px) {
+	/* This selector comes from gutenberg. */
+	.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+
 /* Pages using this have the 1760 wide width. */
 .wporg-patterns-nested-alignfull {
 	width: 100vw;

diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/theme.json b/public_html/wp-content/themes/wporg-pattern-directory-2024/theme.json
@@ -4,10 +4,8 @@
 	"settings": {
 		"custom": {
 			"wporg-pattern-thumbnail": {
-				"border": {
-					"color": "rgba(0, 0, 0, 0.10)",
-					"width": "1px",
-					"radius": "2px"
+				"color": {
+					"background": "var(--wp--preset--color--light-grey-2)"
 				}
 			},
 			"wporg-pattern-preview": {