Center the document title #59134
Merged
Center the document title #59134
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +1.14 kB (0%) Total Size: 1.72 MB
ℹ️ View Unchanged
|
richtabor
added
[Type] Enhancement
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @Sirjazzfeetz. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Flaky tests detected in db02a0a. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7933594163
|
|
Good work. looks good now. |
|
I think the fact that the document bar gets a lot narrower here will mean that the title will get truncated a lot more. This is an issue both on pages / templates that have longer names than your |
draganescu
reviewed
Mar 5, 2024
| flex-shrink: 2; | ||
|
|
||
| // Account for the site hub, with is 60x60px. | ||
| flex-basis: calc(37.5% - 60px); |
There was a problem hiding this comment.
25% (the center) with 37.5% for left and right (left is technically 37.5 - 60px, the width of the site icon). That way it's actually centered, while allowing room for additional icons on the right.
I think this is an improvement since there is simply not enough screen to show this kind of UI. But I do think missing the cmd k button on mobile is not great. |
richtabor
force-pushed
the
try/center-document-title
branch
from
db02a0a to
70faee3
Compare
I've reworked it, to keep it. What do you think @draganescu? doc-title.mp4 |
I did buy a little more room in 7e68235. It does not truncate "Page with Sidebar" unless the viewport is less than 900px wide — which is the same condition as in trunk now. So essentially no change on this front.
|
richtabor
added
[Type] Enhancement
|
I updated it to also not render the styles icon in the header on mobile. It's accessible from the "More" menu as well, and gives a bit more room for the more important parts of the UI that do not have alternate methods of engaging.
|
draganescu
approved these changes
Mar 22, 2024
There was a problem hiding this comment.
I think this is OK for now. With this change there is a clear improvement in the layout of the header for the site editor.
One other situation where on small viewports the document title gets too squashed to be useful is when editing a page and the "preview in new tab" button appears:
But we can't just hide it I think, because this does not go into the vertical ellipsis button. So it's something to do in a follow up imo.
|
This PR may have caused title misalignment on the Style Book page and the Revisions page. See #60251. |
carstingaxion
pushed a commit
to carstingaxion/gutenberg
that referenced
this pull request
Mar 27, 2024
* Don't hide list view, remove viewport padding adjustment * Fix title displacement when cmd k is hidden * Add flex-basis, hide center on mobile * Tweaks for maintaining DocumentBar on mobile * Make title truncate less * simplify padding * don't render global styles icon on mobile Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: huzaifaalmesbah <huzaifaalmesbah@git.wordpress.org> Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org> Co-authored-by: bangank36 <bangank36@git.wordpress.org> Co-authored-by: jordesign <jordesign@git.wordpress.org> Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
This was referenced Apr 1, 2024
|
This causes an issue where the block toolbar doesn't take up its full available space when the center area is collapsed. It causes the block toolbar to scroll when there is space available for it to be visible in the header. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #29673.
An alternative to #59078. Also consolidates some break points to reduce elements rendering at different viewports.
Testing Instructions
Before
before.mp4
After
doc-title.mp4