Skip to content

Commit c45e191

Browse files
kaeizenkaeizen
committed
responsive alignment toolbar, inner block orientation
1 parent 81f1002 commit c45e191

File tree

6 files changed

+518
-77
lines changed

6 files changed

+518
-77
lines changed

‎src/block-components/alignment/attributes.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,9 @@ export const addAttributes = attrObject => {
3030
default: '',
3131
},
3232
innerBlockOrientation: {
33+
stkResponsive: true,
3334
type: 'string',
34-
default: '',
35+
default: 'vertical',
3536
},
3637
// Flex.
3738
innerBlockJustify: {

‎src/block-components/alignment/edit.js‎

Lines changed: 72 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,12 @@ const ALIGN_OPTIONS_NO_JUSTIFY = ALIGN_OPTIONS.filter( option => option.align !=
5555
export const Edit = memo( props => {
5656
const {
5757
contentAlign,
58+
contentAlignTablet,
59+
contentAlignMobile,
5860
columnJustify,
5961
innerBlockOrientation,
62+
innerBlockOrientationTablet,
63+
innerBlockOrientationMobile,
6064
innerBlockWrap,
6165
containerWidth,
6266
containerWidthTablet,
@@ -67,8 +71,12 @@ export const Edit = memo( props => {
6771
} = useBlockAttributesContext( attributes => {
6872
return {
6973
contentAlign: attributes.contentAlign,
74+
contentAlignTablet: attributes.contentAlignTablet,
75+
contentAlignMobile: attributes.contentAlignMobile,
7076
columnJustify: attributes.columnJustify,
7177
innerBlockOrientation: attributes.innerBlockOrientation,
78+
innerBlockOrientationTablet: attributes.innerBlockOrientationTablet,
79+
innerBlockOrientationMobile: attributes.innerBlockOrientationMobile,
7280
innerBlockWrap: attributes.innerBlockWrap,
7381
containerWidth: attributes.containerWidth,
7482
containerWidthTablet: attributes.containerWidthTablet,
@@ -81,6 +89,14 @@ export const Edit = memo( props => {
8189
const setAttributes = useBlockSetAttributesContext()
8290
const deviceType = useDeviceType()
8391

92+
const _contentAlignTablet = contentAlignTablet || contentAlign
93+
const _contentAlignMobile = contentAlignMobile || _contentAlignTablet
94+
95+
const _innerBlockOrientationTablet = innerBlockOrientationTablet || innerBlockOrientation
96+
const _innerBlockOrientationMobile = innerBlockOrientationMobile || _innerBlockOrientationTablet
97+
98+
const _innerBlockOrientation = deviceType === 'Desktop' ? innerBlockOrientation : ( deviceType === 'Tablet' ? _innerBlockOrientationTablet : _innerBlockOrientationMobile )
99+
84100
const {
85101
labelContentAlign = sprintf( __( '%s Alignment', i18n ), __( 'Content', i18n ) ),
86102
enableContentAlign = true,
@@ -140,8 +156,16 @@ export const Edit = memo( props => {
140156
<>
141157
<BlockControls>
142158
<AlignmentToolbar
143-
value={ contentAlign }
144-
onChange={ contentAlign => setAttributes( { contentAlign } ) }
159+
value={ deviceType === 'Desktop' ? contentAlign : ( deviceType === 'Tablet' ? _contentAlignTablet : _contentAlignMobile ) }
160+
onChange={ contentAlign => {
161+
if ( deviceType === 'Desktop' ) {
162+
setAttributes( { contentAlign } )
163+
} else if ( deviceType === 'Tablet' ) {
164+
setAttributes( { contentAlignTablet: contentAlign } )
165+
} else {
166+
setAttributes( { contentAlignMobile: contentAlign } )
167+
}
168+
} }
145169
alignmentControls={ props.hasContentJustify ? ALIGN_OPTIONS : ALIGN_OPTIONS_NO_JUSTIFY }
146170
/>
147171

@@ -220,19 +244,53 @@ export const Edit = memo( props => {
220244
title: __( 'Horizontal', i18n ),
221245
},
222246
{
223-
value: '',
247+
value: 'vertical',
224248
title: __( 'Vertical', i18n ),
225249
},
226250
] }
227251
attribute="innerBlockOrientation"
252+
responsive="all"
253+
value={ _innerBlockOrientation }
254+
default="vertical"
228255
onChange={ value => {
229-
const newAttributes = {
230-
innerBlockOrientation: value,
256+
const newAttributes = {}
257+
258+
if ( deviceType === 'Desktop' ) {
259+
newAttributes.innerBlockOrientation = value
260+
} else if ( deviceType === 'Tablet' && innerBlockOrientation === value ) {
261+
newAttributes.innerBlockOrientationTablet = ''
262+
} else if ( deviceType === 'Tablet' ) {
263+
newAttributes.innerBlockOrientationTablet = value
264+
} else if ( deviceType === 'Mobile' && _innerBlockOrientationTablet === value ) {
265+
newAttributes.innerBlockOrientationMobile = ''
266+
} else if ( deviceType === 'Mobile' ) {
267+
newAttributes.innerBlockOrientationMobile = value
231268
}
232-
if ( value === '' ) { // Vertical.
233-
newAttributes.innerBlockJustify = ''
269+
270+
if ( value === 'vertical' ) { // Vertical.
271+
if ( deviceType === 'Desktop' ) {
272+
newAttributes.innerBlockJustify = ''
273+
}
274+
275+
if ( deviceType === 'Tablet' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet ) ) {
276+
newAttributes.innerBlockJustifyTablet = ''
277+
}
278+
279+
if ( deviceType === 'Mobile' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet && ! innerBlockOrientationMobile ) || ( deviceType === 'Tablet' && ! innerBlockOrientationMobile ) ) {
280+
newAttributes.innerBlockJustifyMobile = ''
281+
}
234282
} else { // Horizontal
235-
newAttributes.innerBlockAlign = ''
283+
if ( deviceType === 'Desktop' ) {
284+
newAttributes.innerBlockAlign = ''
285+
}
286+
287+
if ( deviceType === 'Tablet' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet ) ) {
288+
newAttributes.innerBlockAlignTablet = ''
289+
}
290+
291+
if ( deviceType === 'Mobile' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet && ! innerBlockOrientationMobile ) || ( deviceType === 'Tablet' && ! innerBlockOrientationMobile ) ) {
292+
newAttributes.innerBlockAlignMobile = ''
293+
}
236294
}
237295
setAttributes( newAttributes )
238296
} }
@@ -243,7 +301,7 @@ export const Edit = memo( props => {
243301
label={ sprintf( __( '%s Justify', i18n ), __( 'Inner Block', i18n ) ) }
244302
attribute="innerBlockJustify"
245303
responsive="all"
246-
controls={ innerBlockOrientation ? 'flex-horizontal' : 'horizontal' }
304+
controls={ _innerBlockOrientation === 'horizontal' ? 'flex-horizontal' : 'horizontal' }
247305
visualGuide={ {
248306
selector: '.stk-%s-container, .stk-%s-container > * > .block-editor-block-list__layout > [data-type]',
249307
highlight: 'outline-first-offset',
@@ -259,7 +317,7 @@ export const Edit = memo( props => {
259317
label={ sprintf( __( '%s Alignment', i18n ), __( 'Inner Block', i18n ) ) }
260318
attribute="innerBlockAlign"
261319
responsive="all"
262-
controls={ innerBlockOrientation ? 'vertical' : 'flex-justify-vertical' }
320+
controls={ _innerBlockOrientation === 'horizontal' ? 'vertical' : 'flex-justify-vertical' }
263321
disabled={ alignLastBlockToBottom ? 'all' : undefined }
264322
visualGuide={ {
265323
selector: '.stk-%s-container, .stk-%s-container > * > .block-editor-block-list__layout > [data-type]',
@@ -272,7 +330,7 @@ export const Edit = memo( props => {
272330
help={ __( 'Set Content Min. Height for alignment to display properly', i18n ) }
273331
/>
274332
}
275-
{ innerBlockOrientation &&
333+
{ _innerBlockOrientation &&
276334
<AdvancedToolbarControl
277335
label={ __( 'Inner Block Wrapping', i18n ) }
278336
controls={ [
@@ -288,7 +346,7 @@ export const Edit = memo( props => {
288346
attribute="innerBlockWrap"
289347
/>
290348
}
291-
{ innerBlockOrientation && // This is "column gap" when the blocks are horizontal.
349+
{ _innerBlockOrientation && // This is "column gap" when the blocks are horizontal.
292350
<AdvancedRangeControl
293351
label={ innerBlockWrap === 'wrap'
294352
? sprintf( __( '%s %s', i18n ), __( 'Inner Block', i18n ), __( 'Column Gap', i18n ) )
@@ -314,7 +372,7 @@ export const Edit = memo( props => {
314372
}
315373
/>
316374
}
317-
{ ( props.hasColumnAlignment || props.hasBlockAlignment ) && ! innerBlockOrientation && // This is "row gap" when the blocks are vertical.
375+
{ ( props.hasColumnAlignment || props.hasBlockAlignment ) && _innerBlockOrientation !== 'horizontal' && // This is "row gap" when the blocks are vertical.
318376
<AdvancedRangeControl
319377
label={ sprintf( __( '%s %s', i18n ), __( 'Inner Block', i18n ), __( 'Gap', i18n ) ) }
320378
responsive="all"
@@ -333,7 +391,7 @@ export const Edit = memo( props => {
333391
} }
334392
/>
335393
}
336-
{ ( innerBlockOrientation && innerBlockWrap === 'wrap' ) &&
394+
{ ( _innerBlockOrientation === 'horizontal' && innerBlockWrap === 'wrap' ) &&
337395
<AdvancedRangeControl
338396
label={ sprintf( __( '%s %s', i18n ), __( 'Inner Block', i18n ), __( 'Row Gap', i18n ) ) }
339397
responsive="all"

‎src/block-components/alignment/editor.scss‎

Lines changed: 95 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "common";
2+
13
.stk--column-flex,
24
// If an direct inner block has a top/bottom margin-auto, then we need to set
35
// the height to full (similar to .stk--column-flex) so the margin auto would
@@ -6,38 +8,113 @@
68
.stk--align-last-block-to-bottom {
79
height: auto; // Reverse the 100% height from style.scss
810
&:not(.stk--block-horizontal-flex) {
9-
> .block-editor-inner-blocks {
10-
flex: 1 1 100%;
11-
display: flex;
12-
flex-direction: column;
13-
> .block-editor-block-list__layout {
11+
@include desktop {
12+
> .block-editor-inner-blocks {
1413
flex: 1 1 100%;
15-
display: flex !important;
14+
display: flex;
1615
flex-direction: column;
17-
> * {
18-
width: auto;
19-
margin-inline: 0;
16+
> .block-editor-block-list__layout {
17+
flex: 1 1 100%;
18+
display: flex !important;
19+
flex-direction: column;
20+
> * {
21+
width: auto;
22+
margin-inline: 0;
2023

21-
// Placeholder images will collapse.
22-
&[data-type="stackable/image"]:has(.stk-img-placeholder) {
23-
min-width: min(30%, 200px);
24+
// Placeholder images will collapse.
25+
&[data-type="stackable/image"]:has(.stk-img-placeholder) {
26+
min-width: min(30%, 200px);
27+
}
2428
}
2529
}
2630
}
2731
}
2832
}
2933
&.stk--block-horizontal-flex {
30-
> .block-editor-inner-blocks {
31-
> .block-editor-block-list__layout {
32-
height: 100%;
33-
> * {
34-
margin-inline: 0;
34+
@include desktop {
35+
> .block-editor-inner-blocks {
36+
> .block-editor-block-list__layout {
37+
height: 100%;
38+
> * {
39+
margin-inline: 0;
40+
}
3541
}
3642
}
3743
}
3844
}
39-
}
4045

46+
&:not(.stk--block-horizontal-flex-tablet) {
47+
@include tablet {
48+
> .block-editor-inner-blocks {
49+
flex: 1 1 100%;
50+
display: flex;
51+
flex-direction: column;
52+
> .block-editor-block-list__layout {
53+
flex: 1 1 100%;
54+
display: flex !important;
55+
flex-direction: column;
56+
> * {
57+
width: auto;
58+
margin-inline: 0;
59+
60+
// Placeholder images will collapse.
61+
&[data-type="stackable/image"]:has(.stk-img-placeholder) {
62+
min-width: min(30%, 200px);
63+
}
64+
}
65+
}
66+
}
67+
}
68+
}
69+
&.stk--block-horizontal-flex-tablet {
70+
@include tablet {
71+
> .block-editor-inner-blocks {
72+
> .block-editor-block-list__layout {
73+
height: 100%;
74+
> * {
75+
margin-inline: 0;
76+
}
77+
}
78+
}
79+
}
80+
}
81+
82+
&:not(.stk--block-horizontal-flex-mobile) {
83+
@include mobile {
84+
> .block-editor-inner-blocks {
85+
flex: 1 1 100%;
86+
display: flex;
87+
flex-direction: column;
88+
> .block-editor-block-list__layout {
89+
flex: 1 1 100%;
90+
display: flex !important;
91+
flex-direction: column;
92+
> * {
93+
width: auto;
94+
margin-inline: 0;
95+
96+
// Placeholder images will collapse.
97+
&[data-type="stackable/image"]:has(.stk-img-placeholder) {
98+
min-width: min(30%, 200px);
99+
}
100+
}
101+
}
102+
}
103+
}
104+
}
105+
&.stk--block-horizontal-flex-mobile {
106+
@include mobile {
107+
> .block-editor-inner-blocks {
108+
> .block-editor-block-list__layout {
109+
height: 100%;
110+
> * {
111+
margin-inline: 0;
112+
}
113+
}
114+
}
115+
}
116+
}
117+
}
41118

42119
// for firefox :has polyfill
43120
// this needs to be on a separate css ruleset because firefox ignores any CSS ruleset that includes the :has selector

0 commit comments

Comments
 (0)