Merge pull request #50 from liip/feat/grid-column-template

feat(): Editor stack columns

README.md

@@ -22,6 +22,7 @@ This plugin adds Bootstrap components and layout options as Gutenberg blocks.
 * No Gutters: Disable gutters between columns.
 * Alignment: Horizontal alignment of inner `column` blocks.
 * Vertical Alignment: Vertical alignment of inner `column` blocks.
+* Editor stack columns: Displays stacked columns in the editor to enhance readability of block content.
 
 ### Column
 
@@ -263,6 +264,7 @@ Modify default attributes of the row block.
     * `noGutters` (`boolean`) Defines if noGutters option should be selected or not (Default: `false`)
     * `alignment` (`string`) Default horizontal alignment of inner columns (Default: `''`)
     * `verticalAlignment` (`string`) Default vertical alignment of inner columns (Default: `''`)
+    * `editorStackColumns` (`boolean`) Defines if editorStackColumns option should be selected by default or not (Default: `false`)
 
 #### Usage
 
@@ -274,6 +276,7 @@ function my_row_default_attributes( $default_attributes ) {
     $default_attributes['noGutters'] = true;
     $default_attributes['alignment'] = 'right';
     $default_attributes['verticalAlignment'] = 'bottom';
+    $default_attributes['editorStackColumns'] = true;
     return $default_attributes;
 }
 ```
@@ -575,7 +578,7 @@ The build process is based on the official [`@wordpress/scripts`](https://develo
 
 * `npm start`: Compiles the block in development mode. Watches for any changes and reports back any errors in your code.
 * `npm run lint`: Lints JavaScript, CSS and package.json files.
-* `npm run build`: Use to build production code for your block inside `build` folder.
+* `npm run build`: Build production code of your blocks inside `build` folder.
 
 ### Extract labels
 

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => 'f0982aaa8b56d14daac3110286120612');
+<?php return array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => 'ddc6dbfcc5e8ced2fdbab1f6790b0808');

e2e-tests/plugins/row-filters.php

@@ -36,6 +36,7 @@ function row_filters_default_attributes( $default_attributes ) {
 	$default_attributes['noGutters'] = true;
 	$default_attributes['alignment'] = 'right';
 	$default_attributes['verticalAlignment'] = 'bottom';
+	$default_attributes['editorStackColumns'] = true;
 	return $default_attributes;
 }
 add_filter( 'wp_bootstrap_blocks_row_default_attributes', 'row_filters_default_attributes', 10, 1 );

e2e-tests/row/__snapshots__/row-block.spec.js.snap

@@ -34,6 +34,14 @@ exports[`row block Should be possible to change column layout 2`] = `
 <!-- /wp:wp-bootstrap-blocks/row -->"
 `;
 
+exports[`row block Should be possible to enable column layout in editor 1`] = `
+"<!-- wp:wp-bootstrap-blocks/row {\\"editorStackColumns\\":true} -->
+<!-- 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 select custom template 1`] = `
 "<!-- wp:wp-bootstrap-blocks/row {\\"template\\":\\"custom\\"} -->
 <!-- wp:wp-bootstrap-blocks/column {\\"sizeMd\\":6} /-->

e2e-tests/row/row-block.spec.js

@@ -147,4 +147,18 @@ describe( 'row block', () => {
 		await clickElementByText( 'label', 'No Gutters' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'Should be possible to enable column layout in editor', async () => {
+		await insertRowBlock();
+		await selectRowBlock();
+
+		// Enable editor stack columns
+		await clickElementByText( 'label', 'Editor: Display columns stacked' );
+		expect(
+			await page.$$(
+				'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/row"][data-editor-stack-columns="true"]'
+			)
+		).toHaveLength( 1 );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );

e2e-tests/row/row-filters.spec.js

@@ -79,6 +79,11 @@ describe( 'row block filters', () => {
 		// No Gutters option should be checked
 		expect( await getCheckboxValueByLabel( 'No Gutters' ) ).toBe( true );
 
+		// Editor stack columns option should be checked
+		expect(
+			await getCheckboxValueByLabel( 'Editor: Display columns stacked' )
+		).toBe( true );
+
 		/* TODO fix broken test
 		// Align columns right should be selected
 		expect(