fix: translation review

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

@@ -152,6 +152,7 @@ const deprecated = [{
 				padding: `${ attributes.data[i].paddingTopBottom }px ${ attributes.data[i].paddingLeftRight }px`
 			};
 
+			/* eslint-disable react/jsx-no-target-blank */
 			return (
 				<Fragment>
 					<a
@@ -161,7 +162,7 @@ const deprecated = [{
 							'wp-block-themeisle-blocks-button',
 							`wp-block-themeisle-blocks-button-${ i }`
 						) }
-						style={ buttonStyle } rel="noreferrer"
+						style={ buttonStyle }
 					>
 						{ ( 'left' === attributes.data[i].iconType || 'only' === attributes.data[i].iconType ) && (
 							<i className={ classnames(
@@ -186,6 +187,7 @@ const deprecated = [{
 					</a>
 				</Fragment>
 			);
+			/* eslint-enable react/jsx-no-target-blank */
 		};
 
 		return (

src/blocks/blocks/countdown/save.tsx

@@ -62,7 +62,7 @@ const DisplayTime = ({
 			</div>
 		</div>
 	) : (
-		<Fragment></Fragment>
+		<></>
 	);
 };
 

src/blocks/blocks/form/edit.js

@@ -10,7 +10,7 @@ import hash from 'object-hash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 import api from '@wordpress/api';
 
@@ -651,7 +651,11 @@ const Edit = ({
 			} else {
 				createNotice(
 					'error',
-					__( 'An error has occurred:', 'otter-blocks' ) + ( res?.error || __( 'unknown', 'otter-blocks' ) ),
+					sprintf(
+						// translators: %1$s the error message of the test email
+						__( 'An error has occurred: %1$s', 'otter-blocks' ),
+						res?.error || __( 'unknown', 'otter-blocks' )
+					),
 					{
 						isDismissible: true,
 						type: 'snackbar'
@@ -700,7 +704,11 @@ const Edit = ({
 			} else {
 				createNotice(
 					'error',
-					__( 'An error has occurred:', 'otter-blocks' ) + ( res?.error || __( 'unknown', 'otter-blocks' ) + __( '. Check your provider for confirmation.', 'otter-blocks' ) ),
+					sprintf(
+						// translators: %s is the error message from the email provider.
+						__( 'An error has occurred: %s. Check your provider for confirmation.', 'otter-blocks' ),
+						res?.error || __( 'unknown', 'otter-blocks' )
+					),
 					{
 						isDismissible: true,
 						type: 'snackbar'

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 import {
 	RichText,
@@ -100,7 +100,8 @@ 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 });
+			// translators: %d: the number of List item blocks.
+			setAttributes({ content: sprintf( __( 'List item %d', 'otter-blocks' ), parentBlock.innerBlocks.length ) });
 		}
 	}, []);
 
@@ -126,7 +127,8 @@ const Edit = ({
 
 			<div { ...blockProps }>
 				{ 'image' === attributes.library && isURL ? (
-					<img src={ attributes.icon } alt="" />
+					/* eslint-disable-next-line jsx-a11y/alt-text */
+					<img src={ attributes.icon } />
 				) : (
 					'themeisle-icons' === attributes.library && attributes.icon && Icon !== undefined ? (
 						<Icon

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

@@ -11,7 +11,7 @@ import {
 	merge
 } from 'lodash';
 
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 import { useBlockProps } from '@wordpress/block-editor';
 
@@ -157,7 +157,8 @@ 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 );
+			// translators: %s is the action type that is not defined in the marker's reducer
+			console.warn( sprintf( __( 'The action for the leaflet block do not have a defined action in marker\'s reducer: %s', 'otter-blocks' ), action.type ) );
 		}
 
 		return oldState;

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

@@ -18,8 +18,14 @@ async function makeSearchRequest( location ) {
 	if ( response.ok && 200 === response.status ) {
 		return response.json();
 	}
-
-	return console.warn( __( 'An error has occured:', 'otter-blocks' ) + response.status );
+
+	return console.warn(  
+		sprintf( 
+			// translators: %s: HTTP status code
+			__( 'An error has occurred: %s', 'otter-blocks' ), 
+			response.status 
+		) 
+	);
 }
 
 export async function getLocation( location ) {

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

@@ -174,9 +174,9 @@ 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 );
+			
+			/* translators: %1$s is the date, %2$s is the author of the post */
+			postedOn = sprintf( __( '%1$s by %2$s', 'otter-blocks' ), postedOn, author.name );
 		}
 
 		meta.push( postedOn );

src/blocks/blocks/slider/deprecated.js

@@ -110,32 +110,35 @@ const deprecated = [{
 							height: `${ attributes.height }px`
 						} }
 					>
-						{ attributes.images.map( image => {
-							return (
-								<div
-									key={ image.id }
-									className="wp-block-themeisle-blocks-slider-item-wrapper glide__slide"
-									tabIndex="0"
-								>
-									<figure>
-										<img
-											className="wp-block-themeisle-blocks-slider-item"
-											src={ image.url }
-											alt={ image.alt }
-											title={ image.alt }
-											data-id={ image.id }
-										/>
-
-										{ ! RichText.isEmpty( image.caption ) && (
-											<RichText.Content
-												tagName="figcaption"
-												value={ image.caption }
+						{
+							attributes.images.map( image => {
+								return (
+									// eslint-disable-next-line react/jsx-key
+									<div
+										className="wp-block-themeisle-blocks-slider-item-wrapper glide__slide"
+										tabIndex="0"
+									>
+										<figure>
+											<img
+												key={ image.id }
+												className="wp-block-themeisle-blocks-slider-item"
+												src={ image.url }
+												alt={ image.alt }
+												title={ image.alt }
+												data-id={ image.id }
 											/>
-										) }
-									</figure>
-								</div>
-							);
-						}) }
+
+											{ ! RichText.isEmpty( image.caption ) && (
+												<RichText.Content
+													tagName="figcaption"
+													value={ image.caption }
+												/>
+											) }
+										</figure>
+									</div>
+								);
+							})
+						}
 					</div>
 
 					<SliderControls attributes={ attributes } />
@@ -191,13 +194,14 @@ const deprecated = [{
 					<div className="glide__slides">
 						{ attributes.images.map( image => {
 							return (
+								// eslint-disable-next-line react/jsx-key
 								<div
-									key={ image.id }
 									className="wp-block-themeisle-blocks-slider-item-wrapper glide__slide"
 									tabIndex="0"
 								>
 									<figure>
 										<img
+											key={ image.id }
 											className="wp-block-themeisle-blocks-slider-item"
 											src={ image.url }
 											alt={ image.alt }

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies.
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 import { createBlock } from '@wordpress/blocks';
 
@@ -198,7 +198,11 @@ const Edit = ({
 
 	const addTab = () => {
 		const itemBlock = createBlock( 'themeisle-blocks/tabs-item', {
-			title: __( 'Tab', 'otter-blocks' ) + ( ( children?.length ?? 0 ) + 1 )
+			title: sprintf(
+				// Translators: %d is the tab number.
+				__( 'Tab %d', 'otter-blocks' ),
+				( children?.length ?? 0 ) + 1
+			)
 		});
 		insertBlock( itemBlock, ( children?.length ) || 0, clientId, false );
 	};

src/blocks/components/icon-picker-control/index.js

@@ -271,7 +271,7 @@ const IconPickerControl = ({
 				renderContent={ ({ onToggle }) => {
 
 					if ( 'image' === library ) {
-						return <Fragment></Fragment>;
+						return <></>;
 					}
 
 					return (

src/blocks/components/prompt/index.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { closeSmall, redo, undo } from '@wordpress/icons';
 import { ReactNode } from 'react';
 import { Button, ExternalLink, Notice, Placeholder, Spinner, TextControl } from '@wordpress/components';
@@ -204,7 +204,13 @@ const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 			return;
 		}
 
-		setTokenUsageDescription( __( 'Used tokens:', 'otter-blocks' ) + resultHistory[ resultHistoryIndex ].meta.usedToken );
+		setTokenUsageDescription(
+			sprintf(
+				// translators: %d: number of used tokens
+				__( 'Used tokens: %d', 'otter-blocks' ),
+				resultHistory[ resultHistoryIndex ].meta.usedToken 
+			)
+		);
 		props.onPreview?.( resultHistory[ resultHistoryIndex ].result );
 
 	}, [ resultHistoryIndex, resultHistory ]);

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

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

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

@@ -222,23 +222,23 @@ domReady( () => {
 
 			const keyEvent = event as KeyboardEvent;
 			const keys = [ 'ArrowDown', 'ArrowUp', 'Escape' ];
-			
+
 			if ( ! keys.includes( keyEvent.key ) ) {
 				return;
 			}
-			
+
 			if ( 'Escape' === keyEvent.key ) {
 				inputElement.blur();
 				resultsContainer = removeResultsContainer( block, resultsContainer );
 				return;
 			}
-			
+
 			const highlighted = resultsContainer?.querySelector( '.highlight' );
 			if ( ! highlighted ) {
 				highlight( resultsContainer.children[0] as HTMLElement, inputElement );
 				return;
 			}
-			
+
 			const containerDimensions = resultsContainer.parentElement.getBoundingClientRect();
 
 			if ( 'ArrowDown' === keyEvent.key && highlighted.nextElementSibling ) {

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

@@ -100,12 +100,12 @@ if ( Boolean( window.themeisleGutenberg.hasModule.dynamicContent ) ) {
 			if ( ! activeFrame ) {
 				return false;
 			}
-			
+
 			const modal = activeFrame.querySelector( '.media-frame-content' );
 			if ( ! modal ) {
 				return false;
 			}
-			
+
 			modal.innerHTML = '';
 			modal.appendChild( createWrapperHTML() );
 

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

@@ -62,7 +62,8 @@ 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" rel="noreferrer">
+				{/* eslint-disable-next-line  react/jsx-no-target-blank */}
+				<a href={ setUtm( window.themeisleGutenberg.patternsLink, 'patterns', 'otter-blockspatternslibrary' ) } target="_blank">
 					{ __( 'View Demos', 'otter-blocks' ) }
 				</a>
 

src/css/inject-css.js

@@ -115,7 +115,7 @@ const debouncedSubscription = debounce( () => {
 		isTyping
 	} = select( 'core/block-editor' );
 	const isTypingNow = isTyping();
-	
+
 	if ( isTypingNow ) {
 		return;
 	}

src/dashboard/components/Main.js

@@ -103,7 +103,8 @@ const Main = ({
 					<NoticeCard
 						slug="feedback"
 					>
-						<img src={ window.otterObj.assetsPath + 'images/dashboard-feedback.png' } style={ { maxWidth: '100%', objectFit: 'cover' } } alt="" />
+						{/* eslint-disable-next-line jsx-a11y/alt-text */}
+						<img src={ window.otterObj.assetsPath + 'images/dashboard-feedback.png' } style={ { maxWidth: '100%', objectFit: 'cover' } } />
 						<div className="notice-text">
 							<h3>{ __( 'What\'s the one thing you need in Otter Blocks?', 'otter-blocks' ) }</h3>
 							<span>{ __( 'We\'re always looking for suggestions to further improve Otter Blocks and your feedback can help us do that.', 'otter-blocks' ) }</span>

src/dashboard/components/NeveSidebarUpsell.js

@@ -100,7 +100,8 @@ const NeveSidebarUpsell = () => {
 				<div className="otter-nv-sidebar-upsell">
 					<div className="otter-nv-sidebar-left">
 						<div className="otter-nv-sidebar-heading">
-							<img src={ window.otterObj.assetsPath + 'images/neve-logo.png' } alt=""/>
+							{/* eslint-disable-next-line jsx-a11y/alt-text */}
+							<img src={ window.otterObj.assetsPath + 'images/neve-logo.png' }/>
 							<h2>{ __( '- Experience lightning fast performance!', 'otter-blocks' ) }</h2>
 						</div>
 						<div className="otter-nv-sidebar-text">
@@ -115,7 +116,8 @@ const NeveSidebarUpsell = () => {
 							</div>
 							<div>
 								<span>1050+</span>
-								<img src={ window.otterObj.assetsPath + 'images/star.png' } width = '57' alt=""/>
+								{/* eslint-disable-next-line jsx-a11y/alt-text */}
+								<img src={ window.otterObj.assetsPath + 'images/star.png' } width = '57'/>
 							</div>
 						</div>
 						<div className="otter-nv-sidebar-action">
@@ -128,7 +130,8 @@ const NeveSidebarUpsell = () => {
 						</div>
 					</div>
 					<div className="otter-nv-sidebar-right">
-						<img src={ window.otterObj.assetsPath + 'images/neve-upsell-img.png' } alt=""/>
+						{/* eslint-disable-next-line jsx-a11y/alt-text */}
+						<img src={ window.otterObj.assetsPath + 'images/neve-upsell-img.png' } />
 					</div>
 				</div>
 			)}