Skip to content
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 preset for padding and use it in the UI controls #23176

Closed
wants to merge 10 commits into from
5 changes: 5 additions & 0 deletions lib/experimental-default-theme.json
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,11 @@
"slug": "vivid-cyan-blue-to-vivid-purple",
"value": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"
}
],
"padding": [
{ "slug": "small", "value": 4 },
{ "slug": "regular", "value": 14 },
{ "slug": "large", "value": 23 }
]
},
"features": {
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -478,6 +478,7 @@ _Properties_
- _colors_ `Array`: Palette colors
- _disableCustomColors_ `boolean`: Whether or not the custom colors are disabled
- _fontSizes_ `Array`: Available font sizes
- _padding_ `Array`: Available padding values
- _disableCustomFontSizes_ `boolean`: Whether or not the custom font sizes are disabled
- _imageSizes_ `Array`: Available image sizes
- _maxWidth_ `number`: Max width to constraint resizing
Expand Down
5 changes: 5 additions & 0 deletions packages/block-editor/src/hooks/padding.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
*/
import { cleanEmptyObject } from './utils';
import { useCustomUnits } from '../components/unit-control';
import { useSelect } from '@wordpress/data';

export const PADDING_SUPPORT_KEY = '__experimentalPadding';

Expand All @@ -29,6 +30,9 @@ export function PaddingEdit( props ) {
} = props;

const units = useCustomUnits();
const { padding } = useSelect( ( select ) =>
select( 'core/block-editor' ).getSettings()
);

if ( ! hasBlockSupport( blockName, PADDING_SUPPORT_KEY ) ) {
return null;
Expand Down Expand Up @@ -64,6 +68,7 @@ export function PaddingEdit( props ) {
web: (
<>
<BoxControl
presetValues={ padding }
values={ style?.spacing?.padding }
onChange={ onChange }
onChangeShowVisualizer={ onChangeShowVisualizer }
Expand Down
7 changes: 7 additions & 0 deletions packages/block-editor/src/store/defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const PREFERENCES_DEFAULTS = {
* @property {Array} colors Palette colors
* @property {boolean} disableCustomColors Whether or not the custom colors are disabled
* @property {Array} fontSizes Available font sizes
* @property {Array} padding Available padding values
* @property {boolean} disableCustomFontSizes Whether or not the custom font sizes are disabled
* @property {Array} imageSizes Available image sizes
* @property {number} maxWidth Max width to constraint resizing
Expand Down Expand Up @@ -131,6 +132,12 @@ export const SETTINGS_DEFAULTS = {
{ slug: 'full', name: __( 'Full Size' ) },
],

padding: [
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @mapk @kjellr @jasmussen I'm still working on this one, but I thought I'd ping early. What do you think of these default values? Would you use a different combination?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd go in multiples of 4 if we go with pixels or even another unit. I'm wondering if rem units might be better here.

As far as pixel values

small: 4 - nice
regular: 16
large: 32 - only large relative to body copy, though

Em units could also work well and more flexibly even if they are harder to understand. If so, maybe:

small: .5em
regular: 1em
large: 1.5em

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, Michael! I pushed those defaults. I also wanted to say that this PR is going to hibernate for a bit as there are some design and engineering issues we need to fix before being able to land it (so it's not going to be part of 5.5 -- sorry about the confusion!).

{ slug: 'small', name: __( 'Small' ), value: 4 },
{ slug: 'regular', name: __( 'Regular' ), value: 14 },
{ slug: 'large', name: __( 'Large' ), value: 23 },
],

// This is current max width of the block inner area
// It's used to constraint image resizing and this value could be overridden later by themes
maxWidth: 580,
Expand Down
82 changes: 71 additions & 11 deletions packages/components/src/box-control/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import Button from '../button';
import { FlexItem, FlexBlock } from '../flex';
import CustomSelectControl from '../custom-select-control';
import { FlexItem } from '../flex';
import AllInputControl from './all-input-control';
import InputControls from './input-controls';
import BoxControlIcon from './icon';
Expand Down Expand Up @@ -44,6 +45,19 @@ function useUniqueId( idProp ) {

return idProp || id;
}

const DEFAULT_OPTION = {
key: 'default',
name: __( 'Default' ),
value: undefined,
};

const CUSTOM_OPTION = {
key: 'custom',
name: __( 'Custom' ),
value: 'custom',
};

export default function BoxControl( {
id: idProp,
inputProps = defaultInputProps,
Expand All @@ -52,6 +66,7 @@ export default function BoxControl( {
label = __( 'Box Control' ),
values: valuesProp,
units,
presetValues,
} ) {
const [ values, setValues ] = useControlledState( valuesProp );
const inputValues = values || DEFAULT_VALUES;
Expand Down Expand Up @@ -98,6 +113,18 @@ export default function BoxControl( {
setIsDirty( false );
};

const handleOnChangePresets = ( { selectedItem: { value } } ) => {
const nextValues = {
top: value,
right: value,
bottom: value,
left: value,
};
onChange( nextValues );
setValues( nextValues );
setIsDirty( true );
};

const inputControlProps = {
...inputProps,
onChange: handleOnChange,
Expand All @@ -109,6 +136,28 @@ export default function BoxControl( {
values: inputValues,
};

const presetUnit = units ? units : 'px';
const options = [
DEFAULT_OPTION,
...presetValues.map( ( presetValue ) => ( {
key: presetValue.slug,
name: presetValue.name,
value: presetValue.value + presetUnit,
} ) ),
CUSTOM_OPTION,
];
let selectedOption = DEFAULT_OPTION;
if (
!! inputValues?.top &&
inputValues?.top === inputValues?.right &&
inputValues?.top === inputValues?.bottom &&
inputValues?.top === inputValues?.left
) {
selectedOption =
options.find( ( option ) => option.value === inputValues.top ) ||
CUSTOM_OPTION;
}

return (
<Root id={ id } role="region" aria-labelledby={ headingId }>
<Header className="component-box-control__header">
Expand All @@ -120,6 +169,25 @@ export default function BoxControl( {
{ label }
</Text>
</FlexItem>
<FlexItem>
<BoxControlIcon side={ side } />
</FlexItem>
</Header>
<HeaderControlWrapper className="component-box-control__header-control-wrapper">
<FlexItem>
<CustomSelectControl
className={ 'component-box-control__preset' }
options={ options }
value={ selectedOption }
onChange={ handleOnChangePresets }
/>
</FlexItem>
<FlexItem>
<AllInputControl
{ ...inputControlProps }
disabled={ ! isLinked }
/>
</FlexItem>
<FlexItem>
<Button
className="component-box-control__reset-button"
Expand All @@ -131,16 +199,8 @@ export default function BoxControl( {
{ __( 'Reset' ) }
</Button>
</FlexItem>
</Header>
<HeaderControlWrapper className="component-box-control__header-control-wrapper">
<FlexItem>
<BoxControlIcon side={ side } />
</FlexItem>
{ isLinked && (
<FlexBlock>
<AllInputControl { ...inputControlProps } />
</FlexBlock>
) }
</HeaderControlWrapper>
<HeaderControlWrapper>
<FlexItem>
<LinkedButton
onClick={ toggleLinked }
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/provider/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ class EditorProvider extends Component {
'isRTL',
'maxWidth',
'onUpdateDefaultBlockStyles',
'padding',
'styles',
'template',
'templateLock',
Expand Down