From 702537701f0bd10c52db69d258fca310507444be Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Tue, 28 Nov 2023 12:49:23 +1100
Subject: [PATCH] Adding more translations.

---
 .../screen-revisions/get-revision-changes.js  | 36 +++++++++++--------
 .../screen-revisions/revisions-buttons.js     | 17 +++++++--
 .../global-styles/screen-revisions/style.scss |  5 ++-
 3 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js b/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js
index b83d86ab54f5c8..5ca945f9450777 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/get-revision-changes.js
@@ -4,10 +4,19 @@
 import { __, sprintf } from '@wordpress/i18n';
 
 const translationMap = {
-	border: __( 'Border' ),
-	color: __( 'Colors' ),
-	spacing: __( 'Spacing' ),
-	typography: __( 'Typography' ),
+	elements: __( 'elements' ),
+	variations: __( 'variations' ),
+	css: __( 'CSS' ),
+	filter: __( 'filter' ),
+	border: __( 'border' ),
+	color: __( 'color' ),
+	spacing: __( 'spacing' ),
+	typography: __( 'typography' ),
+	caption: __( 'caption' ),
+	link: __( 'link' ),
+	button: __( 'button' ),
+	heading: __( 'heading' ),
+	':hover': __( 'hover' ),
 	'settings.color.palette': __( 'color palette' ),
 	'settings.color.gradients': __( 'gradients' ),
 	'settings.color.duotone': __( 'duotone colors' ),
@@ -55,23 +64,19 @@ export function getGlobalStylesChanges( { settings = {}, styles = {} } ) {
 	return changes;
 }
 
-function getTranslation( key ) {
-	console.log( 'key', key );
-
+function getTranslation( key, blockNames ) {
 	if ( translationMap[ key ] ) {
 		return translationMap[ key ];
 	}
 	const keyArray = key.split( '.' );
 
 	if ( keyArray?.[ 0 ] === 'blocks' ) {
-		let blockName = keyArray[ 1 ].split( '/' )?.[ 1 ];
-		blockName = blockName.charAt( 0 ).toUpperCase() + blockName.slice( 1 );
-		// @todo maybe getBlockTypes() and find the block name from the block type.
+		const blockName = blockNames[ keyArray[ 1 ] ];
 		return sprintf(
 			// translators: %1$s: block name, %2$s: changed property.
 			__( '%1$s block %2$s' ),
-			blockName.replace( /-/g, ' ' ),
-			keyArray?.[ 2 ]
+			blockName,
+			translationMap[ keyArray[ 2 ] ]
 		);
 	}
 
@@ -79,8 +84,8 @@ function getTranslation( key ) {
 		return sprintf(
 			// translators: %1$s: block name, %2$s: changed property.
 			__( '%1$s element %2$s' ),
-			keyArray?.[ 1 ],
-			keyArray?.[ 2 ]
+			translationMap[ keyArray[ 1 ] ],
+			translationMap[ keyArray[ 2 ] ]
 		);
 	}
 }
@@ -99,6 +104,7 @@ const cache = new Map();
 export function getRevisionChanges(
 	revision,
 	previousRevision,
+	blockNames,
 	maxResults = 4
 ) {
 	if ( cache.has( revision.id ) ) {
@@ -129,7 +135,7 @@ export function getRevisionChanges(
 		// Limit to max results.
 		.slice( 0, maxResults )
 		// Translate the keys.
-		.map( ( key ) => getTranslation( key ) )
+		.map( ( key ) => getTranslation( key, blockNames ) )
 		.filter( ( str ) => !! str )
 		.join( ', ' );
 
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js
index 4a1049aee6dfd6..8524c40b4be4b4 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js
@@ -11,6 +11,8 @@ import { Button } from '@wordpress/components';
 import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { getBlockTypes } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -20,7 +22,18 @@ import { getRevisionChanges } from './get-revision-changes';
 const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;
 
 function ChangedSummary( { revision, previousRevision } ) {
-	const summary = getRevisionChanges( revision, previousRevision );
+	const blockNames = useMemo( () => {
+		const blockTypes = getBlockTypes();
+		return blockTypes.reduce( ( accumulator, { name, title } ) => {
+			accumulator[ name ] = title;
+			return accumulator;
+		}, {} );
+	}, [] );
+	const summary = getRevisionChanges(
+		revision,
+		previousRevision,
+		blockNames
+	);
 
 	if ( ! summary ) {
 		return null;
@@ -199,7 +212,7 @@ function RevisionsButtons( {
 								{ /* eslint-disable-next-line no-nested-ternary */ }
 								{ canApplyRevision ? (
 									<Button
-										variant="primary"
+										variant="secondary"
 										className="edit-site-global-styles-screen-revision__button"
 										onClick={ onSelect }
 									>
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
index 07447f945979ae..def0293abcaaa7 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
@@ -96,6 +96,9 @@
 	justify-content: center;
 	width: 90%;
 	margin: 0 0 $grid-unit-10 $grid-unit-20;
+	&:hover {
+		background: $white;
+	}
 }
 
 .edit-site-global-styles-screen-revisions__description {
@@ -135,7 +138,7 @@
 	margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20;
 	color: $gray-900;
 	display: block;
-	&:first-letter {
+	&::first-letter {
 		text-transform: uppercase;
 	}
 }