Block theme: Update the layout of the single pattern detail page.

Fixes #644, fixes #646
WordPress · Mar 26, 2024 · 6c63864 · 6c63864
1 parent 309cf66
commit 6c63864
Show file tree

Hide file tree

Showing 12 changed files with 144 additions and 124 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
@@ -46,7 +46,7 @@
 				<!-- wp:post-title {"isLink":true,"fontSize":"small","fontFamily":"inter"} /-->
 
 				<!-- wp:button {"className":"is-style-text is-small is-edit-link","metadata":{"bindings":{"text":{"source":"wporg-pattern/edit-label"},"url":{"source":"wporg-pattern/edit-url"}}}} -->
-				<div class="wp-block-button is-style-text is-small is-edit-link"><a href="#" class="wp-block-button__link wp-element-button">Edit</a></div>
+				<div class="wp-block-button is-style-text is-small is-edit-link"><a href="#" class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Edit', 'wporg-patterns' ); ?></a></div>
 				<!-- /wp:paragraph -->
 			</div>
 			<!-- /wp:group -->

diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/patterns/single-my-pattern.php b/public_html/wp-content/themes/wporg-pattern-directory-2024/patterns/single-my-pattern.php
@@ -13,8 +13,8 @@
 }
 
 ?>
-<!-- wp:group {"layout":{"type":"default"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"align":"wide"} -->
-<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);">
+<!-- wp:group {"layout":{"type":"default"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|50"}}},"align":"wide"} -->
+<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);">
 	<?php if ( $notice ) : ?>
 	<!-- wp:wporg/notice {"type":"<?php echo $notice_type; ?>","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} -->
 	<div class="wp-block-wporg-notice is-<?php echo $notice_type; ?>-notice" style="margin-bottom:var(--wp--preset--spacing--30);">
@@ -28,44 +28,43 @@
 	<!-- wp:wporg/status-notice /-->
 	<?php endif; ?>
 
-	<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"},"align":"wide"} -->
-	<div class="wp-block-group alignwide">
-		<!-- wp:post-title {"fontSize":"heading-3"} /-->
+	<!-- wp:post-title {"fontSize":"heading-3"} /-->
 
+	<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"},"align":"wide"} -->
+	<div class="wp-block-group alignwide">
 		<!-- wp:wporg/copy-button /-->
+		<!-- wp:wporg/favorite-button /-->
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:spacer {"height":"var:preset|spacing|50","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
-	<div style="margin-top:0;margin-bottom:0;height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- wp:spacer {"height":"var:preset|spacing|40","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+	<div style="margin-top:0;margin-bottom:0;height:var(--wp--preset--spacing--40)" aria-hidden="true" class="wp-block-spacer"></div>
 	<!-- /wp:spacer -->
 
-	<!-- wp:wporg/pattern-view-control {"align":"full"} -->
+	<!-- wp:wporg/pattern-view-control {"align":"full","style":{"spacing":{"margin":{"top":"0"}}}} -->
 		<!-- wp:wporg/pattern-preview /-->
 	<!-- /wp:wporg/pattern-view-control -->
 
-	<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"},"align":"wide"} -->
-	<div class="wp-block-group alignwide">
-		<!-- wp:post-terms {"term":"wporg-pattern-category"} /-->
-
-		<!-- wp:wporg/favorite-button /-->
-	</div>
-	<!-- /wp:group -->
-</div>
-<!-- /wp:group -->
+	<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}},"align":"wide"} -->
+	<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--30)">
+		<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"},"style":{"spacing":{"blockGap":"var:preset|spacing|10"}}} -->
+		<div class="wp-block-group">
+			<!-- wp:paragraph -->
+			<p><?php esc_html_e( 'Tags:', 'wporg-patterns' ); ?></p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:post-terms {"term":"wporg-pattern-category","fontSize":"normal"} /-->
+		</div>
+		<!-- /wp:group -->
 
-<!-- wp:group {"layout":{"type":"constrained"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}},"backgroundColor":"light-grey-2","align":"full"} -->
-<div class="wp-block-group has-light-grey-2-background-color has-background alignfull" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);">
-	<!-- wp:group {"align":"wide"} -->
-	<div class="wp-block-group alignwide">
-		<!-- wp:buttons {"layout":{"type":"flex"}} -->
+		<!-- wp:buttons {"layout":{"type":"flex"},"style":{"spacing":{"blockGap":"var:preset|spacing|10"}}} -->
 		<div class="wp-block-buttons">
-			<!-- wp:button {"className":"is-style-fill is-small","metadata":{"bindings":{"url":{"source":"wporg-pattern/edit-url"}}}} -->
-			<div class="wp-block-button is-small is-style-fill"><a href="[pattern_edit_link]" class="wp-block-button__link wp-element-button">Edit pattern</a></div>
+			<!-- wp:button {"className":"is-style-toggle is-small","metadata":{"bindings":{"text":{"source":"wporg-pattern/edit-label"},"url":{"source":"wporg-pattern/edit-url"}}}} -->
+			<div class="wp-block-button is-style-toggle is-small"><a href="[pattern_edit_link]" class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Edit', 'wporg-patterns' ); ?></a></div>
 			<!-- /wp:button -->
 
-			<!-- wp:button {"className":"is-style-outline is-small"} -->
-			<div class="wp-block-button is-style-outline is-small"><a href="[pattern_draft_link]" class="wp-block-button__link wp-element-button">Revert to draft</a></div>
+			<!-- wp:button {"className":"is-style-toggle is-small"} -->
+			<div class="wp-block-button is-style-toggle is-small"><a href="[pattern_draft_link]" class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Revert to draft', 'wporg-patterns' ); ?></a></div>
 			<!-- /wp:button -->
 
 			<!-- wp:wporg/delete-button /-->

diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/patterns/single-pattern.php b/public_html/wp-content/themes/wporg-pattern-directory-2024/patterns/single-pattern.php
@@ -19,8 +19,8 @@
 }
 
 ?>
-<!-- wp:group {"layout":{"type":"default"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"align":"wide"} -->
-<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);">
+<!-- wp:group {"layout":{"type":"default"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|50"}}},"align":"wide"} -->
+<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);">
 	<?php if ( $notice ) : ?>
 	<!-- wp:wporg/notice {"type":"<?php echo $notice_type; ?>","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} -->
 	<div class="wp-block-wporg-notice is-<?php echo $notice_type; ?>-notice" style="margin-bottom:var(--wp--preset--spacing--30);">
@@ -32,51 +32,58 @@
 	<!-- /wp:wporg/notice -->
 	<?php endif; ?>
 
-	<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"},"align":"wide"} -->
-	<div class="wp-block-group alignwide">
-		<!-- wp:post-title {"fontSize":"heading-3"} /-->
+	<!-- wp:post-title {"fontSize":"heading-3"} /-->
 
+	<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"},"align":"wide"} -->
+	<div class="wp-block-group alignwide">
 		<!-- wp:wporg/copy-button /-->
+		<!-- wp:wporg/favorite-button /-->
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:spacer {"height":"var:preset|spacing|50","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
-	<div style="margin-top:0;margin-bottom:0;height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- wp:spacer {"height":"var:preset|spacing|40","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+	<div style="margin-top:0;margin-bottom:0;height:var(--wp--preset--spacing--40)" aria-hidden="true" class="wp-block-spacer"></div>
 	<!-- /wp:spacer -->
 
-	<!-- wp:wporg/pattern-view-control {"align":"full"} -->
+	<!-- wp:wporg/pattern-view-control {"align":"full","style":{"spacing":{"margin":{"top":"0"}}}} -->
 		<!-- wp:wporg/pattern-preview /-->
 	<!-- /wp:wporg/pattern-view-control -->
 
-	<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"},"align":"wide"} -->
-	<div class="wp-block-group alignwide">
-		<!-- wp:post-terms {"term":"wporg-pattern-category"} /-->
-
-		<!-- wp:wporg/favorite-button /-->
-	</div>
-	<!-- /wp:group -->
+	<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}},"align":"wide"} -->
+	<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--30)">
+		<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"},"style":{"spacing":{"blockGap":"var:preset|spacing|10"}}} -->
+		<div class="wp-block-group">
+			<!-- wp:paragraph -->
+			<p><?php esc_html_e( 'Tags:', 'wporg-patterns' ); ?></p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:post-terms {"term":"wporg-pattern-category","fontSize":"normal"} /-->
+		</div>
+		<!-- /wp:group -->
 
-	<!-- wp:group {"align":"wide"} -->
-	<div class="wp-block-group alignwide">
 		<!-- wp:wporg/report-pattern /-->
 	</div>
 	<!-- /wp:group -->
 </div>
 <!-- /wp:group -->
 
-<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"backgroundColor":"light-grey-2","layout":{"type":"constrained"},"align":"full","className":"wporg-patterns-nested-alignfull"} -->
-<div class="wp-block-group alignfull wporg-patterns-nested-alignfull has-light-grey-2-background-color has-background" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--edge-space)">
+<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|50"},"margin":{"top":"0"}}},"layout":{"type":"constrained"},"align":"full","className":"wporg-patterns-nested-alignfull"} -->
+<div class="wp-block-group alignfull wporg-patterns-nested-alignfull" style="margin-top:0;padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--edge-space)">
 	<!-- wp:group {"align":"wide"} -->
 	<div class="wp-block-group alignwide">
-		<!-- wp:heading {"fontSize":"heading-4"} -->
-		<h2 class="has-heading-4-font-size"><?php esc_html_e( 'More from this designer', 'wporg-patterns' ); ?></h2>
-		<!-- /wp:heading -->
-
-		<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"var:preset|spacing|10"}}} -->
-		<div class="wp-block-group">
-			<!-- wp:avatar {"size":24,"style":{"border":{"radius":"100%"}}} /-->
-
-			<!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"normal"},"elements":{"link":{"color":{"text":"var:preset|color|charcoal-1"}}}},"textColor":"charcoal-1"} /-->
+		<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
+		<div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--40)">
+			<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"large","fontFamily":"inter"} -->
+			<h2 class="wp-block-heading has-inter-font-family has-large-font-size" style="font-style:normal;font-weight:600"><?php esc_html_e( 'More from this designer', 'wporg-patterns' ); ?></h2>
+			<!-- /wp:heading -->
+
+			<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+			<div class="wp-block-group">
+				<!-- wp:avatar {"size":24,"style":{"border":{"radius":"100%"}}} /-->
+
+				<!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"normal"},"elements":{"link":{"color":{"text":"var:preset|color|charcoal-1"}}}},"textColor":"charcoal-1","fontSize":"small"} /-->
+			</div>
+			<!-- /wp:group -->
 		</div>
 		<!-- /wp:group -->
 

diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/copy-button/render.php b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/copy-button/render.php
@@ -10,7 +10,7 @@
 $label = 'small' === $variant ? __( 'Copy', 'wporg-patterns' ) : __( 'Copy pattern', 'wporg-patterns' );
 $label_success = 'small' === $variant ? __( 'Copied', 'wporg-patterns' ) : __( 'Copied!', 'wporg-patterns' );
 
-$classes = [];
+$classes = [ 'is-small' ];
 if ( 'small' === $variant ) {
 	$classes[] = 'is-variant-small';
 	$classes[] = 'is-style-outline';

diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/copy-button/style.scss b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/copy-button/style.scss
@@ -11,6 +11,6 @@
 	}
 
 	&:not(.is-variant-small) .wp-element-button {
-		min-width: 170px;
+		min-width: 120px;
 	}
 }
diff --git a/...c_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/delete-button/render.php b/...c_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/delete-button/render.php
@@ -23,7 +23,7 @@
 
 ?>
 <div
-	<?php echo get_block_wrapper_attributes( [ 'class' => 'is-small is-style-outline' ] ); // phpcs:ignore ?>
+	<?php echo get_block_wrapper_attributes( [ 'class' => 'is-small is-style-toggle' ] ); // phpcs:ignore ?>
 	data-wp-interactive="wporg/patterns/delete-button"
 	data-wp-context="<?php echo esc_attr( $encoded_state ); ?>"
 >
@@ -33,6 +33,14 @@ class="wp-block-button__link wp-element-button"
 		data-wp-bind--disabled="!context.postId"
 		data-wp-on--click="actions.triggerDelete"
 	>
-		<?php echo esc_attr_e( 'Delete pattern', 'wporg-patterns' ); ?>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+			<path fill-rule="evenodd" d="M12 4a3.751 3.751 0 0 0-3.675 3H5v1.5h1.27l.818 8.997a2.75 2.75 0 0 0 2.739 2.501h4.347a2.75 2.75 0 0 0 2.738-2.5L17.73 8.5H19V7h-3.325A3.751 3.751 0 0 0 12 4Zm0 1.5A2.25 2.25 0 0 0 9.878 7h4.244A2.251 2.251 0 0 0 12 5.5Zm4.224 3H7.776l.806 8.861a1.25 1.25 0 0 0 1.245 1.137h4.347a1.25 1.25 0 0 0 1.245-1.137l.805-8.861Z" clip-rule="evenodd"/>
+		</svg>
+		<?php
+		printf(
+			__( 'Delete <span class="screen-reader-text">"%s"</span>', 'wporg-patterns' ),
+			get_the_title( $post_id )
+		);
+		?>
 	</button>
 </div>
diff --git a/...c_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/delete-button/style.scss b/...c_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/delete-button/style.scss
@@ -1,11 +1,17 @@
 .wp-block-wporg-delete-button {
-	--wp--custom--button--outline--color--text: #d63638;
+	.wp-block-button__link {
+		--wp--custom--button--outline--color--text: #d63638 !important;
+		display: flex !important;
+		align-items: center;
+	}
 
-	--wp--custom--button--outline--hover--color--text: var(--wp--preset--color--white);
-	--wp--custom--button--outline--hover--color--background: #d63638;
-	--wp--custom--button--outline--hover--border--color: #d63638;
+	svg {
+		height: 24px;
+		width: 24px;
+		overflow: visible;
 
-	--wp--custom--button--outline--focus--border--color: #d63638;
-	--wp--custom--button--outline--focus--color--background: #d63638;
-	--wp--custom--button--outline--focus--color--text: var(--wp--preset--color--white);
+		path {
+			fill: currentColor;
+		}
+	}
 }