Skip to content

Commit 7aa8979

Browse files
youknowriaddiegohaz
youknowriad
and
diegohaz
authored
Iterate on the design of the colors and gradients panel (#35535)
Co-authored-by: Haz <hazdiego@gmail.com>
1 parent 17bdf97 commit 7aa8979

File tree

4 files changed

+218
-190
lines changed

4 files changed

+218
-190
lines changed

‎packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap‎

Lines changed: 103 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -14,104 +14,135 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
1414
margin-bottom: inherit;
1515
}
1616
17+
.emotion-4 {
18+
display: -webkit-box;
19+
display: -webkit-flex;
20+
display: -ms-flexbox;
21+
display: flex;
22+
-webkit-align-items: normal;
23+
-webkit-box-align: normal;
24+
-ms-flex-align: normal;
25+
align-items: normal;
26+
-webkit-flex-direction: column;
27+
-ms-flex-direction: column;
28+
flex-direction: column;
29+
-webkit-box-pack: justify;
30+
-webkit-justify-content: space-between;
31+
justify-content: space-between;
32+
}
33+
34+
.emotion-4>*+*:not( marquee ) {
35+
margin-top: calc(4px * 2);
36+
}
37+
38+
.emotion-4>* {
39+
min-height: 0;
40+
}
41+
1742
<div
1843
className="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
1944
>
2045
<div
2146
className="components-base-control__field emotion-2 emotion-3"
2247
>
2348
<fieldset>
24-
<legend>
25-
<div
26-
className="block-editor-color-gradient-control__color-indicator"
27-
>
28-
<span
29-
className="components-base-control__label"
49+
<div
50+
className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
51+
data-wp-c16t={true}
52+
data-wp-component="VStack"
53+
>
54+
<legend>
55+
<div
56+
className="block-editor-color-gradient-control__color-indicator"
3057
>
31-
Test Color
3258
<span
33-
aria-label="(Color: #f00)"
34-
className="component-color-indicator"
35-
style={
36-
Object {
37-
"background": "#f00",
59+
className="components-base-control__label"
60+
>
61+
Test Color
62+
<span
63+
aria-label="(Color: #f00)"
64+
className="component-color-indicator"
65+
style={
66+
Object {
67+
"background": "#f00",
68+
}
3869
}
39-
}
40-
/>
41-
</span>
42-
</div>
43-
</legend>
44-
<div
45-
className="components-circular-option-picker"
46-
>
70+
/>
71+
</span>
72+
</div>
73+
</legend>
4774
<div
48-
className="components-circular-option-picker__swatches"
75+
className="components-circular-option-picker"
4976
>
5077
<div
51-
className="components-circular-option-picker__option-wrapper"
78+
className="components-circular-option-picker__swatches"
5279
>
53-
<button
54-
aria-describedby={null}
55-
aria-label="Color: red"
56-
aria-pressed={true}
57-
className="components-button components-circular-option-picker__option is-pressed"
58-
onBlur={[Function]}
59-
onClick={[Function]}
60-
onFocus={[Function]}
61-
onMouseDown={[Function]}
62-
onMouseEnter={[Function]}
63-
onMouseLeave={[Function]}
64-
style={
65-
Object {
66-
"backgroundColor": "#f00",
67-
"color": "#f00",
68-
}
69-
}
70-
type="button"
71-
/>
72-
<svg
73-
aria-hidden={true}
74-
fill="#000"
75-
focusable={false}
76-
height={24}
77-
role="img"
78-
viewBox="0 0 24 24"
79-
width={24}
80-
xmlns="http://www.w3.org/2000/svg"
80+
<div
81+
className="components-circular-option-picker__option-wrapper"
8182
>
82-
<path
83-
d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
83+
<button
84+
aria-describedby={null}
85+
aria-label="Color: red"
86+
aria-pressed={true}
87+
className="components-button components-circular-option-picker__option is-pressed"
88+
onBlur={[Function]}
89+
onClick={[Function]}
90+
onFocus={[Function]}
91+
onMouseDown={[Function]}
92+
onMouseEnter={[Function]}
93+
onMouseLeave={[Function]}
94+
style={
95+
Object {
96+
"backgroundColor": "#f00",
97+
"color": "#f00",
98+
}
99+
}
100+
type="button"
84101
/>
85-
</svg>
102+
<svg
103+
aria-hidden={true}
104+
fill="#000"
105+
focusable={false}
106+
height={24}
107+
role="img"
108+
viewBox="0 0 24 24"
109+
width={24}
110+
xmlns="http://www.w3.org/2000/svg"
111+
>
112+
<path
113+
d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
114+
/>
115+
</svg>
116+
</div>
86117
</div>
87-
</div>
88-
<div
89-
className="components-circular-option-picker__custom-clear-wrapper"
90-
>
91118
<div
92-
className="components-dropdown components-circular-option-picker__dropdown-link-action"
93-
tabIndex="-1"
119+
className="components-circular-option-picker__custom-clear-wrapper"
94120
>
121+
<div
122+
className="components-dropdown components-circular-option-picker__dropdown-link-action"
123+
tabIndex="-1"
124+
>
125+
<button
126+
aria-describedby={null}
127+
aria-expanded={false}
128+
aria-haspopup="true"
129+
aria-label="Custom color picker"
130+
className="components-button is-link"
131+
onClick={[Function]}
132+
type="button"
133+
>
134+
Custom color
135+
</button>
136+
</div>
95137
<button
96138
aria-describedby={null}
97-
aria-expanded={false}
98-
aria-haspopup="true"
99-
aria-label="Custom color picker"
100-
className="components-button is-link"
139+
className="components-button components-circular-option-picker__clear is-secondary is-small"
101140
onClick={[Function]}
102141
type="button"
103142
>
104-
Custom color
143+
Clear
105144
</button>
106145
</div>
107-
<button
108-
aria-describedby={null}
109-
className="components-button components-circular-option-picker__clear is-secondary is-small"
110-
onClick={[Function]}
111-
type="button"
112-
>
113-
Clear
114-
</button>
115146
</div>
116147
</div>
117148
</fieldset>

‎packages/block-editor/src/components/colors-gradients/control.js‎

Lines changed: 64 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ import { every, isEmpty } from 'lodash';
1010
import { useState } from '@wordpress/element';
1111
import {
1212
BaseControl,
13-
Button,
14-
ButtonGroup,
13+
__experimentalVStack as VStack,
14+
__experimentalToggleGroupControl as ToggleGroupControl,
15+
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
1516
ColorIndicator,
1617
ColorPalette,
1718
GradientPicker,
@@ -110,66 +111,68 @@ function ColorGradientControlInner( {
110111
) }
111112
>
112113
<fieldset>
113-
<legend>
114-
<div className="block-editor-color-gradient-control__color-indicator">
115-
<BaseControl.VisualLabel>
116-
<VisualLabel
117-
currentTab={ currentTab }
118-
label={ label }
119-
colorValue={ colorValue }
120-
gradientValue={ gradientValue }
121-
/>
122-
</BaseControl.VisualLabel>
123-
</div>
124-
</legend>
125-
{ canChooseAColor && canChooseAGradient && (
126-
<ButtonGroup className="block-editor-color-gradient-control__button-tabs">
127-
<Button
128-
isSmall
129-
isPressed={ currentTab === 'color' }
130-
onClick={ () => setCurrentTab( 'color' ) }
131-
>
132-
{ __( 'Solid' ) }
133-
</Button>
134-
<Button
135-
isSmall
136-
isPressed={ currentTab === 'gradient' }
137-
onClick={ () => setCurrentTab( 'gradient' ) }
114+
<VStack space={ 3 }>
115+
<legend>
116+
<div className="block-editor-color-gradient-control__color-indicator">
117+
<BaseControl.VisualLabel>
118+
<VisualLabel
119+
currentTab={ currentTab }
120+
label={ label }
121+
colorValue={ colorValue }
122+
gradientValue={ gradientValue }
123+
/>
124+
</BaseControl.VisualLabel>
125+
</div>
126+
</legend>
127+
{ canChooseAColor && canChooseAGradient && (
128+
<ToggleGroupControl
129+
value={ currentTab }
130+
onChange={ setCurrentTab }
131+
label={ __( 'Select color type' ) }
132+
hideLabelFromVision
133+
isBlock
138134
>
139-
{ __( 'Gradient' ) }
140-
</Button>
141-
</ButtonGroup>
142-
) }
143-
{ ( currentTab === 'color' || ! canChooseAGradient ) && (
144-
<ColorPalette
145-
value={ colorValue }
146-
onChange={
147-
canChooseAGradient
148-
? ( newColor ) => {
149-
onColorChange( newColor );
150-
onGradientChange();
151-
}
152-
: onColorChange
153-
}
154-
{ ...{ colors, disableCustomColors } }
155-
clearable={ clearable }
156-
/>
157-
) }
158-
{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
159-
<GradientPicker
160-
value={ gradientValue }
161-
onChange={
162-
canChooseAColor
163-
? ( newGradient ) => {
164-
onGradientChange( newGradient );
165-
onColorChange();
166-
}
167-
: onGradientChange
168-
}
169-
{ ...{ gradients, disableCustomGradients } }
170-
clearable={ clearable }
171-
/>
172-
) }
135+
<ToggleGroupControlOption
136+
value="color"
137+
label={ __( 'Solid' ) }
138+
/>
139+
<ToggleGroupControlOption
140+
value="gradient"
141+
label={ __( 'Gradient' ) }
142+
/>
143+
</ToggleGroupControl>
144+
) }
145+
{ ( currentTab === 'color' || ! canChooseAGradient ) && (
146+
<ColorPalette
147+
value={ colorValue }
148+
onChange={
149+
canChooseAGradient
150+
? ( newColor ) => {
151+
onColorChange( newColor );
152+
onGradientChange();
153+
}
154+
: onColorChange
155+
}
156+
{ ...{ colors, disableCustomColors } }
157+
clearable={ clearable }
158+
/>
159+
) }
160+
{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
161+
<GradientPicker
162+
value={ gradientValue }
163+
onChange={
164+
canChooseAColor
165+
? ( newGradient ) => {
166+
onGradientChange( newGradient );
167+
onColorChange();
168+
}
169+
: onGradientChange
170+
}
171+
{ ...{ gradients, disableCustomGradients } }
172+
clearable={ clearable }
173+
/>
174+
) }
175+
</VStack>
173176
</fieldset>
174177
</BaseControl>
175178
);

‎packages/block-editor/src/components/colors-gradients/style.scss‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,6 @@
22
.block-editor-color-gradient-control__color-indicator {
33
margin-bottom: $grid-unit-15;
44
}
5-
6-
.block-editor-color-gradient-control__button-tabs {
7-
display: block;
8-
margin-bottom: $grid-unit-15;
9-
}
105
}
116

127
.block-editor-panel-color-gradient-settings {
@@ -45,4 +40,12 @@
4540
margin-right: 0;
4641
}
4742
}
43+
44+
45+
// This shouldn't be needed but there's a rule in the inspector controls
46+
// overriding this causing too much spacing.
47+
// That generic rule should ideally be removed.
48+
.block-editor-block-inspector & .components-base-control {
49+
margin-bottom: inherit;
50+
}
4851
}

0 commit comments

Comments
 (0)