Merge pull request #106 from liip/feat/modernize

feat(): Modernize all the things

Author: tschortsch

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

build/index.css

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

build/index.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-block.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/column/column-bootstrap-v4.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 );
 	} );
 } );