Merge branch 'trunk' of github.com:Yoast/wordpress-seo into exclude-p…

…unctuation-from-character-count-for-sentence-length-for-japanese

.github/workflows/pr-validation.yml

@@ -33,9 +33,10 @@ jobs:
           fi
 
       - name: Final Validation
+        # Only complain when the changelog label is missing for now.
         run: |
-          if [[ "$changelog_status" == "failed" || "$milestone_status" == "failed" ]]; then
-            echo "❌ PR is missing required attributes. Please add a milestone and a changelog label before merging."
+          if [[ "$changelog_status" == "failed" ]]; then
+            echo "❌ PR is missing a changelog label. Please add a changelog label before merging."
             exit 1
           else
             echo "✅ PR validation passed."

packages/analysis-report/tests/__mocks__/@wordpress/i18n.js

@@ -24,7 +24,7 @@ function _n( single, plural, number ) {
 }
 
 function _nx( single, plural, number ) {
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line no-restricted-syntax,@wordpress/i18n-no-variables
 	return _n( single, plural, number );
 }
 

packages/components/src/LanguageNotice.js

@@ -47,15 +47,19 @@ export default class LanguageNotice extends PureComponent {
 		}
 
 		// Determine the correct text.
-		/* Translators: %s expands to the actual language. */
-		let text = __( "Your site language is set to %s. ", "wordpress-seo" );
-		if ( ! canChangeLanguage ) {
+		let text = sprintf(
 			/* Translators: %s expands to the actual language. */
-			text = __( "Your site language is set to %s. If this is not correct, contact your site administrator.", "wordpress-seo" );
-		}
+			__( "Your site language is set to %s.", "wordpress-seo" ),
+			`{{strong}}${ language }{{/strong}}`
+		);
 
-		// Replace the %s with a strong marked language.
-		text = sprintf( text, `{{strong}}${ language }{{/strong}}` );
+		if ( ! canChangeLanguage ) {
+			text = sprintf(
+				/* Translators: %s expands to the actual language. */
+				__( "Your site language is set to %s. If this is not correct, contact your site administrator.", "wordpress-seo" ),
+				`{{strong}}${ language }{{/strong}}`
+			);
+		}
 
 		// Replace the strong marking with an actual ReactComponent.
 		text = interpolateComponents( {

packages/components/src/WordOccurrenceInsights.js

@@ -20,6 +20,7 @@ import WordOccurrences from "./WordOccurrences";
  */
 const getKeywordResearchArticleLink = ( url ) => {
 	const keywordsResearchLinkTranslation = sprintf(
+		// translators: %1$s: opening link tag, %2$s: closing link tag
 		__(
 			"Read our %1$sultimate guide to keyword research%2$s to learn more about keyword research and keyword strategy.",
 			"wordpress-seo"
@@ -52,7 +53,7 @@ const getExplanation = keywords => {
 	}
 
 	return __(
-		"The following words occur the most in the content. These give an indication of what your content focuses on. If the words differ a lot from your topic, you might want to rewrite your content accordingly. ",
+		"The following words occur the most in the content. These give an indication of what your content focuses on. If the words differ a lot from your topic, you might want to rewrite your content accordingly.",
 		"wordpress-seo"
 	);
 };

packages/components/tests/__mocks__/@wordpress/i18n.js

@@ -20,7 +20,7 @@ function _n( single, plural, number ) {
 }
 
 function _nx( single, plural, number ) {
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line no-restricted-syntax,@wordpress/i18n-no-variables
 	return _n( single, plural, number );
 }
 

packages/components/tests/__snapshots__/LanguageNoticeTest.js.snap

@@ -52,7 +52,7 @@ exports[`LanguageNotice matches the snapshot with a changed language link 1`] =
   <strong>
     English
   </strong>
-  . 
+  .
   <a
     className="c1"
     href="http://www.example.com"
@@ -103,7 +103,7 @@ exports[`LanguageNotice matches the snapshot with another language 1`] = `
   <strong>
     Nederlands
   </strong>
-  . 
+  .
   <a
     className="c1"
     href="http://www.example.com"

packages/eslint/default.mjs

@@ -1,4 +1,7 @@
 import globals from "globals";
+import { fixupConfigRules } from "@eslint/compat";
+// eslint-disable-next-line import/namespace -- We need to import the entire module to get the `FlatCompat` class.
+import { FlatCompat } from "@eslint/eslintrc";
 import js from "@eslint/js";
 import reactPlugin from "eslint-plugin-react";
 import jsxA11YPlugin from "eslint-plugin-jsx-a11y";
@@ -7,10 +10,13 @@ import nodePlugin from "eslint-plugin-n";
 import importPlugin from "eslint-plugin-import";
 import stylisticPlugin from "@stylistic/eslint-plugin";
 
+const i18nRules = new FlatCompat().extends( "plugin:@wordpress/eslint-plugin/i18n" );
+
 /** @type {import('eslint').Linter.Config[]} */
 export default [
 	js.configs.recommended,
 	importPlugin.flatConfigs.recommended,
+	...fixupConfigRules( i18nRules ),
 	{
 		name: "yoast/recommended",
 		plugins: {

packages/eslint/package.json

@@ -26,8 +26,11 @@
   },
   "homepage": "https://github.com/Yoast/wordpress-seo/tree/main/packages/eslint",
   "dependencies": {
+    "@eslint/compat": "^1.2.6",
+    "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.14.0",
     "@stylistic/eslint-plugin": "^2.11.0",
+    "@wordpress/eslint-plugin": "^22.4.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsdoc": "^50.5.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",

packages/helpers/src/social-preview-image-validation/facebookValidation.js

@@ -18,9 +18,9 @@ export const validateSize = ( image ) => {
 	const { width, height } = image;
 
 	const warningMessage = sprintf(
-		/* Translators: %d expands to the minimum width, %d expands to the minimum hight */
+		/* Translators: %1$d expands to the minimum width, %2$d expands to the minimum height */
 		__(
-			"Your image dimensions are not suitable. The minimum dimensions are %dx%d pixels.",
+			"Your image dimensions are not suitable. The minimum dimensions are %1$dx%2$d pixels.",
 			"wordpress-seo"
 		),
 		MIN_WIDTH, MIN_HEIGHT
@@ -41,9 +41,10 @@ export const validateType = ( image ) => {
 	const validTypes = [ "jpg", "png", "gif", "jpeg", "webp" ];
 
 	const warningMessage = sprintf(
-		/* Translators: %s expands to the jpg format, %s expands to the png format, %s expands to the gif format. */
+		/* Translators: %1$s expands to the jpg format, %2$s expands to the png format,
+		%3$s expands to the webp format, %4$s expands to the gif format. */
 		__(
-			"The format of the uploaded image is not supported. The supported formats are: %s, %s, %s and %s.",
+			"The format of the uploaded image is not supported. The supported formats are: %1$s, %2$s, %3$s and %4$s.",
 			"wordpress-seo"
 		),
 		"JPG", "PNG", "WEBP", "GIF"

packages/helpers/src/social-preview-image-validation/twitterValidation.js

@@ -23,10 +23,10 @@ const MIN_HEIGHT_LARGE = 157;
  */
 export const validateSize = ( image, isLarge ) => {
 	const { width, height } = image;
-	/* Translators: %d expands to the minimum width, %d expands to the minimum height,
-	%d expands to the maximum width, %d expands to the maximum height. */
+	/* Translators: %1$d expands to the minimum width, %2$d expands to the minimum height,
+	%3$d expands to the maximum width, %4$d expands to the maximum height. */
 	const warningString = __(
-		"Your image dimensions are not suitable. The minimum dimensions are %dx%d pixels. The maximum dimensions are %dx%d pixels.",
+		"Your image dimensions are not suitable. The minimum dimensions are %1$dx%2$d pixels. The maximum dimensions are %3$dx%4$d pixels.",
 		"wordpress-seo"
 	);
 
@@ -54,18 +54,19 @@ export const validateType = ( image ) => {
 	const validTypes = [ "jpg", "jpeg", "png", "webp" ];
 
 	const gifMessage = sprintf(
-		/* Translators: %s expands to the gif format, %s expands to the gif format. */
+		/* Translators: %1$s expands to the gif format, %2$s expands to the gif format. */
 		__(
-			"You have uploaded a %s. Please note that, if it’s an animated %s, only the first frame will be used.",
+			"You have uploaded a %1$s. Please note that, if it’s an animated %2$s, only the first frame will be used.",
 			"wordpress-seo"
 		),
 		"GIF", "GIF"
 	);
 
 	const warningMessage = sprintf(
-		/* Translators: %s expands to the jpg format, %s expands to the png format, %s expands to the gif format. */
+		/* Translators: %1$s expands to the jpg format, %2$s expands to the png format,
+		%3$s expands to the webp format, %4$s expands to the gif format. */
 		__(
-			"The format of the uploaded image is not supported. The supported formats are: %s, %s, %s and %s.",
+			"The format of the uploaded image is not supported. The supported formats are: %1$s, %2$s, %3$s and %4$s.",
 			"wordpress-seo"
 		),
 		"JPG", "PNG", "WEBP", "GIF"
@@ -92,9 +93,9 @@ export const validatesBytes = ( image ) => {
 	const { bytes } = image;
 
 	const warningMessage = sprintf(
-		/* translators: %s expands to X, %s expands to the 5MB size. */
+		/* translators: %1$s expands to X, %2$s expands to the 5MB size. */
 		__(
-			"The file size of the uploaded image is too large for %s. File size must be less than %s.",
+			"The file size of the uploaded image is too large for %1$s. File size must be less than %2$s.",
 			"wordpress-seo"
 		),
 		"X", "5MB"

packages/helpers/tests/__mocks__/@wordpress/i18n.js

@@ -20,7 +20,7 @@ function _n( single, plural, number ) {
 }
 
 function _nx( single, plural, number ) {
-	// eslint-disable-next-line no-restricted-syntax
+	// eslint-disable-next-line no-restricted-syntax,@wordpress/i18n-no-variables
 	return _n( single, plural, number );
 }
 

packages/js/src/components/AdvancedSettings.js

@@ -30,8 +30,8 @@ const getNoIndexOptions = ( editorContext ) => {
 		return [
 			{
 				name: sprintf(
-					/* translators: the first %s translates to "yes" or "no", the second %s translates to the content type label in plural form */
-					__( "%s (current default for %s)", "wordpress-seo" ),
+					/* translators: %1$s translates to "yes" or "no", %2$s translates to the content type label in plural form */
+					__( "%1$s (current default for %2$s)", "wordpress-seo" ),
 					noIndex,
 					editorContext.postTypeNamePlural
 				),
@@ -44,8 +44,8 @@ const getNoIndexOptions = ( editorContext ) => {
 	return [
 		{
 			name: sprintf(
-				/* translators: the first %s translates to "yes" or "no", the second %s translates to the content type label in plural form */
-				__( "%s (current default for %s)", "wordpress-seo" ),
+				/* translators: %1$s translates to "yes" or "no", %2$s translates to the content type label in plural form */
+				__( "%1$s (current default for %2$s)", "wordpress-seo" ),
 				noIndex,
 				editorContext.postTypeNamePlural
 			),

packages/js/src/components/Indexation.js

@@ -338,7 +338,7 @@ class Indexation extends Component {
 				value={ this.state.processed }
 			/>
 			<p style={ { color: colors.$palette_grey_text } }>
-				{ __( "Optimizing SEO data... This may take a while.", "wordpress-seo" ) }
+				{ __( "Optimizing SEO data… This may take a while.", "wordpress-seo" ) }
 			</p>
 		</Fragment>;
 	}

packages/js/src/components/WincherPerformanceReport.js

@@ -67,12 +67,7 @@ const ConnectToWincherWrapper = styled.p`
  */
 const viewLinkUrl = ( props ) => {
 	const { websiteId, id } = props;
-
-	return sprintf(
-		"https://app.wincher.com/websites/%s/keywords?serp=%s&utm_medium=plugin&utm_source=yoast&referer=yoast&partner=yoast",
-		websiteId,
-		id
-	);
+	return `https://app.wincher.com/websites/${websiteId}/keywords?serp=${id}&utm_medium=plugin&utm_source=yoast&referer=yoast&partner=yoast`;
 };
 
 /**
@@ -190,11 +185,9 @@ const WincherNetworkErrorAlert = () => {
 	return (
 		<Alert type="error" className={ "wincher-performance-report-alert" }>
 			{
-				sprintf(
-					__(
-						"Network Error: Unable to connect to the server. Please check your internet connection and try again later.",
-						"wordpress-seo"
-					)
+				__(
+					"Network Error: Unable to connect to the server. Please check your internet connection and try again later.",
+					"wordpress-seo"
 				)
 			}
 		</Alert>

packages/js/src/components/WincherTableRow.js

@@ -246,11 +246,9 @@ export function getPositionalDataByState( props ) {
 
 	const isEnabled          = ! isEmpty( rowData );
 	const hasFreshData = rowData && rowData.updated_at && moment( rowData.updated_at ) >= moment().subtract( 7, "days" );
-	const viewLinkURL        = ( rowData ) ? sprintf(
-		"https://app.wincher.com/websites/%s/keywords?serp=%s&utm_medium=plugin&utm_source=yoast&referer=yoast&partner=yoast",
-		websiteId,
-		rowData.id
-	) : null;
+	const viewLinkURL = rowData
+		? `https://app.wincher.com/websites/${websiteId}/keywords?serp=${rowData.id}&utm_medium=plugin&utm_source=yoast&referer=yoast&partner=yoast`
+		: null;
 
 	if ( ! isEnabled ) {
 		return (

packages/js/src/components/modals/WincherExplanation.js

@@ -16,8 +16,8 @@ const WincherReadMoreLink = makeOutboundLink();
  */
 const WincherExplanation = () => {
 	const message = sprintf(
+		/* translators: %1$s expands to a link to Wincher, %2$s expands to a link to the keyphrase tracking article on Yoast.com */
 		__(
-			/* translators: %1$s expands to a link to Wincher, %2$s expands to a link to the keyphrase tracking article on Yoast.com */
 			"With %1$s you can track the ranking position of your page in the search results based on your keyphrase(s). %2$s",
 			"wordpress-seo"
 		),

packages/js/src/components/modals/WincherLimitReached.js

@@ -20,9 +20,9 @@ const UpdateWincherPlanLink = makeOutboundLink();
  */
 const WincherLimitReached = ( props ) => {
 	const message = sprintf(
-		/* translators: %d expands to the amount of allowed keyphrases on a free account, %s expands to a link to Wincher plans. */
+		/* translators: %1$d expands to the amount of allowed keyphrases on a free account, %2$s expands to a link to Wincher plans. */
 		__(
-			"You've reached the maximum amount of %d keyphrases you can add to your Wincher account. If you wish to add more keyphrases, please %s.",
+			"You've reached the maximum amount of %1$d keyphrases you can add to your Wincher account. If you wish to add more keyphrases, please %2$s.",
 			"wordpress-seo"
 		),
 		props.limit,

packages/js/src/components/modals/WincherSEOPerformanceLoading.js

@@ -12,7 +12,7 @@ import { SvgIcon } from "@yoast/components";
 const WincherSEOPerformanceLoading = () => {
 	return (
 		<p className="yoast-wincher-seo-performance-modal__loading-message">
-			{ __( "Tracking the ranking position...", "wordpress-seo" )	}
+			{ __( "Tracking the ranking position…", "wordpress-seo" )	}
 			&nbsp;
 			<SvgIcon icon="loading-spinner" />
 		</p>

packages/js/src/components/social/useFallbackWarning.js

@@ -13,9 +13,10 @@ import { __, sprintf } from "@wordpress/i18n";
 export const useFallbackWarning = ( imageFallbackUrl, imageUrl, imageWarnings ) => {
 	const [ hasFallbackWarning, setHasFallbackWarning ] = useState( false );
 	const warningMessage = sprintf(
-		/* Translators: %s expands to the jpg format, %s expands to the png format, %s expands to the webp format, %s expands to the gif format. */
+		/* Translators: %1$s expands to the jpg format, %2$s expands to the png format,
+		%3$s expands to the webp format, %4$s expands to the gif format. */
 		__(
-			"No image was found that we can automatically set as your social image. Please use %s, %s, %s or %s formats to ensure it displays correctly on social media.",
+			"No image was found that we can automatically set as your social image. Please use %1$s, %2$s, %3$s or %4$s formats to ensure it displays correctly on social media.",
 			"wordpress-seo"
 		),
 		"JPG", "PNG", "WEBP", "GIF"

packages/js/src/dashboard/components/dashboard.js

@@ -33,9 +33,9 @@ const prepareWidgetInstance = ( type ) => {
 export const Dashboard = ( { widgetFactory, initialWidgets = [], userName, features, links, sitekitFeatureEnabled } ) => {
 	const [ widgets, setWidgets ] = useState( () => initialWidgets.map( prepareWidgetInstance ) );
 
-	// eslint-disable-next-line no-unused-vars
+
 	const addWidget = useCallback( ( type ) => {
-		setWidgets( ( currentWidgets ) => [ ...currentWidgets, prepareWidgetInstance( type ) ] );
+		setWidgets( ( currentWidgets ) => [ prepareWidgetInstance( type ), ...currentWidgets ] );
 	}, [] );
 
 	const removeWidget = useCallback( ( type ) => {
@@ -46,7 +46,7 @@ export const Dashboard = ( { widgetFactory, initialWidgets = [], userName, featu
 		<>
 			<PageTitle userName={ userName } features={ features } links={ links } sitekitFeatureEnabled={ sitekitFeatureEnabled } />
 			<div className="yst-grid yst-grid-cols-4 yst-gap-6 yst-my-6">
-				{ widgets.map( ( widget ) => widgetFactory.createWidget( widget, removeWidget ) ) }
+				{ widgets.map( ( widget ) => widgetFactory.createWidget( widget, removeWidget, addWidget ) ) }
 			</div>
 		</>
 	);