SEO: Name the conflicting SEO plugin on the Overview (#53874)

* SEO: Report which conflicting SEO plugin owns the output

The SEO module now names the plugin it steps aside for through a new
jetpack_seo_conflicting_plugin filter, and the dashboard's Overview and
Settings payloads carry that name so the screens can say who owns the output.

* SEO: Name the conflicting plugin only while Jetpack steps aside

Report the name only when jetpack_disable_seo_tools is on, so it can't
contradict live output, and list paid editions before the free plugins they
run alongside so the first match names the right one.

* SEO: Name the conflicting SEO plugin on the Overview

The Overview's generic "SEO tools are not enabled" warning now names the
plugin when another SEO plugin is the reason.

* SEO: Space the Overview warning off the cards below it

* Changelog: Make the Overview entries comment-only, as the SEO page is gated

Author: haqadn

projects/packages/seo/_inc/screens/overview/index.tsx

@@ -2,7 +2,7 @@
 
 import { useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useNavigate } from '@wordpress/route';
 import { Notice, Stack } from '@wordpress/ui';
 import EnableSeoCard from '../../components/enable-seo-card';
@@ -122,12 +122,21 @@ const OverviewScreen: FC = () => {
 	return (
 		<div className={ styles.root }>
 			{ ! data.plan.seo_enabled_for_site && (
-				<Notice.Root intent="warning">
+				<Notice.Root intent="warning" className={ styles.notice }>
 					<Notice.Description>
-						{ __(
-							'SEO tools are not enabled on this site. Some cards reflect the underlying WordPress options only.',
-							'jetpack-seo'
-						) }
+						{ data.conflicting_seo_plugin
+							? sprintf(
+									/* translators: %s: name of the SEO plugin that controls the site's SEO output, e.g. Yoast SEO. */
+									__(
+										'%s is managing your SEO titles and descriptions, so Jetpack’s are turned off.',
+										'jetpack-seo'
+									),
+									data.conflicting_seo_plugin
+								)
+							: __(
+									'SEO tools are not enabled on this site. Some cards reflect the underlying WordPress options only.',
+									'jetpack-seo'
+								) }
 					</Notice.Description>
 				</Notice.Root>
 			) }

projects/packages/seo/_inc/screens/overview/style.module.scss

@@ -6,6 +6,11 @@
 	margin-inline: auto;
 }
 
+// The warning above the card grid, spaced off it by the grid's own gap.
+.notice {
+	margin-block-end: var(--wpds-dimension-gap-lg);
+}
+
 .grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

projects/packages/seo/_inc/screens/overview/test/index.test.tsx

@@ -87,4 +87,19 @@ describe( 'OverviewScreen', () => {
 		expect( screen.getByText( 'Site visibility' ) ).toBeInTheDocument();
 		expect( screen.getByText( 'Site verification' ) ).toBeInTheDocument();
 	} );
+
+	it.each( [
+		[ 'names the plugin that owns the output', 'Yoast SEO', /^Yoast SEO is managing your SEO/ ],
+		[ 'falls back when no plugin is named', '', /^SEO tools are not enabled/ ],
+	] )( 'with SEO output off, %s', ( _, plugin, notice ) => {
+		getOverview.mockReturnValue( {
+			...buildOverview(),
+			plan: { seo_enabled_for_site: false },
+			conflicting_seo_plugin: plugin,
+		} );
+
+		render( <OverviewScreen /> );
+
+		expect( screen.getByText( notice ) ).toBeInTheDocument();
+	} );
 } );

projects/packages/seo/changelog/add-seo-conflict-overview-notice

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+Comment: Overview: Name the conflicting SEO plugin in the SEO-off warning, and space it off the cards. The new SEO page is gated.
+

projects/plugins/jetpack/changelog/add-seo-conflict-overview-notice

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+Comment: SEO: Name the conflicting SEO plugin on the gated SEO Overview.
+