[Data Views] User patterns: Use excerpt as description (#60549)

* [Data Views] User patterns: Use excerpt as description

Enable excerpts on the w_block post type.

On the Site Editor Pattern pages, use the excerpt as the description for user created patterns.

* CS fix: Remove duplicate empty line

* Place the description before the instructions.

* Remove the incorrect instructions from ariaDescribedBy

- Removes the instructions from `ariaDescribedBy`, since they were not working and are not needed anymore.

- Because only one piece of content is added to `ariaDescribedBy`, the `ariaDescriptions` array and the `.map()` are not needed anymore, and are removed.

* Try using the button and the description for all pattern types.

- Remove the condition that hides the item description on non user patterns.
- Use the button for all pattern types and for parts. Disable the button for patterns that are not editable.
- Add a title attribute on the non user patterns, to try to avoid confusion for sighted users that clicks the disabled button.

* Remove title attribute and replace cursor style

Rename blocks.php to post.php.
Remove the title attribute from the button.
Reset the cursor style to the default when the button is disabled.

* CS fix: Add empty line at end of file

* Fix pattern preview dimensions

* Update dimensions to match templates

---------

Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: unscripted <cwhitmore@git.wordpress.org>

lib/compat/wordpress-6.6/post.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * Temporary compatibility shims for block APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Adds support for excerpt to the wp_block post type.
+ */
+function gutenberg_add_excerpt_support_to_wp_block() {
+	add_post_type_support( 'wp_block', 'excerpt' );
+}
+
+add_action( 'init', 'gutenberg_add_excerpt_support_to_wp_block' );

lib/load.php

@@ -131,6 +131,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.6/option.php';
 require __DIR__ . '/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php';
 require __DIR__ . '/compat/wordpress-6.6/rest-api.php';
+require __DIR__ . '/compat/wordpress-6.6/post.php';
 
 // Experimental features.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';

packages/edit-site/src/components/page-patterns/index.js

@@ -112,16 +112,14 @@ const SYNC_FILTERS = [
 ];
 
 function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
-	if ( item.type === PATTERN_TYPES.theme ) {
-		return children;
-	}
 	return (
 		<button
 			className="page-patterns-preview-field__button"
 			type="button"
-			onClick={ onClick }
+			onClick={ item.type !== PATTERN_TYPES.theme ? onClick : undefined }
 			aria-label={ item.title }
 			aria-describedby={ ariaDescribedBy }
+			aria-disabled={ item.type === PATTERN_TYPES.theme }
 		>
 			{ children }
 		</button>
@@ -131,21 +129,8 @@ function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
 function Preview( { item, categoryId, viewType } ) {
 	const descriptionId = useId();
 	const isUserPattern = item.type === PATTERN_TYPES.user;
-	const isNonUserPattern = item.type === PATTERN_TYPES.theme;
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
 	const isEmpty = ! item.blocks?.length;
-	// Only custom patterns or custom template parts can be renamed or deleted.
-	const isCustomPattern =
-		isUserPattern || ( isTemplatePart && item.isCustom );
-	const ariaDescriptions = [];
-	if ( isCustomPattern ) {
-		// User patterns don't have descriptions, but can be edited and deleted, so include some help text.
-		ariaDescriptions.push(
-			__( 'Press Enter to edit, or Delete to delete the pattern.' )
-		);
-	} else if ( item.description ) {
-		ariaDescriptions.push( item.description );
-	}
 
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const { onClick } = useLink( {
@@ -164,16 +149,7 @@ function Preview( { item, categoryId, viewType } ) {
 			<PreviewWrapper
 				item={ item }
 				onClick={ onClick }
-				ariaDescribedBy={
-					ariaDescriptions.length
-						? ariaDescriptions
-								.map(
-									( _, index ) =>
-										`${ descriptionId }-${ index }`
-								)
-								.join( ' ' )
-						: undefined
-				}
+				ariaDescribedBy={ item.description ? descriptionId : undefined }
 			>
 				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
 				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
@@ -186,16 +162,11 @@ function Preview( { item, categoryId, viewType } ) {
 					</Async>
 				) }
 			</PreviewWrapper>
-			{ ! isNonUserPattern &&
-				ariaDescriptions.map( ( ariaDescription, index ) => (
-					<div
-						key={ index }
-						hidden
-						id={ `${ descriptionId }-${ index }` }
-					>
-						{ ariaDescription }
-					</div>
-				) ) }
+			{ item.description && (
+				<div hidden id={ descriptionId }>
+					{ item.description }
+				</div>
+			) }
 		</div>
 	);
 }
@@ -344,6 +315,7 @@ export default function DataviewsPatterns() {
 				),
 				enableSorting: false,
 				enableHiding: false,
+				width: '1%',
 			},
 			{
 				header: __( 'Title' ),

packages/edit-site/src/components/page-patterns/style.scss

@@ -56,6 +56,16 @@
 			}
 		}
 
+		&.is-viewtype-table {
+			width: 96px;
+			flex-grow: 0;
+			border-radius: 2px;
+
+			.page-patterns-preview-field__button {
+				border-radius: 2px;
+			}
+		}
+
 		.page-patterns-preview-field__button {
 			box-shadow: none;
 			border: none;
@@ -72,6 +82,10 @@
 				// Windows High Contrast mode will show this outline, but not the box-shadow.
 				outline: 2px solid transparent;
 			}
+
+			&[aria-disabled="true"] {
+				cursor: default;
+			}
 		}
 	}
 

packages/edit-site/src/components/page-patterns/use-patterns.js

@@ -223,6 +223,7 @@ const convertPatternPostToItem = ( patternPost, categories ) => ( {
 	syncStatus: patternPost.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full,
 	title: patternPost.title.raw,
 	type: patternPost.type,
+	description: patternPost.excerpt.raw,
 	patternPost,
 } );