-
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
Add layout content size controls to global styles #42309
Merged
Merged
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
cdae78c
Add layout content size controls to global styles
tellthemachines bd6e4af
Align flex items
tellthemachines 84eb319
Render flex wrappers conditionally
tellthemachines e604bcf
Fix reset behaviour
tellthemachines 7affab7
Optimise markup
tellthemachines f22d79e
Tweak how controls are laid out within panel
aaronrobertshaw 8cb01e5
Fix text i18n
aaronrobertshaw File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,8 +8,11 @@ import { | |
__experimentalBoxControl as BoxControl, | ||
__experimentalUnitControl as UnitControl, | ||
__experimentalUseCustomUnits as useCustomUnits, | ||
Flex, | ||
FlexItem, | ||
} from '@wordpress/components'; | ||
import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor'; | ||
import { Icon, positionCenter, stretchWide } from '@wordpress/icons'; | ||
|
||
/** | ||
* Internal dependencies | ||
|
@@ -19,11 +22,27 @@ import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks'; | |
const AXIAL_SIDES = [ 'horizontal', 'vertical' ]; | ||
|
||
export function useHasDimensionsPanel( name ) { | ||
const hasContentSize = useHasContentSize( name ); | ||
const hasWideSize = useHasWideSize( name ); | ||
const hasPadding = useHasPadding( name ); | ||
const hasMargin = useHasMargin( name ); | ||
const hasGap = useHasGap( name ); | ||
|
||
return hasPadding || hasMargin || hasGap; | ||
return hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap; | ||
} | ||
|
||
function useHasContentSize( name ) { | ||
const supports = getSupportedGlobalStylesPanels( name ); | ||
const [ settings ] = useSetting( 'layout.contentSize', name ); | ||
|
||
return settings && supports.includes( 'contentSize' ); | ||
} | ||
|
||
function useHasWideSize( name ) { | ||
const supports = getSupportedGlobalStylesPanels( name ); | ||
const [ settings ] = useSetting( 'layout.wideSize', name ); | ||
|
||
return settings && supports.includes( 'wideSize' ); | ||
} | ||
|
||
function useHasPadding( name ) { | ||
|
@@ -86,6 +105,8 @@ function splitStyleValue( value ) { | |
} | ||
|
||
export default function DimensionsPanel( { name } ) { | ||
const showContentSizeControl = useHasContentSize( name ); | ||
const showWideSizeControl = useHasWideSize( name ); | ||
const showPaddingControl = useHasPadding( name ); | ||
const showMarginControl = useHasMargin( name ); | ||
const showGapControl = useHasGap( name ); | ||
|
@@ -99,6 +120,22 @@ export default function DimensionsPanel( { name } ) { | |
], | ||
} ); | ||
|
||
const [ contentSizeValue, setContentSizeValue ] = useSetting( | ||
'layout.contentSize', | ||
name | ||
); | ||
|
||
const hasContentSizeValue = () => !! contentSizeValue; | ||
const resetContentSizeValue = () => setContentSizeValue( '' ); | ||
|
||
const [ wideSizeValue, setWideSizeValue ] = useSetting( | ||
'layout.wideSize', | ||
name | ||
); | ||
|
||
const hasWideSizeValue = () => !! wideSizeValue; | ||
const resetWideSizeValue = () => setWideSizeValue( '' ); | ||
|
||
const [ rawPadding, setRawPadding ] = useStyle( 'spacing.padding', name ); | ||
const paddingValues = splitStyleValue( rawPadding ); | ||
const paddingSides = useCustomSides( name, 'padding' ); | ||
|
@@ -141,6 +178,66 @@ export default function DimensionsPanel( { name } ) { | |
|
||
return ( | ||
<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }> | ||
<Flex> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh, yes, definitely! |
||
<FlexItem> | ||
{ showContentSizeControl && ( | ||
<ToolsPanelItem | ||
label={ __( 'Content size' ) } | ||
hasValue={ hasContentSizeValue } | ||
onDeselect={ resetContentSizeValue } | ||
isShownByDefault={ true } | ||
> | ||
<Flex align="flex-end"> | ||
<FlexItem> | ||
<UnitControl | ||
label={ __( 'Content' ) } | ||
labelPosition="top" | ||
__unstableInputWidth="80px" | ||
value={ contentSizeValue || '' } | ||
onChange={ ( nextContentSize ) => { | ||
setContentSizeValue( | ||
nextContentSize | ||
); | ||
} } | ||
units={ units } | ||
/> | ||
</FlexItem> | ||
<FlexItem> | ||
<Icon icon={ positionCenter } /> | ||
</FlexItem> | ||
</Flex> | ||
</ToolsPanelItem> | ||
) } | ||
</FlexItem> | ||
<FlexItem> | ||
{ showWideSizeControl && ( | ||
<ToolsPanelItem | ||
label={ __( 'Wide size' ) } | ||
hasValue={ hasWideSizeValue } | ||
onDeselect={ resetWideSizeValue } | ||
isShownByDefault={ true } | ||
> | ||
<Flex align="flex-end"> | ||
<FlexItem> | ||
<UnitControl | ||
label={ __( 'Wide' ) } | ||
labelPosition="top" | ||
__unstableInputWidth="80px" | ||
value={ wideSizeValue || '' } | ||
onChange={ ( nextWideSize ) => { | ||
setWideSizeValue( nextWideSize ); | ||
} } | ||
units={ units } | ||
/> | ||
</FlexItem> | ||
<FlexItem> | ||
<Icon icon={ stretchWide } /> | ||
</FlexItem> | ||
</Flex> | ||
</ToolsPanelItem> | ||
) } | ||
</FlexItem> | ||
</Flex> | ||
{ showPaddingControl && ( | ||
<ToolsPanelItem | ||
hasValue={ hasPaddingValue } | ||
|
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
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.
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.
Taking another look at this check, I'm wondering if part of the issue with the ToolsPanel menu state is that if the
contentSizeValue
matches the value after reset, then this will returntrue
. So if my content width is set to840px
and I change it to900px
and then reset it, the value here is840px
, and so the menu item thinks there's still a custom value?That said, there seems to be something else funny going on, because when I first load the site editor, the ToolsPanel seems to be showing padding as customised, too 🤔
The weird behaviour does appear to be on
trunk
, too, so not sure if it's worth attempting to fix now? I think ontrunk
it's a little less visible because it seems to be working fine at the block level, and we currently only have thePadding
dimensions control made visible at the root level 🤔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.
It appears that the menu is reflecting exactly what the
hasContentSizeValue
callback is telling it. Any truthy value forcontentSizeValue
is going to state that theToolsPanelItem
has a customized value.If I understand the situation correctly, there's always a root value so the logic here needs to be more nuanced. It should be checking if the user has set a value i.e. check the style value from the
user
origin rather than the merged styles akaall
origin.The border panel checks the
user
origin border styles to reflect the whether the user has customized any values e.g.const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
It would be a worthwhile follow up to give these global styles panels an audit to check they all behave appropriately. I know things have evolved rapidly here on multiple fronts so its entirely possible a few gremlins crept in.
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.
Checking for user styles makes sense! Updated.