Skip to content

Commit

Permalink
Use a different solution.
Browse files Browse the repository at this point in the history
  • Loading branch information
ZebulanStanphill committed Sep 15, 2020
1 parent b56415f commit 2f5f0e3
Show file tree
Hide file tree
Showing 11 changed files with 140 additions and 144 deletions.
47 changes: 16 additions & 31 deletions packages/e2e-tests/specs/editor/various/datepicker.test.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,16 @@
/**
* WordPress dependencies
*/
import {
createNewPost,
findSidebarPanelToggleButtonWithTitle,
} from '@wordpress/e2e-test-utils';
import { clickButton, createNewPost } from '@wordpress/e2e-test-utils';

describe( 'Datepicker', () => {
beforeEach( async () => {
await createNewPost();
} );

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
);

Expand All @@ -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
);

Expand All @@ -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
);

Expand All @@ -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
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
* WordPress dependencies
*/
import {
clickButton,
setBrowserViewport,
createNewPost,
openDocumentSettingsSidebar,
openSidebarPanel,
} from '@wordpress/e2e-test-utils';

describe( 'Post visibility', () => {
Expand All @@ -20,7 +20,7 @@ describe( 'Post visibility', () => {

await openDocumentSettingsSidebar();

await openSidebarPanel( 'Visibility:' );
await clickButton( 'Edit visibility' );

const [ privateLabel ] = await page.$x(
'//label[text()="Private"]'
Expand All @@ -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."]'
);
Expand All @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions packages/e2e-tests/specs/editor/various/scheduling.test.js
Original file line number Diff line number Diff line change
@@ -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 );
Expand All @@ -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."]'
);
Expand Down
14 changes: 2 additions & 12 deletions packages/e2e-tests/specs/editor/various/sidebar.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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' );
Expand All @@ -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( [] );
Expand Down
64 changes: 23 additions & 41 deletions packages/edit-post/src/components/sidebar/post-schedule/index.js
Original file line number Diff line number Diff line change
@@ -1,57 +1,39 @@
/**
* 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,
PostScheduleLabel,
} 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 (
<PostScheduleCheck>
<PanelBody
initialOpen={ false }
opened={ isOpened }
onToggle={ () => {
toggleEditorPanelOpened( PANEL_NAME );
} }
title={
<>
{ __( 'Publish:' ) }
<span className="editor-post-publish-panel__link">
<PostScheduleLabel />
</span>
</>
}
>
<PostScheduleForm />
</PanelBody>
<PanelRow className="edit-post-post-schedule">
<>
{ __( 'Publish date:' ) }{ ' ' }
<span className="edit-post-post-schedule__current-value">
<PostScheduleLabel />
</span>
<Dropdown
position="bottom left"
contentClassName="edit-post-post-schedule__dialog"
renderToggle={ ( { onToggle, isOpen } ) => (
<Button
onClick={ onToggle }
aria-expanded={ isOpen }
isTertiary
>
{ __( 'Edit publish date' ) }
</Button>
) }
renderContent={ () => <PostScheduleForm /> }
/>
</>
</PanelRow>
</PostScheduleCheck>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.edit-post-post-schedule {
display: block;
}

.edit-post-post-schedule__current-value {
font-weight: 500;
margin-right: $grid-unit;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -25,13 +27,15 @@ function PostStatus( { isOpened, onTogglePanel } ) {
return (
<PanelBody
className="edit-post-post-status"
title={ __( 'General' ) }
title={ __( 'Status & visibility' ) }
opened={ isOpened }
onToggle={ onTogglePanel }
>
<PluginPostStatusInfo.Slot>
{ ( fills ) => (
<>
<PostVisibility />
<PostSchedule />
<PostSticky />
<PostPendingStatus />
<PostSlug />
Expand Down
Loading

0 comments on commit 2f5f0e3

Please sign in to comment.