Fix up the button styles colour when you have radio buttons

Automattic · Jan 18, 2025 · 771e15d · 771e15d
1 parent 9ca3772
commit 771e15d
Showing 1 changed file with 11 additions and 10 deletions.
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js
@@ -35,8 +35,14 @@ const JetpackFieldControls = ( {
 	extraFieldSettings = [],
 } ) => {
 	const formStyle = useFormStyle( clientId );
-	const blockStyle = getBlockStyle( blockClassNames );
+
+	const blockStyle =
+		getBlockStyle( blockClassNames ) !== ''
+			? getBlockStyle( blockClassNames )
+			: attributes?.className && getBlockStyle( attributes.className );
+
 	const isChoicesBlock = [ 'radio', 'checkbox' ].includes( type );
+	const isRadioButton = type === 'radio' && blockStyle === 'button';
 
 	const setNumberAttribute =
 		( key, parse = parseInt ) =>
@@ -78,28 +84,23 @@ const JetpackFieldControls = ( {
 		},
 	];
 
-	if ( isChoicesBlock ) {
-		colorSettings.push( {
-			value: attributes.borderColor,
-			onChange: value => setAttributes( { borderColor: value } ),
-			label: __( 'Border', 'jetpack-forms' ),
-		} );
-	}
-	if ( isChoicesBlock && blockStyle === 'button' ) {
+	if ( blockStyle === 'button' ) {
 		colorSettings.push( {
 			value: attributes.buttonBackgroundColor,
 			onChange: value => setAttributes( { buttonBackgroundColor: value } ),
 			label: __( 'Button Background', 'jetpack-forms' ),
 		} );
 	}
 
-	if ( ! isChoicesBlock || formStyle === FORM_STYLE.OUTLINED ) {
+	if ( formStyle === FORM_STYLE.OUTLINED ) {
 		colorSettings.push( {
 			value: attributes.fieldBackgroundColor,
 			onChange: value => setAttributes( { fieldBackgroundColor: value } ),
 			label: backgroundColorLabel,
 		} );
+	}
 
+	if ( ! isRadioButton ) {
 		colorSettings.push( {
 			value: attributes.borderColor,
 			onChange: value => setAttributes( { borderColor: value } ),