This repository has been archived by the owner on Jan 15, 2019. It is now read-only.
Try: Better position wide and fullwide toolbars. #614
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
Toolbars are a bit off when wide and fullwide. This is because the vanilla editor style assumes a centered column, with equal padding left and right when a block goes wide and fullwide. But TwentyNineteen is smarter than that. This PR tries to make the experience good, but it needs your thoughts.
kjellr
approved these changes
Nov 16, 2018
allancole
approved these changes
Nov 16, 2018
There was a problem hiding this comment.
This is subtle but wonderfully clever :-).
I think its shippable sans this one rule, as Kjell mentioned: https://github.com/WordPress/twentynineteen/pull/614/files#diff-e31d4c0dd7cb9ed81c45783030a20ac5R66
|
Cool. I addressed the feedback. Let's ship and test fullwide blocks, see how it feels. If we want the docked block toolbar inset a bit, we can revisit. 👍 👍 |
|
Thanks, @jasmussen! |
This was referenced Nov 25, 2018
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Toolbars are a bit off when wide and fullwide. This is because the vanilla editor style assumes a centered column, with equal padding left and right when a block goes wide and fullwide.
But TwentyNineteen is smarter than that, and has a fancy left-aligned layout, except for fullwide which is truly fullwide.
This PR tries to make the experience good, but it needs your thoughts.
Before:
After:
However. The following line of code, https://github.com/WordPress/twentynineteen/compare/try/toolbar-fix?expand=1#diff-83a29128607f3783eb58ed25d6760ad6R66, has some hacky CSS that I'd kike for us to not include in this editor style, specifically because the calc math is both obtuse, and likely to break with any future changes to the editor layout.
If I remove lines 66 to 74 in editor-style.scss, we get this:
Honestly I think we should do that. However I still think it's worth having this discussion, because POSSIBLY this is a change we should make in Gutenberg itself and not here.
To frame it differently, the question is: when the block toolbar is docked to the block, on a wide or fullwide block, should the toolbar remain centered to match non-wide blocks? Or should it always dock to the top left corner of the block, regardless of the width and position?
Your thoughts are much appreciated. Given we're past the UI freeze, I think it might be good to include at least https://github.com/WordPress/twentynineteen/compare/try/toolbar-fix?expand=1#diff-83a29128607f3783eb58ed25d6760ad6R63, as that's a very simple and clean fix that makes the experience a lot better in TwentyNineteen. But good to discuss this regardless.