fallback to color attribute if available / implement tests

Author: tschortsch

cypress/e2e/button/button-block.cy.js

@@ -47,14 +47,14 @@ describe( 'Button Block', () => {
 		cy.postContentMatchesSnapshot();
 	} );
 
-	it( 'Style should be visible in UI', () => {
+	it.only( 'Style should be visible in UI', () => {
 		cy.insertButtonBlock();
 
 		// Check default button style
 		cy.get( '.wp-block-wp-bootstrap-blocks-button' ).should(
 			'have.attr',
 			'style',
-			'background-color: rgb(0, 123, 255);'
+			'background-color: rgb(0, 123, 255); color: rgb(255, 255, 255);'
 		);
 
 		cy.selectButtonBlock();
@@ -66,7 +66,7 @@ describe( 'Button Block', () => {
 		cy.get( '.wp-block-wp-bootstrap-blocks-button' ).should(
 			'have.attr',
 			'style',
-			'background-color: rgb(108, 117, 125);'
+			'background-color: rgb(108, 117, 125); color: rgb(255, 255, 255);'
 		);
 
 		// Editor content should match snapshot

cypress/e2e/button/button-filters.cy.js

@@ -27,6 +27,49 @@ describe( 'Button Block Filters', () => {
 		// Style option should be applied
 		cy.getSelectByLabel( 'Style' ).select( 'brand' );
 
+		// Style should be visible in UI
+		cy.get( '.wp-block-wp-bootstrap-blocks-button' ).should(
+			'have.attr',
+			'style',
+			'background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);'
+		);
+
+		// Editor content should match snapshot
+		cy.postContentMatchesSnapshot();
+	} );
+
+	it( 'Deprecated color attribute should be visible in UI', () => {
+		cy.insertButtonBlock();
+		cy.selectButtonBlock();
+		cy.ensureSidebarOpened();
+
+		cy.getSelectByLabel( 'Style' ).select( 'brand-deprecated-color' );
+
+		// Style should be visible in UI
+		cy.get( '.wp-block-wp-bootstrap-blocks-button' ).should(
+			'have.attr',
+			'style',
+			'background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);'
+		);
+
+		// Editor content should match snapshot
+		cy.postContentMatchesSnapshot();
+	} );
+
+	it( 'Use default colors if textColor or bgColor attributes are missing in styleOption', () => {
+		cy.insertButtonBlock();
+		cy.selectButtonBlock();
+		cy.ensureSidebarOpened();
+
+		cy.getSelectByLabel( 'Style' ).select( 'missing-colors' );
+
+		// Style should be visible in UI
+		cy.get( '.wp-block-wp-bootstrap-blocks-button' ).should(
+			'have.attr',
+			'style',
+			'background-color: rgb(0, 123, 255); color: rgb(255, 255, 255);'
+		);
+
 		// Editor content should match snapshot
 		cy.postContentMatchesSnapshot();
 	} );

e2e-test-plugins/button-filters/index.js

@@ -3,7 +3,21 @@
 	function buttonFiltersStyleOptions( styleOptions ) {
 		return [
 			...styleOptions,
-			{ label: 'Brand', value: 'brand', color: '#FF0000' },
+			{
+				label: 'Brand',
+				value: 'brand',
+				bgColor: '#FF0000',
+				textColor: '#FFFFFF',
+			},
+			{
+				label: 'Brand (Deprecated Color)',
+				value: 'brand-deprecated-color',
+				color: '#FF0000',
+			},
+			{
+				label: 'Missing colors',
+				value: 'missing-colors',
+			},
 		];
 	}
 	wp.hooks.addFilter(

snapshots.js

@@ -86,6 +86,12 @@ module.exports = {
     },
     "wp_bootstrap_blocks_button_default_attributes should override default attributes": {
       "1": "<!-- wp:wp-bootstrap-blocks/button /-->"
+    },
+    "Deprecated color attribute should be visible in UI": {
+      "1": "<!-- wp:wp-bootstrap-blocks/button {\"style\":\"brand-deprecated-color\"} /-->"
+    },
+    "Use default colors if textColor or bgColor attributes are missing in styleOption": {
+      "1": "<!-- wp:wp-bootstrap-blocks/button {\"style\":\"missing-colors\"} /-->"
     }
   },
   "Container Block": {

src/button/edit.js

@@ -23,13 +23,13 @@ let styleOptions = [
 		label: __( 'Primary', 'wp-bootstrap-blocks' ),
 		value: 'primary',
 		bgColor: bgColors.primary,
-		color: colors.white
+		textColor: colors.white,
 	},
 	{
 		label: __( 'Secondary', 'wp-bootstrap-blocks' ),
 		value: 'secondary',
 		bgColor: bgColors.secondary,
-		color: colors.white
+		textColor: colors.white,
 	},
 ];
 styleOptions = applyFilters(
@@ -38,7 +38,7 @@ styleOptions = applyFilters(
 );
 
 const DEFAULT_BG_COLOR = bgColors.primary;
-const DEFAULT_COLOR = colors.white;
+const DEFAULT_TEXT_COLOR = colors.white;
 const NEW_TAB_REL_DEFAULT_VALUE = 'noreferrer noopener';
 
 const BootstrapButtonEdit = ( {
@@ -66,22 +66,33 @@ const BootstrapButtonEdit = ( {
 		} );
 	};
 
+	// Fill empty color values with default values and check for usage of deprecated color attribute in styleOptions
+	const styleOptionsWithDefault = styleOptions.map( ( styleOption ) => ( {
+		...styleOption,
+		textColor: styleOption.textColor || DEFAULT_TEXT_COLOR,
+		bgColor: styleOption.bgColor || styleOption.color || DEFAULT_BG_COLOR, // Fallback to deprecated color attribute
+	} ) );
+
 	// Prepare CSS rules for selected button style
 	let inlineStyle = {
 		backgroundColor:
-			styleOptions.length > 0 ? styleOptions[ 0 ].bgColor : DEFAULT_BG_COLOR,
-		color: 
-			styleOptions.length > 0 ? styleOptions[ 0 ].color : DEFAULT_COLOR,
+			styleOptionsWithDefault.length > 0
+				? styleOptionsWithDefault[ 0 ].bgColor
+				: DEFAULT_BG_COLOR,
+		color:
+			styleOptionsWithDefault.length > 0
+				? styleOptionsWithDefault[ 0 ].textColor
+				: DEFAULT_TEXT_COLOR,
 	};
 
 	if ( style ) {
-		const selectedButtonColor = styleOptions.find(
+		const selectedButtonColor = styleOptionsWithDefault.find(
 			( styleOption ) => styleOption.value === style
 		);
-		if ( selectedButtonColor?.bgColor && selectedButtonColor?.color ) {
+		if ( selectedButtonColor?.bgColor && selectedButtonColor?.textColor ) {
 			inlineStyle = {
 				backgroundColor: selectedButtonColor.bgColor,
-				color: selectedButtonColor.color
+				color: selectedButtonColor.textColor,
 			};
 		}
 	}