New general page: updating counters properly

admin/views/partial-notifications-errors.php

@@ -17,13 +17,8 @@
 $yoast_seo_dismissed_total = count( $yoast_seo_dismissed );
 $yoast_seo_total           = $notifications_data['metrics']['errors'];
 
-$yoast_seo_i18n_title              = __( 'Problems', 'wordpress-seo' );
-$yoast_seo_i18n_issues             = __( 'We have detected the following issues that affect the SEO of your site.', 'wordpress-seo' );
-$yoast_seo_i18n_no_issues          = __( 'Good job! We could detect no serious SEO problems.', 'wordpress-seo' );
-$yoast_seo_i18n_muted_issues_title = sprintf(
-	/* translators: %d expands the amount of hidden problems. */
-	_n( 'You have %d hidden problem:', 'You have %d hidden problems:', $yoast_seo_dismissed_total, 'wordpress-seo' ),
-	$yoast_seo_dismissed_total
-);
+$yoast_seo_i18n_title     = __( 'Problems', 'wordpress-seo' );
+$yoast_seo_i18n_issues    = __( 'We have detected the following issues that affect the SEO of your site.', 'wordpress-seo' );
+$yoast_seo_i18n_no_issues = __( 'Good job! We could detect no serious SEO problems.', 'wordpress-seo' );
 
 require WPSEO_PATH . 'admin/views/partial-notifications-template.php';

inc/class-wpseo-admin-bar-menu.php

@@ -855,14 +855,15 @@ protected function get_notification_counter() {
 		$notification_center = Yoast_Notification_Center::get();
 		$notification_count  = $notification_center->get_notification_count();
 
-		if ( ! $notification_count ) {
-			return '';
-		}
-
 		/* translators: Hidden accessibility text; %s: number of notifications. */
 		$counter_screen_reader_text = sprintf( _n( '%s notification', '%s notifications', $notification_count, 'wordpress-seo' ), number_format_i18n( $notification_count ) );
 
-		return sprintf( ' <div class="wp-core-ui wp-ui-notification yoast-issue-counter"><span class="yoast-issues-count" aria-hidden="true">%d</span><span class="screen-reader-text">%s</span></div>', $notification_count, $counter_screen_reader_text );
+		return sprintf(
+			' <div class="wp-core-ui wp-ui-notification yoast-issue-counter%s"><span class="yoast-issues-count" aria-hidden="true">%d</span><span class="screen-reader-text">%s</span></div>',
+			( $notification_count ) ? '' : ' yst-hidden',
+			$notification_count,
+			$counter_screen_reader_text
+		);
 	}
 
 	/**

packages/js/src/first-time-configuration/first-time-configuration-steps.js

@@ -1,8 +1,9 @@
 import apiFetch from "@wordpress/api-fetch";
+import { useDispatch } from "@wordpress/data";
 import { useCallback, useReducer, useState, useEffect } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import { uniq } from "lodash";
-
+import { STORE_NAME } from "../general/constants";
 import { configurationReducer } from "./tailwind-components/helpers/index.js";
 import SocialProfilesStep from "./tailwind-components/steps/social-profiles/social-profiles-step";
 import Stepper, { Step } from "./tailwind-components/stepper";
@@ -158,6 +159,7 @@ function calculateInitialState( windowObject, isStepFinished ) {
  * @returns {WPElement} The FirstTimeConfigurationSteps component.
  */
 export default function FirstTimeConfigurationSteps() {
+	const { removeAlert } = useDispatch( STORE_NAME );
 	const [ finishedSteps, setFinishedSteps ] = useState( window.wpseoFirstTimeConfigurationData.finishedSteps );
 
 	const isStepFinished = useCallback( ( stepId ) => {
@@ -192,32 +194,10 @@ export default function FirstTimeConfigurationSteps() {
 	without triggering a reload, whereas the window variable remains stale. */
 	useEffect( () => {
 		if ( indexingState === "completed" ) {
-			const indexationNotice = document.getElementById( "wpseo-reindex" );
-			if ( indexationNotice ) {
-				const allCounters = document.querySelectorAll( ".yoast-issue-counter, #toplevel_page_wpseo_dashboard .update-plugins" );
-
-				// Update the notification counters if there are any (non-zero ones).
-				if ( allCounters.length > 0 && allCounters[ 0 ].firstChild.textContent !== "0" ) {
-					// Get the oldCount for easier targeting.
-					const oldCount = allCounters[ 0 ].firstChild.textContent;
-					const newCount = ( parseInt( oldCount, 10 ) - 1 ).toString();
-					allCounters.forEach( ( counterNode => {
-						// The classList replace will return false if the class was not present (and thus an adminbar counter).
-						const isAdminBarCounter = ! counterNode.classList.replace( "count-" + oldCount, "count-" + newCount );
-						// If the count reaches zero because of this, remove the red dot alltogether.
-						if ( isAdminBarCounter && newCount === "0" ) {
-							counterNode.style.display = "none";
-						} else {
-							counterNode.firstChild.textContent = counterNode.firstChild.textContent.replace( oldCount, newCount );
-							counterNode.lastChild.textContent = counterNode.lastChild.textContent.replace( oldCount, newCount );
-						}
-					} ) );
-				}
-				indexationNotice.remove();
-			}
+			removeAlert( "wpseo-reindex" );
 			window.yoastIndexingData.amount = "0";
 		}
-	}, [ indexingState ] );
+	}, [ indexingState, removeAlert ] );
 
 	const isStep2Finished = isStepFinished( STEPS.siteRepresentation );
 	const isStep3Finished = isStepFinished( STEPS.socialProfiles );

packages/js/src/first-time-configuration/tailwind-components/steps/indexation/indexation-step.js

@@ -1,12 +1,9 @@
-import { Fragment } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import PropTypes from "prop-types";
 import { ReactComponent as ConfigurationStartImage } from "../../../../../images/indexables_1_left_bubble_optm.svg";
 import { FadeInAlert } from "../../base/alert";
 import { ConfigurationIndexation } from "./configuration-indexation";
 
-/* eslint-disable complexity */
-
 /**
  * The indexation step.
  *
@@ -18,17 +15,17 @@ import { ConfigurationIndexation } from "./configuration-indexation";
  * @returns {WPElement} The indexation step.
  */
 export default function IndexationStep( { indexingState, setIndexingState, showRunIndexationAlert, isStepperFinished } ) {
-	return <Fragment>
-		<div className="yst-flex yst-flex-row yst-justify-between yst-flex-wrap yst-mb-8">
-			<p className="yst-text-sm yst-whitespace-pre-line yst-w-[463px]">
+	return <div className="yst-@container">
+		<div className="yst-flex yst-flex-col @lg:yst-flex-row yst-gap-6 yst-mb-8">
+			<p className="yst-text-sm yst-whitespace-pre-line">
 				{ __(
 					"Let's start by running the SEO data optimization. That means we'll scan your site and create a database with " +
 					"optimized SEO data. It won't change any content or settings on your site and you don't need to do anything, just hit start!\n" +
 					"\nNote: If you have a lot of content, this optimization could take a moment. But trust us, it's worth it!",
 					"wordpress-seo"
 				) }
 			</p>
-			<ConfigurationStartImage className="yst-h-28 yst-w-24 yst-mr-6" />
+			<ConfigurationStartImage className="yst-shrink-0 yst-h-28 yst-w-24" />
 		</div>
 		<div id="yoast-configuration-indexing-container" className="indexation-container">
 			<ConfigurationIndexation
@@ -48,7 +45,7 @@ export default function IndexationStep( { indexingState, setIndexingState, showR
 					"wordpress-seo" )
 			}
 		</FadeInAlert>
-	</Fragment>;
+	</div>;
 }
 
 IndexationStep.propTypes = {

packages/js/src/general/app.js

@@ -17,6 +17,7 @@ import { getMigratingNoticeInfo, deleteMigratingNotices } from "../helpers/migra
 import Notice from "./components/notice";
 import WebinarPromoNotification from "../components/WebinarPromoNotification";
 import { shouldShowWebinarPromotionNotificationInDashboard } from "../helpers/shouldShowWebinarPromotionNotification";
+import { useNotificationCountSync } from "./hooks/use-notification-count-sync";
 import { STEPS as FTC_STEPS } from "../first-time-configuration/constants";
 
 /**
@@ -79,6 +80,7 @@ const App = () => {
 	const { pathname } = useLocation();
 	const alertToggleError = useSelectGeneralPage( "selectAlertToggleError", [], [] );
 	const { setAlertToggleError } = useDispatch( STORE_NAME );
+	useNotificationCountSync();
 
 	const handleDismiss = useCallback( () => {
 		setAlertToggleError( null );

packages/js/src/general/components/alerts-list.js

@@ -5,7 +5,7 @@ import { Button } from "@yoast/ui-library";
 import classNames from "classnames";
 import PropTypes from "prop-types";
 import { AlertsContext } from "../contexts/alerts-context";
-import { STORE_NAME } from "../constants/index";
+import { STORE_NAME } from "../constants";
 
 /**
  * The alert item object.

packages/js/src/general/components/notifications.js

@@ -31,7 +31,7 @@ export const Notifications = () => {
 
 	return (
 		<Paper>
-			<Paper.Content className="yst-flex yst-flex-col yst-gap-y-6">
+			<Paper.Content className="yst-max-w-[600px] yst-flex yst-flex-col yst-gap-y-6">
 				<AlertsContext.Provider value={ { ...notificationsTheme } }>
 					<AlertsTitle counts={ notificationsAlertsList.length } title={ __( "Notifications", "wordpress-seo" ) }>
 						{ notificationsAlertsList.length === 0 && <p className="yst-mt-2 yst-text-sm">{ __( "No new notifications.", "wordpress-seo" ) }</p> }

packages/js/src/general/components/problems.js

@@ -5,6 +5,7 @@ import { Paper } from "@yoast/ui-library";
 import { AlertsList } from "./alerts-list";
 import { AlertsTitle } from "./alerts-title";
 import { Collapsible } from "./collapsible";
+
 import { AlertsContext } from "../contexts/alerts-context";
 import { STORE_NAME } from "../constants/index";
 
@@ -32,10 +33,15 @@ export const Problems = () => {
 
 	return (
 		<Paper>
-			<Paper.Content className="yst-flex yst-flex-col yst-gap-y-6">
+			<Paper.Content className="yst-max-w-[600px] yst-flex yst-flex-col yst-gap-y-6">
 				<AlertsContext.Provider value={ { ...problemsTheme } }>
 					<AlertsTitle title={ __( "Problems", "wordpress-seo" ) } counts={ problemsList.length }>
-						<p className="yst-mt-2 yst-text-sm">{ __( "We have detected the following issues that affect the SEO of your site.", "wordpress-seo" ) }</p>
+						<p className="yst-mt-2 yst-text-sm">
+							{ problemsList.length > 0
+								 ? __( "We have detected the following issues that affect the SEO of your site.", "wordpress-seo" )
+								 : __( "Good job! We could detect no serious SEO problems.", "wordpress-seo" )
+						 }
+						</p>
 					</AlertsTitle>
 					<AlertsList items={ problemsList } />
 

packages/js/src/general/hooks/index.js

@@ -1,2 +1,2 @@
-
+export { useNotificationCountSync } from "./use-notification-count-sync";
 export { default as useSelectGeneralPage } from "./use-select-general-page";

packages/js/src/general/hooks/use-notification-count-sync.js

@@ -0,0 +1,16 @@
+import { useSelect } from "@wordpress/data";
+import { useEffect } from "@wordpress/element";
+import { updateNotificationsCount } from "../../shared-admin/helpers";
+import { STORE_NAME } from "../constants";
+
+/**
+ * Sync the notification count with the Yoast menu and admin bar.
+ * @returns {void}
+ */
+export const useNotificationCountSync = () => {
+	const activeAlertCount = useSelect( ( select ) => select( STORE_NAME ).selectActiveAlertsCount(), [] );
+
+	useEffect( () => {
+		updateNotificationsCount( activeAlertCount );
+	}, [ activeAlertCount ] );
+};

packages/js/src/general/routes/first-time-configuration.js

@@ -21,7 +21,6 @@ const FirstTimeConfiguration = () => {
 				title={ __( "First-time configuration", "wordpress-seo" ) }
 				description={ __( "Tell us about your site, so we can get it ranked! Let's get your site in tip-top shape for the search engines. Follow these 5 steps to make Google understand what your site is about.", "wordpress-seo" ) }
 			>
-				<hr id="configuration-hr-top" />
 				<div id="yoast-configuration" className="yst-p-8 yst-max-w-[715px]">
 					<FirstTimeConfigurationSteps />
 				</div>

packages/js/src/general/store/alert-center.js

@@ -1,8 +1,8 @@
-import { createSlice, createSelector } from "@reduxjs/toolkit";
-import { ASYNC_ACTION_NAMES } from "../../shared-admin/constants";
+import { createSelector, createSlice } from "@reduxjs/toolkit";
 import { select } from "@wordpress/data";
-import { STORE_NAME } from "../constants";
 import { get } from "lodash";
+import { ASYNC_ACTION_NAMES } from "../../shared-admin/constants";
+import { STORE_NAME } from "../constants";
 
 export const ALERT_CENTER_NAME = "alertCenter";
 
@@ -14,16 +14,17 @@ const TOGGLE_ALERT_VISIBILITY = "toggleAlertVisibility";
  * @param {boolean} hidden The hidden state of the alert.
  * @returns {Object} Success or error action object.
  */
-export function* toggleAlertStatus( id, nonce, hidden = false ) {
+function* toggleAlertStatus( id, nonce, hidden = false ) {
 	yield{ type: `${ TOGGLE_ALERT_VISIBILITY }/${ ASYNC_ACTION_NAMES.request }` };
 	try {
-		yield{ type: TOGGLE_ALERT_VISIBILITY,
+		yield{
+			type: TOGGLE_ALERT_VISIBILITY,
 			payload: {
 				id,
 				nonce,
 				hidden,
 			},
-		    };
+		};
 		return { type: `${ TOGGLE_ALERT_VISIBILITY }/${ ASYNC_ACTION_NAMES.success }`, payload: { id } };
 	} catch ( error ) {
 		return { type: `${ TOGGLE_ALERT_VISIBILITY }/${ ASYNC_ACTION_NAMES.error }`, payload: { id } };
@@ -68,6 +69,14 @@ const slice = createSlice( {
 	reducers: {
 		toggleAlert,
 		setAlertToggleError,
+		/**
+		 * @param {Object} state The state of the slice.
+		 * @param {string} id The ID of the alert to remove.
+		 * @returns {void}
+		 */
+		removeAlert( state, { payload: id } ) {
+			state.alerts = state.alerts.filter( ( alert ) => alert.id !== id );
+		},
 	},
 	extraReducers: ( builder ) => {
 		builder.addCase( `${ TOGGLE_ALERT_VISIBILITY }/${ ASYNC_ACTION_NAMES.success }`, ( state, { payload: { id } } ) => {
@@ -90,34 +99,50 @@ export const getInitialAlertCenterState = slice.getInitialState;
  * @param {object} state The state.
  * @returns {array} The alerts.
  */
-const selectAlerts = ( state ) => get( state, `${ALERT_CENTER_NAME}.alerts`, [] );
+const selectAlerts = ( state ) => get( state, `${ ALERT_CENTER_NAME }.alerts`, [] );
+
+const selectActiveAlerts = createSelector(
+	[ selectAlerts ],
+	( alerts ) => alerts.filter( ( alert ) => ! alert.dismissed )
+);
 
 /**
  * Selector to get the alert toggle error.
  *
  * @param {object} state The state.
  * @returns {string}  id The id of the alert which caused the error..
  */
-const selectAlertToggleError = ( state ) => get( state, `${ALERT_CENTER_NAME}.alertToggleError`, null );
+const selectAlertToggleError = ( state ) => get( state, `${ ALERT_CENTER_NAME }.alertToggleError`, null );
 
 export const alertCenterSelectors = {
 	selectActiveProblems: createSelector(
-		[ selectAlerts ],
-		( alerts ) => alerts.filter( ( alert ) => alert.type === "error" && ! alert.dismissed )
+		[ selectActiveAlerts ],
+		( alerts ) => alerts.filter( ( alert ) => alert.type === "error" )
 	),
 	selectDismissedProblems: createSelector(
 		[ selectAlerts ],
 		( alerts ) => alerts.filter( ( alert ) => alert.type === "error" && alert.dismissed )
 	),
 	selectActiveNotifications: createSelector(
-		[ selectAlerts ],
-		( alerts ) => alerts.filter( ( alert ) => alert.type === "warning" && ! alert.dismissed )
+		[ selectActiveAlerts ],
+		( alerts ) => alerts.filter( ( alert ) => alert.type === "warning" )
 	),
 	selectDismissedNotifications: createSelector(
 		[ selectAlerts ],
 		( alerts ) => alerts.filter( ( alert ) => alert.type === "warning" && alert.dismissed )
 	),
 	selectAlertToggleError,
+	selectAlert: createSelector(
+		[
+			selectAlerts,
+			( state, id ) => id,
+		],
+		( alerts, id ) => alerts.find( ( alert ) => alert.id === id )
+	),
+	selectActiveAlertsCount: createSelector(
+		[ selectActiveAlerts ],
+		( alerts ) => alerts.length
+	),
 };
 
 export const alertCenterActions = {
@@ -148,4 +173,4 @@ export const alertCenterControls = {
 	},
 };
 
-export default slice.reducer;
+export const alertCenterReducer = slice.reducer;

packages/js/src/general/store/index.js

@@ -6,7 +6,7 @@ import { STORE_NAME } from "../constants";
 import preferences, { createInitialPreferencesState, preferencesActions, preferencesSelectors } from "./preferences";
 import { reducers, selectors, actions } from "@yoast/externals/redux";
 import * as dismissedAlertsControls from "../../redux/controls/dismissedAlerts";
-import alertCenter, { alertCenterActions, alertCenterSelectors, getInitialAlertCenterState, alertCenterControls, ALERT_CENTER_NAME } from "./alert-center";
+import { alertCenterReducer, alertCenterActions, alertCenterSelectors, getInitialAlertCenterState, alertCenterControls, ALERT_CENTER_NAME } from "./alert-center";
 
 const { currentPromotions, dismissedAlerts, isPremium  } = reducers;
 const { isAlertDismissed, getIsPremium, isPromotionActive } = selectors;
@@ -50,7 +50,7 @@ const createStore = ( { initialState } ) => {
 		reducer: combineReducers( {
 			[ LINK_PARAMS_NAME ]: linkParamsReducer,
 			preferences,
-			[ ALERT_CENTER_NAME ]: alertCenter,
+			[ ALERT_CENTER_NAME ]: alertCenterReducer,
 			currentPromotions,
 			dismissedAlerts,
 			isPremium,

packages/js/src/shared-admin/helpers/index.js

@@ -1 +1,2 @@
 export { fixWordPressMenuScrolling } from "./fix-wordpress-menu-scrolling";
+export { updateNotificationsCount } from "./notifications-count";

packages/js/src/shared-admin/helpers/notifications-count.js

@@ -0,0 +1,41 @@
+import { _n, sprintf } from "@wordpress/i18n";
+
+/**
+ * Update the text content of an element if it exists.
+ * @param {HTMLElement} root The root element.
+ * @param {string} selector The selector.
+ * @param {string} text The text.
+ * @returns {HTMLElement|null} The element or null.
+ */
+const updateTextContentIfElementExists = ( root, selector, text ) => {
+	const element = root.querySelector( selector );
+	if ( element ) {
+		element.textContent = text;
+	}
+	return element;
+};
+
+/**
+ * Update the notification total in the Yoast SEO menu and the admin bar badges.
+ * @param {number} total The total number of notifications.
+ * @returns {void}
+ */
+export const updateNotificationsCount = ( total ) => {
+	// Note: these translation is the same as on the server side.
+	/* translators: Hidden accessibility text; %s: number of notifications. */
+	const screenReaderText = sprintf( _n( "%s notification", "%s notifications", total, "wordpress-seo" ), total );
+
+	const menuItems = document.querySelectorAll( "#toplevel_page_wpseo_dashboard .update-plugins" );
+	for ( const menuItem of menuItems ) {
+		menuItem.className = `update-plugins count-${ total }`;
+		updateTextContentIfElementExists( menuItem, ".plugin-count", String( total ) );
+		updateTextContentIfElementExists( menuItem, ".screen-reader-text", screenReaderText );
+	}
+
+	const adminBarItems = document.querySelectorAll( "#wp-admin-bar-wpseo-menu .yoast-issue-counter" );
+	for ( const adminBar of adminBarItems ) {
+		adminBar.classList.toggle( "yst-hidden", total === 0 );
+		updateTextContentIfElementExists( adminBar, ".yoast-issues-count", String( total ) );
+		updateTextContentIfElementExists( adminBar, ".screen-reader-text", screenReaderText );
+	}
+};