Fix: Block toolbar obscuring document tools when Top Toolbar is enabled #52722
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
jameskoster
added
[Type] Bug
|
Size Change: -96 B (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
|
It is better now, but:
On smaller screens I still have the overlaping effect on almost all blocks: |
|
This is an improvement, but perhaps a follow-up (6.3+) would be a mechanism to move controls into a popover when there is not enough space. |
|
@pg-greyd this fixes the original issue though and the features are working as intended. I agree it's a bit inconvenient on small screens, but you can now access plugins and other tools by clicking the
Could be worth a try. Horizontal scrolling might be another option. |
draganescu
force-pushed
the
fix/obscured-document-actions
branch
from
4b26cbb
to
34505a3
Compare
|
Unfortunately we need the calc to hide the document thing in the middle of the header in the site editor. 
I guess we could apply I think we should not fix this, and instead:
The reason we need the 1st two things for the last one, is that the only reason for this weird CSS implementation of the top toolbar mode update is that we want to keep shift tab and alt f10 key combos working the same as they do whtn in normal toolbar mode. So we need to update the default keyboard navigation to not depend on it. Later edit: we should fix this but only apply the update to the post editor. |
Unsure of the best way to do that, but the latest commit is one way :) |
|
Flaky tests detected in dd6dc6e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5600758357
|
|
I added a commit after your commit and tried a simpler way - only when full screen do we need the calc rule, otherwise the width can be auto. This is based on the fact that the site editor is always full screen. |
draganescu
approved these changes
Jul 19, 2023
tellthemachines
pushed a commit
that referenced
this pull request
Jul 24, 2023
…ed (#52722) * Update toolbar width * Site editor needs specific width * fixes top toolbar width for post editor when not in fullscreen * remove the body rule --------- Co-authored-by: Andrei Draganescu <andrei.draganescu@automattic.com>
|
I just cherry-picked this PR to the update/packages-RC2 branch to get it included in the next release: c77d9f5 |
tellthemachines
removed
the
Backport to WP 6.7 Beta/RC
Merged
tellthemachines
added a commit
that referenced
this pull request
Jul 24, 2023
* Filter out patterns that are not allowed in the inserter (#52675) * Remove autofocus and improve placeholder text consistency. (#52634) * Do not navigate to the styles pages unless you're in a random listing page (#52728) * Patterns: Don't override the rootClientID in create menu - only set if undefined (#52713) * Footnotes: store in revisions (#52686) * Fix: Block toolbar obscuring document tools when Top Toolbar is enabled (#52722) * Update toolbar width * Site editor needs specific width * fixes top toolbar width for post editor when not in fullscreen * remove the body rule --------- Co-authored-by: Andrei Draganescu <andrei.draganescu@automattic.com> * Site Editor: Fix site link accessibility issues (#52744) * Add id to pattern inserted notice to stop multiple notices stacking (#52746) * Global Styles: Don't use named arguments for 'sprintf' (#52782) * Footnotes: Use static closures when not using '' (#52781) * removes check for active preview device type to enable the fixed toolbar preference (#52770) * Parser / Site Editor: Ensure autop is not run when freeform block is set to core/html (#52716) * Parse / Site Editor: Ensure autop is not run when freeform block is set to core/html * Switch to equals freeform instead of not equals core/html * Rename core/test-freeform to core/freeform in tests * Adding @SInCE annotation for relevant 6.3 changes. (#52820) * Navigation: Load the raw property on the navigation fallback (#52758) * Navigation: Load the raw property on the navigation fallback * Update lib/compat/wordpress-6.3/navigation-fallback.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update lib/compat/wordpress-6.3/navigation-fallback.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Add a test for these properties * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * add more comments * add necessary method * Fix php coding standards error --------- Co-authored-by: Dave Smith <getdavemail@gmail.com> Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com> * Allow styles to be changed dynamically through editor settings (#52767) * ResizableFrame: Fix styling in Firefox (#52700) * ResizableFrame: Fix styling in Firefox * Remove unused class * Patterns: Fix empty general template parts category (#52747) --------- Co-authored-by: Glen Davies <glen.davies@automattic.com> --------- Co-authored-by: Carolina Nymark <myazalea@hotmail.com> Co-authored-by: Andrea Fercia <a.fercia@gmail.com> Co-authored-by: Riad Benguella <benguella@gmail.com> Co-authored-by: Glen Davies <glendaviesnz@users.noreply.github.com> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> Co-authored-by: James Koster <james@jameskoster.co.uk> Co-authored-by: Andrei Draganescu <andrei.draganescu@automattic.com> Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Co-authored-by: Ramon <ramonjd@users.noreply.github.com> Co-authored-by: Ben Dwyer <ben@scruffian.com> Co-authored-by: Dave Smith <getdavemail@gmail.com> Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com> Co-authored-by: Lena Morita <lena@jaguchi.com> Co-authored-by: Kai Hao <kevin830726@gmail.com> Co-authored-by: Glen Davies <glen.davies@automattic.com>
mikachan
added
[Package] Block editor
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.
Part of #52688.
What?
Adjust the width applied to
.block-editor-block-contextual-toolbar.is-fixedon large screens.Why?
The current implementation results in document tools being obscured:
before.mp4
How?
Use
width: autoinstead of an absolute value.The Block toolbar will still obscure document tools on smaller screens, but they can be revealed by clicking the
<<button, so I don't think it's an issue.Testing Instructions
<<on the block toolbar if necessary.after.mp4