Merge pull request #3982 from WordPress/try/block-settings-menu-item-…

…dynamic Make the block settings menu item dynamic
WordPress · Dec 18, 2017 · 3fc4d58 · 3fc4d58
2 parents 7fdf923 + fa71b71
commit 3fc4d58
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/editor/components/block-settings-menu/block-inspector-button.js b/editor/components/block-settings-menu/block-inspector-button.js
@@ -8,33 +8,44 @@ import { flow, noop } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { IconButton } from '@wordpress/components';
+import { IconButton, withSpokenMessages } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { isEditorSidebarOpened } from '../../selectors';
+import { isEditorSidebarOpened, getActivePanel } from '../../selectors';
 import { toggleSidebar, setActivePanel } from '../../actions';
 
 export function BlockInspectorButton( {
 	isSidebarOpened,
+	panel,
 	onToggleSidebar,
 	onShowInspector,
 	onClick = noop,
 	small = false,
+	speak,
 } ) {
 	const toggleInspector = () => {
 		onShowInspector();
-		if ( ! isSidebarOpened ) {
+		if ( ! isSidebarOpened || ( isSidebarOpened && panel === 'block' ) ) {
 			onToggleSidebar();
 		}
 	};
-	const label = __( 'Settings' );
+
+	const speakMessage = () => {
+		if ( ! isSidebarOpened || ( isSidebarOpened && panel !== 'block' ) ) {
+			speak( __( 'Additional settings are now available in the Editor advanced settings sidebar' ) );
+		} else {
+			speak( __( 'Advanced settings closed' ) );
+		}
+	};
+
+	const label = ( isSidebarOpened && panel === 'block' ) ? __( 'Hide Advanced Settings' ) : __( 'Show Advanced Settings' );
 
 	return (
 		<IconButton
 			className="editor-block-settings-menu__control"
-			onClick={ flow( toggleInspector, onClick ) }
+			onClick={ flow( toggleInspector, speakMessage, onClick ) }
 			icon="admin-generic"
 			label={ small ? label : undefined }
 		>
@@ -46,6 +57,7 @@ export function BlockInspectorButton( {
 export default connect(
 	( state ) => ( {
 		isSidebarOpened: isEditorSidebarOpened( state ),
+		panel: getActivePanel( state ),
 	} ),
 	( dispatch ) => ( {
 		onShowInspector() {
@@ -55,4 +67,4 @@ export default connect(
 			dispatch( toggleSidebar() );
 		},
 	} )
-)( BlockInspectorButton );
+)( withSpokenMessages( BlockInspectorButton ) );
diff --git a/editor/components/block-settings-menu/index.js b/editor/components/block-settings-menu/index.js
@@ -45,7 +45,7 @@ function BlockSettingsMenu( { uids, onSelect, focus } ) {
 							onToggle();
 						} }
 						icon="ellipsis"
-						label={ isOpen ? __( 'Close Settings Menu' ) : __( 'Open Settings Menu' ) }
+						label={ __( 'More Options' ) }
 						aria-expanded={ isOpen }
 						focus={ focus }
 					/>

diff --git a/editor/edit-post/sidebar/index.js b/editor/edit-post/sidebar/index.js
@@ -24,7 +24,7 @@ const Sidebar = ( { panel } ) => {
 		<div
 			className="editor-sidebar"
 			role="region"
-			aria-label={ __( 'Editor settings' ) }
+			aria-label={ __( 'Editor advanced settings' ) }
 			tabIndex="-1"
 		>
 			<Header />