From e74195631a2a2634e093896d0a82e5889a6031b7 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 8 Apr 2024 04:44:32 +0200 Subject: [PATCH 1/9] [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. --- lib/compat/wordpress-6.6/blocks.php | 13 +++++++++++++ lib/load.php | 1 + .../edit-site/src/components/page-patterns/index.js | 6 ++++-- .../src/components/page-patterns/use-patterns.js | 1 + 4 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 lib/compat/wordpress-6.6/blocks.php diff --git a/lib/compat/wordpress-6.6/blocks.php b/lib/compat/wordpress-6.6/blocks.php new file mode 100644 index 0000000000000..71a85abf2fa7d --- /dev/null +++ b/lib/compat/wordpress-6.6/blocks.php @@ -0,0 +1,13 @@ + ( { syncStatus: patternPost.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full, title: patternPost.title.raw, type: patternPost.type, + description: patternPost.excerpt.raw, patternPost, } ); From 4ae4925c9971013c041d8d63085ea62a771e726c Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 8 Apr 2024 04:57:29 +0200 Subject: [PATCH 2/9] CS fix: Remove duplicate empty line --- lib/compat/wordpress-6.6/blocks.php | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/compat/wordpress-6.6/blocks.php b/lib/compat/wordpress-6.6/blocks.php index 71a85abf2fa7d..2492c27f209ad 100644 --- a/lib/compat/wordpress-6.6/blocks.php +++ b/lib/compat/wordpress-6.6/blocks.php @@ -10,4 +10,3 @@ */ add_post_type_support( 'wp_block', 'excerpt' ); - From 48e1db2b1b3bb4856210f199796f759b46961b68 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 12 Apr 2024 09:20:02 +0200 Subject: [PATCH 3/9] Place the description before the instructions. --- .../edit-site/src/components/page-patterns/index.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js index b550ae20f16df..5989ccca0e7f2 100644 --- a/packages/edit-site/src/components/page-patterns/index.js +++ b/packages/edit-site/src/components/page-patterns/index.js @@ -145,17 +145,18 @@ function Preview( { item, categoryId, viewType } ) { const isCustomPattern = isUserPattern || ( isTemplatePart && item.isCustom ); const ariaDescriptions = []; + + if ( item.description ) { + ariaDescriptions.push( item.description ); + } + if ( isCustomPattern ) { // User patterns can be edited and deleted, so include some help text. ariaDescriptions.push( - __( 'Press Enter to edit, or Delete to delete the pattern.' ) + __( '—Press Enter to edit, or Delete to delete the pattern.' ) ); } - if ( item.description ) { - ariaDescriptions.push( item.description ); - } - const [ backgroundColor ] = useGlobalStyle( 'color.background' ); const { onClick } = useLink( { postType: item.type, From b2772225322746325a0169245d3443c6111cbf7f Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 12 Apr 2024 10:46:03 +0200 Subject: [PATCH 4/9] 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. --- .../src/components/page-patterns/index.js | 41 +++---------------- 1 file changed, 6 insertions(+), 35 deletions(-) diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js index 5989ccca0e7f2..fae0d1a4583ac 100644 --- a/packages/edit-site/src/components/page-patterns/index.js +++ b/packages/edit-site/src/components/page-patterns/index.js @@ -141,21 +141,6 @@ function Preview( { item, categoryId, viewType } ) { 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 ( item.description ) { - ariaDescriptions.push( item.description ); - } - - if ( isCustomPattern ) { - // User patterns can be edited and deleted, so include some help text. - ariaDescriptions.push( - __( '—Press Enter to edit, or Delete to delete the pattern.' ) - ); - } const [ backgroundColor ] = useGlobalStyle( 'color.background' ); const { onClick } = useLink( { @@ -174,16 +159,7 @@ function Preview( { item, categoryId, viewType } ) { - `${ descriptionId }-${ index }` - ) - .join( ' ' ) - : undefined - } + ariaDescribedBy={ item.description ? descriptionId : undefined } > { isEmpty && isTemplatePart && __( 'Empty template part' ) } { isEmpty && ! isTemplatePart && __( 'Empty pattern' ) } @@ -196,16 +172,11 @@ function Preview( { item, categoryId, viewType } ) { ) } - { ! isNonUserPattern && - ariaDescriptions.map( ( ariaDescription, index ) => ( - - ) ) } + { ! isNonUserPattern && item.description && ( + + ) } ); } From 139b48752d319b56da4eb372fb028b77974fb4ee Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 12 Apr 2024 13:10:12 +0200 Subject: [PATCH 5/9] 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. --- .../src/components/page-patterns/index.js | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js index fae0d1a4583ac..65d52c73d36ce 100644 --- a/packages/edit-site/src/components/page-patterns/index.js +++ b/packages/edit-site/src/components/page-patterns/index.js @@ -119,16 +119,25 @@ const SYNC_FILTERS = [ ]; function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) { - if ( item.type === PATTERN_TYPES.theme ) { - return children; - } return ( @@ -138,7 +147,6 @@ 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; @@ -172,7 +180,7 @@ function Preview( { item, categoryId, viewType } ) { ) } - { ! isNonUserPattern && item.description && ( + { item.description && ( From d70de968e49e2a8dfc4f8064e8ffa5d002ae536a Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 22 Apr 2024 04:50:17 +0200 Subject: [PATCH 6/9] 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. --- lib/compat/wordpress-6.6/{blocks.php => post.php} | 5 ++++- lib/load.php | 2 +- .../edit-site/src/components/page-patterns/index.js | 13 +------------ .../src/components/page-patterns/style.scss | 4 ++++ 4 files changed, 10 insertions(+), 14 deletions(-) rename lib/compat/wordpress-6.6/{blocks.php => post.php} (50%) diff --git a/lib/compat/wordpress-6.6/blocks.php b/lib/compat/wordpress-6.6/post.php similarity index 50% rename from lib/compat/wordpress-6.6/blocks.php rename to lib/compat/wordpress-6.6/post.php index 2492c27f209ad..716c3dd8f1ceb 100644 --- a/lib/compat/wordpress-6.6/blocks.php +++ b/lib/compat/wordpress-6.6/post.php @@ -8,5 +8,8 @@ /** * 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_post_type_support( 'wp_block', 'excerpt' ); +add_action( 'init', 'gutenberg_add_excerpt_support_to_wp_block' ); \ No newline at end of file diff --git a/lib/load.php b/lib/load.php index 3054144364e06..4afe188ab5c29 100644 --- a/lib/load.php +++ b/lib/load.php @@ -131,7 +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/blocks.php'; +require __DIR__ . '/compat/wordpress-6.6/post.php'; // Experimental features. require __DIR__ . '/experimental/block-editor-settings-mobile.php'; diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js index 132a326ab355c..66d59dd888c1b 100644 --- a/packages/edit-site/src/components/page-patterns/index.js +++ b/packages/edit-site/src/components/page-patterns/index.js @@ -123,21 +123,10 @@ function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) { diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index 6c616426aa389..db6021213a09a 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -72,6 +72,10 @@ // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; } + + &[aria-disabled="true"] { + cursor: default; + } } } From 1aba8f291e57c547c453431e1b15914225cac645 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 22 Apr 2024 04:58:46 +0200 Subject: [PATCH 7/9] CS fix: Add empty line at end of file --- lib/compat/wordpress-6.6/post.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/compat/wordpress-6.6/post.php b/lib/compat/wordpress-6.6/post.php index 716c3dd8f1ceb..42707989fc082 100644 --- a/lib/compat/wordpress-6.6/post.php +++ b/lib/compat/wordpress-6.6/post.php @@ -12,4 +12,4 @@ 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' ); \ No newline at end of file +add_action( 'init', 'gutenberg_add_excerpt_support_to_wp_block' ); From 8985a13c1d85923f7948d9f7206f8ab35127eb2a Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 22 Apr 2024 16:13:19 +0100 Subject: [PATCH 8/9] Fix pattern preview dimensions --- .../edit-site/src/components/page-patterns/index.js | 1 + .../edit-site/src/components/page-patterns/style.scss | 10 ++++++++++ 2 files changed, 11 insertions(+) diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js index 66d59dd888c1b..90c65cee677ed 100644 --- a/packages/edit-site/src/components/page-patterns/index.js +++ b/packages/edit-site/src/components/page-patterns/index.js @@ -331,6 +331,7 @@ export default function DataviewsPatterns() { ), enableSorting: false, enableHiding: false, + width: '1%', }, { header: __( 'Title' ), diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index db6021213a09a..6a602ced638f0 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -56,6 +56,16 @@ } } + &.is-viewtype-table { + width: 240px; + flex-grow: 0; + border-radius: 2px; + + .page-patterns-preview-field__button { + border-radius: 2px; + } + } + .page-patterns-preview-field__button { box-shadow: none; border: none; From f77e84f5cbc72fa94d7ab6ca1337b72f4b60adc6 Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 22 Apr 2024 16:15:14 +0100 Subject: [PATCH 9/9] Update dimensions to match templates --- packages/edit-site/src/components/page-patterns/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index 6a602ced638f0..c8d23fc1843b1 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -57,7 +57,7 @@ } &.is-viewtype-table { - width: 240px; + width: 96px; flex-grow: 0; border-radius: 2px;