Use the interface package for the navigation screen #30013
Merged
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
Implement interface Add hacky useBlockSelectionClearer implementation Toolbar tweaks
talldan
added
[Type] Enhancement
talldan
requested review from
kevin940726,
noisysocks and
tellthemachines
as code owners
|
Size Change: +7.67 kB (+1%) Total Size: 1.41 MB
ℹ️ View Unchanged
|
grzim
reviewed
Mar 22, 2021
| import { __ } from '@wordpress/i18n'; | ||
| import { cog } from '@wordpress/icons'; | ||
|
|
||
| const BLOCK_INSPECTOR_SCOPE = 'core/edit-navigation'; |
There was a problem hiding this comment.
I think we can move these two to /utils/constants.js
There was a problem hiding this comment.
👍 I did that. I've also moved constants.js out of utils and into its own folder (constants/index.js). Slightly nicer than having to traverse up to root and then down into utils.
grzim
reviewed
Mar 22, 2021
| // Force the sidebar to the right side of the screen on larger | ||
| // breakpoints. | ||
| &.has-permanent-sidebar .interface-interface-skeleton__sidebar { | ||
| position: fixed !important; |
There was a problem hiding this comment.
is there any way to avoid using !important?
There was a problem hiding this comment.
Looks like this package is using important here:
This might be a bit fragile if CSS loading order changes. With multiple !important rules, last one read wins.
There was a problem hiding this comment.
Yeah it's not great.
I think the concept of a permanent sidebar could alternatively be implemented in the interface package. I can take a look as a follow-up.
gwwar
approved these changes
Mar 22, 2021
| // Force the sidebar to the right side of the screen on larger | ||
| // breakpoints. | ||
| &.has-permanent-sidebar .interface-interface-skeleton__sidebar { | ||
| position: fixed !important; |
There was a problem hiding this comment.
Looks like this package is using important here:
This might be a bit fragile if CSS loading order changes. With multiple !important rules, last one read wins.
This was referenced Mar 23, 2021
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.
Description
Progresses #29100
Implements the interface package in the navigation screen again. Most of this is lifted from the previous attempt at #28686.
I've gone a bit further this time though. For larger viewports there should be very little difference to
trunk. A react effect and some styling fixes the sidebar to the side and makes it permanently open. Another styling tweak removes the header border that interface adds.On mobile the experience is much improved, the editor area spans the full width and the sidebar is now toggleable:
Mar-19-2021.17-38-55.mp4
There are still a few things to fix on mobile, but I'll push those to a later PR that enventually solves #29100.
How has this been tested?
Types of changes
New feature (non-breaking change which adds functionality)
Checklist: