diff --git a/docs/designers-developers/developers/data/data-core-edit-post.md b/docs/designers-developers/developers/data/data-core-edit-post.md index 85e5d162c0bf9..b4e9b7497d9e0 100644 --- a/docs/designers-developers/developers/data/data-core-edit-post.md +++ b/docs/designers-developers/developers/data/data-core-edit-post.md @@ -14,7 +14,7 @@ identify either an editor or plugin sidebar. Examples: -- `edit-post/document` +- `edit-post/block` - `my-plugin/insert-image-sidebar` _Parameters_ diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md index 6b5366797d798..262595ad9f68c 100644 --- a/packages/e2e-test-utils/README.md +++ b/packages/e2e-test-utils/README.md @@ -184,27 +184,7 @@ may appear when navigating away from Gutenberg. Enables Pre-publish checks. -# **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. - -# **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. - -# **findSidebarPanelWithTitle** +# **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`. -# **openDocumentSettingsSidebar** +# **openBlockInspector** + +Clicks on the button in the header which opens the block inspector sidebar when it is closed. + +# **openDocumentSettings** + +Clicks on the button in the header which opens the Document Settings dialog modal. + +# **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. # **openGlobalBlockInserter** diff --git a/packages/e2e-test-utils/src/ensure-sidebar-opened.js b/packages/e2e-test-utils/src/ensure-sidebar-opened.js deleted file mode 100644 index 124a5e28b7ae9..0000000000000 --- a/packages/e2e-test-utils/src/ensure-sidebar-opened.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Verifies that the edit post sidebar is opened, and if it is not, opens it. - * - * @return {Promise} Promise resolving once the edit post sidebar is opened. - */ -export async function ensureSidebarOpened() { - // This try/catch flow relies on the fact that `page.$eval` throws an error - // if the element matching the given selector does not exist. Thus, if an - // error is thrown, it can be inferred that the sidebar is not opened. - try { - return page.$eval( '.edit-post-sidebar', () => {} ); - } catch ( error ) { - return page.click( - '.edit-post-header__settings [aria-label="Settings"]' - ); - } -} diff --git a/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js b/packages/e2e-test-utils/src/find-document-settings-section-with-title.js similarity index 73% rename from packages/e2e-test-utils/src/find-sidebar-panel-with-title.js rename to packages/e2e-test-utils/src/find-document-settings-section-with-title.js index 2b30ccdcb8dc5..fa2b1cd677ad2 100644 --- a/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js +++ b/packages/e2e-test-utils/src/find-document-settings-section-with-title.js @@ -7,8 +7,8 @@ * * @return {Promise} 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 ); } diff --git a/packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js b/packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js deleted file mode 100644 index cf9c2e57b9a83..0000000000000 --- a/packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * External dependencies - */ -import { first } from 'lodash'; - -/** @typedef {import('puppeteer').ElementHandle} ElementHandle */ - -/** - * Finds a sidebar panel with the provided title. - * - * @param {string} panelTitle The name of sidebar panel. - * - * @return {?ElementHandle} Object that represents an in-page DOM element. - */ -export async function findSidebarPanelToggleButtonWithTitle( panelTitle ) { - return first( - await page.$x( - `//div[contains(@class,"edit-post-sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ panelTitle }")]` - ) - ); -} diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js index be50550b24bac..ad722b6c9e793 100644 --- a/packages/e2e-test-utils/src/index.js +++ b/packages/e2e-test-utils/src/index.js @@ -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'; diff --git a/packages/e2e-test-utils/src/open-block-inspector.js b/packages/e2e-test-utils/src/open-block-inspector.js new file mode 100644 index 0000000000000..23c91d6fd645c --- /dev/null +++ b/packages/e2e-test-utils/src/open-block-inspector.js @@ -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(); + } +} diff --git a/packages/e2e-test-utils/src/open-document-settings-section.js b/packages/e2e-test-utils/src/open-document-settings-section.js new file mode 100644 index 0000000000000..aa484b5c549fd --- /dev/null +++ b/packages/e2e-test-utils/src/open-document-settings-section.js @@ -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(); + } +} diff --git a/packages/e2e-test-utils/src/open-document-settings-sidebar.js b/packages/e2e-test-utils/src/open-document-settings-sidebar.js deleted file mode 100644 index ab6f797a4bacc..0000000000000 --- a/packages/e2e-test-utils/src/open-document-settings-sidebar.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Clicks on the button in the header which opens Document Settings sidebar when it is closed. - */ -export async function openDocumentSettingsSidebar() { - const openButton = await page.$( - '.edit-post-header__settings button[aria-label="Settings"][aria-expanded="false"]' - ); - - if ( openButton ) { - await openButton.click(); - } -} diff --git a/packages/e2e-test-utils/src/open-document-settings.js b/packages/e2e-test-utils/src/open-document-settings.js new file mode 100644 index 0000000000000..39b78c07d65e0 --- /dev/null +++ b/packages/e2e-test-utils/src/open-document-settings.js @@ -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(); + } +} diff --git a/packages/e2e-tests/specs/editor/blocks/cover.test.js b/packages/e2e-tests/specs/editor/blocks/cover.test.js index a5be8cbe5b98a..4e1308d649256 100644 --- a/packages/e2e-tests/specs/editor/blocks/cover.test.js +++ b/packages/e2e-tests/specs/editor/blocks/cover.test.js @@ -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' diff --git a/packages/e2e-tests/specs/editor/blocks/image.test.js b/packages/e2e-tests/specs/editor/blocks/image.test.js index ad0adcd998825..46b09ccbc32c5 100644 --- a/packages/e2e-tests/specs/editor/blocks/image.test.js +++ b/packages/e2e-tests/specs/editor/blocks/image.test.js @@ -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( diff --git a/packages/e2e-tests/specs/editor/blocks/table.test.js b/packages/e2e-tests/specs/editor/blocks/table.test.js index c817cece9b2ea..06ae4cdf86804 100644 --- a/packages/e2e-tests/specs/editor/blocks/table.test.js +++ b/packages/e2e-tests/specs/editor/blocks/table.test.js @@ -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 ); diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap index 106d6ff671948..b403372d16899 100644 --- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap +++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap @@ -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`] = `"
(no title)
Sidebar title plugin
"`; diff --git a/packages/e2e-tests/specs/editor/plugins/block-icons.test.js b/packages/e2e-tests/specs/editor/plugins/block-icons.test.js index 7b8376c967981..f7daf15fef0ba 100644 --- a/packages/e2e-tests/specs/editor/plugins/block-icons.test.js +++ b/packages/e2e-tests/specs/editor/plugins/block-icons.test.js @@ -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( diff --git a/packages/e2e-tests/specs/editor/plugins/custom-post-types.test.js b/packages/e2e-tests/specs/editor/plugins/custom-post-types.test.js index fdfa152256a35..812f64acf251a 100644 --- a/packages/e2e-tests/specs/editor/plugins/custom-post-types.test.js +++ b/packages/e2e-tests/specs/editor/plugins/custom-post-types.test.js @@ -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', diff --git a/packages/e2e-tests/specs/editor/plugins/custom-taxonomies.test.js b/packages/e2e-tests/specs/editor/plugins/custom-taxonomies.test.js index 41f15fbb616b2..a363066f80f46 100644 --- a/packages/e2e-tests/specs/editor/plugins/custom-taxonomies.test.js +++ b/packages/e2e-tests/specs/editor/plugins/custom-taxonomies.test.js @@ -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 diff --git a/packages/e2e-tests/specs/editor/plugins/meta-boxes.test.js b/packages/e2e-tests/specs/editor/plugins/meta-boxes.test.js index b7b13a4be08da..9eb8d98481cf7 100644 --- a/packages/e2e-tests/specs/editor/plugins/meta-boxes.test.js +++ b/packages/e2e-tests/specs/editor/plugins/meta-boxes.test.js @@ -3,11 +3,11 @@ */ import { activatePlugin, + clickOnCloseModalButton, createNewPost, deactivatePlugin, - findSidebarPanelToggleButtonWithTitle, insertBlock, - openDocumentSettingsSidebar, + openDocumentSettingsSection, publishPost, saveDraft, } from '@wordpress/e2e-test-utils'; @@ -91,14 +91,8 @@ describe( 'Meta boxes', () => { await page.keyboard.type( 'Excerpt from content.' ); await page.type( '.editor-post-title__input', 'A published post' ); - // Open the excerpt panel - await openDocumentSettingsSidebar(); - const excerptButton = await findSidebarPanelToggleButtonWithTitle( - 'Excerpt' - ); - if ( excerptButton ) { - await excerptButton.click( 'button' ); - } + // Open the excerpt panel. + await openDocumentSettingsSection( 'Excerpt' ); await page.waitForSelector( '.editor-post-excerpt textarea' ); @@ -107,6 +101,9 @@ describe( 'Meta boxes', () => { 'Explicitly set excerpt.' ); + // Close document settings modal. + await clickOnCloseModalButton(); + await publishPost(); // View the post. diff --git a/packages/e2e-tests/specs/editor/plugins/plugins-api.test.js b/packages/e2e-tests/specs/editor/plugins/plugins-api.test.js index 8592722407e9d..e387eb0aad108 100644 --- a/packages/e2e-tests/specs/editor/plugins/plugins-api.test.js +++ b/packages/e2e-tests/specs/editor/plugins/plugins-api.test.js @@ -7,7 +7,7 @@ import { clickOnMoreMenuItem, createNewPost, deactivatePlugin, - openDocumentSettingsSidebar, + openDocumentSettings, openPublishPanel, publishPost, setBrowserViewport, @@ -28,7 +28,7 @@ describe( 'Using Plugins API', () => { describe( 'Post Status Info', () => { it( 'Should render post status info inside Document Setting sidebar', async () => { - await openDocumentSettingsSidebar(); + await openDocumentSettings(); const pluginPostStatusInfoText = await page.$eval( '.edit-post-post-status .my-post-status-info-plugin', @@ -147,10 +147,10 @@ describe( 'Using Plugins API', () => { } ); describe( 'Document Setting Custom Panel', () => { - it( 'Should render a custom panel inside Document Setting sidebar', async () => { - await openDocumentSettingsSidebar(); + it( 'Should render a custom panel inside Document Settings modal', async () => { + await openDocumentSettings(); const pluginDocumentSettingsText = await page.$eval( - '.edit-post-sidebar .my-document-setting-plugin', + '.edit-post-post-settings-modal .my-document-setting-plugin', ( el ) => el.innerText ); expect( pluginDocumentSettingsText ).toMatchSnapshot(); diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js index 1d268e6dc1cc4..5a2a0e598bfbe 100644 --- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js +++ b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js @@ -5,9 +5,9 @@ import { createNewPost, insertBlock, getEditedPostContent, + openBlockInspector, pressKeyTimes, pressKeyWithModifier, - openDocumentSettingsSidebar, } from '@wordpress/e2e-test-utils'; async function openBlockNavigator() { @@ -44,7 +44,7 @@ describe( 'Navigating the block hierarchy', () => { await columnsBlockMenuItem.click(); // Tweak the columns count. - await openDocumentSettingsSidebar(); + await openBlockInspector(); await page.focus( '.block-editor-block-inspector [aria-label="Columns"][type="number"]' ); @@ -75,7 +75,7 @@ describe( 'Navigating the block hierarchy', () => { it( 'should navigate block hierarchy using only the keyboard', async () => { await insertBlock( 'Columns' ); - await openDocumentSettingsSidebar(); + await openBlockInspector(); await page.click( '[aria-label="Two columns; equal split"]' ); // Add a paragraph in the first column. @@ -94,7 +94,7 @@ describe( 'Navigating the block hierarchy', () => { await pressKeyWithModifier( 'ctrl', '`' ); await pressKeyWithModifier( 'ctrl', '`' ); await pressKeyWithModifier( 'ctrl', '`' ); - await pressKeyTimes( 'Tab', 5 ); + await pressKeyTimes( 'Tab', 3 ); // Tweak the columns count by increasing it by one. await page.keyboard.press( 'ArrowRight' ); diff --git a/packages/e2e-tests/specs/editor/various/change-detection.test.js b/packages/e2e-tests/specs/editor/various/change-detection.test.js index 514a7fdd106f1..1613f55795e48 100644 --- a/packages/e2e-tests/specs/editor/various/change-detection.test.js +++ b/packages/e2e-tests/specs/editor/various/change-detection.test.js @@ -3,12 +3,13 @@ */ import { clickBlockAppender, + clickOnCloseModalButton, createNewPost, pressKeyWithModifier, - ensureSidebarOpened, publishPost, saveDraft, - openDocumentSettingsSidebar, + openBlockInspector, + openDocumentSettingsSection, isCurrentURL, } from '@wordpress/e2e-test-utils'; @@ -96,12 +97,12 @@ describe( 'Change detection', () => { await page.type( '.editor-post-title__input', 'Hello World' ); // Toggle post as needing review (not persisted for autosave). - await ensureSidebarOpened(); - + await openDocumentSettingsSection( 'Status & visibility' ); const postPendingReviewButton = ( await page.$x( "//label[contains(text(), 'Pending review')]" ) )[ 0 ]; await postPendingReviewButton.click( 'button' ); + await clickOnCloseModalButton(); // Force autosave to occur immediately. await Promise.all( [ @@ -357,8 +358,10 @@ describe( 'Change detection', () => { ); // Trash post. - await openDocumentSettingsSidebar(); - await page.click( '.editor-post-trash.components-button' ); + await openDocumentSettingsSection( 'Status & visibility' ); + const trashButtonSelector = '.editor-post-trash.components-button'; + await page.waitForSelector( trashButtonSelector ); + await page.click( trashButtonSelector ); await Promise.all( [ // Wait for "Saved" to confirm save complete. @@ -377,10 +380,6 @@ describe( 'Change detection', () => { } ); it( 'consecutive edits to the same attribute should mark the post as dirty after a save', async () => { - // Open the sidebar block settings. - await openDocumentSettingsSidebar(); - await page.click( '.edit-post-sidebar__panel-tab[data-label="Block"]' ); - // Insert a paragraph. await clickBlockAppender(); await page.keyboard.type( 'Hello, World!' ); @@ -391,6 +390,9 @@ describe( 'Change detection', () => { pressKeyWithModifier( 'primary', 'S' ), ] ); + // Open the sidebar block settings. + await openBlockInspector(); + // Increase the paragraph's font size. await page.click( '[data-type="core/paragraph"]' ); await page.click( '.components-font-size-picker__select' ); diff --git a/packages/e2e-tests/specs/editor/various/datepicker.test.js b/packages/e2e-tests/specs/editor/various/datepicker.test.js index 6118f05368ae7..c8d229d33bdfd 100644 --- a/packages/e2e-tests/specs/editor/various/datepicker.test.js +++ b/packages/e2e-tests/specs/editor/various/datepicker.test.js @@ -1,11 +1,12 @@ /** * WordPress dependencies */ -import { createNewPost } from '@wordpress/e2e-test-utils'; +import { createNewPost, openDocumentSettings } from '@wordpress/e2e-test-utils'; describe( 'Datepicker', () => { beforeEach( async () => { await createNewPost(); + await openDocumentSettings(); } ); it( 'should show the publishing date as "Immediately" if the date is not altered', async () => { 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 53c280301316a..12686bbf0f52e 100644 --- a/packages/e2e-tests/specs/editor/various/editor-modes.test.js +++ b/packages/e2e-tests/specs/editor/various/editor-modes.test.js @@ -111,21 +111,12 @@ describe( 'Editing modes (visual/HTML)', () => { expect( title ).toBe( 'Paragraph' ); // The Block inspector should be active - let blockInspectorTab = await page.$( - '.edit-post-sidebar__panel-tab.is-active[data-label="Block"]' - ); - expect( blockInspectorTab ).not.toBeNull(); + const blockInspector = await page.$( '.block-editor-block-inspector' ); + expect( blockInspector ).not.toBeNull(); await switchEditorModeTo( 'Code' ); - // The Block inspector should not be active anymore - blockInspectorTab = await page.$( - '.edit-post-sidebar__panel-tab.is-active[data-label="Block"]' - ); - expect( blockInspectorTab ).toBeNull(); - - // No block is selected - await page.click( '.edit-post-sidebar__panel-tab[data-label="Block"]' ); + // The Block inspector should indicate that no block is selected. const noBlocksElement = await page.$( '.block-editor-block-inspector__no-blocks' ); 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 99a9be8268fe1..e1ce14a1b9328 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 @@ -38,7 +38,7 @@ const tabThroughParagraphBlock = async ( paragraphText ) => { ).toBe( paragraphText ); await page.keyboard.press( 'Tab' ); - await expect( await getActiveLabel() ).toBe( 'Open document settings' ); + await expect( await getActiveLabel() ).toBe( 'Open block inspector' ); }; const tabThroughBlockToolbar = async () => { @@ -131,7 +131,7 @@ describe( 'Order of block keyboard navigation', () => { ); await page.keyboard.press( 'Tab' ); - await expect( await getActiveLabel() ).toBe( 'Open document settings' ); + await expect( await getActiveLabel() ).toBe( 'Open block inspector' ); } ); it( 'allows tabbing in navigation mode if no block is selected (reverse)', async () => { @@ -186,7 +186,7 @@ describe( 'Order of block keyboard navigation', () => { expect( await getActiveLabel() ).toBe( 'Multiple selected blocks' ); await page.keyboard.press( 'Tab' ); - await expect( await getActiveLabel() ).toBe( 'Post' ); + await expect( await getActiveLabel() ).toBe( 'Close block inspector' ); await pressKeyWithModifier( 'shift', 'Tab' ); await expect( await getActiveLabel() ).toBe( diff --git a/packages/e2e-tests/specs/editor/various/new-post-default-content.test.js b/packages/e2e-tests/specs/editor/various/new-post-default-content.test.js index 4c917f265eaf3..b9cf4f70fde5b 100644 --- a/packages/e2e-tests/specs/editor/various/new-post-default-content.test.js +++ b/packages/e2e-tests/specs/editor/various/new-post-default-content.test.js @@ -5,9 +5,8 @@ import { activatePlugin, createNewPost, deactivatePlugin, - findSidebarPanelToggleButtonWithTitle, getEditedPostContent, - openDocumentSettingsSidebar, + openDocumentSettingsSection, } from '@wordpress/e2e-test-utils'; describe( 'new editor filtered state', () => { @@ -32,13 +31,7 @@ describe( 'new editor filtered state', () => { const content = await getEditedPostContent(); // open the sidebar, we want to see the excerpt. - await openDocumentSettingsSidebar(); - const excerptButton = await findSidebarPanelToggleButtonWithTitle( - 'Excerpt' - ); - if ( excerptButton ) { - await excerptButton.click( 'button' ); - } + await openDocumentSettingsSection( 'Excerpt' ); const excerpt = await page.$eval( '.editor-post-excerpt textarea', ( element ) => element.innerHTML diff --git a/packages/e2e-tests/specs/editor/various/new-post.test.js b/packages/e2e-tests/specs/editor/various/new-post.test.js index e8baff2d573fb..16562e218fdb7 100644 --- a/packages/e2e-tests/specs/editor/various/new-post.test.js +++ b/packages/e2e-tests/specs/editor/various/new-post.test.js @@ -5,6 +5,7 @@ import { activatePlugin, createNewPost, deactivatePlugin, + openDocumentSettings, } from '@wordpress/e2e-test-utils'; describe( 'new editor state', () => { @@ -34,6 +35,7 @@ describe( 'new editor state', () => { ); expect( postPreviewButton ).not.toBeNull(); // Should display the Post Formats UI. + await openDocumentSettings(); const postFormatsUi = await page.$( '.editor-post-format' ); expect( postFormatsUi ).not.toBeNull(); } ); diff --git a/packages/e2e-tests/specs/editor/various/post-visibility.test.js b/packages/e2e-tests/specs/editor/various/post-visibility.test.js index 6844b9bd97345..b4170eb4e1ac6 100644 --- a/packages/e2e-tests/specs/editor/various/post-visibility.test.js +++ b/packages/e2e-tests/specs/editor/various/post-visibility.test.js @@ -2,9 +2,10 @@ * WordPress dependencies */ import { + clickOnCloseModalButton, setBrowserViewport, createNewPost, - openDocumentSettingsSidebar, + openDocumentSettings, } from '@wordpress/e2e-test-utils'; describe( 'Post visibility', () => { @@ -17,7 +18,7 @@ describe( 'Post visibility', () => { await createNewPost(); - await openDocumentSettingsSidebar(); + await openDocumentSettings(); await page.click( '.edit-post-post-visibility__toggle' ); @@ -42,7 +43,7 @@ describe( 'Post visibility', () => { // Enter a title for this post. await page.type( '.editor-post-title__input', 'Title' ); - await openDocumentSettingsSidebar(); + await openDocumentSettings(); // Set a publish date for the next month. await page.click( '.edit-post-post-schedule__toggle' ); @@ -60,6 +61,9 @@ describe( 'Post visibility', () => { const [ privateLabel ] = await page.$x( '//label[text()="Private"]' ); await privateLabel.click(); + // Close document settings modal. + await clickOnCloseModalButton(); + // Enter a title for this post. await page.type( '.editor-post-title__input', ' Changed' ); diff --git a/packages/e2e-tests/specs/editor/various/preferences.test.js b/packages/e2e-tests/specs/editor/various/preferences.test.js index 2640d382e74b7..c247cce63ad6e 100644 --- a/packages/e2e-tests/specs/editor/various/preferences.test.js +++ b/packages/e2e-tests/specs/editor/various/preferences.test.js @@ -10,14 +10,14 @@ describe( 'preferences', () => { /** * Returns a promise which resolves to the text content of the active - * editor sidebar tab, or null if there is no active sidebar tab (closed). + * editor sidebar title, or null if there is no active sidebar. * - * @return {Promise} Promise resolving to active tab. + * @return {Promise} Promise resolving to active sidebar title or null. */ - async function getActiveSidebarTabText() { + async function getActiveSidebarTitle() { try { return await page.$eval( - '.edit-post-sidebar__panel-tab.is-active', + '.edit-post-sidebar > .interface-complementary-area-header > strong', ( node ) => node.textContent ); } catch ( error ) { @@ -30,29 +30,17 @@ describe( 'preferences', () => { it( 'remembers sidebar dismissal between sessions', async () => { // Open by default. - expect( await getActiveSidebarTabText() ).toBe( 'Post' ); - - // Change to "Block" tab. - await page.click( '.edit-post-sidebar__panel-tab[aria-label="Block"]' ); - expect( await getActiveSidebarTabText() ).toBe( 'Block' ); - - // Regression test: Reload resets to document tab. - // - // See: https://github.com/WordPress/gutenberg/issues/6377 - // See: https://github.com/WordPress/gutenberg/pull/8995 - await page.reload(); - await page.waitForSelector( '.edit-post-layout' ); - expect( await getActiveSidebarTabText() ).toBe( 'Post' ); + expect( await getActiveSidebarTitle() ).toBe( 'Block inspector' ); // Dismiss await page.click( - '.edit-post-sidebar__panel-tabs [aria-label="Close settings"]' + '.edit-post-sidebar .interface-complementary-area-header [aria-label="Close block inspector"]' ); - expect( await getActiveSidebarTabText() ).toBe( null ); + expect( await getActiveSidebarTitle() ).toBe( null ); // Remember after reload. await page.reload(); await page.waitForSelector( '.edit-post-layout' ); - expect( await getActiveSidebarTabText() ).toBe( null ); + expect( await getActiveSidebarTitle() ).toBe( null ); } ); } ); diff --git a/packages/e2e-tests/specs/editor/various/scheduling.test.js b/packages/e2e-tests/specs/editor/various/scheduling.test.js index 7732f8d8a0e7c..7e115d991f2bb 100644 --- a/packages/e2e-tests/specs/editor/various/scheduling.test.js +++ b/packages/e2e-tests/specs/editor/various/scheduling.test.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { createNewPost } from '@wordpress/e2e-test-utils'; +import { createNewPost, openDocumentSettings } from '@wordpress/e2e-test-utils'; describe( 'Scheduling', () => { beforeEach( createNewPost ); @@ -19,6 +19,7 @@ describe( 'Scheduling', () => { }; it( 'Should keep date time UI focused when the previous and next month buttons are clicked', async () => { + await openDocumentSettings(); await page.click( '.edit-post-post-schedule__toggle' ); await page.click( 'div[aria-label="Move backward to switch to the previous month."]' diff --git a/packages/e2e-tests/specs/editor/various/sidebar-permalink-panel.test.js b/packages/e2e-tests/specs/editor/various/sidebar-permalink-panel.test.js index 35b51001788cd..123fb760c7bdb 100644 --- a/packages/e2e-tests/specs/editor/various/sidebar-permalink-panel.test.js +++ b/packages/e2e-tests/specs/editor/various/sidebar-permalink-panel.test.js @@ -5,7 +5,8 @@ import { activatePlugin, createNewPost, deactivatePlugin, - findSidebarPanelWithTitle, + findDocumentSettingsSectionWithTitle, + openDocumentSettings, publishPost, } from '@wordpress/e2e-test-utils'; @@ -30,6 +31,7 @@ describe( 'Sidebar Permalink Panel', () => { const { removeEditorPanel } = wp.data.dispatch( 'core/edit-post' ); removeEditorPanel( 'post-link' ); } ); + await openDocumentSettings(); expect( await page.$x( permalinkPanelXPath ) ).toEqual( [] ); } ); @@ -39,6 +41,7 @@ describe( 'Sidebar Permalink Panel', () => { await publishPost(); // Start editing again. await page.type( '.editor-post-title__input', ' (Updated)' ); + await openDocumentSettings(); expect( await page.$x( permalinkPanelXPath ) ).toEqual( [] ); } ); @@ -48,6 +51,7 @@ describe( 'Sidebar Permalink Panel', () => { await publishPost(); // Start editing again. await page.type( '.editor-post-title__input', ' (Updated)' ); + await openDocumentSettings(); expect( await page.$x( permalinkPanelXPath ) ).toEqual( [] ); } ); @@ -57,6 +61,9 @@ describe( 'Sidebar Permalink Panel', () => { await publishPost(); // Start editing again. await page.type( '.editor-post-title__input', ' (Updated)' ); - expect( await findSidebarPanelWithTitle( 'Permalink' ) ).toBeDefined(); + await openDocumentSettings(); + expect( + await findDocumentSettingsSectionWithTitle( 'Permalink' ) + ).toBeDefined(); } ); } ); diff --git a/packages/e2e-tests/specs/editor/various/sidebar.test.js b/packages/e2e-tests/specs/editor/various/sidebar.test.js index 2be81eac943e7..cb34312dd3cf9 100644 --- a/packages/e2e-tests/specs/editor/various/sidebar.test.js +++ b/packages/e2e-tests/specs/editor/various/sidebar.test.js @@ -4,50 +4,31 @@ import { clearLocalStorage, createNewPost, - findSidebarPanelWithTitle, + findDocumentSettingsSectionWithTitle, enableFocusLossObservation, disableFocusLossObservation, - openDocumentSettingsSidebar, - pressKeyWithModifier, + openDocumentSettings, setBrowserViewport, } from '@wordpress/e2e-test-utils'; const SIDEBAR_SELECTOR = '.edit-post-sidebar'; -const ACTIVE_SIDEBAR_TAB_SELECTOR = '.edit-post-sidebar__panel-tab.is-active'; -const ACTIVE_SIDEBAR_BUTTON_TEXT = 'Post'; describe( 'Sidebar', () => { afterEach( () => { disableFocusLossObservation(); } ); - it( 'should have sidebar visible at the start with document sidebar active on desktop', async () => { + it( 'should have sidebar visible at the start with block inspector active on desktop', async () => { await setBrowserViewport( 'large' ); await clearLocalStorage(); await createNewPost(); await enableFocusLossObservation(); - const { nodesCount, content, height, width } = await page.$$eval( - ACTIVE_SIDEBAR_TAB_SELECTOR, - ( nodes ) => { - const firstNode = nodes[ 0 ]; - return { - nodesCount: nodes.length, - content: firstNode.innerText, - height: firstNode.offsetHeight, - width: firstNode.offsetWidth, - }; - } - ); - - // should have only one active sidebar tab. - expect( nodesCount ).toBe( 1 ); - - // the active sidebar tab should be document. - expect( content ).toBe( ACTIVE_SIDEBAR_BUTTON_TEXT ); - // the active sidebar tab should be visible - expect( width ).toBeGreaterThan( 10 ); - expect( height ).toBeGreaterThan( 10 ); + // Expect block inspector sidebar to be open. + const blockInspector = await page.$( + '.block-editor-block-inspector__no-blocks' + ); + expect( blockInspector ).not.toBeNull(); } ); it( 'should have the sidebar closed by default on mobile', async () => { @@ -90,49 +71,28 @@ describe( 'Sidebar', () => { await page.waitForSelector( SIDEBAR_SELECTOR ); } ); - it( 'should preserve tab order while changing active tab', async () => { - await createNewPost(); - await enableFocusLossObservation(); - - // Region navigate to Sidebar. - await pressKeyWithModifier( 'ctrl', '`' ); - await pressKeyWithModifier( 'ctrl', '`' ); - await pressKeyWithModifier( 'ctrl', '`' ); - - // Tab lands at first (presumed selected) option "Post". - await page.keyboard.press( 'Tab' ); - const isActiveDocumentTab = await page.evaluate( - () => - document.activeElement.textContent === 'Post' && - document.activeElement.classList.contains( 'is-active' ) - ); - expect( isActiveDocumentTab ).toBe( true ); - - // Tab into and activate "Block". - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Space' ); - const isActiveBlockTab = await page.evaluate( - () => - document.activeElement.textContent === 'Block' && - document.activeElement.classList.contains( 'is-active' ) - ); - expect( isActiveBlockTab ).toBe( true ); - } ); - it( 'should be possible to programmatically remove Document Settings panels', async () => { await createNewPost(); await enableFocusLossObservation(); - await openDocumentSettingsSidebar(); + await openDocumentSettings(); - expect( await findSidebarPanelWithTitle( 'Categories' ) ).toBeDefined(); - expect( await findSidebarPanelWithTitle( 'Tags' ) ).toBeDefined(); expect( - await findSidebarPanelWithTitle( 'Featured image' ) + await findDocumentSettingsSectionWithTitle( 'Categories' ) + ).toBeDefined(); + expect( + await findDocumentSettingsSectionWithTitle( 'Tags' ) + ).toBeDefined(); + expect( + await findDocumentSettingsSectionWithTitle( 'Featured image' ) + ).toBeDefined(); + expect( + await findDocumentSettingsSectionWithTitle( 'Excerpt' ) + ).toBeDefined(); + expect( + await findDocumentSettingsSectionWithTitle( 'Discussion' ) ).toBeDefined(); - expect( await findSidebarPanelWithTitle( 'Excerpt' ) ).toBeDefined(); - expect( await findSidebarPanelWithTitle( 'Discussion' ) ).toBeDefined(); expect( - await findSidebarPanelWithTitle( 'Status & visibility' ) + await findDocumentSettingsSectionWithTitle( 'Status & visibility' ) ).toBeDefined(); await page.evaluate( () => { diff --git a/packages/e2e-tests/specs/editor/various/taxonomies.test.js b/packages/e2e-tests/specs/editor/various/taxonomies.test.js index 2ed1c18d2c361..04212b0a4f7a5 100644 --- a/packages/e2e-tests/specs/editor/various/taxonomies.test.js +++ b/packages/e2e-tests/specs/editor/various/taxonomies.test.js @@ -7,9 +7,10 @@ import { random } from 'lodash'; * WordPress dependencies */ import { + clickOnCloseModalButton, createNewPost, - findSidebarPanelWithTitle, - openDocumentSettingsSidebar, + findDocumentSettingsSectionWithTitle, + openDocumentSettingsSection, publishPost, } from '@wordpress/e2e-test-utils'; @@ -43,7 +44,7 @@ describe( 'Taxonomies', () => { }; const getCurrentTags = async () => { - const tagsPanel = await findSidebarPanelWithTitle( 'Tags' ); + const tagsPanel = await findDocumentSettingsSectionWithTitle( 'Tags' ); return page.evaluate( ( node, selector ) => { return Array.from( node.querySelectorAll( selector ) ).map( @@ -57,19 +58,10 @@ describe( 'Taxonomies', () => { ); }; - const openSidebarPanelWithTitle = async ( title ) => { - const panel = await page.waitForXPath( - `//div[contains(@class,"edit-post-sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ title }")]` - ); - await panel.click(); - }; - it( 'should be able to open the categories panel and create a new main category if the user has the right capabilities', async () => { await createNewPost(); - await openDocumentSettingsSidebar(); - - await openSidebarPanelWithTitle( 'Categories' ); + await openDocumentSettingsSection( 'Categories' ); // If the user has no permission to add a new category finish the test. if ( ! ( await canCreatTermInTaxonomy( 'categories' ) ) ) { @@ -107,6 +99,9 @@ describe( 'Taxonomies', () => { expect( selectedCategories ).toHaveLength( 1 ); expect( selectedCategories[ 0 ] ).toEqual( 'z rand category 1' ); + // Close post settings modal. + await clickOnCloseModalButton(); + // Type something in the title so we can publish the post. await page.type( '.editor-post-title__input', 'Hello World' ); @@ -116,6 +111,8 @@ describe( 'Taxonomies', () => { // Reload the editor. await page.reload(); + await openDocumentSettingsSection( 'Categories' ); + // Wait for the categories to load. await page.waitForSelector( '.editor-post-taxonomies__hierarchical-terms-choice .components-checkbox-control__input:checked' @@ -131,16 +128,14 @@ describe( 'Taxonomies', () => { it( "should be able to create a new tag with ' on the name", async () => { await createNewPost(); - await openDocumentSettingsSidebar(); - - await openSidebarPanelWithTitle( 'Tags' ); + await openDocumentSettingsSection( 'Tags' ); // If the user has no permission to add a new tag finish the test. if ( ! ( await canCreatTermInTaxonomy( 'tags' ) ) ) { return; } - const tagsPanel = await findSidebarPanelWithTitle( 'Tags' ); + const tagsPanel = await findDocumentSettingsSectionWithTitle( 'Tags' ); const tagInput = await tagsPanel.$( '.components-form-token-field__input' ); @@ -165,6 +160,9 @@ describe( 'Taxonomies', () => { expect( tags ).toHaveLength( 1 ); expect( tags[ 0 ] ).toEqual( tagName ); + // Close post settings modal. + await clickOnCloseModalButton(); + // Type something in the title so we can publish the post. await page.type( '.editor-post-title__input', 'Hello World' ); @@ -174,6 +172,8 @@ describe( 'Taxonomies', () => { // Reload the editor. await page.reload(); + await openDocumentSettingsSection( 'Tags' ); + // Wait for the tags to load. await page.waitForSelector( '.components-form-token-field__token' ); @@ -187,9 +187,7 @@ describe( 'Taxonomies', () => { it( 'should be able to open the tags panel and create a new tag if the user has the right capabilities', async () => { await createNewPost(); - await openDocumentSettingsSidebar(); - - await openSidebarPanelWithTitle( 'Tags' ); + await openDocumentSettingsSection( 'Tags' ); // If the user has no permission to add a new tag finish the test. if ( ! ( await canCreatTermInTaxonomy( 'tags' ) ) ) { @@ -199,7 +197,7 @@ describe( 'Taxonomies', () => { // At the start there are no tag tokens expect( await page.$$( TAG_TOKEN_SELECTOR ) ).toHaveLength( 0 ); - const tagsPanel = await findSidebarPanelWithTitle( 'Tags' ); + const tagsPanel = await findDocumentSettingsSectionWithTitle( 'Tags' ); const tagInput = await tagsPanel.$( '.components-form-token-field__input' ); @@ -224,6 +222,9 @@ describe( 'Taxonomies', () => { expect( tags ).toHaveLength( 1 ); expect( tags[ 0 ] ).toEqual( tagName ); + // Close post settings modal. + await clickOnCloseModalButton(); + // Type something in the title so we can publish the post. await page.type( '.editor-post-title__input', 'Hello World' ); @@ -233,6 +234,8 @@ describe( 'Taxonomies', () => { // Reload the editor. await page.reload(); + await openDocumentSettingsSection( 'Tags' ); + // Wait for the tags to load. await page.waitForSelector( '.components-form-token-field__token' ); diff --git a/packages/edit-post/src/components/editor-initialization/listener-hooks.js b/packages/edit-post/src/components/editor-initialization/listener-hooks.js index 91af99219220d..cd4f7ff817e40 100644 --- a/packages/edit-post/src/components/editor-initialization/listener-hooks.js +++ b/packages/edit-post/src/components/editor-initialization/listener-hooks.js @@ -20,13 +20,8 @@ import { * @param {number} postId The current post id. */ export const useBlockSelectionListener = ( postId ) => { - const { hasBlockSelection, isEditorSidebarOpened } = useSelect( - ( select ) => ( { - hasBlockSelection: !! select( - 'core/block-editor' - ).getBlockSelectionStart(), - isEditorSidebarOpened: select( STORE_KEY ).isEditorSidebarOpened(), - } ), + const isEditorSidebarOpened = useSelect( + ( select ) => select( STORE_KEY ).isEditorSidebarOpened(), [ postId ] ); @@ -36,12 +31,8 @@ export const useBlockSelectionListener = ( postId ) => { if ( ! isEditorSidebarOpened ) { return; } - if ( hasBlockSelection ) { - openGeneralSidebar( 'edit-post/block' ); - } else { - openGeneralSidebar( 'edit-post/document' ); - } - }, [ hasBlockSelection, isEditorSidebarOpened ] ); + openGeneralSidebar( 'edit-post/block' ); + }, [ isEditorSidebarOpened ] ); }; /** diff --git a/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js b/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js index df53ba815dd57..06769b55cf544 100644 --- a/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js +++ b/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js @@ -103,7 +103,7 @@ describe( 'listener hook tests', () => { getSpyedFunction( STORE_KEY, 'openGeneralSidebar' ) ).toHaveBeenCalledWith( 'edit-post/block' ); } ); - it( 'opens document sidebar if block is not selected', () => { + it( 'opens block sidebar if block is not selected', () => { setMockReturnValue( STORE_KEY, 'isEditorSidebarOpened', true ); setMockReturnValue( 'core/block-editor', @@ -115,7 +115,7 @@ describe( 'listener hook tests', () => { } ); expect( getSpyedFunction( STORE_KEY, 'openGeneralSidebar' ) - ).toHaveBeenCalledWith( 'edit-post/document' ); + ).toHaveBeenCalledWith( 'edit-post/block' ); } ); } ); diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 631e22db0ca6d..d2240c12d6ae7 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -16,6 +16,7 @@ import FullscreenModeClose from './fullscreen-mode-close'; import HeaderToolbar from './header-toolbar'; import MoreMenu from './more-menu'; import PostPublishButtonOrToggle from './post-publish-button-or-toggle'; +import PostSettingsButton from './post-settings-button'; import { default as DevicePreview } from '../device-preview'; function Header( { setEntitiesSavedStatesCallback } ) { @@ -49,6 +50,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
+ { ! isPublishSidebarOpened && ( // This button isn't completely hidden by the publish sidebar. // We can't hide the whole toolbar when the publish sidebar is open because diff --git a/packages/edit-post/src/components/header/post-settings-button/index.js b/packages/edit-post/src/components/header/post-settings-button/index.js new file mode 100644 index 0000000000000..747eacbe9ed34 --- /dev/null +++ b/packages/edit-post/src/components/header/post-settings-button/index.js @@ -0,0 +1,42 @@ +/** + * WordPress dependencies + */ +import { Button } from '@wordpress/components'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { cog } from '@wordpress/icons'; +import { __, sprintf } from '@wordpress/i18n'; + +export default function PostSettingsButton( { showIconLabels } ) { + const documentLabel = useSelect( ( select ) => { + const currentPostType = select( 'core/editor' ).getCurrentPostType(); + const postType = select( 'core' ).getPostType( currentPostType ); + + return ( + // Disable reason: Post type labels object is shaped like this. + // eslint-disable-next-line camelcase + postType?.labels?.singular_name ?? + // translators: Default label for the Document sidebar tab, not selected. + __( 'Document' ) + ); + }, [] ); + + const { openModal } = useDispatch( 'core/edit-post' ); + + return ( +
) } @@ -284,6 +278,7 @@ function Layout() { next: nextShortcut, } } /> + diff --git a/packages/edit-post/src/components/sidebar/discussion-panel/index.js b/packages/edit-post/src/components/post-settings-modal/discussion-panel/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/discussion-panel/index.js rename to packages/edit-post/src/components/post-settings-modal/discussion-panel/index.js diff --git a/packages/edit-post/src/components/sidebar/featured-image/index.js b/packages/edit-post/src/components/post-settings-modal/featured-image/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/featured-image/index.js rename to packages/edit-post/src/components/post-settings-modal/featured-image/index.js diff --git a/packages/edit-post/src/components/post-settings-modal/index.js b/packages/edit-post/src/components/post-settings-modal/index.js new file mode 100644 index 0000000000000..3d67a6f6aae18 --- /dev/null +++ b/packages/edit-post/src/components/post-settings-modal/index.js @@ -0,0 +1,71 @@ +/** + * WordPress dependencies + */ +import { Modal } from '@wordpress/components'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { __, sprintf } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import PostStatus from './post-status'; +import LastRevision from './last-revision'; +import PostTaxonomies from './post-taxonomies'; +import FeaturedImage from './featured-image'; +import PostExcerpt from './post-excerpt'; +import PostLink from './post-link'; +import DiscussionPanel from './discussion-panel'; +import PageAttributes from './page-attributes'; +import MetaBoxes from '../meta-boxes'; +import PluginDocumentSettingPanel from './plugin-document-setting-panel'; + +const MODAL_NAME = 'edit-post/post-settings'; + +export default function PostSettingsModal() { + const { documentLabel, isModalActive } = useSelect( ( select ) => { + const currentPostType = select( 'core/editor' ).getCurrentPostType(); + const postType = select( 'core' ).getPostType( currentPostType ); + + return { + isModalActive: select( 'core/edit-post' ).isModalActive( + MODAL_NAME + ), + documentLabel: + // Disable reason: Post type labels object is shaped like this. + // eslint-disable-next-line camelcase + postType?.labels?.singular_name ?? + // translators: Default label for the Document sidebar tab, not selected. + __( 'Document' ), + }; + }, [] ); + + const { closeModal } = useDispatch( 'core/edit-post' ); + + if ( ! isModalActive ) { + return null; + } + + return ( + + + + + + + + + + + + + ); +} diff --git a/packages/edit-post/src/components/sidebar/last-revision/index.js b/packages/edit-post/src/components/post-settings-modal/last-revision/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/last-revision/index.js rename to packages/edit-post/src/components/post-settings-modal/last-revision/index.js diff --git a/packages/edit-post/src/components/sidebar/last-revision/style.scss b/packages/edit-post/src/components/post-settings-modal/last-revision/style.scss similarity index 100% rename from packages/edit-post/src/components/sidebar/last-revision/style.scss rename to packages/edit-post/src/components/post-settings-modal/last-revision/style.scss diff --git a/packages/edit-post/src/components/sidebar/page-attributes/index.js b/packages/edit-post/src/components/post-settings-modal/page-attributes/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/page-attributes/index.js rename to packages/edit-post/src/components/post-settings-modal/page-attributes/index.js diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js b/packages/edit-post/src/components/post-settings-modal/plugin-document-setting-panel/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js rename to packages/edit-post/src/components/post-settings-modal/plugin-document-setting-panel/index.js diff --git a/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js b/packages/edit-post/src/components/post-settings-modal/plugin-post-status-info/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js rename to packages/edit-post/src/components/post-settings-modal/plugin-post-status-info/index.js diff --git a/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/post-settings-modal/plugin-post-status-info/test/__snapshots__/index.js.snap similarity index 100% rename from packages/edit-post/src/components/sidebar/plugin-post-status-info/test/__snapshots__/index.js.snap rename to packages/edit-post/src/components/post-settings-modal/plugin-post-status-info/test/__snapshots__/index.js.snap diff --git a/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/index.js b/packages/edit-post/src/components/post-settings-modal/plugin-post-status-info/test/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/plugin-post-status-info/test/index.js rename to packages/edit-post/src/components/post-settings-modal/plugin-post-status-info/test/index.js diff --git a/packages/edit-post/src/components/sidebar/post-author/index.js b/packages/edit-post/src/components/post-settings-modal/post-author/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/post-author/index.js rename to packages/edit-post/src/components/post-settings-modal/post-author/index.js diff --git a/packages/edit-post/src/components/sidebar/post-author/style.scss b/packages/edit-post/src/components/post-settings-modal/post-author/style.scss similarity index 100% rename from packages/edit-post/src/components/sidebar/post-author/style.scss rename to packages/edit-post/src/components/post-settings-modal/post-author/style.scss diff --git a/packages/edit-post/src/components/sidebar/post-excerpt/index.js b/packages/edit-post/src/components/post-settings-modal/post-excerpt/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/post-excerpt/index.js rename to packages/edit-post/src/components/post-settings-modal/post-excerpt/index.js diff --git a/packages/edit-post/src/components/sidebar/post-format/index.js b/packages/edit-post/src/components/post-settings-modal/post-format/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/post-format/index.js rename to packages/edit-post/src/components/post-settings-modal/post-format/index.js diff --git a/packages/edit-post/src/components/sidebar/post-link/index.js b/packages/edit-post/src/components/post-settings-modal/post-link/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/post-link/index.js rename to packages/edit-post/src/components/post-settings-modal/post-link/index.js diff --git a/packages/edit-post/src/components/sidebar/post-link/style.scss b/packages/edit-post/src/components/post-settings-modal/post-link/style.scss similarity index 100% rename from packages/edit-post/src/components/sidebar/post-link/style.scss rename to packages/edit-post/src/components/post-settings-modal/post-link/style.scss diff --git a/packages/edit-post/src/components/sidebar/post-pending-status/index.js b/packages/edit-post/src/components/post-settings-modal/post-pending-status/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/post-pending-status/index.js rename to packages/edit-post/src/components/post-settings-modal/post-pending-status/index.js diff --git a/packages/edit-post/src/components/sidebar/post-schedule/index.js b/packages/edit-post/src/components/post-settings-modal/post-schedule/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/post-schedule/index.js rename to packages/edit-post/src/components/post-settings-modal/post-schedule/index.js diff --git a/packages/edit-post/src/components/sidebar/post-schedule/style.scss b/packages/edit-post/src/components/post-settings-modal/post-schedule/style.scss similarity index 100% rename from packages/edit-post/src/components/sidebar/post-schedule/style.scss rename to packages/edit-post/src/components/post-settings-modal/post-schedule/style.scss diff --git a/packages/edit-post/src/components/sidebar/post-slug/index.js b/packages/edit-post/src/components/post-settings-modal/post-slug/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/post-slug/index.js rename to packages/edit-post/src/components/post-settings-modal/post-slug/index.js diff --git a/packages/edit-post/src/components/sidebar/post-slug/style.scss b/packages/edit-post/src/components/post-settings-modal/post-slug/style.scss similarity index 100% rename from packages/edit-post/src/components/sidebar/post-slug/style.scss rename to packages/edit-post/src/components/post-settings-modal/post-slug/style.scss diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/post-settings-modal/post-status/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/post-status/index.js rename to packages/edit-post/src/components/post-settings-modal/post-status/index.js diff --git a/packages/edit-post/src/components/sidebar/post-status/style.scss b/packages/edit-post/src/components/post-settings-modal/post-status/style.scss similarity index 100% rename from packages/edit-post/src/components/sidebar/post-status/style.scss rename to packages/edit-post/src/components/post-settings-modal/post-status/style.scss diff --git a/packages/edit-post/src/components/sidebar/post-sticky/index.js b/packages/edit-post/src/components/post-settings-modal/post-sticky/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/post-sticky/index.js rename to packages/edit-post/src/components/post-settings-modal/post-sticky/index.js diff --git a/packages/edit-post/src/components/sidebar/post-taxonomies/index.js b/packages/edit-post/src/components/post-settings-modal/post-taxonomies/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/post-taxonomies/index.js rename to packages/edit-post/src/components/post-settings-modal/post-taxonomies/index.js diff --git a/packages/edit-post/src/components/sidebar/post-taxonomies/taxonomy-panel.js b/packages/edit-post/src/components/post-settings-modal/post-taxonomies/taxonomy-panel.js similarity index 100% rename from packages/edit-post/src/components/sidebar/post-taxonomies/taxonomy-panel.js rename to packages/edit-post/src/components/post-settings-modal/post-taxonomies/taxonomy-panel.js diff --git a/packages/edit-post/src/components/sidebar/post-trash/index.js b/packages/edit-post/src/components/post-settings-modal/post-trash/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/post-trash/index.js rename to packages/edit-post/src/components/post-settings-modal/post-trash/index.js diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/post-settings-modal/post-visibility/index.js similarity index 100% rename from packages/edit-post/src/components/sidebar/post-visibility/index.js rename to packages/edit-post/src/components/post-settings-modal/post-visibility/index.js diff --git a/packages/edit-post/src/components/sidebar/post-visibility/style.scss b/packages/edit-post/src/components/post-settings-modal/post-visibility/style.scss similarity index 100% rename from packages/edit-post/src/components/sidebar/post-visibility/style.scss rename to packages/edit-post/src/components/post-settings-modal/post-visibility/style.scss diff --git a/packages/edit-post/src/components/post-settings-modal/style.scss b/packages/edit-post/src/components/post-settings-modal/style.scss new file mode 100644 index 0000000000000..43b83ee9f6204 --- /dev/null +++ b/packages/edit-post/src/components/post-settings-modal/style.scss @@ -0,0 +1,8 @@ +// Get rid of the padding around the accordions, and get rid of the negative +// margins that the modal header normally uses to counter them. +.edit-post-post-settings-modal > .components-modal__content { + padding: 0; +} +.edit-post-post-settings-modal > * > .components-modal__header { + margin: 0; +} diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js deleted file mode 100644 index 6a144d4daeb2b..0000000000000 --- a/packages/edit-post/src/components/sidebar/settings-header/index.js +++ /dev/null @@ -1,71 +0,0 @@ -/** - * WordPress dependencies - */ -import { Button } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; -import { useDispatch, useSelect } from '@wordpress/data'; - -const SettingsHeader = ( { sidebarName } ) => { - const { openGeneralSidebar } = useDispatch( 'core/edit-post' ); - const openDocumentSettings = () => - openGeneralSidebar( 'edit-post/document' ); - const openBlockSettings = () => openGeneralSidebar( 'edit-post/block' ); - - const documentLabel = useSelect( ( select ) => { - const currentPostType = select( 'core/editor' ).getCurrentPostType(); - const postType = select( 'core' ).getPostType( currentPostType ); - - return ( - // Disable reason: Post type labels object is shaped like this. - // eslint-disable-next-line camelcase - postType?.labels?.singular_name ?? - // translators: Default label for the Document sidebar tab, not selected. - __( 'Document' ) - ); - } ); - - const [ documentAriaLabel, documentActiveClass ] = - sidebarName === 'edit-post/document' - ? // translators: ARIA label for the Document sidebar tab, selected. %s: Document label. - [ sprintf( __( '%s (selected)' ), documentLabel ), 'is-active' ] - : [ documentLabel, '' ]; - - const [ blockAriaLabel, blockActiveClass ] = - sidebarName === 'edit-post/block' - ? // translators: ARIA label for the Block Settings Sidebar tab, selected. - [ __( 'Block (selected)' ), 'is-active' ] - : // translators: ARIA label for the Block Settings Sidebar tab, not selected. - [ __( 'Block' ), '' ]; - - /* Use a list so screen readers will announce how many tabs there are. */ - return ( -
    -
  • - -
  • -
  • - -
  • -
- ); -}; - -export default SettingsHeader; diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss deleted file mode 100644 index 64350f954cdc4..0000000000000 --- a/packages/edit-post/src/components/sidebar/settings-header/style.scss +++ /dev/null @@ -1,53 +0,0 @@ -.components-button.edit-post-sidebar__panel-tab { - border-radius: 0; - height: $grid-unit-60; - background: transparent; - border: none; - box-shadow: none; - cursor: pointer; - display: inline-block; - padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode - margin-left: 0; - font-weight: 500; - - // This pseudo-element "duplicates" the tab label and sets the text to bold. - // This ensures that the tab doesn't change width when selected. - // See: https://github.com/WordPress/gutenberg/pull/9793 - &::after { - content: attr(data-label); - display: block; - font-weight: 600; - height: 0; - overflow: hidden; - speak: none; - visibility: hidden; - } - - &.is-active { - // The transparent shadow ensures no jumpiness when focus animates on an active tab. - box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color); - position: relative; - z-index: z-index(".edit-post-sidebar__panel-tab.is-active"); - - // This border appears in Windows High Contrast mode instead of the box-shadow. - &::before { - content: ""; - position: absolute; - top: 0; - bottom: 1px; - right: 0; - left: 0; - border-bottom: $border-width-tab solid transparent; - } - } - - &:focus { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color); - position: relative; - z-index: z-index(".edit-post-sidebar__panel-tab.is-active"); - } - - &.is-active:focus { - box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color); - } -} diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index c4548ba61820b..d940246a42c59 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -2,23 +2,12 @@ * WordPress dependencies */ import { BlockInspector } from '@wordpress/block-editor'; -import { cog } from '@wordpress/icons'; +import { blockDefault } from '@wordpress/icons'; import { Platform } from '@wordpress/element'; /** * Internal dependencies */ -import SettingsHeader from '../settings-header'; -import PostStatus from '../post-status'; -import LastRevision from '../last-revision'; -import PostTaxonomies from '../post-taxonomies'; -import FeaturedImage from '../featured-image'; -import PostExcerpt from '../post-excerpt'; -import PostLink from '../post-link'; -import DiscussionPanel from '../discussion-panel'; -import PageAttributes from '../page-attributes'; -import MetaBoxes from '../../meta-boxes'; -import PluginDocumentSettingPanel from '../plugin-document-setting-panel'; import PluginSidebarEditPost from '../../sidebar/plugin-sidebar'; import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; @@ -29,58 +18,25 @@ const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( { } ); const SettingsSidebar = () => { - const { sidebarName, keyboardShortcut } = useSelect( ( select ) => { - // The settings sidebar is used by the edit-post/document and edit-post/block sidebars. - // sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed. - // If one of the two sidebars is active the component will contain the content of that sidebar. - // When neither of the the two sidebars is active we can not simply return null, because the PluginSidebarEditPost - // component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName - // should contain the sidebar that will be active when the toggle button is pressed. If a block - // is selected, that should be edit-post/block otherwise it's edit-post/document. - let sidebar = select( 'core/interface' ).getActiveComplementaryArea( - 'core/edit-post' - ); - if ( - ! [ 'edit-post/document', 'edit-post/block' ].includes( sidebar ) - ) { - if ( select( 'core/block-editor' ).getBlockSelectionStart() ) { - sidebar = 'edit-post/block'; - } - sidebar = 'edit-post/document'; - } - const shortcut = select( - 'core/keyboard-shortcuts' - ).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ); - return { sidebarName: sidebar, keyboardShortcut: shortcut }; - }, [] ); + const keyboardShortcut = useSelect( + ( select ) => + select( 'core/keyboard-shortcuts' ).getShortcutRepresentation( + 'core/edit-post/toggle-sidebar' + ), + [] + ); return ( } - closeLabel={ __( 'Close settings' ) } - headerClassName="edit-post-sidebar__panel-tabs" - /* translators: button label text should, if possible, be under 16 characters. */ - title={ __( 'Settings' ) } + identifier={ 'edit-post/block' } + title={ __( 'Block inspector' ) } + header={ { __( 'Block inspector' ) } } + closeLabel={ __( 'Close block inspector' ) } toggleShortcut={ keyboardShortcut } - icon={ cog } + icon={ blockDefault } isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT } > - { sidebarName === 'edit-post/document' && ( - <> - - - - - - - - - - - - ) } - { sidebarName === 'edit-post/block' && } + ); }; diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index 2bd1cc75e0751..066a56780b450 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -152,10 +152,10 @@ export function initializeEditor( } export { default as PluginBlockSettingsMenuItem } from './components/block-settings-menu/plugin-block-settings-menu-item'; -export { default as PluginDocumentSettingPanel } from './components/sidebar/plugin-document-setting-panel'; +export { default as PluginDocumentSettingPanel } from './components/post-settings-modal/plugin-document-setting-panel'; export { default as PluginMoreMenuItem } from './components/header/plugin-more-menu-item'; export { default as PluginPostPublishPanel } from './components/sidebar/plugin-post-publish-panel'; -export { default as PluginPostStatusInfo } from './components/sidebar/plugin-post-status-info'; +export { default as PluginPostStatusInfo } from './components/post-settings-modal/plugin-post-status-info'; export { default as PluginPrePublishPanel } from './components/sidebar/plugin-pre-publish-panel'; export { default as PluginSidebar } from './components/sidebar/plugin-sidebar'; export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item'; diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js index 68dcc83671ed0..3147873ddfba7 100644 --- a/packages/edit-post/src/store/selectors.js +++ b/packages/edit-post/src/store/selectors.js @@ -32,10 +32,7 @@ export const isEditorSidebarOpened = createRegistrySelector( const activeGeneralSidebar = select( 'core/interface' ).getActiveComplementaryArea( 'core/edit-post' ); - return includes( - [ 'edit-post/document', 'edit-post/block' ], - activeGeneralSidebar - ); + return activeGeneralSidebar === 'edit-post/block'; } ); @@ -52,10 +49,7 @@ export const isPluginSidebarOpened = createRegistrySelector( ).getActiveComplementaryArea( 'core/edit-post' ); return ( !! activeGeneralSidebar && - ! includes( - [ 'edit-post/document', 'edit-post/block' ], - activeGeneralSidebar - ) + activeGeneralSidebar !== 'edit-post/block' ); } ); @@ -67,7 +61,7 @@ export const isPluginSidebarOpened = createRegistrySelector( * * Examples: * - * - `edit-post/document` + * - `edit-post/block` * - `my-plugin/insert-image-sidebar` * * @param {Object} state Global application state. diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 9f44aab752485..9b1b1faf4fffc 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -7,15 +7,15 @@ @import "./components/layout/style.scss"; @import "./components/manage-blocks-modal/style.scss"; @import "./components/meta-boxes/meta-boxes-area/style.scss"; +@import "./components/post-settings-modal/style.scss"; +@import "./components/post-settings-modal/last-revision/style.scss"; +@import "./components/post-settings-modal/post-author/style.scss"; +@import "./components/post-settings-modal/post-link/style.scss"; +@import "./components/post-settings-modal/post-schedule/style.scss"; +@import "./components/post-settings-modal/post-slug/style.scss"; +@import "./components/post-settings-modal/post-status/style.scss"; +@import "./components/post-settings-modal/post-visibility/style.scss"; @import "./components/sidebar/style.scss"; -@import "./components/sidebar/last-revision/style.scss"; -@import "./components/sidebar/post-author/style.scss"; -@import "./components/sidebar/post-link/style.scss"; -@import "./components/sidebar/post-schedule/style.scss"; -@import "./components/sidebar/post-slug/style.scss"; -@import "./components/sidebar/post-status/style.scss"; -@import "./components/sidebar/post-visibility/style.scss"; -@import "./components/sidebar/settings-header/style.scss"; @import "./components/text-editor/style.scss"; @import "./components/visual-editor/style.scss"; @import "./components/options-modal/style.scss"; diff --git a/packages/interface/README.md b/packages/interface/README.md index 21fc84ab45acf..6d9e0ffa9b428 100644 --- a/packages/interface/README.md +++ b/packages/interface/README.md @@ -12,7 +12,6 @@ npm install @wordpress/interface --save _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ - ## API Usage ### Complementary Areas @@ -24,18 +23,24 @@ This component was named after a [complementatry landmark](https://www.w3.org/TR It is possible to control which complementary is enabled by using the store: Bellow are some examples of how to control the active complementary area using the store: -```js -wp.data.select( 'core/interface' ).getActiveComplementaryArea( 'core/edit-post' ); -// -> "edit-post/document" -wp.data.dispatch( 'core/interface' ).enableComplementaryArea( 'core/edit-post', 'edit-post/block' ); +```js +wp.data + .dispatch( 'core/interface' ) + .enableComplementaryArea( 'core/edit-post', 'edit-post/block' ); -wp.data.select( 'core/interface' ).getActiveComplementaryArea( 'core/edit-post' ); +wp.data + .select( 'core/interface' ) + .getActiveComplementaryArea( 'core/edit-post' ); // -> "edit-post/block" -wp.data.dispatch( 'core/interface' ).disableComplementaryArea( 'core/edit-post' ); +wp.data + .dispatch( 'core/interface' ) + .disableComplementaryArea( 'core/edit-post' ); -wp.data.select( 'core/interface' ).getActiveComplementaryArea( 'core/edit-post' ); +wp.data + .select( 'core/interface' ) + .getActiveComplementaryArea( 'core/edit-post' ); // -> null ```