Skip to content

Release 2.2.0: Fix deprecation warnings / Improve InnerBlocks handling #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
May 3, 2020
Merged

Release 2.2.0: Fix deprecation warnings / Improve InnerBlocks handling #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
20fc220
introduce backwards compatible loading of wp.blockEditor scripts
tschortsch Apr 11, 2020
31e8d80
remove deprecated exceptions in tests
tschortsch Apr 11, 2020
f91b50c
build assets
tschortsch Apr 11, 2020
4561328
document block options in readme
tschortsch Apr 11, 2020
d8a3027
remove eslint-md file
tschortsch Apr 11, 2020
fd08590
improve visibility of row block
tschortsch May 3, 2020
d2900d3
use InnerBlocks ButtonBlockAppender to improve usability
tschortsch May 3, 2020
3593e92
add background to container block on hover to improve visibility
tschortsch May 3, 2020
c93626e
build assets
tschortsch May 3, 2020
ef876e0
update snapshots
tschortsch May 3, 2020
a634f04
make block selectors more specific
tschortsch May 3, 2020
94b1dc3
set version to 2.2.0 / write changelog
tschortsch May 3, 2020
57b8039
update npm dependencies
tschortsch May 3, 2020
b701fe5
build assets
tschortsch May 3, 2020
a786d6e
fix linting errors
tschortsch May 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .wordpress/wp-boostrap-blocks-plugin-assets.sketch
View file
Open in desktop
Binary file not shown.
38 changes: 34 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion build/editor.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/index.asset.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => '55f1fe700a808a0fd1eddc297cdb72fb');
<?php return array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => '8abd10a9ebae5707ce70cf31f11dedee');
2 changes: 1 addition & 1 deletion build/index.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion e2e-tests/button/button-block.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
42 changes: 7 additions & 35 deletions e2e-tests/column/__snapshots__/column-block.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->"
Expand Down
18 changes: 3 additions & 15 deletions e2e-tests/column/__snapshots__/column-filters.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->"
Expand Down
5 changes: 2 additions & 3 deletions e2e-tests/column/column-filters.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
24 changes: 3 additions & 21 deletions e2e-tests/container/__snapshots__/container-block.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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\\"} /-->"`;
16 changes: 2 additions & 14 deletions e2e-tests/container/__snapshots__/container-filters.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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\\"} /-->"`;
42 changes: 7 additions & 35 deletions e2e-tests/row/__snapshots__/row-block.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} /-->

Expand All @@ -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 -->"
Expand Down
12 changes: 2 additions & 10 deletions e2e-tests/row/__snapshots__/row-filters.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->"
`;
5 changes: 2 additions & 3 deletions e2e-tests/row/feature-tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
Loading