Merge pull request #106 from liip/feat/modernize

feat(): Modernize all the things

README.md

@@ -70,7 +70,7 @@ The version can be selected in the plugin settings (Settings > Bootstrap Blocks)
 * Bootstrap 4 (default): `define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '4' );`
 * Bootstrap 5: `define( 'WP_BOOTSTRAP_BLOCKS_BOOTSTRAP_VERSION', '5' );`
 
-Possible values right now are `'4'` or `'5'`. By default Bootstrap version **4** is selected.
+Possible values right now are `'4'` or `'5'`. By default Bootstrap version **5** is selected.
 
 ## CSS Grid
 

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' => '6010ac73ad30738b341d');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '9b6fd2a0b07ab4882cb6');

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

@@ -150,32 +150,46 @@ describe( 'Column Block', () => {
  cy.postContentMatchesSnapshot();
  } );
 
- it( 'Should not display xxl breakpoint options if run with Bootstrap 4', () => {
+ // Bootstrap 5 specific options
+
+ it( 'Should display xxl breakpoint options', () => {
  cy.insertRowBlock();
  cy.ensureSidebarOpened();
 
  // Select first column block
  cy.selectColumnBlock();
  cy.openSidebarPanelWithTitle( 'Column size' );
 
- // Xl column count option should exist
- cy.xpath(
- '//label[contains(@class,"components-base-control__label")][contains(text(),"Xl Column count")]'
- ).should( 'exist' );
-
- // Xxl column count option should not exist
+ // Xxl column count option should exist
  cy.xpath(
  '//label[contains(@class,"components-base-control__label")][contains(text(),"Xxl Column count")]'
- ).should( 'not.exist' );
-
- // Xl equal-width option should exist
- cy.xpath(
- '//label[contains(@class,"components-checkbox-control__label")][contains(text(),"Xl equal-width")]'
  ).should( 'exist' );
 
- // Xxl equal-width option should not exist
+ // Xxl equal-width option should exist
  cy.xpath(
  '//label[contains(@class,"components-checkbox-control__label")][contains(text(),"Xxl equal-width")]'
- ).should( 'not.exist' );
+ ).should( 'exist' );
+ } );
+
+ it( 'Should be possible to select column size for xxl breakpoint', () => {
+ cy.insertRowBlock();
+ cy.ensureSidebarOpened();
+
+ // Select first column block
+ cy.selectColumnBlock();
+ cy.openSidebarPanelWithTitle( 'Column size' );
+
+ // Change column count
+ cy.get(
+ 'input.components-input-control__input[aria-label="Xxl Column count"]'
+ ).type( '2' );
+ cy.get( '[data-type="wp-bootstrap-blocks/column"]' )
+ .first()
+ .should( 'have.attr', 'data-size-xxl', '2' );
+
+ // Enable column equal-width
+ cy.clickElementByText( 'label', 'Xxl equal-width' );
+
+ cy.postContentMatchesSnapshot();
  } );
 } );

cypress/e2e/column/column-bootstrap-v4.cy.js

@@ -0,0 +1,47 @@
+/// <reference types="Cypress" />
+
+describe( 'Column Block Bootstrap 4', () => {
+ before( () => {
+ cy.loginUser();
+ cy.activatePlugin( 'wp-bootstrap-blocks-test-bootstrap-v4' );
+ } );
+
+ after( () => {
+ cy.loginUser();
+ cy.deactivatePlugin( 'wp-bootstrap-blocks-test-bootstrap-v4' );
+ } );
+
+ beforeEach( () => {
+ cy.loginUser();
+ cy.createNewPost();
+ } );
+
+ it( 'Should not display xxl breakpoint options if run with Bootstrap 4', () => {
+ cy.insertRowBlock();
+ cy.ensureSidebarOpened();
+
+ // Select first column block
+ cy.selectColumnBlock();
+ cy.openSidebarPanelWithTitle( 'Column size' );
+
+ // Xl column count option should exist
+ cy.xpath(
+ '//label[contains(@class,"components-base-control__label")][contains(text(),"Xl Column count")]'
+ ).should( 'exist' );
+
+ // Xxl column count option should not exist
+ cy.xpath(
+ '//label[contains(@class,"components-base-control__label")][contains(text(),"Xxl Column count")]'
+ ).should( 'not.exist' );
+
+ // Xl equal-width option should exist
+ cy.xpath(
+ '//label[contains(@class,"components-checkbox-control__label")][contains(text(),"Xl equal-width")]'
+ ).should( 'exist' );
+
+ // Xxl equal-width option should not exist
+ cy.xpath(
+ '//label[contains(@class,"components-checkbox-control__label")][contains(text(),"Xxl equal-width")]'
+ ).should( 'not.exist' );
+ } );
+} );

cypress/e2e/column/column-filters.cy.js

@@ -88,6 +88,10 @@ describe( 'Column Block Filters', () => {
  'Align content bottom'
  );
 
+ // Xxl Columm size value should be set
+ cy.openSidebarPanelWithTitle( 'Column size' );
+ cy.getInputByLabel( 'Xxl Column count' ).should( 'have.value', '5' );
+
  // Check if attributes are set correctly
  cy.postContentMatchesSnapshot();
  } );

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

@@ -47,18 +47,20 @@ describe( 'Container Block', () => {
  cy.postContentMatchesSnapshot();
  } );
 
- it( 'Should not display xxl breakpoint options if run with Bootstrap 4', () => {
+ // Bootstrap 5 specific options
+
+ it( 'Should display xxl breakpoint', () => {
  cy.insertContainerBlock();
  cy.selectContainerBlock();
  cy.ensureSidebarOpened();
 
  cy.xpath(
  `//label[contains(@class,"components-input-control__label")][contains(text(),"Fluid Breakpoint")]/parent::div/following-sibling::div/select[contains(@class,"components-select-control__input")]/option`
- ).should( 'have.length', 5 );
+ ).should( 'have.length', 6 );
 
- // xxl option should not exist
+ // xxl option should exist
  cy.xpath(
  `//label[contains(@class,"components-input-control__label")][contains(text(),"Fluid Breakpoint")]/parent::div/following-sibling::div/select[contains(@class,"components-select-control__input")]/option[@value='xxl']`
- ).should( 'not.exist' );
+ ).should( 'have.length', 1 );
  } );
 } );

cypress/e2e/container/container-bootstrap-v5.cy.js → cypress/e2e/container/container-bootstrap-v4.cy.js

@@ -1,33 +1,33 @@
 /// <reference types="Cypress" />
 
-describe( 'Container Block Bootstrap 5', () => {
+describe( 'Container Block Bootstrap 4', () => {
  before( () => {
  cy.loginUser();
- cy.activatePlugin( 'wp-bootstrap-blocks-test-bootstrap-v5' );
+ cy.activatePlugin( 'wp-bootstrap-blocks-test-bootstrap-v4' );
  } );
 
  after( () => {
  cy.loginUser();
- cy.deactivatePlugin( 'wp-bootstrap-blocks-test-bootstrap-v5' );
+ cy.deactivatePlugin( 'wp-bootstrap-blocks-test-bootstrap-v4' );
  } );
 
  beforeEach( () => {
  cy.loginUser();
  cy.createNewPost();
  } );
 
- it( 'Should display xxl breakpoint', () => {
+ it( 'Should not display xxl breakpoint options if run with Bootstrap 4', () => {
  cy.insertContainerBlock();
  cy.selectContainerBlock();
  cy.ensureSidebarOpened();
 
  cy.xpath(
  `//label[contains(@class,"components-input-control__label")][contains(text(),"Fluid Breakpoint")]/parent::div/following-sibling::div/select[contains(@class,"components-select-control__input")]/option`
- ).should( 'have.length', 6 );
+ ).should( 'have.length', 5 );
 
- // xxl option should exist
+ // xxl option should not exist
  cy.xpath(
  `//label[contains(@class,"components-input-control__label")][contains(text(),"Fluid Breakpoint")]/parent::div/following-sibling::div/select[contains(@class,"components-select-control__input")]/option[@value='xxl']`
- ).should( 'have.length', 1 );
+ ).should( 'not.exist' );
  } );
 } );

cypress/e2e/row/row-block-backwards-compat.cy.js

@@ -16,10 +16,10 @@ import {
 context( 'Row Block Backwards Compatibility', () => {
  beforeEach( () => {
  cy.loginUser();
- cy.createNewPost();
  } );
 
  it( 'v1.0.0 row block content should be compatible', () => {
+ cy.createNewPost();
  cy.setPostContent( rowContent100 );
 
  cy.ensureSidebarOpened();
@@ -38,13 +38,15 @@ context( 'Row Block Backwards Compatibility', () => {
  } );
 
  it( 'v1.0.0 column block content should be compatible', () => {
+ cy.createNewPost();
  cy.setPostContent( rowContent100 );
  cy.ensureSidebarOpened();
 
  testVersion100ColumnFeatures();
  } );
 
  it( 'v1.1.0 row block content should be compatible', () => {
+ cy.createNewPost();
  cy.setPostContent( rowContent110 );
  cy.ensureSidebarOpened();
 
@@ -64,6 +66,7 @@ context( 'Row Block Backwards Compatibility', () => {
  } );
 
  it( 'v1.1.0 column block content should be compatible', () => {
+ cy.createNewPost();
  cy.setPostContent( rowContent110 );
  cy.ensureSidebarOpened();
 
@@ -73,6 +76,7 @@ context( 'Row Block Backwards Compatibility', () => {
  } );
 
  it( 'v1.4.0 column block content should be compatible', () => {
+ cy.createNewPost();
  cy.setPostContent( rowContent140 );
  cy.ensureSidebarOpened();
 
@@ -84,6 +88,8 @@ context( 'Row Block Backwards Compatibility', () => {
  } );
 
  it( 'Bootstrap 4 works with Bootstrap 5 settings', () => {
+ cy.activatePlugin( 'wp-bootstrap-blocks-test-bootstrap-v4' );
+ cy.createNewPost();
  cy.setPostContent( rowContentBootstrap5 );
  cy.ensureSidebarOpened();
 
@@ -101,9 +107,11 @@ context( 'Row Block Backwards Compatibility', () => {
  // Check if Bootstrap 4 values are set in inspector controls
  cy.openSidebarPanelWithTitle( 'Column size' );
  cy.getInputByLabel( 'Md Column count' ).should( 'have.value', '8' );
+ cy.deactivatePlugin( 'wp-bootstrap-blocks-test-bootstrap-v4' );
  } );
 
  it( 'v3.2.0 column block content with center content option should be migrated to content vertical alignment', () => {
+ cy.createNewPost();
  cy.setPostContent( rowContent320CenterContent );
  cy.ensureSidebarOpened();