diff --git a/packages/e2e-tests/specs/editor/various/datepicker.test.js b/packages/e2e-tests/specs/editor/various/datepicker.test.js index 129eeb9891274..bdf19f4fa6470 100644 --- a/packages/e2e-tests/specs/editor/various/datepicker.test.js +++ b/packages/e2e-tests/specs/editor/various/datepicker.test.js @@ -1,10 +1,7 @@ /** * WordPress dependencies */ -import { - createNewPost, - findSidebarPanelToggleButtonWithTitle, -} from '@wordpress/e2e-test-utils'; +import { clickButton, createNewPost } from '@wordpress/e2e-test-utils'; describe( 'Datepicker', () => { beforeEach( async () => { @@ -12,11 +9,8 @@ describe( 'Datepicker', () => { } ); it( 'should show the publishing date as "Immediately" if the date is not altered', async () => { - const panelToggle = await findSidebarPanelToggleButtonWithTitle( - 'Publish:' - ); - const publishDate = await panelToggle.$eval( - '.editor-post-publish-panel__link', + const publishDate = await page.$eval( + '.edit-post-post-schedule__current-value', ( publishDateSpan ) => publishDateSpan.textContent ); @@ -25,20 +19,17 @@ describe( 'Datepicker', () => { it( 'should show the publishing date if the date is in the past', async () => { // Open the datepicker. - const panelToggle = await findSidebarPanelToggleButtonWithTitle( - 'Publish:' - ); - await panelToggle.click(); + await clickButton( 'Edit publish date' ); // Change the publishing date to a year in the past. await page.click( '.components-datetime__time-field-year' ); await page.keyboard.press( 'ArrowDown' ); // Close the datepicker. - await panelToggle.click(); + await clickButton( 'Edit publish date' ); - const publishDate = await panelToggle.$eval( - '.editor-post-publish-panel__link', + const publishDate = await page.$eval( + '.edit-post-post-schedule__current-value', ( publishDateSpan ) => publishDateSpan.textContent ); @@ -49,20 +40,17 @@ describe( 'Datepicker', () => { it( 'should show the publishing date if the date is in the future', async () => { // Open the datepicker. - const panelToggle = await findSidebarPanelToggleButtonWithTitle( - 'Publish:' - ); - await panelToggle.click(); + await clickButton( 'Edit publish date' ); // Change the publishing date to a year in the future. await page.click( '.components-datetime__time-field-year' ); await page.keyboard.press( 'ArrowUp' ); // Close the datepicker. - await panelToggle.click(); + await clickButton( 'Edit publish date' ); - const publishDate = await panelToggle.$eval( - '.editor-post-publish-panel__link', + const publishDate = await page.$eval( + '.edit-post-post-schedule__current-value', ( publishDateSpan ) => publishDateSpan.textContent ); @@ -75,26 +63,23 @@ describe( 'Datepicker', () => { it( 'should show the publishing date as "Immediately" if the date is cleared', async () => { // Open the datepicker. - const panelToggle = await findSidebarPanelToggleButtonWithTitle( - 'Publish:' - ); - await panelToggle.click(); + await clickButton( 'Edit publish date' ); // Change the publishing date to a year in the future. await page.click( '.components-datetime__time-field-year' ); await page.keyboard.press( 'ArrowUp' ); // Close the datepicker. - await panelToggle.click(); + await clickButton( 'Edit publish date' ); // Open the datepicker. - await panelToggle.click(); + await clickButton( 'Edit publish date' ); // Clear the date. await page.click( '.components-datetime__date-reset-button' ); - const publishDate = await panelToggle.$eval( - '.editor-post-publish-panel__link', + const publishDate = await page.$eval( + '.edit-post-post-schedule__current-value', ( publishDateSpan ) => publishDateSpan.textContent ); 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 2675629ce1d83..95deac796a3e5 100644 --- a/packages/e2e-tests/specs/editor/various/post-visibility.test.js +++ b/packages/e2e-tests/specs/editor/various/post-visibility.test.js @@ -2,10 +2,10 @@ * WordPress dependencies */ import { + clickButton, setBrowserViewport, createNewPost, openDocumentSettingsSidebar, - openSidebarPanel, } from '@wordpress/e2e-test-utils'; describe( 'Post visibility', () => { @@ -20,7 +20,7 @@ describe( 'Post visibility', () => { await openDocumentSettingsSidebar(); - await openSidebarPanel( 'Visibility:' ); + await clickButton( 'Edit visibility' ); const [ privateLabel ] = await page.$x( '//label[text()="Private"]' @@ -46,7 +46,7 @@ describe( 'Post visibility', () => { await openDocumentSettingsSidebar(); // Set a publish date for the next month. - await openSidebarPanel( 'Publish' ); + await clickButton( 'Edit publish date' ); await page.click( 'div[aria-label="Move forward to switch to the next month."]' ); @@ -56,7 +56,7 @@ describe( 'Post visibility', () => { ) )[ 0 ].click(); - await openSidebarPanel( 'Visibility:' ); + await clickButton( 'Edit visibility' ); const [ privateLabel ] = await page.$x( '//label[text()="Private"]' ); await privateLabel.click(); diff --git a/packages/e2e-tests/specs/editor/various/scheduling.test.js b/packages/e2e-tests/specs/editor/various/scheduling.test.js index 36165ced76779..dec5fcdb7195a 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, openSidebarPanel } from '@wordpress/e2e-test-utils'; +import { clickButton, createNewPost } from '@wordpress/e2e-test-utils'; describe( 'Scheduling', () => { beforeEach( createNewPost ); @@ -19,7 +19,7 @@ describe( 'Scheduling', () => { }; it( 'Should keep date time UI focused when the previous and next month buttons are clicked', async () => { - await openSidebarPanel( 'Publish:' ); + await clickButton( 'Edit publish date' ); await page.click( 'div[aria-label="Move backward to switch to the previous month."]' ); diff --git a/packages/e2e-tests/specs/editor/various/sidebar.test.js b/packages/e2e-tests/specs/editor/various/sidebar.test.js index b4e13cb068751..8d263ad8f7600 100644 --- a/packages/e2e-tests/specs/editor/various/sidebar.test.js +++ b/packages/e2e-tests/specs/editor/various/sidebar.test.js @@ -128,11 +128,9 @@ describe( 'Sidebar', () => { await enableFocusLossObservation(); await openDocumentSettingsSidebar(); - expect( await findSidebarPanelWithTitle( 'General' ) ).toBeDefined(); expect( - await findSidebarPanelWithTitle( 'Visibility:' ) + await findSidebarPanelWithTitle( 'Status & visibility' ) ).toBeDefined(); - expect( await findSidebarPanelWithTitle( 'Publish:' ) ).toBeDefined(); expect( await findSidebarPanelWithTitle( 'Post Format' ) ).toBeDefined(); @@ -148,8 +146,6 @@ describe( 'Sidebar', () => { const { removeEditorPanel } = wp.data.dispatch( 'core/edit-post' ); removeEditorPanel( 'post-status' ); - removeEditorPanel( 'visibility' ); - removeEditorPanel( 'schedule' ); removeEditorPanel( 'post-format' ); removeEditorPanel( 'taxonomy-panel-category' ); removeEditorPanel( 'taxonomy-panel-post_tag' ); @@ -162,15 +158,9 @@ describe( 'Sidebar', () => { return `//div[contains(@class, "edit-post-sidebar")]//button[contains(@class, "components-panel__body-toggle") and contains(text(),"${ panelTitle }")]`; }; - expect( await page.$x( getPanelToggleSelector( 'General' ) ) ).toEqual( - [] - ); expect( - await page.$x( getPanelToggleSelector( 'Visibility:' ) ) + await page.$x( getPanelToggleSelector( 'Status & visibility' ) ) ).toEqual( [] ); - expect( await page.$x( getPanelToggleSelector( 'Publish:' ) ) ).toEqual( - [] - ); expect( await page.$x( getPanelToggleSelector( 'Post Format' ) ) ).toEqual( [] ); diff --git a/packages/edit-post/src/components/sidebar/post-schedule/index.js b/packages/edit-post/src/components/sidebar/post-schedule/index.js index 72e7ffd866100..595d7157cfe9e 100644 --- a/packages/edit-post/src/components/sidebar/post-schedule/index.js +++ b/packages/edit-post/src/components/sidebar/post-schedule/index.js @@ -1,8 +1,7 @@ /** * WordPress dependencies */ -import { PanelBody } from '@wordpress/components'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { Button, Dropdown, PanelRow } from '@wordpress/components'; import { PostSchedule as PostScheduleForm, PostScheduleCheck, @@ -10,48 +9,31 @@ import { } from '@wordpress/editor'; import { __ } from '@wordpress/i18n'; -const PANEL_NAME = 'schedule'; - export default function PostSchedule() { - const { isOpened, isRemoved } = useSelect( ( select ) => { - // We use isEditorPanelRemoved to hide the panel if it was - // programatically removed. We don't use isEditorPanelEnabled since - // this panel should not be disabled through the UI. - const { isEditorPanelRemoved, isEditorPanelOpened } = select( - 'core/edit-post' - ); - - return { - isOpened: isEditorPanelOpened( PANEL_NAME ), - isRemoved: isEditorPanelRemoved( PANEL_NAME ), - }; - }, [] ); - - const { toggleEditorPanelOpened } = useDispatch( 'core/edit-post' ); - - if ( isRemoved ) { - return null; - } - return ( - { - toggleEditorPanelOpened( PANEL_NAME ); - } } - title={ - <> - { __( 'Publish:' ) } - - - - - } - > - - + + <> + { __( 'Publish date:' ) }{ ' ' } + + + + ( + + ) } + renderContent={ () => } + /> + + ); } diff --git a/packages/edit-post/src/components/sidebar/post-schedule/style.scss b/packages/edit-post/src/components/sidebar/post-schedule/style.scss new file mode 100644 index 0000000000000..244942d21ac46 --- /dev/null +++ b/packages/edit-post/src/components/sidebar/post-schedule/style.scss @@ -0,0 +1,8 @@ +.edit-post-post-schedule { + display: block; +} + +.edit-post-post-schedule__current-value { + font-weight: 500; + margin-right: $grid-unit; +} diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js index 9401d7b7463a3..8b44a7b88052f 100644 --- a/packages/edit-post/src/components/sidebar/post-status/index.js +++ b/packages/edit-post/src/components/sidebar/post-status/index.js @@ -15,6 +15,8 @@ import PostAuthor from '../post-author'; import PostSlug from '../post-slug'; import PostPendingStatus from '../post-pending-status'; import PluginPostStatusInfo from '../plugin-post-status-info'; +import PostSchedule from '../post-schedule'; +import PostVisibility from '../post-visibility'; /** * Module Constants @@ -25,13 +27,15 @@ function PostStatus( { isOpened, onTogglePanel } ) { return ( { ( fills ) => ( <> + + diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js index 69fa3b262f48f..7447f602e311e 100644 --- a/packages/edit-post/src/components/sidebar/post-visibility/index.js +++ b/packages/edit-post/src/components/sidebar/post-visibility/index.js @@ -1,8 +1,7 @@ /** * WordPress dependencies */ -import { PanelBody } from '@wordpress/components'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { Button, Dropdown, PanelRow } from '@wordpress/components'; import { PostVisibility as PostVisibilityForm, PostVisibilityCheck, @@ -10,58 +9,47 @@ import { } from '@wordpress/editor'; import { __ } from '@wordpress/i18n'; -const PANEL_NAME = 'visibility'; - export function PostVisibility() { - const { isOpened, isRemoved } = useSelect( ( select ) => { - // We use isEditorPanelRemoved to hide the panel if it was - // programatically removed. We don't use isEditorPanelEnabled since - // this panel should not be disabled through the UI. - const { isEditorPanelRemoved, isEditorPanelOpened } = select( - 'core/edit-post' - ); - - return { - isOpened: isEditorPanelOpened( PANEL_NAME ), - isRemoved: isEditorPanelRemoved( PANEL_NAME ), - }; - }, [] ); - - const { toggleEditorPanelOpened } = useDispatch( 'core/edit-post' ); - - if ( isRemoved ) { - return null; - } - return ( - ( - { - toggleEditorPanelOpened( PANEL_NAME ); - } } - title={ - <> - { __( 'Visibility:' ) } - + + ( + <> +
+ { __( 'Visibility:' ) }{ ' ' } + - - } - > - { ! canEdit && ( - - { __( - 'You do not have permission to change the visibility.' + { canEdit && ( + ( + + ) } + renderContent={ () => ( + + ) } + /> ) } - - ) } - { canEdit && } - - ) } - /> +
+ { ! canEdit && ( +

+ { __( + 'You do not have permission to change the visibility.' + ) } +

+ ) } + + ) } + /> + ); } diff --git a/packages/edit-post/src/components/sidebar/post-visibility/style.scss b/packages/edit-post/src/components/sidebar/post-visibility/style.scss new file mode 100644 index 0000000000000..1ce187e5049be --- /dev/null +++ b/packages/edit-post/src/components/sidebar/post-visibility/style.scss @@ -0,0 +1,41 @@ +.edit-post-post-visibility { + display: block; +} + +.edit-post-post-visibility__current-value { + font-weight: 500; + margin-right: $grid-unit; +} + +.edit-post-post-visibility__dialog .components-popover__content { + @include break-medium { + // 279px (sidebar width) - 20px (padding) - 2px (horizontal borders) + width: 257px; + } +} + +.edit-post-post-visibility__dialog-legend { + font-weight: 600; +} + +.edit-post-post-visibility__choice { + margin: 10px 0; +} + +.edit-post-post-visibility__dialog-radio, +.edit-post-post-visibility__dialog-label { + vertical-align: top; +} + +.edit-post-post-visibility__dialog-password-input { + width: calc(100% - 20px); + margin-left: 20px; +} + +.edit-post-post-visibility__dialog-info { + color: $dark-gray-200; + padding-left: 20px; + font-style: italic; + margin: 4px 0 0; + line-height: 1.4; +} 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 a7c530c4d752c..8cff5832a82c8 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -10,8 +10,6 @@ import { Platform } from '@wordpress/element'; */ import SettingsHeader from '../settings-header'; import PostStatus from '../post-status'; -import PostVisibility from '../post-visibility'; -import PostSchedule from '../post-schedule'; import PostFormat from '../post-format'; import LastRevision from '../last-revision'; import PostTaxonomies from '../post-taxonomies'; @@ -72,8 +70,6 @@ const SettingsSidebar = () => { { sidebarName === 'edit-post/document' && ( <> - - diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 1f6b3a299c4fa..13b9ae6ae7ec7 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -14,8 +14,10 @@ $footer-height: $button-size-small; @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";