fix: string translation #2401

Soare-Robert-Daniel · 2024-10-07T14:08:22Z

Closes https://github.com/Codeinwp/otter-internals/issues/232

Summary

Fixed the issues related to translation and some errors reported by Eslint.

Note

I found that the eEslint config file was not working with wp presets. Thus, after fixing it, there are some extra fixes in this PR based on WordPress rules. Some were marked as warnings since they are not a priority for now.

The generate .pot file with ALL STRINGS: https://pastebin.com/cKzTCthH

Archive with all strings and separated one with only pro strings: Archive.zip (generated with wp i18n make-pot . languages/otter-all-strings.pot and wp i18n make-pot . languages/otter-pro-strings.pot --include=src/pro,otter-pro )

Testing

Check if all the necessary strings are in the pot file.

Checklist before the final review

Included E2E or unit tests for the changes in this PR.
Visual elements are not affected by independent changes.
It is at least compatible with the minimum WordPress version.
It loads additional script in frontend only if it is required.
Does not impact the Core Web Vitals.
In case of deprecation, old blocks are safely migrated.
It is usable in Widgets and FSE.
Copy/Paste is working if the attributes are modified.
PR is following the best practices

pirate-bot · 2024-10-09T12:30:43Z

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	271.38 KB	271.41 KB	27 B (0.01%)
Blocks	1.56 MB	1.56 MB	503 B (0.03%)
CSS	100.87 KB	100.89 KB	20 B (0.02%)
Dashboard	198.32 KB	198.45 KB	127 B (0.06%)
Onboarding	161.11 KB	161.1 KB	-14 B (-0.01%)
Export Import	97.78 KB	97.78 KB	0 B (0.00%)
Pro	422.93 KB	423.27 KB	350 B (0.08%)

pirate-bot · 2024-10-09T12:31:20Z

Plugin build for e5217af is ready 🛎️!

Download Otter – Page Builder Blocks & Extensions for Gutenberg - Production ~ Development
Download Otter Pro - Production ~ Development
Download Blocks Animation - Production ~ Development
Download Blocks CSS - Production ~ Development
Download Blocks Export Import - Production ~ Development

pirate-bot · 2024-10-17T08:02:24Z

E2E Tests

Playwright Test Status:

Performance Results

serverResponse: 246.6, firstPaint: 553.9, domContentLoaded: 1560.55, loaded: 1561.4, firstContentfulPaint: 3498.45, firstBlock: 7982.15, type: 14.54, minType: 12.56, maxType: 18.24, typeContainer: 9.29, minTypeContainer: 8.01, maxTypeContainer: 11.22, focus: 32.36, minFocus: 29.72, maxFocus: 36.05, inserterOpen: 22.46, minInserterOpen: 19.36, maxInserterOpen: 24.56, inserterSearch: 0.86, minInserterSearch: 0.74, maxInserterSearch: 0.97, inserterHover: 3.37, minInserterHover: 2.72, maxInserterHover: 6.29, listViewOpen: 148.81, minListViewOpen: 140.94, maxListViewOpen: 163.68

src/blocks/blocks/button-group/button/inspector.js

HardeepAsrani · 2024-10-18T13:46:11Z

src/blocks/blocks/button-group/group/deprecated.js

@@ -161,7 +161,7 @@ const deprecated = [{
 							'wp-block-themeisle-blocks-button',
 							`wp-block-themeisle-blocks-button-${ i }`
 						) }
-						style={ buttonStyle }
+						style={ buttonStyle } rel="noreferrer"


We don't want to modify deprecated blocks. This might cause errors with users updating from old HTML structure.

HardeepAsrani · 2024-10-18T13:47:55Z

src/blocks/blocks/form/edit.js

@@ -651,7 +651,7 @@ const Edit = ({
 			} else {
 				createNotice(
 					'error',
-					__( 'An error has occurred: ', 'otter-blocks' ) + ( res?.error || __( 'unknown', 'otter-blocks' ) ),
+					__( 'An error has occurred:', 'otter-blocks' ) + ( res?.error || __( 'unknown', 'otter-blocks' ) ),


The space there is intentional so the error message has a space between the previous sentence. Either we can add it back or switch to using sprintf instead.

HardeepAsrani · 2024-10-18T13:48:12Z

src/blocks/blocks/form/edit.js

@@ -700,7 +700,7 @@ const Edit = ({
 			} else {
 				createNotice(
 					'error',
-					__( 'An error has occurred: ', 'otter-blocks' ) + ( res?.error || __( 'unknown', 'otter-blocks' ) + __( '. Check your provider for confirmation.', 'otter-blocks' ) ),
+					__( 'An error has occurred:', 'otter-blocks' ) + ( res?.error || __( 'unknown', 'otter-blocks' ) + __( '. Check your provider for confirmation.', 'otter-blocks' ) ),


Same as before.

HardeepAsrani · 2024-10-18T13:50:33Z

src/blocks/blocks/leaflet-map/utility.js

@@ -19,7 +19,7 @@ async function makeSearchRequest( location ) {
 		return response.json();
 	}

-	return console.warn( __( 'An error has occured: ', 'otter-blocks' ) + response.status );
+	return console.warn( __( 'An error has occured:', 'otter-blocks' ) + response.status );


This will also be better served with sprintf.

HardeepAsrani · 2024-10-18T13:50:39Z

src/blocks/blocks/leaflet-map/edit.js

@@ -157,7 +157,7 @@ const Edit = ({
 			});

 		default:
-			console.warn( __( 'The action for the leaflet block do not have a defined action in marker\'s reducer: ', 'otter-blocks' ) + action.type );
+			console.warn( __( 'The action for the leaflet block do not have a defined action in marker\'s reducer:', 'otter-blocks' ) + action.type );


This will also be better served with sprintf.

HardeepAsrani · 2024-10-18T13:51:23Z

src/blocks/blocks/popup/save.js

@@ -36,7 +36,7 @@ const Save = ({
 				<div className="otter-popup__modal_content">
 					{ attributes.showClose && (
 						<div className="otter-popup__modal_header">
-							<button type="button" class="components-button has-icon"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button>
+							<button type="button" className="components-button has-icon"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button>


This is frontend HTML, it should not be using className but class as attribute.

Upon reviewing this more, I think this is fine. I'll just double check this to confirm it doesn't cause any invalidation with the change in save.js.

HardeepAsrani · 2024-10-18T13:52:03Z

src/blocks/blocks/posts/components/layout/index.js

@@ -176,7 +176,7 @@ export const PostsMeta = ({ attributes, element, post, author, categories }) =>
 		if ( attributes.displayAuthor && undefined !== author ) {

 			/* translators: %s Author of the post */
-			postedOn += sprintf( __( ' by %s', 'otter-blocks' ), author.name );
+			postedOn += sprintf( __( 'by %s', 'otter-blocks' ), author.name );


We use space here to avoid there not being space between this and the previous element.

HardeepAsrani · 2024-10-18T13:55:54Z

src/blocks/blocks/slider/deprecated.js

We shouldn't be updating save methods. It can cause invalidation.

HardeepAsrani · 2024-10-18T13:56:26Z

src/blocks/blocks/tabs/group/edit.js

@@ -199,7 +198,7 @@ const Edit = ({

 	const addTab = () => {
 		const itemBlock = createBlock( 'themeisle-blocks/tabs-item', {
-			title: __( 'Tab ', 'otter-blocks' ) + ( ( children?.length ?? 0 ) + 1 )
+			title: __( 'Tab', 'otter-blocks' ) + ( ( children?.length ?? 0 ) + 1 )


This will also be better served with sprintf. We want there to be a space in between.

HardeepAsrani · 2024-10-18T13:57:12Z

src/blocks/blocks/timeline/item/save.js

We don't want to update the save.js file + this is not valid HTML.

Same as before, here I will just confirm to make sure this doesn't cause any invalidation with changing of save.js file.

HardeepAsrani · 2024-10-18T13:58:50Z

src/blocks/components/typography-selector-control/index.tsx

@@ -299,7 +296,7 @@ const TypographySelectorControl = ( props: TypographySelectorControlProps ) => {
 													{ defaultStates.componentNames?.[component] }
 												</MenuItem>;
 											}
-											return <Fragment></Fragment>;
+											return <Fragment key={index}></Fragment>;


We can just replace null here.

HardeepAsrani · 2024-10-18T14:00:20Z

src/blocks/frontend/live-search/index.ts

+			
 			if ( ! keys.includes( keyEvent.key ) ) {
 				return;
 			}
-
+			
 			if ( 'Escape' === keyEvent.key ) {
 				inputElement.blur();
 				resultsContainer = removeResultsContainer( block, resultsContainer );
 				return;
 			}
-
+			


We can remove these empty tabs.

HardeepAsrani · 2024-10-18T14:07:29Z

src/blocks/blocks/icon-list/item/edit.js

@@ -126,7 +126,7 @@ const Edit = ({

 			<div { ...blockProps }>
 				{ 'image' === attributes.library && isURL ? (
-					<img src={ attributes.icon } />
+					<img src={ attributes.icon } alt="" />


Doesn't make much sense to have empty alt text.

HardeepAsrani · 2024-10-18T14:07:47Z

src/blocks/blocks/icon-list/item/edit.js

@@ -100,7 +100,7 @@ const Edit = ({
 			const parentClientId = select( 'core/block-editor' ).getBlockParents( clientId ).at( -1 );
 			const parentBlock = select( 'core/block-editor' ).getBlock( parentClientId );

-			setAttributes({ content: __( 'List item ', 'otter-blocks' ) + parentBlock.innerBlocks.length });
+			setAttributes({ content: __( 'List item', 'otter-blocks' ) + parentBlock.innerBlocks.length });


We can use sprintf here to preserve the spacing.

HardeepAsrani · 2024-10-18T14:10:48Z

src/blocks/components/prompt/index.tsx

-		setResult( resultHistory?.[ resultHistoryIndex ].result );
-		setTokenUsageDescription( __( 'Used tokens: ', 'otter-blocks' ) + resultHistory[ resultHistoryIndex ].meta.usedToken );
+
+		setTokenUsageDescription( __( 'Used tokens:', 'otter-blocks' ) + resultHistory[ resultHistoryIndex ].meta.usedToken );


We can use sprintf here to preserve the spacing.

HardeepAsrani · 2024-10-18T14:17:00Z

src/blocks/plugins/dynamic-content/media/index.js

+			
 			const modal = activeFrame.querySelector( '.media-frame-content' );
 			if ( ! modal ) {
 				return false;
 			}
-
+			


We can remove empty tabs.

HardeepAsrani · 2024-10-18T14:20:15Z

src/blocks/plugins/upsell-block/index.js

@@ -62,7 +62,7 @@ const edit = props => {
 			<h3>{ __( 'There are 30+ more patterns and full page designs available in Otter PRO.', 'otter-blocks' ) }</h3>

 			<div className="o-block-patterns-upsell__actions">
-				<a href={ setUtm( window.themeisleGutenberg.patternsLink, 'patterns', 'otter-blockspatternslibrary' ) } target="_blank">
+				<a href={ setUtm( window.themeisleGutenberg.patternsLink, 'patterns', 'otter-blockspatternslibrary' ) } target="_blank" rel="noreferrer">


We don't want to hide referrer here. It will just be bad for our own analytics.

HardeepAsrani · 2024-10-18T14:22:34Z

src/css/inject-css.js

 	const isTypingNow = isTyping();
-
+	


We can remove this extra spacing.

HardeepAsrani · 2024-10-18T14:23:25Z

src/dashboard/components/Main.js

@@ -99,7 +103,7 @@ const Main = ({
 					<NoticeCard
 						slug="feedback"
 					>
-						<img src={ window.otterObj.assetsPath + 'images/dashboard-feedback.png' } style={ { maxWidth: '100%', objectFit: 'cover' } }/>
+						<img src={ window.otterObj.assetsPath + 'images/dashboard-feedback.png' } style={ { maxWidth: '100%', objectFit: 'cover' } } alt="" />


We can remove the empty alt or add some alt text there.

HardeepAsrani · 2024-10-18T14:23:35Z

src/dashboard/components/NeveSidebarUpsell.js

We can remove the empty alt or add some alt text there.

HardeepAsrani · 2024-10-18T14:25:42Z

src/pro/blocks/form-hidden-field/edit.js

@@ -44,7 +44,7 @@ const Edit = ({
 		className: 'wp-block wp-block-themeisle-blocks-form-input'
 	});

-	const placeholder = attributes.paramName ? __( 'Get the value of the URL param: ', 'otter-blocks' ) + attributes.paramName : '';
+	const placeholder = attributes.paramName ? __( 'Get the value of the URL param:', 'otter-blocks' ) + attributes.paramName : '';


We can use sprintf here to preserve the space.

HardeepAsrani · 2024-10-18T14:26:17Z

src/pro/components/webhook-editor/index.tsx

@@ -94,7 +94,7 @@ const WebhookEditor = ( props: WebhookEditorProps ) => {
 		for ( const webhook of webhooksToSave ) {
 			const check = checkWebhook( webhook );
 			if ( true !== check ) {
-				const msg = __( 'There was an error saving the webhook: ', 'otter-blocks' ) + webhook?.name + '\n';
+				const msg = __( 'There was an error saving the webhook:', 'otter-blocks' ) + webhook?.name + '\n';


We can use sprintf here to preserve the space.

HardeepAsrani

Good job, this is a chonky boy. I've left comments with some quality of life improvements and some about changes that can cause invalidation, specially relating to all the save.js and deprecation files.

Apart from that, if you can do it quickly, it might be worth to replace all the instances of <Fragment></Fragment> with the <></> shorthand.

Soare-Robert-Daniel self-assigned this Oct 7, 2024

Soare-Robert-Daniel linked an issue Oct 7, 2024 that may be closed by this pull request

Prepare the plugin for localization #2375

Open

Soare-Robert-Daniel added the pr-checklist-skip Allow this Pull Request to skip checklist. label Oct 9, 2024

Soare-Robert-Daniel marked this pull request as ready for review October 9, 2024 12:24

pirate-bot added the pr-checklist-complete The Pull Request checklist is complete. (automatic label) label Oct 9, 2024

Soare-Robert-Daniel force-pushed the fix/string-translation branch from 4ce3aac to 25fddec Compare October 9, 2024 12:30

fix: string translation

afa6a68

Soare-Robert-Daniel force-pushed the fix/string-translation branch 2 times, most recently from e3418e1 to 8a70889 Compare October 16, 2024 07:46

fix: lint and its reported problems

dcab03d

Soare-Robert-Daniel force-pushed the fix/string-translation branch from 8a70889 to dcab03d Compare October 16, 2024 14:24

Soare-Robert-Daniel requested a review from HardeepAsrani October 16, 2024 14:27

Soare-Robert-Daniel added 2 commits October 17, 2024 10:33

fix: type in function name

047e9ee

chore: update playwright

2a1c6ba