From 6b83af7dc434a8240118a36550668a509bb13470 Mon Sep 17 00:00:00 2001
From: vmc08 <vmc08@yahoo.com>
Date: Thu, 26 Jan 2023 12:57:33 +0800
Subject: [PATCH 1/2] fix (block-div): fix max content width when center
 aligned

---
 src/block-components/helpers/size/edit.js  |  4 +---
 src/block-components/helpers/size/style.js | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/block-components/helpers/size/edit.js b/src/block-components/helpers/size/edit.js
index a047e1dbd..22df6f050 100644
--- a/src/block-components/helpers/size/edit.js
+++ b/src/block-components/helpers/size/edit.js
@@ -7,9 +7,7 @@ import {
 	AdvancedRangeControl,
 	FourRangeControl,
 } from '~stackable/components'
-import {
-	useAttributeEditHandlers, useDeviceType,
-} from '~stackable/hooks'
+import { useAttributeEditHandlers, useDeviceType } from '~stackable/hooks'
 
 /**
  * WordPress dependencies
diff --git a/src/block-components/helpers/size/style.js b/src/block-components/helpers/size/style.js
index ff4ec0ba8..f3b7a535f 100644
--- a/src/block-components/helpers/size/style.js
+++ b/src/block-components/helpers/size/style.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { BlockCss } from '~stackable/components'
+import compareVersions from 'compare-versions'
 
 const Styles = props => {
 	const propsToPass = {
@@ -63,6 +64,21 @@ const Styles = props => {
 				responsive="all"
 				hasUnits="px"
 			/>
+			{ /* style width property was added after plugin version 3.6.4 */ }
+			{ compareVersions( '3.6.4', props.version ) === -1 && (
+				<BlockCss
+					{ ...propsToPass }
+					selector={ wrapperSelector || selector }
+					styleRule="width"
+					attrName="width"
+					key="component-width"
+					attrNameTemplate={ attrNameTemplate }
+					valueCallback={ ( _, getAttribute ) => {
+						const widthUnit = getAttribute( 'widthUnit' )
+						return ( widthUnit === 'px' ) ? '100%' : undefined
+					} }
+				/>
+			) }
 			<BlockCss
 				{ ...propsToPass }
 				selector={ wrapperSelector || selector }

From a0de5676ced5786b7736ad1d470628e503dbc981 Mon Sep 17 00:00:00 2001
From: vmc08 <vmc08@yahoo.com>
Date: Thu, 26 Jan 2023 13:25:19 +0800
Subject: [PATCH 2/2] fix (block-div): change style reference to apply width
 style

---
 src/block-components/helpers/size/style.js | 34 ++++++++++++----------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/block-components/helpers/size/style.js b/src/block-components/helpers/size/style.js
index f3b7a535f..4a5ec9d45 100644
--- a/src/block-components/helpers/size/style.js
+++ b/src/block-components/helpers/size/style.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { BlockCss } from '~stackable/components'
-import compareVersions from 'compare-versions'
 
 const Styles = props => {
 	const propsToPass = {
@@ -64,21 +63,24 @@ const Styles = props => {
 				responsive="all"
 				hasUnits="px"
 			/>
-			{ /* style width property was added after plugin version 3.6.4 */ }
-			{ compareVersions( '3.6.4', props.version ) === -1 && (
-				<BlockCss
-					{ ...propsToPass }
-					selector={ wrapperSelector || selector }
-					styleRule="width"
-					attrName="width"
-					key="component-width"
-					attrNameTemplate={ attrNameTemplate }
-					valueCallback={ ( _, getAttribute ) => {
-						const widthUnit = getAttribute( 'widthUnit' )
-						return ( widthUnit === 'px' ) ? '100%' : undefined
-					} }
-				/>
-			) }
+			<BlockCss
+				{ ...propsToPass }
+				selector={ wrapperSelector || selector }
+				styleRule="width"
+				attrName="horizontalAlign"
+				key="component-width"
+				attrNameTemplate={ attrNameTemplate }
+				valueCallback={ ( _, getAttribute ) => {
+					const widthUnit = getAttribute( 'widthUnit' )
+					const horizontalAlign = getAttribute( 'horizontalAlign' )
+					return ( widthUnit === 'px' ) && horizontalAlign ? '100%' : undefined
+				} }
+				dependencies={ [
+					'horizontalAlign',
+					 'width',
+					 ...dependencies,
+				] }
+			/>
 			<BlockCss
 				{ ...propsToPass }
 				selector={ wrapperSelector || selector }