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 ) && (
-
+
+
+
) }