diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js index b614ec0ebaf10..3f5a03ad90134 100644 --- a/packages/edit-post/src/components/sidebar/settings-header/index.js +++ b/packages/edit-post/src/components/sidebar/settings-header/index.js @@ -16,18 +16,20 @@ const SettingsHeader = ( { sidebarName } ) => { openGeneralSidebar( 'edit-post/document' ); const openBlockSettings = () => openGeneralSidebar( 'edit-post/block' ); - const documentLabel = useSelect( ( select ) => { + const { documentLabel, isTemplateMode } = useSelect( ( select ) => { const currentPostType = select( 'core/editor' ).getCurrentPostType(); const postType = select( 'core' ).getPostType( currentPostType ); - return ( - // Disable reason: Post type labels object is shaped like this. - // eslint-disable-next-line camelcase - postType?.labels?.singular_name ?? - // translators: Default label for the Document sidebar tab, not selected. - __( 'Document' ) - ); - } ); + return { + documentLabel: + // Disable reason: Post type labels object is shaped like this. + // eslint-disable-next-line camelcase + postType?.labels?.singular_name ?? + // translators: Default label for the Document sidebar tab, not selected. + __( 'Document' ), + isTemplateMode: select( editPostStore ).isEditingTemplate(), + }; + }, [] ); const [ documentAriaLabel, documentActiveClass ] = sidebarName === 'edit-post/document' @@ -42,19 +44,38 @@ const SettingsHeader = ( { sidebarName } ) => { : // translators: ARIA label for the Block Settings Sidebar tab, not selected. [ __( 'Block' ), '' ]; + const [ templateAriaLabel, templateActiveClass ] = + sidebarName === 'edit-post/document' + ? [ __( 'Template (selected)' ), 'is-active' ] + : [ __( 'Template' ), '' ]; + /* Use a list so screen readers will announce how many tabs there are. */ return (