Add individual headings to the elements translations (#57472)

Update tests to use custom, registered block
WordPress · Jan 2, 2024 · 9e0747e · 9e0747e · github-actions · Jan 2, 2024
1 parent f364b68
commit 9e0747e
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 17 deletions.
diff --git a/packages/block-editor/src/components/global-styles/get-global-styles-changes.js b/packages/block-editor/src/components/global-styles/get-global-styles-changes.js
@@ -16,6 +16,12 @@ const translationMap = {
 	link: __( 'Link' ),
 	button: __( 'Button' ),
 	heading: __( 'Heading' ),
+	h1: __( 'H1' ),
+	h2: __( 'H2' ),
+	h3: __( 'H3' ),
+	h4: __( 'H4' ),
+	h5: __( 'H5' ),
+	h6: __( 'H6' ),
 	'settings.color': __( 'Color settings' ),
 	'settings.typography': __( 'Typography settings' ),
 	'styles.color': __( 'Colors' ),
@@ -54,10 +60,11 @@ function getTranslation( key ) {
 	}
 
 	if ( keyArray?.[ 0 ] === 'elements' ) {
+		const elementName = translationMap[ keyArray[ 1 ] ] || keyArray[ 1 ];
 		return sprintf(
 			// translators: %s: element name, e.g., heading button, link, caption.
 			__( '%s element' ),
-			translationMap[ keyArray[ 1 ] ]
+			elementName
 		);
 	}
 

diff --git a/packages/block-editor/src/components/global-styles/test/get-global-styles-changes.js b/packages/block-editor/src/components/global-styles/test/get-global-styles-changes.js
@@ -3,19 +3,31 @@
  */
 import getGlobalStylesChanges from '../get-global-styles-changes';
 
-jest.mock( '@wordpress/blocks', () => {
-	return {
-		...jest.requireActual( '@wordpress/blocks' ),
-		getBlockTypes: jest.fn( () => [
-			{
-				name: 'core/paragraph',
-				title: 'Test Paragraph',
-			},
-		] ),
-	};
-} );
+/**
+ * WordPress dependencies
+ */
+import {
+	registerBlockType,
+	unregisterBlockType,
+	getBlockTypes,
+} from '@wordpress/blocks';
 
 describe( 'getGlobalStylesChanges', () => {
+	beforeEach( () => {
+		registerBlockType( 'core/test-fiori-di-zucca', {
+			save: () => {},
+			category: 'text',
+			title: 'Test pumpkin flowers',
+			edit: () => {},
+		} );
+	} );
+
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
 	const revision = {
 		id: 10,
 		styles: {
@@ -41,6 +53,11 @@ describe( 'getGlobalStylesChanges', () => {
 						letterSpacing: '37px',
 					},
 				},
+				h3: {
+					typography: {
+						lineHeight: '1.2',
+					},
+				},
 				caption: {
 					color: {
 						text: 'var(--wp--preset--color--pineapple)',
@@ -51,7 +68,7 @@ describe( 'getGlobalStylesChanges', () => {
 				text: 'var(--wp--preset--color--tomato)',
 			},
 			blocks: {
-				'core/paragraph': {
+				'core/test-fiori-di-zucca': {
 					color: {
 						text: '#000000',
 					},
@@ -96,6 +113,16 @@ describe( 'getGlobalStylesChanges', () => {
 						letterSpacing: '37px',
 					},
 				},
+				h3: {
+					typography: {
+						lineHeight: '2',
+					},
+				},
+				h6: {
+					typography: {
+						lineHeight: '1.2',
+					},
+				},
 				caption: {
 					typography: {
 						fontSize: '1.11rem',
@@ -118,7 +145,7 @@ describe( 'getGlobalStylesChanges', () => {
 				background: 'var(--wp--preset--color--pumpkin)',
 			},
 			blocks: {
-				'core/paragraph': {
+				'core/test-fiori-di-zucca': {
 					color: {
 						text: '#fff',
 					},
@@ -144,8 +171,10 @@ describe( 'getGlobalStylesChanges', () => {
 		expect( resultA ).toEqual( [
 			'Colors',
 			'Typography',
-			'Test Paragraph block',
+			'Test pumpkin flowers block',
+			'H3 element',
 			'Caption element',
+			'H6 element',
 			'Link element',
 			'Color settings',
 		] );
@@ -162,8 +191,8 @@ describe( 'getGlobalStylesChanges', () => {
 		expect( resultA ).toEqual( [
 			'Colors',
 			'Typography',
-			'Test Paragraph block',
-			'…and 3 more changes.',
+			'Test pumpkin flowers block',
+			'…and 5 more changes.',
 		] );
 	} );