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(