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

DocumentBar: replace icon with post type label #65170

Merged
merged 11 commits into from
Sep 17, 2024

Conversation

creativecoder
Copy link
Contributor

What?

Replaces the post type icon in the document bar with an explicit label

Resolves #65167

Why?

To help make it more obvious exactly what kind of document you are editing.

How?

  • Add post type label to DocumentBar for the currently edited document (except for Style Book and Global Style revisions, since those are currently rendered differently)
  • Remove the default document icon from DocumentBar (but still display the icon prop if explicitly passed, for backward compatibility)

Testing Instructions

  • Open various kinds of post types in the editor (posts/page, templates, navigation menu, patterns, etc.
  • Open Style Book and Global Style Revisions to see that there is no post type displayed

Testing Instructions for Keyboard

n/a

Screenshots or screencast

Before After
image image

@creativecoder creativecoder added [Type] Enhancement A suggestion for improvement. [Package] Editor /packages/editor labels Sep 9, 2024
@creativecoder creativecoder self-assigned this Sep 9, 2024
Copy link

github-actions bot commented Sep 9, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: creativecoder <grantmkin@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Comment on lines -194 to -200
aria-label={
! props.title && TYPE_LABELS[ postType ]
? // eslint-disable-next-line @wordpress/valid-sprintf
sprintf( TYPE_LABELS[ postType ], title )
: undefined
}
>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The aria-label doesn't seem necessary any more, since the post type is now displayed after the document title.

Copy link
Contributor

Choose a reason for hiding this comment

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

I noticed that this removal causes some of the e2e tests to fail. E.g. this one:

test( 'Allow to switch to template mode, edit the template and check the result', async ( {

The failure appears to be the check on this line:

const title = this.editorTopBar.getByRole( 'heading', {
name: 'Editing template: Single Entries',
} );

The aria-label does add a bit more context as it explains the context (editing) rather than using the visual separator. So I wonder if it's worth still including it? Either that, or updating the test 🙂

I'll just ping @jeryj on this one, too, as I remember there being previous discussions about the accessibility of this bar.

Copy link
Contributor

@jeryj jeryj Sep 10, 2024

Choose a reason for hiding this comment

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

I don't think this impacts it one way or another. The main issue with the accessibility of this area is the semantics and inconsistent naming: #51394.

  1. Buttons should have consistent descriptive names, so this button needs to be visually and consistently named as "Command Palette" or something similar.
  2. The <h1> is nested within the <button> element. <button> elements often strip the semantics of its contents, so the <h1> would never be exposed. It is as if there is no heading on the page at all.

So, those core issues do need to be fixed, but this PR doesn't seem to impact the core issues either way.

Copy link

github-actions bot commented Sep 9, 2024

Size Change: +986 B (+0.06%)

Total Size: 1.77 MB

Filename Size Change
build/block-editor/index.min.js 257 kB +91 B (+0.04%)
build/block-editor/style-rtl.css 16 kB -39 B (-0.24%)
build/block-editor/style.css 16 kB -44 B (-0.27%)
build/block-library/index.min.js 219 kB +694 B (+0.32%)
build/edit-site/index.min.js 217 kB +203 B (+0.09%)
build/editor/index.min.js 102 kB -35 B (-0.03%)
build/editor/style-rtl.css 9.34 kB +59 B (+0.64%)
build/editor/style.css 9.34 kB +57 B (+0.61%)
ℹ️ View Unchanged
Filename Size
build-module/a11y/index.min.js 898 B
build-module/block-library/file/view.min.js 447 B
build-module/block-library/image/view.min.js 1.78 kB
build-module/block-library/navigation/view.min.js 1.16 kB
build-module/block-library/query/view.min.js 743 B
build-module/block-library/search/view.min.js 616 B
build-module/interactivity-router/index.min.js 2.8 kB
build-module/interactivity/debug.min.js 16.6 kB
build-module/interactivity/index.min.js 13.3 kB
build/a11y/index.min.js 949 B
build/annotations/index.min.js 2.26 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 579 B
build/block-directory/index.min.js 7.11 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/content-rtl.css 4.65 kB
build/block-editor/content.css 4.64 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 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 149 B
build/block-library/blocks/audio/editor.css 151 B
build/block-library/blocks/audio/style-rtl.css 132 B
build/block-library/blocks/audio/style.css 132 B
build/block-library/blocks/audio/theme-rtl.css 134 B
build/block-library/blocks/audio/theme.css 134 B
build/block-library/blocks/avatar/editor-rtl.css 115 B
build/block-library/blocks/avatar/editor.css 115 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/button/editor-rtl.css 265 B
build/block-library/blocks/button/editor.css 265 B
build/block-library/blocks/button/style-rtl.css 538 B
build/block-library/blocks/button/style.css 538 B
build/block-library/blocks/buttons/editor-rtl.css 291 B
build/block-library/blocks/buttons/editor.css 291 B
build/block-library/blocks/buttons/style-rtl.css 328 B
build/block-library/blocks/buttons/style.css 328 B
build/block-library/blocks/calendar/style-rtl.css 240 B
build/block-library/blocks/calendar/style.css 240 B
build/block-library/blocks/categories/editor-rtl.css 132 B
build/block-library/blocks/categories/editor.css 131 B
build/block-library/blocks/categories/style-rtl.css 152 B
build/block-library/blocks/categories/style.css 152 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 122 B
build/block-library/blocks/code/theme.css 122 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 420 B
build/block-library/blocks/columns/style.css 420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 124 B
build/block-library/blocks/comment-author-avatar/editor.css 124 B
build/block-library/blocks/comment-author-name/style-rtl.css 72 B
build/block-library/blocks/comment-author-name/style.css 72 B
build/block-library/blocks/comment-content/style-rtl.css 120 B
build/block-library/blocks/comment-content/style.css 120 B
build/block-library/blocks/comment-date/style-rtl.css 65 B
build/block-library/blocks/comment-date/style.css 65 B
build/block-library/blocks/comment-edit-link/style-rtl.css 70 B
build/block-library/blocks/comment-edit-link/style.css 70 B
build/block-library/blocks/comment-reply-link/style-rtl.css 71 B
build/block-library/blocks/comment-reply-link/style.css 71 B
build/block-library/blocks/comment-template/style-rtl.css 200 B
build/block-library/blocks/comment-template/style.css 199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 228 B
build/block-library/blocks/comments-pagination/editor.css 217 B
build/block-library/blocks/comments-pagination/style-rtl.css 234 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 832 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 631 B
build/block-library/blocks/cover/editor-rtl.css 641 B
build/block-library/blocks/cover/editor.css 642 B
build/block-library/blocks/cover/style-rtl.css 1.62 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 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 331 B
build/block-library/blocks/embed/editor.css 331 B
build/block-library/blocks/embed/style-rtl.css 419 B
build/block-library/blocks/embed/style.css 419 B
build/block-library/blocks/embed/theme-rtl.css 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 326 B
build/block-library/blocks/file/style-rtl.css 278 B
build/block-library/blocks/file/style.css 279 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 198 B
build/block-library/blocks/footnotes/style.css 197 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 229 B
build/block-library/blocks/form-input/style-rtl.css 357 B
build/block-library/blocks/form-input/style.css 357 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 344 B
build/block-library/blocks/form-submission-notification/editor.css 341 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 470 B
build/block-library/blocks/freeform/editor-rtl.css 2.6 kB
build/block-library/blocks/freeform/editor.css 2.6 kB
build/block-library/blocks/gallery/editor-rtl.css 955 B
build/block-library/blocks/gallery/editor.css 958 B
build/block-library/blocks/gallery/style-rtl.css 1.83 kB
build/block-library/blocks/gallery/style.css 1.82 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 333 B
build/block-library/blocks/group/editor.css 333 B
build/block-library/blocks/group/style-rtl.css 103 B
build/block-library/blocks/group/style.css 103 B
build/block-library/blocks/group/theme-rtl.css 79 B
build/block-library/blocks/group/theme.css 79 B
build/block-library/blocks/heading/style-rtl.css 188 B
build/block-library/blocks/heading/style.css 188 B
build/block-library/blocks/html/editor-rtl.css 346 B
build/block-library/blocks/html/editor.css 347 B
build/block-library/blocks/image/editor-rtl.css 785 B
build/block-library/blocks/image/editor.css 787 B
build/block-library/blocks/image/style-rtl.css 1.59 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 1.65 kB
build/block-library/blocks/latest-comments/style-rtl.css 355 B
build/block-library/blocks/latest-comments/style.css 354 B
build/block-library/blocks/latest-posts/editor-rtl.css 179 B
build/block-library/blocks/latest-posts/editor.css 179 B
build/block-library/blocks/latest-posts/style-rtl.css 509 B
build/block-library/blocks/latest-posts/style.css 510 B
build/block-library/blocks/list/style-rtl.css 107 B
build/block-library/blocks/list/style.css 107 B
build/block-library/blocks/loginout/style-rtl.css 61 B
build/block-library/blocks/loginout/style.css 61 B
build/block-library/blocks/media-text/editor-rtl.css 321 B
build/block-library/blocks/media-text/editor.css 320 B
build/block-library/blocks/media-text/style-rtl.css 558 B
build/block-library/blocks/media-text/style.css 556 B
build/block-library/blocks/more/editor-rtl.css 427 B
build/block-library/blocks/more/editor.css 427 B
build/block-library/blocks/navigation-link/editor-rtl.css 644 B
build/block-library/blocks/navigation-link/editor.css 645 B
build/block-library/blocks/navigation-link/style-rtl.css 192 B
build/block-library/blocks/navigation-link/style.css 191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 295 B
build/block-library/blocks/navigation-submenu/editor.css 294 B
build/block-library/blocks/navigation/editor-rtl.css 2.19 kB
build/block-library/blocks/navigation/editor.css 2.2 kB
build/block-library/blocks/navigation/style-rtl.css 2.25 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 392 B
build/block-library/blocks/nextpage/editor.css 392 B
build/block-library/blocks/page-list/editor-rtl.css 378 B
build/block-library/blocks/page-list/editor.css 378 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 236 B
build/block-library/blocks/paragraph/editor.css 236 B
build/block-library/blocks/paragraph/style-rtl.css 341 B
build/block-library/blocks/paragraph/style.css 340 B
build/block-library/blocks/post-author-biography/style-rtl.css 74 B
build/block-library/blocks/post-author-biography/style.css 74 B
build/block-library/blocks/post-author-name/style-rtl.css 69 B
build/block-library/blocks/post-author-name/style.css 69 B
build/block-library/blocks/post-author/editor-rtl.css 107 B
build/block-library/blocks/post-author/editor.css 107 B
build/block-library/blocks/post-author/style-rtl.css 188 B
build/block-library/blocks/post-author/style.css 189 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 527 B
build/block-library/blocks/post-comments-form/style.css 528 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-content/style-rtl.css 79 B
build/block-library/blocks/post-content/style.css 79 B
build/block-library/blocks/post-date/style-rtl.css 62 B
build/block-library/blocks/post-date/style.css 62 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 155 B
build/block-library/blocks/post-excerpt/style.css 155 B
build/block-library/blocks/post-featured-image/editor-rtl.css 729 B
build/block-library/blocks/post-featured-image/editor.css 726 B
build/block-library/blocks/post-featured-image/style-rtl.css 347 B
build/block-library/blocks/post-featured-image/style.css 347 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 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 399 B
build/block-library/blocks/post-template/style.css 398 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 70 B
build/block-library/blocks/post-time-to-read/style.css 70 B
build/block-library/blocks/post-title/style-rtl.css 226 B
build/block-library/blocks/post-title/style.css 226 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 134 B
build/block-library/blocks/pullquote/editor.css 134 B
build/block-library/blocks/pullquote/style-rtl.css 342 B
build/block-library/blocks/pullquote/style.css 342 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 121 B
build/block-library/blocks/query-pagination-numbers/editor.css 118 B
build/block-library/blocks/query-pagination/editor-rtl.css 154 B
build/block-library/blocks/query-pagination/editor.css 154 B
build/block-library/blocks/query-pagination/style-rtl.css 237 B
build/block-library/blocks/query-pagination/style.css 237 B
build/block-library/blocks/query-title/style-rtl.css 64 B
build/block-library/blocks/query-title/style.css 64 B
build/block-library/blocks/query/editor-rtl.css 452 B
build/block-library/blocks/query/editor.css 451 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 238 B
build/block-library/blocks/quote/style.css 238 B
build/block-library/blocks/quote/theme-rtl.css 233 B
build/block-library/blocks/quote/theme.css 236 B
build/block-library/blocks/read-more/style-rtl.css 138 B
build/block-library/blocks/read-more/style.css 138 B
build/block-library/blocks/rss/editor-rtl.css 101 B
build/block-library/blocks/rss/editor.css 101 B
build/block-library/blocks/rss/style-rtl.css 288 B
build/block-library/blocks/rss/style.css 287 B
build/block-library/blocks/search/editor-rtl.css 199 B
build/block-library/blocks/search/editor.css 199 B
build/block-library/blocks/search/style-rtl.css 672 B
build/block-library/blocks/search/style.css 671 B
build/block-library/blocks/search/theme-rtl.css 113 B
build/block-library/blocks/search/theme.css 113 B
build/block-library/blocks/search/view.min.js 475 B
build/block-library/blocks/separator/editor-rtl.css 100 B
build/block-library/blocks/separator/editor.css 100 B
build/block-library/blocks/separator/style-rtl.css 248 B
build/block-library/blocks/separator/style.css 248 B
build/block-library/blocks/separator/theme-rtl.css 195 B
build/block-library/blocks/separator/theme.css 195 B
build/block-library/blocks/shortcode/editor-rtl.css 286 B
build/block-library/blocks/shortcode/editor.css 286 B
build/block-library/blocks/site-logo/editor-rtl.css 806 B
build/block-library/blocks/site-logo/editor.css 803 B
build/block-library/blocks/site-logo/style-rtl.css 218 B
build/block-library/blocks/site-logo/style.css 218 B
build/block-library/blocks/site-tagline/editor-rtl.css 87 B
build/block-library/blocks/site-tagline/editor.css 87 B
build/block-library/blocks/site-tagline/style-rtl.css 65 B
build/block-library/blocks/site-tagline/style.css 65 B
build/block-library/blocks/site-title/editor-rtl.css 85 B
build/block-library/blocks/site-title/editor.css 85 B
build/block-library/blocks/site-title/style-rtl.css 206 B
build/block-library/blocks/site-title/style.css 206 B
build/block-library/blocks/social-link/editor-rtl.css 338 B
build/block-library/blocks/social-link/editor.css 338 B
build/block-library/blocks/social-links/editor-rtl.css 757 B
build/block-library/blocks/social-links/editor.css 756 B
build/block-library/blocks/social-links/style-rtl.css 1.51 kB
build/block-library/blocks/social-links/style.css 1.5 kB
build/block-library/blocks/spacer/editor-rtl.css 346 B
build/block-library/blocks/spacer/editor.css 346 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-of-contents/style-rtl.css 83 B
build/block-library/blocks/table-of-contents/style.css 83 B
build/block-library/blocks/table/editor-rtl.css 394 B
build/block-library/blocks/table/editor.css 394 B
build/block-library/blocks/table/style-rtl.css 640 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 B
build/block-library/blocks/tag-cloud/editor-rtl.css 144 B
build/block-library/blocks/tag-cloud/editor.css 144 B
build/block-library/blocks/tag-cloud/style-rtl.css 266 B
build/block-library/blocks/tag-cloud/style.css 265 B
build/block-library/blocks/template-part/editor-rtl.css 368 B
build/block-library/blocks/template-part/editor.css 368 B
build/block-library/blocks/template-part/theme-rtl.css 113 B
build/block-library/blocks/template-part/theme.css 113 B
build/block-library/blocks/term-description/style-rtl.css 126 B
build/block-library/blocks/term-description/style.css 126 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 165 B
build/block-library/blocks/text-columns/style.css 165 B
build/block-library/blocks/verse/style-rtl.css 98 B
build/block-library/blocks/verse/style.css 98 B
build/block-library/blocks/video/editor-rtl.css 396 B
build/block-library/blocks/video/editor.css 397 B
build/block-library/blocks/video/style-rtl.css 192 B
build/block-library/blocks/video/style.css 192 B
build/block-library/blocks/video/theme-rtl.css 134 B
build/block-library/blocks/video/theme.css 134 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 11.7 kB
build/block-library/editor.css 11.7 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 15 kB
build/block-library/style.css 15 kB
build/block-library/theme-rtl.css 708 B
build/block-library/theme.css 712 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 52.3 kB
build/commands/index.min.js 16.1 kB
build/commands/style-rtl.css 955 B
build/commands/style.css 952 B
build/components/index.min.js 224 kB
build/components/style-rtl.css 12.1 kB
build/components/style.css 12.1 kB
build/compose/index.min.js 12.7 kB
build/core-commands/index.min.js 2.82 kB
build/core-data/index.min.js 73.2 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.35 kB
build/customize-widgets/style.css 1.35 kB
build/data-controls/index.min.js 641 B
build/data/index.min.js 8.98 kB
build/date/index.min.js 18 kB
build/deprecated/index.min.js 458 B
build/dom-ready/index.min.js 325 B
build/dom/index.min.js 4.66 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 580 B
build/edit-post/index.min.js 13.1 kB
build/edit-post/style-rtl.css 2.57 kB
build/edit-post/style.css 2.57 kB
build/edit-site/posts-rtl.css 7.3 kB
build/edit-site/posts.css 7.3 kB
build/edit-site/style-rtl.css 12.6 kB
build/edit-site/style.css 12.6 kB
build/edit-widgets/index.min.js 17.7 kB
build/edit-widgets/style-rtl.css 4.2 kB
build/edit-widgets/style.css 4.2 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.11 kB
build/format-library/style-rtl.css 476 B
build/format-library/style.css 476 B
build/hooks/index.min.js 1.54 kB
build/html-entities/index.min.js 445 B
build/i18n/index.min.js 3.58 kB
build/is-shallow-equal/index.min.js 526 B
build/keyboard-shortcuts/index.min.js 1.31 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.18 kB
build/list-reusable-blocks/style-rtl.css 846 B
build/list-reusable-blocks/style.css 846 B
build/media-utils/index.min.js 3.2 kB
build/notices/index.min.js 946 B
build/nux/index.min.js 1.61 kB
build/nux/style-rtl.css 749 B
build/nux/style.css 745 B
build/patterns/index.min.js 7.34 kB
build/patterns/style-rtl.css 687 B
build/patterns/style.css 685 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.9 kB
build/preferences/style-rtl.css 554 B
build/preferences/style.css 554 B
build/primitives/index.min.js 829 B
build/priority-queue/index.min.js 1.54 kB
build/private-apis/index.min.js 1.01 kB
build/react-i18n/index.min.js 630 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.76 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.55 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.1 kB
build/router/index.min.js 1.96 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 2.04 kB
build/token-list/index.min.js 581 B
build/url/index.min.js 3.9 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react-jsx-runtime.min.js 560 B
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 965 B
build/warning/index.min.js 250 B
build/widgets/index.min.js 7.19 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@andrewserong
Copy link
Contributor

andrewserong commented Sep 10, 2024

This is looking really nice to me in testing! Just pushed a tiny update to try to fix one of the e2es. Looks like there's another that will need fixing (or for us to restore the aria-label): #65170 (comment)

✅ Looking good in the page editor, post editor, and site editor:
image

✅ Looking good in custom post type editor:
image

❓ One thing I noticed while testing is that the DocumentBar appears to be displayed in bold in RTL languages (otherwise RTL appears to be working pretty well):

image

This appears to be because of rules output via the localization stylesheet:

image

To resolve that, I think we could add font-weight: 400' to the h1` rule here:

h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 70%;
color: currentColor;
}

Does that sound worth doing in this PR? If not, happy to open a separate one-liner PR for it 🙂

@@ -66,7 +66,7 @@
}

.editor-document-bar__shortcut {
color: $gray-800;
color: $gray-700;
Copy link
Contributor

Choose a reason for hiding this comment

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

This may need to remain $gray-800, or be #6d6d6d to meet 4.5:1 contrast. https://contrast.tools is a great way to test.

Other than that, ship it!

@jameskoster
Copy link
Contributor

Screenshot 2024-09-10 at 10 05 40

Should we display the area here rather than the generic "Template part"?

Copy link
Contributor

@stokesman stokesman left a comment

Choose a reason for hiding this comment

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

I note that with long titles the type label will be truncated:
image

Maybe it’d be preferable to keep the type label visible:
image

Diff to have title truncated separately from post type
diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js
index be291d6be5..84b12a7d42 100644
--- a/packages/editor/src/components/document-bar/index.js
+++ b/packages/editor/src/components/document-bar/index.js
@@ -181,12 +181,14 @@ export default function DocumentBar( props ) {
 							{ title
 								? decodeEntities( title )
 								: __( 'No title' ) }
-
-							{ postTypeLabel && ! props.title && (
-								<span className="editor-document-bar__post-type-label">
-									{ ' · ' + decodeEntities( postTypeLabel ) }
-								</span>
-							) }
+						</Text>
+						<Text
+							size="body"
+							className="editor-document-bar__post-type-label"
+						>
+							{ postTypeLabel &&
+								! props.title &&
+								' · ' + decodeEntities( postTypeLabel ) }
 						</Text>
 					</motion.div>
 					<span className="editor-document-bar__shortcut">

Note that doing so would mean responsive styling will need some attention:
image

packages/editor/src/components/document-bar/index.js Outdated Show resolved Hide resolved
@creativecoder
Copy link
Contributor Author

I've pushed some updates that

  • Adjust the IconType import
  • Use darker text color for required contrast on post type label
  • Adds font-weight: 400 css to the document bar h1
  • Adjusts the overflow for long titles so it doesn't truncate the post type label

The responsive styles still need some work, though they are currently not much worse than they are on trunk:

image image

The markup here is not only an accessibility problem, it makes responsive styling more difficult than it needs to be.

@andrewserong
Copy link
Contributor

Nice work @creativecoder! I've pushed a couple of tiny commits to get the e2e tests passing since we're agreed on removing the aria-label.

I did a bit more hacking, and I think I've come up with a way to improve the responsive behaviour for now, if we're willing to accept hiding the post type label when the Back button is present, at an in-between viewport size. It's a little awkward adding the media query, but seems to work okay if we also move the max-width up again to the editor-document-bar__title and use flex values to control the sizing of the title relative to the label. Here's a potential diff:

diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss
index bd85ab0db05..2308554d473 100644
--- a/packages/editor/src/components/document-bar/style.scss
+++ b/packages/editor/src/components/document-bar/style.scss
@@ -25,6 +25,14 @@
 			background: $gray-200;
 		}
 	}
+
+	&.has-back-button {
+		@media screen and (min-width: #{ ($break-medium) }) and (max-width: $break-large) {
+			.editor-document-bar__post-type-label {
+				display: none;
+			}
+		}
+	}
 }
 
 .editor-document-bar__command {
@@ -37,6 +45,7 @@
 	overflow: hidden;
 	color: $gray-900;
 	margin: 0 auto;
+	max-width: 70%;
 
 	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
 	@include break-medium() {
@@ -55,7 +64,7 @@
 
 .editor-document-bar__post-title {
 	color: currentColor;
-	max-width: 64%;
+	flex: 2;
 	overflow: hidden;
 	text-overflow: ellipsis;
 
@@ -65,6 +74,7 @@
 }
 
 .editor-document-bar__post-type-label {
+	flex: 0;
 	color: $gray-800;
 	padding-left: $grid-unit-05;
 }

The result would be this:

2024-09-12.15.36.06.mp4

(Happy to commit to this branch, but I didn't want to make any changes in case there were particular decisions you'd wanted to hold onto in the current shape of the CSS 🙂)

@creativecoder
Copy link
Contributor Author

@andrewserong That approach for responsive styles seems like a reasonable compromise. Please feel free to commit to this branch! I appreciate the help--this has already taken a lot more time than I was expecting.

@creativecoder
Copy link
Contributor Author

Should we display the area here rather than the generic "Template part"?

@jameskoster I'm open to it, but while trying it out, it seems redundant for the themes I've tested. A couple examples:

image image

compared to using the post type

image

Not a big sample size, but the block themes I see put "Header" or "Footer" in the names of those template parts. For other template part areas, I'm not sure that the "General" label adds useful information compared to just "Template Part" (e.g. "Sidebar · General Area" vs "Sidebar · Template Part")

Do you have any other suggestions for the wording and format of the template part area label that would make it more informative?

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 @creativecoder! I've pushed the fix for that in-between breakpoint and using flex rules where appropriate. After re-testing this is working nicely for me now, I've tested a bunch of different screens in Chrome, FF, Edge, and Safari, and it's holding up nicely for me.

I'll give it the tentative approval, but might be good to get a +1 from designers just to make sure it's looking good to land as an iteration. And we can always keep tweaking in follow-ups.

(Also, I noticed a couple if intermittent e2e test failures, but I'm pretty sure they're unrelated to this PR, 🤞 they pass from running them again)

LGTM! 🎉

@andrewserong
Copy link
Contributor

Re: failing e2e tests — I believe it's due to a change in wordpress-develop. Posted about it here: https://wordpress.slack.com/archives/C02QB2JS7/p1726210812176909

@jameskoster
Copy link
Contributor

Do you have any other suggestions for the wording and format of the template part area label that would make it more informative?

Not off the top of my head. I agree that [ Header • Header ] isn't very helpful. Probably a detail to revisit later.

@andrewserong
Copy link
Contributor

Alrighty, I've rebased this PR and the tests are passing now. @WordPress/gutenberg-design any objections if we land this PR in its current form, or were there any design tweaks you'd like changed before merge?

@creativecoder
Copy link
Contributor Author

@andrewserong There's one more thing with the responsive styles I'd like to fix: the post type shows instead of the title at very small screen widths:

image

I think this should be justified such that the post type clips rather than the title (or maybe the post type just doesn't show until there's enough room for it.)

Other than that, this is looking good to me. Will tackle issue tomorrow, unless you beat me too it.

@andrewserong
Copy link
Contributor

I think this should be justified such that the post type clips rather than the title (or maybe the post type just doesn't show until there's enough room for it.)
Other than that, this is looking good to me. Will tackle issue tomorrow, unless you beat me too it.

Oh, good catch! Maybe we can just hide the post type on very small screens, similar to what we've done with that in-between break point. I've had a go at that in 6f9ae9a, but feel free to revert if there's a better way to go about it (or of course land this if it's looking good 😄).

Here's how it's looking to me now:

2024-09-16.14.49.33.mp4

@andrewserong
Copy link
Contributor

I think this is in a good place now, and there haven't been any objections so far, so I'll merge this in. Happy to help on any follow-ups if need be!

@andrewserong andrewserong merged commit 788bb9e into trunk Sep 17, 2024
61 checks passed
@andrewserong andrewserong deleted the add/document-bar-post-type-label branch September 17, 2024 00:01
@github-actions github-actions bot added this to the Gutenberg 19.3 milestone Sep 17, 2024
@andrewserong andrewserong self-assigned this Sep 17, 2024
@creativecoder
Copy link
Contributor Author

Thanks for finishing this one up @andrewserong , much appreciated!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Editor /packages/editor [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update DocumentBar with post type label
6 participants