Expanding on sentence case to everywhere else (#18758)

* Expanding on sentance case to everywhere else

So far we have only done this in the tooltips and in menus. If sentance case of right approach we should consider taking this across all areas.

Included in this:

- Side panel
- Block library
- Settings

There may be areas missed, but gives a starting view to see if everyone agrees to go forward with this across everything. If we do, then we need a patch for core.

Expands on #16764

* Catch a few missed

* Update tag

* Test catches

Fixes test issues.

* Catches the test fails for sentance case.

* Test fix

* Update index.js

* Catch some more test fails

* Test fixes

* Override WP labels for post and page types

… to conform to sentence-style capitalisation across the editor UI.

(This is a quick commit to show the idea. Do expand on it and polish.)

From Slack: "If we used this it would have to be properly marked [e.g.
@todo] and commented so that before the next core release we could
revisit these labels as a whole."

* gutenberg_override_posttype_labels: small fixes

docs/contributors/scripts.md

@@ -30,7 +30,7 @@ The editor includes a number of packages to enable various pieces of functionali
 | [I18N](/packages/i18n/README.md) | wp-i18n | Internationalization utilities for client-side localization |
 | [Is Shallow Equal](/packages/is-shallow-equal/README.md) | wp-is-shallow-equal | A function for performing a shallow comparison between two objects or arrays |
 | [Keycodes](/packages/keycodes/README.md) | wp-keycodes | Keycodes utilities for WordPress, used to check the key pressed in events like `onKeyDown` |
-| [List Reusable Blocks](/packages/list-reusable-blocks/README.md) | wp-list-reusable-blocks | Package used to add import/export links to the listing page of the reusable blocks |
+| [List Reusable blocks](/packages/list-reusable-blocks/README.md) | wp-list-reusable-blocks | Package used to add import/export links to the listing page of the reusable blocks |
 | [NUX](/packages/nux/README.md) | wp-nux | Components, and wp.data methods useful for onboarding a new user to the WordPress admin interface |
 | [Plugins](/packages/plugins/README.md) | wp-plugins | Plugins module for WordPress |
 | [Redux Routine](/packages/redux-routine/README.md) | wp-redux-routine | Redux middleware for generator coroutines |

docs/designers-developers/developers/backward-compatibility/deprecations.md

@@ -124,7 +124,7 @@ For features included in the Gutenberg plugin, the deprecation policy is intende
 - `wp.components.CodeEditor` has been removed. Used `wp.codeEditor` directly instead.
 - `wp.blocks.setUnknownTypeHandlerName` has been removed. Please use `setFreeformContentHandlerName` and `setUnregisteredTypeHandlerName` instead.
 - `wp.blocks.getUnknownTypeHandlerName` has been removed. Please use `getFreeformContentHandlerName` and `getUnregisteredTypeHandlerName` instead.
-- The Reusable Blocks Data API was marked as experimental as it's subject to change in the future.
+- The Reusable blocks Data API was marked as experimental as it's subject to change in the future.
 
 ## 4.1.0
 

docs/designers-developers/developers/slotfills/README.md

@@ -41,7 +41,7 @@ SlotFills are created using `createSlotFill`. This creates two components, `Slot
 
 ```js
 /**
- * Defines as extensibility slot for the Status & Visibility panel.
+ * Defines as extensibility slot for the Status & visibility panel.
  */
 
 /**
@@ -65,7 +65,7 @@ export default PluginPostStatusInfo;
 
 ```
 
-This new Slot is then exposed in the editor. The example below is from core and represents the Status & Visibility panel.
+This new Slot is then exposed in the editor. The example below is from core and represents the Status & visibility panel.
 
 As we can see, the `<PluginPostStatusInfo.Slot>` is wrapping all of the items that will appear in the panel.
 Any items that have been added via the SlotFill ( see the example above ), will be included in the `fills` parameter and be displayed between the `<PostAuthor/>` and `<PostTrash/>` components.
@@ -75,7 +75,7 @@ See [core code](https://github.com/WordPress/gutenberg/tree/master/packages/edit
 ```js
 function PostStatus( { isOpened, onTogglePanel } ) {
 	return (
-		<PanelBody className="edit-post-post-status" title={ __( 'Status & Visibility' ) } opened={ isOpened } onToggle={ onTogglePanel }>
+		<PanelBody className="edit-post-post-status" title={ __( 'Status & visibility' ) } opened={ isOpened } onToggle={ onTogglePanel }>
 			<PluginPostStatusInfo.Slot>
 				{ ( fills ) => (
 					<Fragment>

docs/designers-developers/developers/slotfills/plugin-post-status-info.md

@@ -1,6 +1,6 @@
 # PluginPostStatusInfo
 
-This slots allows for the insertion of items in the Status & Visibility panel of the document sidebar.
+This slots allows for the insertion of items in the Status & visibility panel of the document sidebar.
 
 ## Example
 
@@ -22,5 +22,5 @@ registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } );
 
 ## Location
 
-![Location in the Status & Visibility panel](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/assets/plugin-post-status-info-location.png?raw=true)
+![Location in the Status & visibility panel](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/assets/plugin-post-status-info-location.png?raw=true)
 

docs/designers-developers/faq.md

@@ -116,7 +116,7 @@ This is the canonical list of keyboard shortcuts:
 			<td><kbd>⌥</kbd><kbd>F10</kbd></td>
 		</tr>
 		<tr>
-			<td>Switch between Visual Editor and Code Editor.</td>
+			<td>Switch between Visual editor and Code editor.</td>
 			<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>M</kbd></td>
 			<td><kbd>⇧</kbd><kbd>⌥</kbd><kbd>⌘</kbd><kbd>M</kbd></td>
 		</tr>

docs/designers-developers/key-concepts.md

@@ -38,13 +38,13 @@ Blocks can be limited or locked-in-place by Templates and custom code.
 
 In the Block Inserter (the accordion-sorted, popup modal that shows a site's available blocks to users) each accordion title is a Block Category, which are either the defaults or customized by developers through Plugins or code.
 
-## Reusable Blocks
+## Reusable blocks
 
-Reusable Blocks are a way to share a block (or multiple blocks) as a reusable, repeatable piece of content.
+Reusable blocks are a way to share a block (or multiple blocks) as a reusable, repeatable piece of content.
 
 Any edits to a reusable block are made to every usage of that repeatable block.
 
-Reusable Blocks are stored as a hidden post type and are dynamic blocks that "ref" or reference the post_id and return the post_content for that wp_block.
+Reusable blocks are stored as a hidden post type and are dynamic blocks that "ref" or reference the post_id and return the post_content for that wp_block.
 
 ## Templates
 

lib/client-assets.php

@@ -149,6 +149,25 @@ function gutenberg_override_translation_file( $file, $handle ) {
 }
 add_filter( 'load_script_translation_file', 'gutenberg_override_translation_file', 10, 2 );
 
+/**
+ * Filters the default labels for common post types to change the case style
+ * from capitalized (e.g. "Featured Image") to sentence-style (e.g. "Featured
+ * image").
+ *
+ * See: https://github.com/WordPress/gutenberg/pull/18758
+ *
+ * @param object $labels Object with all the labels as member variables.
+ *
+ * @return object Object with all the labels, including overridden ones.
+ */
+function gutenberg_override_posttype_labels( $labels ) {
+	$labels->featured_image = __( 'Featured image', 'gutenberg' );
+	return $labels;
+}
+foreach ( array( 'post', 'page' ) as $post_type ) {
+	add_filter( "post_type_labels_{$post_type}", 'gutenberg_override_posttype_labels' );
+}
+
 /**
  * Registers a style according to `wp_register_style`. Honors this request by
  * deregistering any style by the same handler before registration.

packages/block-editor/src/components/block-list/style.scss

@@ -299,7 +299,7 @@
 		border-width: $border-width;
 	}
 
-	// Reusable Blocks clickthrough overlays.
+	// Reusable blocks clickthrough overlays.
 	&.is-reusable > .block-editor-block-list__block-edit .block-editor-inner-blocks.has-overlay {
 		// Remove only the top click overlay.
 		&::after {

packages/block-editor/src/components/inserter/menu.js

@@ -321,7 +321,7 @@ export class InserterMenu extends Component {
 
 						{ !! suggestedItems.length &&
 							<PanelBody
-								title={ _x( 'Most Used', 'blocks' ) }
+								title={ _x( 'Most used', 'blocks' ) }
 								opened={ isPanelOpen( 'suggested' ) }
 								onToggle={ this.onTogglePanel( 'suggested' ) }
 								ref={ this.bindPanel( 'suggested' ) }
@@ -363,7 +363,7 @@ export class InserterMenu extends Component {
 									className="block-editor-inserter__manage-reusable-blocks"
 									href={ addQueryArgs( 'edit.php', { post_type: 'wp_block' } ) }
 								>
-									{ __( 'Manage All Reusable Blocks' ) }
+									{ __( 'Manage all reusable blocks' ) }
 								</a>
 							</PanelBody>
 						) }
@@ -422,7 +422,7 @@ export class InserterMenu extends Component {
 						{ ! hoveredItem && (
 							<div className="block-editor-inserter__menu-help-panel-no-block">
 								<div className="block-editor-inserter__menu-help-panel-no-block-text">
-									<div className="block-editor-inserter__menu-help-panel-title">{ __( 'Content Blocks' ) }</div>
+									<div className="block-editor-inserter__menu-help-panel-title">{ __( 'Content blocks' ) }</div>
 									<p>
 										{ __(
 											'Welcome to the wonderful world of blocks! Blocks are the basis of all content within the editor.'

packages/block-editor/src/components/inserter/test/menu.js

@@ -163,7 +163,7 @@ describe( 'InserterMenu', () => {
 		const activeCategory = element.querySelector(
 			'.components-panel__body.is-opened > .components-panel__body-title'
 		);
-		expect( activeCategory.textContent ).toBe( 'Most Used' );
+		expect( activeCategory.textContent ).toBe( 'Most used' );
 	} );
 
 	it( 'should show nothing if there are no items', () => {
@@ -239,7 +239,7 @@ describe( 'InserterMenu', () => {
 
 	it( 'should show the common category blocks', () => {
 		const element = initializeAllClosedMenuStateAndReturnElement();
-		const commonBlocksTab = getTabButtonWithContent( element, 'Common Blocks' );
+		const commonBlocksTab = getTabButtonWithContent( element, 'Common blocks' );
 
 		TestUtils.Simulate.click( commonBlocksTab );
 
@@ -259,7 +259,7 @@ describe( 'InserterMenu', () => {
 
 	it( 'should disable items with `isDisabled`', () => {
 		const element = initializeMenuDefaultStateAndReturnElement();
-		const layoutTab = getTabButtonWithContent( element, 'Layout Elements' );
+		const layoutTab = getTabButtonWithContent( element, 'Layout elements' );
 
 		TestUtils.Simulate.click( layoutTab );
 
@@ -282,7 +282,7 @@ describe( 'InserterMenu', () => {
 		);
 
 		expect( matchingCategories ).toHaveLength( 2 );
-		expect( matchingCategories[ 0 ].textContent ).toBe( 'Common Blocks' );
+		expect( matchingCategories[ 0 ].textContent ).toBe( 'Common blocks' );
 		expect( matchingCategories[ 1 ].textContent ).toBe( 'Embeds' );
 
 		const visibleBlocks = element.querySelectorAll(
@@ -308,7 +308,7 @@ describe( 'InserterMenu', () => {
 		);
 
 		expect( matchingCategories ).toHaveLength( 2 );
-		expect( matchingCategories[ 0 ].textContent ).toBe( 'Common Blocks' );
+		expect( matchingCategories[ 0 ].textContent ).toBe( 'Common blocks' );
 		expect( matchingCategories[ 1 ].textContent ).toBe( 'Embeds' );
 
 		const visibleBlocks = element.querySelectorAll(

packages/block-library/src/classic/index.js

@@ -22,7 +22,7 @@ export const settings = {
 	supports: {
 		className: false,
 		customClassName: false,
-		// Hide 'Add to Reusable Blocks' on Classic blocks. Showing it causes a
+		// Hide 'Add to Reusable blocks' on Classic blocks. Showing it causes a
 		// confusing UX, because of its similarity to the 'Convert to Blocks' button.
 		reusable: false,
 	},

packages/block-library/src/navigation-link/edit.js

@@ -153,7 +153,7 @@ function NavigationLinkEdit( {
 					<ToolbarButton
 						name="submenu"
 						icon={ <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24"><Path d="M14 5h8v2h-8zm0 5.5h8v2h-8zm0 5.5h8v2h-8zM2 11.5C2 15.08 4.92 18 8.5 18H9v2l3-3-3-3v2h-.5C6.02 16 4 13.98 4 11.5S6.02 7 8.5 7H12V5H8.5C4.92 5 2 7.92 2 11.5z" /><Path fill="none" d="M0 0h24v24H0z" /></SVG> }
-						title={ __( 'Add Submenu' ) }
+						title={ __( 'Add submenu' ) }
 						onClick={ insertLinkBlock }
 					/>
 				</ToolbarGroup>

packages/blocks/src/store/reducer.js

@@ -23,12 +23,12 @@ import { __ } from '@wordpress/i18n';
  * Module Constants
  */
 export const DEFAULT_CATEGORIES = [
-	{ slug: 'common', title: __( 'Common Blocks' ) },
+	{ slug: 'common', title: __( 'Common blocks' ) },
 	{ slug: 'formatting', title: __( 'Formatting' ) },
-	{ slug: 'layout', title: __( 'Layout Elements' ) },
+	{ slug: 'layout', title: __( 'Layout elements' ) },
 	{ slug: 'widgets', title: __( 'Widgets' ) },
 	{ slug: 'embed', title: __( 'Embeds' ) },
-	{ slug: 'reusable', title: __( 'Reusable Blocks' ) },
+	{ slug: 'reusable', title: __( 'Reusable blocks' ) },
 ];
 
 /**

packages/e2e-test-utils/src/switch-editor-mode-to.js

@@ -11,7 +11,7 @@ import { toggleMoreMenu } from './toggle-more-menu';
 export async function switchEditorModeTo( mode ) {
 	await toggleMoreMenu();
 	const [ button ] = await page.$x(
-		`//button[contains(text(), '${ mode } Editor')]`
+		`//button[contains(text(), '${ mode } editor')]`
 	);
 	await button.click( 'button' );
 	await toggleMoreMenu();

packages/e2e-tests/specs/editor/plugins/allowed-blocks.test.js

@@ -41,7 +41,7 @@ describe( 'Allowed Blocks Filter', () => {
 	} );
 
 	it( 'should remove not allowed blocks from the block manager', async () => {
-		await clickOnMoreMenuItem( 'Block Manager' );
+		await clickOnMoreMenuItem( 'Block manager' );
 
 		const BLOCK_LABEL_SELECTOR = '.edit-post-manage-blocks-modal__checklist-item .components-checkbox-control__label';
 		await page.waitForSelector( BLOCK_LABEL_SELECTOR );

packages/e2e-tests/specs/editor/various/__snapshots__/reusable-blocks.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Reusable Blocks multi-selection reusable block can be converted back to regular blocks 1`] = `
+exports[`Reusable blocks multi-selection reusable block can be converted back to regular blocks 1`] = `
 "<!-- wp:paragraph -->
 <p>Hello there!</p>
 <!-- /wp:paragraph -->

packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js

@@ -13,7 +13,7 @@ describe( 'Fullscreen Mode', () => {
 	} );
 
 	it( 'should open the fullscreen mode from the more menu', async () => {
-		await clickOnMoreMenuItem( 'Fullscreen Mode' );
+		await clickOnMoreMenuItem( 'Fullscreen mode' );
 		await toggleMoreMenu();
 
 		const isFullscreenEnabled = await page.$eval( 'body', ( body ) => {

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

@@ -16,7 +16,7 @@ function waitForAndAcceptDialog() {
 	} );
 }
 
-describe( 'Reusable Blocks', () => {
+describe( 'Reusable blocks', () => {
 	beforeAll( async () => {
 		await createNewPost();
 	} );
@@ -37,7 +37,7 @@ describe( 'Reusable Blocks', () => {
 
 		await clickBlockToolbarButton( 'More options' );
 
-		const convertButton = await page.waitForXPath( '//button[text()="Add to Reusable Blocks"]' );
+		const convertButton = await page.waitForXPath( '//button[text()="Add to Reusable blocks"]' );
 		await convertButton.click();
 
 		// Wait for creation to finish
@@ -77,7 +77,7 @@ describe( 'Reusable Blocks', () => {
 
 		await clickBlockToolbarButton( 'More options' );
 
-		const convertButton = await page.waitForXPath( '//button[text()="Add to Reusable Blocks"]' );
+		const convertButton = await page.waitForXPath( '//button[text()="Add to Reusable blocks"]' );
 		await convertButton.click();
 
 		// Wait for creation to finish
@@ -181,7 +181,7 @@ describe( 'Reusable Blocks', () => {
 
 		// Delete the block and accept the confirmation dialog
 		await clickBlockToolbarButton( 'More options' );
-		const deleteButton = await page.waitForXPath( '//button[text()="Remove from Reusable Blocks"]' );
+		const deleteButton = await page.waitForXPath( '//button[text()="Remove from Reusable blocks"]' );
 		await Promise.all( [ waitForAndAcceptDialog(), deleteButton.click() ] );
 
 		// Wait for deletion to finish
@@ -217,7 +217,7 @@ describe( 'Reusable Blocks', () => {
 
 		// Convert block to a reusable block
 		await clickBlockToolbarButton( 'More options' );
-		const convertButton = await page.waitForXPath( '//button[text()="Add to Reusable Blocks"]' );
+		const convertButton = await page.waitForXPath( '//button[text()="Add to Reusable blocks"]' );
 		await convertButton.click();
 
 		// Wait for creation to finish

packages/e2e-tests/specs/editor/various/shortcut-help.test.js

@@ -14,7 +14,7 @@ describe( 'keyboard shortcut help modal', () => {
 	} );
 
 	it( 'displays the shortcut help modal when opened using the menu item in the more menu', async () => {
-		await clickOnMoreMenuItem( 'Keyboard Shortcuts' );
+		await clickOnMoreMenuItem( 'Keyboard shortcuts' );
 		const shortcutHelpModalElements = await page.$$( '.edit-post-keyboard-shortcut-help' );
 		expect( shortcutHelpModalElements ).toHaveLength( 1 );
 	} );

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

@@ -124,10 +124,10 @@ describe( 'Sidebar', () => {
 
 		expect( await findSidebarPanelWithTitle( 'Categories' ) ).toBeDefined();
 		expect( await findSidebarPanelWithTitle( 'Tags' ) ).toBeDefined();
-		expect( await findSidebarPanelWithTitle( 'Featured Image' ) ).toBeDefined();
+		expect( await findSidebarPanelWithTitle( 'Featured image' ) ).toBeDefined();
 		expect( await findSidebarPanelWithTitle( 'Excerpt' ) ).toBeDefined();
 		expect( await findSidebarPanelWithTitle( 'Discussion' ) ).toBeDefined();
-		expect( await findSidebarPanelWithTitle( 'Status & Visibility' ) ).toBeDefined();
+		expect( await findSidebarPanelWithTitle( 'Status & visibility' ) ).toBeDefined();
 
 		await page.evaluate( () => {
 			const { removeEditorPanel } = wp.data.dispatch( 'core/edit-post' );
@@ -142,9 +142,9 @@ describe( 'Sidebar', () => {
 
 		expect( await findSidebarPanelWithTitle( 'Categories' ) ).toBeUndefined();
 		expect( await findSidebarPanelWithTitle( 'Tags' ) ).toBeUndefined();
-		expect( await findSidebarPanelWithTitle( 'Featured Image' ) ).toBeUndefined();
+		expect( await findSidebarPanelWithTitle( 'Featured image' ) ).toBeUndefined();
 		expect( await findSidebarPanelWithTitle( 'Excerpt' ) ).toBeUndefined();
 		expect( await findSidebarPanelWithTitle( 'Discussion' ) ).toBeUndefined();
-		expect( await findSidebarPanelWithTitle( 'Status & Visibility' ) ).toBeUndefined();
+		expect( await findSidebarPanelWithTitle( 'Status & visibility' ) ).toBeUndefined();
 	} );
 } );

packages/edit-post/README.md

@@ -269,7 +269,7 @@ _Returns_
 
 <a name="PluginPostStatusInfo" href="#PluginPostStatusInfo">#</a> **PluginPostStatusInfo**
 
-Renders a row in the Status & Visibility panel of the Document sidebar.
+Renders a row in the Status & visibility panel of the Document sidebar.
 It should be noted that this is named and implemented around the function it serves
 and not its location, which may change in future iterations.
 

packages/edit-post/src/components/header/mode-switcher/index.js

@@ -18,11 +18,11 @@ import shortcuts from '../../../keyboard-shortcuts';
 const MODES = [
 	{
 		value: 'visual',
-		label: __( 'Visual Editor' ),
+		label: __( 'Visual editor' ),
 	},
 	{
 		value: 'text',
-		label: __( 'Code Editor' ),
+		label: __( 'Code editor' ),
 	},
 ];
 

packages/edit-post/src/components/header/writing-menu/index.js

@@ -22,21 +22,21 @@ function WritingMenu() {
 		>
 			<FeatureToggle
 				feature="fixedToolbar"
-				label={ __( 'Top Toolbar' ) }
+				label={ __( 'Top toolbar' ) }
 				info={ __( 'Access all block and document tools in a single place' ) }
 				messageActivated={ __( 'Top toolbar activated' ) }
 				messageDeactivated={ __( 'Top toolbar deactivated' ) }
 			/>
 			<FeatureToggle
 				feature="focusMode"
-				label={ __( 'Spotlight Mode' ) }
+				label={ __( 'Spotlight mode' ) }
 				info={ __( 'Focus on one block at a time' ) }
 				messageActivated={ __( 'Spotlight mode activated' ) }
 				messageDeactivated={ __( 'Spotlight mode deactivated' ) }
 			/>
 			<FeatureToggle
 				feature="fullscreenMode"
-				label={ __( 'Fullscreen Mode' ) }
+				label={ __( 'Fullscreen mode' ) }
 				info={ __( 'Work without distraction' ) }
 				messageActivated={ __( 'Fullscreen mode activated' ) }
 				messageDeactivated={ __( 'Fullscreen mode deactivated' ) }

packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js

@@ -78,7 +78,7 @@ const globalShortcuts = {
 		},
 		{
 			keyCombination: secondary( 'm' ),
-			description: __( 'Switch between Visual Editor and Code Editor.' ),
+			description: __( 'Switch between Visual editor and Code editor.' ),
 		},
 	],
 };