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

List View: add an indicator of when a position type is set for a block #49122

Merged
merged 10 commits into from
Jun 19, 2023

Conversation

andrewserong
Copy link
Contributor

@andrewserong andrewserong commented Mar 16, 2023

What?

Part of #47043

Add an indicator to the block icon in the list view to flag a position type when one is set.

This follows on from feedback in #49085 (comment)

Why?

When a user sets a Group to sticky, it would be helpful for the sticky state to be visible from within the list view.

How?

  • Add a function to get a position type label based on a block's attributes.
  • Update the useBlockDisplayInformation hook to retrieve and pass along the position label and position type.
  • Add a pinSmall icon.
  • When a block's position is set to sticky, display a pin icon next to where the lock icon is displayed.

Testing Instructions

  1. With TT3 active (or any blocks theme with appearanceTools set to true), add a Group block at the root level of a post, or at the root level of a template.
  2. In the sidebar Position panel, select "Sticky".
  3. In the List view, you should see a pin icon flagging that the block is sticky.

Screenshots or screencast

image

@github-actions
Copy link

github-actions bot commented Mar 16, 2023

Size Change: +7.37 kB (+1%)

Total Size: 1.4 MB

Filename Size Change
build/api-fetch/index.min.js 2.29 kB +10 B (0%)
build/block-directory/index.min.js 6.99 kB -57 B (-1%)
build/block-editor/content-rtl.css 4.22 kB -14 B (0%)
build/block-editor/content.css 4.22 kB -13 B (0%)
build/block-editor/index.min.js 196 kB +1.03 kB (+1%)
build/block-editor/style-rtl.css 14.9 kB -3 B (0%)
build/block-library/blocks/avatar/style-rtl.css 104 B +13 B (+14%) ⚠️
build/block-library/blocks/avatar/style.css 104 B +13 B (+14%) ⚠️
build/block-library/blocks/file/view.min.js 0 B -375 B (removed) 🏆
build/block-library/blocks/image/interactivity.min.js 1.34 kB +560 B (+72%) 🆘
build/block-library/blocks/image/style-rtl.css 1.34 kB +266 B (+25%) 🚨
build/block-library/blocks/image/style.css 1.34 kB +270 B (+25%) 🚨
build/block-library/blocks/navigation/editor-rtl.css 2.35 kB +22 B (+1%)
build/block-library/blocks/navigation/editor.css 2.36 kB +22 B (+1%)
build/block-library/blocks/navigation/interactivity.min.js 978 B +2 B (0%)
build/block-library/blocks/navigation/view-modal.min.js 0 B -2.78 kB (removed) 🏆
build/block-library/blocks/navigation/view.min.js 0 B -438 B (removed) 🏆
build/block-library/blocks/post-template/style-rtl.css 314 B +33 B (+12%) ⚠️
build/block-library/blocks/post-template/style.css 314 B +33 B (+12%) ⚠️
build/block-library/blocks/search/style-rtl.css 587 B +153 B (+35%) 🚨
build/block-library/blocks/search/style.css 584 B +152 B (+35%) 🚨
build/block-library/blocks/social-links/style-rtl.css 1.43 kB +28 B (+2%)
build/block-library/blocks/social-links/style.css 1.42 kB +28 B (+2%)
build/block-library/editor-rtl.css 12.2 kB +29 B (0%)
build/block-library/editor.css 12.1 kB +31 B (0%)
build/block-library/index.min.js 201 kB +510 B (0%)
build/block-library/interactivity/runtime.min.js 2.69 kB +8 B (0%)
build/block-library/style-rtl.css 13.5 kB +413 B (+3%)
build/block-library/style.css 13.5 kB +417 B (+3%)
build/blocks/index.min.js 50.8 kB +583 B (+1%)
build/commands/index.min.js 14.9 kB +10 B (0%)
build/components/index.min.js 231 kB -11 B (0%)
build/components/style-rtl.css 11.8 kB -14 B (0%)
build/components/style.css 11.8 kB -14 B (0%)
build/compose/index.min.js 12 kB -51 B (0%)
build/core-commands/index.min.js 2.12 kB +380 B (+22%) 🚨
build/core-data/index.min.js 15.7 kB +5 B (0%)
build/customize-widgets/index.min.js 11.9 kB -55 B (0%)
build/customize-widgets/style-rtl.css 1.46 kB +74 B (+5%) 🔍
build/customize-widgets/style.css 1.45 kB +71 B (+5%) 🔍
build/data/index.min.js 8.25 kB +13 B (0%)
build/edit-post/index.min.js 34 kB +156 B (0%)
build/edit-post/style-rtl.css 7.58 kB +12 B (0%)
build/edit-post/style.css 7.57 kB +12 B (0%)
build/edit-site/index.min.js 70.7 kB +4.82 kB (+7%) 🔍
build/edit-site/style-rtl.css 11.6 kB +695 B (+6%) 🔍
build/edit-site/style.css 11.6 kB +698 B (+6%) 🔍
build/edit-widgets/index.min.js 16.8 kB -60 B (0%)
build/editor/index.min.js 44.6 kB +19 B (0%)
build/format-library/index.min.js 7.62 kB +44 B (+1%)
build/keyboard-shortcuts/index.min.js 1.64 kB -71 B (-4%)
build/plugins/index.min.js 1.77 kB -71 B (-4%)
build/preferences/index.min.js 1.24 kB +1 B (0%)
build/primitives/index.min.js 943 B +2 B (0%)
build/react-i18n/index.min.js 615 B -81 B (-12%) 👏
build/router/index.min.js 1.77 kB +1 B (0%)
build/server-side-render/index.min.js 1.94 kB -84 B (-4%)
build/viewport/index.min.js 958 B -80 B (-8%)
build/widgets/index.min.js 7.16 kB +6 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 451 B
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
build/block-editor/style.css 14.9 kB
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/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 624 B
build/block-library/blocks/button/style.css 623 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 409 B
build/block-library/blocks/columns/style.css 409 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.61 kB
build/block-library/blocks/cover/style.css 1.6 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 159 B
build/block-library/blocks/details/style.css 159 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/interactivity.min.js 395 B
build/block-library/blocks/file/style-rtl.css 269 B
build/block-library/blocks/file/style.css 270 B
build/block-library/blocks/freeform/editor-rtl.css 2.58 kB
build/block-library/blocks/freeform/editor.css 2.58 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/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
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 507 B
build/block-library/blocks/media-text/style.css 505 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/style-rtl.css 2.21 kB
build/block-library/blocks/navigation/style.css 2.2 kB
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-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 103 B
build/block-library/blocks/preformatted/style.css 103 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 167 B
build/block-library/blocks/pullquote/theme.css 167 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 288 B
build/block-library/blocks/query-pagination/style.css 284 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/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 531 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/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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 645 B
build/block-library/blocks/table/style.css 644 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 174 B
build/block-library/blocks/video/style.css 174 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/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/interactivity/vendors.min.js 8.2 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/theme-rtl.css 686 B
build/block-library/theme.css 691 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/commands/style-rtl.css 827 B
build/commands/style.css 827 B
build/data-controls/index.min.js 640 B
build/date/index.min.js 40.4 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.63 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-widgets/style-rtl.css 4.53 kB
build/edit-widgets/style.css 4.53 kB
build/editor/style-rtl.css 3.54 kB
build/editor/style.css 3.53 kB
build/element/index.min.js 4.8 kB
build/escape-html/index.min.js 537 B
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/is-shallow-equal/index.min.js 527 B
build/keycodes/index.min.js 1.84 kB
build/list-reusable-blocks/index.min.js 2.13 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/preferences-persistence/index.min.js 1.84 kB
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 939 B
build/react-refresh-entry/index.min.js 8.44 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.21 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 10.7 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 1.42 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.57 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/warning/index.min.js 268 B
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

@andrewserong andrewserong added [Type] Enhancement A suggestion for improvement. [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Mar 16, 2023
@alexstine
Copy link
Contributor

Before this gets merged, lets do figure out where this info might be useful for screen readers. 👍

@github-actions
Copy link

github-actions bot commented Mar 16, 2023

Flaky tests detected in aecbf4f.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5306460928
📝 Reported issues:

@andrewserong
Copy link
Contributor Author

Before this gets merged, lets do figure out where this info might be useful for screen readers. 👍

Absolutely! Happy for any feedback or ideas on how best to word the label for screen readers.

@jasmussen
Copy link
Contributor

It definitely becomes tricky when there's both anchor and sticky chips. But that treatment still seems the most compelling to me, outside of a better icon.

Question: would it be inappropriate for the "Sticky" chip to take precedence if the list view contains both a sticky chip, and an anchor chip? The latter feels more quality of life to me, and is also surfaced in the inspector.

Alternatively, is it possible to hide these chips, one by one, as the title of the block grows longer, or nesting grows deeper? This is probably something to consider separately.

@richtabor
Copy link
Member

Question: would it be inappropriate for the "Sticky" chip to take precedence if the list view contains both a sticky chip, and an anchor chip? The latter feels more quality of life to me, and is also surfaced in the inspector.

I'm not sold we need a sticky chip.

Why should sticky be called out here, when nearly all other attributes for the group aren't?

I'm more in favor of adapting the block icon to indicate stickiness, if we need/should do this.

@andrewserong andrewserong added the Needs Design Needs design efforts. label Mar 16, 2023
@andrewserong
Copy link
Contributor Author

andrewserong commented Mar 16, 2023

Thanks for the feedback and ideas, folks!

It definitely becomes tricky when there's both anchor and sticky chips. But that treatment still seems the most compelling to me, outside of a better icon.
Question: would it be inappropriate for the "Sticky" chip to take precedence if the list view contains both a sticky chip, and an anchor chip?

I agree — I think it's the clearest indicator visually, and when I attempted to get both the anchor and the sticky chip/pill to be on the same row, I very quickly ran into styling issues with the limited real estate we have there. If we agree on a sticky chip, I think the most pragmatic option is to hide the anchor if it exists, and like you mention, we can always look at seeing if we can get them both displayed in a follow-up if need be.

Why should sticky be called out here, when nearly all other attributes for the group aren't?

That's a good question — I think the position type is worth calling out within the list view because unlike other block supports / styling settings, position affects where the block appears within the page. In a sense it breaks out of its position within the flow of the document, so I think it'd be good to find ways that make it easier for the user to get back to that element or select it. Also, there'll likely be very few elements on the page that are sticky, so it hopefully won't result in too much visual clutter.

I'm more in favor of adapting the block icon to indicate stickiness, if we need/should do this.

The main drawbacks I can see for adjusting the block icon are:

  • Sticky positioning will likely be available on at least a few different block types in the future (e.g. cover block, headings, potentially), so whatever visual indicator we use will need to be decoupled from any one particular block type. So, if we switch out the icon, does the icon we switch it for make sense for any arbitrary block that might be sticky?
  • Although this isn't a button, for folks who use the "Show button text labels" option in the editor, the expectation is that the UI deprioritises the use of icons to communicate information, so for this label, I think it'd be good to still have a text alternative, which probably leans us toward a pill idea.

I've added the "Needs Design" label — I'm happy to have a go at implementing whichever idea we think will work best here, but since it's a little fiddly to work with, if anyone's free to put together a mockup of how it'd ideally look, that would be very helpful! Some ideas:

  • As Joen mentioned — what if we go with the sticky chip idea, but hide the id attribute if present, so the sticky chip will take precedence
  • If a heading with an id attribute is adjacent to the sticky group within the list view, they'll both have chips on them. Should the sticky chip be a different colour / look any different to distinguish it visually? E.g. different background colour or uppercase?

I'll keep chipping away at this PR next week!

@jasmussen
Copy link
Contributor

Some of the motivation is the lack of an immediate visual effect when toggling sticky. But to your point, which is a good one, there are other ways to do this.

I do like your idea of an icon change. Figma has this toggle for abs position:

Screenshot 2023-03-17 at 08 19 03

In the layers panel, the icon then gets those 4 corners added. In this example, a symbol instance before and after stickied:

Screenshot 2023-03-17 at 08 19 15

Screenshot 2023-03-17 at 08 19 10

That does seem less intrusive, and perhaps simpler to implement?

@Marc-pi
Copy link

Marc-pi commented Mar 17, 2023

I've read the other associated issues /iteration as well.

IMHO the main stakes, from an end user /editorial point of view, are :

  • to keep the purple color in case of partial template, it is important
  • not to transform too much the hightlight of the header zone (it is a major structural part of the templates)
    Now with the group encapsulation, it's different, we loose in a sense the information (header is behind a group)
    "If i've set a heading zone, it's strange to see my work being encapsulated just after having activated a sticky option" : it is a sort of hijacking :-)
    Is there a way to improve that part, i.e move group below inside ?
    there is indeed a need to make the change more transparent / less intrusive
  • the icon idea is to be kept, maybe add a tooltip on a:hover it

here is what i can see on some of my websites with Senff's plugin (https://wordpress.org/plugins/sticky-block/), just to compare
image

Would be nice to check what other builders do.

@andrewserong andrewserong changed the title List View: add a position label when a position type is set for a block List View: add an indicator of when a position type is set for a block Mar 20, 2023
@andrewserong
Copy link
Contributor Author

Thanks for the feedback and ideas, folks! I've had a go at trying @jasmussen's idea of adding an indicator on top of the block icon. I don't mind it, but I'm also a little torn — it does add an indicator, but it also looks a little busy to my eyes, and isn't clear to me what it does. But perhaps it's clearer from context when a user interacts with it. Here's screenshot of the current state of this PR:

image

And a screengrab of switching position types:

2023-03-20 17 16 45

If people like this approach, then I think the next steps would be:

  • Is there an svg icon we should use instead of the background-image data URLs I hacked in there (I added them using this tool: https://kovart.github.io/dashed-border-generator/)? The fullscreen icon is fairly close, but it's a bit too thick to work with the existing block icons. Alternately, we can tweak the data URLs as needed to get the right sizing.
  • We'll then need to figure out a good way to make it accessible. I like the idea of trying out a Tooltip and ensuring there are accessible labels to flag the sticky status.

Thanks again for the collaboration!

@jasmussen
Copy link
Contributor

Thanks for trying that. Outside some treatment details, I think it's interesting. What do you think, @WordPress/gutenberg-design

@jameskoster
Copy link
Contributor

It seems plausible that we might want to indicate other position properties like fixed and absolute in List View. Perhaps it's my bias from Figma, but this particular treatment suggests absolute positioning to me, so I'd welcome alternative ideas.

Maybe just a single stroke at the top of the svg?

Screenshot 2023-03-20 at 16 20 32

and isn't clear to me what it does

I feel this too. It would be nice to avoid additional text, but it doesn't seem like the end of the world to me, especially as (I assume) we'll at least need a VisuallyHidden label for a11y.

@apeatling
Copy link
Contributor

apeatling commented Mar 20, 2023

and isn't clear to me what it does
I feel this too. It would be nice to avoid additional text, but it doesn't seem like the end of the world to me, especially as (I assume) we'll at least need a VisuallyHidden label for a11y.

A big +1 from me for using something that makes it immediately obvious what it means. I agree that additional text here is not the end of the world and would improve clarity in a UI that is designed to improve clarity of the entire document structure.

@andrewserong
Copy link
Contributor Author

Yes, I think I'm leaning toward returning to text display of the position status, too. If we switch this PR back to using text to indicate the position type, do we have a preference for:

  • Augment the block display title (e.g. as this PR originally was, so it'd say Group (sticky), or:
  • Use a sticky chip/pill similar to the styling used by the id attribute?

@jameskoster
Copy link
Contributor

I'm not quite ready to give up on the icon approach, mostly because when we consider anchors, absolute positioning, and nesting, space in the row is really at a premium.

Would it be worth trying something like this:

Screenshot 2023-03-21 at 13 58 21

@andrewserong
Copy link
Contributor Author

Would it be worth trying something like this:

Definitely worth trying! I'm happy to give it a go.

@andrewserong andrewserong force-pushed the add/position-label-to-block-title-in-list-view branch from 8dab1b1 to 1cd0e32 Compare June 1, 2023 06:41
@mtias
Copy link
Member

mtias commented Jun 1, 2023

Can we try a plain icon next to the ellipsis menu like we communicate "locked" state? This seems very ad hoc

@andrewserong
Copy link
Contributor Author

andrewserong commented Jun 1, 2023

Can we try a plain icon next to the ellipsis menu like we communicate "locked" state? This seems very ad hoc

Sure, I really like that idea. I think earlier feedback from @richtabor in #49122 (comment) indicated trying to make it less prominent, but that was when the discussion was about a text-based chip rather than a separate icon.

If any designers have an icon to share that I can play with, I can put it together!

@jameskoster
Copy link
Contributor

The challenge has always been coming up with a compelling icon to indicate sticky positioning. Iirc this is why the text label was originally suggested.

There are metaphors like pins / map markers, anchors, magnets... but for one reason or another they don't feel quite right. Trying to communicate the behavior more literally is very tricky in such a small space.

@mtias
Copy link
Member

mtias commented Jun 5, 2023

@jameskoster I think it's more about adding a marker so the block stands out. Once you associate it to the behavior it flows more easily.

@jameskoster
Copy link
Contributor

One option could be a "note" affordance on each item. It could contain details like position, anchor, behavior.

Screenshot 2023-06-06 at 13 50 48

Another could be a different treatment of the row itself:

Screenshot 2023-06-06 at 14 36 47

An icon next to the ellipsis / lock can also work, but I'm not really sure which icon to use :)

Screenshot 2023-06-06 at 14 35 51

The pin feels most obvious, but it's used elsewhere in WordPress with a totally different meaning.

@Marc-pi
Copy link

Marc-pi commented Jun 6, 2023

personaly i vote for a strict vertical pin ;-)
as per #49122 (comment)

@andrewserong
Copy link
Contributor Author

The pin icon next to the lock icon looks like a good approach to try to me! I'll have a go at that next week unless there are any other ideas in the meantime.

@Jabe64
Copy link

Jabe64 commented Jun 10, 2023

Great work! Another idea would be a mix of the lock icon and a vertical or horizontal line around it depending on which part is sticky.

For example:

  • a horizontal line above the lock icon whenever it's sticky to the top
  • a horizontal line below the lock icon whenever it's sticky to the bottom
  • a vertical line on the left of the lock icon whenever it's sticky to the left
  • a vertical line on the right of the lock icon whenever it's sticky to the right

And versions for mix of positions for example: sticky to both right and bottom.

Other sticky positions aren't available yet (it’s only sticky to the top if I’m not wrong) and still need to be considered in terms of UI as listed in #47043:

Look into position UI for top/left/right/bottom positions and offsets, in particular support for fixed/sticky footers

But it might be a good thing to take those future options in consideration for creating the proper icon(s).

@andrewserong
Copy link
Contributor Author

Thanks for the feedback, all! I think for simplicity sake, trying out a sticky icon that is similar in size to the lock icon could be good, and possibly a pragmatic path forwards.

I've updated this PR to use the existing pin icon as a placeholder, and here's how it's currently looking (this example just puts two sticky blocks next to each other so you can see the sticky icon in its selected and deselected state, and how it looks with a lock icon next to it):

If this direction seems okay, then I think the next step would be for us to add a pinSmall icon, a bit like how we have the lockSmall icon, so that the icons can be the same size as in the mockups in #49122 (comment). @jameskoster — if you think it's worth pursuing, do you have some SVG markup I can use to add in an extra icon?

@Marc-pi
Copy link

Marc-pi commented Jun 15, 2023

@andrewserong i love this new iteration / icon, keep it up ! good job

@jameskoster
Copy link
Contributor

Thanks @andrewserong, I think we can slightly scale up the shape in the post icon. Here's an svg:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.9706 10.1586C10.2819 10.0621 9.56905 10.1784 8.93842 10.5075C8.88672 10.5345 8.83557 10.5629 8.78504 10.5928C8.54529 10.7344 8.3193 10.9082 8.11331 11.1142L9.83702 12.8372L7.00054 15.75L7 17H8.25064L11.1628 14.1632L12.8857 15.8865C13.0917 15.6805 13.2655 15.4545 13.4071 15.2147C13.437 15.1642 13.4654 15.1131 13.4924 15.0614C13.8215 14.4308 13.9378 13.718 13.8413 13.0293L17 10.6946L13.3053 7L10.9706 10.1586Z" />
</svg>

@andrewserong
Copy link
Contributor Author

Thanks @jameskoster, that's looking good to me! I've added a pinSmall icon using that markup, here's a current screenshot:

image

I think this should be ready for a final review now.

Copy link
Contributor

@jameskoster jameskoster left a comment

Choose a reason for hiding this comment

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

It's working well for me.

@andrewserong
Copy link
Contributor Author

andrewserong commented Jun 19, 2023

Thanks for the review @jameskoster, and for minifying the SVG. I'll merge this in now.

@andrewserong andrewserong merged commit a67d478 into trunk Jun 19, 2023
@andrewserong andrewserong deleted the add/position-label-to-block-title-in-list-view branch June 19, 2023 01:01
@github-actions github-actions bot added this to the Gutenberg 16.1 milestone Jun 19, 2023
sethrubenstein pushed a commit to pewresearch/gutenberg that referenced this pull request Jul 13, 2023
WordPress#49122)

* List View: add a position label when a position type is set for a block

* Move get label function to the useBlockDisplayInformation file

* Try using icon over the block icon instead of a text label to indicate sticky status

* Try more subtle icon / styling idea, and add in a tooltip

* Try provided svg icons

* Don't change color when hovered

* Try separate sticky icon instead

* Add pinSmall icon

* Minify pinSmall

* Add additional optional chaining because attributes can technically be null

---------

Co-authored-by: James Koster <james@jameskoster.co.uk>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] List View Menu item in the top toolbar to select blocks from a list of links. Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

10 participants