Spacing presets: Add support for margins #43246
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
glendaviesnz
added
the
Global Styles
|
Size Change: +1.38 kB (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Thanks for rolling out this one @glendaviesnz! It's testing pretty well in general for me, but I ran into an issue with some blocks where the margin is set to a restricted list of sides (e.g. just top and bottom) in both the block editor and in global styles.
When first interacting with the control, if there's no value, I can slide the Margin control and the value appears to be output, but the UI controls doesn't appear to update:
To replicate, I'm using TwentyTwentyTwo and adjusting the margin for the Columns block in global styles. There is no existing margin value for Columns in my theme.json file. I can also replicate it with the Group block in the post editor. If I manually set a side value or click unlink / relink, then the UI seems to start working again.
Other than that, it appears to be working quite nicely. It did occur to me, while looking at this case of blocks where we're using restricted sides, that in the collapsed state, it isn't clear from looking at the control which sides it'll be affecting. So if you have a Group block (where it's just vertical) and a Heading block (which does all sides), you don't know before you start sliding if it'll do all sides or just two of them:
This is beyond the scope of this PR, but I wonder if (eventually?) we might want include a visual indicator of the sides that will be affected, a bit like the icon from the BoxControl component? Apologies if this was brought up already on this initial PR, I can't remember if it's already been discussed!
Happy to do more testing tomorrow.
Ah, it looks like you might already have a fix for this in #43237, sorry, I missed that one! I'll go give that one a review 😀 Update: that was a good looking PR, but I don't think it'll fix the issue (I tried merging #43237 into this branch, but the issue still appears, I think the failure state just looked similar visually 🙂) — so, my hunch is that it's somehow to do with limiting the sides that are in use 🤔 |
It was already fixed on this branch, but I forgot to push the final commit 🤦 - sorry to have wasted your time on that, but should work for custom sides now.
Yeh, good point, have added a task to the tracking issue so this doesn't get forgotten. |
andrewserong
approved these changes
Aug 19, 2022
There was a problem hiding this comment.
Thanks @glendaviesnz, that fixed it up nicely!
but I forgot to push the final commit
Ah, I do that all the time 😄, no worries!
Testing:
✅ With spacingSizes set to 0 BoxControl works correctly in the editor and global styles
✅ With spacingSizes set to 7 the SpacingControl with the RangeControl works correctly in the editor and global styles
✅ With spacingSizes set to 10 the SpacingControl with the Select list works correctly in the editor and global styles
LGTM! 🎉
18 tasks
57 tasks
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.
What?
Adds the new spacing presets option to the margin controls
Why?
They think it is unfair that padding are the only control to have this new functionality
How?
Adds the SpacingSizesControl component to the margin controls in blocks tools panel and global styles
Testing Instructions
Screenshots or screencast
margin.mp4