WordPress · ZebulanStanphill · Sep 16, 2020 · Sep 16, 2020 · Sep 18, 2020
@@ -14,7 +14,7 @@ identify either an editor or plugin sidebar.
 
 Examples:
 
--   `edit-post/document`
+-   `edit-post/block`
 -   `my-plugin/insert-image-sidebar`
 
 _Parameters_

@@ -184,27 +184,7 @@ may appear when navigating away from Gutenberg.
 
 Enables Pre-publish checks.
 
-<a name="ensureSidebarOpened" href="#ensureSidebarOpened">#</a> **ensureSidebarOpened**
-
-Verifies that the edit post sidebar is opened, and if it is not, opens it.
-
-_Returns_
-
--   `Promise`: Promise resolving once the edit post sidebar is opened.
-
-<a name="findSidebarPanelToggleButtonWithTitle" href="#findSidebarPanelToggleButtonWithTitle">#</a> **findSidebarPanelToggleButtonWithTitle**
-
-Finds a sidebar panel with the provided title.
-
-_Parameters_
-
--   _panelTitle_ `string`: The name of sidebar panel.
-
-_Returns_
-
--   `?ElementHandle`: Object that represents an in-page DOM element.
-
-<a name="findSidebarPanelWithTitle" href="#findSidebarPanelWithTitle">#</a> **findSidebarPanelWithTitle**
+<a name="findDocumentSettingsSectionWithTitle" href="#findDocumentSettingsSectionWithTitle">#</a> **findDocumentSettingsSectionWithTitle**
 
 Finds the button responsible for toggling the sidebar panel with the provided title.
 
@@ -389,9 +369,21 @@ _Returns_
 
 -   `Promise`: Promise that uses `mockCheck` to see if a request should be mocked with `mock`, and optionally transforms the response with `responseObjectTransform`.
 
-<a name="openDocumentSettingsSidebar" href="#openDocumentSettingsSidebar">#</a> **openDocumentSettingsSidebar**
+<a name="openBlockInspector" href="#openBlockInspector">#</a> **openBlockInspector**
+
+Clicks on the button in the header which opens the block inspector sidebar when it is closed.
+
+<a name="openDocumentSettings" href="#openDocumentSettings">#</a> **openDocumentSettings**
+
+Clicks on the button in the header which opens the Document Settings dialog modal.
+
+<a name="openDocumentSettingsSection" href="#openDocumentSettingsSection">#</a> **openDocumentSettingsSection**
+
+Opens the document settings section with the provided title.
+
+_Parameters_
 
-Clicks on the button in the header which opens Document Settings sidebar when it is closed.
+-   _sectionTitle_ `string`: The section name.
 
 <a name="openGlobalBlockInserter" href="#openGlobalBlockInserter">#</a> **openGlobalBlockInserter**
 

@@ -7,8 +7,8 @@
  *
  * @return {Promise<ElementHandle|undefined>} Object that represents an in-page DOM element.
  */
-export async function findSidebarPanelWithTitle( panelTitle ) {
-	const panelToggleSelector = `//div[contains(@class, "edit-post-sidebar")]//button[contains(@class, "components-panel__body-toggle") and contains(text(),"${ panelTitle }")]`;
+export async function findDocumentSettingsSectionWithTitle( panelTitle ) {
+	const panelToggleSelector = `//div[contains(@class, "edit-post-post-settings-modal")]//button[contains(@class, "components-panel__body-toggle") and contains(text(),"${ panelTitle }")]`;
 	const panelSelector = `${ panelToggleSelector }/ancestor::*[contains(concat(" ", @class, " "), " components-panel__body ")]`;
 	return await page.waitForXPath( panelSelector );
 }
@@ -13,9 +13,7 @@ export { disablePrePublishChecks } from './disable-pre-publish-checks';
 export { dragAndResize } from './drag-and-resize';
 export { enablePageDialogAccept } from './enable-page-dialog-accept';
 export { enablePrePublishChecks } from './enable-pre-publish-checks';
-export { ensureSidebarOpened } from './ensure-sidebar-opened';
-export { findSidebarPanelToggleButtonWithTitle } from './find-sidebar-panel-toggle-button-with-title';
-export { findSidebarPanelWithTitle } from './find-sidebar-panel-with-title';
+export { findDocumentSettingsSectionWithTitle } from './find-document-settings-section-with-title';
 export { getAllBlockInserterItemTitles } from './get-all-block-inserter-item-titles';
 export { getAllBlocks } from './get-all-blocks';
 export { getAvailableBlockTransforms } from './get-available-block-transforms';
@@ -43,7 +41,9 @@ export {
 	enableFocusLossObservation,
 	disableFocusLossObservation,
 } from './observe-focus-loss';
-export { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
+export { openBlockInspector } from './open-block-inspector';
+export { openDocumentSettings } from './open-document-settings';
+export { openDocumentSettingsSection } from './open-document-settings-section';
 export { openPublishPanel } from './open-publish-panel';
 export { trashAllPosts } from './posts';
 export { pressKeyTimes } from './press-key-times';

@@ -0,0 +1,12 @@
+/**
+ * Clicks on the button in the header which opens the block inspector sidebar when it is closed.
+ */
+export async function openBlockInspector() {
+	const openButton = await page.$(
+		'.edit-post-header__settings button[aria-label="Block inspector"][aria-expanded="false"]'
+	);
+
+	if ( openButton ) {
+		await openButton.click();
+	}
+}
@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import { openDocumentSettings } from './open-document-settings';
+
+/**
+ * Opens the document settings section with the provided title.
+ *
+ * @param {string} sectionTitle The section name.
+ */
+export async function openDocumentSettingsSection( sectionTitle ) {
+	// Open the document settings modal if it isn't already open.
+	await openDocumentSettings();
+
+	const sectionToggle = await page.waitForXPath(
+		`//div[contains(@class,"edit-post-post-settings-modal")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ sectionTitle }")]`
+	);
+
+	const sectionIsCollpased = await sectionToggle.evaluate(
+		( node ) => node.getAttribute( 'aria-expanded' ) === 'false'
+	);
+
+	if ( sectionIsCollpased ) {
+		await sectionToggle.click();
+	}
+}
@@ -0,0 +1,16 @@
+/**
+ * Clicks on the button in the header which opens the Document Settings dialog modal.
+ */
+export async function openDocumentSettings() {
+	const documentSettingsModal = await page.$(
+		'.edit-post-post-settings-modal'
+	);
+
+	// If document settings modal isn't already open, open it.
+	if ( documentSettingsModal === null ) {
+		const postSettingsButton = await page.$(
+			'.edit-post-header__settings .edit-post-post-settings-button'
+		);
+		await postSettingsButton.click();
+	}
+}
@@ -4,7 +4,7 @@
 import {
 	insertBlock,
 	createNewPost,
-	openDocumentSettingsSidebar,
+	openBlockInspector,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Cover', () => {
@@ -17,7 +17,7 @@ describe( 'Cover', () => {
 		// Close the inserter
 		await page.click( '.edit-post-header-toolbar__inserter-toggle' );
 		// Open the sidebar
-		await openDocumentSettingsSidebar();
+		await openBlockInspector();
 		// Choose the first solid color as the background of the cover.
 		await page.click(
 			'.components-circular-option-picker__option-wrapper:first-child button'

@@ -14,7 +14,7 @@ import {
 	getEditedPostContent,
 	createNewPost,
 	clickButton,
-	openDocumentSettingsSidebar,
+	openBlockInspector,
 } from '@wordpress/e2e-test-utils';
 
 async function upload( selector ) {
@@ -62,7 +62,7 @@ describe( 'Image', () => {
 		);
 		expect( await getEditedPostContent() ).toMatch( regex1 );
 
-		await openDocumentSettingsSidebar();
+		await openBlockInspector();
 		await page.click( '[aria-label="Image size presets"] button' );
 
 		const regex2 = new RegExp(

@@ -7,7 +7,7 @@ import {
 	createNewPost,
 	getEditedPostContent,
 	insertBlock,
-	openDocumentSettingsSidebar,
+	openBlockInspector,
 } from '@wordpress/e2e-test-utils';
 
 const createButtonLabel = 'Create Table';
@@ -95,7 +95,7 @@ describe( 'Table', () => {
 
 	it( 'allows header and footer rows to be switched on and off', async () => {
 		await insertBlock( 'Table' );
-		await openDocumentSettingsSidebar();
+		await openBlockInspector();
 
 		const headerSwitchSelector = "//label[text()='Header section']";
 		const footerSwitchSelector = "//label[text()='Footer section']";
@@ -141,7 +141,7 @@ describe( 'Table', () => {
 
 	it( 'allows adding and deleting columns across the table header, body and footer', async () => {
 		await insertBlock( 'Table' );
-		await openDocumentSettingsSidebar();
+		await openBlockInspector();
 
 		// Create the table.
 		await clickButton( createButtonLabel );
@@ -215,7 +215,7 @@ describe( 'Table', () => {
 	// Testing for regressions of https://github.com/WordPress/gutenberg/issues/14904.
 	it( 'allows cells to be selected when the cell area outside of the RichText is clicked', async () => {
 		await insertBlock( 'Table' );
-		await openDocumentSettingsSidebar();
+		await openBlockInspector();
 
 		// Create the table.
 		await clickButton( createButtonLabel );

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Setting sidebar 1`] = `"My Custom Panel"`;
+exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Settings modal 1`] = `"My Custom Panel"`;
 
 exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;
 

@@ -6,9 +6,9 @@ import {
 	createNewPost,
 	deactivatePlugin,
 	insertBlock,
+	openBlockInspector,
 	pressKeyWithModifier,
 	searchForBlock,
-	openDocumentSettingsSidebar,
 } from '@wordpress/e2e-test-utils';
 
 const INSERTER_BUTTON_SELECTOR =
@@ -90,7 +90,7 @@ describe( 'Correctly Renders Block Icons on Inserter and Inspector', () => {
 
 		it( 'Renders correctly the icon on the inspector', async () => {
 			await insertBlock( blockTitle );
-			await openDocumentSettingsSidebar();
+			await openBlockInspector();
 			await selectFirstBlock();
 			validateIcon( await getInnerHTML( INSPECTOR_ICON_SELECTOR ) );
 		} );
@@ -129,7 +129,7 @@ describe( 'Correctly Renders Block Icons on Inserter and Inspector', () => {
 
 		it( 'Renders the icon in the inspector with the correct colors', async () => {
 			await insertBlock( blockTitle );
-			await openDocumentSettingsSidebar();
+			await openBlockInspector();
 			await selectFirstBlock();
 			validateDashIcon( await getInnerHTML( INSPECTOR_ICON_SELECTOR ) );
 			expect(
@@ -156,7 +156,7 @@ describe( 'Correctly Renders Block Icons on Inserter and Inspector', () => {
 
 		it( 'Renders correctly the icon on the inspector', async () => {
 			await insertBlock( blockTitle );
-			await openDocumentSettingsSidebar();
+			await openBlockInspector();
 			await selectFirstBlock();
 			validateSvgIcon( await getInnerHTML( INSPECTOR_ICON_SELECTOR ) );
 			expect(

@@ -3,25 +3,13 @@
  */
 import {
 	activatePlugin,
+	clickOnCloseModalButton,
 	createNewPost,
 	deactivatePlugin,
+	openDocumentSettingsSection,
 	publishPost,
-	findSidebarPanelWithTitle,
 } from '@wordpress/e2e-test-utils';
 
-const openPageAttributesPanel = async () => {
-	const openButton = await findSidebarPanelWithTitle( 'Page Attributes' );
-
-	// Get the classes from the panel
-	const buttonClassName = await (
-		await openButton.getProperty( 'className' )
-	 ).jsonValue();
-
-	// Open the panel if needed.
-	if ( -1 === buttonClassName.indexOf( 'is-opened' ) ) {
-		await openButton.click();
-	}
-};
 const SELECT_OPTION_SELECTOR =
 	'.editor-page-attributes__parent option:nth-child(2)';
 
@@ -42,7 +30,7 @@ describe( 'Test Custom Post Types', () => {
 		await publishPost();
 		// Create a post that is a child of the previously created post.
 		await createNewPost( { postType: 'hierar-no-title' } );
-		await openPageAttributesPanel();
+		await openDocumentSettingsSection( 'Page Attributes' );
 		await page.waitForSelector( SELECT_OPTION_SELECTOR );
 		const optionToSelect = await page.$( SELECT_OPTION_SELECTOR );
 		const valueToSelect = await (
@@ -52,11 +40,14 @@ describe( 'Test Custom Post Types', () => {
 			'.editor-page-attributes__parent select',
 			valueToSelect
 		);
+		// Close document settings modal.
+		await clickOnCloseModalButton();
 		await page.click( '.block-editor-writing-flow' );
 		await page.keyboard.type( 'Child Post' );
 		await publishPost();
 		// Reload the child post and verify it is still correctly selected as a child post.
 		await page.reload();
+		await openDocumentSettingsSection( 'Page Attributes' );
 		await page.waitForSelector( SELECT_OPTION_SELECTOR );
 		const selectedValue = await page.$eval(
 			'.editor-page-attributes__parent select',

@@ -5,8 +5,8 @@ import {
 	activatePlugin,
 	createNewPost,
 	deactivatePlugin,
-	findSidebarPanelWithTitle,
-	openDocumentSettingsSidebar,
+	findDocumentSettingsSectionWithTitle,
+	openDocumentSettings,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Custom Taxonomies labels are used', () => {
@@ -24,9 +24,11 @@ describe( 'Custom Taxonomies labels are used', () => {
 
 	it( 'Ensures the custom taxonomy labels are respected', async () => {
 		// Open the Setting sidebar.
-		await openDocumentSettingsSidebar();
+		await openDocumentSettings();
 
-		const openButton = await findSidebarPanelWithTitle( 'Model' );
+		const openButton = await findDocumentSettingsSectionWithTitle(
+			'Model'
+		);
 		expect( openButton ).not.toBeFalsy();
 
 		// Get the classes from the panel