Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom labelling/naming of blocks in List View #42605

Closed
wants to merge 3 commits into from

Conversation

getdave
Copy link
Contributor

@getdave getdave commented Jul 21, 2022

Screen Capture on 2022-07-21 at 16-23-01

What?

In #33583 we learnt that many people want to be able to give blocks in the List View a custom name/label.

This PR is an experiment to explores how this might work. Currently it works for Group blocks only and allows you to double click on the block name and provide an alternative label for the block.

Why?

It's an important feature to allow users to distinguish between blocks in the List View. Given that they are currently all labelled by the block name it can be difficult to distinguish between them.

How?

This builds upon the great work in #41855 and now also from #40393.

In short it:

  • adds Block Supports definitions for __experimentalMetadata. done separately in Adds block supports for metadata #43986
  • enables support for this on the Group Block.
  • adds automatic generation of the __experimentalLabel method on block settings to utilise the name attribute if it is set.
  • uses the custom label stored in the block's metadata attribute if set.
  • updates List View block nodes to have an "editable" mode which is accessible on double click (a11y has been considered an an alternative method will be implemented prior to merging this PR).
  • when the user "commits" their custom label, the block's metadata attribute is updated.

The approach of using a block attribute to store this alias is up for debate. I favour it because , by virtue of it being a block attribute, it is portable between editors/posts...etc. This may not be desirable however and we may prefer to store this information in the editor settings on a per editor basis. Solution shipped in #43986.

Todo

  • Arrow keys don't work correctly in the input. I think it should behave as a modal does where the events don't bubble out.
  • Escape could cancel editing - currently it closes List View.
  • Drag and drop should also probably be disabled while editing.
  • Disable for blocks except Group!
  • A11y - add "edit" interaction to the 3 dots option menu to ensure interaction is accessible via keyboard
  • Automatically generate __experimentalLabel function on block settings if metadata support for name is enabled on block.
  • Update to __experimentalMetadata to bring into line with Try: Add metadata attribute to blocks allowing section naming and future semantic meta information #40393
  • Lock down feature to Group block only (again).
  • Consider updating packages/block-editor/src/components/block-title/use-block-display-title.js to utilise metadata to retrieve the custom name. This will greatly expand the scope of the PR.
  • Fix bug where Cmd + A (i.e. "Select all") in the input element, triggers selection of all blocks in the List View.
  • Add tests for hasBlockMetadataSupport
  • Make hasBlockMetadataSupport __experimental.
  • Fix ListView item focus handling when hitting ENTER - currently returns to canvas.

Potential followup features

The following features probably won't make the cut for this PR but could/should be considered for future:

Testing Instructions

  • Add a few Group blocks to a Post.
  • Toggle List View.
  • Double click the name of the Group blocks to enter "editing mode".
  • Enter a custom label and hit ENTER.
  • See the label persisted as an alias attribute.
  • Reload page. See custom label is preserved.

Screenshots or screencast

Screen.Capture.on.2022-08-01.at.16-06-07.mov

Closes #33583

Co-authored-by: Alex Stine [email protected]
Co-authored-by: Jorge Costa [email protected]
Co-authored-by: Andrei Draganescu [email protected]

@getdave getdave added [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Type] Feature New feature to highlight in changelogs. [Type] Experimental Experimental feature or API. labels Jul 21, 2022
@getdave getdave self-assigned this Jul 21, 2022
@getdave getdave requested review from richtabor and talldan July 21, 2022 15:18
@getdave getdave requested a review from bph July 21, 2022 15:20
@getdave getdave marked this pull request as ready for review July 21, 2022 15:21
@github-actions
Copy link

github-actions bot commented Jul 21, 2022

Size Change: +845 B (0%)

Total Size: 1.51 MB

Filename Size Change
build/block-editor/index.min.js 213 kB +753 B (0%)
build/block-editor/style-rtl.css 15 kB +44 B (0%)
build/block-editor/style.css 15 kB +39 B (0%)
build/block-library/index.min.js 203 kB +9 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.28 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 451 B
build/block-directory/index.min.js 7.01 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.26 kB
build/block-editor/content.css 4.25 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 126 B
build/block-library/blocks/audio/theme.css 126 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 629 B
build/block-library/blocks/button/style.css 628 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 421 B
build/block-library/blocks/columns/style.css 421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.63 kB
build/block-library/blocks/cover/style.css 1.62 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view-interactivity.min.js 317 B
build/block-library/blocks/file/view.min.js 375 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 1.42 kB
build/block-library/blocks/image/style.css 1.41 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/image/view-interactivity.min.js 1.83 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 712 B
build/block-library/blocks/navigation-link/editor.css 711 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.23 kB
build/block-library/blocks/navigation/style.css 2.22 kB
build/block-library/blocks/navigation/view-interactivity.min.js 988 B
build/block-library/blocks/navigation/view-modal.min.js 2.85 kB
build/block-library/blocks/navigation/view.min.js 469 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 401 B
build/block-library/blocks/page-list/editor.css 401 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 319 B
build/block-library/blocks/post-featured-image/style.css 319 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 314 B
build/block-library/blocks/post-template/style.css 314 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 302 B
build/block-library/blocks/query-pagination/style.css 299 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 450 B
build/block-library/blocks/query/editor.css 449 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 607 B
build/block-library/blocks/search/style.css 607 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 631 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.44 kB
build/block-library/blocks/social-links/style.css 1.43 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 432 B
build/block-library/blocks/table/editor.css 432 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.1 kB
build/block-library/editor.css 12.1 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 13.8 kB
build/block-library/style.css 13.8 kB
build/block-library/theme-rtl.css 688 B
build/block-library/theme.css 693 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.2 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 932 B
build/commands/style.css 929 B
build/components/index.min.js 245 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/compose/index.min.js 12.1 kB
build/core-commands/index.min.js 2.58 kB
build/core-data/index.min.js 16.8 kB
build/customize-widgets/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.46 kB
build/customize-widgets/style.css 1.45 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.38 kB
build/date/index.min.js 17.8 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.64 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/index.min.js 35.5 kB
build/edit-post/style-rtl.css 7.62 kB
build/edit-post/style.css 7.61 kB
build/edit-site/index.min.js 90.8 kB
build/edit-site/style-rtl.css 13.2 kB
build/edit-site/style.css 13.2 kB
build/edit-widgets/index.min.js 16.9 kB
build/edit-widgets/style-rtl.css 4.54 kB
build/edit-widgets/style.css 4.54 kB
build/editor/index.min.js 45.5 kB
build/editor/style-rtl.css 3.53 kB
build/editor/style.css 3.52 kB
build/element/index.min.js 4.82 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.56 kB
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/index.min.js 10.4 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.64 kB
build/keycodes/index.min.js 1.87 kB
build/list-reusable-blocks/index.min.js 2.2 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 1.99 kB
build/nux/style-rtl.css 735 B
build/nux/style.css 732 B
build/patterns/index.min.js 2.69 kB
build/patterns/style-rtl.css 240 B
build/patterns/style.css 240 B
build/plugins/index.min.js 1.79 kB
build/preferences-persistence/index.min.js 1.84 kB
build/preferences/index.min.js 1.24 kB
build/primitives/index.min.js 943 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 958 B
build/react-i18n/index.min.js 615 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.7 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 11 kB
build/router/index.min.js 1.78 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 1.85 kB
build/sync/index.min.js 53.8 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.73 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 958 B
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.16 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@BrunoAHVincent
Copy link

This excellent, but how do I implement this for testing?

@ryanwelcher
Copy link
Contributor

This has the added benefit of allowing a block to have a unique identifier that can be accessed via code as well. AFAIK, there is currently no way for blocks for one block to save a reference to another block instance. This might address that issue as well.

@richtabor
Copy link
Member

Took it for a spin and seems to work well!

A couple notes:

  1. If a list item is being renamed and I click off of it, perhaps the item should close its edit state
  2. We'll want to tweak the design a bit to reduce the UI moving/ease the borders

Screen recording

CleanShot.2022-07-21.at.11.59.45.mp4

@paaljoachim
Copy link
Contributor

Hey @BrunoAHVincent

I use this approach for testing a PR: https://make.wordpress.org/design/2021/03/03/testing-a-gutenberg-pull-request-pr/

Thank you very much for working on this PR @getdave !

@spencerfinnell
Copy link

Thank you so much for starting this @getdave. On top of @richtabor's suggestions, I'll add: it would be nice if the alias was automatically selected/highlighted when entering the edit state.

@alexstine
Copy link
Contributor

Let's do some thinking about this for keyboard users. How would they edit as double clicking is not possible?

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for picking this one up @getdave, I'm very excited to see you exploring an implementation here! Just left a couple of comments from some thoughts I'd had about how we might store the data in block attributes, and whether we should consider the future possibility of other metadata-like values that wouldn't be used on the site frontend.

packages/block-library/src/group/block.json Outdated Show resolved Hide resolved
docs/reference-guides/core-blocks.md Outdated Show resolved Hide resolved
@pixelverbieger
Copy link

nice feature 👍

Can we take the name and make it the element's ID and/or class as well?
And (to be perfect) attach it to the surrounding (parent) block-DIV as a class,
e.g. div id="block-16" class="widget widget_block customname"?

@getdave
Copy link
Contributor Author

getdave commented Jul 22, 2022

Screen.Capture.on.2022-07-22.at.12-38-43.mov

Thanks for the feedback everyone. I've made some changes:

If a list item is being renamed and I click off of it, perhaps the item should close its edit state

✅ This now works as suggested.

We'll want to tweak the design a bit to reduce the UI moving/ease the borders

@richtabor I'd love some further input on whether you think this works better now I've tweaked it?

it would be nice if the alias was automatically selected/highlighted when entering the edit state.

✅ This is now implemented.


Some other elements I haven't managed to address (yet):

Let's do some thinking about this for keyboard users. How would they edit as double clicking is not possible?

@alexstine I was thinking perhaps we'd have a button next to the label which you could "click" to activate editing mode. This could be visually hidden (or not as required). However, the problem is that this would mean we'd have a button within a button because the whole list view "node" is a button.

What can we do here? Can anyone see a workaround that might work? What other types of interaction have you come across for something like this?

@getdave getdave added the Needs Accessibility Feedback Need input from accessibility label Jul 22, 2022
@getdave getdave requested review from scruffian and draganescu July 22, 2022 11:40
@jameskoster
Copy link
Contributor

Adding a 'rename' item to the ellipsis menu could assist general discovery and keyboard usability of this feature. Ideally there should be a quicker way to invoke edit mode though.

I think it might be good to reflect the custom name in the Inspector.

Do we need the block-type suffix? It's adding quite a bit of noise 🤔

It's not working for template parts:

template.part.mp4

@jameskoster jameskoster requested a review from a team July 22, 2022 12:25
@getdave getdave removed Needs Accessibility Feedback Need input from accessibility [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). labels Jul 27, 2023
@github-actions

This comment was marked as resolved.

1 similar comment
@github-actions

This comment was marked as resolved.

@getdave getdave removed the [Feature] Block API API that allows to express the block paradigm. label Jul 27, 2023
@github-actions

This comment was marked as resolved.

@getdave getdave removed the [Type] Feature New feature to highlight in changelogs. label Jul 27, 2023
@github-actions

This comment was marked as outdated.

@getdave getdave removed the [Type] Experimental Experimental feature or API. label Jul 27, 2023
@WordPress WordPress deleted a comment from github-actions bot Jul 27, 2023
@WordPress WordPress deleted a comment from github-actions bot Jul 27, 2023
@richtabor
Copy link
Member

Circling back here; is there a blocker here?

@getdave
Copy link
Contributor Author

getdave commented Aug 10, 2023

No blocker. The next steps are as per #42605 (comment).

I've been away and just dealing with some urgent pings before circling back to this PR.

@getdave getdave force-pushed the try/list-view-custom-group-labels branch from 279c583 to 6f6e51b Compare August 16, 2023 09:48
@getdave getdave force-pushed the try/list-view-custom-group-labels branch from 6f6e51b to 7f6f77f Compare August 16, 2023 09:49
@alexstine
Copy link
Contributor

I cannot test this for accessibility until the rename option is added to the block options menu in the list view. There is no easy way to simulate a double click using the keyboard.

@draganescu
Copy link
Contributor

I wonder if it is OK that we're building the inline edit component into the list view. Should we not have it in the components package and reuse it across the list view, the inspector and the block toolbar? I think this would also work to have this sort of UI interaction properly accessible (announcements, labeling, marup wise).

@getdave
Copy link
Contributor Author

getdave commented Aug 21, 2023

@alexstine This PR has become rather stale and was proving hard to refactor to marry up with the changes in trunk since it was raised. After the explorations using a Modal in #53735 I decided to start a new PR to explore "inline editing" again. You can find this at #53852.

@draganescu I think that's a great suggestion. Thanks for raising it. I wonder whether it would be best to first use a simple component in this PR and then when more use cases become evident extract a reusable component?

@getdave
Copy link
Contributor Author

getdave commented Aug 21, 2023

Closing this now in favour of #53852 as it has a stronger approach that seems better for accessibility.

This PR has been incredibly useful as a testing ground and also for gathering a11y and UX feedback. In fact a lot of code has been harvested for #53852 so it was worth while.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Type] Enhancement A suggestion for improvement.
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

List View: Explore Naming Blocks