Document settings: improve accessibility of "Status & visibility" controls

packages/components/src/panel/style.scss

@@ -77,6 +77,10 @@
 .components-panel__body-toggle.components-button {
 	position: relative;
 	padding: $grid-unit-20;
+
+	// Stop text from overlapping the expand/collapse icon.
+	padding-right: $grid-unit-60;
+
 	outline: none;
 	width: 100%;
 	font-weight: 500;

packages/e2e-test-utils/README.md

@@ -480,6 +480,14 @@ _Returns_
 
 Opens the publish panel.
 
+<a name="openSidebarPanel" href="#openSidebarPanel">#</a> **openSidebarPanel**
+
+Opens a sidebar panel with the provided title.
+
+_Parameters_
+
+-   _panelTitle_ `string`: The name of sidebar panel.
+
 <a name="pressKeyTimes" href="#pressKeyTimes">#</a> **pressKeyTimes**
 
 Presses the given keyboard key a number of times in sequence.

packages/e2e-test-utils/src/index.js

@@ -52,6 +52,7 @@ export {
 } from './observe-focus-loss';
 export { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
 export { openPublishPanel } from './open-publish-panel';
+export { openSidebarPanel } from './open-sidebar-panel';
 export { trashAllPosts } from './posts';
 export { pressKeyTimes } from './press-key-times';
 export {

packages/e2e-test-utils/src/open-sidebar-panel.js

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import { findSidebarPanelToggleButtonWithTitle } from './find-sidebar-panel-toggle-button-with-title';
+
+/**
+ * Opens a sidebar panel with the provided title.
+ *
+ * @param {string} panelTitle The name of sidebar panel.
+ */
+export async function openSidebarPanel( panelTitle ) {
+	const panelToggle = await findSidebarPanelToggleButtonWithTitle(
+		panelTitle
+	);
+	const panelIsCollapsed = await panelToggle.evaluate(
+		( node ) => node.getAttribute( 'aria-expanded' ) === 'false'
+	);
+	if ( panelIsCollapsed ) {
+		await panelToggle.click();
+	}
+}

packages/e2e-tests/specs/editor/various/datepicker.test.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { createNewPost, changeSiteTimezone } from '@wordpress/e2e-test-utils';
+import {
+	createNewPost,
+	changeSiteTimezone,
+	findSidebarPanelToggleButtonWithTitle,
+} from '@wordpress/e2e-test-utils';
 
 async function getInputValue( selector ) {
 	return page.$eval( selector, ( element ) => element.value );
@@ -47,9 +51,12 @@ function formatDatePickerValues( {
 }
 
 async function getPublishingDate() {
-	return page.$eval(
-		'.edit-post-post-schedule__toggle',
-		( dateLabel ) => dateLabel.textContent
+	const panelToggle = await findSidebarPanelToggleButtonWithTitle(
+		'Publish date:'
+	);
+	return panelToggle.$eval(
+		'.editor-post-publish-panel__link',
+		( publishDateSpan ) => publishDateSpan.textContent
 	);
 }
 
@@ -66,22 +73,31 @@ describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
 		} );
 
 		it( 'should show the publishing date as "Immediately" if the date is not altered', async () => {
+			// Open the datepicker.
+			const panelToggle = await findSidebarPanelToggleButtonWithTitle(
+				'Publish date:'
+			);
+			await panelToggle.click();
+
 			const publishingDate = await getPublishingDate();
 
 			expect( publishingDate ).toEqual( 'Immediately' );
 		} );
 
 		it( 'should show the publishing date if the date is in the past', async () => {
 			// Open the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
+			const panelToggle = await findSidebarPanelToggleButtonWithTitle(
+				'Publish date:'
+			);
+			await panelToggle.click();
 
 			// Change the publishing date to a year in the past.
 			await page.click( '.components-datetime__time-field-year' );
 			await page.keyboard.press( 'ArrowDown' );
 			const datePickerValues = await getDatePickerValues();
 
 			// Close the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
+			await panelToggle.click();
 
 			const publishingDate = await getPublishingDate();
 
@@ -92,15 +108,18 @@ describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
 
 		it( 'should show the publishing date if the date is in the future', async () => {
 			// Open the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
+			const panelToggle = await findSidebarPanelToggleButtonWithTitle(
+				'Publish date:'
+			);
+			await panelToggle.click();
 
 			// Change the publishing date to a year in the future.
 			await page.click( '.components-datetime__time-field-year' );
 			await page.keyboard.press( 'ArrowUp' );
 			const datePickerValues = await getDatePickerValues();
 
 			// Close the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
+			await panelToggle.click();
 
 			const publishingDate = await getPublishingDate();
 
@@ -113,19 +132,22 @@ describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
 
 		it( `should show the publishing date as "Immediately" if the date is cleared`, async () => {
 			// Open the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
+			const panelToggle = await findSidebarPanelToggleButtonWithTitle(
+				'Publish date:'
+			);
+			await panelToggle.click();
 
 			// 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 page.click( '.edit-post-post-schedule__toggle' );
+			await panelToggle.click();
 
 			// Open the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
+			await panelToggle.click();
 
-			// Clear the date
+			// Clear the date.
 			await page.click( '.components-datetime__date-reset-button' );
 
 			const publishingDate = await getPublishingDate();

packages/e2e-tests/specs/editor/various/new-post.test.js

@@ -5,6 +5,7 @@ import {
 	activatePlugin,
 	createNewPost,
 	deactivatePlugin,
+	openSidebarPanel,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'new editor state', () => {
@@ -34,6 +35,8 @@ describe( 'new editor state', () => {
 		);
 		expect( postPreviewButton ).not.toBeNull();
 		// Should display the Post Formats UI.
+		await openSidebarPanel( 'Post Format' );
+		await page.waitForSelector( '.editor-post-format' );
 		const postFormatsUi = await page.$( '.editor-post-format' );
 		expect( postFormatsUi ).not.toBeNull();
 	} );

packages/e2e-tests/specs/editor/various/post-visibility.test.js

@@ -5,6 +5,7 @@ import {
 	setBrowserViewport,
 	createNewPost,
 	openDocumentSettingsSidebar,
+	openSidebarPanel,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Post visibility', () => {
@@ -19,7 +20,7 @@ describe( 'Post visibility', () => {
 
 			await openDocumentSettingsSidebar();
 
-			await page.click( '.edit-post-post-visibility__toggle' );
+			await openSidebarPanel( 'Visibility:' );
 
 			const [ privateLabel ] = await page.$x(
 				'//label[text()="Private"]'
@@ -45,7 +46,7 @@ describe( 'Post visibility', () => {
 		await openDocumentSettingsSidebar();
 
 		// Set a publish date for the next month.
-		await page.click( '.edit-post-post-schedule__toggle' );
+		await openSidebarPanel( 'Publish date:' );
 		await page.click(
 			'div[aria-label="Move forward to switch to the next month."]'
 		);
@@ -55,7 +56,7 @@ describe( 'Post visibility', () => {
 			)
 		 )[ 0 ].click();
 
-		await page.click( '.edit-post-post-visibility__toggle' );
+		await openSidebarPanel( 'Visibility:' );
 
 		const [ privateLabel ] = await page.$x( '//label[text()="Private"]' );
 		await privateLabel.click();

packages/e2e-tests/specs/editor/various/scheduling.test.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { createNewPost, changeSiteTimezone } from '@wordpress/e2e-test-utils';
+import {
+	changeSiteTimezone,
+	createNewPost,
+	openSidebarPanel,
+} from '@wordpress/e2e-test-utils';
 
 async function getPublishButtonText() {
 	return page.$eval(
@@ -55,8 +59,7 @@ describe( 'Scheduling', () => {
 
 	it( 'Should keep date time UI focused when the previous and next month buttons are clicked', async () => {
 		await createNewPost();
-
-		await page.click( '.edit-post-post-schedule__toggle' );
+		await openSidebarPanel( 'Publish date:' );
 		await page.click(
 			'div[aria-label="Move backward to switch to the previous month."]'
 		);

packages/e2e-tests/specs/editor/various/sidebar.test.js

@@ -2,8 +2,10 @@
  * WordPress dependencies
  */
 import {
+	activatePlugin,
 	clearLocalStorage,
 	createNewPost,
+	deactivatePlugin,
 	findSidebarPanelWithTitle,
 	enableFocusLossObservation,
 	disableFocusLossObservation,
@@ -120,36 +122,60 @@ describe( 'Sidebar', () => {
 	} );
 
 	it( 'should be possible to programmatically remove Document Settings panels', async () => {
+		await activatePlugin( 'gutenberg-test-plugin-post-formats-support' );
+
 		await createNewPost();
 		await enableFocusLossObservation();
 		await openDocumentSettingsSidebar();
 
+		expect( await findSidebarPanelWithTitle( 'Status' ) ).toBeDefined();
+		expect(
+			await findSidebarPanelWithTitle( 'Visibility:' )
+		).toBeDefined();
+		expect(
+			await findSidebarPanelWithTitle( 'Publish date:' )
+		).toBeDefined();
+		expect(
+			await findSidebarPanelWithTitle( 'Post Format' )
+		).toBeDefined();
 		expect( await findSidebarPanelWithTitle( 'Categories' ) ).toBeDefined();
 		expect( await findSidebarPanelWithTitle( 'Tags' ) ).toBeDefined();
 		expect(
 			await findSidebarPanelWithTitle( 'Featured image' )
 		).toBeDefined();
 		expect( await findSidebarPanelWithTitle( 'Excerpt' ) ).toBeDefined();
 		expect( await findSidebarPanelWithTitle( 'Discussion' ) ).toBeDefined();
-		expect(
-			await findSidebarPanelWithTitle( 'Status & visibility' )
-		).toBeDefined();
 
 		await page.evaluate( () => {
 			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' );
 			removeEditorPanel( 'featured-image' );
 			removeEditorPanel( 'post-excerpt' );
 			removeEditorPanel( 'discussion-panel' );
-			removeEditorPanel( 'post-status' );
 		} );
 
 		const getPanelToggleSelector = ( panelTitle ) => {
 			return `//div[contains(@class, "edit-post-sidebar")]//button[contains(@class, "components-panel__body-toggle") and contains(text(),"${ panelTitle }")]`;
 		};
 
+		expect( await page.$x( getPanelToggleSelector( 'Status' ) ) ).toEqual(
+			[]
+		);
+		expect(
+			await page.$x( getPanelToggleSelector( 'Visibility:' ) )
+		).toEqual( [] );
+		expect(
+			await page.$x( getPanelToggleSelector( 'Publish date:' ) )
+		).toEqual( [] );
+		expect(
+			await page.$x( getPanelToggleSelector( 'Post Format' ) )
+		).toEqual( [] );
 		expect(
 			await page.$x( getPanelToggleSelector( 'Categories' ) )
 		).toEqual( [] );
@@ -165,8 +191,7 @@ describe( 'Sidebar', () => {
 		expect(
 			await page.$x( getPanelToggleSelector( 'Discussion' ) )
 		).toEqual( [] );
-		expect(
-			await page.$x( getPanelToggleSelector( 'Status & visibility' ) )
-		).toEqual( [] );
+
+		await deactivatePlugin( 'gutenberg-test-plugin-post-formats-support' );
 	} );
 } );

packages/edit-post/src/components/sidebar/post-format/index.js

@@ -1,20 +1,54 @@
 /**
  * WordPress dependencies
  */
-import { PanelRow } from '@wordpress/components';
+import { PanelBody } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	PostFormat as PostFormatForm,
 	PostFormatCheck,
 } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../../store';
+
+const PANEL_NAME = 'post-format';
+
+export default function PostFormat() {
+	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(
+			editPostStore
+		);
+
+		return {
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+			isRemoved: isEditorPanelRemoved( PANEL_NAME ),
+		};
+	}, [] );
+
+	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+
+	if ( isRemoved ) {
+		return null;
+	}
 
-export function PostFormat() {
 	return (
 		<PostFormatCheck>
-			<PanelRow>
+			<PanelBody
+				initialOpen={ false }
+				opened={ isOpened }
+				onToggle={ () => {
+					toggleEditorPanelOpened( PANEL_NAME );
+				} }
+				title={ __( 'Post Format' ) }
+			>
 				<PostFormatForm />
-			</PanelRow>
+			</PanelBody>
 		</PostFormatCheck>
 	);
 }
-
-export default PostFormat;