fix (button group): flex wrap with full width not working in frontend (…

…#3181) * fix (button group): flex wrap with full width not working in frontend fixes #3135 * fixed fullwidth and changed how buttons collapse. * button text no longer wrap * button group vertical alignment now works --------- Co-authored-by: [email protected] <>
gambitph · May 23, 2024 · c469f62 · c469f62
1 parent 088e5ff
commit c469f62
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 7 deletions.
diff --git a/src/block-components/button/style.js b/src/block-components/button/style.js
@@ -45,7 +45,7 @@ const Styles = props => {
 				attrName="fullWidth"
 				attrNameTemplate={ attrNameTemplate }
 				key="buttonFullWidth-save"
-				valueCallback={ () => '1 1 0' }
+				valueCallback={ () => '1 0 var(--stk-button-group-flex-wrap, 0)' }
 				enabledCallback={ getAttribute => getAttribute( 'fullWidth' ) }
 			/>
 			<BlockCss
@@ -56,7 +56,7 @@ const Styles = props => {
 				attrName="fullWidth"
 				attrNameTemplate={ attrNameTemplate }
 				key="buttonFullWidth-flex"
-				valueCallback={ () => '1 1 0' }
+				valueCallback={ () => '1 0 var(--stk-button-group-flex-wrap, 0)' }
 				enabledCallback={ getAttribute => getAttribute( 'fullWidth' ) }
 			/>
 			<BlockCss

diff --git a/src/block/button-group/style.js b/src/block/button-group/style.js
@@ -181,9 +181,16 @@ const Styles = props => {
 				styleRule="flex"
 				attrName="buttonFullWidth"
 				key="buttonFullWidth-save"
-				valueCallback={ value => {
-					return value ? '1' : undefined
+				valueCallback={ ( value, getAttribute ) => {
+					let basis = '0%' // This is the default value of flex-basis
+					// If we're wrapping, we need to set flex-basis to auto so
+					// that it will wrap and go full-width.
+					if ( getAttribute( 'flexWrap' ) ) {
+						basis = 'auto'
+					}
+					return value ? ( '1 0 ' + basis ) : undefined
 				} }
+				dependencies={ [ 'flexWrap' ] }
 			/>
 			<BlockCss
 				{ ...propsToPass }
@@ -192,8 +199,39 @@ const Styles = props => {
 				styleRule="flex"
 				attrName="buttonFullWidth"
 				key="buttonFullWidth"
+				valueCallback={ ( value, getAttribute ) => {
+					let basis = '0%' // This is the default value of flex-basis
+					// If we're wrapping, we need to set flex-basis to auto so
+					// that it will wrap and go full-width.
+					if ( getAttribute( 'flexWrap' ) ) {
+						basis = 'auto'
+					}
+					return value ? ( '1 0 ' + basis ) : undefined
+				} }
+				dependencies={ [ 'flexWrap' ] }
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				renderIn="save"
+				selector=".stk-button-group"
+				styleRule="--stk-button-group-flex-wrap"
+				attrName="flexWrap"
+				key="flexWrap-save-button-group"
+				responsive="all"
+				valueCallback={ value => {
+					return value ? 'auto' : undefined
+				} }
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				renderIn="save"
+				selector=".stk-button-group .stk-block-button"
+				styleRule="width"
+				attrName="flexWrap"
+				key="flexWrap-save-button-group-unset-width"
+				responsive="all"
 				valueCallback={ value => {
-					return value ? '1' : undefined
+					return value ? 'unset' : undefined
 				} }
 			/>
 		</>
@@ -204,7 +242,7 @@ export const ButtonGroupStyles = memo( props => {
 	return (
 		<>
 			<Alignment.Style { ...props } />
-			<BlockDiv.Style { ...props } />
+			<BlockDiv.Style { ...props } verticalAlignSelector=".stk-button-group > .block-editor-inner-blocks > .block-editor-block-list__layout" />
 			<MarginBottom.Style { ...props } />
 			<Advanced.Style { ...props } />
 			<Transform.Style { ...props } />
@@ -227,7 +265,7 @@ ButtonGroupStyles.Content = props => {
 	return (
 		<BlockCssCompiler>
 			<Alignment.Style.Content { ...props } />
-			<BlockDiv.Style.Content { ...props } />
+			<BlockDiv.Style.Content { ...props } verticalAlignSelector=".stk-button-group" />
 			<MarginBottom.Style.Content { ...props } />
 			<Advanced.Style.Content { ...props } />
 			<Transform.Style.Content { ...props } />

diff --git a/src/block/button/style.scss b/src/block/button/style.scss
@@ -17,6 +17,7 @@
 
 .stk-block.stk-block-button {
 	width: auto;
+	min-width: fit-content;
 }
 
 // Prevent fullwidth buttons from going past their container.