Google Docs Embed: fix non localized strings (#36993)

Automattic · Apr 22, 2024 · 3ae452f · 3ae452f
1 parent 48c697d
commit 3ae452f
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 49 deletions.
diff --git a/projects/plugins/jetpack/changelog/fix-google-embed-variations-translations b/projects/plugins/jetpack/changelog/fix-google-embed-variations-translations
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Google Docs Embed: fix non localized strings
diff --git a/projects/plugins/jetpack/extensions/blocks/google-docs-embed/block.json b/projects/plugins/jetpack/extensions/blocks/google-docs-embed/block.json
@@ -24,37 +24,5 @@
 		"variation": {
 			"type": "string"
 		}
-	},
-	"variations": [
-		{
-			"name": "jetpack/google-docs",
-			"isDefault": true,
-			"title": "Google Docs",
-			"description": "Embed a Google Document.",
-			"icon": "<svg viewBox='0 0 64 88' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M58,88H6c-3.3,0-6-2.7-6-6V6c0-3.3,2.7-6,6-6h36l22,22v60C64,85.3,61.3,88,58,88z' /><path fill='#FDFFFF' d='M42,0l22,22H42V0z' /><path fill='#FDFFFF' d='M50,39H14v-5h36V39z M50,46H14v5h36V46z M40,58H14v5h26V58z' /></svg>",
-			"keywords": [ "document", "gsuite", "doc" ],
-			"attributes": { "variation": "jetpack/google-docs" },
-			"isActive": [ "variation" ]
-		},
-		{
-			"name": "jetpack/google-sheets",
-			"isDefault": true,
-			"title": "Google Sheets",
-			"description": "Embed a Google Sheet.",
-			"icon": "<svg viewBox='0 0 64 88' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M58,88H6c-3.3,0-6-2.7-6-6V6c0-3.3,2.7-6,6-6h36l22,22v60C64,85.3,61.3,88,58,88z' /><path fill='#FDFFFF' d='M42,0l22,22H42V0z' /><path fill='#FDFFFF' d='M12,34.5v28h40v-28H12z M17,39.5h12.5V46H17V39.5z M17,51h12.5v6.5H17V51z M47,57.5H34.5V51H47V57.5z M47,46 H34.5v-6.5H47V46z' /></svg>",
-			"keywords": [ "sheet", "spreadsheet" ],
-			"attributes": { "variation": "jetpack/google-sheets" },
-			"isActive": [ "variation" ]
-		},
-		{
-			"name": "jetpack/google-slides",
-			"isDefault": true,
-			"title": "Google Slides",
-			"description": "Embed a Google Slides presentation.",
-			"icon": "<svg viewBox='0 0 64 88' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M58,88H6c-3.3,0-6-2.7-6-6V6c0-3.3,2.7-6,6-6h36l22,22v60C64,85.3,61.3,88,58,88z' /><path fill='#FDFFFF' d='M42,0l22,22H42V0z' /><path fill='#FDFFFF' d='M12,34.5v28h40v-28H12z M47,57.5H17v-18h30V57.5z' /></svg>",
-			"keywords": [ "slide", "presentation", "deck" ],
-			"attributes": { "variation": "jetpack/google-slides" },
-			"isActive": [ "variation" ]
-		}
-	]
+	}
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/google-docs-embed/edit.js b/projects/plugins/jetpack/extensions/blocks/google-docs-embed/edit.js
@@ -1,34 +1,32 @@
-import { getBlockIconProp } from '@automattic/jetpack-shared-extension-utils';
 import { InspectorControls } from '@wordpress/block-editor';
 import { PanelBody, SelectControl } from '@wordpress/components';
 import { Fragment, useEffect } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import metadata from './block.json';
 import Embed from './embed';
+import variations from './variations';
 
-const { variations } = metadata;
 const docsVariation = variations?.find( v => v.name === 'jetpack/google-docs' );
 const sheetsVariation = variations?.find( v => v.name === 'jetpack/google-sheets' );
 const slidesVariation = variations?.find( v => v.name === 'jetpack/google-slides' );
 
 const GOOGLE_DOCUMENT = {
 	type: 'document',
 	title: docsVariation?.title,
-	icon: getBlockIconProp( docsVariation ),
+	icon: docsVariation.icon,
 	patterns: [ /^(http|https):\/\/(docs\.google.com)\/document\/d\/([A-Za-z0-9_-]+).*?$/i ],
 };
 
 const GOOGLE_SPREADSHEET = {
 	type: 'spreadsheets',
 	title: sheetsVariation?.title,
-	icon: getBlockIconProp( sheetsVariation ),
+	icon: sheetsVariation.icon,
 	patterns: [ /^(http|https):\/\/(docs\.google.com)\/spreadsheets\/d\/([A-Za-z0-9_-]+).*?$/i ],
 };
 
 const GOOGLE_SLIDE = {
 	type: 'presentation',
 	title: slidesVariation?.title,
-	icon: getBlockIconProp( slidesVariation ),
+	icon: slidesVariation.icon,
 	patterns: [ /^(http|https):\/\/(docs\.google.com)\/presentation\/d\/([A-Za-z0-9_-]+).*?$/i ],
 };
 

diff --git a/projects/plugins/jetpack/extensions/blocks/google-docs-embed/editor.js b/projects/plugins/jetpack/extensions/blocks/google-docs-embed/editor.js
@@ -3,11 +3,13 @@ import metadata from './block.json';
 import edit from './edit';
 import save from './save'; // TODO: Replace
 import transforms from './transforms';
+import variations from './variations';
 
 import './editor.scss';
 
 registerJetpackBlockFromMetadata( metadata, {
 	edit,
 	save,
 	transforms: transforms( metadata.name ),
+	variations,
 } );
diff --git a/projects/plugins/jetpack/extensions/blocks/google-docs-embed/variations.js b/projects/plugins/jetpack/extensions/blocks/google-docs-embed/variations.js
@@ -0,0 +1,42 @@
+import { getBlockIconProp } from '@automattic/jetpack-shared-extension-utils';
+import { __ } from '@wordpress/i18n';
+
+const variations = [
+	{
+		name: 'jetpack/google-docs',
+		isDefault: true,
+		title: __( 'Google Docs', 'jetpack' ),
+		description: __( 'Embed a Google Document.', 'jetpack' ),
+		icon: "<svg viewBox='0 0 64 88' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M58,88H6c-3.3,0-6-2.7-6-6V6c0-3.3,2.7-6,6-6h36l22,22v60C64,85.3,61.3,88,58,88z' /><path fill='#FDFFFF' d='M42,0l22,22H42V0z' /><path fill='#FDFFFF' d='M50,39H14v-5h36V39z M50,46H14v5h36V46z M40,58H14v5h26V58z' /></svg>",
+		keywords: [ __( 'document', 'jetpack' ), __( 'gsuite', 'jetpack' ), __( 'doc', 'jetpack' ) ],
+		attributes: { variation: 'jetpack/google-docs' },
+		isActive: [ 'variation' ],
+	},
+	{
+		name: 'jetpack/google-sheets',
+		isDefault: true,
+		title: __( 'Google Sheets', 'jetpack' ),
+		description: __( 'Embed a Google Sheet.', 'jetpack' ),
+		icon: "<svg viewBox='0 0 64 88' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M58,88H6c-3.3,0-6-2.7-6-6V6c0-3.3,2.7-6,6-6h36l22,22v60C64,85.3,61.3,88,58,88z' /><path fill='#FDFFFF' d='M42,0l22,22H42V0z' /><path fill='#FDFFFF' d='M12,34.5v28h40v-28H12z M17,39.5h12.5V46H17V39.5z M17,51h12.5v6.5H17V51z M47,57.5H34.5V51H47V57.5z M47,46 H34.5v-6.5H47V46z' /></svg>",
+		keywords: [ __( 'sheet', 'jetpack' ), __( 'spreadsheet', 'jetpack' ) ],
+		attributes: { variation: 'jetpack/google-sheets' },
+		isActive: [ 'variation' ],
+	},
+	{
+		name: 'jetpack/google-slides',
+		isDefault: true,
+		title: __( 'Google Slides', 'jetpack' ),
+		description: __( 'Embed a Google Slides presentation.', 'jetpack' ),
+		icon: "<svg viewBox='0 0 64 88' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M58,88H6c-3.3,0-6-2.7-6-6V6c0-3.3,2.7-6,6-6h36l22,22v60C64,85.3,61.3,88,58,88z' /><path fill='#FDFFFF' d='M42,0l22,22H42V0z' /><path fill='#FDFFFF' d='M12,34.5v28h40v-28H12z M47,57.5H17v-18h30V57.5z' /></svg>",
+
+		keywords: [
+			__( 'slide', 'jetpack' ),
+			__( 'presentation', 'jetpack' ),
+			__( 'deck', 'jetpack' ),
+		],
+		attributes: { variation: 'jetpack/google-slides' },
+		isActive: [ 'variation' ],
+	},
+].map( variation => ( { ...variation, icon: getBlockIconProp( variation ) } ) );
+
+export default variations;
diff --git a/projects/plugins/jetpack/extensions/shared/register-jetpack-block.js b/projects/plugins/jetpack/extensions/shared/register-jetpack-block.js
@@ -83,16 +83,6 @@ export function registerJetpackBlockFromMetadata( metadata, settings, childBlock
 		icon: getBlockIconProp( metadata ),
 		attributes: metadata.attributes || {},
 	};
-	const { variations } = metadata;
-
-	if ( Array.isArray( variations ) && variations.length > 0 ) {
-		mergedSettings.variations = variations.map( variation => {
-			return {
-				...variation,
-				icon: getBlockIconProp( variation ),
-			};
-		} );
-	}
 
 	return registerJetpackBlock( metadata, mergedSettings, childBlocks, prefix );
 }