Merge pull request #107 from liip/feat/reflect-gutter-options-in-editor

feat(): Reflect gutter options in editor

Author: tschortsch

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' => '0eaff1ea1cf672b436eda066b043570f');
+<?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' => '2a125809b525a250b9ebef8d56322b37');

build/index.css

@@ -3,6 +3,7 @@
 declare namespace Cypress {
 	interface Chainable<Subject> {
 
+		getByCy(cyKey: string): Chainable<Element>;
 		postContentMatchesSnapshot(): Chainable<void>
 		insertRowBlock(): Chainable<void>
 		selectRowBlock( index?: number ): Chainable<void>

build/index.js

@@ -27,10 +27,10 @@ describe( 'Row Block Filters Bootstrap 5', () => {
 		cy.clickElementByText( 'label', 'No Gutters' );
 
 		// Additional horizontal gutters option should be available
-		cy.selectOptionIsAvailable( 'Horizontal Gutters', 'gx-4' );
+		cy.selectOptionIsAvailable( 'Horizontal Gutters', 'gx-10' );
 
 		// Horizontal Gutters option should be applied
-		cy.getSelectByLabel( 'Horizontal Gutters' ).select( 'gx-4' );
+		cy.getSelectByLabel( 'Horizontal Gutters' ).select( 'gx-10' );
 
 		cy.postContentMatchesSnapshot();
 	} );
@@ -44,10 +44,10 @@ describe( 'Row Block Filters Bootstrap 5', () => {
 		cy.clickElementByText( 'label', 'No Gutters' );
 
 		// Additional vertical gutters option should be available
-		cy.selectOptionIsAvailable( 'Vertical Gutters', 'gy-4' );
+		cy.selectOptionIsAvailable( 'Vertical Gutters', 'gy-10' );
 
 		// Vertical Gutters option should be applied
-		cy.getSelectByLabel( 'Vertical Gutters' ).select( 'gy-4' );
+		cy.getSelectByLabel( 'Vertical Gutters' ).select( 'gy-10' );
 
 		cy.postContentMatchesSnapshot();
 	} );

cypress/index.d.ts

@@ -27,10 +27,10 @@ describe( 'Row Block Filters CSS grid', () => {
 		cy.clickElementByText( 'label', 'No Gutters' );
 
 		// Additional gutters option should be available
-		cy.selectOptionIsAvailable( 'Gutters', '1.5rem' );
+		cy.selectOptionIsAvailable( 'Gutters', '10rem' );
 
 		// Gutters option should be applied
-		cy.getSelectByLabel( 'Gutters' ).select( '1.5rem' );
+		cy.getSelectByLabel( 'Gutters' ).select( '10rem' );
 
 		cy.postContentMatchesSnapshot();
 	} );

cypress/integration/row/row-filters-bootstrap-v5.spec.js

@@ -0,0 +1,41 @@
+/// <reference types="Cypress" />
+
+describe( 'Settings page', () => {
+	beforeEach( () => {
+		cy.loginUser();
+	} );
+
+	it( 'Default values should be selected', () => {
+		cy.visitAdminPage(
+			'options-general.php?page=wp-bootstrap-blocks_settings'
+		);
+
+		cy.get(
+			'#wp-bootstrap-blocks_bootstrap_version option:selected'
+		).should( 'have.value', '4' );
+
+		cy.get( '#wp-bootstrap-blocks_enable_css_grid' )
+			.should( 'not.be.checked' )
+			.and( 'be.disabled' );
+	} );
+
+	it( 'Should respect constants', () => {
+		cy.activatePlugin( 'wp-bootstrap-blocks-test-css-grid' );
+		cy.visitAdminPage(
+			'options-general.php?page=wp-bootstrap-blocks_settings'
+		);
+
+		cy.get( '#wp-bootstrap-blocks_bootstrap_version' ).should(
+			'be.disabled'
+		);
+		cy.get(
+			'#wp-bootstrap-blocks_bootstrap_version option:selected'
+		).should( 'have.value', '5' );
+
+		cy.get( '#wp-bootstrap-blocks_enable_css_grid' )
+			.should( 'be.checked' )
+			.and( 'be.disabled' );
+
+		cy.deactivatePlugin( 'wp-bootstrap-blocks-test-css-grid' );
+	} );
+} );

cypress/integration/row/row-filters-css-grid.spec.js

@@ -0,0 +1,3 @@
+Cypress.Commands.add( 'getByCy', ( cyKey ) =>
+	cy.get( `[data-cy="${ cyKey }"]` )
+);

cypress/integration/settings/settings.spec.js

@@ -1,3 +1,4 @@
+import './get-by-cy';
 import './insert-row-block';
 import './select-row-block';
 import './row-template-is-selected';

cypress/support/commands/get-by-cy.js

@@ -38,8 +38,8 @@
 		return [
 			...horizontalGuttersOptions,
 			{
-				label: 'Medium',
-				value: 'gx-4',
+				label: 'Huge',
+				value: 'gx-10',
 			},
 		];
 	}
@@ -54,8 +54,8 @@
 		return [
 			...verticalGuttersOptions,
 			{
-				label: 'Medium',
-				value: 'gy-4',
+				label: 'Huge',
+				value: 'gy-10',
 			},
 		];
 	}
@@ -70,8 +70,8 @@
 		return [
 			...cssGridGuttersOptions,
 			{
-				label: 'Medium',
-				value: '1.5rem',
+				label: 'Huge',
+				value: '10rem',
 			},
 		];
 	}