responsive alignment toolbar, inner block orientation

gambitph · Dec 17, 2024 · c45e191 · c45e191
1 parent 81f1002
commit c45e191
Show file tree

Hide file tree

Showing 6 changed files with 518 additions and 77 deletions.
diff --git a/src/block-components/alignment/attributes.js b/src/block-components/alignment/attributes.js
@@ -30,8 +30,9 @@ export const addAttributes = attrObject => {
 				default: '',
 			},
 			innerBlockOrientation: {
+				stkResponsive: true,
 				type: 'string',
-				default: '',
+				default: 'vertical',
 			},
 			// Flex.
 			innerBlockJustify: {

diff --git a/src/block-components/alignment/edit.js b/src/block-components/alignment/edit.js
@@ -55,8 +55,12 @@ const ALIGN_OPTIONS_NO_JUSTIFY = ALIGN_OPTIONS.filter( option => option.align !=
 export const Edit = memo( props => {
 	const {
 		contentAlign,
+		contentAlignTablet,
+		contentAlignMobile,
 		columnJustify,
 		innerBlockOrientation,
+		innerBlockOrientationTablet,
+		innerBlockOrientationMobile,
 		innerBlockWrap,
 		containerWidth,
 		containerWidthTablet,
@@ -67,8 +71,12 @@ export const Edit = memo( props => {
 	} = useBlockAttributesContext( attributes => {
 		return {
 			contentAlign: attributes.contentAlign,
+			contentAlignTablet: attributes.contentAlignTablet,
+			contentAlignMobile: attributes.contentAlignMobile,
 			columnJustify: attributes.columnJustify,
 			innerBlockOrientation: attributes.innerBlockOrientation,
+			innerBlockOrientationTablet: attributes.innerBlockOrientationTablet,
+			innerBlockOrientationMobile: attributes.innerBlockOrientationMobile,
 			innerBlockWrap: attributes.innerBlockWrap,
 			containerWidth: attributes.containerWidth,
 			containerWidthTablet: attributes.containerWidthTablet,
@@ -81,6 +89,14 @@ export const Edit = memo( props => {
 	const setAttributes = useBlockSetAttributesContext()
 	const deviceType = useDeviceType()
 
+	const _contentAlignTablet = contentAlignTablet || contentAlign
+	const _contentAlignMobile = contentAlignMobile || _contentAlignTablet
+
+	const _innerBlockOrientationTablet = innerBlockOrientationTablet || innerBlockOrientation
+	const _innerBlockOrientationMobile = innerBlockOrientationMobile || _innerBlockOrientationTablet
+
+	const _innerBlockOrientation = deviceType === 'Desktop' ? innerBlockOrientation : ( deviceType === 'Tablet' ? _innerBlockOrientationTablet : _innerBlockOrientationMobile )
+
 	const {
 		labelContentAlign = sprintf( __( '%s Alignment', i18n ), __( 'Content', i18n ) ),
 		enableContentAlign = true,
@@ -140,8 +156,16 @@ export const Edit = memo( props => {
 		<>
 			<BlockControls>
 				<AlignmentToolbar
-					value={ contentAlign }
-					onChange={ contentAlign => setAttributes( { contentAlign } ) }
+					value={ deviceType === 'Desktop' ? contentAlign : ( deviceType === 'Tablet' ? _contentAlignTablet : _contentAlignMobile ) }
+					onChange={ contentAlign => {
+						if ( deviceType === 'Desktop' ) {
+							setAttributes( { contentAlign } )
+						} else if ( deviceType === 'Tablet' ) {
+							setAttributes( { contentAlignTablet: contentAlign } )
+						} else {
+							setAttributes( { contentAlignMobile: contentAlign } )
+						}
+					} }
 					alignmentControls={ props.hasContentJustify ? ALIGN_OPTIONS : ALIGN_OPTIONS_NO_JUSTIFY }
 				/>
 
@@ -220,19 +244,53 @@ export const Edit = memo( props => {
 								title: __( 'Horizontal', i18n ),
 							},
 							{
-								value: '',
+								value: 'vertical',
 								title: __( 'Vertical', i18n ),
 							},
 						] }
 						attribute="innerBlockOrientation"
+						responsive="all"
+						value={ _innerBlockOrientation }
+						default="vertical"
 						onChange={ value => {
-							const newAttributes = {
-								innerBlockOrientation: value,
+							const newAttributes = {}
+
+							if ( deviceType === 'Desktop' ) {
+								newAttributes.innerBlockOrientation = value
+							} else if ( deviceType === 'Tablet' && innerBlockOrientation === value ) {
+								newAttributes.innerBlockOrientationTablet = ''
+							} else if ( deviceType === 'Tablet' ) {
+								newAttributes.innerBlockOrientationTablet = value
+							} else if ( deviceType === 'Mobile' && _innerBlockOrientationTablet === value ) {
+								newAttributes.innerBlockOrientationMobile = ''
+							} else if ( deviceType === 'Mobile' ) {
+								newAttributes.innerBlockOrientationMobile = value
 							}
-							if ( value === '' ) { // Vertical.
-								newAttributes.innerBlockJustify = ''
+
+							if ( value === 'vertical' ) { // Vertical.
+								if ( deviceType === 'Desktop' ) {
+									newAttributes.innerBlockJustify = ''
+								}
+
+								if ( deviceType === 'Tablet' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet ) ) {
+									newAttributes.innerBlockJustifyTablet = ''
+								}
+
+								if ( deviceType === 'Mobile' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet && ! innerBlockOrientationMobile ) || ( deviceType === 'Tablet' && ! innerBlockOrientationMobile ) ) {
+									newAttributes.innerBlockJustifyMobile = ''
+								}
 							} else { // Horizontal
-								newAttributes.innerBlockAlign = ''
+								if ( deviceType === 'Desktop' ) {
+									newAttributes.innerBlockAlign = ''
+								}
+
+								if ( deviceType === 'Tablet' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet ) ) {
+									newAttributes.innerBlockAlignTablet = ''
+								}
+
+								if ( deviceType === 'Mobile' || ( deviceType === 'Desktop' && ! innerBlockOrientationTablet && ! innerBlockOrientationMobile ) || ( deviceType === 'Tablet' && ! innerBlockOrientationMobile ) ) {
+									newAttributes.innerBlockAlignMobile = ''
+								}
 							}
 							setAttributes( newAttributes )
 						} }
@@ -243,7 +301,7 @@ export const Edit = memo( props => {
 						label={ sprintf( __( '%s Justify', i18n ), __( 'Inner Block', i18n ) ) }
 						attribute="innerBlockJustify"
 						responsive="all"
-						controls={ innerBlockOrientation ? 'flex-horizontal' : 'horizontal' }
+						controls={ _innerBlockOrientation === 'horizontal' ? 'flex-horizontal' : 'horizontal' }
 						visualGuide={ {
 							selector: '.stk-%s-container, .stk-%s-container > * > .block-editor-block-list__layout > [data-type]',
 							highlight: 'outline-first-offset',
@@ -259,7 +317,7 @@ export const Edit = memo( props => {
 						label={ sprintf( __( '%s Alignment', i18n ), __( 'Inner Block', i18n ) ) }
 						attribute="innerBlockAlign"
 						responsive="all"
-						controls={ innerBlockOrientation ? 'vertical' : 'flex-justify-vertical' }
+						controls={ _innerBlockOrientation === 'horizontal' ? 'vertical' : 'flex-justify-vertical' }
 						disabled={ alignLastBlockToBottom ? 'all' : undefined }
 						visualGuide={ {
 							selector: '.stk-%s-container, .stk-%s-container > * > .block-editor-block-list__layout > [data-type]',
@@ -272,7 +330,7 @@ export const Edit = memo( props => {
 						help={ __( 'Set Content Min. Height for alignment to display properly', i18n ) }
 					/>
 				}
-				{ innerBlockOrientation &&
+				{ _innerBlockOrientation &&
 					<AdvancedToolbarControl
 						label={ __( 'Inner Block Wrapping', i18n ) }
 						controls={ [
@@ -288,7 +346,7 @@ export const Edit = memo( props => {
 						attribute="innerBlockWrap"
 					/>
 				}
-				{ innerBlockOrientation && // This is "column gap" when the blocks are horizontal.
+				{ _innerBlockOrientation && // This is "column gap" when the blocks are horizontal.
 					<AdvancedRangeControl
 						label={ innerBlockWrap === 'wrap'
 							? sprintf( __( '%s %s', i18n ), __( 'Inner Block', i18n ), __( 'Column Gap', i18n ) )
@@ -314,7 +372,7 @@ export const Edit = memo( props => {
 						}
 					/>
 				}
-				{ ( props.hasColumnAlignment || props.hasBlockAlignment ) && ! innerBlockOrientation && // This is "row gap" when the blocks are vertical.
+				{ ( props.hasColumnAlignment || props.hasBlockAlignment ) && _innerBlockOrientation !== 'horizontal' && // This is "row gap" when the blocks are vertical.
 					<AdvancedRangeControl
 						label={ sprintf( __( '%s %s', i18n ), __( 'Inner Block', i18n ), __( 'Gap', i18n ) ) }
 						responsive="all"
@@ -333,7 +391,7 @@ export const Edit = memo( props => {
 						} }
 					/>
 				}
-				{ ( innerBlockOrientation && innerBlockWrap === 'wrap' ) &&
+				{ ( _innerBlockOrientation === 'horizontal' && innerBlockWrap === 'wrap' ) &&
 					<AdvancedRangeControl
 						label={ sprintf( __( '%s %s', i18n ), __( 'Inner Block', i18n ), __( 'Row Gap', i18n ) ) }
 						responsive="all"

diff --git a/src/block-components/alignment/editor.scss b/src/block-components/alignment/editor.scss
@@ -1,3 +1,5 @@
+@import "common";
+
 .stk--column-flex,
 // If an direct inner block has a top/bottom margin-auto, then we need to set
 // the height to full (similar to .stk--column-flex) so the margin auto would
@@ -6,38 +8,113 @@
 .stk--align-last-block-to-bottom {
 	height: auto; // Reverse the 100% height from style.scss
 	&:not(.stk--block-horizontal-flex) {
-		> .block-editor-inner-blocks {
-			flex: 1 1 100%;
-			display: flex;
-			flex-direction: column;
-			> .block-editor-block-list__layout {
+		@include desktop {
+			> .block-editor-inner-blocks {
 				flex: 1 1 100%;
-				display: flex !important;
+				display: flex;
 				flex-direction: column;
-				> * {
-					width: auto;
-					margin-inline: 0;
+				> .block-editor-block-list__layout {
+					flex: 1 1 100%;
+					display: flex !important;
+					flex-direction: column;
+					> * {
+						width: auto;
+						margin-inline: 0;
 
-					// Placeholder images will collapse.
-					&[data-type="stackable/image"]:has(.stk-img-placeholder) {
-						min-width: min(30%, 200px);
+						// Placeholder images will collapse.
+						&[data-type="stackable/image"]:has(.stk-img-placeholder) {
+							min-width: min(30%, 200px);
+						}
 					}
 				}
 			}
 		}
 	}
 	&.stk--block-horizontal-flex {
-		> .block-editor-inner-blocks {
-			> .block-editor-block-list__layout {
-				height: 100%;
-				> * {
-					margin-inline: 0;
+		@include desktop {
+			> .block-editor-inner-blocks {
+				> .block-editor-block-list__layout {
+					height: 100%;
+					> * {
+						margin-inline: 0;
+					}
 				}
 			}
 		}
 	}
-}
 
+	&:not(.stk--block-horizontal-flex-tablet) {
+		@include tablet {
+			> .block-editor-inner-blocks {
+				flex: 1 1 100%;
+				display: flex;
+				flex-direction: column;
+				> .block-editor-block-list__layout {
+					flex: 1 1 100%;
+					display: flex !important;
+					flex-direction: column;
+					> * {
+						width: auto;
+						margin-inline: 0;
+
+						// Placeholder images will collapse.
+						&[data-type="stackable/image"]:has(.stk-img-placeholder) {
+							min-width: min(30%, 200px);
+						}
+					}
+				}
+			}
+		}
+	}
+	&.stk--block-horizontal-flex-tablet {
+		@include tablet {
+			> .block-editor-inner-blocks {
+				> .block-editor-block-list__layout {
+					height: 100%;
+					> * {
+						margin-inline: 0;
+					}
+				}
+			}
+		}
+	}
+
+	&:not(.stk--block-horizontal-flex-mobile) {
+		@include mobile {
+			> .block-editor-inner-blocks {
+				flex: 1 1 100%;
+				display: flex;
+				flex-direction: column;
+				> .block-editor-block-list__layout {
+					flex: 1 1 100%;
+					display: flex !important;
+					flex-direction: column;
+					> * {
+						width: auto;
+						margin-inline: 0;
+
+						// Placeholder images will collapse.
+						&[data-type="stackable/image"]:has(.stk-img-placeholder) {
+							min-width: min(30%, 200px);
+						}
+					}
+				}
+			}
+		}
+	}
+	&.stk--block-horizontal-flex-mobile {
+		@include mobile {
+			> .block-editor-inner-blocks {
+				> .block-editor-block-list__layout {
+					height: 100%;
+					> * {
+						margin-inline: 0;
+					}
+				}
+			}
+		}
+	}
+}
 
 // for firefox :has polyfill
 // this needs to be on a separate css ruleset because firefox ignores any CSS ruleset that includes the :has selector