From 8faba35dda51bd2e441bfb378bf119453a1b9412 Mon Sep 17 00:00:00 2001
From: "Soare Robert Daniel (Mac 2023)" <soare.robert.daniel@protonmail.com>
Date: Tue, 6 Aug 2024 15:25:41 +0300
Subject: [PATCH] feat(column): add support for tablet width

---
 inc/css/blocks/class-advanced-column-css.php  |  8 +++
 src/blocks/blocks/section/column/block.json   |  3 ++
 src/blocks/blocks/section/column/edit.js      |  3 +-
 src/blocks/blocks/section/column/inspector.js | 50 +++++++++++++++----
 src/blocks/blocks/section/style.scss          |  3 +-
 5 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/inc/css/blocks/class-advanced-column-css.php b/inc/css/blocks/class-advanced-column-css.php
index 07fdf38bd..4acc21268 100644
--- a/inc/css/blocks/class-advanced-column-css.php
+++ b/inc/css/blocks/class-advanced-column-css.php
@@ -265,6 +265,14 @@ function( $value ) use ( $block ) {
 			array(
 				'query'      => '@media ( max-width: 960px )',
 				'properties' => array(
+					array(
+						'property' => 'flex-basis',
+						'value'    => 'columnWidthTablet',
+						'unit'     => '%',
+						'format'   => function( $value, $attrs ) {
+							return floatval( $value );
+						},
+					),
 					array(
 						'property'  => 'padding-top',
 						'value'     => 'paddingTablet',
diff --git a/src/blocks/blocks/section/column/block.json b/src/blocks/blocks/section/column/block.json
index b3b83f60e..dc9f33a30 100644
--- a/src/blocks/blocks/section/column/block.json
+++ b/src/blocks/blocks/section/column/block.json
@@ -187,6 +187,9 @@
 		"columnWidth": {
 			"type": "string"
 		},
+		"columnWidthTablet": {
+			"type": "string"
+		},
 		"verticalAlign": {
 			"type": "string"
 		},
diff --git a/src/blocks/blocks/section/column/edit.js b/src/blocks/blocks/section/column/edit.js
index bd207c408..2d2182cc6 100644
--- a/src/blocks/blocks/section/column/edit.js
+++ b/src/blocks/blocks/section/column/edit.js
@@ -170,6 +170,7 @@ const Edit = ({
 	let background, overlayBackground, borderStyle, borderRadiusStyle, boxShadowStyle;
 
 	let	stylesheet = {
+		flexBasis: `${ getValue( 'columnWidth' ) }%`,
 		paddingTop: getValue( 'padding' )?.top,
 		paddingRight: getValue( 'padding' )?.right,
 		paddingBottom: getValue( 'padding' )?.bottom,
@@ -183,6 +184,7 @@ const Edit = ({
 
 	if ( isTablet || isMobile ) {
 		const tabletStyle = pickBy({
+			flexBasis: getValue( 'columnWidthTablet' ) ? `${ getValue( 'columnWidthTablet' ) }%` : '50%',
 			paddingTop: getValue( 'paddingTablet' )?.top,
 			paddingRight: getValue( 'paddingTablet' )?.right,
 			paddingBottom: getValue( 'paddingTablet' )?.bottom,
@@ -265,7 +267,6 @@ const Edit = ({
 	};
 
 	const style = {
-		flexBasis: `${ attributes.columnWidth }%`,
 		...stylesheet,
 		...background,
 		...borderStyle,
diff --git a/src/blocks/blocks/section/column/inspector.js b/src/blocks/blocks/section/column/inspector.js
index 54df15f82..d38a3aec1 100644
--- a/src/blocks/blocks/section/column/inspector.js
+++ b/src/blocks/blocks/section/column/inspector.js
@@ -76,14 +76,39 @@ const Inspector = ({
 
 	const [ tab, setTab ] = useTabSwitch( attributes.id, 'layout' );
 
+	const getWidthField = () => {
+		switch ( getView ) {
+		case 'Desktop':
+			return 'columnWidth';
+		case 'Tablet':
+			return 'columnWidthTablet';
+		default:
+			return undefined;
+		}
+	};
+
+	const getWidth = () => {
+		switch ( getView ) {
+		case 'Desktop':
+			return getValue( 'columnWidth' );
+		case 'Tablet':
+			return getValue( 'columnWidthTablet' ) ?? 50;
+		default:
+			return undefined;
+		}
+	};
+
 	const changeColumnWidth = value => {
 		const width = value || 10;
 		const nextWidth = ( Number( currentBlockWidth.current ) - width ) + Number( nextBlockWidth.current );
 		currentBlockWidth.current = width;
 		nextBlockWidth.current = nextWidth;
-		setAttributes({ columnWidth: width.toFixed( 2 ) });
+
+		const attributeTag = getWidthField();
+
+		setAttributes({ [attributeTag]: width.toFixed( 2 ) });
 		updateBlockAttributes( nextBlock.current, {
-			columnWidth: nextWidth.toFixed( 2 )
+			[attributeTag]: nextWidth.toFixed( 2 )
 		});
 	};
 
@@ -226,14 +251,19 @@ const Inspector = ({
 						title={ __( 'Column Structure', 'otter-blocks' ) }
 					>
 						{ ( 1 < parentBlock.innerBlocks.length ) && (
-							<RangeControl
-								label={ __( 'Column Width', 'otter-blocks' ) }
-								value={ Number( attributes.columnWidth ) }
-								onChange={ changeColumnWidth }
-								step={ 0.1 }
-								min={ 10 }
-								max={ ( Number( attributes.columnWidth ) + Number( nextBlockWidth.current ) ) - 10 }
-							/>
+							<ResponsiveControl
+								label={ __( 'Screen Type', 'otter-blocks' ) }
+							>
+								<RangeControl
+									label={ __( 'Column Width', 'otter-blocks' ) }
+									value={ Number( getWidth() ) }
+									onChange={ changeColumnWidth }
+									step={ 0.1 }
+									min={ 10 }
+									max={ 100 }
+									disabled={ 'Mobile' === getView }
+								/>
+							</ResponsiveControl>
 						) }
 
 						<SelectControl
diff --git a/src/blocks/blocks/section/style.scss b/src/blocks/blocks/section/style.scss
index c7951a60c..1a2ea8cc1 100644
--- a/src/blocks/blocks/section/style.scss
+++ b/src/blocks/blocks/section/style.scss
@@ -31,6 +31,7 @@ html[lang="ja"], html[lang="ko"], html[lang="zh"], html[lang="zh-Hans"], html[la
 .wp-block-themeisle-blocks-advanced-columns {
 	--background: transparent;
 	--columns-width: 100%;
+	--columns-width-tablet: 50%;
 	--horizontal-align: unset;
 
 	background: var( --background );
@@ -346,7 +347,7 @@ html[lang="ja"], html[lang="ko"], html[lang="zh"], html[lang="zh-Hans"], html[la
 			display: flex;
 			flex-basis: 100%;
 			word-break: keep-all;
-			max-width: var( --columns-width );
+			max-width: var( --columns-width-tablet );
 
 			.wp-block-themeisle-blocks-advanced-column {
 				position: relative;