Merge pull request #117 from liip/fix/button-default-color

fix(): Button default color

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

@@ -2,7 +2,7 @@
 # This file is distributed under the same license as the Bootstrap Blocks plugin.
 msgid ""
 msgstr ""
-"Project-Id-Version: Bootstrap Blocks 4.3.0\n"
+"Project-Id-Version: Bootstrap Blocks 4.3.1\n"
 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/wp-bootstrap-"
 "blocks\n"
 "POT-Creation-Date: 2022-05-12T07:38:53+00:00\n"

languages/wp-bootstrap-blocks-de_CH.po

@@ -2,7 +2,7 @@
 # This file is distributed under the same license as the Bootstrap Blocks plugin.
 msgid ""
 msgstr ""
-"Project-Id-Version: Bootstrap Blocks 4.3.0\n"
+"Project-Id-Version: Bootstrap Blocks 4.3.1\n"
 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/wp-bootstrap-"
 "blocks\n"
 "POT-Creation-Date: 2022-05-12T07:38:53+00:00\n"

languages/wp-bootstrap-blocks-de_DE.po

@@ -2,7 +2,7 @@
 # This file is distributed under the GPL2+.
 msgid ""
 msgstr ""
-"Project-Id-Version: Bootstrap Blocks 4.3.0\n"
+"Project-Id-Version: Bootstrap Blocks 4.3.1\n"
 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/wp-bootstrap-blocks\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"

languages/wp-bootstrap-blocks.pot

@@ -1,6 +1,6 @@
 {
   "name": "wp-bootstrap-blocks",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "private": true,
   "description": "Bootstrap Gutenberg Blocks for WordPress",
   "author": "Liip AG",

package-lock.json

@@ -5,7 +5,7 @@ Tags: gutenberg, blocks, bootstrap
 Requires at least: 5.0
 Tested up to: 6.1
 Requires PHP: 5.6
-Stable tag: 4.3.0
+Stable tag: 4.3.1
 License: GPLv2
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
@@ -143,11 +143,15 @@ Please create a new GitHub issue and let us know: [https://github.com/liip/boots
 
 == Changelog ==
 
-= 4.3.0 =
+= 4.3.1 =
 
 **NOTICE:** Version 4.x of the plugin will be the last version to support WordPress versions lower than 5.3.
 If you're on a lower version of WordPress think about updating it if you still would like receive updates for this plugin.
 
+* [FIX] Apply default color to button if `color` attribute is missing in `styleOptions`.
+
+= 4.3.0 =
+
 * [COMPATIBILITY] Tested up to WordPress 6.1.
 * [CHANGE] Set default `style` attribute of the Button block to `primary`. This shouldn't be a breaking change since the template already added the `btn-primary` class if no `style` was selected.
 * [FEATURE] Add `color` attribute to the `styleOptions` to be able to display the buttons in the correct color in the editor. If you have changed the `styleOptions` via the [`wpBootstrapBlocks.button.styleOptions`](https://github.com/liip/bootstrap-blocks-wordpress-plugin#wpbootstrapblocksbuttonstyleoptions) JavaScript filter please add the according colors to your style objects.

package.json

@@ -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,
 				};