Skip to content

Commit

Permalink
Fix design of color/gradient controls in editor panel (#26255)
Browse files Browse the repository at this point in the history
* add default label to AnglePickerControl

* update AnglePickerControl usage in CustomGradientPicker

* polish design details in CustomGradientPicker

- switch label position to side on control for gradient type
- use flex blocks to wrap type and angle controls

* improve design related flex usage in AnglePickerControl

* improve spacing related styles for CircularOptionPicker

for CircularOptionPicker
- restore default horizontal spacing as equal to vertical
- improve accuracy of negative margin swatch wrapping correction
- drop a purposeless rule
for PanelColorGradientSettingsInner
- create media query bound optimization for six swatches per line
  • Loading branch information
stokesman authored Oct 20, 2020
1 parent 2cf608a commit f29dd2a
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 31 deletions.
22 changes: 22 additions & 0 deletions packages/block-editor/src/components/colors-gradients/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,26 @@
&.is-opened &__panel-title .component-color-indicator {
display: none;
}

// Must equal $color-palette-circle-size from:
// @wordpress/components/src/circular-option-picker/style.scss
$swatch-size: 28px;

// Optimize fit of six swatches per line using calc() to create variable
// spacing that mimics a "justified/space-between" layout and works with
// or without scrollbars
@media screen and (min-width: $break-medium) {
// Overrides the default negative margin
.components-circular-option-picker__swatches {
margin-right: 0;
}
// Figures the spacing
.components-circular-option-picker__option-wrapper {
margin-right: calc((100% - (#{$swatch-size} * 6)) / 5);
}
// Removes the right margin on every sixth swatch
.components-circular-option-picker__option-wrapper:nth-child(6n + 6) {
margin-right: 0;
}
}
}
24 changes: 12 additions & 12 deletions packages/components/src/angle-picker-control/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,24 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { useInstanceId } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import BaseControl from '../base-control';
import { FlexBlock } from '../flex';
import { FlexBlock, FlexItem } from '../flex';
import NumberControl from '../number-control';
import AngleCircle from './angle-circle';
import {
Root,
NumberControlWrapper,
} from './styles/angle-picker-control-styles';
import { Root } from './styles/angle-picker-control-styles';

export default function AnglePickerControl( {
className,
hideLabelFromVision,
id: idProp,
value,
label = __( 'Angle' ),
onChange,
label,
value,
...props
} ) {
const instanceId = useInstanceId(
Expand All @@ -45,12 +44,13 @@ export default function AnglePickerControl( {
return (
<BaseControl
className={ classes }
hideLabelFromVision={ hideLabelFromVision }
id={ id }
label={ label }
{ ...props }
>
<Root gap={ 3 }>
<NumberControlWrapper>
<Root>
<FlexBlock>
<NumberControl
className="components-angle-picker-control__input-field"
id={ id }
Expand All @@ -60,14 +60,14 @@ export default function AnglePickerControl( {
step="1"
value={ value }
/>
</NumberControlWrapper>
<FlexBlock>
</FlexBlock>
<FlexItem>
<AngleCircle
aria-hidden="true"
value={ value }
onChange={ onChange }
/>
</FlexBlock>
</FlexItem>
</Root>
</BaseControl>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import styled from '@emotion/styled';
/**
* Internal dependencies
*/
import { Flex, FlexItem } from '../../flex';
import { Flex } from '../../flex';
import { color } from '../../utils/style-mixins';

const CIRCLE_SIZE = 30;
Expand All @@ -15,10 +15,6 @@ export const Root = styled( Flex )`
max-width: 200px;
`;

export const NumberControlWrapper = styled( FlexItem )`
width: 80px;
`;

export const CircleRoot = styled.div`
border-radius: 50%;
border: 1px solid ${ color( 'ui.borderLight' ) };
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/circular-option-picker/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,24 @@ $color-palette-circle-spacing: 12px;
.components-circular-option-picker {
display: inline-block;
width: 100%;
margin-right: -10px;

.components-circular-option-picker__custom-clear-wrapper {
display: flex;
justify-content: flex-end;
}

// Account for scrollbar or no scrollbar.
// Effectively negates the end swatch spacing to keep the swatches
// from wrapping before necessary.
.components-circular-option-picker__swatches {
margin-right: -$grid-unit-20;
margin-right: -$color-palette-circle-spacing;
}
}

.components-circular-option-picker__option-wrapper {
display: inline-block;
height: $color-palette-circle-size;
width: $color-palette-circle-size;
margin-right: $color-palette-circle-spacing + $grid-unit-05;
margin-right: $color-palette-circle-spacing;
margin-bottom: $color-palette-circle-spacing;
vertical-align: top;
transform: scale(1);
Expand Down
19 changes: 12 additions & 7 deletions packages/components/src/custom-gradient-picker/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n';
*/
import AnglePickerControl from '../angle-picker-control';
import CustomGradientBar from './custom-gradient-bar';
import { Flex, FlexItem } from '../flex';
import { Flex } from '../flex';
import SelectControl from '../select-control';
import { getGradientParsed } from './utils';
import { serializeGradient } from './serializer';
Expand All @@ -22,7 +22,10 @@ import {
HORIZONTAL_GRADIENT_ORIENTATION,
GRADIENT_OPTIONS,
} from './constants';
import { SelectWrapper } from './styles/custom-gradient-picker-styles';
import {
AccessoryWrapper,
SelectWrapper,
} from './styles/custom-gradient-picker-styles';

const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
const angle = get(
Expand All @@ -43,8 +46,9 @@ const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
};
return (
<AnglePickerControl
value={ hasGradient ? angle : '' }
hideLabelFromVision
onChange={ onAngleChange }
value={ hasGradient ? angle : '' }
/>
);
};
Expand Down Expand Up @@ -85,6 +89,7 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
<SelectControl
className="components-custom-gradient-picker__type-picker"
label={ __( 'Type' ) }
labelPosition={ 'side' }
onChange={ handleOnChange }
options={ GRADIENT_OPTIONS }
value={ hasGradient && type }
Expand All @@ -109,15 +114,15 @@ export default function CustomGradientPicker( { value, onChange } ) {
onChange={ onChange }
/>
</SelectWrapper>
{ type === 'linear-gradient' && (
<FlexItem>
<AccessoryWrapper>
{ type === 'linear-gradient' && (
<GradientAnglePicker
gradientAST={ gradientAST }
hasGradient={ hasGradient }
onChange={ onChange }
/>
</FlexItem>
) }
) }
</AccessoryWrapper>
</Flex>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,12 @@ import styled from '@emotion/styled';
/**
* Internal dependencies
*/
import { FlexItem } from '../../flex';
import { FlexBlock } from '../../flex';

export const SelectWrapper = styled( FlexItem )`
width: 110px;
export const SelectWrapper = styled( FlexBlock )`
flex-grow: 5;
`;

export const AccessoryWrapper = styled( FlexBlock )`
flex-grow: 4;
`;

0 comments on commit f29dd2a

Please sign in to comment.