Fix: template editor header area is difficult to navigate with screen…

… readers (#32938)
WordPress · Jun 25, 2021 · f5679e2 · f5679e2
1 parent d9e3ff6
commit f5679e2
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 56 deletions.
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -23,7 +23,6 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 /**
  * Internal dependencies
  */
-import TemplateTitle from '../template-title';
 import { store as editPostStore } from '../../../store';
 
 function HeaderToolbar() {
@@ -156,8 +155,6 @@ function HeaderToolbar() {
 					</>
 				) }
 			</div>
-
-			<TemplateTitle />
 		</NavigableToolbar>
 	);
 }

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -21,6 +21,7 @@ import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
 import { default as DevicePreview } from '../device-preview';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
+import TemplateTitle from './template-title';
 
 function Header( { setEntitiesSavedStatesCallback } ) {
 	const {
@@ -59,6 +60,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 			</MainDashboardButton.Slot>
 			<div className="edit-post-header__toolbar">
 				<HeaderToolbar />
+				<TemplateTitle />
 			</div>
 			<div className="edit-post-header__settings">
 				{ ! isPublishSidebarOpened && (

diff --git a/packages/edit-post/src/components/header/template-title/index.js b/packages/edit-post/src/components/header/template-title/index.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Dropdown, ToolbarItem, Button } from '@wordpress/components';
+import { Dropdown, Button } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 
 /**
@@ -47,59 +47,50 @@ function TemplateTitle() {
 	}
 
 	return (
-		<ToolbarItem>
-			{ ( toolbarItemHTMLProps ) => {
-				return (
-					<Dropdown
-						className="edit-post-template-top-area"
-						position="bottom center"
-						contentClassName="edit-post-template-top-area__popover"
-						renderToggle={ ( { onToggle } ) => (
-							<>
-								<Button
-									{ ...toolbarItemHTMLProps }
-									className="edit-post-template-post-title"
-									isLink
-									showTooltip
-									label={ sprintf(
-										/* translators: %s: Title of the referring post, e.g: "Hello World!" */
-										__( 'Edit %s' ),
-										title
-									) }
-									onClick={ () => {
-										clearSelectedBlock();
-										setIsEditingTemplate( false );
-									} }
-								>
-									{ title }
-								</Button>
-								<Button
-									{ ...toolbarItemHTMLProps }
-									className="edit-post-template-title"
-									isLink
-									icon={ chevronDown }
-									showTooltip
-									onClick={ onToggle }
-									label={ __( 'Template Options' ) }
-								>
-									{ templateTitle }
-								</Button>
-							</>
+		<div className="edit-post-template-top-area">
+			<Button
+				className="edit-post-template-post-title"
+				isLink
+				showTooltip
+				label={ sprintf(
+					/* translators: %s: Title of the referring post, e.g: "Hello World!" */
+					__( 'Edit %s' ),
+					title
+				) }
+				onClick={ () => {
+					clearSelectedBlock();
+					setIsEditingTemplate( false );
+				} }
+			>
+				{ title }
+			</Button>
+			<Dropdown
+				position="bottom center"
+				contentClassName="edit-post-template-top-area__popover"
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						className="edit-post-template-title"
+						isLink
+						icon={ chevronDown }
+						showTooltip
+						onClick={ onToggle }
+						label={ __( 'Template Options' ) }
+					>
+						{ templateTitle }
+					</Button>
+				) }
+				renderContent={ () => (
+					<>
+						{ template.has_theme_file ? (
+							<TemplateDescription />
+						) : (
+							<EditTemplateTitle />
 						) }
-						renderContent={ () => (
-							<>
-								{ template.has_theme_file ? (
-									<TemplateDescription />
-								) : (
-									<EditTemplateTitle />
-								) }
-								<DeleteTemplate />
-							</>
-						) }
-					/>
-				);
-			} }
-		</ToolbarItem>
+						<DeleteTemplate />
+					</>
+				) }
+			/>
+		</div>
 	);
 }