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

Editor: Improve Header layout #62636

Merged
merged 14 commits into from
Jul 22, 2024
Merged

Editor: Improve Header layout #62636

merged 14 commits into from
Jul 22, 2024

Conversation

stokesman
Copy link
Contributor

@stokesman stokesman commented Jun 18, 2024

What?

An improvement to center the Document Bar and prevent layout shifts at > medium breakpoints when switching between page and template.

Why?

  • It seems like the Document Bar is intended to be centered yet it’s not (especially noticeable when editing templates).
  • The layout shift while switching between a page and its template spoils the animation a bit.

How?

Uses grid instead of flex because that was the only way I knew to resiliently center the Document Bar. There is a bit more to it than that but I think it may be better to cover that with some review comments.

More

The layout shift used to not happen but now in template editing the "View Page" button hides and causes it. Maybe the button shouldn’t hide and instead merely disable #53913 (comment) but it still seems like a good idea to make the layout more stable (and truly centered).

Testing Instructions

  1. Open a page in the site or post editor
  2. Note the Document Bar is centered in the header
  3. Edit the template and note that the Document Bar stays centered
  4. Resize to various widths and verify that the responsiveness acceptable throughout

Screenshots or screencast

Layout on trunk editing a page

near-centered-document-bar

Layout on trunk editing a template

offset-document-bar-for-template

Layout on this branch editing a page

centered-document-bar

Capture of editing a template on the branch omitted because there’s no layout shift.

Trunk switching between page and template

shifty-document-bar.mp4

This branch switching between page and template

stable-document-bar.mp4

Copy link

github-actions bot commented Jun 18, 2024

Size Change: +455 B (+0.03%)

Total Size: 1.75 MB

Filename Size Change
build/edit-post/index.min.js 12.6 kB +40 B (+0.32%)
build/edit-post/style-rtl.css 2.33 kB -4 B (-0.17%)
build/edit-post/style.css 2.33 kB -5 B (-0.21%)
build/editor/index.min.js 98.4 kB +28 B (+0.03%)
build/editor/style-rtl.css 9.29 kB +198 B (+2.18%)
build/editor/style.css 9.29 kB +198 B (+2.18%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 951 B
build/annotations/index.min.js 2.26 kB
build/api-fetch/index.min.js 2.31 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 579 B
build/block-directory/index.min.js 7.29 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.58 kB
build/block-editor/content.css 4.58 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
build/block-editor/index.min.js 254 kB
build/block-editor/style-rtl.css 16.2 kB
build/block-editor/style.css 16.2 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 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 310 B
build/block-library/blocks/button/editor.css 310 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 336 B
build/block-library/blocks/buttons/editor.css 336 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-content/style-rtl.css 90 B
build/block-library/blocks/comment-content/style.css 90 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 221 B
build/block-library/blocks/comments-pagination/editor.css 211 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 668 B
build/block-library/blocks/cover/editor.css 669 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 314 B
build/block-library/blocks/embed/editor.css 314 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 342 B
build/block-library/blocks/form-input/style.css 342 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 958 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.71 kB
build/block-library/blocks/gallery/style.css 1.71 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 402 B
build/block-library/blocks/group/editor.css 402 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 845 B
build/block-library/blocks/image/editor.css 843 B
build/block-library/blocks/image/style-rtl.css 1.54 kB
build/block-library/blocks/image/style.css 1.54 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.58 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 204 B
build/block-library/blocks/latest-posts/editor.css 204 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/media-text/editor-rtl.css 304 B
build/block-library/blocks/media-text/editor.css 303 B
build/block-library/blocks/media-text/style-rtl.css 516 B
build/block-library/blocks/media-text/style.css 515 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 663 B
build/block-library/blocks/navigation-link/editor.css 664 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.2 kB
build/block-library/blocks/navigation/editor.css 2.21 kB
build/block-library/blocks/navigation/style-rtl.css 2.26 kB
build/block-library/blocks/navigation/style.css 2.25 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/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 522 B
build/block-library/blocks/post-comments-form/style.css 522 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-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 141 B
build/block-library/blocks/post-excerpt/style.css 141 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 341 B
build/block-library/blocks/post-featured-image/style.css 341 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 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 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 220 B
build/block-library/blocks/query-pagination/editor.css 208 B
build/block-library/blocks/query-pagination/style-rtl.css 287 B
build/block-library/blocks/query-pagination/style.css 283 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 221 B
build/block-library/blocks/quote/theme.css 225 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 183 B
build/block-library/blocks/search/editor.css 183 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-title/editor-rtl.css 123 B
build/block-library/blocks/site-title/editor.css 123 B
build/block-library/blocks/site-title/style-rtl.css 71 B
build/block-library/blocks/site-title/style.css 71 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 676 B
build/block-library/blocks/social-links/editor.css 675 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/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/style-rtl.css 266 B
build/block-library/blocks/tag-cloud/style.css 265 B
build/block-library/blocks/template-part/editor-rtl.css 393 B
build/block-library/blocks/template-part/editor.css 393 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 108 B
build/block-library/blocks/term-description/style.css 108 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 553 B
build/block-library/blocks/video/editor.css 554 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.9 kB
build/block-library/editor.css 11.8 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 216 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.6 kB
build/block-library/style.css 14.6 kB
build/block-library/theme-rtl.css 702 B
build/block-library/theme.css 707 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.2 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 221 kB
build/components/style-rtl.css 12 kB
build/components/style.css 12 kB
build/compose/index.min.js 12.9 kB
build/core-commands/index.min.js 2.78 kB
build/core-data/index.min.js 72.7 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.65 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 580 B
build/edit-site/index.min.js 211 kB
build/edit-site/posts-rtl.css 6.64 kB
build/edit-site/posts.css 6.64 kB
build/edit-site/style-rtl.css 11.7 kB
build/edit-site/style.css 11.7 kB
build/edit-widgets/index.min.js 17.6 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.07 kB
build/format-library/style-rtl.css 506 B
build/format-library/style.css 505 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/interactivity/debug.min.js 16.5 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.72 kB
build/interactivity/index.min.js 13.4 kB
build/interactivity/navigation.min.js 1.16 kB
build/interactivity/query.min.js 742 B
build/interactivity/router.min.js 2.8 kB
build/interactivity/search.min.js 615 B
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.16 kB
build/list-reusable-blocks/style-rtl.css 846 B
build/list-reusable-blocks/style.css 846 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.3 kB
build/notices/index.min.js 946 B
build/nux/index.min.js 1.59 kB
build/nux/style-rtl.css 749 B
build/nux/style.css 745 B
build/patterns/index.min.js 7.36 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 578 B
build/preferences/style.css 578 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.74 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.03 kB
build/token-list/index.min.js 581 B
build/url/index.min.js 3.85 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

@stokesman stokesman added [Type] Enhancement A suggestion for improvement. [Package] Editor /packages/editor labels Jun 18, 2024
@stokesman stokesman force-pushed the update/editor-header-layout branch from 9eaadad to f00c36b Compare June 18, 2024 16:07
Copy link

Flaky tests detected in f00c36b.
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/9568455631
📝 Reported issues:

@stokesman stokesman changed the title Editor: Improve header layout Editor: Improve Header layout and Document Bar conditional rendering Jun 18, 2024
Copy link
Contributor Author

@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’ve added some explanatory review comments.

function CollapsableBlockToolbar( { isCollapsed, onToggle } ) {
export default function CollapsibleBlockToolbar( { isCollapsed, onToggle } ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Typo correction, the filename is correct but the component itself was typo’d.

Copy link
Contributor

Choose a reason for hiding this comment

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

Nice catch!

Comment on lines -71 to +73
// Some plugins add buttons here despite best practices.
// Push them a bit rightwards to fit the top toolbar.
margin-right: $grid-unit-10;
// Some plugins add buttons here despite best practices — accommodate them with a gap.
&:not(:last-child) {
margin-inline-end: $grid-unit-10;
}
Copy link
Contributor Author

@stokesman stokesman Jun 18, 2024

Choose a reason for hiding this comment

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

I thought conditionally adding this "gap" was better than universally doing so. It saves a bit of space when plugins aren’t adding buttons there (or "Top toolbar" is not on as it also serves there). Note this change would leave no space before the collapsible block toolbar’s toggle button so that is instead handled by header styles.

Comment on lines -28 to -31

@include break-large() {
width: min(100%, 450px);
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm not sure just why the width needed a distinct maximum at the large breakpoint. I moved the 450px up to the base style on L13 and with the overall changes the Document Bar smoothly narrows according to available space.

Comment on lines -80 to -82
.editor-collapsible-block-toolbar__toggle {
margin-left: 2px; // Allow focus ring to be fully visible
}
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 parent element’s style changes now ensure this isn’t necessary.

@stokesman stokesman marked this pull request as ready for review June 18, 2024 21:35
Copy link

github-actions bot commented Jun 18, 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: stokesman <presstoke@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@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.

@stokesman stokesman requested a review from a team June 18, 2024 21:36
@jasmussen
Copy link
Contributor

Nice one, another very important detail to get right. Appreciate the PR. At a glance, works okay. I know this is something both @richtabor and @jameskoster have tinkered with, so here's a CC.

Before:

before

Note how the title is visible on mobile, but not in a functional way. And note how it is flush with the save button as well, on the tablet breakpoint.

After:

after

Note how both the mentioned issues are addressed, the title is hidden on mobile, and the overall responsiveness is more fluid. So how do you see or change the document title on mobile? Through the document inspector as part of the new unified summary panel:

document inspector with title highlighted and the titles ellipsis menu open to show the rename option

At this point, I would say this more or less fixes #52032. If there are a couple of small bits from that issue you can absorb, feel free to, though!

@stokesman
Copy link
Contributor Author

Here’s something that may need addressed at some point. The site icon in the header currently is rendered into a slot. Conceivably, there could be an app that chooses not to fill the slot yet end up with a space for it anyway because the styles in this branch don’t account for that. It seems a moot point for now because these components are private APIs and all apps are filling the slot. Still, in trunk it happens that the space is not reserved in such cases:

This branch without a fill for the slot:
image

Trunk without a fill for the slot:
image

@stokesman stokesman force-pushed the update/editor-header-layout branch from 914001f to 132045e Compare June 20, 2024 00:31
@jameskoster
Copy link
Contributor

This is looking good, though I'm a little anxious about hiding the title on mobile since it removes access to the Command Palette. I've seen comments elsewhere about revealing the undo/redo buttons on mobile too. I wonder if we could hide more, and surface actions through the command palette instead.

commands

Probably unrelated, but potentially worth fixing here; I see a 'Preview' button on mobile, which is duplicative of the external icon button:

Screenshot 2024-06-20 at 16 04 47

@stokesman
Copy link
Contributor Author

stokesman commented Jun 20, 2024

I'm a little anxious about hiding the title on mobile

I wanted to keep it around at mobile. There’s enough room for it to be functional (providing we resolve that odd "Preview" button). I wanted to hide at some point to help preserve just how narrow the header can currently go but I didn’t see another breakpoint at < mobile that could be used for that though. Perhaps it doesn’t have to hide and can just squish out of existence like it currently does.

I wonder if we could hide more, and surface actions through the command palette instead.

I think it’s a worthwhile exploration though perhaps not so much for this PR.

Probably unrelated, but potentially worth fixing here; I see a 'Preview' button on mobile, which is duplicative of the external icon button:

Thanks for pointing that out. I’ve been seeing it too and wondered why Joen’s screen recording didn’t have it. Then while testing most recently I noticed it was absent during one session but seems like a refresh later it was back. I haven’t yet looked into it. It does seem unrelated but I'll try and understand what’s happening.


Here’s something that may need addressed at some point. The site icon in the header currently is rendered into a slot

#62636 (comment)

After making that comment I realized this was busted in the post editor when the editor isn’t fullscreen (also at less than 782px where there is no fullscreen) as it hides the Site icon. It’s effectively the same issue I referred to in the comment although the slot is filled and its button is hidden by CSS. I suppose I could have written some style overrides only for the post editor but I decided it’s probably neater overall to address it in the header itself. So I added 07dd535 and 132045e to do so. The post editor won’t fill the slot unless fullscreen and the header is aware of whether the slot is filled or not.

@stokesman stokesman force-pushed the update/editor-header-layout branch from 132045e to 30d5b4a Compare June 24, 2024 20:32
@stokesman
Copy link
Contributor Author

Probably unrelated, but potentially worth fixing here; I see a 'Preview' button on mobile, which is duplicative of the external icon button

I looked into this some and that button is only present when editing a post type that can be previewed (i.e. pages and not template parts, patterns or others). Then it’s hidden at < small breakpoints. As best I can tell this came about in #56921 diff of relevant addition and seems like a mistake. Shouldn’t the button be hidden for smaller viewports instead of shown? I've pushed a commit 41ba177 that makes it so.

It’s an aside but the Preview button is not totally duplicative of the View button because the former will show the post as edited and the latter will show the post as saved. I wonder if it’d be an improvement to combine the controls into a menu (for the post types it’s applicable to anyway).

More aside; here are some other details I noticed that seem like they warrant fixes but are not related enough to this PR:
image

  • The Preview button’s text baseline isn’t quite aligned to that of the Document Bar or Save button.
  • Both the Preview and View buttons have a focus color that isn’t shared by any other buttons I tested.

I'm a little anxious about hiding the title on mobile

I've gone ahead and tried keeping it around for about 100px less than mobile 30d5b4a. So it’s now closer to how it is in trunk. Here’s the max-width it’s still shown at when editing a page:
image

And when editing a template:
image

If we wanted, a separate breakpoint could be used to keep the Document Bar visible even narrower for templates but I'm not sure it’s worth it.

@jameskoster
Copy link
Contributor

Ah, I guess it's because the Preview action is bundled in the device preview toggles on desktop. Obviously these aren't applicable on smaller screens, hence they get replaced with the 'Preview' text button. The whole viewing/previewing menu needs some attention – obviously that's a separate endeavour.

Here’s the max-width it’s still shown at when editing a page

I think that looks okay, and leaves the door open to something like #62636 (comment) down the road.

@stokesman stokesman force-pushed the update/editor-header-layout branch from 30d5b4a to deaba73 Compare June 25, 2024 17:40
@stokesman
Copy link
Contributor Author

Ah, I guess it's because the Preview action is bundled in the device preview toggles on desktop

Right, thank you for reminding me. So the minor issue there is is that currently the separate Preview button isn’t shown at the same breakpoint that the Device Preview dropdown is hidden. I've reverted the change I made regarding that and because that affects the space available for the Document Bar (while editing a page) revised the custom breakpoint used to hide it. It’s now at 403px instead of 382px. Here are the latest page/template captures for the max-width it’s still present.

Editing a page (the Document Bar is still present but totally obscured):
image

Editing a template:
image

@jameskoster
Copy link
Contributor

Obviously the mobile experience is not perfect, but the enhancements here are a step in the right direction compared to trunk.

I think this one just needs a code review.

@richtabor richtabor requested review from Mamaduka and t-hamano July 1, 2024 13:00
@richtabor
Copy link
Member

@t-hamano @Mamaduka — if one of you could give this a good look-over, it'll be good to go. Thanks!

@Mamaduka
Copy link
Member

Mamaduka commented Jul 3, 2024

@stokesman, do you mind rebasing this on top of the latest trunk?

I don't like some metric changes (type and focus) in the current performance test reports. The useHasBlockToolbar hook has been known to affect those, and I would like to confirm it.

cc @jeryj

@stokesman stokesman force-pushed the update/editor-header-layout branch from deaba73 to 7238351 Compare July 3, 2024 15:04
@stokesman
Copy link
Contributor Author

I don't like some metric changes (type and focus)

I appreciate you pointing that out. Looks like this time around type came out fine but not some of the other type*s and focus is still slower. Absolutely, the differences in milliseconds seem negligible but I get how we don’t want it creeping up. I’ll look into a way to avoid it and otherwise I'm okay with omitting the change to the conditional rendering for this PR if considered too impactful on performance.

@stokesman
Copy link
Contributor Author

stokesman commented Jul 4, 2024

I've now reverted the conditional rendering changes to see how that’d affect the metrics. Here’s the run after. It helped with focus but oddly the type and inserterSearch ones didn’t go well. I hardly know what to make of it.

Anyway, I think it’s fine to leave those out and focus the PR on the the layout improvements. CSS could be used to achieve what the conditional rendering changes were doing and I’ll look to try that separately.

@stokesman stokesman changed the title Editor: Improve Header layout and Document Bar conditional rendering Editor: Improve Header layout Jul 4, 2024
@stokesman stokesman force-pushed the update/editor-header-layout branch from c36397d to 6406918 Compare July 12, 2024 15:29
Comment on lines -17 to -21
const hasFills = Boolean( fills && fills.length );

if ( ! hasFills ) {
return children;
}
Copy link
Member

Choose a reason for hiding this comment

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

@stokesman Is this change required? If yes, can you elaborate more on "why"? Thanks.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I didn’t have to remove this but it seemed redundant if we let the Header decide whether to render the slot. "Why" is hopefully clarified in my reply to your other comment on the header.

Copy link
Member

Choose a reason for hiding this comment

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

Thanks for the explanation, @stokesman! I guess it's okay to change the component's behavior; it's a private component, so there are no requirements for BC.

Comment on lines 101 to 99
{ hasBackButton && (
<motion.div
variants={ backButtonVariations }
transition={ { type: 'tween' } }
>
<BackButton.Slot />
</motion.div>
) }
Copy link
Member

Choose a reason for hiding this comment

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

Will there be a case when a "back button" is missing? Seems like a problematic path for fullscreen users.

Cc @youknowriad (since you worked on this unification recently).

Copy link
Contributor

Choose a reason for hiding this comment

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

I don't understand the question. Would you mind clarifying?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think the "back button" is always present. It can be overridden by third-parties though.

Copy link
Member

Choose a reason for hiding this comment

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

I think the "back button" is always present. It can be overridden by third-parties though.

Exactly. The header should always render a "back button", either the default or one provided by third-parties. This condition and the BackButton slot-fill changes seem unnecessary.

Copy link
Contributor Author

@stokesman stokesman Jul 16, 2024

Choose a reason for hiding this comment

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

Will there be a case when a "back button" is missing?

In the Post editor the back button is missing when not fullscreen (and at < 783px even with fullscreen preference on). Currently it’s done via CSS. The header layout needs to account for that and rather then add overriding styles in the edit-post package, I thought these changes would be cleaner overall and support the conceivable use case for a third-party to not render a back button (without them having to add overriding styles to avoid empty space). I’d noted this first in #62636 (comment) and later mentioned why I opted for these changes #62636 (comment) (in the latter part, after the hr).

<div
className={ clsx( 'editor-header edit-post-header', {
'has-back-button': hasBackButton,
'has-center': hasCenter,
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we really need this kind of classes? Can't we figure out a unified layout that works without requiring these?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Potentially more advanced and probably less readable selectors in the CSS could be used. I have another design change I’d like to propose for the header that should eliminate the need for has-center and simplify some CSS but it’s too distinct for this PR.

I’ll take another look anyway. I don’t love the classes either.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Okay, done in 574b8bc and 884c534. I still don’t love using :has() but perhaps I’ll be able to get rid of it with the aforementioned change I’ll propose in a later PR.

@stokesman stokesman force-pushed the update/editor-header-layout branch from 6406918 to 884c534 Compare July 17, 2024 01:49
Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

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

I think this is good to land.

@stokesman
Copy link
Contributor Author

Let’s 🚢. Thanks everyone who tested and reviewed.

@stokesman stokesman merged commit bced5e0 into trunk Jul 22, 2024
64 checks passed
@stokesman stokesman deleted the update/editor-header-layout branch July 22, 2024 14:24
@github-actions github-actions bot added this to the Gutenberg 18.9 milestone Jul 22, 2024
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.

7 participants