Skip to content

Commit 837f01c

Browse files
gilbert-hernandezclaude
gilbert-hernandez
and
claude
committed
Restore column/section flex align control types
The slim shared ResponsiveAlignControls only handled justify, vertical, orientation, and vertical-column. The kadence/column (section) block also passes orientation-column, justify-align, justify-column, and justify-vertical (the latter three honoring a `reverse` prop). Those unrecognized types silently fell through to the default AlignmentToolbar, so Direction / Alignment / Vertical Alignment all rendered as a 3-option text-alignment control. Re-add the four missing type branches and the `reverse` prop (ported from the former local component in kadence-blocks), restore the per-type className, and bump version to 1.1.9. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 04a8b13 commit 837f01c

2 files changed

Lines changed: 217 additions & 3 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@kadence/components",
3-
"version": "1.1.8",
3+
"version": "1.1.9",
44
"description": "Shared Kadence UI components for WordPress block plugins.",
55
"main": "dist/cjs/index.js",
66
"module": "dist/esm/index.js",

‎src/responsive-align-control/index.js‎

Lines changed: 216 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,17 @@ import { __ } from '@wordpress/i18n';
1212
import { map } from 'lodash';
1313
import { capitalizeFirstLetter } from '@kadence/helpers';
1414

15-
import { arrowUp, arrowLeft, arrowRight, arrowDown } from '@wordpress/icons';
15+
import {
16+
arrowUp,
17+
arrowLeft,
18+
arrowRight,
19+
arrowDown,
20+
justifyLeft,
21+
justifyCenter,
22+
justifyRight,
23+
justifySpaceBetween,
24+
justifyStretch,
25+
} from '@wordpress/icons';
1626

1727
import { Dashicon, Button, ButtonGroup, SVG, Path } from '@wordpress/components';
1828
import { AlignmentToolbar, JustifyToolbar, BlockVerticalAlignmentToolbar } from '@wordpress/blockEditor';
@@ -100,6 +110,7 @@ export default function ResponsiveAlignControls({
100110
value,
101111
isCollapsed = false,
102112
type = 'textAlign',
113+
reverse = false,
103114
}) {
104115
const [deviceType, setDeviceType] = useState('Desktop');
105116
const theDevice = useSelect((select) => {
@@ -165,6 +176,207 @@ export default function ResponsiveAlignControls({
165176
align: 'stretch',
166177
},
167178
];
179+
} else if (type === 'orientation-column') {
180+
alignmentControls = [
181+
{
182+
icon: arrowDown,
183+
title: __('Vertical Direction', '__KADENCE__TEXT__DOMAIN__'),
184+
align: 'vertical',
185+
},
186+
{
187+
icon: arrowRight,
188+
title: __('Horizontal Direction', '__KADENCE__TEXT__DOMAIN__'),
189+
align: 'horizontal',
190+
},
191+
{
192+
icon: arrowUp,
193+
title: __('Vertical Reverse', '__KADENCE__TEXT__DOMAIN__'),
194+
align: 'vertical-reverse',
195+
},
196+
{
197+
icon: arrowLeft,
198+
title: __('Horizontal Reverse', '__KADENCE__TEXT__DOMAIN__'),
199+
align: 'horizontal-reverse',
200+
},
201+
];
202+
} else if (type === 'justify-align') {
203+
alignmentControls = reverse
204+
? [
205+
{
206+
icon: justifyRight,
207+
title: __('Start', '__KADENCE__TEXT__DOMAIN__'),
208+
align: 'flex-start',
209+
},
210+
{
211+
icon: justifyCenter,
212+
title: __('Center', '__KADENCE__TEXT__DOMAIN__'),
213+
align: 'center',
214+
},
215+
{
216+
icon: justifyLeft,
217+
title: __('End', '__KADENCE__TEXT__DOMAIN__'),
218+
align: 'flex-end',
219+
},
220+
{
221+
icon: justifyStretch,
222+
title: __('Stretch', '__KADENCE__TEXT__DOMAIN__'),
223+
align: 'stretch',
224+
},
225+
]
226+
: [
227+
{
228+
icon: justifyLeft,
229+
title: __('Start', '__KADENCE__TEXT__DOMAIN__'),
230+
align: 'flex-start',
231+
},
232+
{
233+
icon: justifyCenter,
234+
title: __('Center', '__KADENCE__TEXT__DOMAIN__'),
235+
align: 'center',
236+
},
237+
{
238+
icon: justifyRight,
239+
title: __('End', '__KADENCE__TEXT__DOMAIN__'),
240+
align: 'flex-end',
241+
},
242+
{
243+
icon: justifyStretch,
244+
title: __('Stretch', '__KADENCE__TEXT__DOMAIN__'),
245+
align: 'stretch',
246+
},
247+
];
248+
} else if (type === 'justify-column') {
249+
alignmentControls = reverse
250+
? [
251+
{
252+
icon: justifyRight,
253+
title: __('Start', '__KADENCE__TEXT__DOMAIN__'),
254+
align: 'flex-start',
255+
},
256+
{
257+
icon: justifyCenter,
258+
title: __('Center', '__KADENCE__TEXT__DOMAIN__'),
259+
align: 'center',
260+
},
261+
{
262+
icon: justifyLeft,
263+
title: __('End', '__KADENCE__TEXT__DOMAIN__'),
264+
align: 'flex-end',
265+
},
266+
{
267+
icon: justifySpaceBetween,
268+
title: __('Space Between', '__KADENCE__TEXT__DOMAIN__'),
269+
align: 'space-between',
270+
},
271+
{
272+
icon: spaceAround,
273+
title: __('Space Around', '__KADENCE__TEXT__DOMAIN__'),
274+
align: 'space-around',
275+
},
276+
{
277+
icon: spaceEvenly,
278+
title: __('Space Evenly', '__KADENCE__TEXT__DOMAIN__'),
279+
align: 'space-evenly',
280+
},
281+
]
282+
: [
283+
{
284+
icon: justifyLeft,
285+
title: __('Start', '__KADENCE__TEXT__DOMAIN__'),
286+
align: 'flex-start',
287+
},
288+
{
289+
icon: justifyCenter,
290+
title: __('Center', '__KADENCE__TEXT__DOMAIN__'),
291+
align: 'center',
292+
},
293+
{
294+
icon: justifyRight,
295+
title: __('End', '__KADENCE__TEXT__DOMAIN__'),
296+
align: 'flex-end',
297+
},
298+
{
299+
icon: justifySpaceBetween,
300+
title: __('Space Between', '__KADENCE__TEXT__DOMAIN__'),
301+
align: 'space-between',
302+
},
303+
{
304+
icon: spaceAround,
305+
title: __('Space Around', '__KADENCE__TEXT__DOMAIN__'),
306+
align: 'space-around',
307+
},
308+
{
309+
icon: spaceEvenly,
310+
title: __('Space Evenly', '__KADENCE__TEXT__DOMAIN__'),
311+
align: 'space-evenly',
312+
},
313+
];
314+
} else if (type === 'justify-vertical') {
315+
alignmentControls = reverse
316+
? [
317+
{
318+
icon: alignBottom,
319+
title: __('Bottom', '__KADENCE__TEXT__DOMAIN__'),
320+
align: 'top',
321+
},
322+
{
323+
icon: alignCenter,
324+
title: __('Middle', '__KADENCE__TEXT__DOMAIN__'),
325+
align: 'middle',
326+
},
327+
{
328+
icon: alignTop,
329+
title: __('Top', '__KADENCE__TEXT__DOMAIN__'),
330+
align: 'bottom',
331+
},
332+
{
333+
icon: verticalSpaceBetween,
334+
title: __('Space Between', '__KADENCE__TEXT__DOMAIN__'),
335+
align: 'space-between',
336+
},
337+
{
338+
icon: verticalSpaceAround,
339+
title: __('Space Around', '__KADENCE__TEXT__DOMAIN__'),
340+
align: 'space-around',
341+
},
342+
{
343+
icon: verticalSpaceEvenly,
344+
title: __('Space Evenly', '__KADENCE__TEXT__DOMAIN__'),
345+
align: 'space-evenly',
346+
},
347+
]
348+
: [
349+
{
350+
icon: alignTop,
351+
title: __('Top', '__KADENCE__TEXT__DOMAIN__'),
352+
align: 'top',
353+
},
354+
{
355+
icon: alignCenter,
356+
title: __('Middle', '__KADENCE__TEXT__DOMAIN__'),
357+
align: 'middle',
358+
},
359+
{
360+
icon: alignBottom,
361+
title: __('Bottom', '__KADENCE__TEXT__DOMAIN__'),
362+
align: 'bottom',
363+
},
364+
{
365+
icon: verticalSpaceBetween,
366+
title: __('Space Between', '__KADENCE__TEXT__DOMAIN__'),
367+
align: 'space-between',
368+
},
369+
{
370+
icon: verticalSpaceAround,
371+
title: __('Space Around', '__KADENCE__TEXT__DOMAIN__'),
372+
align: 'space-around',
373+
},
374+
{
375+
icon: verticalSpaceEvenly,
376+
title: __('Space Evenly', '__KADENCE__TEXT__DOMAIN__'),
377+
align: 'space-evenly',
378+
},
379+
];
168380
}
169381
const devices = [
170382
{
@@ -211,7 +423,9 @@ export default function ResponsiveAlignControls({
211423
);
212424
return [
213425
onChange && onChangeTablet && onChangeMobile && (
214-
<div className={'components-base-control kb-sidebar-alignment kb-responsive-align-control'}>
426+
<div
427+
className={`components-base-control kb-sidebar-alignment kb-responsive-align-control kb-responsive-align-${type}`}
428+
>
215429
<div className="kadence-title-bar">
216430
{label && <span className="kadence-control-title">{label}</span>}
217431
<ButtonGroup className="kb-measure-responsive-options" aria-label={__('Device', '__KADENCE__TEXT__DOMAIN__')}>

0 commit comments

Comments
 (0)