Merge pull request #139 from moderntribe/fix/patterns

Patterns: Consistency; Post Pattern Picker

CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). Each changelog entry gets prefixed with the category of the item (Added, Changed, Depreciated, Removed, Fixed, Security).
 
 ## [2024.05]
+- Updated: Pattern definition consistency for usage of `Inserter:`
+- Updated: Post pattern now shows up in the pattern selector when adding a new post.
+- Updated: Post pattern should now have a layout more consistent with designs we've been seeing
+- Updated: Search Result Post Card should now use the Read More block instead of the Post Title block for it's link wrapper
+- Updated: Search template has been updated to reflect this card change
+- Removed: Utility that helped the Post Title block act as a link wrapper for cards. It's not being used anywhere within core Moose anymore, so it's not needed.
 - Chore: Composer updates including plugins: seo-by-rank-math:1.0.218, block-editor-custom-alignment:1.0.7
 - Choice: WP version to 6.5.2
 

wp-content/themes/core/assets/pcss/cards/_utilities.pcss

@@ -14,7 +14,8 @@
 	display: block;
 	padding: 0;
 
-	:where(.wp-block-post-content) & {
+	:where(.wp-block-post-content) &,
+	:where(.p-card-search-result) & {
 		position: absolute;
 		background: transparent;
 		color: transparent;
@@ -40,46 +41,3 @@
 		margin-top: 1rem !important;
 	}
 }
-
-/* -------------------------------------------------------------------------
- *
- * Hidden Link Cover
- *
- * Applicable for blocks needing to be fully clickable. This is intended for
- * use with WP's Post Title block set as a link within post card patterns.
- *
- * ------------------------------------------------------------------------- */
-
-.a-hidden-link-cover {
-	display: inline;
-	margin: 0 !important;
-	padding: 0;
-
-	> a {
-		display: block;
-		margin: 0;
-		padding: 0;
-		background: transparent !important;
-		color: transparent !important;
-		position: absolute !important;
-		top: 0;
-		left: 0;
-		height: 100%;
-		width: 100%;
-		z-index: 1;
-		font-size: 0;
-
-		&::selection {
-			color: transparent;
-		}
-
-		/* this needs to be specific to override global focus visible styles */
-		:where(.wp-block-post-content) :not(.wp-element-button) & {
-
-			&:focus-visible {
-
-				@mixin focus-visible;
-			}
-		}
-	}
-}

wp-content/themes/core/blocks/core/columns/style.pcss

@@ -3,5 +3,5 @@
  */
 
 .wp-block-columns {
-	gap: var(--spacing-40) var(--wp--custom--spacing--grid-gutter);
+	gap: var(--spacer-40) var(--wp--custom--spacing--grid-gutter);
 }

wp-content/themes/core/patterns/card-post-search-result.php

@@ -6,7 +6,6 @@
  * Categories: cards
  * Description: Post card with featured image, post type, post title, excerpt, and URL
  * Keywords: search, post, card
- * Inserter: yes
  * Block Types: core/query
  */
 ?>
@@ -23,7 +22,7 @@
 
 <!-- wp:tribe/post-permalink {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","right":"0","bottom":"0","left":"0"}}}} /-->
 
-<!-- wp:post-title {"isLink":true,"className":"a-hidden-link-cover"} /--></div>
+<!-- wp:read-more {"className":"a-link-cover"} /--></div>
 <!-- /wp:group -->
 <!-- /wp:post-template --></div>
 <!-- /wp:query -->

wp-content/themes/core/patterns/card-post.php

@@ -6,7 +6,6 @@
  * Categories: cards
  * Description: Post card with featured image, primary category, and post title
  * Keywords: post, card
- * Inserter: yes
  * Block Types: core/query
  */
 ?>

wp-content/themes/core/patterns/post.php

@@ -6,11 +6,12 @@
  * Categories: templates
  * Description: A simple pattern for a single post page - added automatically to new posts
  * Keywords: post, placeholder
- * Inserter: no
+ * Block Types: core/post-content
+ * Post Types: post, wp_template
  */
 ?>
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--50)"><!-- wp:post-terms {"term":"category","textAlign":"center"} /-->
+<!-- wp:group {"metadata":{"name":"Post Header"},"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}},"className":"alignwide","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--50)"><!-- wp:tribe/terms {"onlyPrimaryTerm":true,"align":"center","className":"aligncenter"} /-->
 
 <!-- wp:post-title {"textAlign":"center","level":1,"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|30"}}}} /-->
 
@@ -19,7 +20,7 @@
 <!-- wp:post-date {"textAlign":"center","fontSize":"10"} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:post-featured-image {"width":"1136px","align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|40","right":"0","left":"0"}}}} /-->
+<!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|40","right":"0","left":"0"}}},"className":"alignwide"} /-->
 
 <!-- wp:paragraph -->
 <p>Aenean ut aliquet quam, sit amet ullamcorper dolor. Aliquam nec ultricies sem. Nunc malesuada elementum libero non accumsan. Nam at venenatis odio. Aenean euismod rhoncus nulla id varius. Ut ultrices velit vel dui gravida ullamcorper. Proin lobortis leo et venenatis consectetur. Aliquam iaculis ipsum id tristique euismod. Donec tempor a purus ut tempus.</p>
@@ -37,11 +38,11 @@
 <p>Phasellus fermentum non nunc fringilla mollis. Quisque tincidunt, mauris in eleifend euismod, turpis augue sodales felis, quis lacinia ex leo non nisi. Proin luctus mauris rhoncus libero suscipit ornare. Nullam turpis magna, aliquam ut dictum at, commodo eu nulla. Cras aliquet volutpat tincidunt. Sed pharetra iaculis quam, id vestibulum nisi efficitur id. Maecenas ut risus a arcu volutpat placerat sed at ante. Nulla sed ultrices odio. Ut cursus imperdiet tortor, vitae sodales turpis placerat at. Proin fringilla ligula eget leo dignissim finibus. Vestibulum id quam varius, suscipit est sit amet, maximus erat.</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:post-terms {"term":"post_tag","separator":"","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}},"className":"is-tags"} /-->
+<!-- wp:tribe/terms {"taxonomyToUse":"post_tag","hasLinks":true,"className":"is-style-pills","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} /-->
 
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained","contentSize":"1268px"}} -->
-<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"style":{"spacing":{"margin":{"top":"0"}}},"className":"is-style-small"} -->
-<h2 class="wp-block-heading is-style-small" style="margin-top:0">Related Posts</h2>
+<!-- wp:group {"metadata":{"name":"Related Posts"},"align":"grid","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|50"}}},"className":"aligngrid","layout":{"type":"default"}} -->
+<div class="wp-block-group aligngrid" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|40"}}},"className":"is-style-small"} -->
+<h2 class="wp-block-heading is-style-small" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--40)">Related Posts</h2>
 <!-- /wp:heading -->
 
 <!-- wp:query {"queryId":0,"query":{"perPage":"3","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[]}} -->

wp-content/themes/core/templates/search.html

@@ -23,7 +23,7 @@ <h1 class="wp-block-heading has-text-align-center" style="margin-top:0;margin-bo
 
 <!-- wp:tribe/post-permalink {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","right":"0","bottom":"0","left":"0"}}}} /-->
 
-<!-- wp:post-title {"isLink":true,"className":"a-hidden-link-cover"} /--></div>
+<!-- wp:read-more {"className":"a-link-cover"} /--></div>
 <!-- /wp:group -->
 <!-- /wp:post-template -->