From 73c0c4554663d47f435eab8c0bd53dbaecfd6410 Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Thu, 23 Jul 2026 16:52:53 +0200
Subject: [PATCH 01/20] Enhances Bulk Editor Integration with User Helper

---
 packages/js/src/general/store/opt-in.js       | 64 -------------------
 .../bulk-editor-integration.php               | 28 +++++++-
 src/general/user-interface/opt-in-route.php   |  1 +
 .../Abstract_Bulk_Editor_Integration_Test.php | 10 +++
 .../Constructor_Test.php                      |  5 ++
 .../Enqueue_Assets_Test.php                   |  8 +++
 .../Opt_In_Route/Validate_Key_Test.php        |  9 +++
 7 files changed, 60 insertions(+), 65 deletions(-)
 delete mode 100644 packages/js/src/general/store/opt-in.js

diff --git a/packages/js/src/general/store/opt-in.js b/packages/js/src/general/store/opt-in.js
deleted file mode 100644
index 9658e7ca856..00000000000
--- a/packages/js/src/general/store/opt-in.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit";
-import { get } from "lodash";
-import { ASYNC_ACTION_NAMES } from "../../shared-admin/constants";
-import apiFetch from "@wordpress/api-fetch";
-
-export const OPT_IN_NOTIFICATION_NAME = "optInNotification";
-
-const OPT_IN_NOTIFICATION_SEEN = "setOptInNotificationSeen";
-
-/**
- * @param {string} key The key of the notification to set as seen.
- * @returns {Object} Success or error action object.
- */
-function* setOptInNotificationSeen( key ) {
-	yield{ type: `${ OPT_IN_NOTIFICATION_SEEN }/${ ASYNC_ACTION_NAMES.request }` };
-	try {
-		yield{
-			type: OPT_IN_NOTIFICATION_SEEN,
-			payload: key,
-		};
-		return { type: `${ OPT_IN_NOTIFICATION_SEEN }/${ ASYNC_ACTION_NAMES.success }`, payload: key };
-	} catch ( error ) {
-		console.error( "Error setting opt-in notification as seen:", error );
-		return { type: `${ OPT_IN_NOTIFICATION_SEEN }/${ ASYNC_ACTION_NAMES.error }`, payload: key };
-	}
-}
-
-const slice = createSlice( {
-	name: OPT_IN_NOTIFICATION_NAME,
-	initialState: { seen: {} },
-	reducers: {
-		hideOptInNotification( state, action ) {
-			const key = action.payload;
-			state.seen[ key ] = true;
-		},
-	},
-} );
-
-/**
- * @returns {Object} The initial state.
- */
-export const getInitialOptInNotificationState = slice.getInitialState;
-
-
-export const optInNotificationSelectors = {
-	selectIsOptInNotificationSeen: ( state, key ) => get( state, [ OPT_IN_NOTIFICATION_NAME, "seen", key ], false ),
-};
-
-export const optInNotificationActions = {
-	...slice.actions,
-	setOptInNotificationSeen,
-};
-
-export const optInNotificationControls = {
-	[ OPT_IN_NOTIFICATION_SEEN ]: async( { payload } ) => {
-		await apiFetch( {
-			path: "yoast/v1/seen-opt-in-notification",
-			method: "POST",
-			data: { key: payload },
-		} );
-	},
-};
-
-export const optInNotificationReducer = slice.reducer;
diff --git a/src/bulk-editor/user-interface/bulk-editor-integration.php b/src/bulk-editor/user-interface/bulk-editor-integration.php
index 1c0b5776d5d..e919db1dc43 100644
--- a/src/bulk-editor/user-interface/bulk-editor-integration.php
+++ b/src/bulk-editor/user-interface/bulk-editor-integration.php
@@ -13,6 +13,7 @@
 use Yoast\WP\SEO\Helpers\Options_Helper;
 use Yoast\WP\SEO\Helpers\Product_Helper;
 use Yoast\WP\SEO\Helpers\Short_Link_Helper;
+use Yoast\WP\SEO\Helpers\User_Helper;
 use Yoast\WP\SEO\Integrations\Integration_Interface;
 
 /**
@@ -86,6 +87,13 @@ class Bulk_Editor_Integration implements Integration_Interface {
 	 */
 	private $options_helper;
 
+	/**
+	 * Holds the User_Helper.
+	 *
+	 * @var User_Helper
+	 */
+	private $user_helper;
+
 	/**
 	 * Constructs the instance.
 	 *
@@ -97,6 +105,7 @@ class Bulk_Editor_Integration implements Integration_Interface {
 	 * @param Nonce_Repository          $nonce_repository         The Nonce_Repository.
 	 * @param Endpoints_Repository      $endpoints_repository     The Endpoints_Repository.
 	 * @param Options_Helper            $options_helper           The Options_Helper.
+	 * @param User_Helper               $user_helper              The User_Helper.
 	 */
 	public function __construct(
 		WPSEO_Admin_Asset_Manager $asset_manager,
@@ -106,7 +115,8 @@ public function __construct(
 		Content_Types_Repository $content_types_repository,
 		Nonce_Repository $nonce_repository,
 		Endpoints_Repository $endpoints_repository,
-		Options_Helper $options_helper
+		Options_Helper $options_helper,
+		User_Helper $user_helper
 	) {
 		$this->asset_manager            = $asset_manager;
 		$this->current_page_helper      = $current_page_helper;
@@ -116,6 +126,7 @@ public function __construct(
 		$this->nonce_repository         = $nonce_repository;
 		$this->endpoints_repository     = $endpoints_repository;
 		$this->options_helper           = $options_helper;
+		$this->user_helper              = $user_helper;
 	}
 
 	/**
@@ -228,9 +239,24 @@ public function get_script_data() {
 				'pluginUrl'   => \plugins_url( '', \WPSEO_FILE ),
 			],
 			'linkParams'   => $this->short_link_helper->get_query_params(),
+			// Whether the first-run guided tour has already been seen, so it only shows once per user.
+			'optInNotificationSeen' => [
+				'bulk_editor_tour' => $this->is_tour_opt_in_notification_seen(),
+			],
 		];
 	}
 
+	/**
+	 * Gets whether the bulk editor guided tour has been seen by the current user.
+	 *
+	 * @return bool True when the tour has been seen, false otherwise.
+	 */
+	private function is_tour_opt_in_notification_seen(): bool {
+		$current_user_id = $this->user_helper->get_current_user_id();
+
+		return (bool) $this->user_helper->get_meta( $current_user_id, '_yoast_wpseo_bulk_editor_tour_opt_in_notification_seen', true );
+	}
+
 	/**
 	 * Removes all current WP notices.
 	 *
diff --git a/src/general/user-interface/opt-in-route.php b/src/general/user-interface/opt-in-route.php
index da68ae89426..84957cea6f7 100644
--- a/src/general/user-interface/opt-in-route.php
+++ b/src/general/user-interface/opt-in-route.php
@@ -143,6 +143,7 @@ public function can_see_opt_in() {
 	public function validate_key( $key ) {
 		$allowed_keys = [
 			'task_list',
+			'bulk_editor_tour',
 		];
 
 		return \in_array( $key, $allowed_keys, true );
diff --git a/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Abstract_Bulk_Editor_Integration_Test.php b/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Abstract_Bulk_Editor_Integration_Test.php
index 40e506e0c95..9cc1778264e 100644
--- a/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Abstract_Bulk_Editor_Integration_Test.php
+++ b/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Abstract_Bulk_Editor_Integration_Test.php
@@ -14,6 +14,7 @@
 use Yoast\WP\SEO\Helpers\Options_Helper;
 use Yoast\WP\SEO\Helpers\Product_Helper;
 use Yoast\WP\SEO\Helpers\Short_Link_Helper;
+use Yoast\WP\SEO\Helpers\User_Helper;
 use Yoast\WP\SEO\Tests\Unit\TestCase;
 
 /**
@@ -86,6 +87,13 @@ abstract class Abstract_Bulk_Editor_Integration_Test extends TestCase {
 	 */
 	protected $options_helper;
 
+	/**
+	 * Holds the User_Helper mock.
+	 *
+	 * @var Mockery\MockInterface|User_Helper
+	 */
+	protected $user_helper;
+
 	/**
 	 * Sets up the test fixtures.
 	 *
@@ -102,6 +110,7 @@ protected function set_up() {
 		$this->nonce_repository         = Mockery::mock( Nonce_Repository::class );
 		$this->endpoints_repository     = Mockery::mock( Endpoints_Repository::class );
 		$this->options_helper           = Mockery::mock( Options_Helper::class );
+		$this->user_helper              = Mockery::mock( User_Helper::class );
 
 		$this->instance = new Bulk_Editor_Integration(
 			$this->asset_manager,
@@ -112,6 +121,7 @@ protected function set_up() {
 			$this->nonce_repository,
 			$this->endpoints_repository,
 			$this->options_helper,
+			$this->user_helper,
 		);
 	}
 }
diff --git a/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Constructor_Test.php b/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Constructor_Test.php
index 553e7e195fd..a1a62666bb8 100644
--- a/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Constructor_Test.php
+++ b/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Constructor_Test.php
@@ -12,6 +12,7 @@
 use Yoast\WP\SEO\Helpers\Options_Helper;
 use Yoast\WP\SEO\Helpers\Product_Helper;
 use Yoast\WP\SEO\Helpers\Short_Link_Helper;
+use Yoast\WP\SEO\Helpers\User_Helper;
 
 /**
  * Tests the Bulk_Editor_Integration constructor.
@@ -60,5 +61,9 @@ public function test_constructor() {
 			Options_Helper::class,
 			$this->getPropertyValue( $this->instance, 'options_helper' ),
 		);
+		$this->assertInstanceOf(
+			User_Helper::class,
+			$this->getPropertyValue( $this->instance, 'user_helper' ),
+		);
 	}
 }
diff --git a/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Enqueue_Assets_Test.php b/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Enqueue_Assets_Test.php
index aa5ee5052a2..22a6cf465e6 100644
--- a/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Enqueue_Assets_Test.php
+++ b/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Enqueue_Assets_Test.php
@@ -54,6 +54,9 @@ public function test_enqueue_assets() {
 				'pluginUrl'   => 'https://example.com/wp-content/plugins/wordpress-seo',
 			],
 			'linkParams'   => [ 'foo' => 'bar' ],
+			'optInNotificationSeen' => [
+				'bulk_editor_tour' => false,
+			],
 		];
 
 		Actions\expectRemoved( 'admin_print_scripts' )->once()->with( 'print_emoji_detection_script' );
@@ -84,6 +87,11 @@ static function ( $path ) {
 				},
 			);
 		$this->short_link_helper->expects( 'get_query_params' )->once()->andReturn( [ 'foo' => 'bar' ] );
+		$this->user_helper->expects( 'get_current_user_id' )->once()->andReturn( 1 );
+		$this->user_helper->expects( 'get_meta' )
+			->once()
+			->with( 1, '_yoast_wpseo_bulk_editor_tour_opt_in_notification_seen', true )
+			->andReturn( '' );
 
 		$this->asset_manager->expects( 'localize_script' )
 			->once()
diff --git a/tests/Unit/General/User_Interface/Opt_In_Route/Validate_Key_Test.php b/tests/Unit/General/User_Interface/Opt_In_Route/Validate_Key_Test.php
index 4bdfc52c5dc..5f2c281a708 100644
--- a/tests/Unit/General/User_Interface/Opt_In_Route/Validate_Key_Test.php
+++ b/tests/Unit/General/User_Interface/Opt_In_Route/Validate_Key_Test.php
@@ -22,6 +22,15 @@ public function test_validate_key_with_valid_key() {
 		$this->assertTrue( $this->instance->validate_key( 'task_list' ) );
 	}
 
+	/**
+	 * Tests the validate_key method with the bulk editor tour key.
+	 *
+	 * @return void
+	 */
+	public function test_validate_key_with_bulk_editor_tour_key() {
+		$this->assertTrue( $this->instance->validate_key( 'bulk_editor_tour' ) );
+	}
+
 	/**
 	 * Tests the validate_key method with an invalid key.
 	 *

From 9d78d8eece8f749f5865674a11e8e94c46996ffd Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Fri, 24 Jul 2026 09:50:23 +0200
Subject: [PATCH 02/20] Implement opt-in notification feature in bulk editor

---
 packages/js/src/bulk-editor/constants.js      |   3 +
 packages/js/src/bulk-editor/initialize.js     |   5 +-
 packages/js/src/bulk-editor/store/index.js    |  21 +++-
 packages/js/src/general/app.js                |   3 +-
 packages/js/src/general/components/index.js   |   2 -
 .../general/components/opt-in-container.js    |  31 -----
 .../task-list-opt-in-notification.js          | 117 ------------------
 packages/js/src/general/initialize.js         |   2 -
 packages/js/src/general/store/index.js        |  13 --
 packages/js/src/shared-admin/store/index.js   |   1 +
 packages/js/src/shared-admin/store/opt-in.js  |  64 ++++++++++
 .../js/tests/bulk-editor/initialize.test.js   |   8 +-
 12 files changed, 99 insertions(+), 171 deletions(-)
 delete mode 100644 packages/js/src/general/components/opt-in-container.js
 delete mode 100644 packages/js/src/general/components/task-list-opt-in-notification.js
 create mode 100644 packages/js/src/shared-admin/store/opt-in.js

diff --git a/packages/js/src/bulk-editor/constants.js b/packages/js/src/bulk-editor/constants.js
index d3d35066829..28191d1ccd3 100644
--- a/packages/js/src/bulk-editor/constants.js
+++ b/packages/js/src/bulk-editor/constants.js
@@ -33,6 +33,9 @@ export const BULK_NOTICES_SLOT = "yoast.bulkEditor.bulkNotices";
 // The PluginArea scope Premium registers its fills under, so they mount inside this page's React tree.
 export const PLUGIN_SCOPE = "yoast-seo-bulk-editor";
 
+// The opt-in-notification key that tracks whether the first-run guided tour has been seen.
+export const TOUR_OPT_IN_KEY = "bulk_editor_tour";
+
 // The filter Premium uses to add items to the Select menu.
 export const SELECT_MENU_ITEMS_FILTER = "yoast.bulkEditor.selectMenuItems";
 
diff --git a/packages/js/src/bulk-editor/initialize.js b/packages/js/src/bulk-editor/initialize.js
index 9b2b05b9e6d..aed1891ce7a 100644
--- a/packages/js/src/bulk-editor/initialize.js
+++ b/packages/js/src/bulk-editor/initialize.js
@@ -8,7 +8,7 @@ import { get } from "lodash";
 import { createHashRouter, createRoutesFromElements, Route, RouterProvider } from "react-router-dom";
 import { GenericAlert } from "../ai-generator/components/errors";
 import { fixWordPressMenuScrolling } from "../shared-admin/helpers";
-import { LINK_PARAMS_NAME } from "../shared-admin/store";
+import { LINK_PARAMS_NAME, OPT_IN_NOTIFICATION_NAME } from "../shared-admin/store";
 import App from "./app";
 import { UpsellModal } from "./components/upsell-modal";
 import { PLUGIN_SCOPE, ROOT_ID, STORE_NAME } from "./constants";
@@ -33,6 +33,9 @@ domReady( () => {
 	registerStore( {
 		initialState: {
 			[ LINK_PARAMS_NAME ]: get( window, "wpseoBulkEditorData.linkParams", {} ),
+			[ OPT_IN_NOTIFICATION_NAME ]: {
+				seen: get( window, "wpseoBulkEditorData.optInNotificationSeen", {} ),
+			},
 		},
 	} );
 	fixWordPressMenuScrolling();
diff --git a/packages/js/src/bulk-editor/store/index.js b/packages/js/src/bulk-editor/store/index.js
index b69d6cf2613..a2da929aa2b 100644
--- a/packages/js/src/bulk-editor/store/index.js
+++ b/packages/js/src/bulk-editor/store/index.js
@@ -1,6 +1,18 @@
 import { combineReducers, createReduxStore, register } from "@wordpress/data";
 import { merge } from "lodash";
-import { getInitialLinkParamsState, LINK_PARAMS_NAME, linkParamsActions, linkParamsReducer, linkParamsSelectors } from "../../shared-admin/store";
+import {
+	getInitialLinkParamsState,
+	getInitialOptInNotificationState,
+	LINK_PARAMS_NAME,
+	linkParamsActions,
+	linkParamsReducer,
+	linkParamsSelectors,
+	OPT_IN_NOTIFICATION_NAME,
+	optInNotificationActions,
+	optInNotificationControls,
+	optInNotificationReducer,
+	optInNotificationSelectors,
+} from "../../shared-admin/store";
 import { STORE_NAME } from "../constants";
 import activeContentType, { activeContentTypeActions, activeContentTypeSelectors, createInitialActiveContentTypeState } from "./active-content-type";
 import activeFieldSet, { activeFieldSetActions, activeFieldSetSelectors, createInitialActiveFieldSetState } from "./active-field-set";
@@ -39,6 +51,7 @@ const createStore = ( { initialState } ) => {
 			...externalPendingChangesActions,
 			...externalGenerationActions,
 			...pendingSwitchActions,
+			...optInNotificationActions,
 		},
 		selectors: {
 			...linkParamsSelectors,
@@ -51,6 +64,7 @@ const createStore = ( { initialState } ) => {
 			...externalPendingChangesSelectors,
 			...externalGenerationSelectors,
 			...pendingSwitchSelectors,
+			...optInNotificationSelectors,
 		},
 		initialState: merge(
 			{},
@@ -65,6 +79,7 @@ const createStore = ( { initialState } ) => {
 				externalPendingChanges: createInitialExternalPendingChangesState(),
 				externalGeneration: createInitialExternalGenerationState(),
 				pendingSwitch: createInitialPendingSwitchState(),
+				[ OPT_IN_NOTIFICATION_NAME ]: getInitialOptInNotificationState(),
 			},
 			initialState
 		),
@@ -79,7 +94,11 @@ const createStore = ( { initialState } ) => {
 			externalPendingChanges,
 			externalGeneration,
 			pendingSwitch,
+			[ OPT_IN_NOTIFICATION_NAME ]: optInNotificationReducer,
 		} ),
+		controls: {
+			...optInNotificationControls,
+		},
 	} );
 };
 
diff --git a/packages/js/src/general/app.js b/packages/js/src/general/app.js
index e37e2500745..672ce08c2b4 100644
--- a/packages/js/src/general/app.js
+++ b/packages/js/src/general/app.js
@@ -10,7 +10,7 @@ import { addQueryArgs } from "@wordpress/url";
 import { Notifications, SidebarNavigation, useSvgAria } from "@yoast/ui-library";
 import PropTypes from "prop-types";
 import { Link, Outlet, useLocation } from "react-router-dom";
-import { Notices, OptInContainer } from "./components";
+import { Notices } from "./components";
 import { STORE_NAME } from "./constants";
 import { deleteMigratingNotices } from "../helpers/migrateNotices";
 import { useNotificationCountSync, useSelectGeneralPage } from "./hooks";
@@ -145,7 +145,6 @@ const App = () => {
 					</div>
 				</div>
 			</SidebarNavigation>
-			<OptInContainer />
 			<Notifications
 				className="yst-mx-[calc(50%-50vw)] yst-transition-all yst-start-48"
 				position="bottom-left"
diff --git a/packages/js/src/general/components/index.js b/packages/js/src/general/components/index.js
index f0012904764..b6178d18ea3 100644
--- a/packages/js/src/general/components/index.js
+++ b/packages/js/src/general/components/index.js
@@ -6,8 +6,6 @@ export { Notifications } from "./notifications";
 export { Problems } from "./problems";
 export { RouteErrorFallback } from "./route-error-fallback";
 export { RouteLayout } from "./route-layout";
-export { TaskListOptInNotification } from "./task-list-opt-in-notification";
-export { OptInContainer } from "./opt-in-container";
 export { TaskListUpsellRow } from "./task-list-upsell-row";
 export { Task } from "./task";
 export { TaskListModal } from "./task-list-modal";
diff --git a/packages/js/src/general/components/opt-in-container.js b/packages/js/src/general/components/opt-in-container.js
deleted file mode 100644
index e6148fbe931..00000000000
--- a/packages/js/src/general/components/opt-in-container.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { TaskListOptInNotification } from "./task-list-opt-in-notification";
-import { useSelectGeneralPage } from "../hooks";
-import { useLocation } from "react-router-dom";
-import { useCallback } from "@wordpress/element";
-import { useDispatch } from "@wordpress/data";
-import { ROUTES } from "../routes";
-import { STORE_NAME } from "../constants";
-
-/**
- * The container for the opt-in notification.
- * Used to decide whether to show the opt-in notification or not.
- *
- * @returns {JSX.Element|null} The container component.
- */
-export const OptInContainer = () => {
-	const taskListOptInNotificationSeen = useSelectGeneralPage( "selectIsOptInNotificationSeen", [], "task_list" );
-	const { pathname } = useLocation();
-	const { hideOptInNotification } = useDispatch( STORE_NAME );
-
-	const isOpen = pathname !== ROUTES.firstTimeConfiguration && ! taskListOptInNotificationSeen && pathname !== ROUTES.taskList;
-
-	const onClose = useCallback( () => {
-		hideOptInNotification( "task_list" );
-	}, [ hideOptInNotification ] );
-
-	if ( ! isOpen ) {
-		return null;
-	}
-
-	return <TaskListOptInNotification isOpen={ isOpen } onClose={ onClose } />;
-};
diff --git a/packages/js/src/general/components/task-list-opt-in-notification.js b/packages/js/src/general/components/task-list-opt-in-notification.js
deleted file mode 100644
index f79774b43d5..00000000000
--- a/packages/js/src/general/components/task-list-opt-in-notification.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import { ModalNotification, Button, useSvgAria, useModalNotificationContext } from "@yoast/ui-library";
-import { __ } from "@wordpress/i18n";
-import { ReactComponent as YoastIcon } from "../../../images/Yoast_icon_kader.svg";
-import ArrowNarrowRightIcon from "@heroicons/react/outline/ArrowNarrowRightIcon";
-import classNames from "classnames";
-import { useCallback, useEffect } from "@wordpress/element";
-import { STORE_NAME } from "../constants";
-import { useDispatch } from "@wordpress/data";
-import { useNavigate } from "react-router-dom";
-import { ROUTES } from "../routes";
-import PropTypes from "prop-types";
-import { useSelectGeneralPage } from "../hooks";
-
-/**
- * Checks whether the WP admin sidebar is expanded (not collapsed).
- * When collapsed, the sidebar is ~36px wide; when expanded, ~160px.
- *
- * @returns {boolean} True if the admin sidebar is expanded or absent.
- */
-const isAdminSidebarExpanded = () => {
-	const adminmenuWrap = document.getElementById( "adminmenuwrap" );
-	return ! adminmenuWrap || adminmenuWrap.offsetWidth > 100;
-};
-
-/**
- * The buttons for the task list opt-in notification.
- * Uses the ModalNotification context for dismissal.
- *
- * @returns {JSX.Element} The buttons.
- */
-const NotificationButtons = () => {
-	const { handleDismiss } = useModalNotificationContext();
-	const svgAriaProps = useSvgAria();
-	const taskListpath = ROUTES.taskList;
-	const navigate = useNavigate();
-	const { hideOptInNotification } = useDispatch( STORE_NAME );
-
-	const handleShow = useCallback( async() => {
-		hideOptInNotification( "task_list" );
-		handleDismiss();
-		navigate( taskListpath );
-	}, [ taskListpath, navigate ] );
-
-	return <div className="yst-flex yst-gap-3 yst-justify-end yst-mt-3">
-		<Button size="small" variant="tertiary" onClick={ handleDismiss }>{ __( "Dismiss", "wordpress-seo" ) }</Button>
-		<Button size="small" className="yst-gap-1" onClick={ handleShow }>
-			{ __( "Show me", "wordpress-seo" ) }
-			<ArrowNarrowRightIcon className="yst-w-4 yst-h-4 rtl:yst-rotate-180" { ...svgAriaProps } />
-		</Button>
-	</div>;
-};
-
-/**
- * The task list opt-in notification component.
- * Uses ModalNotification for accessible focus management and modal behavior.
- *
- * @param {Object} props The component props.
- * @param {boolean} props.isOpen Whether the notification is open.
- * @param {Function} props.onClose Function to call when the notification should close.
- *
- * @returns {JSX.Element} The task list opt-in notification component.
- */
-export const TaskListOptInNotification = ( { isOpen, onClose } ) => {
-	const { setOptInNotificationSeen, hideOptInNotification } = useDispatch( STORE_NAME );
-	const svgAriaProps = useSvgAria();
-
-	useEffect( () => {
-		// Mark the notification as seen when mounting.
-		setOptInNotificationSeen( "task_list" );
-
-		return () => {
-			// Hide the notification when unmounting when switching to the FTC tab.
-			hideOptInNotification( "task_list" );
-		};
-	}, [] );
-
-	const isRtl = useSelectGeneralPage( "selectPreference", [], "isRtl" );
-
-	let notificationPositionClass;
-
-	if ( isAdminSidebarExpanded() ) {
-		notificationPositionClass = "md:yst-start-40 rtl:md:yst-start-44";
-	} else if ( isRtl ) {
-		notificationPositionClass = "md:yst-start-[3.25rem]";
-	} else {
-		notificationPositionClass = "md:yst-start-10";
-	}
-
-	return <ModalNotification
-		isOpen={ isOpen }
-		onClose={ onClose }
-		className={ classNames( "yst-z-[9999]", notificationPositionClass ) }
-		position={ isRtl ? "bottom-right" : "bottom-left" }
-		aria-label={ __( "New: Your SEO Task list", "wordpress-seo" ) }
-	>
-		<ModalNotification.Panel className="yst-w-96">
-			<div className="yst-flex yst-gap-3">
-				<div className="yst-flex-shrink-0">
-					<YoastIcon className="yst-w-5 yst-h-5 yst-fill-primary-500" { ...svgAriaProps } />
-				</div>
-				<div className="yst-flex-1">
-					<ModalNotification.Title title={ __( "New: Your SEO Task list", "wordpress-seo" ) } className="yst-mb-1" />
-					<ModalNotification.Message message={ __( "Stay on top of SEO with a clear task list tailored to your site.", "wordpress-seo" ) } />
-				</div>
-				<div>
-					<ModalNotification.Close dismissScreenReaderLabel={ __( "Dismiss", "wordpress-seo" ) } />
-				</div>
-			</div>
-			<NotificationButtons />
-		</ModalNotification.Panel>
-	</ModalNotification>;
-};
-
-TaskListOptInNotification.propTypes = {
-	isOpen: PropTypes.bool.isRequired,
-	onClose: PropTypes.func.isRequired,
-};
diff --git a/packages/js/src/general/initialize.js b/packages/js/src/general/initialize.js
index 188b76c2b7b..607e333f25e 100644
--- a/packages/js/src/general/initialize.js
+++ b/packages/js/src/general/initialize.js
@@ -20,7 +20,6 @@ import { AlertCenter, FirstTimeConfiguration, ROUTES, TaskList } from "./routes"
 import registerStore from "./store";
 import { ADMIN_NOTICES_NAME } from "./store/admin-notices";
 import { ALERT_CENTER_NAME } from "./store/alert-center";
-import { OPT_IN_NOTIFICATION_NAME } from "./store/opt-in";
 
 /**
  * @type {import("../index").ContentType} ContentType
@@ -45,7 +44,6 @@ domReady( () => {
 			dismissedAlerts: get( window, "wpseoScriptData.dismissedAlerts", {} ),
 			isPremium: get( window, "wpseoScriptData.preferences.isPremium", false ),
 			[ ADMIN_NOTICES_NAME ]: { resolvedNotices: [] },
-			[ OPT_IN_NOTIFICATION_NAME ]: { seen: get( window, "wpseoScriptData.optInNotificationSeen", false ) },
 			[ TASK_LIST_NAME ]: {
 				enabled: get( window, "wpseoScriptData.taskListConfiguration.enabled", false ),
 				endpoints: get( window, "wpseoScriptData.taskListConfiguration.endpoints", {} ),
diff --git a/packages/js/src/general/store/index.js b/packages/js/src/general/store/index.js
index 1672e50b485..aa83ba9a060 100644
--- a/packages/js/src/general/store/index.js
+++ b/packages/js/src/general/store/index.js
@@ -25,14 +25,6 @@ import {
 	getInitialAlertCenterState,
 } from "./alert-center";
 import preferences, { createInitialPreferencesState, preferencesActions, preferencesSelectors } from "./preferences";
-import {
-	OPT_IN_NOTIFICATION_NAME,
-	optInNotificationActions,
-	optInNotificationReducer,
-	optInNotificationSelectors,
-	optInNotificationControls,
-	getInitialOptInNotificationState,
-} from "./opt-in";
 import {
 	TASK_LIST_NAME,
 	taskListActions,
@@ -64,7 +56,6 @@ const createStore = ( { initialState } ) => {
 			setDismissedAlerts,
 			setIsPremium,
 			...adminNoticesActions,
-			...optInNotificationActions,
 			...taskListActions,
 		},
 		selectors: {
@@ -76,7 +67,6 @@ const createStore = ( { initialState } ) => {
 			getIsPremium,
 			isPromotionActive,
 			...adminNoticesSelectors,
-			...optInNotificationSelectors,
 			...taskListSelectors,
 		},
 		initialState: merge(
@@ -88,7 +78,6 @@ const createStore = ( { initialState } ) => {
 				[ ALERT_CENTER_NAME ]: getInitialAlertCenterState(),
 				currentPromotions: { promotions: [] },
 				[ ADMIN_NOTICES_NAME ]: getInitialAdminNoticesState(),
-				[ OPT_IN_NOTIFICATION_NAME ]: getInitialOptInNotificationState(),
 				[ TASK_LIST_NAME ]: getInitialTaskListState(),
 			},
 			initialState
@@ -102,13 +91,11 @@ const createStore = ( { initialState } ) => {
 			dismissedAlerts,
 			isPremium,
 			[ ADMIN_NOTICES_NAME ]: adminNoticesReducer,
-			[ OPT_IN_NOTIFICATION_NAME ]: optInNotificationReducer,
 			[ TASK_LIST_NAME ]: taskListReducer,
 		} ),
 		controls: {
 			...alertCenterControls,
 			...dismissedAlertsControls,
-			...optInNotificationControls,
 			...taskListControls,
 		},
 	} );
diff --git a/packages/js/src/shared-admin/store/index.js b/packages/js/src/shared-admin/store/index.js
index 898bfe90021..b8ca4eede15 100644
--- a/packages/js/src/shared-admin/store/index.js
+++ b/packages/js/src/shared-admin/store/index.js
@@ -2,6 +2,7 @@ export * from "./admin-url";
 export * from "./ai-generator-has-consent";
 export * from "./link-params";
 export * from "./notifications";
+export * from "./opt-in";
 export * from "./plugin-url";
 export * from "./wistia-embed-permission";
 export * from "./document-title";
diff --git a/packages/js/src/shared-admin/store/opt-in.js b/packages/js/src/shared-admin/store/opt-in.js
new file mode 100644
index 00000000000..cfb51bf24f4
--- /dev/null
+++ b/packages/js/src/shared-admin/store/opt-in.js
@@ -0,0 +1,64 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { get } from "lodash";
+import { ASYNC_ACTION_NAMES } from "../constants";
+import apiFetch from "@wordpress/api-fetch";
+
+export const OPT_IN_NOTIFICATION_NAME = "optInNotification";
+
+const OPT_IN_NOTIFICATION_SEEN = "setOptInNotificationSeen";
+
+/**
+ * @param {string} key The key of the notification to set as seen.
+ * @returns {Object} Success or error action object.
+ */
+function* setOptInNotificationSeen( key ) {
+	yield{ type: `${ OPT_IN_NOTIFICATION_SEEN }/${ ASYNC_ACTION_NAMES.request }` };
+	try {
+		yield{
+			type: OPT_IN_NOTIFICATION_SEEN,
+			payload: key,
+		};
+		return { type: `${ OPT_IN_NOTIFICATION_SEEN }/${ ASYNC_ACTION_NAMES.success }`, payload: key };
+	} catch ( error ) {
+		console.error( "Error setting opt-in notification as seen:", error );
+		return { type: `${ OPT_IN_NOTIFICATION_SEEN }/${ ASYNC_ACTION_NAMES.error }`, payload: key };
+	}
+}
+
+const slice = createSlice( {
+	name: OPT_IN_NOTIFICATION_NAME,
+	initialState: { seen: {} },
+	reducers: {
+		hideOptInNotification( state, action ) {
+			const key = action.payload;
+			state.seen[ key ] = true;
+		},
+	},
+} );
+
+/**
+ * @returns {Object} The initial state.
+ */
+export const getInitialOptInNotificationState = slice.getInitialState;
+
+
+export const optInNotificationSelectors = {
+	selectIsOptInNotificationSeen: ( state, key ) => get( state, [ OPT_IN_NOTIFICATION_NAME, "seen", key ], false ),
+};
+
+export const optInNotificationActions = {
+	...slice.actions,
+	setOptInNotificationSeen,
+};
+
+export const optInNotificationControls = {
+	[ OPT_IN_NOTIFICATION_SEEN ]: async( { payload } ) => {
+		await apiFetch( {
+			path: "yoast/v1/seen-opt-in-notification",
+			method: "POST",
+			data: { key: payload },
+		} );
+	},
+};
+
+export const optInNotificationReducer = slice.reducer;
diff --git a/packages/js/tests/bulk-editor/initialize.test.js b/packages/js/tests/bulk-editor/initialize.test.js
index dc2621a62db..36ed88d5065 100644
--- a/packages/js/tests/bulk-editor/initialize.test.js
+++ b/packages/js/tests/bulk-editor/initialize.test.js
@@ -1,5 +1,5 @@
 import { jest } from "@jest/globals";
-import { ROOT_ID } from "../../src/bulk-editor/constants";
+import { ROOT_ID, TOUR_OPT_IN_KEY } from "../../src/bulk-editor/constants";
 
 const mockRender = jest.fn();
 const mockCreateRoot = jest.fn( () => ( { render: mockRender } ) );
@@ -60,6 +60,7 @@ describe( "bulk editor initialize", () => {
 			contentTypes: [ { name: "post", label: "Posts" } ],
 			linkParams: { foo: "bar" },
 			nonce: "test-nonce",
+			optInNotificationSeen: { [ TOUR_OPT_IN_KEY ]: true },
 		};
 	} );
 
@@ -82,7 +83,10 @@ describe( "bulk editor initialize", () => {
 		} );
 
 		expect( mockRegisterStore ).toHaveBeenCalledWith( {
-			initialState: { linkParams: { foo: "bar" } },
+			initialState: {
+				linkParams: { foo: "bar" },
+				optInNotification: { seen: { [ TOUR_OPT_IN_KEY ]: true } },
+			},
 		} );
 		expect( mockFixScrolling ).toHaveBeenCalledTimes( 1 );
 		expect( mockCreateRoot ).toHaveBeenCalledWith( root );

From 2c395b65dea76bad49c78ebdfaf6783efb060704 Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Fri, 24 Jul 2026 09:51:43 +0200
Subject: [PATCH 03/20] Refactor General Page Integration and Opt-In Route by
 removing the 'task_list' key in favor of 'bulk_editor_tour'

---
 .../general-page-integration.php              | 24 -------------------
 src/general/user-interface/opt-in-route.php   |  1 -
 .../General_Page_Integration_Test.php         | 23 ------------------
 .../Opt_In_Route/Validate_Key_Test.php        | 14 +++++------
 .../User_Interface/Set_Opt_In_Seen_Test.php   | 10 ++++----
 5 files changed, 12 insertions(+), 60 deletions(-)

diff --git a/src/general/user-interface/general-page-integration.php b/src/general/user-interface/general-page-integration.php
index cc994224617..6d4a2fc6464 100644
--- a/src/general/user-interface/general-page-integration.php
+++ b/src/general/user-interface/general-page-integration.php
@@ -14,7 +14,6 @@
 use Yoast\WP\SEO\Helpers\Options_Helper;
 use Yoast\WP\SEO\Helpers\Product_Helper;
 use Yoast\WP\SEO\Helpers\Short_Link_Helper;
-use Yoast\WP\SEO\Helpers\User_Helper;
 use Yoast\WP\SEO\Integrations\Integration_Interface;
 use Yoast\WP\SEO\Promotions\Application\Promotion_Manager;
 use Yoast\WP\SEO\Task_List\Application\Configuration\Task_List_Configuration;
@@ -92,13 +91,6 @@ class General_Page_Integration implements Integration_Interface {
 	 */
 	private $alert_dismissal_action;
 
-	/**
-	 * Holds the user helper.
-	 *
-	 * @var User_Helper
-	 */
-	private $user_helper;
-
 	/**
 	 * Holds the options helper.
 	 *
@@ -131,7 +123,6 @@ class General_Page_Integration implements Integration_Interface {
 	 * @param Alert_Dismissal_Action    $alert_dismissal_action  The alert dismissal action.
 	 * @param Promotion_Manager         $promotion_manager       The promotion manager.
 	 * @param Dashboard_Configuration   $dashboard_configuration The dashboard configuration.
-	 * @param User_Helper               $user_helper             The user helper.
 	 * @param Options_Helper            $options_helper          The options helper.
 	 * @param WooCommerce_Conditional   $woocommerce_conditional The WooCommerce conditional.
 	 * @param WPSEO_Addon_Manager       $addon_manager           The WPSEO_Addon_Manager.
@@ -146,7 +137,6 @@ public function __construct(
 		Alert_Dismissal_Action $alert_dismissal_action,
 		Promotion_Manager $promotion_manager,
 		Dashboard_Configuration $dashboard_configuration,
-		User_Helper $user_helper,
 		Options_Helper $options_helper,
 		WooCommerce_Conditional $woocommerce_conditional,
 		WPSEO_Addon_Manager $addon_manager,
@@ -160,7 +150,6 @@ public function __construct(
 		$this->alert_dismissal_action  = $alert_dismissal_action;
 		$this->promotion_manager       = $promotion_manager;
 		$this->dashboard_configuration = $dashboard_configuration;
-		$this->user_helper             = $user_helper;
 		$this->options_helper          = $options_helper;
 		$this->woocommerce_conditional = $woocommerce_conditional;
 		$this->addon_manager           = $addon_manager;
@@ -280,20 +269,7 @@ private function get_script_data() {
 			'currentPromotions'     => $this->promotion_manager->get_current_promotions(),
 			'dismissedAlerts'       => $this->alert_dismissal_action->all_dismissed(),
 			'dashboard'             => $this->dashboard_configuration->get_configuration(),
-			'optInNotificationSeen' => [
-				'task_list' => $this->is_task_list_opt_in_notification_seen(),
-			],
 			'taskListConfiguration' => $this->task_list_configuration->get_configuration(),
 		];
 	}
-
-	/**
-	 * Gets if the llms.txt opt-in notification has been seen.
-	 *
-	 * @return bool True if the notification has been seen, false otherwise.
-	 */
-	private function is_task_list_opt_in_notification_seen(): bool {
-		$current_user_id = $this->user_helper->get_current_user_id();
-		return (bool) $this->user_helper->get_meta( $current_user_id, '_yoast_wpseo_task_list_opt_in_notification_seen', true );
-	}
 }
diff --git a/src/general/user-interface/opt-in-route.php b/src/general/user-interface/opt-in-route.php
index 84957cea6f7..da56604a4e5 100644
--- a/src/general/user-interface/opt-in-route.php
+++ b/src/general/user-interface/opt-in-route.php
@@ -142,7 +142,6 @@ public function can_see_opt_in() {
 	 */
 	public function validate_key( $key ) {
 		$allowed_keys = [
-			'task_list',
 			'bulk_editor_tour',
 		];
 
diff --git a/tests/Unit/General/User_Interface/General_Page_Integration_Test.php b/tests/Unit/General/User_Interface/General_Page_Integration_Test.php
index 419028e1298..f92ab0db3c3 100644
--- a/tests/Unit/General/User_Interface/General_Page_Integration_Test.php
+++ b/tests/Unit/General/User_Interface/General_Page_Integration_Test.php
@@ -17,7 +17,6 @@
 use Yoast\WP\SEO\Helpers\Options_Helper;
 use Yoast\WP\SEO\Helpers\Product_Helper;
 use Yoast\WP\SEO\Helpers\Short_Link_Helper;
-use Yoast\WP\SEO\Helpers\User_Helper;
 use Yoast\WP\SEO\Promotions\Application\Promotion_Manager;
 use Yoast\WP\SEO\Task_List\Application\Configuration\Task_List_Configuration;
 use Yoast\WP\SEO\Tests\Unit\TestCase;
@@ -94,13 +93,6 @@ final class General_Page_Integration_Test extends TestCase {
 	 */
 	protected $instance;
 
-	/**
-	 * Holds the user helper mock.
-	 *
-	 * @var Mockery\MockInterface|User_Helper
-	 */
-	private $user_helper;
-
 	/**
 	 * Holds the options helper mock.
 	 *
@@ -145,7 +137,6 @@ public function set_up() {
 		$this->alert_dismissal_action  = Mockery::mock( Alert_Dismissal_Action::class );
 		$this->promotion_manager       = Mockery::mock( Promotion_Manager::class );
 		$this->dashboard_configuration = Mockery::mock( Dashboard_Configuration::class );
-		$this->user_helper             = Mockery::mock( User_Helper::class );
 		$this->options_helper          = Mockery::mock( Options_Helper::class );
 		$this->woocommerce_conditional = Mockery::mock( WooCommerce_Conditional::class );
 		$this->addon_manager           = Mockery::mock( WPSEO_Addon_Manager::class );
@@ -160,7 +151,6 @@ public function set_up() {
 			$this->alert_dismissal_action,
 			$this->promotion_manager,
 			$this->dashboard_configuration,
-			$this->user_helper,
 			$this->options_helper,
 			$this->woocommerce_conditional,
 			$this->addon_manager,
@@ -187,7 +177,6 @@ public function test_construct() {
 				$this->alert_dismissal_action,
 				$this->promotion_manager,
 				$this->dashboard_configuration,
-				$this->user_helper,
 				$this->options_helper,
 				$this->woocommerce_conditional,
 				$this->addon_manager,
@@ -309,7 +298,6 @@ public function test_display_page() {
 	 *
 	 * @covers ::enqueue_assets
 	 * @covers ::get_script_data
-	 * @covers ::is_task_list_opt_in_notification_seen
 	 *
 	 * @return void
 	 */
@@ -349,17 +337,6 @@ public function test_enqueue_assets() {
 			->with( 'black-friday-banner' )
 			->once();
 
-		$this->user_helper
-			->expects( 'get_current_user_id' )
-			->once()
-			->andReturn( 1 );
-
-		$this->user_helper
-			->expects( 'get_meta' )
-			->with( 1, '_yoast_wpseo_task_list_opt_in_notification_seen', true )
-			->once()
-			->andReturn( false );
-
 		$this->options_helper
 			->expects( 'get' )
 			->with( 'enable_llms_txt', true )
diff --git a/tests/Unit/General/User_Interface/Opt_In_Route/Validate_Key_Test.php b/tests/Unit/General/User_Interface/Opt_In_Route/Validate_Key_Test.php
index 5f2c281a708..603f25c9e12 100644
--- a/tests/Unit/General/User_Interface/Opt_In_Route/Validate_Key_Test.php
+++ b/tests/Unit/General/User_Interface/Opt_In_Route/Validate_Key_Test.php
@@ -19,16 +19,16 @@ final class Validate_Key_Test extends Abstract_Opt_In_Route_Test {
 	 * @return void
 	 */
 	public function test_validate_key_with_valid_key() {
-		$this->assertTrue( $this->instance->validate_key( 'task_list' ) );
+		$this->assertTrue( $this->instance->validate_key( 'bulk_editor_tour' ) );
 	}
 
 	/**
-	 * Tests the validate_key method with the bulk editor tour key.
+	 * Tests that the removed task-list key is no longer valid.
 	 *
 	 * @return void
 	 */
-	public function test_validate_key_with_bulk_editor_tour_key() {
-		$this->assertTrue( $this->instance->validate_key( 'bulk_editor_tour' ) );
+	public function test_validate_key_rejects_removed_task_list_key() {
+		$this->assertFalse( $this->instance->validate_key( 'task_list' ) );
 	}
 
 	/**
@@ -73,7 +73,7 @@ public function test_validate_key_with_partial_match() {
 	 * @return void
 	 */
 	public function test_validate_key_with_extra_characters() {
-		$this->assertFalse( $this->instance->validate_key( 'task_list_extra' ) );
+		$this->assertFalse( $this->instance->validate_key( 'bulk_editor_tour_extra' ) );
 	}
 
 	/**
@@ -82,7 +82,7 @@ public function test_validate_key_with_extra_characters() {
 	 * @return void
 	 */
 	public function test_validate_key_is_case_sensitive() {
-		$this->assertFalse( $this->instance->validate_key( 'TASK_LIST' ) );
+		$this->assertFalse( $this->instance->validate_key( 'BULK_EDITOR_TOUR' ) );
 	}
 
 	/**
@@ -91,6 +91,6 @@ public function test_validate_key_is_case_sensitive() {
 	 * @return void
 	 */
 	public function test_validate_key_with_whitespace() {
-		$this->assertFalse( $this->instance->validate_key( ' task_list ' ) );
+		$this->assertFalse( $this->instance->validate_key( ' bulk_editor_tour ' ) );
 	}
 }
diff --git a/tests/WP/General/User_Interface/Set_Opt_In_Seen_Test.php b/tests/WP/General/User_Interface/Set_Opt_In_Seen_Test.php
index 10ed9bfe278..0816be6ed57 100644
--- a/tests/WP/General/User_Interface/Set_Opt_In_Seen_Test.php
+++ b/tests/WP/General/User_Interface/Set_Opt_In_Seen_Test.php
@@ -53,7 +53,7 @@ public function test_set_opt_in_seen_with_valid_key_and_privileged_user() {
 		\wp_set_current_user( $user->ID );
 
 		$request = new WP_REST_Request( 'POST', '/yoast/v1/seen-opt-in-notification' );
-		$request->set_param( 'key', 'task_list' );
+		$request->set_param( 'key', 'bulk_editor_tour' );
 
 		$response = \rest_get_server()->dispatch( $request );
 
@@ -65,7 +65,7 @@ public function test_set_opt_in_seen_with_valid_key_and_privileged_user() {
 		$this->assertTrue( $response_data->success );
 		$this->assertSame( 200, $response_data->status );
 
-		$meta_value = \get_user_meta( $user->ID, '_yoast_wpseo_task_list_opt_in_notification_seen', true );
+		$meta_value = \get_user_meta( $user->ID, '_yoast_wpseo_bulk_editor_tour_opt_in_notification_seen', true );
 
 		$this->assertSame( $meta_value, '1' );
 	}
@@ -103,7 +103,7 @@ public function test_set_opt_in_seen_with_not_privileged_user() {
 		\wp_set_current_user( $user->ID );
 
 		$request = new WP_REST_Request( 'POST', '/yoast/v1/seen-opt-in-notification' );
-		$request->set_param( 'key', 'task_list' );
+		$request->set_param( 'key', 'bulk_editor_tour' );
 
 		$response = \rest_get_server()->dispatch( $request );
 
@@ -124,7 +124,7 @@ public function test_set_opt_in_seen_with_no_user() {
 		\wp_set_current_user( 0 );
 
 		$request = new WP_REST_Request( 'POST', '/yoast/v1/seen-opt-in-notification' );
-		$request->set_param( 'key', 'task_list' );
+		$request->set_param( 'key', 'bulk_editor_tour' );
 
 		$response = \rest_get_server()->dispatch( $request );
 
@@ -170,7 +170,7 @@ public function test_set_opt_in_seen_is_idempotent() {
 		\wp_set_current_user( $user->ID );
 
 		$request = new WP_REST_Request( 'POST', '/yoast/v1/seen-opt-in-notification' );
-		$request->set_param( 'key', 'task_list' );
+		$request->set_param( 'key', 'bulk_editor_tour' );
 
 		// First call: sets the meta.
 		$response = \rest_get_server()->dispatch( $request );

From 7b852791013ab3f30a064caf582e6ca42015c2b3 Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Fri, 24 Jul 2026 15:42:22 +0200
Subject: [PATCH 04/20] Refines the guided tour feature for the bulk editor

---
 css/src/bulk-editor-page.css                  |  14 +++
 .../bulk-editor/components/bulk-action-bar.js |   4 +-
 .../components/bulk-editor-content.js         |   2 +
 .../bulk-editor/components/bulk-editor-nav.js |  30 ++---
 .../components/bulk-editor-tabs.js            |   2 +-
 .../components/tour/bulk-editor-tour.js       |  98 +++++++++++++++
 .../bulk-editor/components/tour/tour-card.js  | 103 +++++++++++++++
 .../bulk-editor/components/tour/tour-steps.js |  41 ++++++
 .../components/tour/use-tour-anchor.js        |  92 ++++++++++++++
 packages/js/src/general/app.js                |   3 +-
 .../bulk-editor-tour-notification.js          | 116 +++++++++++++++++
 packages/js/src/general/components/index.js   |   1 +
 packages/js/src/general/initialize.js         |   3 +-
 packages/js/src/general/store/index.js        |  11 ++
 .../bulk-editor/tour/bulk-editor-tour.test.js | 119 ++++++++++++++++++
 .../tests/bulk-editor/tour/tour-card.test.js  |  61 +++++++++
 .../tests/bulk-editor/tour/tour-steps.test.js |  34 +++++
 .../bulk-editor/tour/use-tour-anchor.test.js  |  74 +++++++++++
 .../general-page-integration.php              |  25 ++++
 .../General_Page_Integration_Test.php         |  21 ++++
 20 files changed, 835 insertions(+), 19 deletions(-)
 create mode 100644 packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
 create mode 100644 packages/js/src/bulk-editor/components/tour/tour-card.js
 create mode 100644 packages/js/src/bulk-editor/components/tour/tour-steps.js
 create mode 100644 packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
 create mode 100644 packages/js/src/general/components/bulk-editor-tour-notification.js
 create mode 100644 packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
 create mode 100644 packages/js/tests/bulk-editor/tour/tour-card.test.js
 create mode 100644 packages/js/tests/bulk-editor/tour/tour-steps.test.js
 create mode 100644 packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js

diff --git a/css/src/bulk-editor-page.css b/css/src/bulk-editor-page.css
index e5d5aadce3e..4d249b6461a 100644
--- a/css/src/bulk-editor-page.css
+++ b/css/src/bulk-editor-page.css
@@ -6,6 +6,11 @@
 		padding-left: 0 !important;
 	}
 
+	/* Keep the admin menu above the guided-tour spotlight dim so it isn't overlayed. */
+	#adminmenuback {
+		z-index: 11;
+	}
+
 	.yst-mobile-navigation__top {
 		/* Offset the sticky bar below the taller mobile admin bar. */
 		@media (min-width: 601px) and (max-width: 768px) {
@@ -107,3 +112,12 @@
 .yst-root .yst-bulk-editor-title-link:focus:not(:focus-visible) {
 	@apply yst-outline-none;
 }
+
+/* The guided-tour spotlight: lifts the highlighted element above a viewport-filling shadow that dims the rest
+ * of the page, so the current step's target stays bright. The shadow roves as the class moves each step. */
+.yst-root .yst-feature-highlight {
+	position: relative;
+	z-index: 10; /* Above page content (z:auto); the tour card wrapper (z:100000) stays above the shadow. */
+	box-shadow: 0 0 0 100vmax rgb(100 116 139 / 0.75); /* Slate-500/75 spotlight dim. */
+	border-radius: 0.5rem; /* Soften the bright cut-out's corners. */
+}
diff --git a/packages/js/src/bulk-editor/components/bulk-action-bar.js b/packages/js/src/bulk-editor/components/bulk-action-bar.js
index 94c37cd4658..c7d76f8626a 100644
--- a/packages/js/src/bulk-editor/components/bulk-action-bar.js
+++ b/packages/js/src/bulk-editor/components/bulk-action-bar.js
@@ -79,7 +79,7 @@ export const SelectionToolbar = ( { idSuffix = "", isAllSelected, isIndeterminat
 	}, [ isIndeterminate ] );
 
 	return (
-		<div className="yst-flex yst-items-center yst-gap-4">
+		<div className="yst-flex yst-items-center yst-gap-4" data-tour-id="selection-toolbar">
 			<Checkbox
 				ref={ checkboxRef }
 				id={ `bulk-editor-select-all${ idSuffix }` }
@@ -249,7 +249,7 @@ const BulkActionsNotices = ( {
 const BulkActionsBand = ( {
 	isPremium, isAiEnabled, isActive, selectedIds, activeFieldSet, contentType, hasUnsavedEdits, editCount, onApplyAll, onDiscardAll, isApplyingAll,
 } ) => (
-	<div className="yst-flex yst-items-center yst-gap-3 yst-border-y yst-border-slate-200 yst-bg-slate-100 yst-px-4 yst-py-3">
+	<div className="yst-flex yst-items-center yst-gap-3 yst-border-y yst-border-slate-200 yst-bg-slate-100 yst-px-4 yst-py-3" data-tour-id="generate-actions">
 		{ ! isPremium && isAiEnabled && <FreeBulkActions contentType={ contentType } /> }
 		{ isActive && (
 			<Slot name={ BULK_ACTIONS_SLOT } fillProps={ { selectedIds, activeFieldSet, contentType, hasUnsavedEdits } } />
diff --git a/packages/js/src/bulk-editor/components/bulk-editor-content.js b/packages/js/src/bulk-editor/components/bulk-editor-content.js
index 043a684ff3b..2aec41ec3a4 100644
--- a/packages/js/src/bulk-editor/components/bulk-editor-content.js
+++ b/packages/js/src/bulk-editor/components/bulk-editor-content.js
@@ -8,6 +8,7 @@ import { useInlineEdit } from "../hooks/use-inline-edit";
 import { usePosts } from "../services/use-posts";
 import { BulkActions, SelectionToolbar } from "./bulk-action-bar";
 import { BulkEditorFilters } from "./bulk-editor-filters";
+import { BulkEditorTour } from "./tour/bulk-editor-tour";
 import { BulkEditorFooter } from "./bulk-editor-footer";
 import { BulkEditorTable } from "./table/bulk-editor-table";
 import { BulkEditorTabPanel, BulkEditorTabs } from "./bulk-editor-tabs";
@@ -225,6 +226,7 @@ export const BulkEditorContent = ( { dataProvider, remoteDataProvider, contentTy
 					onCancel: onCancelSwitch,
 				} }
 			/>
+			<BulkEditorTour onSelectAll={ onSelectAll } onDeselectAll={ deselectAll } hasSelection={ hasSelection } />
 		</div>
 	);
 };
diff --git a/packages/js/src/bulk-editor/components/bulk-editor-nav.js b/packages/js/src/bulk-editor/components/bulk-editor-nav.js
index 269ea59d854..9e745acf261 100644
--- a/packages/js/src/bulk-editor/components/bulk-editor-nav.js
+++ b/packages/js/src/bulk-editor/components/bulk-editor-nav.js
@@ -121,20 +121,22 @@ export const BulkEditorNavMenu = ( {
 		<div className="yst-space-y-6">
 			<NavLogo logoHref={ logoHref } isPremium={ isPremium } idSuffix={ idSuffix } disabled={ disabled } onNavigate={ onNavigate } />
 			<BackToToolsLink href={ backToToolsUrl } disabled={ disabled } onNavigate={ onNavigate } />
-			<SidebarNavigation.MenuItemWithLimiter
-				id={ `bulk-editor-nav-content-types${ idSuffix }` }
-				label={ __( "Bulk editor", "wordpress-seo" ) }
-				icon={ DuplicateIcon }
-				defaultOpen={ true }
-				limit={ visibleLimit }
-				buttonId={ `bulk-editor-nav-more${ idSuffix }` }
-				showMoreLabel={ showMoreLabel }
-				showLessLabel={ __( "Show less", "wordpress-seo" ) }
-			>
-				{ contentTypes.map( ( contentType ) => (
-					<ContentTypeItem key={ contentType.id } contentType={ contentType } disabled={ disabled } onChange={ onChange } />
-				) ) }
-			</SidebarNavigation.MenuItemWithLimiter>
+			<div data-tour-id="content-type-nav">
+				<SidebarNavigation.MenuItemWithLimiter
+					id={ `bulk-editor-nav-content-types${ idSuffix }` }
+					label={ __( "Bulk editor", "wordpress-seo" ) }
+					icon={ DuplicateIcon }
+					defaultOpen={ true }
+					limit={ visibleLimit }
+					buttonId={ `bulk-editor-nav-more${ idSuffix }` }
+					showMoreLabel={ showMoreLabel }
+					showLessLabel={ __( "Show less", "wordpress-seo" ) }
+				>
+					{ contentTypes.map( ( contentType ) => (
+						<ContentTypeItem key={ contentType.id } contentType={ contentType } disabled={ disabled } onChange={ onChange } />
+					) ) }
+				</SidebarNavigation.MenuItemWithLimiter>
+			</div>
 		</div>
 	);
 };
diff --git a/packages/js/src/bulk-editor/components/bulk-editor-tabs.js b/packages/js/src/bulk-editor/components/bulk-editor-tabs.js
index 1fcb98ca74a..a276a5da197 100644
--- a/packages/js/src/bulk-editor/components/bulk-editor-tabs.js
+++ b/packages/js/src/bulk-editor/components/bulk-editor-tabs.js
@@ -122,7 +122,7 @@ export const BulkEditorTabs = ( { tabs, activeTab, disabled = false, onChange, l
 	}, [ tabs, activeTab, onChange, disabled ] );
 
 	return (
-		<div ref={ listRef } role="tablist" aria-label={ label } className="yst-flex yst-gap-4">
+		<div ref={ listRef } role="tablist" aria-label={ label } className="yst-flex yst-gap-4" data-tour-id="appearance-tabs">
 			{ tabs.map( ( tab ) => (
 				<Tab
 					key={ tab.id }
diff --git a/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js b/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
new file mode 100644
index 00000000000..3e694c6eb66
--- /dev/null
+++ b/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
@@ -0,0 +1,98 @@
+import { useDispatch, useSelect } from "@wordpress/data";
+import { useCallback, useEffect, useMemo, useRef, useState } from "@wordpress/element";
+import { STORE_NAME, TOUR_OPT_IN_KEY } from "../../constants";
+import { TourCard } from "./tour-card";
+import { getTourSteps } from "./tour-steps";
+import { useTourAnchor } from "./use-tour-anchor";
+
+/**
+ * The first-time guided tour for the bulk editor.
+ *
+ * Walks a new user through the page's key areas with an anchored card per step. It auto-starts once per user
+ * (gated on the `bulk_editor_tour` opt-in flag) and, on finish or dismiss, marks the flag seen so it never
+ * returns. The final step points at the generate actions, which only exists with a selection, so the tour selects
+ * rows for that step and clears them again when it ends.
+ *
+ * @param {Object}   props               The props.
+ * @param {Function} props.onSelectAll   Selects the editable rows (the page's real select-all handler).
+ * @param {Function} props.onDeselectAll Clears the selection.
+ * @param {boolean}  props.hasSelection  Whether any rows are currently selected.
+ *
+ * @returns {JSX.Element|null} The active tour step, or nothing when the tour is done or unavailable.
+ */
+export const BulkEditorTour = ( { onSelectAll, onDeselectAll, hasSelection } ) => {
+	const { isSeen, isAiEnabled } = useSelect( ( select ) => {
+		const store = select( STORE_NAME );
+		return {
+			isSeen: store.selectIsOptInNotificationSeen( TOUR_OPT_IN_KEY ),
+			isAiEnabled: store.selectPreference( "isAiEnabled", false ),
+		};
+	}, [] );
+	const { setOptInNotificationSeen } = useDispatch( STORE_NAME );
+
+	// The generate step's target only exists when AI is enabled, so drop it otherwise.
+	const steps = useMemo(
+		() => getTourSteps().filter( ( tourStep ) => ! tourStep.requiresSelection || isAiEnabled ),
+		[ isAiEnabled ]
+	);
+
+	const [ stepIndex, setStepIndex ] = useState( 0 );
+	const [ isDismissed, setIsDismissed ] = useState( false );
+	// Whether the tour created the selection itself, so it can undo it without clearing a selection the user made.
+	const didAutoSelect = useRef( false );
+
+	const isActive = ! isSeen && ! isDismissed;
+	const step = steps[ stepIndex ];
+	const isLastStep = stepIndex === steps.length - 1;
+
+	useEffect( () => {
+		if ( isActive && step.requiresSelection && ! hasSelection ) {
+			didAutoSelect.current = true;
+			onSelectAll();
+		}
+	}, [ isActive, step, hasSelection, onSelectAll ] );
+
+	const { style } = useTourAnchor( `[data-tour-id="${ step.tourId }"]`, isActive );
+
+	const finish = useCallback( () => {
+		if ( didAutoSelect.current ) {
+			onDeselectAll();
+			didAutoSelect.current = false;
+		}
+		setIsDismissed( true );
+		setOptInNotificationSeen( TOUR_OPT_IN_KEY );
+	}, [ onDeselectAll, setOptInNotificationSeen ] );
+
+	const onNext = useCallback( () => {
+		setStepIndex( ( index ) => {
+			if ( index >= steps.length - 1 ) {
+				finish();
+				return index;
+			}
+			return index + 1;
+		} );
+	}, [ steps.length, finish ] );
+
+	const onBack = useCallback( () => setStepIndex( ( index ) => Math.max( 0, index - 1 ) ), [] );
+
+	if ( ! isActive || ! style ) {
+		return null;
+	}
+
+	return (
+		<div className="yst-fixed yst-z-[100000]" style={ style }>
+			<TourCard
+				id={ step.id }
+				title={ step.title }
+				content={ step.content }
+				position={ step.position }
+				currentStep={ stepIndex + 1 }
+				totalSteps={ steps.length }
+				isLastStep={ isLastStep }
+				onNext={ onNext }
+				onBack={ stepIndex > 0 ? onBack : null }
+				onSkip={ finish }
+			/>
+		</div>
+	);
+};
diff --git a/packages/js/src/bulk-editor/components/tour/tour-card.js b/packages/js/src/bulk-editor/components/tour/tour-card.js
new file mode 100644
index 00000000000..36cb1c3a37e
--- /dev/null
+++ b/packages/js/src/bulk-editor/components/tour/tour-card.js
@@ -0,0 +1,103 @@
+import ArrowNarrowRightIcon from "@heroicons/react/solid/ArrowNarrowRightIcon";
+import { useCallback, useEffect, useRef } from "@wordpress/element";
+import { __, sprintf } from "@wordpress/i18n";
+import { Button, Popover, useSvgAria } from "@yoast/ui-library";
+import { ReactComponent as YoastIcon } from "../../../../images/Yoast_icon_kader.svg";
+
+/**
+ * A single step of the bulk editor guided tour, rendered as a ui-library Popover anchored to a target element.
+ *
+ * The card carries the step copy plus the tour navigation (progress, Back, Next/finish). Dismissing the popover ends the whole tour via `onSkip`.
+ *
+ * @param {Object}          props             The component props.
+ * @param {string}          props.id          The unique popover id; also derives the title and content ids.
+ * @param {string}          props.title       The step title.
+ * @param {React.ReactNode} props.content     The step body copy.
+ * @param {number}          props.currentStep The 1-based index of this step.
+ * @param {number}          props.totalSteps  The total number of steps.
+ * @param {boolean}         props.isLastStep  Whether this is the final step (shows "Got it!" instead of "Next").
+ * @param {Function}        props.onNext      Advances to the next step, or finishes on the last step.
+ * @param {Function}        [props.onBack]    Goes back a step; omitted on the first step.
+ * @param {Function}        props.onSkip      Ends the tour without finishing (close button / backdrop / Escape).
+ * @param {string}          [props.position]  The popover position relative to its anchor.
+ * @param {string}          [props.className] Optional extra className for the popover.
+ *
+ * @returns {JSX.Element} The tour step card.
+ */
+export const TourCard = ( {
+	id,
+	title,
+	content,
+	currentStep,
+	totalSteps,
+	isLastStep,
+	onNext,
+	onBack = null,
+	onSkip,
+	position = "right",
+	className = "",
+} ) => {
+	const svgAriaProps = useSvgAria();
+	const nextButtonRef = useRef( null );
+
+	// Move focus to the primary action each time the step changes, so keyboard and screen reader users follow along.
+	useEffect( () => {
+		const timeout = setTimeout( () => nextButtonRef.current?.focus(), 300 );
+		return () => clearTimeout( timeout );
+	}, [ currentStep ] );
+
+	// The close button, backdrop and Escape all resolve to hiding the popover, which ends the tour.
+	const handleVisibilityChange = useCallback( ( isVisible ) => ! isVisible && onSkip(), [ onSkip ] );
+
+	return <Popover
+		id={ id }
+		hasBackdrop={ false }
+		role="dialog"
+		aria-labelledby={ `${ id }-title` }
+		aria-describedby={ `${ id }-content` }
+		isVisible={ true }
+		setIsVisible={ handleVisibilityChange }
+		position={ position }
+		className={ className }
+	>
+		<>
+			<div className="yst-flex yst-gap-3 yst-items-center">
+				<div className="yst-flex-shrink-0">
+					<YoastIcon className="yst-w-5 yst-h-5" { ...svgAriaProps } />
+				</div>
+				<div className="yst-flex-grow">
+					<Popover.Title id={ `${ id }-title` } as="h3">
+						{ title }
+					</Popover.Title>
+				</div>
+				<Popover.CloseButton screenReaderLabel={ __( "Close the tour", "wordpress-seo" ) } />
+			</div>
+			<Popover.Content id={ `${ id }-content` } className="yst-font-normal yst-ms-8 yst-me-5 yst-mt-1">
+				{ content }
+			</Popover.Content>
+			<div className="yst-flex yst-gap-3 yst-justify-between yst-items-center yst-mt-3">
+				<span className="yst-text-slate-500">
+					{ sprintf(
+						/* translators: %1$s is the current step number, %2$s is the total number of steps. */
+						__( "%1$s / %2$s", "wordpress-seo" ),
+						currentStep,
+						totalSteps
+					) }
+				</span>
+				<div className="yst-flex yst-gap-3 yst-items-center">
+					{ onBack && <Button variant="tertiary" onClick={ onBack }>
+						{ __( "Back", "wordpress-seo" ) }
+					</Button> }
+					<Button ref={ nextButtonRef } variant="primary" onClick={ onNext } className="yst-flex yst-gap-1">
+						{ isLastStep
+							? __( "Got it!", "wordpress-seo" )
+							: <>
+								{ __( "Next", "wordpress-seo" ) }
+								<ArrowNarrowRightIcon className="yst-h-4 yst-w-4 rtl:yst-rotate-180" { ...svgAriaProps } />
+							</> }
+					</Button>
+				</div>
+			</div>
+		</>
+	</Popover>;
+};
diff --git a/packages/js/src/bulk-editor/components/tour/tour-steps.js b/packages/js/src/bulk-editor/components/tour/tour-steps.js
new file mode 100644
index 00000000000..dd5eb7e9b01
--- /dev/null
+++ b/packages/js/src/bulk-editor/components/tour/tour-steps.js
@@ -0,0 +1,41 @@
+import { __ } from "@wordpress/i18n";
+
+/**
+ * The bulk editor guided-tour steps, in order.
+ *
+ * Each step points at an element carrying the matching `data-tour-id`. `requiresSelection` marks a step whose
+ * target only exists once rows are selected, so the tour selects rows before showing it.
+ *
+ * @returns {Array<Object>} The tour steps.
+ */
+export const getTourSteps = () => [
+	{
+		id: "bulk-editor-tour-content-type",
+		tourId: "content-type-nav",
+		position: "right",
+		title: __( "Select your content type", "wordpress-seo" ),
+		content: __( "This will refine the content to what you want to update.", "wordpress-seo" ),
+	},
+	{
+		id: "bulk-editor-tour-appearance",
+		tourId: "appearance-tabs",
+		position: "right",
+		title: __( "Select search or social appearance", "wordpress-seo" ),
+		content: __( "Easily switch between them anytime.", "wordpress-seo" ),
+	},
+	{
+		id: "bulk-editor-tour-multi-select",
+		tourId: "selection-toolbar",
+		position: "right",
+		title: __( "Multi-select", "wordpress-seo" ),
+		content: __( "Choose the rows you want to update. Use the dropdown for additional options.", "wordpress-seo" ),
+	},
+	{
+		id: "bulk-editor-tour-generate",
+		tourId: "generate-actions",
+		position: "bottom-right",
+		requiresSelection: true,
+		title: __( "Get SEO-friendly options at scale", "wordpress-seo" ),
+		content: __( "Generate up to 20 results at a time. Great for website refreshes!", "wordpress-seo" ),
+	},
+];
diff --git a/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js b/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
new file mode 100644
index 00000000000..be14f0d08bc
--- /dev/null
+++ b/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
@@ -0,0 +1,92 @@
+import { useState, useEffect } from "@wordpress/element";
+
+// How long to keep looking for a target that mounts asynchronously (e.g. the generate actions bar that only appears once
+// rows are selected), and how often to re-check, before giving up on the step.
+const TARGET_WAIT_MS = 2000;
+const TARGET_POLL_MS = 100;
+
+/**
+ * Finds the visible element for a tour target.
+ *
+ * @param {string} selector The `[data-tour-id="…"]` selector.
+ *
+ * @returns {HTMLElement|null} The visible matching element, or null.
+ */
+const findVisibleTarget = ( selector ) =>
+	[ ...document.querySelectorAll( selector ) ].find( ( element ) => element.offsetParent !== null ) ?? null;
+
+/**
+ * Positions the tour card against a target element and moves the spotlight highlight onto it.
+ *
+ * @param {string}  targetSelector The `[data-tour-id="…"]` selector of the element the step points at.
+ * @param {boolean} isActive       Whether this step is the active one; only then is the target measured and highlighted.
+ *
+ * @returns {{style: Object|null}} The wrapper's absolute-position style, or null while no target is found.
+ */
+export const useTourAnchor = ( targetSelector, isActive ) => {
+	const [ style, setStyle ] = useState( null );
+
+	useEffect( () => {
+		if ( ! isActive ) {
+			return;
+		}
+
+		let pollTimer = null;
+		let cleanup = null;
+
+		const attach = ( element ) => {
+			element.classList.add( "yst-feature-highlight" );
+			element.scrollIntoView( { behavior: "smooth", block: "center" } );
+
+			const updatePosition = () => {
+				const rect = element.getBoundingClientRect();
+				setStyle( {
+					top: `${ rect.top }px`,
+					left: `${ rect.left }px`,
+					width: `${ rect.width }px`,
+					height: `${ rect.height }px`,
+				} );
+			};
+			updatePosition();
+
+			window.addEventListener( "scroll", updatePosition, true );
+			window.addEventListener( "resize", updatePosition );
+			const observer = new ResizeObserver( updatePosition );
+			observer.observe( element );
+
+			cleanup = () => {
+				element.classList.remove( "yst-feature-highlight" );
+				window.removeEventListener( "scroll", updatePosition, true );
+				window.removeEventListener( "resize", updatePosition );
+				observer.disconnect();
+			};
+		};
+
+		// The target may not be in the DOM yet (e.g. the generate action buttons appear only after step 4 selects rows),
+		// so poll briefly until it shows up.
+		const deadline = Date.now() + TARGET_WAIT_MS;
+		const tryAttach = () => {
+			const element = findVisibleTarget( targetSelector );
+			if ( element ) {
+				attach( element );
+				return;
+			}
+			if ( Date.now() < deadline ) {
+				pollTimer = setTimeout( tryAttach, TARGET_POLL_MS );
+			}
+		};
+		tryAttach();
+
+		return () => {
+			if ( pollTimer ) {
+				clearTimeout( pollTimer );
+			}
+			if ( cleanup ) {
+				cleanup();
+			}
+			setStyle( null );
+		};
+	}, [ targetSelector, isActive ] );
+
+	return { style };
+};
diff --git a/packages/js/src/general/app.js b/packages/js/src/general/app.js
index 672ce08c2b4..dce57f3436d 100644
--- a/packages/js/src/general/app.js
+++ b/packages/js/src/general/app.js
@@ -10,7 +10,7 @@ import { addQueryArgs } from "@wordpress/url";
 import { Notifications, SidebarNavigation, useSvgAria } from "@yoast/ui-library";
 import PropTypes from "prop-types";
 import { Link, Outlet, useLocation } from "react-router-dom";
-import { Notices } from "./components";
+import { BulkEditorTourNotification, Notices } from "./components";
 import { STORE_NAME } from "./constants";
 import { deleteMigratingNotices } from "../helpers/migrateNotices";
 import { useNotificationCountSync, useSelectGeneralPage } from "./hooks";
@@ -145,6 +145,7 @@ const App = () => {
 					</div>
 				</div>
 			</SidebarNavigation>
+			<BulkEditorTourNotification />
 			<Notifications
 				className="yst-mx-[calc(50%-50vw)] yst-transition-all yst-start-48"
 				position="bottom-left"
diff --git a/packages/js/src/general/components/bulk-editor-tour-notification.js b/packages/js/src/general/components/bulk-editor-tour-notification.js
new file mode 100644
index 00000000000..fbb7a2b4b10
--- /dev/null
+++ b/packages/js/src/general/components/bulk-editor-tour-notification.js
@@ -0,0 +1,116 @@
+import ArrowNarrowRightIcon from "@heroicons/react/outline/ArrowNarrowRightIcon";
+import { useDispatch } from "@wordpress/data";
+import { useCallback } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { Button, ModalNotification, useModalNotificationContext, useSvgAria } from "@yoast/ui-library";
+import classNames from "classnames";
+import { useLocation } from "react-router-dom";
+import { ReactComponent as YoastIcon } from "../../../images/Yoast_icon_kader.svg";
+import { STORE_NAME } from "../constants";
+import { useSelectGeneralPage } from "../hooks";
+import { ROUTES } from "../routes";
+
+// The opt-in key shared with the bulk editor tour and the server meta.
+const TOUR_OPT_IN_KEY = "bulk_editor_tour";
+
+// The bulk editor admin page the tour runs on, resolved against the admin URL for the "Show me" navigation.
+const BULK_EDITOR_LINK = "admin.php?page=wpseo_page_bulk_edit";
+
+/**
+ * Checks whether the WP admin sidebar is expanded, to offset the notification clear of it.
+ *
+ * @returns {boolean} True if the admin sidebar is expanded or absent.
+ */
+const isAdminSidebarExpanded = () => {
+	const adminMenuWrap = document.getElementById( "adminmenuwrap" );
+	return ! adminMenuWrap || adminMenuWrap.offsetWidth > 100;
+};
+
+/**
+ * The Dismiss / Show me buttons for the entry notification.
+ *
+ * @param {Object} props              The props.
+ * @param {string} props.bulkEditorUrl The bulk editor URL the "Show me" button opens.
+ *
+ * @returns {JSX.Element} The buttons.
+ */
+const NotificationButtons = ( { bulkEditorUrl } ) => {
+	const { handleDismiss } = useModalNotificationContext();
+	const svgAriaProps = useSvgAria();
+
+	// A full-page navigation to the bulk editor, where the guided tour runs.
+	const handleShow = useCallback( () => {
+		window.location.href = bulkEditorUrl;
+	}, [ bulkEditorUrl ] );
+
+	return <div className="yst-flex yst-gap-3 yst-justify-end yst-mt-3">
+		<Button size="small" variant="tertiary" onClick={ handleDismiss }>{ __( "Dismiss", "wordpress-seo" ) }</Button>
+		<Button size="small" className="yst-gap-1" onClick={ handleShow }>
+			{ __( "Show me", "wordpress-seo" ) }
+			<ArrowNarrowRightIcon className="yst-w-4 yst-h-4 rtl:yst-rotate-180" { ...svgAriaProps } />
+		</Button>
+	</div>;
+};
+
+/**
+ * The bulk editor guided-tour entry notification, shown on the General page.
+ *
+ * It points first-time users to the bulk editor, where the step-by-step tour runs. Dismissing it marks the tour
+ * seen (so it never returns); "Show me" navigates to the bulk editor page.
+ *
+ * @returns {JSX.Element|null} The notification, or nothing when it has been seen or on the first-time configuration.
+ */
+export const BulkEditorTourNotification = () => {
+	const { setOptInNotificationSeen, hideOptInNotification } = useDispatch( STORE_NAME );
+	const svgAriaProps = useSvgAria();
+	const { pathname } = useLocation();
+	const isSeen = useSelectGeneralPage( "selectIsOptInNotificationSeen", [], TOUR_OPT_IN_KEY );
+	const isRtl = useSelectGeneralPage( "selectPreference", [], "isRtl" );
+	const bulkEditorUrl = useSelectGeneralPage( "selectAdminLink", [], BULK_EDITOR_LINK );
+
+	// Dismissing (close button or Dismiss) ends the tour: persist it seen, then hide for the current session.
+	const onClose = useCallback( () => {
+		setOptInNotificationSeen( TOUR_OPT_IN_KEY );
+		hideOptInNotification( TOUR_OPT_IN_KEY );
+	}, [ setOptInNotificationSeen, hideOptInNotification ] );
+
+	const isOpen = ! isSeen && pathname !== ROUTES.firstTimeConfiguration;
+	if ( ! isOpen ) {
+		return null;
+	}
+
+	let positionClass;
+	if ( isAdminSidebarExpanded() ) {
+		positionClass = "md:yst-start-40 rtl:md:yst-start-44";
+	} else if ( isRtl ) {
+		positionClass = "md:yst-start-[3.25rem]";
+	} else {
+		positionClass = "md:yst-start-10";
+	}
+
+	return <ModalNotification
+		isOpen={ isOpen }
+		onClose={ onClose }
+		className={ classNames( "yst-z-[9999]", positionClass ) }
+		position={ isRtl ? "bottom-right" : "bottom-left" }
+		aria-label={ __( "New: Work faster with bulk updates", "wordpress-seo" ) }
+	>
+		<ModalNotification.Panel className="yst-w-96">
+			<div className="yst-flex yst-gap-3">
+				<div className="yst-flex-shrink-0">
+					<YoastIcon className="yst-w-5 yst-h-5 yst-fill-primary-500" { ...svgAriaProps } />
+				</div>
+				<div className="yst-flex-1">
+					<ModalNotification.Title title={ __( "New: Work faster with bulk updates", "wordpress-seo" ) } className="yst-mb-1" />
+					<ModalNotification.Message
+						message={ __( "Use the Bulk Editor to get AI-generated, SEO-friendly titles and descriptions in seconds.", "wordpress-seo" ) }
+					/>
+				</div>
+				<div>
+					<ModalNotification.Close dismissScreenReaderLabel={ __( "Dismiss", "wordpress-seo" ) } />
+				</div>
+			</div>
+			<NotificationButtons bulkEditorUrl={ bulkEditorUrl } />
+		</ModalNotification.Panel>
+	</ModalNotification>;
+};
diff --git a/packages/js/src/general/components/index.js b/packages/js/src/general/components/index.js
index b6178d18ea3..7230391e441 100644
--- a/packages/js/src/general/components/index.js
+++ b/packages/js/src/general/components/index.js
@@ -6,6 +6,7 @@ export { Notifications } from "./notifications";
 export { Problems } from "./problems";
 export { RouteErrorFallback } from "./route-error-fallback";
 export { RouteLayout } from "./route-layout";
+export { BulkEditorTourNotification } from "./bulk-editor-tour-notification";
 export { TaskListUpsellRow } from "./task-list-upsell-row";
 export { Task } from "./task";
 export { TaskListModal } from "./task-list-modal";
diff --git a/packages/js/src/general/initialize.js b/packages/js/src/general/initialize.js
index 607e333f25e..e0542a36562 100644
--- a/packages/js/src/general/initialize.js
+++ b/packages/js/src/general/initialize.js
@@ -10,7 +10,7 @@ import { Dashboard } from "../dashboard";
 import { DataProvider } from "../dashboard/services/data-provider";
 import { DataTracker } from "../dashboard/services/data-tracker";
 import { WidgetFactory } from "../dashboard/services/widget-factory";
-import { ADMIN_URL_NAME, LINK_PARAMS_NAME } from "../shared-admin/store";
+import { ADMIN_URL_NAME, LINK_PARAMS_NAME, OPT_IN_NOTIFICATION_NAME } from "../shared-admin/store";
 import App from "./app";
 import { RouteErrorFallback } from "./components";
 import { ConnectedPremiumUpsellList } from "./components/connected-premium-upsell-list";
@@ -44,6 +44,7 @@ domReady( () => {
 			dismissedAlerts: get( window, "wpseoScriptData.dismissedAlerts", {} ),
 			isPremium: get( window, "wpseoScriptData.preferences.isPremium", false ),
 			[ ADMIN_NOTICES_NAME ]: { resolvedNotices: [] },
+			[ OPT_IN_NOTIFICATION_NAME ]: { seen: get( window, "wpseoScriptData.optInNotificationSeen", {} ) },
 			[ TASK_LIST_NAME ]: {
 				enabled: get( window, "wpseoScriptData.taskListConfiguration.enabled", false ),
 				endpoints: get( window, "wpseoScriptData.taskListConfiguration.endpoints", {} ),
diff --git a/packages/js/src/general/store/index.js b/packages/js/src/general/store/index.js
index aa83ba9a060..6fc7d298c69 100644
--- a/packages/js/src/general/store/index.js
+++ b/packages/js/src/general/store/index.js
@@ -9,10 +9,16 @@ import {
 	adminUrlSelectors,
 	getInitialAdminUrlState,
 	getInitialLinkParamsState,
+	getInitialOptInNotificationState,
 	LINK_PARAMS_NAME,
 	linkParamsActions,
 	linkParamsReducer,
 	linkParamsSelectors,
+	OPT_IN_NOTIFICATION_NAME,
+	optInNotificationActions,
+	optInNotificationControls,
+	optInNotificationReducer,
+	optInNotificationSelectors,
 } from "../../shared-admin/store";
 import { STORE_NAME } from "../constants";
 import { ADMIN_NOTICES_NAME, adminNoticesActions, adminNoticesReducer, adminNoticesSelectors, getInitialAdminNoticesState } from "./admin-notices";
@@ -56,6 +62,7 @@ const createStore = ( { initialState } ) => {
 			setDismissedAlerts,
 			setIsPremium,
 			...adminNoticesActions,
+			...optInNotificationActions,
 			...taskListActions,
 		},
 		selectors: {
@@ -67,6 +74,7 @@ const createStore = ( { initialState } ) => {
 			getIsPremium,
 			isPromotionActive,
 			...adminNoticesSelectors,
+			...optInNotificationSelectors,
 			...taskListSelectors,
 		},
 		initialState: merge(
@@ -78,6 +86,7 @@ const createStore = ( { initialState } ) => {
 				[ ALERT_CENTER_NAME ]: getInitialAlertCenterState(),
 				currentPromotions: { promotions: [] },
 				[ ADMIN_NOTICES_NAME ]: getInitialAdminNoticesState(),
+				[ OPT_IN_NOTIFICATION_NAME ]: getInitialOptInNotificationState(),
 				[ TASK_LIST_NAME ]: getInitialTaskListState(),
 			},
 			initialState
@@ -91,11 +100,13 @@ const createStore = ( { initialState } ) => {
 			dismissedAlerts,
 			isPremium,
 			[ ADMIN_NOTICES_NAME ]: adminNoticesReducer,
+			[ OPT_IN_NOTIFICATION_NAME ]: optInNotificationReducer,
 			[ TASK_LIST_NAME ]: taskListReducer,
 		} ),
 		controls: {
 			...alertCenterControls,
 			...dismissedAlertsControls,
+			...optInNotificationControls,
 			...taskListControls,
 		},
 	} );
diff --git a/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js b/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
new file mode 100644
index 00000000000..ad3df3389aa
--- /dev/null
+++ b/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
@@ -0,0 +1,119 @@
+import { fireEvent, render, screen } from "../../test-utils";
+import { BulkEditorTour } from "../../../src/bulk-editor/components/tour/bulk-editor-tour";
+import { TOUR_OPT_IN_KEY } from "../../../src/bulk-editor/constants";
+
+// Controls the mocked store reads per test.
+const storeState = { isSeen: false, isAiEnabled: true };
+const mockSetOptInNotificationSeen = jest.fn();
+
+jest.mock( "@wordpress/data", () => ( {
+	useSelect: ( mapSelect ) => mapSelect( () => ( {
+		selectIsOptInNotificationSeen: () => storeState.isSeen,
+		selectPreference: ( key, fallback ) => ( key === "isAiEnabled" ? storeState.isAiEnabled : fallback ),
+	} ) ),
+	useDispatch: () => ( { setOptInNotificationSeen: mockSetOptInNotificationSeen } ),
+} ) );
+
+// Bypass the DOM measuring/positioning; the controller only needs a style to render the card.
+jest.mock( "../../../src/bulk-editor/components/tour/use-tour-anchor", () => ( {
+	useTourAnchor: () => ( { style: { top: "0px", left: "0px", width: "10px", height: "10px" } } ),
+} ) );
+
+/**
+ * Renders the tour and returns the select/deselect spies.
+ *
+ * @param {Object} [props] Prop overrides.
+ * @returns {{onSelectAll: jest.Mock, onDeselectAll: jest.Mock}} The spies.
+ */
+const renderTour = ( props = {} ) => {
+	const onSelectAll = jest.fn();
+	const onDeselectAll = jest.fn();
+	render(
+		<BulkEditorTour
+			onSelectAll={ onSelectAll }
+			onDeselectAll={ onDeselectAll }
+			hasSelection={ false }
+			{ ...props }
+		/>
+	);
+	return { onSelectAll, onDeselectAll };
+};
+
+const clickNext = () => fireEvent.click( screen.getByRole( "button", { name: /Next/ } ) );
+
+describe( "BulkEditorTour", () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+		storeState.isSeen = false;
+		storeState.isAiEnabled = true;
+	} );
+
+	it( "renders nothing once the tour has been seen", () => {
+		storeState.isSeen = true;
+		renderTour();
+
+		expect( screen.queryByRole( "dialog" ) ).not.toBeInTheDocument();
+	} );
+
+	it( "auto-starts on the first step for a new user", () => {
+		renderTour();
+
+		expect( screen.getByText( "1 / 4" ) ).toBeInTheDocument();
+		expect( screen.getByRole( "heading", { name: "Select your content type" } ) ).toBeInTheDocument();
+	} );
+
+	it( "advances and goes back through the steps", () => {
+		renderTour();
+
+		clickNext();
+		expect( screen.getByText( "2 / 4" ) ).toBeInTheDocument();
+
+		fireEvent.click( screen.getByRole( "button", { name: "Back" } ) );
+		expect( screen.getByText( "1 / 4" ) ).toBeInTheDocument();
+	} );
+
+	it( "drops the generate step when AI is disabled, leaving three steps", () => {
+		storeState.isAiEnabled = false;
+		renderTour();
+
+		clickNext();
+		clickNext();
+
+		expect( screen.getByText( "3 / 3" ) ).toBeInTheDocument();
+		expect( screen.queryByText( "Get SEO-friendly options at scale" ) ).not.toBeInTheDocument();
+	} );
+
+	it( "selects rows when reaching the generate step so its target can appear", () => {
+		const { onSelectAll } = renderTour( { hasSelection: false } );
+
+		// Advance through steps 2 and 3 to the generate step (step 4), which requires a selection.
+		clickNext();
+		clickNext();
+		clickNext();
+
+		expect( onSelectAll ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( "does not re-select when the user already has a selection", () => {
+		const { onSelectAll } = renderTour( { hasSelection: true } );
+
+		clickNext();
+		clickNext();
+		clickNext();
+
+		expect( onSelectAll ).not.toHaveBeenCalled();
+	} );
+
+	it( "marks the tour seen and clears its own selection on finish", () => {
+		const { onDeselectAll } = renderTour( { hasSelection: false } );
+
+		clickNext();
+		clickNext();
+		clickNext();
+		fireEvent.click( screen.getByRole( "button", { name: "Got it!" } ) );
+
+		expect( mockSetOptInNotificationSeen ).toHaveBeenCalledWith( TOUR_OPT_IN_KEY );
+		expect( onDeselectAll ).toHaveBeenCalledTimes( 1 );
+		expect( screen.queryByRole( "dialog" ) ).not.toBeInTheDocument();
+	} );
+} );
diff --git a/packages/js/tests/bulk-editor/tour/tour-card.test.js b/packages/js/tests/bulk-editor/tour/tour-card.test.js
new file mode 100644
index 00000000000..4a42e8ddd14
--- /dev/null
+++ b/packages/js/tests/bulk-editor/tour/tour-card.test.js
@@ -0,0 +1,61 @@
+import { fireEvent, render, screen } from "../../test-utils";
+import { TourCard } from "../../../src/bulk-editor/components/tour/tour-card";
+
+const baseProps = {
+	id: "tour-step",
+	title: "Select your content type",
+	content: "This will refine the content.",
+	currentStep: 1,
+	totalSteps: 4,
+	isLastStep: false,
+	onNext: jest.fn(),
+	onSkip: jest.fn(),
+};
+
+describe( "TourCard", () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( "renders the title, content and step progress", () => {
+		render( <TourCard { ...baseProps } /> );
+
+		expect( screen.getByRole( "heading", { name: "Select your content type" } ) ).toBeInTheDocument();
+		expect( screen.getByText( "This will refine the content." ) ).toBeInTheDocument();
+		expect( screen.getByText( "1 / 4" ) ).toBeInTheDocument();
+	} );
+
+	it( "calls onNext when the Next button is clicked", () => {
+		render( <TourCard { ...baseProps } /> );
+
+		fireEvent.click( screen.getByRole( "button", { name: /Next/ } ) );
+
+		expect( baseProps.onNext ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( "omits the Back button on the first step and shows it with onBack", () => {
+		const { rerender } = render( <TourCard { ...baseProps } /> );
+		expect( screen.queryByRole( "button", { name: "Back" } ) ).not.toBeInTheDocument();
+
+		const onBack = jest.fn();
+		rerender( <TourCard { ...baseProps } currentStep={ 2 } onBack={ onBack } /> );
+		fireEvent.click( screen.getByRole( "button", { name: "Back" } ) );
+
+		expect( onBack ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( "shows the finish label on the last step instead of Next", () => {
+		render( <TourCard { ...baseProps } currentStep={ 4 } isLastStep={ true } /> );
+
+		expect( screen.getByRole( "button", { name: "Got it!" } ) ).toBeInTheDocument();
+		expect( screen.queryByRole( "button", { name: /Next/ } ) ).not.toBeInTheDocument();
+	} );
+
+	it( "ends the tour via onSkip when the close button is clicked", () => {
+		render( <TourCard { ...baseProps } /> );
+
+		fireEvent.click( screen.getByRole( "button", { name: "Close the tour" } ) );
+
+		expect( baseProps.onSkip ).toHaveBeenCalledTimes( 1 );
+	} );
+} );
diff --git a/packages/js/tests/bulk-editor/tour/tour-steps.test.js b/packages/js/tests/bulk-editor/tour/tour-steps.test.js
new file mode 100644
index 00000000000..cb98c0859cc
--- /dev/null
+++ b/packages/js/tests/bulk-editor/tour/tour-steps.test.js
@@ -0,0 +1,34 @@
+import { getTourSteps } from "../../../src/bulk-editor/components/tour/tour-steps";
+
+describe( "getTourSteps", () => {
+	it( "returns the four tour steps in order", () => {
+		const steps = getTourSteps();
+
+		expect( steps.map( ( step ) => step.tourId ) ).toEqual( [
+			"content-type-nav",
+			"appearance-tabs",
+			"selection-toolbar",
+			"generate-actions",
+		] );
+	} );
+
+	it( "gives every step a unique id, a title and content", () => {
+		const steps = getTourSteps();
+		const ids = steps.map( ( step ) => step.id );
+
+		expect( new Set( ids ).size ).toBe( steps.length );
+		steps.forEach( ( step ) => {
+			expect( typeof step.title ).toBe( "string" );
+			expect( step.title.length ).toBeGreaterThan( 0 );
+			expect( typeof step.content ).toBe( "string" );
+			expect( step.content.length ).toBeGreaterThan( 0 );
+		} );
+	} );
+
+	it( "marks only the generate step as requiring a selection", () => {
+		const requiresSelection = getTourSteps().filter( ( step ) => step.requiresSelection );
+
+		expect( requiresSelection ).toHaveLength( 1 );
+		expect( requiresSelection[ 0 ].tourId ).toBe( "generate-actions" );
+	} );
+} );
diff --git a/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js b/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
new file mode 100644
index 00000000000..12bc0928c11
--- /dev/null
+++ b/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
@@ -0,0 +1,74 @@
+import { renderHook } from "@testing-library/react";
+import { useTourAnchor } from "../../../src/bulk-editor/components/tour/use-tour-anchor";
+
+let resizeObserverDisconnect;
+
+/**
+ * Adds a tour target to the DOM with a stubbed layout, since jsdom has none.
+ *
+ * @param {Object} rect The bounding rect the element should report.
+ * @returns {HTMLElement} The target element.
+ */
+const addTarget = ( rect = { top: 10, left: 20, width: 100, height: 30 } ) => {
+	document.body.innerHTML = "<div data-tour-id=\"x\"></div>";
+	const target = document.querySelector( "[data-tour-id=\"x\"]" );
+	// findVisibleTarget skips elements whose offsetParent is null; jsdom always reports null.
+	Object.defineProperty( target, "offsetParent", { get: () => document.body, configurable: true } );
+	target.getBoundingClientRect = () => ( { ...rect, right: rect.left + rect.width, bottom: rect.top + rect.height } );
+	return target;
+};
+
+describe( "useTourAnchor", () => {
+	beforeEach( () => {
+		Element.prototype.scrollIntoView = jest.fn();
+		resizeObserverDisconnect = jest.fn();
+		global.ResizeObserver = class {
+			observe() {}
+			unobserve() {}
+			disconnect() {
+				resizeObserverDisconnect();
+			}
+		};
+	} );
+
+	afterEach( () => {
+		document.body.innerHTML = "";
+	} );
+
+	it( "returns no style and does not highlight when inactive", () => {
+		const target = addTarget();
+
+		const { result } = renderHook( () => useTourAnchor( "[data-tour-id=\"x\"]", false ) );
+
+		expect( result.current.style ).toBeNull();
+		expect( target.classList.contains( "yst-feature-highlight" ) ).toBe( false );
+	} );
+
+	it( "positions against the target and applies the spotlight when active", () => {
+		const target = addTarget( { top: 10, left: 20, width: 100, height: 30 } );
+
+		const { result } = renderHook( () => useTourAnchor( "[data-tour-id=\"x\"]", true ) );
+
+		expect( result.current.style ).toEqual( { top: "10px", left: "20px", width: "100px", height: "30px" } );
+		expect( target.classList.contains( "yst-feature-highlight" ) ).toBe( true );
+		expect( target.scrollIntoView ).toHaveBeenCalled();
+	} );
+
+	it( "removes the spotlight and disconnects the observer on cleanup", () => {
+		const target = addTarget();
+
+		const { unmount } = renderHook( () => useTourAnchor( "[data-tour-id=\"x\"]", true ) );
+		unmount();
+
+		expect( target.classList.contains( "yst-feature-highlight" ) ).toBe( false );
+		expect( resizeObserverDisconnect ).toHaveBeenCalled();
+	} );
+
+	it( "returns no style when the target is absent", () => {
+		document.body.innerHTML = "";
+
+		const { result } = renderHook( () => useTourAnchor( "[data-tour-id=\"missing\"]", true ) );
+
+		expect( result.current.style ).toBeNull();
+	} );
+} );
diff --git a/src/general/user-interface/general-page-integration.php b/src/general/user-interface/general-page-integration.php
index 6d4a2fc6464..f462511ae6f 100644
--- a/src/general/user-interface/general-page-integration.php
+++ b/src/general/user-interface/general-page-integration.php
@@ -14,6 +14,7 @@
 use Yoast\WP\SEO\Helpers\Options_Helper;
 use Yoast\WP\SEO\Helpers\Product_Helper;
 use Yoast\WP\SEO\Helpers\Short_Link_Helper;
+use Yoast\WP\SEO\Helpers\User_Helper;
 use Yoast\WP\SEO\Integrations\Integration_Interface;
 use Yoast\WP\SEO\Promotions\Application\Promotion_Manager;
 use Yoast\WP\SEO\Task_List\Application\Configuration\Task_List_Configuration;
@@ -98,6 +99,13 @@ class General_Page_Integration implements Integration_Interface {
 	 */
 	private $options_helper;
 
+	/**
+	 * Holds the user helper.
+	 *
+	 * @var User_Helper
+	 */
+	private $user_helper;
+
 	/**
 	 * Holds the WooCommerce conditional.
 	 *
@@ -124,6 +132,7 @@ class General_Page_Integration implements Integration_Interface {
 	 * @param Promotion_Manager         $promotion_manager       The promotion manager.
 	 * @param Dashboard_Configuration   $dashboard_configuration The dashboard configuration.
 	 * @param Options_Helper            $options_helper          The options helper.
+	 * @param User_Helper               $user_helper             The user helper.
 	 * @param WooCommerce_Conditional   $woocommerce_conditional The WooCommerce conditional.
 	 * @param WPSEO_Addon_Manager       $addon_manager           The WPSEO_Addon_Manager.
 	 * @param Task_List_Configuration   $task_list_configuration The task list configuration.
@@ -138,6 +147,7 @@ public function __construct(
 		Promotion_Manager $promotion_manager,
 		Dashboard_Configuration $dashboard_configuration,
 		Options_Helper $options_helper,
+		User_Helper $user_helper,
 		WooCommerce_Conditional $woocommerce_conditional,
 		WPSEO_Addon_Manager $addon_manager,
 		Task_List_Configuration $task_list_configuration
@@ -151,6 +161,7 @@ public function __construct(
 		$this->promotion_manager       = $promotion_manager;
 		$this->dashboard_configuration = $dashboard_configuration;
 		$this->options_helper          = $options_helper;
+		$this->user_helper             = $user_helper;
 		$this->woocommerce_conditional = $woocommerce_conditional;
 		$this->addon_manager           = $addon_manager;
 		$this->task_list_configuration = $task_list_configuration;
@@ -270,6 +281,20 @@ private function get_script_data() {
 			'dismissedAlerts'       => $this->alert_dismissal_action->all_dismissed(),
 			'dashboard'             => $this->dashboard_configuration->get_configuration(),
 			'taskListConfiguration' => $this->task_list_configuration->get_configuration(),
+			'optInNotificationSeen' => [
+				'bulk_editor_tour' => $this->is_bulk_editor_tour_seen(),
+			],
 		];
 	}
+
+	/**
+	 * Gets whether the bulk editor guided tour has been seen by the current user.
+	 *
+	 * @return bool True when the tour has been seen, false otherwise.
+	 */
+	private function is_bulk_editor_tour_seen(): bool {
+		$current_user_id = $this->user_helper->get_current_user_id();
+
+		return (bool) $this->user_helper->get_meta( $current_user_id, '_yoast_wpseo_bulk_editor_tour_opt_in_notification_seen', true );
+	}
 }
diff --git a/tests/Unit/General/User_Interface/General_Page_Integration_Test.php b/tests/Unit/General/User_Interface/General_Page_Integration_Test.php
index f92ab0db3c3..704392e8a80 100644
--- a/tests/Unit/General/User_Interface/General_Page_Integration_Test.php
+++ b/tests/Unit/General/User_Interface/General_Page_Integration_Test.php
@@ -17,6 +17,7 @@
 use Yoast\WP\SEO\Helpers\Options_Helper;
 use Yoast\WP\SEO\Helpers\Product_Helper;
 use Yoast\WP\SEO\Helpers\Short_Link_Helper;
+use Yoast\WP\SEO\Helpers\User_Helper;
 use Yoast\WP\SEO\Promotions\Application\Promotion_Manager;
 use Yoast\WP\SEO\Task_List\Application\Configuration\Task_List_Configuration;
 use Yoast\WP\SEO\Tests\Unit\TestCase;
@@ -100,6 +101,13 @@ final class General_Page_Integration_Test extends TestCase {
 	 */
 	private $options_helper;
 
+	/**
+	 * Holds the user helper mock.
+	 *
+	 * @var Mockery\MockInterface|User_Helper
+	 */
+	private $user_helper;
+
 	/**
 	 * Holds the WooCommerce conditional.
 	 *
@@ -138,6 +146,7 @@ public function set_up() {
 		$this->promotion_manager       = Mockery::mock( Promotion_Manager::class );
 		$this->dashboard_configuration = Mockery::mock( Dashboard_Configuration::class );
 		$this->options_helper          = Mockery::mock( Options_Helper::class );
+		$this->user_helper             = Mockery::mock( User_Helper::class );
 		$this->woocommerce_conditional = Mockery::mock( WooCommerce_Conditional::class );
 		$this->addon_manager           = Mockery::mock( WPSEO_Addon_Manager::class );
 		$this->task_list_configuration = Mockery::mock( Task_List_Configuration::class );
@@ -152,6 +161,7 @@ public function set_up() {
 			$this->promotion_manager,
 			$this->dashboard_configuration,
 			$this->options_helper,
+			$this->user_helper,
 			$this->woocommerce_conditional,
 			$this->addon_manager,
 			$this->task_list_configuration,
@@ -178,6 +188,7 @@ public function test_construct() {
 				$this->promotion_manager,
 				$this->dashboard_configuration,
 				$this->options_helper,
+				$this->user_helper,
 				$this->woocommerce_conditional,
 				$this->addon_manager,
 				$this->task_list_configuration,
@@ -343,6 +354,16 @@ public function test_enqueue_assets() {
 			->once()
 			->andReturn( false );
 
+		$this->user_helper
+			->expects( 'get_current_user_id' )
+			->once()
+			->andReturn( 1 );
+		$this->user_helper
+			->expects( 'get_meta' )
+			->with( 1, '_yoast_wpseo_bulk_editor_tour_opt_in_notification_seen', true )
+			->once()
+			->andReturn( '' );
+
 		$this->woocommerce_conditional
 			->expects( 'is_met' )
 			->once()

From e1e0131089afab028a0bdbe756017516e88ccb6e Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Fri, 24 Jul 2026 15:54:49 +0200
Subject: [PATCH 05/20] Add unit tests for BulkEditorTourNotification component

---
 .../bulk-editor-tour-notification.test.js     | 105 ++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 packages/js/tests/general/components/bulk-editor-tour-notification.test.js

diff --git a/packages/js/tests/general/components/bulk-editor-tour-notification.test.js b/packages/js/tests/general/components/bulk-editor-tour-notification.test.js
new file mode 100644
index 00000000000..551248c51ac
--- /dev/null
+++ b/packages/js/tests/general/components/bulk-editor-tour-notification.test.js
@@ -0,0 +1,105 @@
+import { fireEvent, render, screen, waitFor } from "../../test-utils";
+import { BulkEditorTourNotification } from "../../../src/general/components/bulk-editor-tour-notification";
+import { ROUTES } from "../../../src/general/routes";
+
+const mockSetOptInNotificationSeen = jest.fn();
+const mockHideOptInNotification = jest.fn();
+
+// Controls the mocked store/router reads per test.
+const state = {
+	isSeen: false,
+	isRtl: false,
+	pathname: "/",
+	bulkEditorUrl: "https://example.com/wp-admin/admin.php?page=wpseo_page_bulk_edit",
+};
+
+jest.mock( "@wordpress/data", () => ( {
+	useDispatch: () => ( {
+		setOptInNotificationSeen: mockSetOptInNotificationSeen,
+		hideOptInNotification: mockHideOptInNotification,
+	} ),
+} ) );
+
+jest.mock( "react-router-dom", () => ( {
+	useLocation: () => ( { pathname: state.pathname } ),
+} ) );
+
+jest.mock( "../../../src/general/hooks", () => ( {
+	useSelectGeneralPage: ( selector ) => {
+		switch ( selector ) {
+			case "selectIsOptInNotificationSeen":
+				return state.isSeen;
+			case "selectPreference":
+				return state.isRtl;
+			case "selectAdminLink":
+				return state.bulkEditorUrl;
+			default:
+				return undefined;
+		}
+	},
+} ) );
+
+// Stub the routes barrel so the test does not pull in the whole routes/notices tree (which drags in withSelect etc.).
+jest.mock( "../../../src/general/routes", () => ( {
+	ROUTES: { firstTimeConfiguration: "/first-time-configuration" },
+} ) );
+
+describe( "BulkEditorTourNotification", () => {
+	let originalLocation;
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+		state.isSeen = false;
+		state.isRtl = false;
+		state.pathname = "/";
+		originalLocation = window.location;
+		Object.defineProperty( window, "location", { configurable: true, value: { href: "" } } );
+	} );
+
+	afterEach( () => {
+		Object.defineProperty( window, "location", { configurable: true, value: originalLocation } );
+	} );
+
+	it( "renders nothing once the tour has been seen", () => {
+		state.isSeen = true;
+		render( <BulkEditorTourNotification /> );
+
+		expect( screen.queryByText( "New: Work faster with bulk updates" ) ).not.toBeInTheDocument();
+	} );
+
+	it( "renders nothing on the first-time configuration route", () => {
+		state.pathname = ROUTES.firstTimeConfiguration;
+		render( <BulkEditorTourNotification /> );
+
+		expect( screen.queryByText( "New: Work faster with bulk updates" ) ).not.toBeInTheDocument();
+	} );
+
+	it( "shows the title, message and actions for a new user", () => {
+		render( <BulkEditorTourNotification /> );
+
+		expect( screen.getByText( "New: Work faster with bulk updates" ) ).toBeInTheDocument();
+		expect( screen.getByText( /Use the Bulk Editor to get AI-generated/ ) ).toBeInTheDocument();
+		// The footer Dismiss button carries visible text; the modal's icon-only close only has an aria-label.
+		expect( screen.getByText( "Dismiss" ) ).toBeInTheDocument();
+		expect( screen.getByRole( "button", { name: /Show me/ } ) ).toBeInTheDocument();
+	} );
+
+	it( "marks the tour seen and hides it when dismissed", async() => {
+		render( <BulkEditorTourNotification /> );
+
+		fireEvent.click( screen.getByText( "Dismiss" ) );
+
+		await waitFor( () => {
+			expect( mockSetOptInNotificationSeen ).toHaveBeenCalledWith( "bulk_editor_tour" );
+		} );
+		expect( mockHideOptInNotification ).toHaveBeenCalledWith( "bulk_editor_tour" );
+	} );
+
+	it( "navigates to the bulk editor when Show me is clicked", () => {
+		render( <BulkEditorTourNotification /> );
+
+		fireEvent.click( screen.getByRole( "button", { name: /Show me/ } ) );
+
+		expect( window.location.href ).toBe( state.bulkEditorUrl );
+	} );
+} );

From d06ff517dfa9d141c2b900cdf69249a9df846004 Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Fri, 24 Jul 2026 16:07:46 +0200
Subject: [PATCH 06/20] Updated the formatting

---
 .../user-interface/bulk-editor-integration.php     | 14 +++++++-------
 .../user-interface/general-page-integration.php    |  2 +-
 .../Enqueue_Assets_Test.php                        | 14 +++++++-------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/bulk-editor/user-interface/bulk-editor-integration.php b/src/bulk-editor/user-interface/bulk-editor-integration.php
index e919db1dc43..2e3cd0d1163 100644
--- a/src/bulk-editor/user-interface/bulk-editor-integration.php
+++ b/src/bulk-editor/user-interface/bulk-editor-integration.php
@@ -221,24 +221,24 @@ public function enqueue_assets() {
 	 */
 	public function get_script_data() {
 		return [
-			'contentTypes' => $this->content_types_repository->get_content_types(),
-			'endpoints'    => $this->endpoints_repository->get_all_endpoints()->to_array(),
+			'contentTypes'          => $this->content_types_repository->get_content_types(),
+			'endpoints'             => $this->endpoints_repository->get_all_endpoints()->to_array(),
 			// These must stay server-generated URLs: the bulk editor assigns them to window.location.href for its
 			// "Back to Tools" / logo navigation. If a link ever derives from request input, validate it with
 			// wp_validate_redirect() here before exposing it, to avoid an open redirect on the front-end.
-			'links'        => [
+			'links'                 => [
 				'dashboard' => \admin_url( 'admin.php?page=' . General_Page_Integration::PAGE ),
 				'tools'     => \admin_url( 'admin.php?page=wpseo_tools' ),
 			],
-			'nonce'        => $this->nonce_repository->get_rest_nonce(),
-			'restRoot'     => \esc_url_raw( \rest_url() ),
-			'preferences'  => [
+			'nonce'                 => $this->nonce_repository->get_rest_nonce(),
+			'restRoot'              => \esc_url_raw( \rest_url() ),
+			'preferences'           => [
 				'isPremium'   => $this->product_helper->is_premium(),
 				'isAiEnabled' => $this->options_helper->get( 'enable_ai_generator' ) === true,
 				'isRtl'       => \is_rtl(),
 				'pluginUrl'   => \plugins_url( '', \WPSEO_FILE ),
 			],
-			'linkParams'   => $this->short_link_helper->get_query_params(),
+			'linkParams'            => $this->short_link_helper->get_query_params(),
 			// Whether the first-run guided tour has already been seen, so it only shows once per user.
 			'optInNotificationSeen' => [
 				'bulk_editor_tour' => $this->is_tour_opt_in_notification_seen(),
diff --git a/src/general/user-interface/general-page-integration.php b/src/general/user-interface/general-page-integration.php
index f462511ae6f..7e22d436421 100644
--- a/src/general/user-interface/general-page-integration.php
+++ b/src/general/user-interface/general-page-integration.php
@@ -250,7 +250,7 @@ public function enqueue_assets() {
 	/**
 	 * Creates the script data.
 	 *
-	 * @return array The script data.
+	 * @return array<string, string|array<string, string|bool|array<string, string|bool>>> The script data.
 	 */
 	private function get_script_data() {
 		return [
diff --git a/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Enqueue_Assets_Test.php b/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Enqueue_Assets_Test.php
index 22a6cf465e6..25ee7d20a75 100644
--- a/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Enqueue_Assets_Test.php
+++ b/tests/Unit/Bulk_Editor/User_Interface/Bulk_Editor_Integration/Enqueue_Assets_Test.php
@@ -37,23 +37,23 @@ public function test_enqueue_assets() {
 		];
 
 		$expected_script_data = [
-			'contentTypes' => $content_types,
-			'endpoints'    => [
+			'contentTypes'          => $content_types,
+			'endpoints'             => [
 				'posts' => 'https://example.com/wp-json/yoast/v1/bulk_editor/posts',
 			],
-			'links'        => [
+			'links'                 => [
 				'dashboard' => 'https://example.com/wp-admin/admin.php?page=wpseo_dashboard',
 				'tools'     => 'https://example.com/wp-admin/admin.php?page=wpseo_tools',
 			],
-			'nonce'        => 'rest-nonce',
-			'restRoot'     => 'https://example.com/wp-json/',
-			'preferences'  => [
+			'nonce'                 => 'rest-nonce',
+			'restRoot'              => 'https://example.com/wp-json/',
+			'preferences'           => [
 				'isPremium'   => false,
 				'isAiEnabled' => true,
 				'isRtl'       => false,
 				'pluginUrl'   => 'https://example.com/wp-content/plugins/wordpress-seo',
 			],
-			'linkParams'   => [ 'foo' => 'bar' ],
+			'linkParams'            => [ 'foo' => 'bar' ],
 			'optInNotificationSeen' => [
 				'bulk_editor_tour' => false,
 			],

From 188cd8ebef18012de1e50ea76ec1afcc7c5af4ab Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Mon, 27 Jul 2026 15:09:05 +0200
Subject: [PATCH 07/20] Enhance bulk editor guided tour functionality and
 styling

---
 css/src/bulk-editor-page.css                  |  10 +-
 .../bulk-editor/components/bulk-action-bar.js |  46 ++---
 .../components/bulk-editor-content.js         | 162 +++++++++---------
 .../bulk-editor/components/bulk-editor-nav.js |  38 +++-
 .../components/tour/bulk-editor-tour.js       |  90 +++++++---
 .../bulk-editor/components/tour/tour-card.js  |  39 ++++-
 .../bulk-editor/components/tour/tour-steps.js |   5 +-
 .../components/tour/use-tour-anchor.js        | 112 ++++++++++--
 8 files changed, 342 insertions(+), 160 deletions(-)

diff --git a/css/src/bulk-editor-page.css b/css/src/bulk-editor-page.css
index 4d249b6461a..ef9b9506b30 100644
--- a/css/src/bulk-editor-page.css
+++ b/css/src/bulk-editor-page.css
@@ -113,11 +113,7 @@
 	@apply yst-outline-none;
 }
 
-/* The guided-tour spotlight: lifts the highlighted element above a viewport-filling shadow that dims the rest
- * of the page, so the current step's target stays bright. The shadow roves as the class moves each step. */
-.yst-root .yst-feature-highlight {
-	position: relative;
-	z-index: 10; /* Above page content (z:auto); the tour card wrapper (z:100000) stays above the shadow. */
-	box-shadow: 0 0 0 100vmax rgb(100 116 139 / 0.75); /* Slate-500/75 spotlight dim. */
-	border-radius: 0.5rem; /* Soften the bright cut-out's corners. */
+/* The in-app guided-tour. It is decorative only so prevents interaction */
+.yst-root .yst-tour-spotlight {
+	pointer-events: none;
 }
diff --git a/packages/js/src/bulk-editor/components/bulk-action-bar.js b/packages/js/src/bulk-editor/components/bulk-action-bar.js
index c7d76f8626a..a6d380b322c 100644
--- a/packages/js/src/bulk-editor/components/bulk-action-bar.js
+++ b/packages/js/src/bulk-editor/components/bulk-action-bar.js
@@ -79,22 +79,24 @@ export const SelectionToolbar = ( { idSuffix = "", isAllSelected, isIndeterminat
 	}, [ isIndeterminate ] );
 
 	return (
-		<div className="yst-flex yst-items-center yst-gap-4" data-tour-id="selection-toolbar">
-			<Checkbox
-				ref={ checkboxRef }
-				id={ `bulk-editor-select-all${ idSuffix }` }
-				name={ `bulk-editor-select-all${ idSuffix }` }
-				value="all"
-				aria-label={ __( "Select all", "wordpress-seo" ) }
-				checked={ isAllSelected }
-				onChange={ onToggleAll }
-			/>
-			<SelectMenu
-				onSelectAll={ onSelectAll }
-				onDeselectAll={ onDeselectAll }
-				selectedCount={ selectedCount }
-				totalCount={ totalCount }
-			/>
+		<div className="yst-flex yst-items-center yst-gap-4">
+			<div className="yst-flex yst-items-center yst-gap-4" data-tour-id="selection-toolbar">
+				<Checkbox
+					ref={ checkboxRef }
+					id={ `bulk-editor-select-all${ idSuffix }` }
+					name={ `bulk-editor-select-all${ idSuffix }` }
+					value="all"
+					aria-label={ __( "Select all", "wordpress-seo" ) }
+					checked={ isAllSelected }
+					onChange={ onToggleAll }
+				/>
+				<SelectMenu
+					onSelectAll={ onSelectAll }
+					onDeselectAll={ onDeselectAll }
+					selectedCount={ selectedCount }
+					totalCount={ totalCount }
+				/>
+			</div>
 			{ selectedCount > 0 && (
 				<span className="yst-font-medium yst-text-slate-800">
 					{ sprintf(
@@ -249,11 +251,13 @@ const BulkActionsNotices = ( {
 const BulkActionsBand = ( {
 	isPremium, isAiEnabled, isActive, selectedIds, activeFieldSet, contentType, hasUnsavedEdits, editCount, onApplyAll, onDiscardAll, isApplyingAll,
 } ) => (
-	<div className="yst-flex yst-items-center yst-gap-3 yst-border-y yst-border-slate-200 yst-bg-slate-100 yst-px-4 yst-py-3" data-tour-id="generate-actions">
-		{ ! isPremium && isAiEnabled && <FreeBulkActions contentType={ contentType } /> }
-		{ isActive && (
-			<Slot name={ BULK_ACTIONS_SLOT } fillProps={ { selectedIds, activeFieldSet, contentType, hasUnsavedEdits } } />
-		) }
+	<div className="yst-flex yst-items-center yst-gap-3 yst-border-y yst-border-slate-200 yst-bg-slate-100 yst-px-4 yst-py-3">
+		<div className="yst-flex yst-items-center yst-gap-3" data-tour-id="generate-actions">
+			{ ! isPremium && isAiEnabled && <FreeBulkActions contentType={ contentType } /> }
+			{ isActive && (
+				<Slot name={ BULK_ACTIONS_SLOT } fillProps={ { selectedIds, activeFieldSet, contentType, hasUnsavedEdits } } />
+			) }
+		</div>
 		{ isActive && hasUnsavedEdits && (
 			<ManualReviewActions editCount={ editCount } onApplyAll={ onApplyAll } onDiscardAll={ onDiscardAll } isApplying={ isApplyingAll } />
 		) }
diff --git a/packages/js/src/bulk-editor/components/bulk-editor-content.js b/packages/js/src/bulk-editor/components/bulk-editor-content.js
index 2aec41ec3a4..4d325df4bb7 100644
--- a/packages/js/src/bulk-editor/components/bulk-editor-content.js
+++ b/packages/js/src/bulk-editor/components/bulk-editor-content.js
@@ -145,88 +145,90 @@ export const BulkEditorContent = ( { dataProvider, remoteDataProvider, contentTy
 	} ), [ selectedIds, toggleRow ] );
 
 	return (
-		<div className="yst-p-8 yst-space-y-6">
-			<div className="yst-flex yst-flex-col yst-gap-4 sm:yst-flex-row sm:yst-items-start sm:yst-justify-between">
-				<BulkEditorTabs
-					tabs={ tabs }
-					activeTab={ activeFieldSet }
-					disabled={ hasExternalGeneration }
-					onChange={ onChangeTab }
-					label={ __( "Bulk editor views", "wordpress-seo" ) }
+		<>
+			<div className="yst-p-8 yst-space-y-6">
+				<div className="yst-flex yst-flex-col yst-gap-4 sm:yst-flex-row sm:yst-items-start sm:yst-justify-between">
+					<BulkEditorTabs
+						tabs={ tabs }
+						activeTab={ activeFieldSet }
+						disabled={ hasExternalGeneration }
+						onChange={ onChangeTab }
+						label={ __( "Bulk editor views", "wordpress-seo" ) }
+					/>
+					<SearchBox contentTypeLabel={ contentTypeLabel } />
+				</div>
+				{ tabs.map( ( tab ) => (
+					<BulkEditorTabPanel key={ tab.id } tabId={ tab.id } isActive={ tab.id === activeFieldSet }>
+						<BulkEditorTable
+							items={ items }
+							fieldSet={ fieldSets[ tab.id ] }
+							selection={ selection }
+							editing={ editing }
+							selectionToolbar={
+								<SelectionToolbar
+									idSuffix={ `-${ tab.id }` }
+									isAllSelected={ isAllSelected }
+									isIndeterminate={ isIndeterminate }
+									onToggleAll={ onToggleAll }
+									onSelectAll={ onSelectAll }
+									onDeselectAll={ deselectAll }
+									selectedCount={ selectedCount }
+									totalCount={ totalCount }
+									contentTypeLabel={ contentTypeLabel }
+								/>
+							}
+							bulkActions={
+								<BulkActions
+									isPremium={ isPremium }
+									isAiEnabled={ isAiEnabled }
+									isActive={ tab.id === activeFieldSet }
+									selectedIds={ selectedIds }
+									activeFieldSet={ activeFieldSet }
+									contentType={ contentType }
+									contentTypeLabel={ contentTypeLabel }
+									contentTypeSingularLabel={ contentTypeSingularLabel }
+									hasUnsavedEdits={ hasUnsavedEdits }
+									editCount={ editCount }
+									onApplyAll={ editing.onApplyAll }
+									onDiscardAll={ editing.onDiscardAll }
+									isApplyingAll={ editing.isApplyingAll }
+									hasSaveError={ editing.hasSaveError }
+									onDismissSaveError={ editing.dismissSaveError }
+								/>
+							}
+							// A selection only warrants the band while AI is enabled (the AI affordances are its only
+							// selection-driven occupant); with AI off the band collapses. Unsaved manual edits are a
+							// separate, non-AI occupant, so they keep it open regardless of the AI toggle. External
+							// pending changes (Premium's AI suggestions) also keep it open: a filter, search, or page
+							// change clears the selection but must leave the pending suggestions actionable.
+							showBulkActions={ ( hasSelection && isAiEnabled ) || hasUnsavedEdits || hasExternalPendingChanges }
+							filters={ <BulkEditorFilters /> }
+							isLoading={ isPending }
+							hasExternalPendingChanges={ hasExternalPendingChanges }
+							hasExternalGeneration={ hasExternalGeneration }
+							footer={ total > 0
+								? <BulkEditorFooter total={ total } totalPages={ totalPages } isPending={ isPending } />
+								: null }
+						/>
+					</BulkEditorTabPanel>
+				) ) }
+				<UnsavedChangesModal
+					isOpen={ hasUnsavedEdits && pendingSwitch !== null }
+					isSaving={ editing.isApplyingAll }
+					onSave={ onSaveAndSwitch }
+					onDiscard={ onDiscardAndSwitch }
+					onClose={ onCancelSwitch }
+				/>
+				<Slot
+					name={ PENDING_CHANGES_MODAL_SLOT }
+					fillProps={ {
+						isOpen: pendingSwitch !== null && ! hasUnsavedEdits,
+						onCommit: onCommitSwitch,
+						onCancel: onCancelSwitch,
+					} }
 				/>
-				<SearchBox contentTypeLabel={ contentTypeLabel } />
 			</div>
-			{ tabs.map( ( tab ) => (
-				<BulkEditorTabPanel key={ tab.id } tabId={ tab.id } isActive={ tab.id === activeFieldSet }>
-					<BulkEditorTable
-						items={ items }
-						fieldSet={ fieldSets[ tab.id ] }
-						selection={ selection }
-						editing={ editing }
-						selectionToolbar={
-							<SelectionToolbar
-								idSuffix={ `-${ tab.id }` }
-								isAllSelected={ isAllSelected }
-								isIndeterminate={ isIndeterminate }
-								onToggleAll={ onToggleAll }
-								onSelectAll={ onSelectAll }
-								onDeselectAll={ deselectAll }
-								selectedCount={ selectedCount }
-								totalCount={ totalCount }
-								contentTypeLabel={ contentTypeLabel }
-							/>
-						}
-						bulkActions={
-							<BulkActions
-								isPremium={ isPremium }
-								isAiEnabled={ isAiEnabled }
-								isActive={ tab.id === activeFieldSet }
-								selectedIds={ selectedIds }
-								activeFieldSet={ activeFieldSet }
-								contentType={ contentType }
-								contentTypeLabel={ contentTypeLabel }
-								contentTypeSingularLabel={ contentTypeSingularLabel }
-								hasUnsavedEdits={ hasUnsavedEdits }
-								editCount={ editCount }
-								onApplyAll={ editing.onApplyAll }
-								onDiscardAll={ editing.onDiscardAll }
-								isApplyingAll={ editing.isApplyingAll }
-								hasSaveError={ editing.hasSaveError }
-								onDismissSaveError={ editing.dismissSaveError }
-							/>
-						}
-						// A selection only warrants the band while AI is enabled (the AI affordances are its only
-						// selection-driven occupant); with AI off the band collapses. Unsaved manual edits are a
-						// separate, non-AI occupant, so they keep it open regardless of the AI toggle. External
-						// pending changes (Premium's AI suggestions) also keep it open: a filter, search, or page
-						// change clears the selection but must leave the pending suggestions actionable.
-						showBulkActions={ ( hasSelection && isAiEnabled ) || hasUnsavedEdits || hasExternalPendingChanges }
-						filters={ <BulkEditorFilters /> }
-						isLoading={ isPending }
-						hasExternalPendingChanges={ hasExternalPendingChanges }
-						hasExternalGeneration={ hasExternalGeneration }
-						footer={ total > 0
-							? <BulkEditorFooter total={ total } totalPages={ totalPages } isPending={ isPending } />
-							: null }
-					/>
-				</BulkEditorTabPanel>
-			) ) }
-			<UnsavedChangesModal
-				isOpen={ hasUnsavedEdits && pendingSwitch !== null }
-				isSaving={ editing.isApplyingAll }
-				onSave={ onSaveAndSwitch }
-				onDiscard={ onDiscardAndSwitch }
-				onClose={ onCancelSwitch }
-			/>
-			<Slot
-				name={ PENDING_CHANGES_MODAL_SLOT }
-				fillProps={ {
-					isOpen: pendingSwitch !== null && ! hasUnsavedEdits,
-					onCommit: onCommitSwitch,
-					onCancel: onCancelSwitch,
-				} }
-			/>
 			<BulkEditorTour onSelectAll={ onSelectAll } onDeselectAll={ deselectAll } hasSelection={ hasSelection } />
-		</div>
+		</>
 	);
 };
diff --git a/packages/js/src/bulk-editor/components/bulk-editor-nav.js b/packages/js/src/bulk-editor/components/bulk-editor-nav.js
index 9e745acf261..de37fd00017 100644
--- a/packages/js/src/bulk-editor/components/bulk-editor-nav.js
+++ b/packages/js/src/bulk-editor/components/bulk-editor-nav.js
@@ -7,6 +7,9 @@ import { noop } from "lodash";
 import { YoastLogo } from "../../shared-admin/components";
 import { BackToToolsLink } from "./back-to-tools-link";
 
+// The WordPress built-in content types, used to scope the guided-tour spotlight to Posts and Pages.
+const BUILT_IN_CONTENT_TYPES = [ "post", "page" ];
+
 /**
  * One content type entry.
  *
@@ -19,14 +22,15 @@ import { BackToToolsLink } from "./back-to-tools-link";
  * One content type item. Selecting a content type changes view state, it does not navigate.
  * The active state comes from the SidebarNavigation context.
  *
- * @param {Object}                props             The props.
- * @param {BulkEditorContentType} props.contentType The content type.
- * @param {boolean}               props.disabled    Whether the item is disabled.
- * @param {Function}              props.onChange    Called with the content type id when selected.
+ * @param {Object}                props                 The props.
+ * @param {BulkEditorContentType} props.contentType     The content type.
+ * @param {boolean}               props.disabled        Whether the item is disabled.
+ * @param {Function}              props.onChange        Called with the content type id when selected.
+ * @param {boolean}               [props.isHighlightEnd] Whether this is the last item the guided-tour spotlight covers.
  *
  * @returns {JSX.Element} The item.
  */
-const ContentTypeItem = ( { contentType, disabled, onChange } ) => {
+const ContentTypeItem = ( { contentType, disabled, onChange, isHighlightEnd = false } ) => {
 	const handleClick = useCallback( () => onChange( contentType.id ), [ onChange, contentType.id ] );
 
 	return (
@@ -39,6 +43,7 @@ const ContentTypeItem = ( { contentType, disabled, onChange } ) => {
 			disabled={ disabled }
 			onClick={ handleClick }
 			className={ classNames( "yst-w-full", { "yst-opacity-50": disabled } ) }
+			{ ...( isHighlightEnd ? { "data-tour-highlight-end": "true" } : {} ) }
 		/>
 	);
 };
@@ -111,6 +116,19 @@ export const BulkEditorNavMenu = ( {
 } ) => {
 	const hiddenCount = contentTypes.length - visibleLimit;
 
+	// The in-app guided-tour covers only the leading built-in content types (Posts, Pages),
+	// never commerce or custom types.
+	const highlightEndIndex = ( () => {
+		let end = -1;
+		for ( let index = 0; index < contentTypes.length && index < 2; index++ ) {
+			if ( ! BUILT_IN_CONTENT_TYPES.includes( contentTypes[ index ].id ) ) {
+				break;
+			}
+			end = index;
+		}
+		return end;
+	} )();
+
 	const showMoreLabel = sprintf(
 		/* translators: %d expands to the number of additional content types. */
 		_n( "Show %d more", "Show %d more", hiddenCount, "wordpress-seo" ),
@@ -132,8 +150,14 @@ export const BulkEditorNavMenu = ( {
 					showMoreLabel={ showMoreLabel }
 					showLessLabel={ __( "Show less", "wordpress-seo" ) }
 				>
-					{ contentTypes.map( ( contentType ) => (
-						<ContentTypeItem key={ contentType.id } contentType={ contentType } disabled={ disabled } onChange={ onChange } />
+					{ contentTypes.map( ( contentType, index ) => (
+						<ContentTypeItem
+							key={ contentType.id }
+							contentType={ contentType }
+							disabled={ disabled }
+							onChange={ onChange }
+							isHighlightEnd={ index === highlightEndIndex }
+						/>
 					) ) }
 				</SidebarNavigation.MenuItemWithLimiter>
 			</div>
diff --git a/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js b/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
index 3e694c6eb66..d737c954e12 100644
--- a/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
+++ b/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
@@ -5,6 +5,9 @@ import { TourCard } from "./tour-card";
 import { getTourSteps } from "./tour-steps";
 import { useTourAnchor } from "./use-tour-anchor";
 
+// The id linking the overlay's rectangle to its cut-out mask. Only one tour is active at a time, so a constant is safe.
+const SPOTLIGHT_MASK_ID = "yoast-bulk-editor-tour-spotlight-mask";
+
 /**
  * The first-time guided tour for the bulk editor.
  *
@@ -52,7 +55,10 @@ export const BulkEditorTour = ( { onSelectAll, onDeselectAll, hasSelection } ) =
 		}
 	}, [ isActive, step, hasSelection, onSelectAll ] );
 
-	const { style } = useTourAnchor( `[data-tour-id="${ step.tourId }"]`, isActive );
+	const { spotlight } = useTourAnchor( `[data-tour-id="${ step.tourId }"]`, isActive, {
+		endSelector: step.highlightEndSelector,
+		perChild: step.highlightChildren,
+	} );
 
 	const finish = useCallback( () => {
 		if ( didAutoSelect.current ) {
@@ -64,35 +70,71 @@ export const BulkEditorTour = ( { onSelectAll, onDeselectAll, hasSelection } ) =
 	}, [ onDeselectAll, setOptInNotificationSeen ] );
 
 	const onNext = useCallback( () => {
-		setStepIndex( ( index ) => {
-			if ( index >= steps.length - 1 ) {
-				finish();
-				return index;
-			}
-			return index + 1;
-		} );
-	}, [ steps.length, finish ] );
+		// finish() dispatches store updates, so it runs from the event handler, not inside a state updater.
+		if ( isLastStep ) {
+			finish();
+			return;
+		}
+		setStepIndex( ( index ) => index + 1 );
+	}, [ isLastStep, finish ] );
 
 	const onBack = useCallback( () => setStepIndex( ( index ) => Math.max( 0, index - 1 ) ), [] );
 
-	if ( ! isActive || ! style ) {
+	if ( ! isActive || ! spotlight ) {
 		return null;
 	}
 
+	const { rects, bounds, viewport } = spotlight;
+
 	return (
-		<div className="yst-fixed yst-z-[100000]" style={ style }>
-			<TourCard
-				id={ step.id }
-				title={ step.title }
-				content={ step.content }
-				position={ step.position }
-				currentStep={ stepIndex + 1 }
-				totalSteps={ steps.length }
-				isLastStep={ isLastStep }
-				onNext={ onNext }
-				onBack={ stepIndex > 0 ? onBack : null }
-				onSkip={ finish }
-			/>
-		</div>
+		<>
+			<div className="yst-fixed yst-inset-0 yst-z-[100000]" />
+			<svg
+				className="yst-tour-spotlight yst-fixed yst-inset-0 yst-z-[100000]"
+				width={ viewport.width }
+				height={ viewport.height }
+				aria-hidden="true"
+			>
+				<defs>
+					<mask id={ SPOTLIGHT_MASK_ID } maskUnits="userSpaceOnUse" x="0" y="0" width={ viewport.width } height={ viewport.height }>
+						<rect x="0" y="0" width={ viewport.width } height={ viewport.height } fill="#fff" />
+						{ rects.map( ( rect, index ) => (
+							<rect
+								key={ index }
+								x={ rect.left }
+								y={ rect.top }
+								width={ rect.width }
+								height={ rect.height }
+								rx={ rect.rx }
+								fill="#000"
+							/>
+						) ) }
+					</mask>
+				</defs>
+				<rect
+					x="0"
+					y="0"
+					width={ viewport.width }
+					height={ viewport.height }
+					fill="#64748b"
+					fillOpacity="0.75"
+					mask={ `url(#${ SPOTLIGHT_MASK_ID })` }
+				/>
+			</svg>
+			<div className="yst-fixed yst-z-[100000]" style={ bounds }>
+				<TourCard
+					id={ step.id }
+					title={ step.title }
+					content={ step.content }
+					position={ step.position }
+					currentStep={ stepIndex + 1 }
+					totalSteps={ steps.length }
+					isLastStep={ isLastStep }
+					onNext={ onNext }
+					onBack={ stepIndex > 0 ? onBack : null }
+					onSkip={ finish }
+				/>
+			</div>
+		</>
 	);
 };
diff --git a/packages/js/src/bulk-editor/components/tour/tour-card.js b/packages/js/src/bulk-editor/components/tour/tour-card.js
index 36cb1c3a37e..a0c0f36c9c6 100644
--- a/packages/js/src/bulk-editor/components/tour/tour-card.js
+++ b/packages/js/src/bulk-editor/components/tour/tour-card.js
@@ -4,6 +4,27 @@ import { __, sprintf } from "@wordpress/i18n";
 import { Button, Popover, useSvgAria } from "@yoast/ui-library";
 import { ReactComponent as YoastIcon } from "../../../../images/Yoast_icon_kader.svg";
 
+/**
+ * Keeps Tab focus within a container.
+ *
+ * @param {KeyboardEvent} event The Tab keydown event; its `currentTarget` is the container to trap focus inside.
+ *
+ * @returns {void}
+ */
+const trapTab = ( event ) => {
+	const focusable = [ ...event.currentTarget.querySelectorAll(
+		"button, a[href], input, select, textarea, [tabindex]:not([tabindex='-1'])"
+	) ].filter( ( element ) => ! element.disabled );
+	if ( focusable.length === 0 ) {
+		return;
+	}
+	const edge = event.shiftKey ? focusable[ 0 ] : focusable[ focusable.length - 1 ];
+	if ( document.activeElement === edge ) {
+		event.preventDefault();
+		( event.shiftKey ? focusable[ focusable.length - 1 ] : focusable[ 0 ] ).focus();
+	}
+};
+
 /**
  * A single step of the bulk editor guided tour, rendered as a ui-library Popover anchored to a target element.
  *
@@ -46,9 +67,20 @@ export const TourCard = ( {
 		return () => clearTimeout( timeout );
 	}, [ currentStep ] );
 
-	// The close button, backdrop and Escape all resolve to hiding the popover, which ends the tour.
+	// The close button and Escape both resolve to hiding the popover, which ends the tour.
 	const handleVisibilityChange = useCallback( ( isVisible ) => ! isVisible && onSkip(), [ onSkip ] );
 
+	// The tour blocks the page, so the card behaves as a modal dialog: Escape closes it, and Tab is trapped within its
+	// controls, keeping keyboard users out of the page elements behind it.
+	const handleKeyDown = useCallback( ( event ) => {
+		if ( event.key === "Escape" ) {
+			event.preventDefault();
+			onSkip();
+		} else if ( event.key === "Tab" ) {
+			trapTab( event );
+		}
+	}, [ onSkip ] );
+
 	return <Popover
 		id={ id }
 		hasBackdrop={ false }
@@ -59,11 +91,12 @@ export const TourCard = ( {
 		setIsVisible={ handleVisibilityChange }
 		position={ position }
 		className={ className }
+		onKeyDown={ handleKeyDown }
 	>
 		<>
 			<div className="yst-flex yst-gap-3 yst-items-center">
 				<div className="yst-flex-shrink-0">
-					<YoastIcon className="yst-w-5 yst-h-5" { ...svgAriaProps } />
+					<YoastIcon className="yst-w-5 yst-h-5 yst-fill-primary-500" { ...svgAriaProps } />
 				</div>
 				<div className="yst-flex-grow">
 					<Popover.Title id={ `${ id }-title` } as="h3">
@@ -76,7 +109,7 @@ export const TourCard = ( {
 				{ content }
 			</Popover.Content>
 			<div className="yst-flex yst-gap-3 yst-justify-between yst-items-center yst-mt-3">
-				<span className="yst-text-slate-500">
+				<span className="yst-ms-8 yst-text-slate-500">
 					{ sprintf(
 						/* translators: %1$s is the current step number, %2$s is the total number of steps. */
 						__( "%1$s / %2$s", "wordpress-seo" ),
diff --git a/packages/js/src/bulk-editor/components/tour/tour-steps.js b/packages/js/src/bulk-editor/components/tour/tour-steps.js
index dd5eb7e9b01..225d20e549d 100644
--- a/packages/js/src/bulk-editor/components/tour/tour-steps.js
+++ b/packages/js/src/bulk-editor/components/tour/tour-steps.js
@@ -12,6 +12,7 @@ export const getTourSteps = () => [
 	{
 		id: "bulk-editor-tour-content-type",
 		tourId: "content-type-nav",
+		highlightEndSelector: "[data-tour-highlight-end]",
 		position: "right",
 		title: __( "Select your content type", "wordpress-seo" ),
 		content: __( "This will refine the content to what you want to update.", "wordpress-seo" ),
@@ -26,6 +27,7 @@ export const getTourSteps = () => [
 	{
 		id: "bulk-editor-tour-multi-select",
 		tourId: "selection-toolbar",
+		highlightChildren: true,
 		position: "right",
 		title: __( "Multi-select", "wordpress-seo" ),
 		content: __( "Choose the rows you want to update. Use the dropdown for additional options.", "wordpress-seo" ),
@@ -33,7 +35,8 @@ export const getTourSteps = () => [
 	{
 		id: "bulk-editor-tour-generate",
 		tourId: "generate-actions",
-		position: "bottom-right",
+		highlightChildren: true,
+		position: "right",
 		requiresSelection: true,
 		title: __( "Get SEO-friendly options at scale", "wordpress-seo" ),
 		content: __( "Generate up to 20 results at a time. Great for website refreshes!", "wordpress-seo" ),
diff --git a/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js b/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
index be14f0d08bc..57410d70cae 100644
--- a/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
+++ b/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
@@ -5,6 +5,29 @@ import { useState, useEffect } from "@wordpress/element";
 const TARGET_WAIT_MS = 2000;
 const TARGET_POLL_MS = 100;
 
+// Space (px) around a single-region spotlight. The right side gets extra room for the gap to the popover.
+const SPOTLIGHT_PADDING = { top: 8, right: 24, bottom: 8, left: 8 };
+// Corner radius (px) for a single-region cut-out, which covers an area rather than one styled control.
+const SINGLE_REGION_RADIUS = 8;
+
+/**
+ * Reads the corner radius to match a control's cut-out to its rounded corners. Direct children are sometimes plain
+ * wrappers (radius 0) around the styled control, so it falls back to the first child's radius.
+ *
+ * @param {HTMLElement} element The element.
+ *
+ * @returns {number} The corner radius in pixels.
+ */
+const cornerRadius = ( element ) => {
+	const own = parseFloat( getComputedStyle( element ).borderTopLeftRadius ) || 0;
+	if ( own > 0 ) {
+		return own;
+	}
+	return element.firstElementChild
+		? parseFloat( getComputedStyle( element.firstElementChild ).borderTopLeftRadius ) || 0
+		: 0;
+};
+
 /**
  * Finds the visible element for a tour target.
  *
@@ -16,15 +39,27 @@ const findVisibleTarget = ( selector ) =>
 	[ ...document.querySelectorAll( selector ) ].find( ( element ) => element.offsetParent !== null ) ?? null;
 
 /**
- * Positions the tour card against a target element and moves the spotlight highlight onto it.
+ * Whether an element exsists and is visible.
+ *
+ * @param {HTMLElement} element The element.
+ *
+ * @returns {boolean} Whether it is visible.
+ */
+const isVisible = ( element ) => element.offsetParent !== null && element.getBoundingClientRect().width > 0;
+
+/**
+ * Tracks a target element and returns the spotlight rectangles.
  *
  * @param {string}  targetSelector The `[data-tour-id="…"]` selector of the element the step points at.
- * @param {boolean} isActive       Whether this step is the active one; only then is the target measured and highlighted.
+ * @param {boolean} isActive       Whether this step is the active one; only then is the target measured.
+ * @param {Object}  [options]      Extra options.
+ * @param {string}  [options.endSelector] Selector, resolved within the target, whose bottom clamps a single-region spotlight.
+ * @param {boolean} [options.perChild]    Whether to spotlight per visible direct child instead of one for the target.
  *
- * @returns {{style: Object|null}} The wrapper's absolute-position style, or null while no target is found.
+ * @returns {{spotlight: {rects: Array<Object>, bounds: Object, viewport: Object}|null}} The spotlight geometry, or null.
  */
-export const useTourAnchor = ( targetSelector, isActive ) => {
-	const [ style, setStyle ] = useState( null );
+export const useTourAnchor = ( targetSelector, isActive, { endSelector = null, perChild = false } = {} ) => {
+	const [ spotlight, setSpotlight ] = useState( null );
 
 	useEffect( () => {
 		if ( ! isActive ) {
@@ -35,16 +70,60 @@ export const useTourAnchor = ( targetSelector, isActive ) => {
 		let cleanup = null;
 
 		const attach = ( element ) => {
-			element.classList.add( "yst-feature-highlight" );
-			element.scrollIntoView( { behavior: "smooth", block: "center" } );
+			// Instant, minimal scroll: only nudge the target into view if it is off-screen.
+			element.scrollIntoView( { block: "nearest" } );
 
 			const updatePosition = () => {
-				const rect = element.getBoundingClientRect();
-				setStyle( {
-					top: `${ rect.top }px`,
-					left: `${ rect.left }px`,
-					width: `${ rect.width }px`,
-					height: `${ rect.height }px`,
+				let rects;
+				if ( perChild ) {
+					rects = [ ...element.children ].filter( isVisible ).map( ( child ) => {
+						const rect = child.getBoundingClientRect();
+						return {
+							top: rect.top,
+							left: rect.left,
+							width: rect.width,
+							height: rect.height,
+							rx: cornerRadius( child ),
+						};
+					} );
+				} else {
+					const rect = element.getBoundingClientRect();
+					// Clamp to the end element's bottom when present, so the rest of the target stays dimmed.
+					const endElement = endSelector ? element.querySelector( endSelector ) : null;
+					const top = rect.top - SPOTLIGHT_PADDING.top;
+					const bottom = endElement
+						? endElement.getBoundingClientRect().bottom
+						: rect.bottom + SPOTLIGHT_PADDING.bottom;
+					rects = [ {
+						top,
+						left: rect.left - SPOTLIGHT_PADDING.left,
+						width: rect.width + SPOTLIGHT_PADDING.left + SPOTLIGHT_PADDING.right,
+						height: bottom - top,
+						rx: SINGLE_REGION_RADIUS,
+					} ];
+				}
+
+				// No visible children yet (e.g. the generate AI actions row before it mounts): render nothing rather than an
+				// empty, fully-dimmed overlay.
+				if ( rects.length === 0 ) {
+					setSpotlight( null );
+					return;
+				}
+
+				const minLeft = Math.min( ...rects.map( ( rect ) => rect.left ) );
+				const minTop = Math.min( ...rects.map( ( rect ) => rect.top ) );
+				const maxRight = Math.max( ...rects.map( ( rect ) => rect.left + rect.width ) );
+				const maxBottom = Math.max( ...rects.map( ( rect ) => rect.top + rect.height ) );
+
+				setSpotlight( {
+					rects,
+					bounds: {
+						top: `${ minTop }px`,
+						left: `${ minLeft }px`,
+						width: `${ maxRight - minLeft }px`,
+						height: `${ maxBottom - minTop }px`,
+					},
+					viewport: { width: window.innerWidth, height: window.innerHeight },
 				} );
 			};
 			updatePosition();
@@ -55,7 +134,6 @@ export const useTourAnchor = ( targetSelector, isActive ) => {
 			observer.observe( element );
 
 			cleanup = () => {
-				element.classList.remove( "yst-feature-highlight" );
 				window.removeEventListener( "scroll", updatePosition, true );
 				window.removeEventListener( "resize", updatePosition );
 				observer.disconnect();
@@ -84,9 +162,9 @@ export const useTourAnchor = ( targetSelector, isActive ) => {
 			if ( cleanup ) {
 				cleanup();
 			}
-			setStyle( null );
+			setSpotlight( null );
 		};
-	}, [ targetSelector, isActive ] );
+	}, [ targetSelector, isActive, endSelector, perChild ] );
 
-	return { style };
+	return { spotlight };
 };

From 55884c657071415374dc7ea3c338c8123808fe3a Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Mon, 27 Jul 2026 15:09:26 +0200
Subject: [PATCH 08/20] Refactor tour tests to enhance spotlight functionality
 and layout

---
 .../bulk-editor/tour/bulk-editor-tour.test.js |  9 +-
 .../tests/bulk-editor/tour/tour-card.test.js  |  8 ++
 .../bulk-editor/tour/use-tour-anchor.test.js  | 99 +++++++++++++++----
 3 files changed, 95 insertions(+), 21 deletions(-)

diff --git a/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js b/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
index ad3df3389aa..7a8022471c2 100644
--- a/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
+++ b/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
@@ -14,9 +14,14 @@ jest.mock( "@wordpress/data", () => ( {
 	useDispatch: () => ( { setOptInNotificationSeen: mockSetOptInNotificationSeen } ),
 } ) );
 
-// Bypass the DOM measuring/positioning; the controller only needs a style to render the card.
 jest.mock( "../../../src/bulk-editor/components/tour/use-tour-anchor", () => ( {
-	useTourAnchor: () => ( { style: { top: "0px", left: "0px", width: "10px", height: "10px" } } ),
+	useTourAnchor: () => ( {
+		spotlight: {
+			rects: [ { top: 0, left: 0, width: 10, height: 10 } ],
+			bounds: { top: "0px", left: "0px", width: "10px", height: "10px" },
+			viewport: { width: 1024, height: 768 },
+		},
+	} ),
 } ) );
 
 /**
diff --git a/packages/js/tests/bulk-editor/tour/tour-card.test.js b/packages/js/tests/bulk-editor/tour/tour-card.test.js
index 4a42e8ddd14..a424de1dc05 100644
--- a/packages/js/tests/bulk-editor/tour/tour-card.test.js
+++ b/packages/js/tests/bulk-editor/tour/tour-card.test.js
@@ -58,4 +58,12 @@ describe( "TourCard", () => {
 
 		expect( baseProps.onSkip ).toHaveBeenCalledTimes( 1 );
 	} );
+
+	it( "ends the tour via onSkip when Escape is pressed", () => {
+		render( <TourCard { ...baseProps } /> );
+
+		fireEvent.keyDown( screen.getByRole( "dialog" ), { key: "Escape" } );
+
+		expect( baseProps.onSkip ).toHaveBeenCalledTimes( 1 );
+	} );
 } );
diff --git a/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js b/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
index 12bc0928c11..48cfe228951 100644
--- a/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
+++ b/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
@@ -4,18 +4,44 @@ import { useTourAnchor } from "../../../src/bulk-editor/components/tour/use-tour
 let resizeObserverDisconnect;
 
 /**
- * Adds a tour target to the DOM with a stubbed layout, since jsdom has none.
+ * Stubs an element's layout, since jsdom has none.
+ *
+ * @param {HTMLElement} element The element.
+ * @param {Object}      rect    The bounding rect it should report.
+ *
+ * @returns {HTMLElement} The element.
+ */
+const stubLayout = ( element, rect ) => {
+	// findVisibleTarget/isVisible skip elements whose offsetParent is null; jsdom always reports null.
+	Object.defineProperty( element, "offsetParent", { get: () => document.body, configurable: true } );
+	element.getBoundingClientRect = () => ( { ...rect, right: rect.left + rect.width, bottom: rect.top + rect.height } );
+	return element;
+};
+
+/**
+ * Adds a tour target to the DOM with a stubbed layout.
+ *
+ * @param {Object} rect The bounding rect the target should report.
  *
- * @param {Object} rect The bounding rect the element should report.
  * @returns {HTMLElement} The target element.
  */
 const addTarget = ( rect = { top: 10, left: 20, width: 100, height: 30 } ) => {
 	document.body.innerHTML = "<div data-tour-id=\"x\"></div>";
-	const target = document.querySelector( "[data-tour-id=\"x\"]" );
-	// findVisibleTarget skips elements whose offsetParent is null; jsdom always reports null.
-	Object.defineProperty( target, "offsetParent", { get: () => document.body, configurable: true } );
-	target.getBoundingClientRect = () => ( { ...rect, right: rect.left + rect.width, bottom: rect.top + rect.height } );
-	return target;
+	return stubLayout( document.querySelector( "[data-tour-id=\"x\"]" ), rect );
+};
+
+/**
+ * Appends a stubbed child to a target.
+ *
+ * @param {HTMLElement} target The target.
+ * @param {Object}      rect   The child's bounding rect.
+ *
+ * @returns {HTMLElement} The child.
+ */
+const addChild = ( target, rect ) => {
+	const child = document.createElement( "div" );
+	target.appendChild( child );
+	return stubLayout( child, rect );
 };
 
 describe( "useTourAnchor", () => {
@@ -35,40 +61,75 @@ describe( "useTourAnchor", () => {
 		document.body.innerHTML = "";
 	} );
 
-	it( "returns no style and does not highlight when inactive", () => {
-		const target = addTarget();
+	it( "returns no spotlight when inactive", () => {
+		addTarget();
 
 		const { result } = renderHook( () => useTourAnchor( "[data-tour-id=\"x\"]", false ) );
 
-		expect( result.current.style ).toBeNull();
-		expect( target.classList.contains( "yst-feature-highlight" ) ).toBe( false );
+		expect( result.current.spotlight ).toBeNull();
 	} );
 
-	it( "positions against the target and applies the spotlight when active", () => {
+	it( "cuts one padded rectangle for the whole target when active", () => {
 		const target = addTarget( { top: 10, left: 20, width: 100, height: 30 } );
 
 		const { result } = renderHook( () => useTourAnchor( "[data-tour-id=\"x\"]", true ) );
 
-		expect( result.current.style ).toEqual( { top: "10px", left: "20px", width: "100px", height: "30px" } );
-		expect( target.classList.contains( "yst-feature-highlight" ) ).toBe( true );
+		// The target rect grows by the spotlight padding: 8 all round plus an extra 24 on the right.
+		expect( result.current.spotlight.rects ).toEqual( [ { top: 2, left: 12, width: 132, height: 46, rx: 8 } ] );
+		expect( result.current.spotlight.bounds ).toEqual( { top: "2px", left: "12px", width: "132px", height: "46px" } );
+		expect( result.current.spotlight.viewport ).toEqual( { width: window.innerWidth, height: window.innerHeight } );
 		expect( target.scrollIntoView ).toHaveBeenCalled();
 	} );
 
-	it( "removes the spotlight and disconnects the observer on cleanup", () => {
-		const target = addTarget();
+	it( "clamps a single-region rectangle to the end element's bottom", () => {
+		const target = addTarget( { top: 10, left: 20, width: 100, height: 90 } );
+		const end = addChild( target, { top: 40, left: 20, width: 100, height: 20 } );
+		end.setAttribute( "data-tour-highlight-end", "true" );
+
+		const { result } = renderHook( () => useTourAnchor( "[data-tour-id=\"x\"]", true, { endSelector: "[data-tour-highlight-end]" } ) );
+
+		// Height spans from the padded top (2) to the end element's bottom (60), not the target's own 90-tall rect.
+		expect( result.current.spotlight.rects ).toEqual( [ { top: 2, left: 12, width: 132, height: 58, rx: 8 } ] );
+	} );
+
+	it( "cuts one rectangle per visible child with perChild", () => {
+		const target = addTarget( { top: 10, left: 20, width: 200, height: 30 } );
+		addChild( target, { top: 12, left: 22, width: 16, height: 16 } );
+		addChild( target, { top: 10, left: 60, width: 80, height: 28 } );
+
+		const { result } = renderHook( () => useTourAnchor( "[data-tour-id=\"x\"]", true, { perChild: true } ) );
+
+		// Each cut-out matches its child's exact size (no padding), so the gap between them stays dimmed.
+		expect( result.current.spotlight.rects ).toEqual( [
+			{ top: 12, left: 22, width: 16, height: 16, rx: 0 },
+			{ top: 10, left: 60, width: 80, height: 28, rx: 0 },
+		] );
+		// The bounds union spans both children.
+		expect( result.current.spotlight.bounds ).toEqual( { top: "10px", left: "22px", width: "118px", height: "28px" } );
+	} );
+
+	it( "returns no spotlight for perChild when the target has no visible children", () => {
+		addTarget();
+
+		const { result } = renderHook( () => useTourAnchor( "[data-tour-id=\"x\"]", true, { perChild: true } ) );
+
+		expect( result.current.spotlight ).toBeNull();
+	} );
+
+	it( "disconnects the observer on cleanup", () => {
+		addTarget();
 
 		const { unmount } = renderHook( () => useTourAnchor( "[data-tour-id=\"x\"]", true ) );
 		unmount();
 
-		expect( target.classList.contains( "yst-feature-highlight" ) ).toBe( false );
 		expect( resizeObserverDisconnect ).toHaveBeenCalled();
 	} );
 
-	it( "returns no style when the target is absent", () => {
+	it( "returns no spotlight when the target is absent", () => {
 		document.body.innerHTML = "";
 
 		const { result } = renderHook( () => useTourAnchor( "[data-tour-id=\"missing\"]", true ) );
 
-		expect( result.current.style ).toBeNull();
+		expect( result.current.spotlight ).toBeNull();
 	} );
 } );

From 74c747233cae9a8f52cee5f7edb41601edd97b10 Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Mon, 27 Jul 2026 15:26:18 +0200
Subject: [PATCH 09/20] chore(bulk-editor): drop unrelated changes reintroduced
 on the branch

Removes the AI Brand Insights modals/classes/tests and image that #23439 deleted
from trunk, plus stray wordpress-urls (class-wpseo-utils) and yarn.lock edits, so
this PR only contains the guided-tour work.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/content-analysis-webworker/yarn.lock     |  12 +-
 images/ai-brand-insights-pre-launch.jpg       | Bin 14370 -> 0 bytes
 inc/class-wpseo-utils.php                     |  14 ++
 .../modals/ai-brand-insights-free-trial.js    | 113 ------------
 .../modals/ai-brand-insights-post-launch.js   | 111 ------------
 .../modals/ai-brand-insights-pre-launch.js    | 110 ------------
 packages/js/src/introductions/initialize.js   |   4 -
 .../ai-brand-insights-free-trial.php          |  72 --------
 .../ai-brand-insights-post-launch.php         |  72 --------
 .../AI_Brand_Insights_Free_Trial_Test.php     | 165 ------------------
 .../AI_Brand_Insights_Post_Launch_Test.php    | 165 ------------------
 tests/WP/Inc/Utils_Test.php                   |  36 ++--
 yarn.lock                                     |  14 +-
 13 files changed, 55 insertions(+), 833 deletions(-)
 delete mode 100644 images/ai-brand-insights-pre-launch.jpg
 delete mode 100644 packages/js/src/introductions/components/modals/ai-brand-insights-free-trial.js
 delete mode 100644 packages/js/src/introductions/components/modals/ai-brand-insights-post-launch.js
 delete mode 100644 packages/js/src/introductions/components/modals/ai-brand-insights-pre-launch.js
 delete mode 100644 src/introductions/application/ai-brand-insights-free-trial.php
 delete mode 100644 src/introductions/application/ai-brand-insights-post-launch.php
 delete mode 100644 tests/Unit/Introductions/Application/AI_Brand_Insights_Free_Trial_Test.php
 delete mode 100644 tests/Unit/Introductions/Application/AI_Brand_Insights_Post_Launch_Test.php

diff --git a/apps/content-analysis-webworker/yarn.lock b/apps/content-analysis-webworker/yarn.lock
index d2d946dd02e..afe5088670b 100644
--- a/apps/content-analysis-webworker/yarn.lock
+++ b/apps/content-analysis-webworker/yarn.lock
@@ -1173,9 +1173,9 @@ fast-deep-equal@^3.1.3:
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
 fast-uri@^3.0.1:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.1.2.tgz#8af3d4fc9d3e71b11572cc2673b514a7d1a8c8ec"
-  integrity sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.1.4.tgz#3b3daf9ce68f41f956df0b505132c0cfce9ec7af"
+  integrity sha512-8JnbkQ4juDyvYs4mgFGQqg4yCYtFDtUtmp2QIQq11ZZe5CFQ5wcqm1rqDgAh/QdMySuBnPzMUiJUNZG5N/AiQw==
 
 faye-websocket@^0.11.3:
   version "0.11.4"
@@ -2440,3 +2440,9 @@ xtend@~4.0.1:
     parse5 "^8.0.0"
     tiny-segmenter "^0.2.0"
     tokenizer2 "^2.0.1"
+    zod "^3.25.76"
+
+zod@^3.25.76:
+  version "3.25.76"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.25.76.tgz#26841c3f6fd22a6a2760e7ccb719179768471e34"
+  integrity sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==
diff --git a/images/ai-brand-insights-pre-launch.jpg b/images/ai-brand-insights-pre-launch.jpg
deleted file mode 100644
index 30f470ad510713f1f7aadbc809a17a26ff11c431..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 14370
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
I(Z$IB0qCK1lK=n!

diff --git a/inc/class-wpseo-utils.php b/inc/class-wpseo-utils.php
index 86473457d29..a98984dbe9a 100644
--- a/inc/class-wpseo-utils.php
+++ b/inc/class-wpseo-utils.php
@@ -183,6 +183,20 @@ public static function sanitize_text_field( $value ) {
 	 */
 	public static function sanitize_url( $value, $allowed_protocols = [ 'http', 'https' ] ) {
 
+		// Percent-encode non-ASCII bytes in the path/query/fragment before parsing, so wp_parse_url()
+		// does not corrupt multibyte UTF-8 characters. The authority (userinfo + host) is left untouched
+		// to avoid double-encoding it during the sanitization below.
+		if ( preg_match( '/[\x80-\xff]/', $value ) === 1 ) {
+			preg_match( '`^((?:[a-z][a-z0-9+.\-]*:)?//[^/?#]*)?(.*)$`is', $value, $split );
+			$value = $split[1] . preg_replace_callback(
+				'/[\x80-\xff]/',
+				static function ( $bytes ) {
+					return rawurlencode( $bytes[0] );
+				},
+				$split[2],
+			);
+		}
+
 		$url   = '';
 		$parts = wp_parse_url( $value );
 
diff --git a/packages/js/src/introductions/components/modals/ai-brand-insights-free-trial.js b/packages/js/src/introductions/components/modals/ai-brand-insights-free-trial.js
deleted file mode 100644
index 1c84b155000..00000000000
--- a/packages/js/src/introductions/components/modals/ai-brand-insights-free-trial.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { useSelect } from "@wordpress/data";
-import { createInterpolateElement, useMemo } from "@wordpress/element";
-import { __ } from "@wordpress/i18n";
-import ExternalLinkIcon from "@heroicons/react/outline/ExternalLinkIcon";
-import { Button, Modal as UiModal, useSvgAria, useModalContext } from "@yoast/ui-library";
-import { STORE_NAME_INTRODUCTIONS } from "../../constants";
-import { Modal } from "../modal";
-
-/**
- * @param {Object} thumbnail The thumbnail: img props.
- * @param {string} buttonLink The button link.
- * @returns {JSX.Element} The element.
- */
-const AiBrandInsightsFreeTrialContent = ( {
-	thumbnail,
-	buttonLink,
-} ) => {
-	const { onClose, initialFocus } = useModalContext();
-	const svgAriaProps = useSvgAria();
-
-	return (
-		<>
-			<div className="yst-px-10 yst-pt-10 yst-introduction-gradient yst-text-center">
-				<img
-					className="yst-w-full yst-h-auto yst-rounded-md yst-drop-shadow-md"
-					alt={ __( "Web chart showing aspects of brand visibility in AI responses", "wordpress-seo" ) }
-					loading="lazy"
-					decoding="async"
-					{ ...thumbnail }
-				/>
-				<div className="yst-mt-6 yst-text-xs yst-font-medium yst-flex yst-flex-col yst-items-center">
-					<span className="yst-introduction-modal-uppercase yst-flex yst-gap-2 yst-items-center">
-						<span className="yst-ai-insights-icon" { ...svgAriaProps } />
-						{ "Yoast AI Brand Insights" }
-					</span>
-				</div>
-			</div>
-			<div className="yst-px-10 yst-pb-4 yst-flex yst-flex-col yst-items-center">
-				<div className="yst-mt-4 yst-mx-1.5 yst-text-center">
-					<UiModal.Title as="h3" className="yst-text-slate-900 yst-text-lg yst-font-medium">
-						{
-							__( "Your first brand analysis is free!", "wordpress-seo" )
-						}
-					</UiModal.Title>
-					<div className="yst-mt-2 yst-text-slate-600 yst-text-sm">
-						<p>
-							{ createInterpolateElement(
-								__(
-									"As a Yoast customer, you can run your first brand analysis for <strong>free</strong>. See how your brand shows up in AI responses.",
-									"wordpress-seo"
-								),
-								{
-									strong: <strong className="yst-font-semibold" />,
-								}
-							) }
-						</p>
-					</div>
-				</div>
-				<div className="yst-w-full yst-flex yst-mt-6">
-					<Button
-						as="a"
-						className="yst-grow"
-						size="extra-large"
-						variant="ai-primary"
-						href={ buttonLink }
-						target="_blank"
-						rel="noopener noreferrer"
-						ref={ initialFocus }
-					>
-						{ __( "Start your free trial", "wordpress-seo" ) }
-						<ExternalLinkIcon className="yst--me-1 yst-ms-1 yst-h-5 yst-w-5" { ...svgAriaProps } />
-						<span className="yst-sr-only">
-							{
-								/* translators: Hidden accessibility text. */
-								__( "(Opens in a new browser tab)", "wordpress-seo" )
-							}
-						</span>
-					</Button>
-				</div>
-				<Button
-					className="yst-mt-2"
-					variant="tertiary"
-					onClick={ onClose }
-				>
-					{ __( "Close", "wordpress-seo" ) }
-				</Button>
-			</div>
-		</>
-	);
-};
-
-/**
- * @returns {JSX.Element} The element.
- */
-export const AiBrandInsightsFreeTrial = () => {
-	const imageLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectImageLink( "ai-brand-insights-pre-launch.jpg" ), [] );
-	const buttonLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS )
-		.selectLink( "https://yoa.st/aibi-introduction-free-trial" ), [] );
-	const thumbnail = useMemo( () => ( {
-		src: imageLink,
-		width: "432",
-		height: "243",
-	} ), [ imageLink ] );
-
-	return (
-		<Modal>
-			<AiBrandInsightsFreeTrialContent
-				buttonLink={ buttonLink }
-				thumbnail={ thumbnail }
-			/>
-		</Modal>
-	);
-};
diff --git a/packages/js/src/introductions/components/modals/ai-brand-insights-post-launch.js b/packages/js/src/introductions/components/modals/ai-brand-insights-post-launch.js
deleted file mode 100644
index 70c99a3684b..00000000000
--- a/packages/js/src/introductions/components/modals/ai-brand-insights-post-launch.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useSelect } from "@wordpress/data";
-import { useMemo } from "@wordpress/element";
-import { __, sprintf } from "@wordpress/i18n";
-import { Button, useModalContext } from "@yoast/ui-library";
-import { STORE_NAME_INTRODUCTIONS } from "../../constants";
-import { Modal } from "../modal";
-
-/**
- * @param {Object} thumbnail The thumbnail: img props.
- * @param {string} buttonLink The button link.
- * @param {string} buttonLabel The button label.
- * @param {string} productName The product name.
- * @param {string} description The description for the introduction
- * @param {string} ctbId The click to buy to register for this upsell instance.
- * @returns {JSX.Element} The element.
- */
-const AiBrandInsightsPostLaunchContent = ( {
-	thumbnail,
-	buttonLink,
-	buttonLabel = __( "Discover Brand Insights now", "wordpress-seo" ),
-	productName = sprintf(
-		/* translators: %1$s expands to Yoast SEO AI+. */
-		__( "New - Upgrade to %1$s", "wordpress-seo" ),
-		"Yoast SEO AI+"
-	),
-} ) => {
-	const { onClose, initialFocus } = useModalContext();
-
-	const description = __( "Track visibility, control perception, and stay ahead - tools to manage your AI presence are now live!", "wordpress-seo" );
-
-	return (
-		<>
-			<div className="yst-px-10 yst-pt-10 yst-introduction-gradient yst-text-center">
-				<img
-					className="yst-w-full yst-h-auto yst-rounded-md yst-drop-shadow-md"
-					alt={ __( "Web chart showing aspects of brand visibility in AI responses", "wordpress-seo" ) }
-					loading="lazy"
-					decoding="async"
-					{ ...thumbnail }
-				/>
-				<div className="yst-mt-6 yst-text-xs yst-font-medium yst-flex yst-flex-col yst-items-center">
-					<span className="yst-introduction-modal-uppercase yst-flex yst-gap-2 yst-items-center">
-						<span className="yst-ai-insights-icon" />
-						{ productName }
-					</span>
-				</div>
-			</div>
-			<div className="yst-px-10 yst-pb-4 yst-flex yst-flex-col yst-items-center">
-				<div className="yst-mt-4 yst-mx-1.5 yst-text-center">
-					<h3 className="yst-text-slate-900 yst-text-lg yst-font-medium">
-						{
-							__( "How does your brand show up in AI responses?", "wordpress-seo" )
-						}
-					</h3>
-					<div className="yst-mt-2 yst-text-slate-600 yst-text-sm">
-						<p>{ description }</p>
-					</div>
-				</div>
-				<div className="yst-w-full yst-flex yst-mt-6">
-					<Button
-						as="a"
-						className="yst-grow"
-						size="extra-large"
-						variant="ai-primary"
-						href={ buttonLink }
-						target="_blank"
-						ref={ initialFocus }
-					>
-						{ buttonLabel }
-						<span className="yst-sr-only">
-							{
-								/* translators: Hidden accessibility text. */
-								__( "(Opens in a new browser tab)", "wordpress-seo" )
-							}
-						</span>
-					</Button>
-				</div>
-				<Button
-					className="yst-mt-2"
-					variant="tertiary"
-					onClick={ onClose }
-				>
-					{ __( "Close", "wordpress-seo" ) }
-				</Button>
-			</div>
-		</>
-	);
-};
-
-/**
- * @returns {JSX.Element} The element.
- */
-export const AiBrandInsightsPostLaunch = () => {
-	const imageLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectImageLink( "ai-brand-insights-pre-launch.jpg" ), [] );
-	const joinWishlistLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS )
-		.selectLink( "https://yoa.st/ai-brand-insights-introduction-post-launch/" ), [] );
-	const thumbnail = useMemo( () => ( {
-		src: imageLink,
-		width: "432",
-		height: "243",
-	} ), [ imageLink ] );
-
-	return (
-		<Modal>
-			<AiBrandInsightsPostLaunchContent
-				buttonLink={ joinWishlistLink }
-				thumbnail={ thumbnail }
-			/>
-		</Modal>
-	);
-};
diff --git a/packages/js/src/introductions/components/modals/ai-brand-insights-pre-launch.js b/packages/js/src/introductions/components/modals/ai-brand-insights-pre-launch.js
deleted file mode 100644
index 934dbfcc998..00000000000
--- a/packages/js/src/introductions/components/modals/ai-brand-insights-pre-launch.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useSelect } from "@wordpress/data";
-import { useMemo } from "@wordpress/element";
-import { __, sprintf } from "@wordpress/i18n";
-import { Button, useModalContext } from "@yoast/ui-library";
-import { STORE_NAME_INTRODUCTIONS } from "../../constants";
-import { Modal } from "../modal";
-
-/**
- * @param {Object} thumbnail The thumbnail: img props.
- * @param {string} buttonLink The button link.
- * @param {string} buttonLabel The button label.
- * @param {string} productName The product name.
- * @param {string} description The description for the introduction
- * @param {string} ctbId The click to buy to register for this upsell instance.
- * @returns {JSX.Element} The element.
- */
-const AiBrandInsightsPreLaunchContent = ( {
-	thumbnail,
-	buttonLink,
-	buttonLabel = __( "Join the waitlist", "wordpress-seo" ),
-	productName = sprintf(
-		/* translators: %1$s expands to Yoast AI brand insights. */
-		__( "Introducing %1$s", "wordpress-seo" ),
-		"Yoast AI brand insights"
-	),
-	description =  __( "Track visibility, control perception, and stay ahead - tools to manage your AI presence are coming soon!", "wordpress-seo" ),
-} ) => {
-	const { onClose, initialFocus } = useModalContext();
-
-	return (
-		<>
-			<div className="yst-px-10 yst-pt-10 yst-introduction-gradient yst-text-center">
-				<img
-					className="yst-w-full yst-h-auto yst-rounded-md yst-drop-shadow-md"
-					alt={ __( "Web chart showing aspects of brand visibility in AI responses", "wordpress-seo" ) }
-					loading="lazy"
-					decoding="async"
-					{ ...thumbnail }
-				/>
-				<div className="yst-mt-6 yst-text-xs yst-font-medium yst-flex yst-flex-col yst-items-center">
-					<span className="yst-introduction-modal-uppercase yst-flex yst-gap-2 yst-items-center">
-						<span className="yst-ai-insights-icon" />
-						{ productName }
-					</span>
-				</div>
-			</div>
-			<div className="yst-px-10 yst-pb-4 yst-flex yst-flex-col yst-items-center">
-				<div className="yst-mt-4 yst-mx-1.5 yst-text-center">
-					<h3 className="yst-text-slate-900 yst-text-lg yst-font-medium">
-						{
-							__( "How does your brand show up in AI responses?", "wordpress-seo" )
-						}
-					</h3>
-					<div className="yst-mt-2 yst-text-slate-600 yst-text-sm">
-						<p>{ description }</p>
-					</div>
-				</div>
-				<div className="yst-w-full yst-flex yst-mt-6">
-					<Button
-						as="a"
-						className="yst-grow"
-						size="extra-large"
-						variant="ai-primary"
-						href={ buttonLink }
-						target="_blank"
-						ref={ initialFocus }
-					>
-						{ buttonLabel }
-						<span className="yst-sr-only">
-							{
-								/* translators: Hidden accessibility text. */
-								__( "(Opens in a new browser tab)", "wordpress-seo" )
-							}
-						</span>
-					</Button>
-				</div>
-				<Button
-					className="yst-mt-2"
-					variant="tertiary"
-					onClick={ onClose }
-				>
-					{ __( "Close", "wordpress-seo" ) }
-				</Button>
-			</div>
-		</>
-	);
-};
-
-/**
- * @returns {JSX.Element} The element.
- */
-export const AiBrandInsightsPreLaunch = () => {
-	const imageLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectImageLink( "ai-brand-insights-pre-launch.jpg" ), [] );
-	const joinWishlistLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/ai-brand-insights-introduction-pre-launch/" ), [] );
-
-	const thumbnail = useMemo( () => ( {
-		src: imageLink,
-		width: "432",
-		height: "243",
-	} ), [ imageLink ] );
-
-	return (
-		<Modal>
-			<AiBrandInsightsPreLaunchContent
-				buttonLink={ joinWishlistLink }
-				thumbnail={ thumbnail }
-			/>
-		</Modal>
-	);
-};
diff --git a/packages/js/src/introductions/initialize.js b/packages/js/src/introductions/initialize.js
index d5d421d8583..658274be06d 100644
--- a/packages/js/src/introductions/initialize.js
+++ b/packages/js/src/introductions/initialize.js
@@ -7,8 +7,6 @@ import { Root } from "@yoast/ui-library";
 import { get, isEmpty, find } from "lodash";
 import { LINK_PARAMS_NAME, PLUGIN_URL_NAME, WISTIA_EMBED_PERMISSION_NAME } from "../shared-admin/store";
 import { Introduction, IntroductionProvider } from "./components";
-import { AiBrandInsightsFreeTrial } from "./components/modals/ai-brand-insights-free-trial";
-import { AiBrandInsightsPostLaunch } from "./components/modals/ai-brand-insights-post-launch";
 import { BlackFridayAnnouncement } from "./components/modals/black-friday-announcement";
 import { DelayedPremiumUpsell } from "./components/modals/delayed-premium-upsell";
 import { SchemaAggregatorAnnouncement } from "./components/modals/schema-aggregator-announcement";
@@ -24,8 +22,6 @@ domReady( () => {
 	}
 
 	const initialComponents = {
-		"ai-brand-insights-free-trial": AiBrandInsightsFreeTrial,
-		"ai-brand-insights-post-launch": AiBrandInsightsPostLaunch,
 		"black-friday-announcement": BlackFridayAnnouncement,
 		"delayed-premium-upsell": DelayedPremiumUpsell,
 		"schema-aggregator-announcement": SchemaAggregatorAnnouncement,
diff --git a/src/introductions/application/ai-brand-insights-free-trial.php b/src/introductions/application/ai-brand-insights-free-trial.php
deleted file mode 100644
index c5a500bb6ff..00000000000
--- a/src/introductions/application/ai-brand-insights-free-trial.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<?php
-
-namespace Yoast\WP\SEO\Introductions\Application;
-
-use Yoast\WP\SEO\Helpers\Current_Page_Helper;
-use Yoast\WP\SEO\Helpers\Product_Helper;
-use Yoast\WP\SEO\Introductions\Domain\Introduction_Interface;
-
-/**
- * Represents the introduction for the AI Brand Insights free trial.
- */
-class AI_Brand_Insights_Free_Trial implements Introduction_Interface {
-
-	use User_Allowed_Trait;
-
-	public const ID = 'ai-brand-insights-free-trial';
-
-	/**
-	 * Holds the current page helper.
-	 *
-	 * @var Current_Page_Helper
-	 */
-	private $current_page_helper;
-
-	/**
-	 * Holds the product helper.
-	 *
-	 * @var Product_Helper
-	 */
-	private $product_helper;
-
-	/**
-	 * Constructs the introduction.
-	 *
-	 * @param Current_Page_Helper $current_page_helper The current page helper.
-	 * @param Product_Helper      $product_helper      The product helper.
-	 */
-	public function __construct(
-		Current_Page_Helper $current_page_helper,
-		Product_Helper $product_helper
-	) {
-		$this->current_page_helper = $current_page_helper;
-		$this->product_helper      = $product_helper;
-	}
-
-	/**
-	 * Returns the ID.
-	 *
-	 * @return string The ID.
-	 */
-	public function get_id() {
-		return self::ID;
-	}
-
-	/**
-	 * Returns the requested pagination priority. Lower means earlier.
-	 *
-	 * @return int The priority.
-	 */
-	public function get_priority() {
-		return 20;
-	}
-
-	/**
-	 * Returns whether this introduction should show.
-	 *
-	 * @return bool Whether this introduction should show.
-	 */
-	public function should_show() {
-		return $this->current_page_helper->is_yoast_seo_page() && $this->product_helper->is_premium();
-	}
-}
diff --git a/src/introductions/application/ai-brand-insights-post-launch.php b/src/introductions/application/ai-brand-insights-post-launch.php
deleted file mode 100644
index 667048c13e6..00000000000
--- a/src/introductions/application/ai-brand-insights-post-launch.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<?php
-
-namespace Yoast\WP\SEO\Introductions\Application;
-
-use Yoast\WP\SEO\Helpers\Current_Page_Helper;
-use Yoast\WP\SEO\Helpers\Product_Helper;
-use Yoast\WP\SEO\Introductions\Domain\Introduction_Interface;
-
-/**
- * Represents the introduction for the AI Brand Insights post-launch.
- */
-class AI_Brand_Insights_Post_Launch implements Introduction_Interface {
-
-	use User_Allowed_Trait;
-
-	public const ID = 'ai-brand-insights-post-launch';
-
-	/**
-	 * Holds the current page helper.
-	 *
-	 * @var Current_Page_Helper
-	 */
-	private $current_page_helper;
-
-	/**
-	 * Holds the product helper.
-	 *
-	 * @var Product_Helper
-	 */
-	private $product_helper;
-
-	/**
-	 * Constructs the introduction.
-	 *
-	 * @param Current_Page_Helper $current_page_helper The current page helper.
-	 * @param Product_Helper      $product_helper      The product helper.
-	 */
-	public function __construct(
-		Current_Page_Helper $current_page_helper,
-		Product_Helper $product_helper
-	) {
-		$this->current_page_helper = $current_page_helper;
-		$this->product_helper      = $product_helper;
-	}
-
-	/**
-	 * Returns the ID.
-	 *
-	 * @return string The ID.
-	 */
-	public function get_id() {
-		return self::ID;
-	}
-
-	/**
-	 * Returns the requested pagination priority. Lower means earlier.
-	 *
-	 * @return int The priority.
-	 */
-	public function get_priority() {
-		return 20;
-	}
-
-	/**
-	 * Returns whether this introduction should show.
-	 *
-	 * @return bool Whether this introduction should show.
-	 */
-	public function should_show() {
-		return $this->current_page_helper->is_yoast_seo_page() && ! $this->product_helper->is_premium();
-	}
-}
diff --git a/tests/Unit/Introductions/Application/AI_Brand_Insights_Free_Trial_Test.php b/tests/Unit/Introductions/Application/AI_Brand_Insights_Free_Trial_Test.php
deleted file mode 100644
index bbf3f3d7718..00000000000
--- a/tests/Unit/Introductions/Application/AI_Brand_Insights_Free_Trial_Test.php
+++ /dev/null
@@ -1,165 +0,0 @@
-<?php
-
-namespace Yoast\WP\SEO\Tests\Unit\Introductions\Application;
-
-use Mockery;
-use Yoast\WP\SEO\Helpers\Current_Page_Helper;
-use Yoast\WP\SEO\Helpers\Product_Helper;
-use Yoast\WP\SEO\Introductions\Application\AI_Brand_Insights_Free_Trial;
-use Yoast\WP\SEO\Tests\Unit\TestCase;
-
-/**
- * Tests the AI Brand Insights free trial.
- *
- * @group introductions
- *
- * @coversDefaultClass \Yoast\WP\SEO\Introductions\Application\AI_Brand_Insights_Free_Trial
- *
- * @phpcs:disable Yoast.NamingConventions.ObjectNameDepth.MaxExceeded
- */
-final class AI_Brand_Insights_Free_Trial_Test extends TestCase {
-
-	/**
-	 * Holds the instance.
-	 *
-	 * @var AI_Brand_Insights_Free_Trial
-	 */
-	private $instance;
-
-	/**
-	 * Holds the current page helper.
-	 *
-	 * @var Mockery\MockInterface|Current_Page_Helper
-	 */
-	private $current_page_helper;
-
-	/**
-	 * Holds the product helper.
-	 *
-	 * @var Mockery\MockInterface|Product_Helper
-	 */
-	private $product_helper;
-
-	/**
-	 * Sets up the test fixtures.
-	 *
-	 * @return void
-	 */
-	protected function set_up() {
-		parent::set_up();
-
-		$this->current_page_helper = Mockery::mock( Current_Page_Helper::class );
-		$this->product_helper      = Mockery::mock( Product_Helper::class );
-
-		$this->instance = new AI_Brand_Insights_Free_Trial(
-			$this->current_page_helper,
-			$this->product_helper,
-		);
-	}
-
-	/**
-	 * Tests if the needed attributes are set correctly.
-	 *
-	 * @covers ::__construct
-	 *
-	 * @return void
-	 */
-	public function test_constructor() {
-		$this->assertInstanceOf(
-			Current_Page_Helper::class,
-			$this->getPropertyValue( $this->instance, 'current_page_helper' ),
-		);
-		$this->assertInstanceOf(
-			Product_Helper::class,
-			$this->getPropertyValue( $this->instance, 'product_helper' ),
-		);
-	}
-
-	/**
-	 * Tests getting the ID.
-	 *
-	 * @covers ::get_id
-	 *
-	 * @return void
-	 */
-	public function test_get_name() {
-		$this->assertSame( 'ai-brand-insights-free-trial', $this->instance->get_id() );
-	}
-
-	/**
-	 * Tests getting the priority.
-	 *
-	 * @covers ::get_priority
-	 *
-	 * @return void
-	 */
-	public function test_get_priority() {
-		$this->assertSame( 20, $this->instance->get_priority() );
-	}
-
-	/**
-	 * Tests the conditional `should_show`.
-	 *
-	 * @covers ::should_show
-	 *
-	 * @dataProvider should_show_data
-	 *
-	 * @param bool $is_yoast_seo_page Whether on a Yoast SEO page.
-	 * @param bool $is_premium        Whether Premium is installed.
-	 * @param int  $is_premium_times  How many times the `is_premium` method is expected to be called.
-	 * @param bool $expected          The expected result.
-	 *
-	 * @return void
-	 */
-	public function test_should_show(
-		$is_yoast_seo_page,
-		$is_premium,
-		$is_premium_times,
-		$expected
-	) {
-		$this->current_page_helper->expects( 'is_yoast_seo_page' )
-			->once()
-			->withNoArgs()
-			->andReturn( $is_yoast_seo_page );
-		$this->product_helper->expects( 'is_premium' )
-			->times( $is_premium_times )
-			->withNoArgs()
-			->andReturn( $is_premium );
-
-		$this->assertSame( $expected, $this->instance->should_show() );
-	}
-
-	/**
-	 * Provides the data for `test_should_show`.
-	 *
-	 * @return array<string, array<string, bool|int>>
-	 */
-	public static function should_show_data() {
-		return [
-			'on a Yoast admin page, with Premium enabled' => [
-				'is_yoast_seo_page' => true,
-				'is_premium'        => true,
-				'is_premium_times'  => 1,
-				'expected'          => true,
-			],
-			'on a Yoast admin page, with Premium disabled' => [
-				'is_yoast_seo_page' => true,
-				'is_premium'        => false,
-				'is_premium_times'  => 1,
-				'expected'          => false,
-			],
-			'not on a Yoast admin page, with Premium enabled' => [
-				'is_yoast_seo_page' => false,
-				'is_premium'        => true,
-				'is_premium_times'  => 0,
-				'expected'          => false,
-			],
-			'not on a Yoast admin page, with Premium disabled' => [
-				'is_yoast_seo_page' => false,
-				'is_premium'        => false,
-				'is_premium_times'  => 0,
-				'expected'          => false,
-			],
-		];
-	}
-}
diff --git a/tests/Unit/Introductions/Application/AI_Brand_Insights_Post_Launch_Test.php b/tests/Unit/Introductions/Application/AI_Brand_Insights_Post_Launch_Test.php
deleted file mode 100644
index 5be57f920fe..00000000000
--- a/tests/Unit/Introductions/Application/AI_Brand_Insights_Post_Launch_Test.php
+++ /dev/null
@@ -1,165 +0,0 @@
-<?php
-
-namespace Yoast\WP\SEO\Tests\Unit\Introductions\Application;
-
-use Mockery;
-use Yoast\WP\SEO\Helpers\Current_Page_Helper;
-use Yoast\WP\SEO\Helpers\Product_Helper;
-use Yoast\WP\SEO\Introductions\Application\AI_Brand_Insights_Post_Launch;
-use Yoast\WP\SEO\Tests\Unit\TestCase;
-
-/**
- * Tests the AI Brand Insights post-launch.
- *
- * @group introductions
- *
- * @coversDefaultClass \Yoast\WP\SEO\Introductions\Application\AI_Brand_Insights_Post_Launch
- *
- * @phpcs:disable Yoast.NamingConventions.ObjectNameDepth.MaxExceeded
- */
-final class AI_Brand_Insights_Post_Launch_Test extends TestCase {
-
-	/**
-	 * Holds the instance.
-	 *
-	 * @var AI_Brand_Insights_Post_Launch
-	 */
-	private $instance;
-
-	/**
-	 * Holds the current page helper.
-	 *
-	 * @var Mockery\MockInterface|Current_Page_Helper
-	 */
-	private $current_page_helper;
-
-	/**
-	 * Holds the product helper.
-	 *
-	 * @var Mockery\MockInterface|Product_Helper
-	 */
-	private $product_helper;
-
-	/**
-	 * Sets up the test fixtures.
-	 *
-	 * @return void
-	 */
-	protected function set_up() {
-		parent::set_up();
-
-		$this->current_page_helper = Mockery::mock( Current_Page_Helper::class );
-		$this->product_helper      = Mockery::mock( Product_Helper::class );
-
-		$this->instance = new AI_Brand_Insights_Post_Launch(
-			$this->current_page_helper,
-			$this->product_helper,
-		);
-	}
-
-	/**
-	 * Tests if the needed attributes are set correctly.
-	 *
-	 * @covers ::__construct
-	 *
-	 * @return void
-	 */
-	public function test_constructor() {
-		$this->assertInstanceOf(
-			Current_Page_Helper::class,
-			$this->getPropertyValue( $this->instance, 'current_page_helper' ),
-		);
-		$this->assertInstanceOf(
-			Product_Helper::class,
-			$this->getPropertyValue( $this->instance, 'product_helper' ),
-		);
-	}
-
-	/**
-	 * Tests getting the ID.
-	 *
-	 * @covers ::get_id
-	 *
-	 * @return void
-	 */
-	public function test_get_name() {
-		$this->assertSame( 'ai-brand-insights-post-launch', $this->instance->get_id() );
-	}
-
-	/**
-	 * Tests getting the priority.
-	 *
-	 * @covers ::get_priority
-	 *
-	 * @return void
-	 */
-	public function test_get_priority() {
-		$this->assertSame( 20, $this->instance->get_priority() );
-	}
-
-	/**
-	 * Tests the conditional `should_show`.
-	 *
-	 * @covers ::should_show
-	 *
-	 * @dataProvider should_show_data
-	 *
-	 * @param bool $is_yoast_seo_page Whether on a Yoast SEO page.
-	 * @param bool $is_premium        Whether Premium is installed.
-	 * @param int  $is_premium_times  How many times the `is_premium` method is expected to be called.
-	 * @param bool $expected          The expected result.
-	 *
-	 * @return void
-	 */
-	public function test_should_show(
-		$is_yoast_seo_page,
-		$is_premium,
-		$is_premium_times,
-		$expected
-	) {
-		$this->current_page_helper->expects( 'is_yoast_seo_page' )
-			->once()
-			->withNoArgs()
-			->andReturn( $is_yoast_seo_page );
-		$this->product_helper->expects( 'is_premium' )
-			->times( $is_premium_times )
-			->withNoArgs()
-			->andReturn( $is_premium );
-
-		$this->assertSame( $expected, $this->instance->should_show() );
-	}
-
-	/**
-	 * Provides the data for `test_should_show`.
-	 *
-	 * @return array<string, array<string, bool|int>>
-	 */
-	public static function should_show_data() {
-		return [
-			'on a Yoast admin page, with Premium disabled' => [
-				'is_yoast_seo_page' => true,
-				'is_premium'        => false,
-				'is_premium_times'  => 1,
-				'expected'          => true,
-			],
-			'on a Yoast admin page, with Premium enabled' => [
-				'is_yoast_seo_page' => true,
-				'is_premium'        => true,
-				'is_premium_times'  => 1,
-				'expected'          => false,
-			],
-			'not on a Yoast admin page, with Premium disabled' => [
-				'is_yoast_seo_page' => false,
-				'is_premium'        => false,
-				'is_premium_times'  => 0,
-				'expected'          => false,
-			],
-			'not on a Yoast admin page, with Premium enabled' => [
-				'is_yoast_seo_page' => false,
-				'is_premium'        => true,
-				'is_premium_times'  => 0,
-				'expected'          => false,
-			],
-		];
-	}
-}
diff --git a/tests/WP/Inc/Utils_Test.php b/tests/WP/Inc/Utils_Test.php
index 658076f5a66..baa16436b4e 100644
--- a/tests/WP/Inc/Utils_Test.php
+++ b/tests/WP/Inc/Utils_Test.php
@@ -184,12 +184,12 @@ public function test_sanitize_url( $expected, $url_to_sanitize ) {
 	public static function sanitize_url_provider() {
 		return [
 			// Related issue: https://github.com/Yoast/wordpress-seo/issues/17099.
-			'with_at_sign_in_url_path'       => [
+			'with_at_sign_in_url_path' => [
 				'expected'        => 'https://example.org/test1/@test2',
 				'url_to_sanitize' => 'https://example.org/test1/@test2',
 			],
 			// Related issue: https://github.com/Yoast/wordpress-seo/issues/14476.
-			'with_encoded_url'               => [
+			'with_encoded_url' => [
 				'expected'        => 'https://example.com/%da%af%d8%b1%d9%88%d9%87-%d8%aa%d9%84%da%af%d8%b1%d8%a7%d9%85-%d8%b3%d8%a6%d9%88/',
 				'url_to_sanitize' => 'https://example.com/%da%af%d8%b1%d9%88%d9%87-%d8%aa%d9%84%da%af%d8%b1%d8%a7%d9%85-%d8%b3%d8%a6%d9%88/',
 			],
@@ -198,42 +198,56 @@ public static function sanitize_url_provider() {
 				'url_to_sanitize' => 'https://example.com/گروه-تلگرام-سئو',
 			],
 			// Related issue: https://github.com/Yoast/wordpress-seo/issues/7664.
-			'invalid_url'                    => [
+			'invalid_url' => [
 				'expected'        => '',
 				'url_to_sanitize' => 'WordPress',
 			],
-			'only_absolute_path'             => [
+			'only_absolute_path' => [
 				'expected'        => '/images/user-defined.png',
 				'url_to_sanitize' => '/images/user-defined.png',
 			],
-			'with_non_encoded_url'           => [
+			'with_non_encoded_url' => [
 				'expected'        => 'https://example.org/this-is-a-page',
 				'url_to_sanitize' => 'https://example.org/this-is-a-page',
 			],
-			'with_html_in_url'               => [
+			'with_html_in_url' => [
 				'expected'        => 'https://example.org/this-is-a-page',
 				'url_to_sanitize' => 'https://example.org/this-<strong>is-a-</strong>page',
 			],
-			'with_all_components_in_url'     => [
+			'with_all_components_in_url' => [
 				'expected'        => 'http://user:pass@example.com:8080/subdir/test1?mod%c3%a8le=num%c3%a9rique#compl%c3%a8tement',
 				'url_to_sanitize' => 'http://user:pass@example.com:8080/subdir/test1?modèle=numérique#complètement',
 			],
-			'with_invalid_utf8_in_url'       => [
+			'with_invalid_utf8_in_url' => [
 				'expected'        => 'https://example.com/',
 				'url_to_sanitize' => 'https://example.com/%e2%28%a1-aaaaaa',
 			],
-			'with_reserved_chars_in_url'     => [
+			'with_reserved_chars_in_url' => [
 				'expected'        => 'https://www.example.com/%c2%a9-2020/?email=test%40example.com&%c3%a2lt=%c2%a9%c3%b2d%c3%abs',
 				'url_to_sanitize' => 'https://www.example.com/©-2020/?email=test@example.com&âlt=©òdës',
 			],
-			'with_ipv6_in_url'               => [
+			'with_ipv6_in_url' => [
 				'expected'        => 'https://user:pass@[fc00::1]:8443/subdir/test1/?query=test2#fragment',
 				'url_to_sanitize' => 'https://user:pass@[fc00::1]:8443/subdir/test1/?query=test2#fragment',
 			],
-			'html_injection'                 => [
+			'html_injection' => [
 				'expected'        => 'https://onafterprintconsole.log0',
 				'url_to_sanitize' => 'https://" onafterprint="console.log(0)',
 			],
+			// Related issue: https://github.com/Yoast/wordpress-seo/issues/22903.
+			'with_non_encoded_chinese_url' => [
+				'expected'        => 'https://example.com/%e4%b8%ad%e6%96%87%e8%b7%af%e5%be%84',
+				'url_to_sanitize' => 'https://example.com/中文路径',
+			],
+			'with_mixed_encoded_and_unencoded_non_latin_url' => [
+				'expected'        => 'https://example.com/%d0%bf%d1%83%d1%82%d1%8c/%da%af%d8%b1%d9%88%d9%87',
+				'url_to_sanitize' => 'https://example.com/путь/%da%af%d8%b1%d9%88%d9%87',
+			],
+			// The pre-encoding must not touch the authority: non-Latin userinfo is encoded once, not double-encoded.
+			'with_non_latin_userinfo' => [
+				'expected'        => 'https://%c3%bcser:p%c3%a4ss@example.com/',
+				'url_to_sanitize' => 'https://üser:päss@example.com/',
+			],
 		];
 	}
 }
diff --git a/yarn.lock b/yarn.lock
index 7dd5dbad843..520df58f3b1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18179,9 +18179,9 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
 fast-uri@^3.0.1:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.1.2.tgz#8af3d4fc9d3e71b11572cc2673b514a7d1a8c8ec"
-  integrity sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.1.4.tgz#3b3daf9ce68f41f956df0b505132c0cfce9ec7af"
+  integrity sha512-8JnbkQ4juDyvYs4mgFGQqg4yCYtFDtUtmp2QIQq11ZZe5CFQ5wcqm1rqDgAh/QdMySuBnPzMUiJUNZG5N/AiQw==
 
 fast-xml-builder@^1.1.5:
   version "1.2.0"
@@ -20331,9 +20331,9 @@ homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1:
     parse-passwd "^1.0.0"
 
 hono@^4.11.4:
-  version "4.12.26"
-  resolved "https://registry.yarnpkg.com/hono/-/hono-4.12.26.tgz#450edfd64aad96cccc36829d63ec1430272e3ef8"
-  integrity sha512-uyZtpnYxM9CmQ7QsQknM4zN8EftNqhON1qYeIKM0Se67CCEe2c44xyGURwB0axX2fBDu1dqHrHAc1hmNT8ITkw==
+  version "4.12.31"
+  resolved "https://registry.yarnpkg.com/hono/-/hono-4.12.31.tgz#2ccaaf3ccd82db372f169c5b39c065c31ff36294"
+  integrity sha512-zJIHFrl6bq3RDd2YusFNCDlM8qUprxKswyi/OPzPyzKDdyBXDqWx8bZlZ7R+saTdSTatUmb3O7K4SspGPaEOQg==
 
 hooker@^0.2.3, hooker@~0.2.3:
   version "0.2.3"
@@ -34119,7 +34119,7 @@ zod@3.23.8:
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
   integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==
 
-zod@^3.24.1, zod@^3.24.2:
+zod@^3.24.1, zod@^3.24.2, zod@^3.25.76:
   version "3.25.76"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.25.76.tgz#26841c3f6fd22a6a2760e7ccb719179768471e34"
   integrity sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==

From b18959130c39908677e68f2e431722e20128e5a8 Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Mon, 27 Jul 2026 15:47:15 +0200
Subject: [PATCH 10/20] fix(bulk-editor): align CS threshold and fix tour
 comment nits

- Lower YOASTCS_THRESHOLD_ERRORS to 2385 to match the branch (the specific
  get_script_data() return type removes one MissingTraversableTypeHint error).
- Fix comment typos (exists, overlaid) and reword the spotlight CSS comment.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 composer.json                                                 | 2 +-
 css/src/bulk-editor-page.css                                  | 4 ++--
 .../js/src/bulk-editor/components/tour/use-tour-anchor.js     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/composer.json b/composer.json
index 6267384bbdb..c017fe5d843 100644
--- a/composer.json
+++ b/composer.json
@@ -111,7 +111,7 @@
 			"Yoast\\WP\\SEO\\Composer\\Actions::check_coding_standards"
 		],
 		"check-cs-thresholds": [
-			"@putenv YOASTCS_THRESHOLD_ERRORS=2386",
+			"@putenv YOASTCS_THRESHOLD_ERRORS=2385",
 			"@putenv YOASTCS_THRESHOLD_WARNINGS=254",
 			"Yoast\\WP\\SEO\\Composer\\Actions::check_cs_thresholds"
 		],
diff --git a/css/src/bulk-editor-page.css b/css/src/bulk-editor-page.css
index ef9b9506b30..5a395068f69 100644
--- a/css/src/bulk-editor-page.css
+++ b/css/src/bulk-editor-page.css
@@ -6,7 +6,7 @@
 		padding-left: 0 !important;
 	}
 
-	/* Keep the admin menu above the guided-tour spotlight dim so it isn't overlayed. */
+	/* Keep the admin menu above the guided-tour spotlight dim so it isn't overlaid. */
 	#adminmenuback {
 		z-index: 11;
 	}
@@ -113,7 +113,7 @@
 	@apply yst-outline-none;
 }
 
-/* The in-app guided-tour. It is decorative only so prevents interaction */
+/* The guided-tour spotlight overlay is decorative only; a separate backdrop blocks interaction, so it ignores pointer events. */
 .yst-root .yst-tour-spotlight {
 	pointer-events: none;
 }
diff --git a/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js b/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
index 57410d70cae..875d965fe69 100644
--- a/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
+++ b/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
@@ -39,7 +39,7 @@ const findVisibleTarget = ( selector ) =>
 	[ ...document.querySelectorAll( selector ) ].find( ( element ) => element.offsetParent !== null ) ?? null;
 
 /**
- * Whether an element exsists and is visible.
+ * Whether an element exists and is visible.
  *
  * @param {HTMLElement} element The element.
  *

From dca3457439a013a17f75ae33c5b840a7f361e809 Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Mon, 27 Jul 2026 16:03:11 +0200
Subject: [PATCH 11/20] fix(bulk-editor): tighten single-region tour spotlight
 to uniform 6px padding

The appearance-tabs step looked too loose (8px sides + 24px right). Use a small
uniform padding so the spotlight hugs the target and the popover sits closer,
matching the design.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/bulk-editor/components/tour/use-tour-anchor.js |  4 ++--
 .../js/tests/bulk-editor/tour/use-tour-anchor.test.js  | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js b/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
index 875d965fe69..100242625eb 100644
--- a/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
+++ b/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
@@ -5,8 +5,8 @@ import { useState, useEffect } from "@wordpress/element";
 const TARGET_WAIT_MS = 2000;
 const TARGET_POLL_MS = 100;
 
-// Space (px) around a single-region spotlight. The right side gets extra room for the gap to the popover.
-const SPOTLIGHT_PADDING = { top: 8, right: 24, bottom: 8, left: 8 };
+// Space (px) around a single-region spotlight so it surrounds the target without looking clipped.
+const SPOTLIGHT_PADDING = { top: 6, right: 6, bottom: 6, left: 6 };
 // Corner radius (px) for a single-region cut-out, which covers an area rather than one styled control.
 const SINGLE_REGION_RADIUS = 8;
 
diff --git a/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js b/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
index 48cfe228951..f49ae634295 100644
--- a/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
+++ b/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
@@ -74,9 +74,9 @@ describe( "useTourAnchor", () => {
 
 		const { result } = renderHook( () => useTourAnchor( "[data-tour-id=\"x\"]", true ) );
 
-		// The target rect grows by the spotlight padding: 8 all round plus an extra 24 on the right.
-		expect( result.current.spotlight.rects ).toEqual( [ { top: 2, left: 12, width: 132, height: 46, rx: 8 } ] );
-		expect( result.current.spotlight.bounds ).toEqual( { top: "2px", left: "12px", width: "132px", height: "46px" } );
+		// The target rect grows by the uniform 6px spotlight padding on every side.
+		expect( result.current.spotlight.rects ).toEqual( [ { top: 4, left: 14, width: 112, height: 42, rx: 8 } ] );
+		expect( result.current.spotlight.bounds ).toEqual( { top: "4px", left: "14px", width: "112px", height: "42px" } );
 		expect( result.current.spotlight.viewport ).toEqual( { width: window.innerWidth, height: window.innerHeight } );
 		expect( target.scrollIntoView ).toHaveBeenCalled();
 	} );
@@ -88,8 +88,8 @@ describe( "useTourAnchor", () => {
 
 		const { result } = renderHook( () => useTourAnchor( "[data-tour-id=\"x\"]", true, { endSelector: "[data-tour-highlight-end]" } ) );
 
-		// Height spans from the padded top (2) to the end element's bottom (60), not the target's own 90-tall rect.
-		expect( result.current.spotlight.rects ).toEqual( [ { top: 2, left: 12, width: 132, height: 58, rx: 8 } ] );
+		// Height spans from the padded top (4) to the end element's bottom (60), not the target's own 90-tall rect.
+		expect( result.current.spotlight.rects ).toEqual( [ { top: 4, left: 14, width: 112, height: 56, rx: 8 } ] );
 	} );
 
 	it( "cuts one rectangle per visible child with perChild", () => {

From c8312b5e5b85c93e3d73863e9ce2dbd2ccce383b Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Tue, 28 Jul 2026 13:22:49 +0200
Subject: [PATCH 12/20] Enhance guided tour functionality with RTL support and
 child selection

---
 css/src/bulk-editor-page.css                  |  13 ++
 .../components/tour/bulk-editor-tour.js       |   1 +
 .../bulk-editor/components/tour/tour-card.js  |  20 +-
 .../bulk-editor/components/tour/tour-steps.js |   1 +
 .../components/tour/use-tour-anchor.js        | 173 +++++++++++++-----
 .../bulk-editor/tour/use-tour-anchor.test.js  |  14 ++
 6 files changed, 163 insertions(+), 59 deletions(-)

diff --git a/css/src/bulk-editor-page.css b/css/src/bulk-editor-page.css
index 5a395068f69..2b1ccf3f559 100644
--- a/css/src/bulk-editor-page.css
+++ b/css/src/bulk-editor-page.css
@@ -117,3 +117,16 @@
 .yst-root .yst-tour-spotlight {
 	pointer-events: none;
 }
+
+/* In RTL. */
+.yst-bulk-editor-tour-card.yst-popover--right {
+	margin-inline-start: 1rem;
+}
+
+[dir="rtl"] .yst-bulk-editor-tour-card.yst-popover--right::before {
+	inset-inline-start: auto !important;
+	inset-inline-end: 100% !important;
+	transform: translateY(-50%) !important;
+	border-inline-start: 14px solid transparent !important;
+	border-inline-end: 14px solid white !important;
+}
diff --git a/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js b/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
index d737c954e12..6c229d68762 100644
--- a/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
+++ b/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
@@ -58,6 +58,7 @@ export const BulkEditorTour = ( { onSelectAll, onDeselectAll, hasSelection } ) =
 	const { spotlight } = useTourAnchor( `[data-tour-id="${ step.tourId }"]`, isActive, {
 		endSelector: step.highlightEndSelector,
 		perChild: step.highlightChildren,
+		childSelector: step.highlightChildrenSelector,
 	} );
 
 	const finish = useCallback( () => {
diff --git a/packages/js/src/bulk-editor/components/tour/tour-card.js b/packages/js/src/bulk-editor/components/tour/tour-card.js
index a0c0f36c9c6..42ae672f8ef 100644
--- a/packages/js/src/bulk-editor/components/tour/tour-card.js
+++ b/packages/js/src/bulk-editor/components/tour/tour-card.js
@@ -90,7 +90,7 @@ export const TourCard = ( {
 		isVisible={ true }
 		setIsVisible={ handleVisibilityChange }
 		position={ position }
-		className={ className }
+		className={ `yst-bulk-editor-tour-card ${ className }`.trim() }
 		onKeyDown={ handleKeyDown }
 	>
 		<>
@@ -99,23 +99,25 @@ export const TourCard = ( {
 					<YoastIcon className="yst-w-5 yst-h-5 yst-fill-primary-500" { ...svgAriaProps } />
 				</div>
 				<div className="yst-flex-grow">
-					<Popover.Title id={ `${ id }-title` } as="h3">
+					<Popover.Title id={ `${ id }-title` } as="h3" style={ { textAlign: "start" } }>
 						{ title }
 					</Popover.Title>
 				</div>
 				<Popover.CloseButton screenReaderLabel={ __( "Close the tour", "wordpress-seo" ) } />
 			</div>
-			<Popover.Content id={ `${ id }-content` } className="yst-font-normal yst-ms-8 yst-me-5 yst-mt-1">
+			<Popover.Content id={ `${ id }-content` } className="yst-font-normal yst-ms-8 yst-me-5 yst-mt-1" style={ { textAlign: "start" } }>
 				{ content }
 			</Popover.Content>
 			<div className="yst-flex yst-gap-3 yst-justify-between yst-items-center yst-mt-3">
 				<span className="yst-ms-8 yst-text-slate-500">
-					{ sprintf(
-						/* translators: %1$s is the current step number, %2$s is the total number of steps. */
-						__( "%1$s / %2$s", "wordpress-seo" ),
-						currentStep,
-						totalSteps
-					) }
+					<span dir="ltr">
+						{ sprintf(
+							/* translators: %1$s is the current step number, %2$s is the total number of steps. */
+							__( "%1$s / %2$s", "wordpress-seo" ),
+							currentStep,
+							totalSteps
+						) }
+					</span>
 				</span>
 				<div className="yst-flex yst-gap-3 yst-items-center">
 					{ onBack && <Button variant="tertiary" onClick={ onBack }>
diff --git a/packages/js/src/bulk-editor/components/tour/tour-steps.js b/packages/js/src/bulk-editor/components/tour/tour-steps.js
index 225d20e549d..f5eaf524325 100644
--- a/packages/js/src/bulk-editor/components/tour/tour-steps.js
+++ b/packages/js/src/bulk-editor/components/tour/tour-steps.js
@@ -36,6 +36,7 @@ export const getTourSteps = () => [
 		id: "bulk-editor-tour-generate",
 		tourId: "generate-actions",
 		highlightChildren: true,
+		highlightChildrenSelector: "button",
 		position: "right",
 		requiresSelection: true,
 		title: __( "Get SEO-friendly options at scale", "wordpress-seo" ),
diff --git a/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js b/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
index 100242625eb..449464b50c3 100644
--- a/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
+++ b/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
@@ -5,6 +5,10 @@ import { useState, useEffect } from "@wordpress/element";
 const TARGET_WAIT_MS = 2000;
 const TARGET_POLL_MS = 100;
 
+// How many animation frames to keep re-measuring after the tour opens, so a target that shifts while the page settles
+// is followed until it stops moving, then left to the scroll/resize/ResizeObserver listeners.
+const SETTLE_MAX_FRAMES = 40;
+
 // Space (px) around a single-region spotlight so it surrounds the target without looking clipped.
 const SPOTLIGHT_PADDING = { top: 6, right: 6, bottom: 6, left: 6 };
 // Corner radius (px) for a single-region cut-out, which covers an area rather than one styled control.
@@ -47,6 +51,74 @@ const findVisibleTarget = ( selector ) =>
  */
 const isVisible = ( element ) => element.offsetParent !== null && element.getBoundingClientRect().width > 0;
 
+/**
+ * Measures the spotlight rectangles in viewport coordinates for a target.
+ *
+ * @param {HTMLElement} element       The target element.
+ * @param {boolean}     perChild      Whether to spotlight per matching child rather than the whole target.
+ * @param {?string}     childSelector With `perChild`, the descendants to spotlight; otherwise every direct child.
+ * @param {?string}     endSelector   For a single-region spotlight, the element whose bottom clamps its height.
+ *
+ * @returns {Array<Object>} The rectangles ({ top, left, width, height, rx }).
+ */
+const measureRects = ( element, perChild, childSelector, endSelector ) => {
+	if ( perChild ) {
+		const children = childSelector ? [ ...element.querySelectorAll( childSelector ) ] : [ ...element.children ];
+		return children.filter( isVisible ).map( ( child ) => {
+			const childRect = child.getBoundingClientRect();
+			return { top: childRect.top, left: childRect.left, width: childRect.width, height: childRect.height, rx: cornerRadius( child ) };
+		} );
+	}
+
+	const rect = element.getBoundingClientRect();
+	const endElement = endSelector ? element.querySelector( endSelector ) : null;
+	const top = rect.top - SPOTLIGHT_PADDING.top;
+	const bottom = endElement ? endElement.getBoundingClientRect().bottom : rect.bottom + SPOTLIGHT_PADDING.bottom;
+	return [ {
+		top,
+		left: rect.left - SPOTLIGHT_PADDING.left,
+		width: rect.width + SPOTLIGHT_PADDING.left + SPOTLIGHT_PADDING.right,
+		height: bottom - top,
+		rx: SINGLE_REGION_RADIUS,
+	} ];
+};
+
+/**
+ * Re-bases rects onto the fixed spotlight overlay. Its origin is not always the viewport's (an RTL document scrollbar
+ * shifts a fixed element's left edge), so subtracting it keeps the cut-outs and card aligned with their targets, which
+ * were measured in viewport coordinates. A no-op when the overlay sits at the origin (the LTR case).
+ *
+ * @param {Array<Object>} rects The rectangles in viewport coordinates.
+ *
+ * @returns {Array<Object>} The rectangles relative to the overlay.
+ */
+const rebaseToOverlay = ( rects ) => {
+	const overlay = document.querySelector( ".yst-tour-spotlight" );
+	if ( ! overlay ) {
+		return rects;
+	}
+	const { left, top } = overlay.getBoundingClientRect();
+	if ( left === 0 && top === 0 ) {
+		return rects;
+	}
+	return rects.map( ( rect ) => ( { ...rect, left: rect.left - left, top: rect.top - top } ) );
+};
+
+/**
+ * The bounding box enclosing every rectangle.
+ *
+ * @param {Array<Object>} rects The rectangles.
+ *
+ * @returns {{top: string, left: string, width: string, height: string}} The bounds.
+ */
+const boundsOf = ( rects ) => {
+	const minLeft = Math.min( ...rects.map( ( rect ) => rect.left ) );
+	const minTop = Math.min( ...rects.map( ( rect ) => rect.top ) );
+	const maxRight = Math.max( ...rects.map( ( rect ) => rect.left + rect.width ) );
+	const maxBottom = Math.max( ...rects.map( ( rect ) => rect.top + rect.height ) );
+	return { top: `${ minTop }px`, left: `${ minLeft }px`, width: `${ maxRight - minLeft }px`, height: `${ maxBottom - minTop }px` };
+};
+
 /**
  * Tracks a target element and returns the spotlight rectangles.
  *
@@ -55,10 +127,12 @@ const isVisible = ( element ) => element.offsetParent !== null && element.getBou
  * @param {Object}  [options]      Extra options.
  * @param {string}  [options.endSelector] Selector, resolved within the target, whose bottom clamps a single-region spotlight.
  * @param {boolean} [options.perChild]    Whether to spotlight per visible direct child instead of one for the target.
+ * @param {string}  [options.childSelector] With `perChild`, spotlight the matching descendants instead of every direct
+ *                                          child, so slot-filled siblings (e.g. Premium's AI usage counter) stay dimmed.
  *
  * @returns {{spotlight: {rects: Array<Object>, bounds: Object, viewport: Object}|null}} The spotlight geometry, or null.
  */
-export const useTourAnchor = ( targetSelector, isActive, { endSelector = null, perChild = false } = {} ) => {
+export const useTourAnchor = ( targetSelector, isActive, { endSelector = null, perChild = false, childSelector = null } = {} ) => {
 	const [ spotlight, setSpotlight ] = useState( null );
 
 	useEffect( () => {
@@ -73,70 +147,69 @@ export const useTourAnchor = ( targetSelector, isActive, { endSelector = null, p
 			// Instant, minimal scroll: only nudge the target into view if it is off-screen.
 			element.scrollIntoView( { block: "nearest" } );
 
+			// The JSON of the last rendered spotlight; the frequent re-measures only re-render when it actually changed.
+			let renderedKey = "";
+
 			const updatePosition = () => {
-				let rects;
-				if ( perChild ) {
-					rects = [ ...element.children ].filter( isVisible ).map( ( child ) => {
-						const rect = child.getBoundingClientRect();
-						return {
-							top: rect.top,
-							left: rect.left,
-							width: rect.width,
-							height: rect.height,
-							rx: cornerRadius( child ),
-						};
-					} );
-				} else {
-					const rect = element.getBoundingClientRect();
-					// Clamp to the end element's bottom when present, so the rest of the target stays dimmed.
-					const endElement = endSelector ? element.querySelector( endSelector ) : null;
-					const top = rect.top - SPOTLIGHT_PADDING.top;
-					const bottom = endElement
-						? endElement.getBoundingClientRect().bottom
-						: rect.bottom + SPOTLIGHT_PADDING.bottom;
-					rects = [ {
-						top,
-						left: rect.left - SPOTLIGHT_PADDING.left,
-						width: rect.width + SPOTLIGHT_PADDING.left + SPOTLIGHT_PADDING.right,
-						height: bottom - top,
-						rx: SINGLE_REGION_RADIUS,
-					} ];
-				}
+				const rects = measureRects( element, perChild, childSelector, endSelector );
 
-				// No visible children yet (e.g. the generate AI actions row before it mounts): render nothing rather than an
-				// empty, fully-dimmed overlay.
+				// No visible children yet (e.g. the generate AI actions row before it mounts): render nothing rather than
+				// an empty, fully-dimmed overlay.
 				if ( rects.length === 0 ) {
-					setSpotlight( null );
+					if ( renderedKey !== "none" ) {
+						renderedKey = "none";
+						setSpotlight( null );
+					}
 					return;
 				}
 
-				const minLeft = Math.min( ...rects.map( ( rect ) => rect.left ) );
-				const minTop = Math.min( ...rects.map( ( rect ) => rect.top ) );
-				const maxRight = Math.max( ...rects.map( ( rect ) => rect.left + rect.width ) );
-				const maxBottom = Math.max( ...rects.map( ( rect ) => rect.top + rect.height ) );
-
-				setSpotlight( {
-					rects,
-					bounds: {
-						top: `${ minTop }px`,
-						left: `${ minLeft }px`,
-						width: `${ maxRight - minLeft }px`,
-						height: `${ maxBottom - minTop }px`,
-					},
+				const overlaid = rebaseToOverlay( rects );
+				const next = {
+					rects: overlaid,
+					bounds: boundsOf( overlaid ),
 					viewport: { width: window.innerWidth, height: window.innerHeight },
-				} );
+				};
+				const key = JSON.stringify( next );
+				if ( key !== renderedKey ) {
+					renderedKey = key;
+					setSpotlight( next );
+				}
 			};
 			updatePosition();
 
 			window.addEventListener( "scroll", updatePosition, true );
 			window.addEventListener( "resize", updatePosition );
-			const observer = new ResizeObserver( updatePosition );
-			observer.observe( element );
+			const resizeObserver = new ResizeObserver( updatePosition );
+			resizeObserver.observe( element );
+
+			// Premium fills the generate step's slot asynchronously: its AI usage counter arrives after a fetch and, in
+			// RTL, shifts the buttons sideways without changing the container's own size — which the ResizeObserver would
+			// miss. Watch the subtree so an added/updated node re-measures the (now moved) buttons.
+			const mutationObserver = new MutationObserver( updatePosition );
+			mutationObserver.observe( element, { childList: true, subtree: true, attributes: true, characterData: true } );
+
+			// The target can also shift while the page first settles (sidebar/table layout, fonts, the RTL scrollbar),
+			// before any observer fires. Re-measure each frame for a short, capped window; the signature guard keeps this
+			// from re-rendering when nothing changed.
+			let settleFrame = null;
+			let settleTicks = 0;
+			const settle = () => {
+				updatePosition();
+				settleTicks += 1;
+				if ( settleTicks < SETTLE_MAX_FRAMES ) {
+					settleFrame = requestAnimationFrame( settle );
+				}
+			};
+			settleFrame = requestAnimationFrame( settle );
 
 			cleanup = () => {
+				if ( settleFrame !== null ) {
+					cancelAnimationFrame( settleFrame );
+				}
 				window.removeEventListener( "scroll", updatePosition, true );
 				window.removeEventListener( "resize", updatePosition );
-				observer.disconnect();
+				resizeObserver.disconnect();
+				mutationObserver.disconnect();
 			};
 		};
 
@@ -164,7 +237,7 @@ export const useTourAnchor = ( targetSelector, isActive, { endSelector = null, p
 			}
 			setSpotlight( null );
 		};
-	}, [ targetSelector, isActive, endSelector, perChild ] );
+	}, [ targetSelector, isActive, endSelector, perChild, childSelector ] );
 
 	return { spotlight };
 };
diff --git a/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js b/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
index f49ae634295..c38a53c274d 100644
--- a/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
+++ b/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
@@ -108,6 +108,20 @@ describe( "useTourAnchor", () => {
 		expect( result.current.spotlight.bounds ).toEqual( { top: "10px", left: "22px", width: "118px", height: "28px" } );
 	} );
 
+	it( "cuts one rectangle per matching descendant with childSelector, leaving siblings dimmed", () => {
+		const target = addTarget( { top: 10, left: 20, width: 300, height: 30 } );
+		// A non-button sibling (e.g. Premium's AI usage counter) that must stay dimmed.
+		addChild( target, { top: 12, left: 22, width: 40, height: 16 } );
+		const button = document.createElement( "button" );
+		target.appendChild( button );
+		stubLayout( button, { top: 10, left: 100, width: 80, height: 28 } );
+
+		const { result } = renderHook( () => useTourAnchor( "[data-tour-id=\"x\"]", true, { perChild: true, childSelector: "button" } ) );
+
+		// Only the button is cut out; the sibling counter keeps no hole.
+		expect( result.current.spotlight.rects ).toEqual( [ { top: 10, left: 100, width: 80, height: 28, rx: 0 } ] );
+	} );
+
 	it( "returns no spotlight for perChild when the target has no visible children", () => {
 		addTarget();
 

From 21f648933665ffc3065d559315d331d9f2531518 Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Tue, 28 Jul 2026 13:45:47 +0200
Subject: [PATCH 13/20] Update return type in get_script_data() documentation

---
 src/bulk-editor/user-interface/bulk-editor-integration.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/bulk-editor/user-interface/bulk-editor-integration.php b/src/bulk-editor/user-interface/bulk-editor-integration.php
index 2e3cd0d1163..edad4484cc0 100644
--- a/src/bulk-editor/user-interface/bulk-editor-integration.php
+++ b/src/bulk-editor/user-interface/bulk-editor-integration.php
@@ -217,7 +217,7 @@ public function enqueue_assets() {
 	/**
 	 * Creates the script data.
 	 *
-	 * @return array<string, string|array<string, string|bool|array<string, string>>> The script data.
+	 * @return array<string, string|array<string, string|bool>|array<array<string, string>>> The script data.
 	 */
 	public function get_script_data() {
 		return [

From 43bac2ecc3b5c60c1172c2a265dfa0caca289f25 Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Tue, 28 Jul 2026 14:03:26 +0200
Subject: [PATCH 14/20] Enhance bulk editor tour functionality by adding target
 missing detection

---
 .../components/tour/bulk-editor-tour.js       | 10 ++++-
 .../components/tour/use-tour-anchor.js        | 15 ++++++-
 .../bulk-editor/tour/bulk-editor-tour.test.js | 45 ++++++++++++++-----
 .../bulk-editor/tour/use-tour-anchor.test.js  | 21 ++++++++-
 4 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js b/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
index 6c229d68762..585e51328cb 100644
--- a/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
+++ b/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
@@ -55,7 +55,7 @@ export const BulkEditorTour = ( { onSelectAll, onDeselectAll, hasSelection } ) =
 		}
 	}, [ isActive, step, hasSelection, onSelectAll ] );
 
-	const { spotlight } = useTourAnchor( `[data-tour-id="${ step.tourId }"]`, isActive, {
+	const { spotlight, targetMissing } = useTourAnchor( `[data-tour-id="${ step.tourId }"]`, isActive, {
 		endSelector: step.highlightEndSelector,
 		perChild: step.highlightChildren,
 		childSelector: step.highlightChildrenSelector,
@@ -81,6 +81,14 @@ export const BulkEditorTour = ( { onSelectAll, onDeselectAll, hasSelection } ) =
 
 	const onBack = useCallback( () => setStepIndex( ( index ) => Math.max( 0, index - 1 ) ), [] );
 
+	// If the active step's target never appears (e.g. the generate step when there are no selectable rows),
+	// advance past it instead of leaving the tour invisible-but-active.
+	useEffect( () => {
+		if ( isActive && targetMissing ) {
+			onNext();
+		}
+	}, [ isActive, targetMissing, onNext ] );
+
 	if ( ! isActive || ! spotlight ) {
 		return null;
 	}
diff --git a/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js b/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
index 449464b50c3..df8a920bd2f 100644
--- a/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
+++ b/packages/js/src/bulk-editor/components/tour/use-tour-anchor.js
@@ -130,10 +130,19 @@ const boundsOf = ( rects ) => {
  * @param {string}  [options.childSelector] With `perChild`, spotlight the matching descendants instead of every direct
  *                                          child, so slot-filled siblings (e.g. Premium's AI usage counter) stay dimmed.
  *
- * @returns {{spotlight: {rects: Array<Object>, bounds: Object, viewport: Object}|null}} The spotlight geometry, or null.
+ * @returns {{spotlight: ({rects: Array<Object>, bounds: Object, viewport: Object}|null), targetMissing: boolean}} The
+ *          spotlight area (or null), and whether the target could not be found before the poll gave up.
  */
 export const useTourAnchor = ( targetSelector, isActive, { endSelector = null, perChild = false, childSelector = null } = {} ) => {
 	const [ spotlight, setSpotlight ] = useState( null );
+	const [ targetMissing, setTargetMissing ] = useState( false );
+	// Reset the flag synchronously when the step changes, so a stale `true` from the previous step can't make the caller
+	// skip the new one before the effect below re-runs.
+	const [ trackedSelector, setTrackedSelector ] = useState( targetSelector );
+	if ( targetSelector !== trackedSelector ) {
+		setTrackedSelector( targetSelector );
+		setTargetMissing( false );
+	}
 
 	useEffect( () => {
 		if ( ! isActive ) {
@@ -224,6 +233,8 @@ export const useTourAnchor = ( targetSelector, isActive, { endSelector = null, p
 			}
 			if ( Date.now() < deadline ) {
 				pollTimer = setTimeout( tryAttach, TARGET_POLL_MS );
+			} else {
+				setTargetMissing( true );
 			}
 		};
 		tryAttach();
@@ -239,5 +250,5 @@ export const useTourAnchor = ( targetSelector, isActive, { endSelector = null, p
 		};
 	}, [ targetSelector, isActive, endSelector, perChild, childSelector ] );
 
-	return { spotlight };
+	return { spotlight, targetMissing };
 };
diff --git a/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js b/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
index 7a8022471c2..7cc82c0cff9 100644
--- a/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
+++ b/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
@@ -14,26 +14,27 @@ jest.mock( "@wordpress/data", () => ( {
 	useDispatch: () => ( { setOptInNotificationSeen: mockSetOptInNotificationSeen } ),
 } ) );
 
+const mockAnchor = { spotlight: null, targetMissing: false };
+const defaultSpotlight = () => ( {
+	rects: [ { top: 0, left: 0, width: 10, height: 10 } ],
+	bounds: { top: "0px", left: "0px", width: "10px", height: "10px" },
+	viewport: { width: 1024, height: 768 },
+} );
+
 jest.mock( "../../../src/bulk-editor/components/tour/use-tour-anchor", () => ( {
-	useTourAnchor: () => ( {
-		spotlight: {
-			rects: [ { top: 0, left: 0, width: 10, height: 10 } ],
-			bounds: { top: "0px", left: "0px", width: "10px", height: "10px" },
-			viewport: { width: 1024, height: 768 },
-		},
-	} ),
+	useTourAnchor: () => mockAnchor,
 } ) );
 
 /**
- * Renders the tour and returns the select/deselect spies.
+ * Renders the tour and returns the select/deselect spies plus a re-render helper.
  *
  * @param {Object} [props] Prop overrides.
- * @returns {{onSelectAll: jest.Mock, onDeselectAll: jest.Mock}} The spies.
+ * @returns {{onSelectAll: jest.Mock, onDeselectAll: jest.Mock, rerender: Function}} The spies and a re-render helper.
  */
 const renderTour = ( props = {} ) => {
 	const onSelectAll = jest.fn();
 	const onDeselectAll = jest.fn();
-	render(
+	const makeElement = () => (
 		<BulkEditorTour
 			onSelectAll={ onSelectAll }
 			onDeselectAll={ onDeselectAll }
@@ -41,7 +42,9 @@ const renderTour = ( props = {} ) => {
 			{ ...props }
 		/>
 	);
-	return { onSelectAll, onDeselectAll };
+	const view = render( makeElement() );
+	// A fresh element each time, so React actually re-renders (it bails out on an identical element reference).
+	return { onSelectAll, onDeselectAll, rerender: () => view.rerender( makeElement() ) };
 };
 
 const clickNext = () => fireEvent.click( screen.getByRole( "button", { name: /Next/ } ) );
@@ -51,6 +54,8 @@ describe( "BulkEditorTour", () => {
 		jest.clearAllMocks();
 		storeState.isSeen = false;
 		storeState.isAiEnabled = true;
+		mockAnchor.spotlight = defaultSpotlight();
+		mockAnchor.targetMissing = false;
 	} );
 
 	it( "renders nothing once the tour has been seen", () => {
@@ -109,6 +114,24 @@ describe( "BulkEditorTour", () => {
 		expect( onSelectAll ).not.toHaveBeenCalled();
 	} );
 
+	it( "finishes and marks the tour seen if the last step's target never appears", () => {
+		const { onDeselectAll, rerender } = renderTour( { hasSelection: false } );
+
+		// Reach the generate step (step 4).
+		clickNext();
+		clickNext();
+		clickNext();
+
+		// Its target never shows (e.g. nothing is selectable), so the anchor reports it missing.
+		mockAnchor.spotlight = null;
+		mockAnchor.targetMissing = true;
+		rerender();
+
+		expect( mockSetOptInNotificationSeen ).toHaveBeenCalledWith( TOUR_OPT_IN_KEY );
+		expect( onDeselectAll ).toHaveBeenCalledTimes( 1 );
+		expect( screen.queryByRole( "dialog" ) ).not.toBeInTheDocument();
+	} );
+
 	it( "marks the tour seen and clears its own selection on finish", () => {
 		const { onDeselectAll } = renderTour( { hasSelection: false } );
 
diff --git a/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js b/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
index c38a53c274d..1ab14483884 100644
--- a/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
+++ b/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react";
+import { act, renderHook } from "@testing-library/react";
 import { useTourAnchor } from "../../../src/bulk-editor/components/tour/use-tour-anchor";
 
 let resizeObserverDisconnect;
@@ -146,4 +146,23 @@ describe( "useTourAnchor", () => {
 
 		expect( result.current.spotlight ).toBeNull();
 	} );
+
+	it( "flags the target as missing once the poll gives up", () => {
+		jest.useFakeTimers();
+		try {
+			document.body.innerHTML = "";
+
+			const { result } = renderHook( () => useTourAnchor( "[data-tour-id=\"missing\"]", true ) );
+			expect( result.current.targetMissing ).toBe( false );
+
+			// Advance past the 2s poll window so it stops looking and reports the target missing.
+			act( () => {
+				jest.advanceTimersByTime( 2500 );
+			} );
+
+			expect( result.current.targetMissing ).toBe( true );
+		} finally {
+			jest.useRealTimers();
+		}
+	} );
 } );

From fb75c6c06cea11fd7307a305743e196119439e7a Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Tue, 28 Jul 2026 14:13:24 +0200
Subject: [PATCH 15/20] Registers hideOptInNotification to the store and
 adjusts tests

---
 .../js/src/bulk-editor/components/tour/bulk-editor-tour.js  | 6 ++++--
 packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js | 4 +++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js b/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
index 585e51328cb..f541dc88078 100644
--- a/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
+++ b/packages/js/src/bulk-editor/components/tour/bulk-editor-tour.js
@@ -31,7 +31,7 @@ export const BulkEditorTour = ( { onSelectAll, onDeselectAll, hasSelection } ) =
 			isAiEnabled: store.selectPreference( "isAiEnabled", false ),
 		};
 	}, [] );
-	const { setOptInNotificationSeen } = useDispatch( STORE_NAME );
+	const { setOptInNotificationSeen, hideOptInNotification } = useDispatch( STORE_NAME );
 
 	// The generate step's target only exists when AI is enabled, so drop it otherwise.
 	const steps = useMemo(
@@ -67,8 +67,10 @@ export const BulkEditorTour = ( { onSelectAll, onDeselectAll, hasSelection } ) =
 			didAutoSelect.current = false;
 		}
 		setIsDismissed( true );
+		// Persist to the server and update local state, so the tour stays gone this session and on reload.
 		setOptInNotificationSeen( TOUR_OPT_IN_KEY );
-	}, [ onDeselectAll, setOptInNotificationSeen ] );
+		hideOptInNotification( TOUR_OPT_IN_KEY );
+	}, [ onDeselectAll, setOptInNotificationSeen, hideOptInNotification ] );
 
 	const onNext = useCallback( () => {
 		// finish() dispatches store updates, so it runs from the event handler, not inside a state updater.
diff --git a/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js b/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
index 7cc82c0cff9..01625a01275 100644
--- a/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
+++ b/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
@@ -5,13 +5,14 @@ import { TOUR_OPT_IN_KEY } from "../../../src/bulk-editor/constants";
 // Controls the mocked store reads per test.
 const storeState = { isSeen: false, isAiEnabled: true };
 const mockSetOptInNotificationSeen = jest.fn();
+const mockHideOptInNotification = jest.fn();
 
 jest.mock( "@wordpress/data", () => ( {
 	useSelect: ( mapSelect ) => mapSelect( () => ( {
 		selectIsOptInNotificationSeen: () => storeState.isSeen,
 		selectPreference: ( key, fallback ) => ( key === "isAiEnabled" ? storeState.isAiEnabled : fallback ),
 	} ) ),
-	useDispatch: () => ( { setOptInNotificationSeen: mockSetOptInNotificationSeen } ),
+	useDispatch: () => ( { setOptInNotificationSeen: mockSetOptInNotificationSeen, hideOptInNotification: mockHideOptInNotification } ),
 } ) );
 
 const mockAnchor = { spotlight: null, targetMissing: false };
@@ -141,6 +142,7 @@ describe( "BulkEditorTour", () => {
 		fireEvent.click( screen.getByRole( "button", { name: "Got it!" } ) );
 
 		expect( mockSetOptInNotificationSeen ).toHaveBeenCalledWith( TOUR_OPT_IN_KEY );
+		expect( mockHideOptInNotification ).toHaveBeenCalledWith( TOUR_OPT_IN_KEY );
 		expect( onDeselectAll ).toHaveBeenCalledTimes( 1 );
 		expect( screen.queryByRole( "dialog" ) ).not.toBeInTheDocument();
 	} );

From 0a28560e5b2cd4e5909ff4cfa4d8b1b9276e9ea9 Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Wed, 29 Jul 2026 13:47:35 +0200
Subject: [PATCH 16/20] Apply review comments

---
 .../bulk-editor/components/bulk-editor-nav.js | 17 +++++------------
 .../bulk-editor-tour-notification.js          |  4 +---
 .../bulk-editor/tour/use-tour-anchor.test.js  | 19 +++++++++++++++++++
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/js/src/bulk-editor/components/bulk-editor-nav.js b/packages/js/src/bulk-editor/components/bulk-editor-nav.js
index de37fd00017..cc26edb6c8f 100644
--- a/packages/js/src/bulk-editor/components/bulk-editor-nav.js
+++ b/packages/js/src/bulk-editor/components/bulk-editor-nav.js
@@ -116,18 +116,11 @@ export const BulkEditorNavMenu = ( {
 } ) => {
 	const hiddenCount = contentTypes.length - visibleLimit;
 
-	// The in-app guided-tour covers only the leading built-in content types (Posts, Pages),
-	// never commerce or custom types.
-	const highlightEndIndex = ( () => {
-		let end = -1;
-		for ( let index = 0; index < contentTypes.length && index < 2; index++ ) {
-			if ( ! BUILT_IN_CONTENT_TYPES.includes( contentTypes[ index ].id ) ) {
-				break;
-			}
-			end = index;
-		}
-		return end;
-	} )();
+	// The in-app guided tour highlights only the built-in content types (Posts, Pages).
+	// Post/page are always on top of the registration order.
+	const highlightEndIndex = contentTypes
+		.slice( 0, 2 )
+		.reduce( ( end, contentType, index ) => ( BUILT_IN_CONTENT_TYPES.includes( contentType.id ) ? index : end ), -1 );
 
 	const showMoreLabel = sprintf(
 		/* translators: %d expands to the number of additional content types. */
diff --git a/packages/js/src/general/components/bulk-editor-tour-notification.js b/packages/js/src/general/components/bulk-editor-tour-notification.js
index fbb7a2b4b10..db87cd5007d 100644
--- a/packages/js/src/general/components/bulk-editor-tour-notification.js
+++ b/packages/js/src/general/components/bulk-editor-tour-notification.js
@@ -6,13 +6,11 @@ import { Button, ModalNotification, useModalNotificationContext, useSvgAria } fr
 import classNames from "classnames";
 import { useLocation } from "react-router-dom";
 import { ReactComponent as YoastIcon } from "../../../images/Yoast_icon_kader.svg";
+import { TOUR_OPT_IN_KEY } from "../../bulk-editor/constants";
 import { STORE_NAME } from "../constants";
 import { useSelectGeneralPage } from "../hooks";
 import { ROUTES } from "../routes";
 
-// The opt-in key shared with the bulk editor tour and the server meta.
-const TOUR_OPT_IN_KEY = "bulk_editor_tour";
-
 // The bulk editor admin page the tour runs on, resolved against the admin URL for the "Show me" navigation.
 const BULK_EDITOR_LINK = "admin.php?page=wpseo_page_bulk_edit";
 
diff --git a/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js b/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
index 1ab14483884..94cce6f5627 100644
--- a/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
+++ b/packages/js/tests/bulk-editor/tour/use-tour-anchor.test.js
@@ -81,6 +81,25 @@ describe( "useTourAnchor", () => {
 		expect( target.scrollIntoView ).toHaveBeenCalled();
 	} );
 
+	it( "re-bases the spotlight onto a shifted overlay (RTL scrollbar)", () => {
+		addTarget( { top: 10, left: 20, width: 100, height: 30 } );
+
+		// Simulate an RTL document where the left-side scrollbar shifts the fixed overlay's origin 15px inward.
+		const overlay = document.createElement( "div" );
+		overlay.className = "yst-tour-spotlight";
+		overlay.getBoundingClientRect = () => ( { left: 15, top: 0, width: 0, height: 0 } );
+		document.body.appendChild( overlay );
+
+		const { result } = renderHook( () => useTourAnchor( "[data-tour-id=\"x\"]", true ) );
+
+		// The padded rect (left 20 - 6 = 14) is re-based by the overlay's 15px offset, so it lands on its control.
+		expect( result.current.spotlight.rects[ 0 ].left ).toBe( -1 );
+		expect( result.current.spotlight.rects[ 0 ].top ).toBe( 4 );
+		expect( result.current.spotlight.bounds.left ).toBe( "-1px" );
+
+		overlay.remove();
+	} );
+
 	it( "clamps a single-region rectangle to the end element's bottom", () => {
 		const target = addTarget( { top: 10, left: 20, width: 100, height: 90 } );
 		const end = addChild( target, { top: 40, left: 20, width: 100, height: 20 } );

From a6322640fe5d0fbed5b9c1411926c7faa2ed1195 Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Wed, 29 Jul 2026 16:02:50 +0200
Subject: [PATCH 17/20] Enhance bulk editor tour styling

---
 css/src/bulk-editor-page.css                  | 10 +++++++++
 .../bulk-editor/components/tour/tour-card.js  | 22 +++++++++++++------
 .../bulk-editor/tour/bulk-editor-tour.test.js | 15 ++++++++-----
 .../tests/bulk-editor/tour/tour-card.test.js  |  9 ++++++--
 4 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/css/src/bulk-editor-page.css b/css/src/bulk-editor-page.css
index 2b1ccf3f559..c16c8ea3b9c 100644
--- a/css/src/bulk-editor-page.css
+++ b/css/src/bulk-editor-page.css
@@ -118,8 +118,18 @@
 	pointer-events: none;
 }
 
+/* Prevent the in-app tour popovers title to stack bellow the close button */
+.yst-bulk-editor-tour-card .yst-flex-grow {
+	min-width: 0;
+	padding-inline-end: 2rem;
+}
+
 /* In RTL. */
 .yst-bulk-editor-tour-card.yst-popover--right {
+	margin-inline-start: 0.25rem;
+}
+
+[dir="rtl"] .yst-bulk-editor-tour-card.yst-popover--right {
 	margin-inline-start: 1rem;
 }
 
diff --git a/packages/js/src/bulk-editor/components/tour/tour-card.js b/packages/js/src/bulk-editor/components/tour/tour-card.js
index 42ae672f8ef..1c50e7fec87 100644
--- a/packages/js/src/bulk-editor/components/tour/tour-card.js
+++ b/packages/js/src/bulk-editor/components/tour/tour-card.js
@@ -1,5 +1,5 @@
 import ArrowNarrowRightIcon from "@heroicons/react/solid/ArrowNarrowRightIcon";
-import { useCallback, useEffect, useRef } from "@wordpress/element";
+import { createInterpolateElement, useCallback, useEffect, useRef } from "@wordpress/element";
 import { __, sprintf } from "@wordpress/i18n";
 import { Button, Popover, useSvgAria } from "@yoast/ui-library";
 import { ReactComponent as YoastIcon } from "../../../../images/Yoast_icon_kader.svg";
@@ -100,7 +100,12 @@ export const TourCard = ( {
 				</div>
 				<div className="yst-flex-grow">
 					<Popover.Title id={ `${ id }-title` } as="h3" style={ { textAlign: "start" } }>
-						{ title }
+						{ sprintf(
+							/* translators: %1$d is the step number, %2$s is the step title. */
+							__( "Step %1$d: %2$s", "wordpress-seo" ),
+							currentStep,
+							title
+						) }
 					</Popover.Title>
 				</div>
 				<Popover.CloseButton screenReaderLabel={ __( "Close the tour", "wordpress-seo" ) } />
@@ -111,11 +116,14 @@ export const TourCard = ( {
 			<div className="yst-flex yst-gap-3 yst-justify-between yst-items-center yst-mt-3">
 				<span className="yst-ms-8 yst-text-slate-500">
 					<span dir="ltr">
-						{ sprintf(
-							/* translators: %1$s is the current step number, %2$s is the total number of steps. */
-							__( "%1$s / %2$s", "wordpress-seo" ),
-							currentStep,
-							totalSteps
+						{ createInterpolateElement(
+							sprintf(
+								/* translators: %1$s is the current step number, %2$s is the total number of steps. */
+								__( "<current>%1$s</current> / %2$s", "wordpress-seo" ),
+								currentStep,
+								totalSteps
+							),
+							{ current: <span className="yst-font-medium yst-text-slate-600" /> }
 						) }
 					</span>
 				</span>
diff --git a/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js b/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
index 01625a01275..e8bc12ab731 100644
--- a/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
+++ b/packages/js/tests/bulk-editor/tour/bulk-editor-tour.test.js
@@ -50,6 +50,11 @@ const renderTour = ( props = {} ) => {
 
 const clickNext = () => fireEvent.click( screen.getByRole( "button", { name: /Next/ } ) );
 
+// The step counter emphasises the current number in its own span, so match the counter wrapper's full text.
+const expectStepCounter = ( text ) => expect( screen.getByText(
+	( _content, element ) => element?.classList?.contains?.( "yst-ms-8" ) && element.textContent.replace( /\s+/g, " " ).trim() === text
+) ).toBeInTheDocument();
+
 describe( "BulkEditorTour", () => {
 	beforeEach( () => {
 		jest.clearAllMocks();
@@ -69,18 +74,18 @@ describe( "BulkEditorTour", () => {
 	it( "auto-starts on the first step for a new user", () => {
 		renderTour();
 
-		expect( screen.getByText( "1 / 4" ) ).toBeInTheDocument();
-		expect( screen.getByRole( "heading", { name: "Select your content type" } ) ).toBeInTheDocument();
+		expectStepCounter( "1 / 4" );
+		expect( screen.getByRole( "heading", { name: "Step 1: Select your content type" } ) ).toBeInTheDocument();
 	} );
 
 	it( "advances and goes back through the steps", () => {
 		renderTour();
 
 		clickNext();
-		expect( screen.getByText( "2 / 4" ) ).toBeInTheDocument();
+		expectStepCounter( "2 / 4" );
 
 		fireEvent.click( screen.getByRole( "button", { name: "Back" } ) );
-		expect( screen.getByText( "1 / 4" ) ).toBeInTheDocument();
+		expectStepCounter( "1 / 4" );
 	} );
 
 	it( "drops the generate step when AI is disabled, leaving three steps", () => {
@@ -90,7 +95,7 @@ describe( "BulkEditorTour", () => {
 		clickNext();
 		clickNext();
 
-		expect( screen.getByText( "3 / 3" ) ).toBeInTheDocument();
+		expectStepCounter( "3 / 3" );
 		expect( screen.queryByText( "Get SEO-friendly options at scale" ) ).not.toBeInTheDocument();
 	} );
 
diff --git a/packages/js/tests/bulk-editor/tour/tour-card.test.js b/packages/js/tests/bulk-editor/tour/tour-card.test.js
index a424de1dc05..8b2ab0ae5a0 100644
--- a/packages/js/tests/bulk-editor/tour/tour-card.test.js
+++ b/packages/js/tests/bulk-editor/tour/tour-card.test.js
@@ -12,6 +12,11 @@ const baseProps = {
 	onSkip: jest.fn(),
 };
 
+// The step counter emphasises the current number in its own span, so match the counter wrapper's full text.
+const expectStepCounter = ( text ) => expect( screen.getByText(
+	( _content, element ) => element?.classList?.contains?.( "yst-ms-8" ) && element.textContent.replace( /\s+/g, " " ).trim() === text
+) ).toBeInTheDocument();
+
 describe( "TourCard", () => {
 	beforeEach( () => {
 		jest.clearAllMocks();
@@ -20,9 +25,9 @@ describe( "TourCard", () => {
 	it( "renders the title, content and step progress", () => {
 		render( <TourCard { ...baseProps } /> );
 
-		expect( screen.getByRole( "heading", { name: "Select your content type" } ) ).toBeInTheDocument();
+		expect( screen.getByRole( "heading", { name: "Step 1: Select your content type" } ) ).toBeInTheDocument();
 		expect( screen.getByText( "This will refine the content." ) ).toBeInTheDocument();
-		expect( screen.getByText( "1 / 4" ) ).toBeInTheDocument();
+		expectStepCounter( "1 / 4" );
 	} );
 
 	it( "calls onNext when the Next button is clicked", () => {

From 0cc081c213b186eb95293728b05de6e0fe5c02bb Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Wed, 29 Jul 2026 16:03:26 +0200
Subject: [PATCH 18/20] Remove LlmTxtPopover component and related references;
 clean up CSS.

---
 css/src/new-settings.css                      |  4 -
 packages/js/src/settings/components/index.js  |  1 -
 .../settings/components/llm-txt-popover.js    | 89 -------------------
 packages/js/src/settings/routes/llms-txt.js   |  7 +-
 4 files changed, 1 insertion(+), 100 deletions(-)
 delete mode 100644 packages/js/src/settings/components/llm-txt-popover.js

diff --git a/css/src/new-settings.css b/css/src/new-settings.css
index ec448d74417..1e4cdd182f7 100644
--- a/css/src/new-settings.css
+++ b/css/src/new-settings.css
@@ -220,10 +220,6 @@ body.seo_page_wpseo_page_settings {
 		}
 	}
 
-	.yst-popover-backdrop-highlight-button button {
-		z-index:99;
-	}
-
 	/* RTL */
 
 	&.rtl {
diff --git a/packages/js/src/settings/components/index.js b/packages/js/src/settings/components/index.js
index ee1c65ef276..05688f670f0 100644
--- a/packages/js/src/settings/components/index.js
+++ b/packages/js/src/settings/components/index.js
@@ -15,7 +15,6 @@ export { default as RouteLayout } from "./route-layout";
 export { default as Search } from "./search";
 export { ErrorFallback } from "./error-fallback";
 export { LlmsTxtAlert } from "./llms-txt-alert";
-export { LlmTxtPopover } from "./llm-txt-popover";
 export { LlmsTxtUnsavedChangesModal } from "./llms-txt-unsaved-changes-modal";
 export { AdvancedMenu } from "./advanced-menu";
 export { SchemaDisableConfirmationModal } from "./schema-disable-confirmation-modal";
diff --git a/packages/js/src/settings/components/llm-txt-popover.js b/packages/js/src/settings/components/llm-txt-popover.js
deleted file mode 100644
index f8ddfe8b365..00000000000
--- a/packages/js/src/settings/components/llm-txt-popover.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { __ } from "@wordpress/i18n";
-import { Popover, usePopoverContext, useSvgAria, Button } from "@yoast/ui-library";
-import { ReactComponent as YoastIcon } from "../../../images/Yoast_icon_kader.svg";
-import { useRef, useEffect, useState } from "@wordpress/element";
-
-/**
- * A button component that dismisses the popover when clicked.
- * On mount, it automatically focuses and scrolls itself into view for better accessibility.
- *
- * @returns {JSX.Element} The dismiss button element.
- */
-const DismissButton = () => {
-	const { handleDismiss } = usePopoverContext();
-	const dismissButtonText = __( "Got it!", "wordpress-seo" );
-	const dismissButtonRef = useRef( null );
-
-	// useEffect to focus and scroll to the popover dismiss button
-	useEffect( () => {
-		const timeout = setTimeout( () => {
-			if ( dismissButtonRef.current ) {
-				dismissButtonRef.current.focus();
-				dismissButtonRef.current.scrollIntoView( { behavior: "smooth", block: "center" } );
-			}
-		}, 300 );
-
-		return () => clearTimeout( timeout );
-	}, [] );
-
-	return <Button
-		ref={ dismissButtonRef }
-		type="button" variant="primary"
-		onClick={ handleDismiss }
-		className="yst-self-end"
-	>
-		{ dismissButtonText }
-	</Button>;
-};
-
-
-/**
- * The LLM txt popover component for the opt in.
- * @returns {JSX.Element} The LLM txt popover element.
- */
-export const LlmTxtPopover = () => {
-	const svgAriaProps = useSvgAria();
-	const [ isPopoverVisible, setIsPopoverVisible ] = useState( true );
-
-	useEffect( () => {
-		sessionStorage?.removeItem( "yoast-highlight-setting" );
-	}, [] );
-
-	return <Popover
-		id="llm-txt-popover"
-		hasBackdrop={ true }
-		role="dialog"
-		isVisible={ isPopoverVisible }
-		setIsVisible={ setIsPopoverVisible }
-		position="right"
-		className="yst-top-3"
-	>
-		<>
-			<div className="yst-flex yst-gap-3 yst-items-center">
-				<div className="yst-flex-shrink-0">
-					<YoastIcon className="yst-w-5 yst-h-5 yst-fill-primary-500" { ...svgAriaProps } />
-				</div>
-				<div className="yst-flex-grow">
-					<Popover.Title
-						id="llmt-txt-popover-title"
-						as="h3"
-					>
-						{ __( "Enable the llms.txt feature", "wordpress-seo" ) }
-					</Popover.Title>
-				</div>
-
-				<Popover.CloseButton dismissScreenReaderLabel={ __( "Dismiss", "wordpress-seo" ) } />
-			</div>
-			<Popover.Content
-				id="llmt-txt-popover-content"
-				className="yst-font-normal yst-ms-8 yst-me-5 yst-mt-1"
-			>
-				{ __( "Automatically generate an llms.txt file that points LLMs to your site's most relevant content. We also gave you editor access.", "wordpress-seo" ) }
-			</Popover.Content>
-
-			<div className="yst-flex yst-gap-3 yst-justify-end yst-mt-3">
-				<DismissButton />
-			</div>
-		</>
-	</Popover>;
-};
diff --git a/packages/js/src/settings/routes/llms-txt.js b/packages/js/src/settings/routes/llms-txt.js
index bd20f516a73..e6cf02010cc 100644
--- a/packages/js/src/settings/routes/llms-txt.js
+++ b/packages/js/src/settings/routes/llms-txt.js
@@ -13,7 +13,6 @@ import {
 	FormikIndexablePageSelectField,
 	FormLayout,
 	RouteLayout,
-	LlmTxtPopover,
 	LlmsTxtAlert,
 	LlmsTxtUnsavedChangesModal,
 } from "../components";
@@ -143,8 +142,6 @@ const LlmTxt = () => {
 		}
 	}, [ fetchIndexablePages, isLlmsTxtEnabled, llmsTxtSelectionMode ] );
 
-	const isOptIn = useMemo( () => ! isLlmsTxtEnabled && sessionStorage?.getItem( "yoast-highlight-setting" ) === "llm-txt", [ isLlmsTxtEnabled ] );
-
 	const [ openUnsavedFile, , , setOpenUnsavedFile, unsetOpenUnsavedFile ] = useToggleState( false );
 
 	return (
@@ -158,7 +155,7 @@ const LlmTxt = () => {
 
 						{ generationFailure && initialIsLlmsTxtEnabled && isLlmsTxtEnabled && <LlmsTxtAlert reason={ generationFailureReason } /> }
 
-						<div className="yst-relative yst-max-w-sm">
+						<div className="yst-max-w-sm">
 							<FormikValueChangeFieldWithDisabledMessage
 								as={ ToggleField }
 								type="checkbox"
@@ -177,9 +174,7 @@ const LlmTxt = () => {
 									),
 									LABEL
 								) }
-								className={ isOptIn ? "yst-popover-backdrop-highlight-button" : "" }
 							/>
-							{ isOptIn && <LlmTxtPopover /> }
 						</div>
 					</fieldset>
 					{ ! showUnsavedChangesModal && <Button

From 0cb42fb691d20ffe046e88fcfe0e115dd9703ba6 Mon Sep 17 00:00:00 2001
From: Vraja Das <vraja.pro@gmail.com>
Date: Thu, 30 Jul 2026 14:42:15 +0300
Subject: [PATCH 19/20] fix: change button size for bulk editor tour

---
 packages/js/src/bulk-editor/components/tour/tour-card.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/js/src/bulk-editor/components/tour/tour-card.js b/packages/js/src/bulk-editor/components/tour/tour-card.js
index 1c50e7fec87..2c862e71762 100644
--- a/packages/js/src/bulk-editor/components/tour/tour-card.js
+++ b/packages/js/src/bulk-editor/components/tour/tour-card.js
@@ -128,10 +128,10 @@ export const TourCard = ( {
 					</span>
 				</span>
 				<div className="yst-flex yst-gap-3 yst-items-center">
-					{ onBack && <Button variant="tertiary" onClick={ onBack }>
+					{ onBack && <Button size="small" variant="tertiary" onClick={ onBack }>
 						{ __( "Back", "wordpress-seo" ) }
 					</Button> }
-					<Button ref={ nextButtonRef } variant="primary" onClick={ onNext } className="yst-flex yst-gap-1">
+					<Button size="small" ref={ nextButtonRef } variant="primary" onClick={ onNext } className="yst-flex yst-gap-1">
 						{ isLastStep
 							? __( "Got it!", "wordpress-seo" )
 							: <>

From b17691c2dd30712398986f824c74af464b4f27f7 Mon Sep 17 00:00:00 2001
From: JordiPV <llimonero_4t@hotmail.com>
Date: Thu, 30 Jul 2026 13:59:50 +0200
Subject: [PATCH 20/20] Add highlightChildren property to tour step for
 improved spotlight

---
 packages/js/src/bulk-editor/components/tour/tour-steps.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/js/src/bulk-editor/components/tour/tour-steps.js b/packages/js/src/bulk-editor/components/tour/tour-steps.js
index f5eaf524325..af8858574a9 100644
--- a/packages/js/src/bulk-editor/components/tour/tour-steps.js
+++ b/packages/js/src/bulk-editor/components/tour/tour-steps.js
@@ -20,6 +20,7 @@ export const getTourSteps = () => [
 	{
 		id: "bulk-editor-tour-appearance",
 		tourId: "appearance-tabs",
+		highlightChildren: true,
 		position: "right",
 		title: __( "Select search or social appearance", "wordpress-seo" ),
 		content: __( "Easily switch between them anytime.", "wordpress-seo" ),