Use Post Type label for Document tab in Settings Header

lib/compat.php

@@ -656,3 +656,42 @@ function gutenberg_preload_edit_post( $preload_paths ) {
 }
 
 add_filter( 'block_editor_preload_paths', 'gutenberg_preload_edit_post' );
+
+/**
+ * Override post type labels for Reusable Block custom post type.
+ *
+ * This shim can be removed when the Gutenberg plugin requires a WordPress
+ * version that has the ticket below.
+ *
+ * @see https://core.trac.wordpress.org/ticket/50755
+ *
+ * @since 8.6.0
+ *
+ * @return array Array of new labels for Reusable Block post type.
+ */
+function gutenberg_override_reusable_block_post_type_labels() {
+ return array(
+ 'name' => _x( 'Reusable Blocks', 'post type general name', 'gutenberg' ),
+ 'singular_name' => _x( 'Reusable Block', 'post type singular name', 'gutenberg' ),
+ 'menu_name' => _x( 'Reusable Blocks', 'admin menu', 'gutenberg' ),
+ 'name_admin_bar' => _x( 'Reusable Block', 'add new on admin bar', 'gutenberg' ),
+ 'add_new' => _x( 'Add New', 'Reusable Block', 'gutenberg' ),
+ 'add_new_item' => __( 'Add New Reusable Block', 'gutenberg' ),
+ 'new_item' => __( 'New Reusable Block', 'gutenberg' ),
+ 'edit_item' => __( 'Edit Reusable Block', 'gutenberg' ),
+ 'view_item' => __( 'View Reusable Block', 'gutenberg' ),
+ 'all_items' => __( 'All Reusable Blocks', 'gutenberg' ),
+ 'search_items' => __( 'Search Reusable Blocks', 'gutenberg' ),
+ 'not_found' => __( 'No reusable blocks found.', 'gutenberg' ),
+ 'not_found_in_trash' => __( 'No reusable blocks found in Trash.', 'gutenberg' ),
+ 'filter_items_list' => __( 'Filter reusable blocks list', 'gutenberg' ),
+ 'items_list_navigation' => __( 'Reusable Blocks list navigation', 'gutenberg' ),
+ 'items_list' => __( 'Reusable Blocks list', 'gutenberg' ),
+ 'item_published' => __( 'Reusable Block published.', 'gutenberg' ),
+ 'item_published_privately' => __( 'Reusable Block published privately.', 'gutenberg' ),
+ 'item_reverted_to_draft' => __( 'Reusable Block reverted to draft.', 'gutenberg' ),
+ 'item_scheduled' => __( 'Reusable Block scheduled.', 'gutenberg' ),
+ 'item_updated' => __( 'Reusable Block updated.', 'gutenberg' ),
+ );
+}
+add_filter( 'post_type_labels_wp_block', 'gutenberg_override_reusable_block_post_type_labels', 10, 0 );

packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -187,7 +187,7 @@ describe( 'Order of block keyboard navigation', () => {
  expect( await getActiveLabel() ).toBe( 'Multiple selected blocks' );
 
  await page.keyboard.press( 'Tab' );
- await expect( await getActiveLabel() ).toBe( 'Document' );
+ await expect( await getActiveLabel() ).toBe( 'Post' );
 
  await pressKeyWithModifier( 'shift', 'Tab' );
  await expect( await getActiveLabel() ).toBe(

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

@@ -30,7 +30,7 @@ describe( 'preferences', () => {
 
  it( 'remembers sidebar dismissal between sessions', async () => {
  // Open by default.
- expect( await getActiveSidebarTabText() ).toBe( 'Document' );
+ expect( await getActiveSidebarTabText() ).toBe( 'Post' );
 
  // Change to "Block" tab.
  await page.click( '.edit-post-sidebar__panel-tab[aria-label="Block"]' );
@@ -41,7 +41,7 @@ describe( 'preferences', () => {
  // See: https://github.com/WordPress/gutenberg/issues/6377
  // See: https://github.com/WordPress/gutenberg/pull/8995
  await page.reload();
- expect( await getActiveSidebarTabText() ).toBe( 'Document' );
+ expect( await getActiveSidebarTabText() ).toBe( 'Post' );
 
  // Dismiss
  await page.click(

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

@@ -14,7 +14,7 @@ import {
 
 const SIDEBAR_SELECTOR = '.edit-post-sidebar';
 const ACTIVE_SIDEBAR_TAB_SELECTOR = '.edit-post-sidebar__panel-tab.is-active';
-const ACTIVE_SIDEBAR_BUTTON_TEXT = 'Document';
+const ACTIVE_SIDEBAR_BUTTON_TEXT = 'Post';
 
 describe( 'Sidebar', () => {
  afterEach( () => {
@@ -99,11 +99,11 @@ describe( 'Sidebar', () => {
  await pressKeyWithModifier( 'ctrl', '`' );
  await pressKeyWithModifier( 'ctrl', '`' );
 
- // Tab lands at first (presumed selected) option "Document".
+ // Tab lands at first (presumed selected) option "Post".
  await page.keyboard.press( 'Tab' );
  const isActiveDocumentTab = await page.evaluate(
  () =>
- document.activeElement.textContent === 'Document' &&
+ document.activeElement.textContent === 'Post' &&
  document.activeElement.classList.contains( 'is-active' )
  );
  expect( isActiveDocumentTab ).toBe( true );

packages/edit-post/src/components/sidebar/settings-header/index.js

@@ -2,27 +2,39 @@
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { withDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+const SettingsHeader = ( { sidebarName } ) => {
+ const { openGeneralSidebar } = useDispatch( 'core/edit-post' );
+ const openDocumentSettings = () =>
+ openGeneralSidebar( 'edit-post/document' );
+ const openBlockSettings = () => openGeneralSidebar( 'edit-post/block' );
+
+ const documentLabel = 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' )
+ );
+ } );
 
-const SettingsHeader = ( {
- openDocumentSettings,
- openBlockSettings,
- sidebarName,
-} ) => {
- const blockLabel = __( 'Block' );
  const [ documentAriaLabel, documentActiveClass ] =
  sidebarName === 'edit-post/document'
- ? // translators: ARIA label for the Document sidebar tab, selected.
- [ __( 'Document (selected)' ), 'is-active' ]
- : // translators: ARIA label for the Document sidebar tab, not selected.
- [ __( 'Document' ), '' ];
+ ? // translators: ARIA label for the Document sidebar tab, selected. %s: Document label.
+ [ sprintf( __( '%s (selected)' ), documentLabel ), 'is-active' ]
+ : [ documentLabel, '' ];
 
  const [ blockAriaLabel, blockActiveClass ] =
  sidebarName === 'edit-post/block'
- ? // translators: ARIA label for the Settings Sidebar tab, selected.
+ ? // translators: ARIA label for the Block Settings Sidebar tab, selected.
  [ __( 'Block (selected)' ), 'is-active' ]
- : // translators: ARIA label for the Settings Sidebar tab, not selected.
+ : // translators: ARIA label for the Block Settings Sidebar tab, not selected.
  [ __( 'Block' ), '' ];
 
  /* Use a list so screen readers will announce how many tabs there are. */
@@ -33,33 +45,27 @@ const SettingsHeader = ( {
  onClick={ openDocumentSettings }
  className={ `edit-post-sidebar__panel-tab ${ documentActiveClass }` }
  aria-label={ documentAriaLabel }
- data-label={ __( 'Document' ) }
+ data-label={ documentLabel }
  >
- { __( 'Document' ) }
+ { documentLabel }
  </Button>
  </li>
  <li>
  <Button
  onClick={ openBlockSettings }
  className={ `edit-post-sidebar__panel-tab ${ blockActiveClass }` }
  aria-label={ blockAriaLabel }
- data-label={ blockLabel }
+ // translators: Data label for the Block Settings Sidebar tab.
+ data-label={ __( 'Block' ) }
  >
- { blockLabel }
+ {
+ // translators: Text label for the Block Settings Sidebar tab.
+ __( 'Block' )
+ }
  </Button>
  </li>
  </ul>
  );
 };
 
-export default withDispatch( ( dispatch ) => {
- const { openGeneralSidebar } = dispatch( 'core/edit-post' );
- return {
- openDocumentSettings() {
- openGeneralSidebar( 'edit-post/document' );
- },
- openBlockSettings() {
- openGeneralSidebar( 'edit-post/block' );
- },
- };
-} )( SettingsHeader );
+export default SettingsHeader;