Merge pull request #115 from liip/feat/wp-61

tschortsch · web-flow · commit 6172e8e05148 · 2022-11-08T13:56:49.000+01:00
feat(): WordPress 6.1 / Button styling
diff --git a/.github/workflows/lint-test-deploy.yml b/.github/workflows/lint-test-deploy.yml
@@ -36,7 +36,7 @@ jobs:
 
     strategy:
       matrix:
-        wp: [ '5.7', '5.8', '5.9', '6.0' ]
+        wp: [ '5.7', '5.8', '5.9', '6.0', '6.1' ]
 
     steps:
       - uses: actions/checkout@v3
diff --git a/.wp-env.json b/.wp-env.json
@@ -1,5 +1,5 @@
 {
-	"core": "WordPress/WordPress#6.0.1",
+	"core": "WordPress/WordPress#6.1",
 	"plugins": [ "." ],
 	"themes": [
 		"./test-themes/bootstrap"
diff --git a/README.md b/README.md
@@ -477,7 +477,7 @@ Modify default attributes of the button block.
         * `_blank`: Target attribute is set to `_blank`
     * `rel` (`string`) Default rel attribute of the link (Default: `''`)
     * `text` (`string`) Default text of the button (Default: `''`)
-    * `style` (`string`) Default style of the button (Default: `''`)
+    * `style` (`string`) Default style of the button (Default: `'primary'`)
     * `alignment` (`string`) Default alignment of the button (Default: `''`)
 
 #### Usage
@@ -562,7 +562,7 @@ Modify available button styles.
 
 ```javascript
 function myButtonStyleOptions( styleOptions ) {
-	styleOptions.push( { label: 'My Option', value: 'my-option' } );
+	styleOptions.push( { label: 'My Option', value: 'my-option', color: '#FF0000' } );
 	return styleOptions;
 }
 wp.hooks.addFilter(
diff --git a/build/index.asset.php b/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' => '0a2b1fb09f220caef635');
+<?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');
diff --git a/build/index.css b/build/index.css
diff --git a/build/index.js b/build/index.js
diff --git a/cypress/e2e/button/button-block.cy.js b/cypress/e2e/button/button-block.cy.js
@@ -47,6 +47,52 @@ describe( 'Button Block', () => {
 		cy.postContentMatchesSnapshot();
 	} );
 
+	it( 'Style should be visible in UI', () => {
+		cy.insertButtonBlock();
+
+		// Check default button style
+		cy.get( '.wp-block-wp-bootstrap-blocks-button' ).should(
+			'have.attr',
+			'style',
+			'background-color: rgb(0, 123, 255);'
+		);
+
+		cy.selectButtonBlock();
+		cy.ensureSidebarOpened();
+
+		cy.getSelectByLabel( 'Style' ).select( 'secondary' );
+
+		// Style should be visible in UI
+		cy.get( '.wp-block-wp-bootstrap-blocks-button' ).should(
+			'have.attr',
+			'style',
+			'background-color: rgb(108, 117, 125);'
+		);
+
+		// Editor content should match snapshot
+		cy.postContentMatchesSnapshot();
+	} );
+
+	it( 'Should add data attributes', () => {
+		cy.insertButtonBlock();
+
+		cy.get(
+			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/button"][data-style="primary"]'
+		).should( 'exist' );
+
+		cy.selectButtonBlock();
+		cy.ensureSidebarOpened();
+
+		cy.getSelectByLabel( 'Style' ).select( 'secondary' );
+
+		cy.get(
+			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/button"][data-style="secondary"]'
+		).should( 'exist' );
+
+		// Editor content should match snapshot
+		cy.postContentMatchesSnapshot();
+	} );
+
 	it( 'Should be possible to change alignment', () => {
 		cy.insertButtonBlock();
 		cy.selectButtonBlock();
diff --git a/languages/wp-bootstrap-blocks-de_CH.po b/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.2.1\n"
+"Project-Id-Version: Bootstrap Blocks 4.3.0\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"
diff --git a/languages/wp-bootstrap-blocks-de_DE.po b/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 4.2.1\n"
+"Project-Id-Version: Bootstrap Blocks 4.3.0\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"
diff --git a/languages/wp-bootstrap-blocks.pot b/languages/wp-bootstrap-blocks.pot
@@ -2,7 +2,7 @@
 # This file is distributed under the GPL2+.
 msgid ""
 msgstr ""
-"Project-Id-Version: Bootstrap Blocks 4.2.1\n"
+"Project-Id-Version: Bootstrap Blocks 4.3.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"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wp-bootstrap-blocks",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "private": true,
   "description": "Bootstrap Gutenberg Blocks for WordPress",
   "author": "Liip AG",
diff --git a/readme.txt b/readme.txt
@@ -3,9 +3,9 @@ Contributors: liip, tschortsch
 Donate link: https://liip.ch/
 Tags: gutenberg, blocks, bootstrap
 Requires at least: 5.0
-Tested up to: 6.0
+Tested up to: 6.1
 Requires PHP: 5.6
-Stable tag: 4.2.1
+Stable tag: 4.3.0
 License: GPLv2
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
@@ -143,11 +143,17 @@ Please create a new GitHub issue and let us know: [https://github.com/liip/boots
 
 == Changelog ==
 
-= 4.2.1 =
+= 4.3.0 =
 
 **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.
 
+* [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.
+
+= 4.2.1 =
+
 * [FIX] Rename blocks to `<Blockname> (Bootstrap)` for better discoverability when searching for a block.
 
 = 4.2.0 =
diff --git a/snapshots.js b/snapshots.js
@@ -1,5 +1,5 @@
 module.exports = {
-  "__version": "9.6.1",
+  "__version": "10.6.0",
   "Row Block": {
     "Row block should be available": {
       "1": "<!-- wp:wp-bootstrap-blocks/row -->\n<!-- wp:wp-bootstrap-blocks/column {\"sizeMd\":6} /-->\n\n<!-- wp:wp-bootstrap-blocks/column {\"sizeMd\":6} /-->\n<!-- /wp:wp-bootstrap-blocks/row -->"
@@ -78,6 +78,12 @@ module.exports = {
     "Should keep rel value if set when open in new tab is enabled or disabled": {
       "1": "<!-- wp:wp-bootstrap-blocks/button {\"linkTarget\":\"_blank\",\"rel\":\"custom rel value\"} /-->",
       "2": "<!-- wp:wp-bootstrap-blocks/button {\"rel\":\"custom rel value\"} /-->"
+    },
+    "Style should be visible in UI": {
+      "1": "<!-- wp:wp-bootstrap-blocks/button {\"style\":\"secondary\"} /-->"
+    },
+    "Should add data attributes": {
+      "1": "<!-- wp:wp-bootstrap-blocks/button {\"style\":\"secondary\"} /-->"
     }
   },
   "Button Block Filters": {
diff --git a/src/button/block.js b/src/button/block.js
@@ -25,7 +25,12 @@ registerBlockType( 'wp-bootstrap-blocks/button', {
 	// attributes are defined server side with register_block_type(). This is needed to make default attributes available in the blocks render callback.
 
 	getEditWrapperProps( attributes ) {
-		return { 'data-alignment': attributes.alignment };
+		const { alignment, style } = attributes;
+
+		return {
+			'data-alignment': alignment,
+			'data-style': style,
+		};
 	},
 
 	edit,
diff --git a/src/button/class-button-block-type.php b/src/button/class-button-block-type.php
@@ -62,7 +62,7 @@ class Button_Block_Type extends Block_Type {
 			'linkTarget' => '',
 			'rel' => '',
 			'text' => '',
-			'style' => '',
+			'style' => 'primary',
 			'alignment' => '',
 		);
 	}
diff --git a/src/button/edit.js b/src/button/edit.js
@@ -12,6 +12,7 @@ import {
 import { applyFilters } from '@wordpress/hooks';
 import * as BlockEditor from '@wordpress/block-editor';
 import * as Editor from '@wordpress/editor';
+import { colors } from '../constants';
 
 const {
 	RichText,
@@ -21,25 +22,30 @@ const {
 	AlignmentToolbar,
 } = BlockEditor || Editor; // Fallback to deprecated '@wordpress/editor' for backwards compatibility
 
+let styleOptions = [
+	{
+		label: __( 'Primary', 'wp-bootstrap-blocks' ),
+		value: 'primary',
+		color: colors.primary,
+	},
+	{
+		label: __( 'Secondary', 'wp-bootstrap-blocks' ),
+		value: 'secondary',
+		color: colors.secondary,
+	},
+];
+styleOptions = applyFilters(
+	'wpBootstrapBlocks.button.styleOptions',
+	styleOptions
+);
+
 const NEW_TAB_REL_DEFAULT_VALUE = 'noreferrer noopener';
 
 class BootstrapButtonEdit extends Component {
 	render() {
 		const { attributes, className, setAttributes, isSelected } = this.props;
 		const { url, linkTarget, rel, text, style, alignment } = attributes;
 
-		let styleOptions = [
-			{ label: __( 'Primary', 'wp-bootstrap-blocks' ), value: 'primary' },
-			{
-				label: __( 'Secondary', 'wp-bootstrap-blocks' ),
-				value: 'secondary',
-			},
-		];
-		styleOptions = applyFilters(
-			'wpBootstrapBlocks.button.styleOptions',
-			styleOptions
-		);
-
 		// Open in new tab behavior from core/button (source: https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/button/edit.js)
 		const onToggleOpenInNewTab = ( value ) => {
 			const newLinkTarget = value ? '_blank' : undefined;
@@ -57,9 +63,30 @@ class BootstrapButtonEdit extends Component {
 			} );
 		};
 
+		// Prepare CSS rules for selected button style
+		let inlineStyle = {
+			backgroundColor:
+				styleOptions.length > 0 ? styleOptions[ 0 ].color : '',
+		};
+
+		if ( style ) {
+			const selectedButtonColor = styleOptions.find(
+				( styleOption ) => styleOption.value === style
+			);
+			if ( selectedButtonColor ) {
+				inlineStyle = {
+					backgroundColor: selectedButtonColor.color,
+				};
+			}
+		}
+
 		return (
 			<Fragment>
-				<div className={ className } data-alignment={ alignment }>
+				<div
+					className={ className }
+					data-alignment={ alignment }
+					style={ inlineStyle }
+				>
 					<RichText
 						// eslint-disable-next-line @wordpress/i18n-ellipsis
 						placeholder={ __(
diff --git a/src/button/editor.scss b/src/button/editor.scss
@@ -14,7 +14,6 @@
 	box-sizing: border-box;
 	display: inline-block;
 	padding: 8px 16px;
-	background-color: $blue-50;
 	color: $white;
 }
 
diff --git a/src/class-wp-bootstrap-blocks.php b/src/class-wp-bootstrap-blocks.php
@@ -33,7 +33,7 @@ class WP_Bootstrap_Blocks {
 	 *
 	 * @var string
 	 */
-	public static $version = '4.2.1';
+	public static $version = '4.3.0';
 
 	/**
 	 * The plugin token.
diff --git a/src/column/edit.js b/src/column/edit.js
@@ -21,6 +21,7 @@ import {
 	verticalAlignCenter,
 	verticalAlignTop,
 } from '../icons';
+import { colors } from '../constants';
 
 const { InnerBlocks, InspectorControls, BlockControls, AlignmentToolbar } =
 	BlockEditor || Editor; // Fallback to deprecated '@wordpress/editor' for backwards compatibility
@@ -67,8 +68,8 @@ const ColumnSizeRangeControl = ( {
 };
 
 export let bgColorOptions = [
-	{ name: 'primary', color: '#007bff' },
-	{ name: 'secondary', color: '#6c757d' },
+	{ name: 'primary', color: colors.primary },
+	{ name: 'secondary', color: colors.secondary },
 ];
 
 bgColorOptions = applyFilters(
diff --git a/src/constants.js b/src/constants.js
@@ -0,0 +1,4 @@
+export const colors = {
+	primary: '#007bff',
+	secondary: '#6c757d',
+};
diff --git a/wp-bootstrap-blocks.php b/wp-bootstrap-blocks.php
@@ -5,7 +5,7 @@
  * Description: Bootstrap Gutenberg Blocks for WordPress.
  * Author: Liip AG
  * Author URI: https://liip.ch
- * Version: 4.2.1
+ * Version: 4.3.0
  * License: GPL2+
  * License URI: https://www.gnu.org/licenses/gpl-2.0.txt
  * Text Domain: wp-bootstrap-blocks

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "core": "WordPress/WordPress#6.0.1",`
	`2`	`+ "core": "WordPress/WordPress#6.1",`
`3`	`3`	`"plugins": [ "." ],`
`4`	`4`	`"themes": [`
`5`	`5`	`"./test-themes/bootstrap"`
Original file line number	Diff line number	Diff line change
`@@ -1 +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' => '0a2b1fb09f220caef635');`
	`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');`