feat(): Improve button property names

README.md

@@ -562,7 +562,12 @@ 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',
+		textColor: '#ffffff',
+	} );
 	return styleOptions;
 }
 wp.hooks.addFilter(
@@ -576,6 +581,13 @@ wp.hooks.addFilter(
 
 * `styleOptions` (`Array`) Array with button style options.
 
+Each `styleOption` object should have the following attributes:
+
+* `label` (`string`) Label displayed in the select box.
+* `value` (`string`) Value of the chosen option.
+* `bgColor` (`string`) Background color of button shown in the editor.
+* `textColor` (`string`) Text color of button shown in the editor.
+
 ### wpBootstrapBlocks.container.marginAfterOptions
 
 Modify margin after options.
@@ -598,6 +610,11 @@ wp.hooks.addFilter(
 
 * `marginAfterOptions` (`Array`) Array margin options.
 
+Each `marginAfterOption` object should have the following attributes:
+
+* `label` (`string`) Label displayed in the select box.
+* `value` (`string`) Value of the chosen option.
+
 ### wpBootstrapBlocks.row.templates
 
 Define block templates.
@@ -639,7 +656,7 @@ wp.hooks.addFilter(
 
 * `templates` (`array`) List of template objects.
 
-Each template has the following attributes:
+Each `template` object should have the following attributes:
 
 * `name` (`string`) Unique identifier of the template
 * `title` (`string`) Name of template

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' => '068db33e0cc8e71503c0');

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

@@ -54,7 +54,7 @@ describe( 'Button Block', () => {
 		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(

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 5.0.0\n"
+"Project-Id-Version: Bootstrap Blocks 5.1.0\n"
 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/wp-bootstrap-"
 "blocks\n"
 "POT-Creation-Date: 2022-11-11T09:10:58+00:00\n"

languages/wp-bootstrap-blocks-de_DE.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 5.0.0\n"
+"Project-Id-Version: Bootstrap Blocks 5.1.0\n"
 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/wp-bootstrap-"
 "blocks\n"
 "POT-Creation-Date: 2022-11-11T09:10:58+00:00\n"

languages/wp-bootstrap-blocks.pot

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

package.json

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

readme.txt

@@ -5,7 +5,7 @@ Tags: gutenberg, blocks, bootstrap
 Requires at least: 5.3
 Tested up to: 6.1
 Requires PHP: 5.6
-Stable tag: 5.0.0
+Stable tag: 5.1.0
 License: GPLv2
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
@@ -143,6 +143,11 @@ Please create a new GitHub issue and let us know: [https://github.com/liip/boots
 
 == Changelog ==
 
+= 5.1.0 =
+
+* [CHANGE] Renamed `color` attribute of the `styleOptions` for the button block to `bgColor`. Additionally added `textColor` attribute to be able to change the text color of the button in the editor as well. If you are modifying 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.
+* [FIX] Remove usage of deprecated `IconButton` component (will be removed in WordPress 6.2).
+
 = 5.0.0 =
 
 Starting with this version the plugin only supports WordPress versions >= 5.3.

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/block.json

@@ -10,5 +10,5 @@
 		"Bootstrap"
 	],
 	"textdomain": "wp-bootstrap-blocks",
-	"version": "5.0.0"
+	"version": "5.1.0"
 }

src/button/edit.js

@@ -2,7 +2,7 @@
 import { __ } from '@wordpress/i18n';
 import {
 	Dashicon,
-	IconButton,
+	Button,
 	SelectControl,
 	PanelBody,
 	ToggleControl,
@@ -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,
+		textColor: colors.white,
 	},
 	{
 		label: __( 'Secondary', 'wp-bootstrap-blocks' ),
 		value: 'secondary',
-		color: colors.secondary,
+		bgColor: bgColors.secondary,
+		textColor: colors.white,
 	},
 ];
 styleOptions = applyFilters(
 	'wpBootstrapBlocks.button.styleOptions',
 	styleOptions
 );
 
-const DEFAULT_COLOR = colors.primary;
+const DEFAULT_BG_COLOR = bgColors.primary;
+const DEFAULT_TEXT_COLOR = colors.white;
 const NEW_TAB_REL_DEFAULT_VALUE = 'noreferrer noopener';
 
 const BootstrapButtonEdit = ( {
@@ -63,19 +66,47 @@ const BootstrapButtonEdit = ( {
 		} );
 	};
 
+	// Fill empty color values with default values and check for usage of deprecated color attribute in styleOptions
+	let hasDeprecatedColorAttributes = false;
+	const styleOptionsWithDefault = styleOptions.map( ( styleOption ) => {
+		if ( styleOption.color ) {
+			hasDeprecatedColorAttributes = true;
+		}
+		return {
+			...styleOption,
+			textColor: styleOption.textColor || DEFAULT_TEXT_COLOR,
+			bgColor:
+				styleOption.bgColor || styleOption.color || DEFAULT_BG_COLOR, // Fallback to deprecated color attribute
+		};
+	} );
+
+	if ( hasDeprecatedColorAttributes ) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			'[wpBootstrapBlocks.button.styleOptions filter] The color attribute in styleOptions is deprecated. Please us bgColor and textColor instead.'
+		);
+	}
+
 	// Prepare CSS rules for selected button style
 	let inlineStyle = {
 		backgroundColor:
-			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?.color ) {
+		if ( selectedButtonColor?.bgColor && selectedButtonColor?.textColor ) {
 			inlineStyle = {
-				backgroundColor: selectedButtonColor.color,
+				backgroundColor: selectedButtonColor.bgColor,
+				color: selectedButtonColor.textColor,
 			};
 		}
 	}
@@ -151,7 +182,7 @@ const BootstrapButtonEdit = ( {
 							setAttributes( { url: value } )
 						}
 					/>
-					<IconButton
+					<Button
 						icon="editor-break"
 						label={ __( 'Apply', 'wp-bootstrap-blocks' ) }
 						type="submit"

src/class-wp-bootstrap-blocks.php

@@ -33,7 +33,7 @@ class WP_Bootstrap_Blocks {
 	 *
 	 * @var string
 	 */
-	public static $version = '5.0.0';
+	public static $version = '5.1.0';
 
 	/**
 	 * The plugin token.

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',
+};