apply default color if color is not set in styleOptions

Author: tschortsch

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '7cf780b987df063ad572');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '6010ac73ad30738b341d');

build/index.js

@@ -1,7 +1,10 @@
 /* eslint-disable wrap-iife */
 ( function () {
 	function buttonFiltersStyleOptions( styleOptions ) {
-		return [ ...styleOptions, { label: 'Brand', value: 'brand' } ];
+		return [
+			...styleOptions,
+			{ label: 'Brand', value: 'brand', color: '#FF0000' },
+		];
 	}
 	wp.hooks.addFilter(
 		'wpBootstrapBlocks.button.styleOptions',

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

@@ -39,6 +39,7 @@ styleOptions = applyFilters(
 	styleOptions
 );
 
+const DEFAULT_COLOR = colors.primary;
 const NEW_TAB_REL_DEFAULT_VALUE = 'noreferrer noopener';
 
 class BootstrapButtonEdit extends Component {
@@ -66,14 +67,16 @@ class BootstrapButtonEdit extends Component {
 		// Prepare CSS rules for selected button style
 		let inlineStyle = {
 			backgroundColor:
-				styleOptions.length > 0 ? styleOptions[ 0 ].color : '',
+				styleOptions.length > 0
+					? styleOptions[ 0 ].color
+					: DEFAULT_COLOR,
 		};
 
 		if ( style ) {
 			const selectedButtonColor = styleOptions.find(
 				( styleOption ) => styleOption.value === style
 			);
-			if ( selectedButtonColor ) {
+			if ( selectedButtonColor?.color ) {
 				inlineStyle = {
 					backgroundColor: selectedButtonColor.color,
 				};