Guten Berg!
diff --git a/packages/e2e-tests/plugins/inner-blocks-templates/index.js b/packages/e2e-tests/plugins/inner-blocks-templates/index.js
index e7a1c53556f7e..a99f486c056d7 100644
--- a/packages/e2e-tests/plugins/inner-blocks-templates/index.js
+++ b/packages/e2e-tests/plugins/inner-blocks-templates/index.js
@@ -1,4 +1,4 @@
-(function () {
+( function () {
var registerBlockType = wp.blocks.registerBlockType;
var createBlock = wp.blocks.createBlock;
var el = wp.element.createElement;
@@ -42,39 +42,39 @@
];
var save = function () {
- return el(InnerBlocks.Content);
+ return el( InnerBlocks.Content );
};
- registerBlockType('test/test-inner-blocks-no-locking', {
+ registerBlockType( 'test/test-inner-blocks-no-locking', {
title: 'Test Inner Blocks no locking',
icon: 'cart',
category: 'text',
- edit: function (props) {
- return el(InnerBlocks, {
+ edit: function ( props ) {
+ return el( InnerBlocks, {
template: TEMPLATE,
- });
+ } );
},
save,
- });
+ } );
- registerBlockType('test/test-inner-blocks-locking-all', {
+ registerBlockType( 'test/test-inner-blocks-locking-all', {
title: 'Test InnerBlocks locking all',
icon: 'cart',
category: 'text',
- edit: function (props) {
- return el(InnerBlocks, {
+ edit: function ( props ) {
+ return el( InnerBlocks, {
template: TEMPLATE,
templateLock: 'all',
- });
+ } );
},
save,
- });
+ } );
- registerBlockType('test/test-inner-blocks-update-locked-template', {
+ registerBlockType( 'test/test-inner-blocks-update-locked-template', {
title: 'Test Inner Blocks update locked template',
icon: 'cart',
category: 'text',
@@ -86,44 +86,45 @@
},
},
- edit: function (props) {
+ edit: function ( props ) {
const hasUpdatedTemplated = props.attributes.hasUpdatedTemplate;
return el(
'div',
null,
[
- el('button', {
- onClick() {
- props.setAttributes({ hasUpdatedTemplate: true })
- }
- }, 'Update template'),
- el(InnerBlocks, {
+ el( 'button', {
+ onClick: function () {
+ props.setAttributes( { hasUpdatedTemplate: true } )
+ },
+ }, 'Update template' ),
+ el( InnerBlocks, {
template: hasUpdatedTemplated ? TEMPLATE_TWO_PARAGRAPHS : TEMPLATE,
templateLock: 'all',
- })
+ } ),
]
);
},
save,
- });
+ } );
- registerBlockType('test/test-inner-blocks-paragraph-placeholder', {
+
+ registerBlockType( 'test/test-inner-blocks-paragraph-placeholder', {
title: 'Test Inner Blocks Paragraph Placeholder',
icon: 'cart',
category: 'text',
- edit: function (props) {
- return el(InnerBlocks, {
+ edit: function ( props ) {
+ return el( InnerBlocks, {
template: TEMPLATE_PARAGRAPH_PLACEHOLDER,
templateInsertUpdatesSelection: true,
- });
+ } );
},
save,
- });
+ } );
- registerBlockType('test/test-inner-blocks-transformer-target', {
+ registerBlockType( 'test/test-inner-blocks-transformer-target', {
title: 'Test Inner Blocks transformer target',
icon: 'cart',
category: 'text',
@@ -138,7 +139,7 @@
'test/test-inner-blocks-locking-all',
'test/test-inner-blocks-paragraph-placeholder',
],
- transform: function (attributes, innerBlocks) {
+ transform: function ( attributes, innerBlocks ) {
return createBlock(
'test/test-inner-blocks-transformer-target',
attributes,
@@ -150,8 +151,8 @@
to: [
{
type: 'block',
- blocks: ['test/i-dont-exist'],
- transform: function (attributes, innerBlocks) {
+ blocks: [ 'test/i-dont-exist' ],
+ transform: function ( attributes, innerBlocks ) {
return createBlock(
'test/test-inner-blocks-transformer-target',
attributes,
@@ -162,12 +163,12 @@
],
},
- edit: function (props) {
- return el(InnerBlocks, {
+ edit: function ( props ) {
+ return el( InnerBlocks, {
template: TEMPLATE,
- });
+ } );
},
save,
- });
-})();
+ } );
+} )();
diff --git a/packages/e2e-tests/specs/editor/blocks/list.test.js b/packages/e2e-tests/specs/editor/blocks/list.test.js
index bba09376edfa6..57d9fc40e7a3f 100644
--- a/packages/e2e-tests/specs/editor/blocks/list.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/list.test.js
@@ -194,7 +194,7 @@ describe( 'List', () => {
await insertBlock( 'List' );
await page.keyboard.type( 'one' );
await page.keyboard.press( 'Enter' );
- await clickBlockToolbarButton( 'Indent list item' );
+ await clickBlockToolbarButton( 'Indent' );
await page.keyboard.type( 'two' );
await transformBlockTo( 'Paragraph' );
@@ -276,7 +276,7 @@ describe( 'List', () => {
await insertBlock( 'List' );
await page.keyboard.type( 'one' );
await page.keyboard.press( 'Enter' );
- await clickBlockToolbarButton( 'Indent list item' );
+ await clickBlockToolbarButton( 'Indent' );
await page.keyboard.type( 'two' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'three' );
@@ -296,7 +296,7 @@ describe( 'List', () => {
it( 'should change the base list type', async () => {
await insertBlock( 'List' );
const button = await page.waitForSelector(
- 'button[aria-label="Convert to ordered list"]'
+ 'button[aria-label="Ordered"]'
);
await button.click();
@@ -310,7 +310,7 @@ describe( 'List', () => {
await pressKeyWithModifier( 'primary', 'm' );
await page.keyboard.type( '1' );
- await clickBlockToolbarButton( 'Convert to ordered list' );
+ await clickBlockToolbarButton( 'Ordered' );
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
diff --git a/packages/e2e-tests/specs/editor/blocks/preformatted.test.js b/packages/e2e-tests/specs/editor/blocks/preformatted.test.js
index 83e6e3383b6cf..7d0fb6abf0891 100644
--- a/packages/e2e-tests/specs/editor/blocks/preformatted.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/preformatted.test.js
@@ -22,12 +22,12 @@ describe( 'Preformatted', () => {
expect( await getEditedPostContent() ).toMatchSnapshot();
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Convert to Blocks' );
// Once it's edited, it should be saved as BR tags.
await page.keyboard.type( '0' );
await page.keyboard.press( 'Enter' );
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Edit as HTML' );
expect( await getEditedPostContent() ).toMatchSnapshot();
diff --git a/packages/e2e-tests/specs/editor/plugins/align-hook.test.js b/packages/e2e-tests/specs/editor/plugins/align-hook.test.js
index 6b0c41ae9115d..59b10cca42810 100644
--- a/packages/e2e-tests/specs/editor/plugins/align-hook.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/align-hook.test.js
@@ -35,7 +35,7 @@ describe( 'Align Hook Works As Expected', () => {
} );
const getAlignmentToolbarLabels = async () => {
- await clickBlockToolbarButton( 'Change alignment' );
+ await clickBlockToolbarButton( 'Align' );
const buttonLabels = await page.evaluate( () => {
return Array.from(
document.querySelectorAll(
@@ -58,7 +58,7 @@ describe( 'Align Hook Works As Expected', () => {
const createDoesNotApplyAlignmentByDefaultTest = ( blockName ) => {
it( 'Does not apply any alignment by default', async () => {
await insertBlock( blockName );
- await clickBlockToolbarButton( 'Change alignment' );
+ await clickBlockToolbarButton( 'Align' );
const pressedButtons = await page.$$(
'.components-dropdown-menu__menu button.is-active'
);
@@ -83,11 +83,11 @@ describe( 'Align Hook Works As Expected', () => {
'.components-dropdown-menu__menu button.is-active';
// set the specified alignment.
await insertBlock( blockName );
- await clickBlockToolbarButton( 'Change alignment' );
+ await clickBlockToolbarButton( 'Align' );
await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click();
// verify the button of the specified alignment is pressed.
- await clickBlockToolbarButton( 'Change alignment' );
+ await clickBlockToolbarButton( 'Align' );
let pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
expect( pressedButtons ).toHaveLength( 1 );
@@ -104,11 +104,11 @@ describe( 'Align Hook Works As Expected', () => {
);
// remove the alignment.
- await clickBlockToolbarButton( 'Change alignment' );
+ await clickBlockToolbarButton( 'Align' );
await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click();
// verify no alignment button is in pressed state.
- await clickBlockToolbarButton( 'Change alignment' );
+ await clickBlockToolbarButton( 'Align' );
pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
expect( pressedButtons ).toHaveLength( 0 );
@@ -124,7 +124,7 @@ describe( 'Align Hook Works As Expected', () => {
);
// verify no alignment button is in pressed state after parsing the block.
- await clickBlockToolbarButton( 'Change alignment' );
+ await clickBlockToolbarButton( 'Align' );
pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR );
expect( pressedButtons ).toHaveLength( 0 );
} );
@@ -135,7 +135,7 @@ describe( 'Align Hook Works As Expected', () => {
it( 'Shows no alignment buttons on the alignment toolbar', async () => {
await insertBlock( BLOCK_NAME );
const CHANGE_ALIGNMENT_BUTTON_SELECTOR =
- '.block-editor-block-toolbar .components-dropdown-menu__toggle[aria-label="Change alignment"]';
+ '.block-editor-block-toolbar .components-dropdown-menu__toggle[aria-label="Align"]';
const changeAlignmentButton = await page.$(
CHANGE_ALIGNMENT_BUTTON_SELECTOR
);
@@ -192,7 +192,7 @@ describe( 'Align Hook Works As Expected', () => {
it( 'Applies the selected alignment by default', async () => {
await insertBlock( BLOCK_NAME );
// verify the correct alignment button is pressed
- await clickBlockToolbarButton( 'Change alignment' );
+ await clickBlockToolbarButton( 'Align' );
const selectedAlignmentControls = await page.$x(
SELECTED_ALIGNMENT_CONTROL_SELECTOR
);
@@ -209,7 +209,7 @@ describe( 'Align Hook Works As Expected', () => {
it( 'Can remove the default alignment and the align attribute equals none but alignnone class is not applied', async () => {
await insertBlock( BLOCK_NAME );
// remove the alignment.
- await clickBlockToolbarButton( 'Change alignment' );
+ await clickBlockToolbarButton( 'Align' );
const [ selectedAlignmentControl ] = await page.$x(
SELECTED_ALIGNMENT_CONTROL_SELECTOR
);
diff --git a/packages/e2e-tests/specs/editor/plugins/annotations.test.js b/packages/e2e-tests/specs/editor/plugins/annotations.test.js
index 14cfbcaa1e7c4..31a3a73893015 100644
--- a/packages/e2e-tests/specs/editor/plugins/annotations.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/annotations.test.js
@@ -11,7 +11,7 @@ import {
} from '@wordpress/e2e-test-utils';
const clickOnBlockSettingsMenuItem = async ( buttonLabel ) => {
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( buttonLabel );
};
diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
index 1eefa0a69ebbf..a9b0181d4e47f 100644
--- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
@@ -39,7 +39,7 @@ describe( 'cpt locking', () => {
'.block-editor-rich-text__editable[data-type="core/paragraph"]',
'p1'
);
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
expect(
await page.$x( '//button/span[contains(text(), "Remove block")]' )
).toHaveLength( 0 );
@@ -171,7 +171,7 @@ describe( 'cpt locking', () => {
'.block-editor-rich-text__editable[data-type="core/paragraph"]',
'p1'
);
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Remove block' );
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
@@ -191,7 +191,7 @@ describe( 'cpt locking', () => {
'.block-editor-rich-text__editable[data-type="core/paragraph"]',
'p1'
);
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Remove block' );
expect( await getEditedPostContent() ).toMatchSnapshot();
diff --git a/packages/e2e-tests/specs/editor/plugins/format-api.test.js b/packages/e2e-tests/specs/editor/plugins/format-api.test.js
index f04fc8834c7cd..e168cc6927bbf 100644
--- a/packages/e2e-tests/specs/editor/plugins/format-api.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/format-api.test.js
@@ -29,7 +29,7 @@ describe( 'Using Format API', () => {
await clickBlockAppender();
await page.keyboard.type( 'First paragraph' );
await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
- await clickBlockToolbarButton( 'More rich text controls' );
+ await clickBlockToolbarButton( 'More' );
await clickButton( 'Custom Link' );
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
diff --git a/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js b/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js
index 6c1017c6d5358..bb9e7980dbc9a 100644
--- a/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js
+++ b/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js
@@ -27,7 +27,7 @@ describe( 'adding inline tokens', () => {
await clickBlockAppender();
await page.keyboard.type( 'a ' );
- await clickBlockToolbarButton( 'More rich text controls' );
+ await clickBlockToolbarButton( 'More' );
await clickButton( 'Inline image' );
// Wait for media modal to appear and upload image.
diff --git a/packages/e2e-tests/specs/editor/various/block-deletion.test.js b/packages/e2e-tests/specs/editor/various/block-deletion.test.js
index 80d9d3a11e19b..00e239eae6959 100644
--- a/packages/e2e-tests/specs/editor/various/block-deletion.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-deletion.test.js
@@ -31,7 +31,7 @@ const addThreeParagraphsToNewPost = async () => {
* see: https://github.com/WordPress/gutenberg/pull/14908#discussion_r284725956
*/
const clickOnBlockSettingsMenuRemoveBlockButton = async () => {
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
let isRemoveButton = false;
diff --git a/packages/e2e-tests/specs/editor/various/block-grouping.test.js b/packages/e2e-tests/specs/editor/various/block-grouping.test.js
index 016d62d6cc68b..b75718fbc24d7 100644
--- a/packages/e2e-tests/specs/editor/various/block-grouping.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-grouping.test.js
@@ -77,7 +77,7 @@ describe( 'Block Grouping', () => {
await pressKeyWithModifier( 'primary', 'a' );
await pressKeyWithModifier( 'primary', 'a' );
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Group' );
expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -90,13 +90,13 @@ describe( 'Block Grouping', () => {
await pressKeyWithModifier( 'primary', 'a' );
// Group
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Group' );
expect( await getEditedPostContent() ).toMatchSnapshot();
// UnGroup
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Ungroup' );
expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -104,7 +104,7 @@ describe( 'Block Grouping', () => {
it( 'does not allow ungrouping a group block that has no children', async () => {
await insertBlock( 'Group' );
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
const ungroupButtons = await page.$x(
'//button/span[text()="Ungroup"]'
);
@@ -141,7 +141,7 @@ describe( 'Block Grouping', () => {
} );
it( 'does not show group option in the options toolbar if Grouping block is disabled', async () => {
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
const blockOptionsDropdownHTML = await page.evaluate(
() =>
@@ -161,7 +161,7 @@ describe( 'Block Grouping', () => {
// Full width image.
await insertBlock( 'Image' );
- await clickBlockToolbarButton( 'Change alignment' );
+ await clickBlockToolbarButton( 'Align' );
const fullButton = await page.waitForXPath(
`//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Full width')]`
);
@@ -172,7 +172,7 @@ describe( 'Block Grouping', () => {
// Wide width image.
await insertBlock( 'Image' );
- await clickBlockToolbarButton( 'Change alignment' );
+ await clickBlockToolbarButton( 'Align' );
const wideButton = await page.waitForXPath(
`//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Wide width')]`
);
@@ -226,7 +226,7 @@ describe( 'Block Grouping', () => {
// Group - this will use whichever Block is registered as the Grouping Block
// as opposed to "transformTo()" which uses whatever is passed to it. To
// ensure this test is meaningful we must rely on what is registered.
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Group' );
expect( await getEditedPostContent() ).toMatchSnapshot();
diff --git a/packages/e2e-tests/specs/editor/various/duplicating-blocks.test.js b/packages/e2e-tests/specs/editor/various/duplicating-blocks.test.js
index 11c95026a8828..587751c414574 100644
--- a/packages/e2e-tests/specs/editor/various/duplicating-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/duplicating-blocks.test.js
@@ -24,7 +24,7 @@ describe( 'Duplicating blocks', () => {
// When the selection was not collapsed
await pressKeyWithModifier( 'primary', 'a' );
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Duplicate' );
expect( await getEditedPostContent() ).toMatchSnapshot();
diff --git a/packages/e2e-tests/specs/editor/various/editor-modes.test.js b/packages/e2e-tests/specs/editor/various/editor-modes.test.js
index 48056ccde4276..01d6137ae8905 100644
--- a/packages/e2e-tests/specs/editor/various/editor-modes.test.js
+++ b/packages/e2e-tests/specs/editor/various/editor-modes.test.js
@@ -32,7 +32,7 @@ describe( 'Editing modes (visual/HTML)', () => {
expect( visualBlock ).toHaveLength( 1 );
// Change editing mode from "Visual" to "HTML".
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Edit as HTML' );
// Wait for the block to be converted to HTML editing mode.
@@ -42,7 +42,7 @@ describe( 'Editing modes (visual/HTML)', () => {
expect( htmlBlock ).toHaveLength( 1 );
// Change editing mode from "HTML" back to "Visual".
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Edit visually' );
// This block should be in "visual" mode by default.
@@ -54,7 +54,7 @@ describe( 'Editing modes (visual/HTML)', () => {
it( 'should display sidebar in HTML mode', async () => {
// Change editing mode from "Visual" to "HTML".
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Edit as HTML' );
// The font size picker for the paragraph block should appear, even in
@@ -67,7 +67,7 @@ describe( 'Editing modes (visual/HTML)', () => {
it( 'should update HTML in HTML mode when sidebar is used', async () => {
// Change editing mode from "Visual" to "HTML".
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Edit as HTML' );
// Make sure the paragraph content is rendered as expected.
diff --git a/packages/e2e-tests/specs/editor/various/invalid-block.test.js b/packages/e2e-tests/specs/editor/various/invalid-block.test.js
index 3313e819d752c..508fc4d4570dc 100644
--- a/packages/e2e-tests/specs/editor/various/invalid-block.test.js
+++ b/packages/e2e-tests/specs/editor/various/invalid-block.test.js
@@ -18,7 +18,7 @@ describe( 'invalid blocks', () => {
await clickBlockAppender();
await page.keyboard.type( 'hello' );
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
// Change to HTML mode and close the options
await clickMenuItem( 'Edit as HTML' );
diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
index 2b092c9b46690..9c45ff7d43a7f 100644
--- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
@@ -43,7 +43,7 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {
const tabThroughBlockToolbar = async () => {
await page.keyboard.press( 'Tab' );
- await expect( await getActiveLabel() ).toBe( 'Change block type or style' );
+ await expect( await getActiveLabel() ).toBe( 'Paragraph' );
await page.keyboard.press( 'ArrowRight' );
await expect( await getActiveLabel() ).toBe( 'Move up' );
@@ -52,7 +52,7 @@ const tabThroughBlockToolbar = async () => {
await expect( await getActiveLabel() ).toBe( 'Move down' );
await page.keyboard.press( 'ArrowRight' );
- await expect( await getActiveLabel() ).toBe( 'Change text alignment' );
+ await expect( await getActiveLabel() ).toBe( 'Align' );
await page.keyboard.press( 'ArrowRight' );
await expect( await getActiveLabel() ).toBe( 'Bold' );
@@ -64,13 +64,13 @@ const tabThroughBlockToolbar = async () => {
await expect( await getActiveLabel() ).toBe( 'Link' );
await page.keyboard.press( 'ArrowRight' );
- await expect( await getActiveLabel() ).toBe( 'More rich text controls' );
+ await expect( await getActiveLabel() ).toBe( 'More' );
await page.keyboard.press( 'ArrowRight' );
- await expect( await getActiveLabel() ).toBe( 'More options' );
+ await expect( await getActiveLabel() ).toBe( 'Options' );
await page.keyboard.press( 'ArrowRight' );
- await expect( await getActiveLabel() ).toBe( 'Change block type or style' );
+ await expect( await getActiveLabel() ).toBe( 'Paragraph' );
};
describe( 'Order of block keyboard navigation', () => {
diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
index bfa098f7f4240..82bfea06b4f34 100644
--- a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
+++ b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
@@ -566,7 +566,7 @@ describe( 'Multi-block selection', () => {
await page.keyboard.type( '2' );
await pressKeyWithModifier( 'primary', 'a' );
await pressKeyWithModifier( 'primary', 'a' );
- await clickBlockToolbarButton( 'Change text alignment' );
+ await clickBlockToolbarButton( 'Align' );
await clickButton( 'Align text center' );
expect( await getEditedPostContent() ).toMatchSnapshot();
diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
index 6cd4b93e93c1d..5a41aec6e7b00 100644
--- a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
@@ -47,7 +47,7 @@ const createReusableBlock = async ( content, title ) => {
await insertBlock( 'Paragraph' );
await page.keyboard.type( content );
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Add to Reusable blocks' );
// Wait for creation to finish
@@ -193,7 +193,7 @@ describe( 'Reusable blocks', () => {
await pressKeyWithModifier( 'primary', 'a' );
// Convert block to a reusable block
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
await clickMenuItem( 'Add to Reusable blocks' );
// Wait for creation to finish
@@ -249,7 +249,7 @@ describe( 'Reusable blocks', () => {
await page.click( blockSelector );
// Delete the block, leaving the reusable block empty
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
const deleteButton = await page.waitForXPath(
'//button/span[text()="Remove block"]'
);
@@ -274,6 +274,24 @@ describe( 'Reusable blocks', () => {
expect( console ).not.toHaveErrored();
} );
+ it( 'Should show a proper message when the reusable block is missing', async () => {
+ // Insert a non-existant reusable block
+ await page.evaluate( () => {
+ const { createBlock } = window.wp.blocks;
+ const { dispatch } = window.wp.data;
+ dispatch( 'core/block-editor' ).resetBlocks( [
+ createBlock( 'core/block', { ref: 123456 } ),
+ ] );
+ } );
+
+ await page.waitForXPath(
+ '//*[contains(@class, "block-editor-warning")]/*[text()="Block has been deleted or is unavailable."]'
+ );
+
+ // This happens when the 404 is returned.
+ expect( console ).toHaveErrored();
+ } );
+
it( 'should be able to insert a reusable block twice', async () => {
await createReusableBlock(
'Awesome Paragraph',
diff --git a/packages/e2e-tests/specs/editor/various/style-variation.test.js b/packages/e2e-tests/specs/editor/various/style-variation.test.js
index 9d070c0d95b43..6bc3606ca2589 100644
--- a/packages/e2e-tests/specs/editor/various/style-variation.test.js
+++ b/packages/e2e-tests/specs/editor/various/style-variation.test.js
@@ -18,7 +18,7 @@ describe( 'adding blocks', () => {
await insertBlock( 'Quote' );
await page.keyboard.type( 'Quote content' );
- await clickBlockToolbarButton( 'Change block type or style' );
+ await clickBlockToolbarButton( 'Quote' );
const styleVariations = await page.$$(
'.block-editor-block-styles__item'
diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
index b31c088352a63..8e61c7951994c 100644
--- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
+++ b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
@@ -20,9 +20,12 @@ async function expectLabelToHaveFocus( label ) {
).toBe( label );
}
-async function testBlockToolbarKeyboardNavigation( currentBlockLabel ) {
+async function testBlockToolbarKeyboardNavigation(
+ currentBlockLabel,
+ currentBlockTitle
+) {
await focusBlockToolbar();
- await expectLabelToHaveFocus( 'Change block type or style' );
+ await expectLabelToHaveFocus( currentBlockTitle );
await page.keyboard.press( 'ArrowRight' );
await expectLabelToHaveFocus( 'Move up' );
await page.keyboard.press( 'Tab' );
@@ -31,21 +34,24 @@ async function testBlockToolbarKeyboardNavigation( currentBlockLabel ) {
await expectLabelToHaveFocus( 'Move up' );
}
-async function wrapCurrentBlockWithGroup() {
- await page.click( '[aria-label="Change block type or style"]' );
+async function wrapCurrentBlockWithGroup( currentBlockTitle ) {
+ await page.click( `[aria-label="${ currentBlockTitle }"]` );
await page.evaluate( () => {
document.querySelector( '.editor-block-list-item-group' ).click();
} );
}
-async function testGroupKeyboardNavigation( currentBlockLabel ) {
+async function testGroupKeyboardNavigation(
+ currentBlockLabel,
+ currentBlockTitle
+) {
await expectLabelToHaveFocus( 'Block: Group' );
await page.keyboard.press( 'Tab' );
await expectLabelToHaveFocus( currentBlockLabel );
await pressKeyWithModifier( 'shift', 'Tab' );
await expectLabelToHaveFocus( 'Select parent (Group)' );
await page.keyboard.press( 'ArrowRight' );
- await expectLabelToHaveFocus( 'Change block type or style' );
+ await expectLabelToHaveFocus( currentBlockTitle );
}
describe( 'Toolbar roving tabindex', () => {
@@ -58,51 +64,60 @@ describe( 'Toolbar roving tabindex', () => {
it( 'ensures paragraph block toolbar uses roving tabindex', async () => {
await insertBlock( 'Paragraph' );
await page.keyboard.type( 'Paragraph' );
- await testBlockToolbarKeyboardNavigation( 'Paragraph block' );
- await wrapCurrentBlockWithGroup();
- await testGroupKeyboardNavigation( 'Paragraph block' );
+ await testBlockToolbarKeyboardNavigation(
+ 'Paragraph block',
+ 'Paragraph'
+ );
+ await wrapCurrentBlockWithGroup( 'Paragraph' );
+ await testGroupKeyboardNavigation( 'Paragraph block', 'Paragraph' );
} );
it( 'ensures heading block toolbar uses roving tabindex', async () => {
await insertBlock( 'Heading' );
await page.keyboard.type( 'Heading' );
- await testBlockToolbarKeyboardNavigation( 'Block: Heading' );
- await wrapCurrentBlockWithGroup();
- await testGroupKeyboardNavigation( 'Block: Heading' );
+ await testBlockToolbarKeyboardNavigation( 'Block: Heading', 'Heading' );
+ await wrapCurrentBlockWithGroup( 'Heading' );
+ await testGroupKeyboardNavigation( 'Block: Heading', 'Heading' );
} );
it( 'ensures list block toolbar uses roving tabindex', async () => {
await insertBlock( 'List' );
await page.keyboard.type( 'List' );
- await testBlockToolbarKeyboardNavigation( 'Block: List' );
- await wrapCurrentBlockWithGroup();
- await testGroupKeyboardNavigation( 'Block: List' );
+ await testBlockToolbarKeyboardNavigation( 'Block: List', 'List' );
+ await wrapCurrentBlockWithGroup( 'List' );
+ await testGroupKeyboardNavigation( 'Block: List', 'List' );
} );
it( 'ensures image block toolbar uses roving tabindex', async () => {
await insertBlock( 'Image' );
- await testBlockToolbarKeyboardNavigation( 'Block: Image' );
- await wrapCurrentBlockWithGroup();
- await testGroupKeyboardNavigation( 'Block: Image' );
+ await testBlockToolbarKeyboardNavigation( 'Block: Image', 'Image' );
+ await wrapCurrentBlockWithGroup( 'Image' );
+ await testGroupKeyboardNavigation( 'Block: Image', 'Image' );
} );
it( 'ensures table block toolbar uses roving tabindex', async () => {
await insertBlock( 'Table' );
- await testBlockToolbarKeyboardNavigation( 'Block: Table' );
+ await testBlockToolbarKeyboardNavigation( 'Block: Table', 'Table' );
// Move focus to the first toolbar item
await page.keyboard.press( 'Home' );
- await expectLabelToHaveFocus( 'Change block type or style' );
+ await expectLabelToHaveFocus( 'Table' );
await page.click( '.blocks-table__placeholder-button' );
- await testBlockToolbarKeyboardNavigation( 'Block: Table' );
- await wrapCurrentBlockWithGroup();
- await testGroupKeyboardNavigation( 'Block: Table' );
+ await testBlockToolbarKeyboardNavigation( 'Block: Table', 'Table' );
+ await wrapCurrentBlockWithGroup( 'Table' );
+ await testGroupKeyboardNavigation( 'Block: Table', 'Table' );
} );
it( 'ensures custom html block toolbar uses roving tabindex', async () => {
await insertBlock( 'Custom HTML' );
- await testBlockToolbarKeyboardNavigation( 'Block: Custom HTML' );
- await wrapCurrentBlockWithGroup();
- await testGroupKeyboardNavigation( 'Block: Custom HTML' );
+ await testBlockToolbarKeyboardNavigation(
+ 'Block: Custom HTML',
+ 'Custom HTML'
+ );
+ await wrapCurrentBlockWithGroup( 'Custom HTML' );
+ await testGroupKeyboardNavigation(
+ 'Block: Custom HTML',
+ 'Custom HTML'
+ );
} );
it( 'ensures block toolbar remembers the last focused item', async () => {
diff --git a/packages/e2e-tests/specs/editor/various/writing-flow.test.js b/packages/e2e-tests/specs/editor/various/writing-flow.test.js
index f7d8b031f2911..eff7ad5c16ff1 100644
--- a/packages/e2e-tests/specs/editor/various/writing-flow.test.js
+++ b/packages/e2e-tests/specs/editor/various/writing-flow.test.js
@@ -586,7 +586,7 @@ describe( 'Writing Flow', () => {
await page.keyboard.press( 'Enter' );
await page.keyboard.type( '/image' );
await page.keyboard.press( 'Enter' );
- await clickBlockToolbarButton( 'Change alignment' );
+ await clickBlockToolbarButton( 'Align' );
await clickButton( 'Wide width' );
await page.keyboard.press( 'ArrowUp' );
diff --git a/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap b/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
index 7c5029a1f7671..a611ece15ba24 100644
--- a/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
+++ b/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
@@ -1,5 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Navigation editor allows creation of a menu 1`] = `
+"
+
+
+
+
+
+"
+`;
+
exports[`Navigation editor displays the first menu from the REST response when at least one menu exists 1`] = `
"
diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
index d96b30bf9bb1a..d3a7bd2851cd7 100644
--- a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
+++ b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
@@ -204,7 +204,7 @@ describe( 'Multi-entity editor states', () => {
// Our custom template shows up in the " templates > all" menu; let's use it.
await clickTemplateItem( [ 'Templates', 'All' ], templateName );
await page.waitForXPath(
- `//p[contains(@class, "edit-site-document-actions__title") and contains(text(), '${ templateName }')]`
+ `//h1[contains(@class, "edit-site-document-actions__title") and contains(text(), '${ templateName }')]`
);
removeErrorMocks();
diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
index 908e26abb436b..ad9f062101b82 100644
--- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js
+++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
@@ -29,6 +29,21 @@ const menusFixture = [
},
];
+const pagesFixture = [
+ {
+ title: 'Home',
+ slug: 'home',
+ },
+ {
+ title: 'About',
+ slug: 'about',
+ },
+ {
+ title: 'Contact',
+ slug: 'contact',
+ },
+];
+
// Matching against variations of the same URL encoded and non-encoded
// produces the most reliable mocking.
const REST_MENUS_ROUTES = [
@@ -39,6 +54,10 @@ const REST_MENU_ITEMS_ROUTES = [
'/__experimental/menu-items',
`rest_route=${ encodeURIComponent( '/__experimental/menu-items' ) }`,
];
+const REST_PAGES_ROUTES = [
+ '/wp/v2/pages',
+ `rest_route=${ encodeURIComponent( '/wp/v2/pages' ) }`,
+];
/**
* Determines if a given URL matches any of a given collection of
@@ -51,38 +70,57 @@ function matchUrlToRoute( reqUrl, routes ) {
return routes.some( ( route ) => reqUrl.includes( route ) );
}
-/**
- * Creates mocked REST API responses for calls to menus and menu-items
- * endpoints.
- * Note: this needs to be within a single call to
- * `setUpResponseMocking` as you can only setup response mocking once per test run.
- *
- * @param {Array} menus menus to provide as mocked responses to menus entity API requests.
- * @param {Array} menuItems menu items to provide as mocked responses to menu-items entity API requests.
- */
-async function mockAllMenusResponses(
- menus = menusFixture,
- menuItems = menuItemsFixture
-) {
- const mappedMenus = menus.length
+function getEndpointMocks( matchingRoutes, responsesByMethod ) {
+ return [ 'GET', 'POST', 'DELETE', 'PUT' ].reduce( ( mocks, restMethod ) => {
+ if ( responsesByMethod[ restMethod ] ) {
+ return [
+ ...mocks,
+ {
+ match: ( request ) =>
+ matchUrlToRoute( request.url(), matchingRoutes ) &&
+ request.method() === restMethod,
+ onRequestMatch: createJSONResponse(
+ responsesByMethod[ restMethod ]
+ ),
+ },
+ ];
+ }
+
+ return mocks;
+ }, [] );
+}
+
+function assignMockMenuIds( menus ) {
+ return menus.length
? menus.map( ( menu, index ) => ( {
...menu,
id: index + 1,
} ) )
: [];
+}
- await setUpResponseMocking( [
- {
- match: ( request ) =>
- matchUrlToRoute( request.url(), REST_MENUS_ROUTES ),
- onRequestMatch: createJSONResponse( mappedMenus ),
+function createMockPages( pages ) {
+ return pages.map( ( { title, slug }, index ) => ( {
+ id: index + 1,
+ type: 'page',
+ link: `https://this/is/a/test/page/${ slug }`,
+ title: {
+ rendered: title,
+ raw: title,
},
- {
- match: ( request ) =>
- matchUrlToRoute( request.url(), REST_MENU_ITEMS_ROUTES ),
- onRequestMatch: createJSONResponse( menuItems ),
- },
- ] );
+ } ) );
+}
+
+function getMenuMocks( responsesByMethod ) {
+ return getEndpointMocks( REST_MENUS_ROUTES, responsesByMethod );
+}
+
+function getMenuItemMocks( responsesByMethod ) {
+ return getEndpointMocks( REST_MENU_ITEMS_ROUTES, responsesByMethod );
+}
+
+function getPagesMocks( responsesByMethod ) {
+ return getEndpointMocks( REST_PAGES_ROUTES, responsesByMethod );
}
async function visitNavigationEditor() {
@@ -100,13 +138,73 @@ async function getSerializedBlocks() {
describe( 'Navigation editor', () => {
useExperimentalFeatures( [ '#gutenberg-navigation' ] );
-
afterEach( async () => {
await setUpResponseMocking( [] );
} );
+ it( 'allows creation of a menu', async () => {
+ const pagesResponse = createMockPages( pagesFixture );
+ const menuResponse = {
+ id: 4,
+ description: '',
+ name: 'Main Menu',
+ slug: 'main-menu',
+ meta: [],
+ auto_add: false,
+ };
+
+ // Initially return nothing from the menu and menuItem endpoints
+ await setUpResponseMocking( [
+ ...getMenuMocks( { GET: [] } ),
+ ...getMenuItemMocks( { GET: [] } ),
+ ...getPagesMocks( { GET: pagesResponse } ),
+ ] );
+ await visitNavigationEditor();
+
+ // Wait for the header to show that no menus are available.
+ await page.waitForXPath( '//h2[contains(., "No menus available")]' );
+
+ // Prepare the menu endpoint for creating a menu.
+ await setUpResponseMocking( [
+ ...getMenuMocks( {
+ GET: [ menuResponse ],
+ POST: menuResponse,
+ } ),
+ ...getMenuItemMocks( { GET: [] } ),
+ ...getPagesMocks( { GET: pagesResponse } ),
+ ] );
+
+ // Add a new menu.
+ const [ addNewButton ] = await page.$x(
+ '//button[contains(., "Add new")]'
+ );
+ await addNewButton.click();
+ await page.keyboard.type( 'Main Menu' );
+ const [ createMenuButton ] = await page.$x(
+ '//button[contains(., "Create menu")]'
+ );
+ await createMenuButton.click();
+
+ // Close the dropdown.
+ await page.keyboard.press( 'Escape' );
+
+ // Select the navigation block and create a block from existing pages.
+ await page.waitForSelector( 'div[aria-label="Block: Navigation"]' );
+ await page.click( 'div[aria-label="Block: Navigation"]' );
+
+ const [ addAllPagesButton ] = await page.$x(
+ '//button[contains(., "Add all pages")]'
+ );
+ await addAllPagesButton.click();
+
+ expect( await getSerializedBlocks() ).toMatchSnapshot();
+ } );
+
it( 'displays the first menu from the REST response when at least one menu exists', async () => {
- await mockAllMenusResponses();
+ await setUpResponseMocking( [
+ ...getMenuMocks( { GET: assignMockMenuIds( menusFixture ) } ),
+ ...getMenuItemMocks( { GET: menuItemsFixture } ),
+ ] );
await visitNavigationEditor();
// Wait for the header to show the menu name.
diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js
index 3fd59b6db0ef2..b46362447a3d7 100644
--- a/packages/e2e-tests/specs/experiments/template-part.test.js
+++ b/packages/e2e-tests/specs/experiments/template-part.test.js
@@ -70,7 +70,7 @@ describe( 'Template Part', () => {
}
async function triggerEllipsisMenuItem( textPrompt ) {
- await clickBlockToolbarButton( 'More options' );
+ await clickBlockToolbarButton( 'Options' );
const button = await page.waitForXPath(
`//span[contains(text(), "${ textPrompt }")]`
);
diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
new file mode 100644
index 0000000000000..0123fab09fe86
--- /dev/null
+++ b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
@@ -0,0 +1,348 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ visitAdminPage,
+ deactivatePlugin,
+ activatePlugin,
+ activateTheme,
+} from '@wordpress/e2e-test-utils';
+
+/**
+ * External dependencies
+ */
+import { groupBy, mapValues } from 'lodash';
+
+/** @typedef {import('puppeteer').ElementHandle} ElementHandle */
+
+describe( 'Widgets screen', () => {
+ beforeEach( async () => {
+ await visitAdminPage( 'themes.php', 'page=gutenberg-widgets' );
+ // Wait for the widget areas to load.
+ await page.waitForSelector(
+ '[aria-label="Block: Widget Area"][role="group"]'
+ );
+ } );
+
+ afterEach( async () => {
+ await cleanupWidgets();
+ } );
+
+ beforeAll( async () => {
+ // TODO: Ideally we can bundle our test theme directly in the repo.
+ await activateTheme( 'twentytwenty' );
+ await deactivatePlugin(
+ 'gutenberg-test-plugin-disables-the-css-animations'
+ );
+ await cleanupWidgets();
+ } );
+
+ afterAll( async () => {
+ await activatePlugin(
+ 'gutenberg-test-plugin-disables-the-css-animations'
+ );
+ await activateTheme( 'twentytwentyone' );
+ } );
+
+ async function getParagraphBlockInGlobalInserter() {
+ await page.click(
+ 'button[aria-pressed="false"][aria-label="Add block"]'
+ );
+
+ const blockLibrary = await page.waitForSelector(
+ '[aria-label="Block Library"][role="region"]'
+ );
+ const [ addParagraphBlock ] = await blockLibrary.$x(
+ '//*[@role="option"][*[text()="Paragraph"]]'
+ );
+
+ return addParagraphBlock;
+ }
+
+ async function expectInsertionPointIndicatorToBeBelowLastBlock(
+ widgetArea
+ ) {
+ const childBlocks = await widgetArea.$$( '[data-block]' );
+ const lastBlock = childBlocks[ childBlocks.length - 1 ];
+ const lastBlockBoundingBox = await lastBlock.boundingBox();
+
+ // TODO: Probably need a more accessible way to select this, maybe a test ID or data attribute.
+ const insertionPointIndicator = await page.$(
+ '.block-editor-block-list__insertion-point-indicator'
+ );
+ const insertionPointIndicatorBoundingBox = await insertionPointIndicator.boundingBox();
+
+ expect(
+ insertionPointIndicatorBoundingBox.y > lastBlockBoundingBox.y
+ ).toBe( true );
+ }
+
+ it( 'Should insert content using the global inserter', async () => {
+ const widgetAreas = await page.$$(
+ '[aria-label="Block: Widget Area"][role="group"]'
+ );
+ const [ firstWidgetArea ] = widgetAreas;
+
+ let addParagraphBlock = await getParagraphBlockInGlobalInserter();
+ await addParagraphBlock.hover();
+
+ // FIXME: The insertion point indicator is not showing when the widget area has no blocks.
+ // await expectInsertionPointIndicatorToBeBelowLastBlock(
+ // firstWidgetArea
+ // );
+
+ await addParagraphBlock.click();
+
+ const addedParagraphBlockInFirstWidgetArea = await firstWidgetArea.$(
+ '[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
+ );
+
+ expect(
+ await addedParagraphBlockInFirstWidgetArea.evaluate(
+ ( node ) => node === document.activeElement
+ )
+ ).toBe( true );
+
+ await page.keyboard.type( 'First Paragraph' );
+
+ addParagraphBlock = await getParagraphBlockInGlobalInserter();
+ await addParagraphBlock.hover();
+
+ await expectInsertionPointIndicatorToBeBelowLastBlock(
+ firstWidgetArea
+ );
+ await addParagraphBlock.click();
+
+ await page.keyboard.type( 'Second Paragraph' );
+
+ /**
+ * FIXME: There seems to have a bug when saving the widgets
+ */
+ // await secondWidgetArea.click();
+
+ // addParagraphBlock = await getParagraphBlockInGlobalInserter();
+ // await addParagraphBlock.hover();
+
+ // // FIXME: The insertion point indicator is not showing when the widget area has no blocks.
+ // // await expectInsertionPointIndicatorToBeBelowLastBlock(
+ // // secondWidgetArea
+ // // );
+
+ // await addParagraphBlock.click();
+
+ // const addedParagraphBlockInSecondWidgetArea = await secondWidgetArea.$(
+ // '[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
+ // );
+
+ // expect(
+ // await addedParagraphBlockInSecondWidgetArea.evaluate(
+ // ( node ) => node === document.activeElement
+ // )
+ // ).toBe( true );
+
+ // await page.keyboard.type( 'Third Paragraph' );
+
+ await saveWidgets();
+ const serializedWidgetAreas = await getSerializedWidgetAreas();
+ expect( serializedWidgetAreas ).toMatchInlineSnapshot( `
+ Object {
+ "sidebar-1": "
+
",
+ }
+ ` );
+ } );
+
+ it( 'Should insert content using the inline inserter', async () => {
+ const firstWidgetArea = await page.$(
+ '[aria-label="Block: Widget Area"][role="group"]'
+ );
+
+ // Scroll to the end of the first widget area.
+ await firstWidgetArea.evaluate( ( node ) =>
+ node.scrollIntoView( { block: 'end' } )
+ );
+
+ const firstWidgetAreaBoundingBox = await firstWidgetArea.boundingBox();
+
+ // Click near the end of the widget area to select it.
+ await page.mouse.click(
+ firstWidgetAreaBoundingBox.x + firstWidgetAreaBoundingBox.width / 2,
+ firstWidgetAreaBoundingBox.y +
+ firstWidgetAreaBoundingBox.height -
+ 10
+ );
+
+ // Aria selectors cannot select buttons with the aria-haspopup property, fallback to CSS selector.
+ const inlineInserterButton = await page.waitForSelector(
+ 'button[aria-label="Add block"][aria-haspopup="true"]'
+ );
+ await inlineInserterButton.click();
+
+ const inlineQuickInserter = await page.waitForSelector(
+ '[aria-label="Blocks"][role="listbox"]'
+ );
+
+ const [ paragraphBlock ] = await inlineQuickInserter.$x(
+ '//*[@role="option"][*[text()="Paragraph"]]'
+ );
+ await paragraphBlock.click();
+
+ const firstParagraphBlock = await firstWidgetArea.$(
+ '[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
+ );
+
+ expect(
+ await firstParagraphBlock.evaluate(
+ ( node ) => node === document.activeElement
+ )
+ ).toBe( true );
+
+ await page.keyboard.type( 'First Paragraph' );
+
+ await page.keyboard.press( 'Enter' );
+ await page.keyboard.type( 'Second Paragraph' );
+
+ const secondParagraphBlock = await page.evaluateHandle(
+ () => document.activeElement
+ );
+ expect( secondParagraphBlock ).not.toBe( firstParagraphBlock );
+
+ const secondParagraphBlockBoundingBox = await secondParagraphBlock.boundingBox();
+
+ // Click outside the block to move the focus back to the widget area.
+ await page.mouse.click(
+ secondParagraphBlockBoundingBox.x +
+ firstWidgetAreaBoundingBox.width / 2,
+ secondParagraphBlockBoundingBox.y +
+ secondParagraphBlockBoundingBox.height +
+ 10
+ );
+
+ // Hover above the last block to trigger the inline inserter between blocks.
+ await page.mouse.move(
+ secondParagraphBlockBoundingBox.x +
+ secondParagraphBlockBoundingBox.width / 2,
+ secondParagraphBlockBoundingBox.y - 10
+ );
+
+ const inserterButton = await page.waitForSelector(
+ 'button[aria-label="Add block"][aria-haspopup="true"]'
+ );
+ await inserterButton.click();
+
+ // TODO: The query should be rewritten with role and label.
+ const inserterSearchBox = await page.waitForSelector(
+ 'input[type="search"][placeholder="Search for a block"]'
+ );
+ expect(
+ await inserterSearchBox.evaluate(
+ ( node ) => node === document.activeElement
+ )
+ ).toBe( true );
+
+ await page.keyboard.type( 'Heading' );
+
+ const inserterListBox = await page.$(
+ '[role="listbox"][aria-label="Blocks"]'
+ );
+ const [ headingBlockOption ] = await inserterListBox.$x(
+ '//*[@role="option"][*[text()="Heading"]]'
+ );
+ await headingBlockOption.click();
+
+ // Get the added heading block as second last block.
+ const addedHeadingBlock = await secondParagraphBlock.evaluateHandle(
+ ( node ) => node.previousSibling
+ );
+
+ expect(
+ await addedHeadingBlock.evaluate(
+ ( node ) => node === document.activeElement
+ )
+ ).toBe( true );
+
+ await page.keyboard.type( 'My Heading' );
+
+ const addedHeadingBlockSnapshot = await page.accessibility.snapshot( {
+ root: addedHeadingBlock,
+ } );
+ expect( addedHeadingBlockSnapshot.name ).toBe( 'Block: Heading' );
+ expect( addedHeadingBlockSnapshot.level ).toBe( 2 );
+ expect( addedHeadingBlockSnapshot.value ).toBe( 'My Heading' );
+
+ await saveWidgets();
+ const serializedWidgetAreas = await getSerializedWidgetAreas();
+ expect( serializedWidgetAreas ).toMatchInlineSnapshot( `
+ Object {
+ "sidebar-1": "
+
+
",
+ }
+ ` );
+ } );
+} );
+
+async function saveWidgets() {
+ const [ updateButton ] = await page.$x( '//button[text()="Update"]' );
+ await updateButton.click();
+
+ await page.waitForXPath( '//*[text()="Widgets saved."]' );
+
+ // FIXME: The snackbar above is enough for the widget areas to get saved,
+ // but not enough for the widgets to get saved.
+ await page.waitForTimeout( 500 );
+}
+
+async function getSerializedWidgetAreas() {
+ const widgets = await page.evaluate( () =>
+ wp.data.select( 'core' ).getWidgets()
+ );
+
+ const serializedWidgetAreas = mapValues(
+ groupBy( widgets, 'sidebar' ),
+ ( sidebarWidgets ) =>
+ sidebarWidgets
+ .map( ( widget ) => widget.rendered )
+ .filter( Boolean )
+ .join( '\n' )
+ );
+
+ return serializedWidgetAreas;
+}
+
+/**
+ * TODO: Deleting widgets in the new widgets screen seems to be unreliable.
+ * We visit the old widgets screen to delete them.
+ * Refactor this to use real interactions in the new widgets screen once the bug is fixed.
+ */
+async function cleanupWidgets() {
+ await visitAdminPage( 'widgets.php' );
+
+ await page.evaluate( () => {
+ const deleteButtons = document.querySelectorAll(
+ '#widgets-right .widget button.widget-control-remove'
+ );
+
+ deleteButtons.forEach( ( deleteButton ) => deleteButton.click() );
+ } );
+
+ await page.click( '#inactive-widgets-control-remove' );
+
+ await page.waitForFunction(
+ () =>
+ document.querySelectorAll( '.widgets-sortables .widget' ).length ===
+ 0
+ );
+ // No idea why we need this, but just asserting the widgets are gone seems to be not enough.
+ await page.waitForTimeout( 500 );
+}
diff --git a/packages/edit-navigation/src/components/layout/use-navigation-block-editor.js b/packages/edit-navigation/src/components/layout/use-navigation-block-editor.js
index e9108b50bbefc..902e77ac22bbd 100644
--- a/packages/edit-navigation/src/components/layout/use-navigation-block-editor.js
+++ b/packages/edit-navigation/src/components/layout/use-navigation-block-editor.js
@@ -21,11 +21,11 @@ export default function useNavigationBlockEditor( post ) {
);
const onChange = useCallback(
- async ( updatedBlocks ) => {
- await _onChange( updatedBlocks );
+ async ( ...args ) => {
+ await _onChange( ...args );
createMissingMenuItems( post );
},
- [ blocks, _onChange ]
+ [ _onChange, post ]
);
return [ blocks, onInput, onChange ];
diff --git a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
index 7dfc100408121..af117caedc07b 100644
--- a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
@@ -68,6 +68,7 @@ exports[`MoreMenu should match snapshot 1`] = `
text="Options"
>