From 31b7aa9511828d52e58e0cfcc2dce4fb7813d5c9 Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Tue, 5 May 2026 11:56:19 +0100 Subject: [PATCH 01/13] fix(ai): UI polish fixes for MCP settings page - Fix browser Back button: use pushState/popstate so the Back button returns to the hub instead of leaving the AI page entirely - Change quick setup instructions from
    to ) } { selectedClient === 'claude-code' && ( @@ -162,7 +162,7 @@ export default function McpSetup() { 'jetpack' ) } -
      +
      • { createInterpolateElement( @@ -206,7 +206,7 @@ export default function McpSetup() { ) }
        • -
    + ) } diff --git a/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss b/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss index 0a2fa21f645d..acd98adeff00 100644 --- a/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss +++ b/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss @@ -91,12 +91,27 @@ justify-content: space-between; align-items: center; width: 100%; + + // The ToggleControl label uses line-height equal to the toggle height for + // vertical alignment, but the FlexBlock wrapper defaults to align-items: + // stretch. Force center so the "Enable all" text sits mid-toggle. + .components-toggle-control__label { + display: flex; + align-items: center; + } } &__tool-group-divider { margin: 0; } + // Tighten the gap between each tool toggle's help text and the next toggle. + // WP's BaseControl adds margin-top: 8px on the help text; bump overall + // row gap down slightly so the combined visual spacing feels even. + .components-base-control__help { + margin-top: 4px; + } + &__access-card { overflow: hidden; } diff --git a/projects/plugins/jetpack/changelog/aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes b/projects/plugins/jetpack/changelog/aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes new file mode 100644 index 000000000000..2e4faa1ba018 --- /dev/null +++ b/projects/plugins/jetpack/changelog/aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes @@ -0,0 +1,4 @@ +Significance: patch +Type: bugfix + +fix(ai): UI polish for MCP settings — fix browser Back button navigation, change setup instructions to unordered lists, fix 'All enabled' label vertical alignment, and tighten toggle help-text spacing From 227a8c6e5346a9e71016001958dd171a9d4c324a Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Tue, 5 May 2026 14:28:26 +0100 Subject: [PATCH 02/13] fix(ai): improve MCP tool sub-grouping and restore ordered list in setup - Add NAVIGATION sub-category to Sites section (menus, navigation tools) - Rename SITES sub-category to SITE_INFO, ACCOUNT to PROFILE - Add BILLING as a separate Account sub-category - Move list_themes to SITE_SETTINGS sub-group via tool-ID overrides - Restore
      ordered list for quick setup instructions Co-Authored-By: Claude Sonnet 4.6 --- .../jetpack/_inc/client/ai/mcp/categories.js | 37 +++++++++++++++---- .../jetpack/_inc/client/ai/mcp/setup.jsx | 8 ++-- 2 files changed, 34 insertions(+), 11 deletions(-) diff --git a/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js b/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js index 8d78bcf01d2c..dff9602885e6 100644 --- a/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js +++ b/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js @@ -33,12 +33,14 @@ const SUB_CATEGORIES = { POSTS: __( 'Posts', 'jetpack' ), COMMENTS: __( 'Comments', 'jetpack' ), CATEGORIES_TAGS: __( 'Categories & tags', 'jetpack' ), - SITES: __( 'Sites', 'jetpack' ), + SITE_INFO: __( 'Site info', 'jetpack' ), + NAVIGATION: __( 'Navigation', 'jetpack' ), MEDIA: __( 'Media', 'jetpack' ), SITE_SETTINGS: __( 'Site settings', 'jetpack' ), ANALYTICS: __( 'Analytics', 'jetpack' ), - ACCOUNT: __( 'Account', 'jetpack' ), + PROFILE: __( 'Profile', 'jetpack' ), NOTIFICATIONS: __( 'Notifications', 'jetpack' ), + BILLING: __( 'Billing', 'jetpack' ), }; export const SUB_CATEGORY_ORDER = { @@ -48,12 +50,17 @@ export const SUB_CATEGORY_ORDER = { SUB_CATEGORIES.CATEGORIES_TAGS, ], [ DISPLAY_CATEGORIES.SITES ]: [ - SUB_CATEGORIES.SITES, + SUB_CATEGORIES.SITE_INFO, + SUB_CATEGORIES.NAVIGATION, SUB_CATEGORIES.SITE_SETTINGS, SUB_CATEGORIES.MEDIA, SUB_CATEGORIES.ANALYTICS, ], - [ DISPLAY_CATEGORIES.ACCOUNT ]: [ SUB_CATEGORIES.ACCOUNT, SUB_CATEGORIES.NOTIFICATIONS ], + [ DISPLAY_CATEGORIES.ACCOUNT ]: [ + SUB_CATEGORIES.PROFILE, + SUB_CATEGORIES.NOTIFICATIONS, + SUB_CATEGORIES.BILLING, + ], }; const API_CATEGORY_TO_DISPLAY = { @@ -79,15 +86,28 @@ const API_CATEGORY_TO_SUB_CATEGORY = { posts: SUB_CATEGORIES.POSTS, comments: SUB_CATEGORIES.COMMENTS, 'categories-tags': SUB_CATEGORIES.CATEGORIES_TAGS, - sites: SUB_CATEGORIES.SITES, + sites: SUB_CATEGORIES.SITE_INFO, media: SUB_CATEGORIES.MEDIA, users: SUB_CATEGORIES.SITE_SETTINGS, plugins: SUB_CATEGORIES.SITE_SETTINGS, 'site-settings': SUB_CATEGORIES.SITE_SETTINGS, analytics: SUB_CATEGORIES.ANALYTICS, - account: SUB_CATEGORIES.ACCOUNT, + account: SUB_CATEGORIES.PROFILE, notifications: SUB_CATEGORIES.NOTIFICATIONS, - billing: SUB_CATEGORIES.ACCOUNT, + billing: SUB_CATEGORIES.BILLING, +}; + +const TOOL_ID_TO_SUB_CATEGORY = { + list_menus: SUB_CATEGORIES.NAVIGATION, + get_menu: SUB_CATEGORIES.NAVIGATION, + list_menu_items: SUB_CATEGORIES.NAVIGATION, + get_menu_item: SUB_CATEGORIES.NAVIGATION, + list_navigation: SUB_CATEGORIES.NAVIGATION, + get_navigation: SUB_CATEGORIES.NAVIGATION, + create_navigation: SUB_CATEGORIES.NAVIGATION, + update_navigation: SUB_CATEGORIES.NAVIGATION, + delete_navigation: SUB_CATEGORIES.NAVIGATION, + list_themes: SUB_CATEGORIES.SITE_SETTINGS, }; /** @@ -98,6 +118,9 @@ const API_CATEGORY_TO_SUB_CATEGORY = { * @return {string | undefined} Sub-category display name, or undefined if none. */ export function getSubCategory( toolId, ability ) { + if ( toolId && TOOL_ID_TO_SUB_CATEGORY[ toolId ] ) { + return TOOL_ID_TO_SUB_CATEGORY[ toolId ]; + } const apiCategory = ability?.category; if ( apiCategory ) { return API_CATEGORY_TO_SUB_CATEGORY[ apiCategory ]; diff --git a/projects/plugins/jetpack/_inc/client/ai/mcp/setup.jsx b/projects/plugins/jetpack/_inc/client/ai/mcp/setup.jsx index aa3959b17f74..265dd758bcdc 100644 --- a/projects/plugins/jetpack/_inc/client/ai/mcp/setup.jsx +++ b/projects/plugins/jetpack/_inc/client/ai/mcp/setup.jsx @@ -126,7 +126,7 @@ export default function McpSetup() { { selectedClient === 'claude' && ( -
        +
        1. { createInterpolateElement( __( 'Open .', 'jetpack' ), { @@ -151,7 +151,7 @@ export default function McpSetup() { { __( 'Select WordPress.com and follow the prompts.', 'jetpack' ) }
          2. -
      +
    ) } { selectedClient === 'claude-code' && ( @@ -162,7 +162,7 @@ export default function McpSetup() { 'jetpack' ) } -
      +
      1. { createInterpolateElement( @@ -206,7 +206,7 @@ export default function McpSetup() { ) }
        2. -
    +
) } From 38a272858a0de86e9eff5d14879e902c7f0d0da8 Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Tue, 5 May 2026 17:05:59 +0100 Subject: [PATCH 03/13] fix(ai): use prefix matching for MCP Sites sub-groups and fix activity log URL MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace exact tool-ID map with prefix-based matching (wpcom-mcp/navigation-, wpcom-mcp/menus-, wpcom-mcp/menu-items- → Navigation sub-group; wpcom-mcp/themes-, wpcom-mcp/theme- → Site settings sub-group) - On self-hosted sites, link activity log to local wp-admin page (admin.php?page=jetpack-activity-log) instead of cloud.jetpack.com Co-Authored-By: Claude Sonnet 4.6 --- .../jetpack/_inc/client/ai/mcp/categories.js | 34 +++++++++++-------- .../lib/admin-pages/class-jetpack-ai-page.php | 10 +++--- 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js b/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js index dff9602885e6..3f27c4b67af8 100644 --- a/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js +++ b/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js @@ -97,17 +97,14 @@ const API_CATEGORY_TO_SUB_CATEGORY = { billing: SUB_CATEGORIES.BILLING, }; -const TOOL_ID_TO_SUB_CATEGORY = { - list_menus: SUB_CATEGORIES.NAVIGATION, - get_menu: SUB_CATEGORIES.NAVIGATION, - list_menu_items: SUB_CATEGORIES.NAVIGATION, - get_menu_item: SUB_CATEGORIES.NAVIGATION, - list_navigation: SUB_CATEGORIES.NAVIGATION, - get_navigation: SUB_CATEGORIES.NAVIGATION, - create_navigation: SUB_CATEGORIES.NAVIGATION, - update_navigation: SUB_CATEGORIES.NAVIGATION, - delete_navigation: SUB_CATEGORIES.NAVIGATION, - list_themes: SUB_CATEGORIES.SITE_SETTINGS, +// Sites-card tools that share the `sites` API category but belong in finer sub-groups. +// Prefix matching mirrors the approach used in wp-calypso categories.ts. +const SITES_TOOL_ID_PREFIX_TO_SUB_CATEGORY = { + 'wpcom-mcp/navigation-': SUB_CATEGORIES.NAVIGATION, + 'wpcom-mcp/menus-': SUB_CATEGORIES.NAVIGATION, + 'wpcom-mcp/menu-items-': SUB_CATEGORIES.NAVIGATION, + 'wpcom-mcp/themes-': SUB_CATEGORIES.SITE_SETTINGS, + 'wpcom-mcp/theme-': SUB_CATEGORIES.SITE_SETTINGS, }; /** @@ -118,10 +115,19 @@ const TOOL_ID_TO_SUB_CATEGORY = { * @return {string | undefined} Sub-category display name, or undefined if none. */ export function getSubCategory( toolId, ability ) { - if ( toolId && TOOL_ID_TO_SUB_CATEGORY[ toolId ] ) { - return TOOL_ID_TO_SUB_CATEGORY[ toolId ]; - } const apiCategory = ability?.category; + + if ( apiCategory === 'sites' ) { + for ( const [ prefix, subCategory ] of Object.entries( + SITES_TOOL_ID_PREFIX_TO_SUB_CATEGORY + ) ) { + if ( toolId.startsWith( prefix ) ) { + return subCategory; + } + } + return API_CATEGORY_TO_SUB_CATEGORY.sites; + } + if ( apiCategory ) { return API_CATEGORY_TO_SUB_CATEGORY[ apiCategory ]; } diff --git a/projects/plugins/jetpack/_inc/lib/admin-pages/class-jetpack-ai-page.php b/projects/plugins/jetpack/_inc/lib/admin-pages/class-jetpack-ai-page.php index 8f4a28568c27..ffe54d390c40 100644 --- a/projects/plugins/jetpack/_inc/lib/admin-pages/class-jetpack-ai-page.php +++ b/projects/plugins/jetpack/_inc/lib/admin-pages/class-jetpack-ai-page.php @@ -10,7 +10,6 @@ use Automattic\Jetpack\Admin_UI\Admin_Menu; use Automattic\Jetpack\Connection\Manager as Connection_Manager; -use Automattic\Jetpack\Redirect; use Automattic\Jetpack\Status; use Automattic\Jetpack\Status\Host; @@ -86,13 +85,12 @@ public function page_admin_scripts() { // Use the plain hostname for the Atomic activity log URL — get_site_suffix() can // include '::' for subdirectory installs, which would break the URL. This matches // the approach used by jetpack-mu-wpcom for the sidebar Activity Log link. - $site_host = wp_parse_url( home_url(), PHP_URL_HOST ); - // On Atomic, jetpack-mu-wpcom replaces the cloud redirect with a direct WPCOM URL. - // Mirror that behaviour here so the activity log link resolves consistently. + $site_host = wp_parse_url( home_url(), PHP_URL_HOST ); $activity_log_site = ( is_string( $site_host ) && '' !== $site_host ) ? $site_host : $site_suffix; - $activity_log_url = ( new Host() )->is_woa_site() + // On Atomic link to WPCOM activity log; on self-hosted link to the local wp-admin page. + $activity_log_url = ( new Host() )->is_woa_site() ? 'https://wordpress.com/activity-log/' . $activity_log_site - : Redirect::get_url( 'cloud-activity-log-wp-menu', array( 'site' => $blog_id ? $blog_id : $site_suffix ) ); + : admin_url( 'admin.php?page=jetpack-activity-log' ); wp_enqueue_script( 'jetpack-ai-admin', From f349a3456bdd3d116971bebd2b5e7976cfe66958 Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Wed, 6 May 2026 09:24:26 +0100 Subject: [PATCH 04/13] =?UTF-8?q?fix(ai):=20align=20MCP=20categories.js=20?= =?UTF-8?q?with=20calypso=20=E2=80=94=20move=20nav/menus/themes=20to=20Des?= =?UTF-8?q?ign=20card?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Port the exact same logic from wp-calypso categories.ts: - Navigation, menus and themes tools (category: 'sites') are moved to the Design display card via tool ID prefix matching in getDisplayCategory - Design card gains sub-categories: Themes, Patterns, Templates, Global styles, Navigation, Blocks — ordered and divided exactly as in calypso - Sites card sub-groups revert to: Sites, Plugins, Site settings, Media, Analytics - Account sub-groups revert to: Account, Notifications (billing maps to Account) Co-Authored-By: Claude Sonnet 4.6 --- .../jetpack/_inc/client/ai/mcp/categories.js | 86 ++++++++++++++----- 1 file changed, 64 insertions(+), 22 deletions(-) diff --git a/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js b/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js index 3f27c4b67af8..f9d444b7d61a 100644 --- a/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js +++ b/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js @@ -30,17 +30,26 @@ export const CATEGORY_ORDER = [ ]; const SUB_CATEGORIES = { + // Posts sub-categories POSTS: __( 'Posts', 'jetpack' ), COMMENTS: __( 'Comments', 'jetpack' ), CATEGORIES_TAGS: __( 'Categories & tags', 'jetpack' ), - SITE_INFO: __( 'Site info', 'jetpack' ), - NAVIGATION: __( 'Navigation', 'jetpack' ), + // Sites sub-categories + SITES: __( 'Sites', 'jetpack' ), + PLUGINS: __( 'Plugins', 'jetpack' ), MEDIA: __( 'Media', 'jetpack' ), SITE_SETTINGS: __( 'Site settings', 'jetpack' ), ANALYTICS: __( 'Analytics', 'jetpack' ), - PROFILE: __( 'Profile', 'jetpack' ), + // Account sub-categories + ACCOUNT: __( 'Account', 'jetpack' ), NOTIFICATIONS: __( 'Notifications', 'jetpack' ), - BILLING: __( 'Billing', 'jetpack' ), + // Design sub-categories + THEMES: __( 'Themes', 'jetpack' ), + PATTERNS: __( 'Patterns', 'jetpack' ), + TEMPLATES: __( 'Templates', 'jetpack' ), + GLOBAL_STYLES: __( 'Global styles', 'jetpack' ), + NAVIGATION: __( 'Navigation', 'jetpack' ), + BLOCKS: __( 'Blocks', 'jetpack' ), }; export const SUB_CATEGORY_ORDER = { @@ -50,16 +59,20 @@ export const SUB_CATEGORY_ORDER = { SUB_CATEGORIES.CATEGORIES_TAGS, ], [ DISPLAY_CATEGORIES.SITES ]: [ - SUB_CATEGORIES.SITE_INFO, - SUB_CATEGORIES.NAVIGATION, + SUB_CATEGORIES.SITES, + SUB_CATEGORIES.PLUGINS, SUB_CATEGORIES.SITE_SETTINGS, SUB_CATEGORIES.MEDIA, SUB_CATEGORIES.ANALYTICS, ], - [ DISPLAY_CATEGORIES.ACCOUNT ]: [ - SUB_CATEGORIES.PROFILE, - SUB_CATEGORIES.NOTIFICATIONS, - SUB_CATEGORIES.BILLING, + [ DISPLAY_CATEGORIES.ACCOUNT ]: [ SUB_CATEGORIES.ACCOUNT, SUB_CATEGORIES.NOTIFICATIONS ], + [ DISPLAY_CATEGORIES.DESIGN ]: [ + SUB_CATEGORIES.THEMES, + SUB_CATEGORIES.PATTERNS, + SUB_CATEGORIES.TEMPLATES, + SUB_CATEGORIES.GLOBAL_STYLES, + SUB_CATEGORIES.NAVIGATION, + SUB_CATEGORIES.BLOCKS, ], }; @@ -83,28 +96,38 @@ const API_CATEGORY_TO_DISPLAY = { }; const API_CATEGORY_TO_SUB_CATEGORY = { + // Posts card sub-categories posts: SUB_CATEGORIES.POSTS, comments: SUB_CATEGORIES.COMMENTS, 'categories-tags': SUB_CATEGORIES.CATEGORIES_TAGS, - sites: SUB_CATEGORIES.SITE_INFO, + // Sites card sub-categories + sites: SUB_CATEGORIES.SITES, media: SUB_CATEGORIES.MEDIA, users: SUB_CATEGORIES.SITE_SETTINGS, - plugins: SUB_CATEGORIES.SITE_SETTINGS, + plugins: SUB_CATEGORIES.PLUGINS, 'site-settings': SUB_CATEGORIES.SITE_SETTINGS, analytics: SUB_CATEGORIES.ANALYTICS, - account: SUB_CATEGORIES.PROFILE, + // Account card sub-categories + account: SUB_CATEGORIES.ACCOUNT, notifications: SUB_CATEGORIES.NOTIFICATIONS, - billing: SUB_CATEGORIES.BILLING, + billing: SUB_CATEGORIES.ACCOUNT, }; -// Sites-card tools that share the `sites` API category but belong in finer sub-groups. -// Prefix matching mirrors the approach used in wp-calypso categories.ts. -const SITES_TOOL_ID_PREFIX_TO_SUB_CATEGORY = { +// Design-card tools all share `design` as their API category, so sub-groups within the +// Design card are derived from tool ID prefixes. This also covers `sites`-category tools +// that are routed to the Design card (navigation, menus, themes). +const TOOL_ID_PREFIX_TO_DESIGN_SUB_CATEGORY = { + 'wpcom-mcp/theme-': SUB_CATEGORIES.THEMES, + 'wpcom-mcp/themes-': SUB_CATEGORIES.THEMES, + 'wpcom-mcp/patterns-': SUB_CATEGORIES.PATTERNS, + 'wpcom-mcp/synced-patterns-': SUB_CATEGORIES.PATTERNS, + 'wpcom-mcp/templates-': SUB_CATEGORIES.TEMPLATES, + 'wpcom-mcp/template-parts-': SUB_CATEGORIES.TEMPLATES, + 'wpcom-mcp/global-styles-': SUB_CATEGORIES.GLOBAL_STYLES, 'wpcom-mcp/navigation-': SUB_CATEGORIES.NAVIGATION, 'wpcom-mcp/menus-': SUB_CATEGORIES.NAVIGATION, 'wpcom-mcp/menu-items-': SUB_CATEGORIES.NAVIGATION, - 'wpcom-mcp/themes-': SUB_CATEGORIES.SITE_SETTINGS, - 'wpcom-mcp/theme-': SUB_CATEGORIES.SITE_SETTINGS, + 'wpcom-mcp/blocks-': SUB_CATEGORIES.BLOCKS, }; /** @@ -117,15 +140,22 @@ const SITES_TOOL_ID_PREFIX_TO_SUB_CATEGORY = { export function getSubCategory( toolId, ability ) { const apiCategory = ability?.category; - if ( apiCategory === 'sites' ) { + // Design-card tools use tool ID prefix for sub-grouping. This covers both + // 'design'-category tools and 'sites'-category tools that are routed to the + // Design card by getDisplayCategory (e.g. navigation, menus, themes). + if ( apiCategory === 'design' || apiCategory === 'sites' ) { for ( const [ prefix, subCategory ] of Object.entries( - SITES_TOOL_ID_PREFIX_TO_SUB_CATEGORY + TOOL_ID_PREFIX_TO_DESIGN_SUB_CATEGORY ) ) { if ( toolId.startsWith( prefix ) ) { return subCategory; } } - return API_CATEGORY_TO_SUB_CATEGORY.sites; + // 'sites'-category tools with no Design prefix stay in the Sites card's sub-group. + if ( apiCategory === 'sites' ) { + return API_CATEGORY_TO_SUB_CATEGORY.sites; + } + return undefined; } if ( apiCategory ) { @@ -148,12 +178,24 @@ export function isWriteTool( toolId, ability ) { /** * Get the display category name for a tool. * + * For 'design' and 'sites' category tools, check if the tool ID prefix indicates + * it belongs in the Design card (navigation, menus, themes mirror calypso's approach). + * * @param {string} toolId - Tool identifier. * @param {object} ability - Tool descriptor from the API. * @return {string} Display category name, falling back to Uncategorized. */ export function getDisplayCategory( toolId, ability ) { const apiCategory = ability?.category; + + if ( apiCategory === 'design' || apiCategory === 'sites' ) { + for ( const prefix of Object.keys( TOOL_ID_PREFIX_TO_DESIGN_SUB_CATEGORY ) ) { + if ( toolId.startsWith( prefix ) ) { + return DISPLAY_CATEGORIES.DESIGN; + } + } + } + if ( apiCategory && API_CATEGORY_TO_DISPLAY[ apiCategory ] ) { return API_CATEGORY_TO_DISPLAY[ apiCategory ]; } From 9668130f49a49f4cff7476cdda48c9382e252758 Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Wed, 6 May 2026 09:53:49 +0100 Subject: [PATCH 05/13] fix(ai): use unordered list for setup steps with explicit bullet restore wp-admin resets list-style to none globally; add ul.jetpack-ai-mcp-setup__steps { list-style: disc } to restore bullets for the unordered steps list. Co-Authored-By: Claude Sonnet 4.6 --- projects/plugins/jetpack/_inc/client/ai/mcp/setup.jsx | 8 ++++---- projects/plugins/jetpack/_inc/client/ai/mcp/style.scss | 5 +++++ 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/projects/plugins/jetpack/_inc/client/ai/mcp/setup.jsx b/projects/plugins/jetpack/_inc/client/ai/mcp/setup.jsx index 265dd758bcdc..aa3959b17f74 100644 --- a/projects/plugins/jetpack/_inc/client/ai/mcp/setup.jsx +++ b/projects/plugins/jetpack/_inc/client/ai/mcp/setup.jsx @@ -126,7 +126,7 @@ export default function McpSetup() { { selectedClient === 'claude' && ( -
    +
    • { createInterpolateElement( __( 'Open .', 'jetpack' ), { @@ -151,7 +151,7 @@ export default function McpSetup() { { __( 'Select WordPress.com and follow the prompts.', 'jetpack' ) }
      • -
+ ) } { selectedClient === 'claude-code' && ( @@ -162,7 +162,7 @@ export default function McpSetup() { 'jetpack' ) } -
    +
    • { createInterpolateElement( @@ -206,7 +206,7 @@ export default function McpSetup() { ) }
      • -
+ ) } diff --git a/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss b/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss index acd98adeff00..85fcc9c81884 100644 --- a/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss +++ b/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss @@ -128,6 +128,11 @@ } } + // wp-admin resets list-style globally; restore bullets. + ul.jetpack-ai-mcp-setup__steps { + list-style: disc; + } + &__code { font-size: 12px; background: var(--color-neutral-5, #f0f0f1); From 853f4dcbd40d0423ce92776669e4055ddd7182d4 Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Wed, 6 May 2026 09:57:11 +0100 Subject: [PATCH 06/13] fix(ai): vertically centre badge content within the Badge line box inline-flex aligns to the text baseline by default, which shifts the icon+text span down inside the Badge component. vertical-align: middle centres it correctly. Co-Authored-By: Claude Sonnet 4.6 --- projects/plugins/jetpack/_inc/client/ai/mcp/style.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss b/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss index 85fcc9c81884..51b8035a3b55 100644 --- a/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss +++ b/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss @@ -83,6 +83,9 @@ display: inline-flex; align-items: center; gap: 4px; + // inline-flex aligns to the text baseline by default, which shifts the + // container down relative to the badge's line box — middle centres it. + vertical-align: middle; } &__category-header-row { From a9fc332f6b9c3c7ac3d1f2f906bc302bd42d6b8f Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Wed, 6 May 2026 10:06:01 +0100 Subject: [PATCH 07/13] fix(ai): collapse badge-content line-height to fix vertical alignment Setting line-height:1 eliminates the descender space that caused the inline-flex span to drift off the visual centre of the Badge. Co-Authored-By: Claude Sonnet 4.6 --- projects/plugins/jetpack/_inc/client/ai/mcp/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss b/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss index 51b8035a3b55..2994ef73ad9e 100644 --- a/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss +++ b/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss @@ -83,9 +83,9 @@ display: inline-flex; align-items: center; gap: 4px; - // inline-flex aligns to the text baseline by default, which shifts the - // container down relative to the badge's line box — middle centres it. - vertical-align: middle; + // Collapse line-height descender space so the flex container sits flush + // with the badge's padding-block rather than drifting off-baseline. + line-height: 1; } &__category-header-row { From 21a299e44e3bd404320c59ed9420962015a665c9 Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Wed, 6 May 2026 10:10:11 +0100 Subject: [PATCH 08/13] fix(ai): use vertical-align: center to centre badge content Co-Authored-By: Claude Sonnet 4.6 --- projects/plugins/jetpack/_inc/client/ai/mcp/style.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss b/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss index 2994ef73ad9e..4778382cc9a0 100644 --- a/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss +++ b/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss @@ -83,9 +83,7 @@ display: inline-flex; align-items: center; gap: 4px; - // Collapse line-height descender space so the flex container sits flush - // with the badge's padding-block rather than drifting off-baseline. - line-height: 1; + vertical-align: center; } &__category-header-row { From c4e9b4f4ab220feed35460c7c94a0b6e9c293754 Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Wed, 6 May 2026 10:58:36 +0100 Subject: [PATCH 09/13] fix(ai): move ul.steps rule to top-level so it overrides wp-admin reset MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The rule was nested inside .jetpack-ai-mcp-setup{} which compiled it to a descendant selector — no such ancestor exists in the markup, so the wp-admin ul { list-style: none } reset was winning. Co-Authored-By: Claude Sonnet 4.6 --- projects/plugins/jetpack/_inc/client/ai/mcp/style.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss b/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss index 4778382cc9a0..e0d89183a04d 100644 --- a/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss +++ b/projects/plugins/jetpack/_inc/client/ai/mcp/style.scss @@ -118,6 +118,11 @@ } } +// wp-admin resets list-style on ul; restore bullets for the steps list. +ul.jetpack-ai-mcp-setup__steps { + list-style: disc; +} + .jetpack-ai-mcp-setup { &__steps { @@ -129,11 +134,6 @@ } } - // wp-admin resets list-style globally; restore bullets. - ul.jetpack-ai-mcp-setup__steps { - list-style: disc; - } - &__code { font-size: 12px; background: var(--color-neutral-5, #f0f0f1); From 7a8479c348c4ec86bb01c2dcec5f89cfc61b283e Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Wed, 6 May 2026 19:01:10 +0100 Subject: [PATCH 10/13] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- .../plugins/jetpack/_inc/client/ai/mcp/categories.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js b/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js index f9d444b7d61a..77c54884d443 100644 --- a/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js +++ b/projects/plugins/jetpack/_inc/client/ai/mcp/categories.js @@ -151,11 +151,10 @@ export function getSubCategory( toolId, ability ) { return subCategory; } } - // 'sites'-category tools with no Design prefix stay in the Sites card's sub-group. - if ( apiCategory === 'sites' ) { - return API_CATEGORY_TO_SUB_CATEGORY.sites; - } - return undefined; + // Tools in these API categories should still be rendered even when their + // IDs do not match a known Design prefix, so fall back to the category's + // default sub-category instead of returning undefined. + return API_CATEGORY_TO_SUB_CATEGORY[ apiCategory ]; } if ( apiCategory ) { From 00f98fcf8bb8057e52dcc95247ef19bc783f205c Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Wed, 6 May 2026 19:01:26 +0100 Subject: [PATCH 11/13] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- .../changelog/aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/plugins/jetpack/changelog/aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes b/projects/plugins/jetpack/changelog/aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes index 2e4faa1ba018..1f0d21ebebb4 100644 --- a/projects/plugins/jetpack/changelog/aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes +++ b/projects/plugins/jetpack/changelog/aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes @@ -1,4 +1,4 @@ Significance: patch Type: bugfix -fix(ai): UI polish for MCP settings — fix browser Back button navigation, change setup instructions to unordered lists, fix 'All enabled' label vertical alignment, and tighten toggle help-text spacing +Improved the MCP settings UI by fixing browser Back button navigation, changing setup instructions to unordered lists, correcting the 'All enabled' label vertical alignment, and tightening toggle help-text spacing. From 1ae19cb615c189996d9255fbcc10b5e3b0a8445d Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Wed, 6 May 2026 19:39:20 +0100 Subject: [PATCH 12/13] fix(my-jetpack): fix PHP deprecated notice for null array offset in get_long_description_by_usage_tier() Cast $tier to (int) before using as array key so that null returned by get_next_usage_tier() maps to 0 rather than triggering the PHP 8.1+ "Using null as an array offset is deprecated" notice. Co-Authored-By: Claude Sonnet 4.6 --- .../aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes | 4 ++++ .../packages/my-jetpack/src/products/class-jetpack-ai.php | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 projects/packages/my-jetpack/changelog/aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes diff --git a/projects/packages/my-jetpack/changelog/aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes b/projects/packages/my-jetpack/changelog/aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes new file mode 100644 index 000000000000..8fdc17645c8f --- /dev/null +++ b/projects/packages/my-jetpack/changelog/aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Fix PHP deprecated notice: cast $tier to int before using as array offset in get_long_description_by_usage_tier() to handle null from get_next_usage_tier() diff --git a/projects/packages/my-jetpack/src/products/class-jetpack-ai.php b/projects/packages/my-jetpack/src/products/class-jetpack-ai.php index e52030dc34e4..ceafd804dd8d 100644 --- a/projects/packages/my-jetpack/src/products/class-jetpack-ai.php +++ b/projects/packages/my-jetpack/src/products/class-jetpack-ai.php @@ -244,7 +244,7 @@ public static function get_long_description_by_usage_tier( $tier ) { ); $tiered_description = __( 'Upgrade and increase the amount of your available monthly requests to continue using the most advanced AI technology Jetpack has to offer.', 'jetpack-my-jetpack' ); - return isset( $long_descriptions[ $tier ] ) ? $long_descriptions[ $tier ] : $tiered_description; + return isset( $long_descriptions[ (int) $tier ] ) ? $long_descriptions[ (int) $tier ] : $tiered_description; } /** From c789245a4ae76f35bf3a07d5b7cef28d020e08dc Mon Sep 17 00:00:00 2001 From: Eoin Gallagher Date: Wed, 6 May 2026 21:04:59 +0100 Subject: [PATCH 13/13] fix(my-jetpack): refactor get_long_description_by_usage_tier() to switch statement Per review feedback: replace the sparse-keyed array + isset pattern with a switch on (int) $tier. Same behavior (null still maps to default), more readable. Also widen the @param to int|null since get_next_usage_tier() documents a null return. Co-Authored-By: Claude Sonnet 4.6 --- .../src/products/class-jetpack-ai.php | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/projects/packages/my-jetpack/src/products/class-jetpack-ai.php b/projects/packages/my-jetpack/src/products/class-jetpack-ai.php index ceafd804dd8d..0bbe62df8ce6 100644 --- a/projects/packages/my-jetpack/src/products/class-jetpack-ai.php +++ b/projects/packages/my-jetpack/src/products/class-jetpack-ai.php @@ -234,17 +234,18 @@ public static function get_description() { /** * Get the internationalized usage tier long description by tier * - * @param int $tier The usage tier. + * @param int|null $tier The usage tier. * @return string */ public static function get_long_description_by_usage_tier( $tier ) { - $long_descriptions = array( - 1 => __( 'Jetpack AI Assistant brings the power of AI right into your WordPress editor, letting your content creation soar to new heights.', 'jetpack-my-jetpack' ), - 100 => __( 'The most advanced AI technology Jetpack has to offer.', 'jetpack-my-jetpack' ), - ); - $tiered_description = __( 'Upgrade and increase the amount of your available monthly requests to continue using the most advanced AI technology Jetpack has to offer.', 'jetpack-my-jetpack' ); - - return isset( $long_descriptions[ (int) $tier ] ) ? $long_descriptions[ (int) $tier ] : $tiered_description; + switch ( (int) $tier ) { + case 1: + return __( 'Jetpack AI Assistant brings the power of AI right into your WordPress editor, letting your content creation soar to new heights.', 'jetpack-my-jetpack' ); + case 100: + return __( 'The most advanced AI technology Jetpack has to offer.', 'jetpack-my-jetpack' ); + default: + return __( 'Upgrade and increase the amount of your available monthly requests to continue using the most advanced AI technology Jetpack has to offer.', 'jetpack-my-jetpack' ); + } } /**