Editor: Improve Header layout

[stokesman]

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 https://github.com/WordPress/gutenberg/pull/53913#issuecomment-1697346079 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

Layout on trunk editing a template

Layout on this branch editing a page

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

Trunk switching between page and template

https://github.com/WordPress/gutenberg/assets/9000376/46c6f410-6bac-475b-a1c3-2eadf997f056

This branch switching between page and template

https://github.com/WordPress/gutenberg/assets/9000376/84a8b0d1-4828-4a1e-925b-f77697fe6444

[github-actions[bot]]

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}

[github-actions[bot]]

Flaky tests detected in f00c36beaebe2b71871fd3d8d18879ea9d235b4c. 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:

• #60678 in /test/e2e/specs/site-editor/site-editor-url-navigation.spec.js

[github-actions[bot]]

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 <[email protected]>
Co-authored-by: jeryj <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: richtabor <[email protected]>

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

[jasmussen]

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:

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:

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:

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]

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:

Trunk without a fill for the slot:

[jameskoster]

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.

---

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

[stokesman]

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

https://github.com/WordPress/gutenberg/pull/62636#issuecomment-2179369654

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 07dd535a57adb2ec82f72a8b2334d3d12db08ae2 and 132045e3c2968eca518f0028b70a130b572a6cec 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]

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 41ba1770250662eb2d31b36265cefa8d03f30bdc 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:

• 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 30d5b4af3fcb8989898bfb31cffc7063ff1d8b71. 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:

And when editing a template:

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]

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 https://github.com/WordPress/gutenberg/pull/62636#issuecomment-2180960878 down the road.

[stokesman]

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):

Editing a template:

[jameskoster]

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]

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

[Mamaduka]

@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]

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]

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]

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