Merge pull request #43 from liip/fix-deprecation-warnings

Release 2.2.0: Fix deprecation warnings / Improve InnerBlocks handling
liip · May 3, 2020 · 6971645 · 6971645
2 parents 0d3a2f4 + a786d6e
commit 6971645
Show file tree

Hide file tree

Showing 36 changed files with 5,124 additions and 2,289 deletions.
diff --git a/.wordpress/wp-boostrap-blocks-plugin-assets.sketch b/.wordpress/wp-boostrap-blocks-plugin-assets.sketch
diff --git a/README.md b/README.md
@@ -4,11 +4,41 @@
 
 This plugin adds Bootstrap components and layout options as Gutenberg blocks.
 
-The following blocks are currently available:
+## Available blocks
 
-* Container
-* Grid (Row / Column)
-* Button
+### Container
+
+#### Options
+
+* Fluid: If enabled the container will use the full available width, spanning the entire width of the viewport.
+* Fluid Breakpoint: Used to enable [responsive containers](https://getbootstrap.com/docs/4.4/layout/overview/#responsive). This feature only work with Bootstrap v4.4+. The container will use 100% of the width until the specified breakpoint is reached, after which the defined max-widths will apply for each of the higher breakpoints.
+* Margin After: Define a margin which should be added after the container.
+
+### Row
+
+#### Options
+
+* Template: Choose from a predefined template for the inner `column` blocks.
+* No Gutters: Disable gutters between columns.
+* Alignment: Horizontal alignment of inner `column` blocks.
+* Vertical Alignment: Vertical alignment of inner `column` blocks.
+
+### Column
+
+#### Options
+
+* Sizes for all breakpoints (xl, lg, md, sm, xs): How much space the column should use for the given breakpoint.
+* Equal width for all breakpoints (xl, lg, md, sm, xs): If enabled column will spread width evenly with other columns.
+* Background Color: Set background color to column.
+* Center content: Center content vertically in column. This option is only needed if a background color is set. Otherwise use the **Alignment** option of the otuer `row` block.
+* Padding: Define padding inside the column.
+
+### Button
+
+#### Options
+
+* Style: Choose the styling of the button.
+* Alignment: Horizontal alignment of the button.
 
 ## Further Information
 

diff --git a/build/editor.css b/build/editor.css
diff --git a/build/index.asset.php b/build/index.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => '55f1fe700a808a0fd1eddc297cdb72fb');
+<?php return array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => '8abd10a9ebae5707ce70cf31f11dedee');
diff --git a/build/index.js b/build/index.js
diff --git a/e2e-tests/button/button-block.spec.js b/e2e-tests/button/button-block.spec.js
@@ -63,7 +63,7 @@ describe( 'button block', () => {
 		await clickButton( 'Align text center' );
 		expect(
 			await page.$(
-				'[data-type="wp-bootstrap-blocks/button"][data-alignment="center"]'
+				'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/button"][data-alignment="center"]'
 			)
 		).not.toBeNull();
 

diff --git a/e2e-tests/column/__snapshots__/column-block.spec.js.snap b/e2e-tests/column/__snapshots__/column-block.spec.js.snap
@@ -2,83 +2,55 @@
 
 exports[`column block Should be possible to change column size 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6,\\"equalWidthLg\\":true} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6,\\"equalWidthLg\\":true} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
 exports[`column block Should be possible to change column size 2`] = `
 "<!-- wp:wp-bootstrap-blocks/row -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeXl\\":2,\\"sizeMd\\":6,\\"equalWidthLg\\":true} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeXl\\":2,\\"sizeMd\\":6,\\"equalWidthLg\\":true} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
 exports[`column block Should be possible to select background color 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6,\\"bgColor\\":\\"secondary\\"} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6,\\"bgColor\\":\\"secondary\\"} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
 exports[`column block Should be possible to select background color 2`] = `
 "<!-- wp:wp-bootstrap-blocks/row -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6,\\"bgColor\\":\\"secondary\\",\\"centerContent\\":true} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6,\\"bgColor\\":\\"secondary\\",\\"centerContent\\":true} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
 exports[`column block Should be possible to select padding 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6,\\"padding\\":\\"p-2\\"} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6,\\"padding\\":\\"p-2\\"} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
 exports[`column block Should reset centerContent if bgColor gets removed 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6,\\"bgColor\\":\\"secondary\\",\\"centerContent\\":true} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6,\\"bgColor\\":\\"secondary\\",\\"centerContent\\":true} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
 exports[`column block Should reset centerContent if bgColor gets removed 2`] = `
 "<!-- wp:wp-bootstrap-blocks/row -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"

diff --git a/e2e-tests/column/__snapshots__/column-filters.spec.js.snap b/e2e-tests/column/__snapshots__/column-filters.spec.js.snap
@@ -2,35 +2,23 @@
 
 exports[`column block filters wp_bootstrap_blocks_column_default_attributes should override default attributes 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
 exports[`column block filters wpBootstrapBlocks.column.bgColorOptions should add background color 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6,\\"bgColor\\":\\"brand\\"} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6,\\"bgColor\\":\\"brand\\"} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
 exports[`column block filters wpBootstrapBlocks.column.paddingOptions should add padding option 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6,\\"padding\\":\\"p-8\\"} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6,\\"padding\\":\\"p-8\\"} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"

diff --git a/e2e-tests/column/column-filters.spec.js b/e2e-tests/column/column-filters.spec.js
@@ -97,10 +97,9 @@ describe( 'column block filters', () => {
 		// Background color should be selected
 		await openSidebarPanelWithTitle( 'Background color' );
 		// There is no way to see which color of a color palette is selected. That's why we check the data attribute value.
-		// TODO since e2e-test-utils 4.x (or WordPress 5.4) the elements list always has one prepended element -> that's why we raise the index by 1 (in this case index 1 instead of 0)
 		const columnData = await getDataValuesOfElement(
-			'[data-type="wp-bootstrap-blocks/column"]',
-			1
+			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/column"]',
+			0
 		);
 		expect( columnData.bgColor ).toMatch( 'primary' );
 		expect(

diff --git a/e2e-tests/container/__snapshots__/container-block.spec.js.snap b/e2e-tests/container/__snapshots__/container-block.spec.js.snap
@@ -1,25 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`container block Container block should be initialized with default attributes 1`] = `
-"<!-- wp:wp-bootstrap-blocks/container -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/container -->"
-`;
+exports[`container block Container block should be initialized with default attributes 1`] = `"<!-- wp:wp-bootstrap-blocks/container /-->"`;
 
-exports[`container block Should be possible to enable fluid option 1`] = `
-"<!-- wp:wp-bootstrap-blocks/container {\\"isFluid\\":true} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/container -->"
-`;
+exports[`container block Should be possible to enable fluid option 1`] = `"<!-- wp:wp-bootstrap-blocks/container {\\"isFluid\\":true} /-->"`;
 
-exports[`container block Should be possible to enable fluid option 2`] = `
-"<!-- wp:wp-bootstrap-blocks/container {\\"isFluid\\":true,\\"fluidBreakpoint\\":\\"lg\\"} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/container -->"
-`;
+exports[`container block Should be possible to enable fluid option 2`] = `"<!-- wp:wp-bootstrap-blocks/container {\\"isFluid\\":true,\\"fluidBreakpoint\\":\\"lg\\"} /-->"`;
diff --git a/e2e-tests/container/__snapshots__/container-filters.spec.js.snap b/e2e-tests/container/__snapshots__/container-filters.spec.js.snap
@@ -1,17 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`container block filters wp_bootstrap_blocks_container_default_attributes should override default attributes 1`] = `
-"<!-- wp:wp-bootstrap-blocks/container -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/container -->"
-`;
+exports[`container block filters wp_bootstrap_blocks_container_default_attributes should override default attributes 1`] = `"<!-- wp:wp-bootstrap-blocks/container /-->"`;
 
-exports[`container block filters wpBootstrapBlocks.container.marginAfterOptions should add margin option 1`] = `
-"<!-- wp:wp-bootstrap-blocks/container {\\"marginAfter\\":\\"mb-8\\"} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/container -->"
-`;
+exports[`container block filters wpBootstrapBlocks.container.marginAfterOptions should add margin option 1`] = `"<!-- wp:wp-bootstrap-blocks/container {\\"marginAfter\\":\\"mb-8\\"} /-->"`;
diff --git a/e2e-tests/row/__snapshots__/row-block.spec.js.snap b/e2e-tests/row/__snapshots__/row-block.spec.js.snap
@@ -2,59 +2,39 @@
 
 exports[`row block Row block should be available 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
 exports[`row block Should be possible to apply row options 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row {\\"noGutters\\":true} -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
 exports[`row block Should be possible to change alignment 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row {\\"alignment\\":\\"right\\"} -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
 exports[`row block Should be possible to change alignment 2`] = `
 "<!-- wp:wp-bootstrap-blocks/row {\\"alignment\\":\\"right\\",\\"verticalAlignment\\":\\"bottom\\"} -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
 exports[`row block Should be possible to change column layout 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row {\\"template\\":\\"1-1-1\\"} -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":4} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":4} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":4} /-->
 
@@ -64,23 +44,15 @@ exports[`row block Should be possible to change column layout 1`] = `
 
 exports[`row block Should be possible to change column layout 2`] = `
 "<!-- wp:wp-bootstrap-blocks/row {\\"template\\":\\"2-1\\"} -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":8} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":8} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":4} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
 exports[`row block Should be possible to select custom template 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row {\\"template\\":\\"custom\\"} -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"

diff --git a/e2e-tests/row/__snapshots__/row-filters.spec.js.snap b/e2e-tests/row/__snapshots__/row-filters.spec.js.snap
@@ -2,22 +2,14 @@
 
 exports[`row block filters wp_bootstrap_blocks_row_default_attributes should override default attributes 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":4} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":4} /-->
 
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":8} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
 exports[`row block filters wpBootstrapBlocks.row.templates should add additional template 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row {\\"template\\":\\"1-66percent\\"} -->
-<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":8} -->
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":8} /-->
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
diff --git a/e2e-tests/row/feature-tests.js b/e2e-tests/row/feature-tests.js
@@ -78,10 +78,9 @@ export const testVersion110ColumnFeatures = async () => {
 	// Background color should be selected
 	await openSidebarPanelWithTitle( 'Background color' );
 	// There is no way to see which color of a color palette is selected. That's why we check the data attribute value of the second column block.
-	// TODO since e2e-test-utils 4.x (or WordPress 5.4) the elements list always has one prepended element -> that's why we raise the index by 1 (in this case index 2 instead of 1)
 	const columnData = await getDataValuesOfElement(
-		'[data-type="wp-bootstrap-blocks/column"]',
-		2
+		'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/column"]',
+		1
 	);
 	expect( columnData.bgColor ).toMatch( 'primary' );
 	expect(