-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Check if spacing tool is defined before displaying controls. #53008
Conversation
Size Change: +5 B (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, thank you for looking into this one!
This actually appears to expose a bug for margin
and padding
, too.
In theme.json
, we should be able to set settings.spacing.margin
to false
to hide margin controls, (and padding, blockGap to false
, too, to hide them). However in testing this PR, I see that setting to false
doesn't currently hide them.
To reproduce, update the Columns block's block.json
to use the following spacing settings (so that they each specify sides):
"spacing": {
"blockGap": {
"__experimentalDefault": "2em",
"sides": [ "horizontal", "vertical" ]
},
"margin": [ "top", "bottom" ],
"padding": [ "top", "bottom" ],
"__experimentalDefaultControls": {
"padding": true,
"blockGap": true
}
},
Then, in theme.json
, try setting each of the values to false:
"spacing": {
"margin": false,
"padding": false,
"blockGap": false,
It looks like the controls are still visible:
I'm pretty sure if we change the typeof
check for a truthy check, we might be able to fix that at the same time?
// Check if spacing type actually exists before adding sides. | ||
if ( | ||
sides?.length && | ||
typeof updatedSettings.spacing?.[ key ] !== 'undefined' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should this be a truthy check instead of not undefined? E.g. something like !! updatedSettings.spacing?.[ key ]
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, I thought about it but wasn't sure if that was just the way of exposing only top and bottom margin controls 😅
I'll give it a try.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've updated it, but now no dimensions controls seem to be showing for any blocks in classic themes 🤔 which I don't think is the intended result.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh wait, actually that might be a Twenty Twenty thing, because I'm seeing padding controls for some blocks in Twenty Twenty One.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hrm... most likely not the intended result!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One way to test it could be to try adding add_theme_support( 'appearance-tools' );
to the classic theme you're testing?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, confirmed it's a Twenty Twenty issue. So I guess this is working as expected?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good to hear!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! ✨
Tested with a few classic themes e.g. TwentyTwentyOne, emptyhybrid etc. and this PR fixes the reported issue.
Block themes and their display of spacing controls have now also been fixed.
Nice work!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Works nicely for me, too. Tested in Classic themes (looks like add_theme_support( 'custom-spacing' );
adds in padding support for classic themes), and block themes in the post and site editors. Thanks for fixing this up! ✨
Thanks for the reviews folks! |
* Check if spacing tool is defined before displaying controls. * Don't show sides if spacing type false
I just cherry-picked this PR to the update/packages-wp-6-3-RC3 branch to get it included in the next release: 8aa3a21 |
* Patterns: Enable focus mode editing (#52427) * PreventDefault when isComposing is true. apply patch from t-hamano. (#52844) see: #52821 (comment) * List View: Ensure onDrop does not fire if there is no target (#52959) * I18N: Add missing Gettext wrapper on strings in Edit Post overview sidebar (#52971) * I18N: Add missing gettext wrapper * Add context to disambiguate 'Outline' that is commonly used on borders. * Footnotes: disable based on post type (#52934) * Footnotes: disable based on post type * Address feedback * Fix typo * Format: disable if block is not registered * Lock usesContext api * Use Symbol instead of Math.random * Patterns Browse Screen: Fix back button when switching between categories (#52964) * Patterns: Allow orphaned template parts to appear in general category (#52961) * Spacing presets: fix bug with select control adding undefined preset values (#53005) * Site Editor: Fix canvas mode sync with URL (#52996) * Check if spacing tool is defined before displaying controls. (#53008) * Check if spacing tool is defined before displaying controls. * Don't show sides if spacing type false * Improve consistency of the Post editor and Site editor Document actions (#52246) * Remove redundant shortcut button. * Fix focus and hover style and improve consistency. * Rename post document-title and improve CSS consistency. * Site Editor: Fix the typo in the title label map (#53071) * Fix patterns search crash: check for existence of defaultView before attempting to get styles (#52956) * backport paging bug fixes (#53091) --------- Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> Co-authored-by: Hiroshi Urabe <mail@torounit.com> Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Co-authored-by: Pedro Mendonça <ped.gaspar@gmail.com> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Co-authored-by: Glen Davies <glendaviesnz@users.noreply.github.com> Co-authored-by: tellthemachines <tellthemachines@users.noreply.github.com> Co-authored-by: Andrea Fercia <a.fercia@gmail.com>
What?
Fixes #52909.
In classic themes, block spacing controls don't work so they shouldn't be displayed.
This PR adds a check for whether the spacing tool is defined before outputting any sizes setting it may have. In classic themes,
spacing.blockGap
is undefined so this should prevent blockGap sizes from being added to settings.I'm not sure this is the best fix, but it was the simplest I could think of for now 😅
Arguably we should support blockGap in classic themes, but that's beyond the scope of this bug fix.
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast