Skip to content

Commit 5875eff

Browse files
pauloiankoskipauloiankoski
authored
Merge pull request #1496 from stellarwp/fix/color-control-spacing
[DTM] Give the editor's color controls the same bottom spacing as their neighbors
2 parents 5a2fd3f + f275319 commit 5875eff

4 files changed

Lines changed: 103 additions & 18 deletions

File tree

‎src/blocks/advancedheading/edit.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,8 @@ import { resolveColorLiteral } from '../../extension/design-tokens/color-literal
9898
import { BorderColorField } from '../../extension/design-tokens/components/border-color';
9999
import { tokenDimension } from '../../extension/design-tokens/token-dimension';
100100
import { pickableTokensForControl, pickableTokensForKey } from '../../extension/token-picker';
101-
import { ColorControl, ColorControlGroup } from '../../token-controls';
101+
import { ColorControl } from '../../token-controls';
102+
import { EditorColorControlGroup } from '../../extension/design-tokens/components/EditorColorControlGroup';
102103
import { presetFontVariant } from './preset-font-variant';
103104
import metadata from './block.json';
104105
/**
@@ -1874,7 +1875,7 @@ function KadenceAdvancedHeading(props) {
18741875
{showSettings('colorSettings', 'kadence/advancedheading') && (
18751876
<>
18761877
{!enableTextGradient && (
1877-
<ColorControlGroup>
1878+
<EditorColorControlGroup>
18781879
{/* Every write clears the matching `*Class` attribute. Those carry
18791880
legacy global-palette CLASSES the heading emits on its own
18801881
element, so they beat the color these controls write and a stale
@@ -1923,7 +1924,7 @@ function KadenceAdvancedHeading(props) {
19231924
}
19241925
resolveLiteral={resolveColorLiteral}
19251926
/>
1926-
</ColorControlGroup>
1927+
</EditorColorControlGroup>
19271928
)}
19281929
<ToggleControl
19291930
style={{ marginTop: '10px' }}

‎src/blocks/singlebtn/edit.js‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,9 @@ import { EditorShadowControl, hasVisibleShadow } from '../../extension/design-to
9999
import { renderShadowColor } from '../../extension/design-tokens/components/shadow-color';
100100
import { BorderColorField } from '../../extension/design-tokens/components/border-color';
101101
import { pickableTokensForControl, pickableTokensForKey } from '../../extension/token-picker';
102-
import { ColorControl, ColorControlGroup } from '../../token-controls';
102+
import { EditorColorControl } from '../../extension/design-tokens/components/EditorColorControl';
103+
import { EditorColorControlGroup } from '../../extension/design-tokens/components/EditorColorControlGroup';
104+
import { ColorControl } from '../../token-controls';
103105
import { BUTTON_MARGIN_FALLBACK, BUTTON_PADDING_FALLBACK } from '../../token-controls/helpers/button-box-defaults';
104106
import { useColorGroups } from '../../extension/design-tokens/hooks/use-color-groups';
105107
import { resolveColorLiteral } from '../../extension/design-tokens/color-literal';
@@ -1227,7 +1229,7 @@ export default function KadenceButtonEdit(props) {
12271229
/>
12281230
)}
12291231
{'normal' === textBackgroundHoverType && (
1230-
<ColorControl
1232+
<EditorColorControl
12311233
label={__('Color Hover', 'kadence-blocks')}
12321234
value={colorHover ? colorHover : ''}
12331235
groups={colorGroups}
@@ -1262,7 +1264,7 @@ export default function KadenceButtonEdit(props) {
12621264
/>
12631265
)}
12641266
{'normal' === backgroundHoverType && (
1265-
<ColorControl
1267+
<EditorColorControl
12661268
label={__('Background Color', 'kadence-blocks')}
12671269
value={backgroundHover ? backgroundHover : ''}
12681270
groups={colorGroups}
@@ -1374,7 +1376,7 @@ export default function KadenceButtonEdit(props) {
13741376
/>
13751377
)}
13761378
{'normal' === textBackgroundType && (
1377-
<ColorControl
1379+
<EditorColorControl
13781380
label={__('Color', 'kadence-blocks')}
13791381
value={color ? color : ''}
13801382
groups={colorGroups}
@@ -1407,7 +1409,7 @@ export default function KadenceButtonEdit(props) {
14071409
/>
14081410
)}
14091411
{'normal' === backgroundType && (
1410-
<ColorControl
1412+
<EditorColorControl
14111413
label={__('Background Color', 'kadence-blocks')}
14121414
value={background ? background : ''}
14131415
groups={colorGroups}
@@ -1505,7 +1507,7 @@ export default function KadenceButtonEdit(props) {
15051507
<HoverToggleControl
15061508
hover={
15071509
<>
1508-
<ColorControl
1510+
<EditorColorControl
15091511
label={__('Color Hover', 'kadence-blocks')}
15101512
value={
15111513
colorTransparentHover ? colorTransparentHover : ''
@@ -1546,7 +1548,7 @@ export default function KadenceButtonEdit(props) {
15461548
/>
15471549
)}
15481550
{'normal' === backgroundTransparentHoverType && (
1549-
<ColorControl
1551+
<EditorColorControl
15501552
label={__('Background Color', 'kadence-blocks')}
15511553
value={
15521554
backgroundTransparentHover
@@ -1653,7 +1655,7 @@ export default function KadenceButtonEdit(props) {
16531655
}
16541656
normal={
16551657
<>
1656-
<ColorControl
1658+
<EditorColorControl
16571659
label={__('Color', 'kadence-blocks')}
16581660
value={colorTransparent ? colorTransparent : ''}
16591661
groups={colorGroups}
@@ -1688,7 +1690,7 @@ export default function KadenceButtonEdit(props) {
16881690
/>
16891691
)}
16901692
{'normal' === backgroundTransparentType && (
1691-
<ColorControl
1693+
<EditorColorControl
16921694
label={__('Background Color', 'kadence-blocks')}
16931695
value={
16941696
backgroundTransparent
@@ -1796,7 +1798,7 @@ export default function KadenceButtonEdit(props) {
17961798
<HoverToggleControl
17971799
hover={
17981800
<>
1799-
<ColorControl
1801+
<EditorColorControl
18001802
label={__('Color Hover', 'kadence-blocks')}
18011803
value={colorStickyHover ? colorStickyHover : ''}
18021804
groups={colorGroups}
@@ -1833,7 +1835,7 @@ export default function KadenceButtonEdit(props) {
18331835
/>
18341836
)}
18351837
{'normal' === backgroundStickyHoverType && (
1836-
<ColorControl
1838+
<EditorColorControl
18371839
label={__('Background Color', 'kadence-blocks')}
18381840
value={
18391841
backgroundStickyHover
@@ -1935,7 +1937,7 @@ export default function KadenceButtonEdit(props) {
19351937
}
19361938
normal={
19371939
<>
1938-
<ColorControl
1940+
<EditorColorControl
19391941
label={__('Color', 'kadence-blocks')}
19401942
value={colorSticky ? colorSticky : ''}
19411943
groups={colorGroups}
@@ -1970,7 +1972,7 @@ export default function KadenceButtonEdit(props) {
19701972
/>
19711973
)}
19721974
{'normal' === backgroundStickyType && (
1973-
<ColorControl
1975+
<EditorColorControl
19741976
label={__('Background Color', 'kadence-blocks')}
19751977
value={backgroundSticky ? backgroundSticky : ''}
19761978
groups={colorGroups}
@@ -2283,7 +2285,7 @@ export default function KadenceButtonEdit(props) {
22832285
}}
22842286
units={['px', 'em', 'rem']}
22852287
/>
2286-
<ColorControlGroup>
2288+
<EditorColorControlGroup>
22872289
<ColorControl
22882290
label={__('Icon Color', 'kadence-blocks')}
22892291
value={iconColor ? iconColor : ''}
@@ -2302,7 +2304,7 @@ export default function KadenceButtonEdit(props) {
23022304
onClear={() => setAttributes({ iconColorHover: '' })}
23032305
resolveLiteral={resolveColorLiteral}
23042306
/>
2305-
</ColorControlGroup>
2307+
</EditorColorControlGroup>
23062308
<ResponsiveMeasureRangeControl
23072309
label={__('Icon Padding', 'kadence-blocks')}
23082310
value={undefined !== iconPadding ? iconPadding : ['', '', '', '']}

‎src/extension/design-tokens/components/EditorColorControl.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* The block editor's adapter for `src/token-controls`' `ColorControl`.
3+
*
4+
* Much thinner than `EditorBorderControl`/`EditorBoxControl`/`EditorShadowControl` — `ColorControl`
5+
* already takes exactly the value/token contract its callers hold (a bracket alias or literal, the
6+
* palette's `groups`, `resolveColorLiteral`), so there is no per-device storage shape or unit to
7+
* bridge. This adapter exists for one reason:
8+
*
9+
* - **wraps itself in `TokenControlRow`** (no `heading`, purely for its `.kb-token-control-row`
10+
* spacing) — `ColorControl` renders no `ControlShell` (its label and `BindingIndicator` live
11+
* inside its own trigger row instead of a header above it; see its own docblock), so unlike
12+
* `EditorBoxControl`'s `BoxControl` it never gets `TokenControlRow`'s margin by any other path.
13+
* Without this wrapper a standalone color row sits flush against whatever the block renders next,
14+
* where every other `Editor*` control keeps a gap. With no `heading` passed, `TokenControlRow`
15+
* renders no header of its own (see its docblock: `attr`/`binding` can be omitted for a control
16+
* that already carries its own indicator, used purely for the row spacing) — `ColorControl`'s
17+
* inline `BindingIndicator` stays the only mark on screen, not a second one layered over it.
18+
*
19+
* Every other prop passes through untouched.
20+
*/
21+
22+
/**
23+
* Internal dependencies
24+
*/
25+
import { ColorControl } from '../../../token-controls';
26+
import { TokenControlRow } from '../../token-indicators/components/TokenControlRow';
27+
28+
/**
29+
* Render a color token control wrapped in the editor's row spacing.
30+
*
31+
* @param {Object} props `ColorControl`'s own props, forwarded untouched.
32+
*
33+
* @since TBD
34+
*
35+
* @return {JSX.Element} The wrapped control.
36+
*/
37+
export function EditorColorControl(props) {
38+
return (
39+
<TokenControlRow stacked>
40+
<ColorControl {...props} />
41+
</TokenControlRow>
42+
);
43+
}

‎src/extension/design-tokens/components/EditorColorControlGroup.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* The block editor's adapter for `src/token-controls`' `ColorControlGroup`.
3+
*
4+
* A separate component from `EditorColorControl` rather than a prop on it, mirroring
5+
* `ColorControlGroup` itself living beside `ColorControl` as its own file in `token-controls`: a
6+
* group wraps several `ColorControl`s at once, so wrapping happens around the group, not around each
7+
* child — `ColorControlGroup` already collapses the shared border between its children into one box,
8+
* and a `TokenControlRow` per child would reopen the border AND pad each row apart, undoing that.
9+
* Reusable across every block that stacks a Color/Hover Color pair (or similar) this way, rather than
10+
* asking each call site to remember to wrap the group element itself instead of its children.
11+
*
12+
* As with `EditorColorControl`, no `heading` is passed — `TokenControlRow` contributes only the
13+
* `.kb-token-control-row` spacing to whatever follows the group, with no second header or indicator
14+
* layered over the group's own children.
15+
*/
16+
17+
/**
18+
* Internal dependencies
19+
*/
20+
import { ColorControlGroup } from '../../../token-controls';
21+
import { TokenControlRow } from '../../token-indicators/components/TokenControlRow';
22+
23+
/**
24+
* Render a no-gap group of color token controls wrapped in the editor's row spacing.
25+
*
26+
* @param {Object} props The component props.
27+
* @param {*} props.children The `ColorControl`s to stack, forwarded untouched.
28+
*
29+
* @since TBD
30+
*
31+
* @return {JSX.Element} The wrapped group.
32+
*/
33+
export function EditorColorControlGroup({ children }) {
34+
return (
35+
<TokenControlRow stacked>
36+
<ColorControlGroup>{children}</ColorControlGroup>
37+
</TokenControlRow>
38+
);
39+
}

0 commit comments

Comments
 (0)