Customize block titles

Automattic · Oct 21, 2024 · c8cefe7 · c8cefe7
1 parent 04b367d
commit c8cefe7
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 5 deletions.
diff --git a/src/block/blocks/image/index.ts b/src/block/blocks/image/index.ts
@@ -1,14 +1,25 @@
 import type { BlockConfiguration } from '@wordpress/blocks';
 import { registerBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import { KnownElemNames } from '../../edit';
 import Edit from './edit';
 import { ImageIcon } from '../../components';
 import metadata from './block.json';
 
+const title = __( 'Image', 'gravatar-enhanced' );
+
 const blockConfig: BlockConfiguration = {
 	...metadata,
 	icon: ImageIcon,
-	title: __( 'Image', 'gravatar-enhanced' ),
+	// @ts-ignore
+	__experimentalLabel: ( { name } ) => {
+		if ( ! name ) {
+			return title;
+		}
+
+		return name === KnownElemNames.AVATAR ? __( 'Avatar', 'gravatar-enhanced' ) : name;
+	},
+	title,
 	description: __( 'The Image block for the Gravatar block.', 'gravatar-enhanced' ),
 	edit: Edit,
 };

diff --git a/src/block/blocks/link/index.ts b/src/block/blocks/link/index.ts
@@ -1,14 +1,21 @@
 import type { BlockConfiguration } from '@wordpress/blocks';
 import { registerBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import { KnownElemNames } from '../../edit';
 import Edit from './edit';
 import { LinkIcon } from '../../components';
 import metadata from './block.json';
 
+const title = __( 'Link', 'gravatar-enhanced' );
+
 const blockConfig: BlockConfiguration = {
 	...metadata,
 	icon: LinkIcon,
-	title: __( 'Link', 'gravatar-enhanced' ),
+	// @ts-ignore
+	__experimentalLabel: ( { name } ) => {
+		return name === KnownElemNames.VIEW_PROFILE ? __( 'Profile Link', 'gravatar-enhanced' ) : title;
+	},
+	title,
 	description: __( 'The Link block for the Gravatar block.', 'gravatar-enhanced' ),
 	edit: Edit,
 };

diff --git a/src/block/blocks/paragraph/index.ts b/src/block/blocks/paragraph/index.ts
@@ -1,14 +1,32 @@
 import type { BlockConfiguration } from '@wordpress/blocks';
 import { registerBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import { KnownElemNames } from '../../edit';
 import Edit from './edit';
 import { ParagraphIcon } from '../../components';
 import metadata from './block.json';
 
+const title = __( 'Paragraph', 'gravatar-enhanced' );
+
 const blockConfig: BlockConfiguration = {
 	...metadata,
 	icon: ParagraphIcon,
-	title: __( 'Paragraph', 'gravatar-enhanced' ),
+	// @ts-ignore
+	__experimentalLabel: ( { name } ) => {
+		switch ( name ) {
+			case KnownElemNames.JOB:
+				return __( 'Job Title', 'gravatar-enhanced' );
+			case KnownElemNames.COMPANY:
+				return __( 'Company', 'gravatar-enhanced' );
+			case KnownElemNames.LOCATION:
+				return __( 'Location', 'gravatar-enhanced' );
+			case KnownElemNames.DESCRIPTION:
+				return __( 'About Me', 'gravatar-enhanced' );
+			default:
+				return title;
+		}
+	},
+	title,
 	description: __( 'The Paragraph block for the Gravatar block.', 'gravatar-enhanced' ),
 	edit: Edit,
 };

diff --git a/src/block/edit.tsx b/src/block/edit.tsx
@@ -263,9 +263,9 @@ export default function Edit( { attributes, setAttributes, clientId }: BlockEdit
 				...verified_accounts,
 			];
 			const verifiedAccounts = verified_accounts.map(
-				( { url, service_type, service_icon, service_label, is_hidden } ) =>
+				( { url, service_icon, service_label, is_hidden } ) =>
 					! is_hidden &&
-					getBlockTempate( BlockNames.IMAGE, service_type, {
+					getBlockTempate( BlockNames.IMAGE, service_label, {
 						linkUrl: url,
 						imageUrl: service_icon,
 						imageWidth: 32,