Improvement to the property name and how the button styles are generated

README.md

@@ -562,7 +562,7 @@ Modify available button styles.
 
 ```javascript
 function myButtonStyleOptions( styleOptions ) {
-	styleOptions.push( { label: 'My Option', value: 'my-option', color: '#FF0000' } );
+	styleOptions.push( { label: 'My Option', value: 'my-option', bgColor: '#FF0000', color: '#FFFFFF } );
 	return styleOptions;
 }
 wp.hooks.addFilter(

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '9b6fd2a0b07ab4882cb6');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '50cb7b11519b5b7cfb75');

src/button/edit.js

@@ -16,26 +16,29 @@ import {
 	BlockControls,
 	AlignmentToolbar,
 } from '@wordpress/block-editor';
-import { colors } from '../constants';
+import { bgColors, colors } from '../constants';
 
 let styleOptions = [
 	{
 		label: __( 'Primary', 'wp-bootstrap-blocks' ),
 		value: 'primary',
-		color: colors.primary,
+		bgColor: bgColors.primary,
+		color: colors.white
 	},
 	{
 		label: __( 'Secondary', 'wp-bootstrap-blocks' ),
 		value: 'secondary',
-		color: colors.secondary,
+		bgColor: bgColors.secondary,
+		color: colors.white
 	},
 ];
 styleOptions = applyFilters(
 	'wpBootstrapBlocks.button.styleOptions',
 	styleOptions
 );
 
-const DEFAULT_COLOR = colors.primary;
+const DEFAULT_BG_COLOR = bgColors.primary;
+const DEFAULT_COLOR = colors.white;
 const NEW_TAB_REL_DEFAULT_VALUE = 'noreferrer noopener';
 
 const BootstrapButtonEdit = ( {
@@ -66,16 +69,19 @@ const BootstrapButtonEdit = ( {
 	// 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,
 	};
 
 	if ( style ) {
 		const selectedButtonColor = styleOptions.find(
 			( styleOption ) => styleOption.value === style
 		);
-		if ( selectedButtonColor?.color ) {
+		if ( selectedButtonColor?.bgColor && selectedButtonColor?.color ) {
 			inlineStyle = {
-				backgroundColor: selectedButtonColor.color,
+				backgroundColor: selectedButtonColor.bgColor,
+				color: selectedButtonColor.color
 			};
 		}
 	}

src/column/edit.js

@@ -23,7 +23,7 @@ import {
 	verticalAlignCenter,
 	verticalAlignTop,
 } from '../icons';
-import { colors } from '../constants';
+import { bgColors } from '../constants';
 
 const contentVerticalAlignmentControls = [
 	{
@@ -67,8 +67,8 @@ const ColumnSizeRangeControl = ( {
 };
 
 export let bgColorOptions = [
-	{ name: 'primary', color: colors.primary },
-	{ name: 'secondary', color: colors.secondary },
+	{ name: 'primary', color: bgColors.primary },
+	{ name: 'secondary', color: bgColors.secondary },
 ];
 
 bgColorOptions = applyFilters(

src/constants.js

@@ -1,4 +1,8 @@
-export const colors = {
+export const bgColors = {
 	primary: '#007bff',
 	secondary: '#6c757d',
 };
+
+export const colors = {
+	white: '#ffffff'
+};