Merge pull request #119 from liip/improvement/better-property-names

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 <[email protected]>\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',
+};