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

feat(): WordPress 6.1 / Button styling

.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

.wp-env.json

@@ -1,5 +1,5 @@
 {
- "core": "WordPress/WordPress#6.0.1",
+ "core": "WordPress/WordPress#6.1",
  "plugins": [ "." ],
  "themes": [
  "./test-themes/bootstrap"

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(

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');

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();

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"

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"

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 <[email protected]>\n"

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",

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 =

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": {

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,

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

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={ __(

src/button/editor.scss

@@ -14,7 +14,6 @@
  box-sizing: border-box;
  display: inline-block;
  padding: 8px 16px;
- background-color: $blue-50;
  color: $white;
 }
 

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.

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(

src/constants.js

@@ -0,0 +1,4 @@
+export const colors = {
+ primary: '#007bff',
+ secondary: '#6c757d',
+};

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