Skip to content

Commit

Permalink
Fix: template editor header area is difficult to navigate with screen…
Browse files Browse the repository at this point in the history
… readers (#32938)
  • Loading branch information
jorgefilipecosta authored and youknowriad committed Jun 25, 2021
1 parent d9e3ff6 commit f5679e2
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 56 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -156,8 +155,6 @@ function HeaderToolbar() {
</>
) }
</div>

<TemplateTitle />
</NavigableToolbar>
);
}
Expand Down
2 changes: 2 additions & 0 deletions packages/edit-post/src/components/header/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 && (
Expand Down
97 changes: 44 additions & 53 deletions packages/edit-post/src/components/header/template-title/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -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>
);
}

Expand Down

0 comments on commit f5679e2

Please sign in to comment.