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.

Sign up for GitHub

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
Closed

Add preset for padding and use it in the UI controls #23176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6747026
Add defaults for padding
oandregal Jun 15, 2020
f886e0d
Add comment about expected defaults
oandregal Jun 15, 2020
a616ba2
Allow padding as a settings prop
oandregal Jun 15, 2020
37921d7
Take padding values from theme, if any
oandregal Jun 15, 2020
54c6b10
Revert "Take padding values from theme, if any"
oandregal Jun 16, 2020
115ea72
Add defaults for padding preset in global styles
oandregal Jun 16, 2020
41de55c
Make space for select control
oandregal Jun 17, 2020
6dfd3f5
Pass preset values to BoxControl
oandregal Jun 17, 2020
f9720d4
Add preset control
oandregal Jun 17, 2020
2ea80e9
Better defaults
oandregal Jun 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions lib/experimental-default-theme.json
View file
Open in desktop
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": 16 },
{ "slug": "large", "value": 32 }
]
},
"features": {
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/README.md
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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: 16 },
{ slug: 'large', name: __( 'Large' ), value: 32 },
],

// 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
View file
Open in desktop
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
View file
Open in desktop
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