Add command palette commands to navigate to options pages

assets/src/js/commands/admin-commands.js

@@ -23,6 +23,7 @@ import {
 	tool,
 	upload,
 	download,
+	page,
 } from '@wordpress/icons';
 
 /**
@@ -165,10 +166,34 @@ const registerAdminCommands = () => {
 		} );
 	};
 
+	// Options page commands — one per registered SCF options page.
+	const optionsPageCommands = [];
+	if ( Array.isArray( window.scfOptionsPages ) ) {
+		window.scfOptionsPages.forEach( ( optionsPage ) => {
+			if ( ! optionsPage?.menu_slug ) {
+				return;
+			}
+			optionsPageCommands.push( {
+				name: 'options-page-' + optionsPage.menu_slug,
+				label: optionsPage.menu_title || optionsPage.page_title,
+				url: 'admin.php',
+				urlArgs: { page: optionsPage.menu_slug },
+				icon: page,
+				keywords: [
+					'options',
+					'settings',
+					'scf',
+					optionsPage.menu_title,
+					optionsPage.page_title,
+				].filter( Boolean ),
+			} );
+		} );
+	}
+
 	// WordPress 6.9+ adds Command Palette commands for all admin menu items.
 	// For older versions, we need to register them manually. The most reliable way to
 	// detect this is to check if the commands are already registered.
-	viewCommands.forEach( ( command ) => {
+	const registerIfNotAutoRegistered = ( command ) => {
 		const commandUrl = addQueryArgs( command.url, command.urlArgs );
 		// WordPress stores destination URLs in the command *name*, appended to
 		// the menu slug (which is also a relative URL), resulting in somewhat
@@ -178,11 +203,15 @@ const registerAdminCommands = () => {
 			return;
 		}
 		registerCommand( command );
-	} );
+	};
+
+	viewCommands.forEach( registerIfNotAutoRegistered );
 
 	// "Create New" commands are not automatically registered by WordPress,
 	// so we always register them.
 	createCommands.forEach( registerCommand );
+
+	optionsPageCommands.forEach( registerIfNotAutoRegistered );
 };
 
 if ( 'requestIdleCallback' in window ) {

includes/admin/admin-commands.php

@@ -39,6 +39,31 @@ function acf_commands_init() {
 	// Only load admin commands if user has SCF admin capabilities.
 	if ( current_user_can( acf_get_setting( 'capability' ) ) ) {
 		wp_enqueue_script( 'scf-commands-admin' );
+
+		// Localize registered options pages so the JS can register a palette
+		// command per page. Filtered by capability so users only see pages
+		// they can access.
+		$pages = acf_get_options_pages();
+		if ( ! empty( $pages ) ) {
+			$localized = array();
+			foreach ( $pages as $page ) {
+				if ( ! current_user_can( $page['capability'] ) ) {
+					continue;
+				}
+				$localized[] = array(
+					'menu_slug'  => $page['menu_slug'],
+					'menu_title' => $page['menu_title'],
+					'page_title' => $page['page_title'],
+				);
+			}
+			if ( ! empty( $localized ) ) {
+				wp_localize_script(
+					'scf-commands-admin',
+					'scfOptionsPages',
+					$localized
+				);
+			}
+		}
 	}
 }
 

tests/e2e/command-palette.spec.ts

@@ -171,6 +171,56 @@
 					).toHaveValue( 'SCF E2E Test Type' );
 				} );
 			} );
+
+			test.describe( 'Options page-specific commands', () => {
+				test.beforeAll( async ( { requestUtils } ) => {
+					await requestUtils.activatePlugin(
+						'scf-test-setup-options-page'
+					);
+				} );
+
+				test.afterAll( async ( { requestUtils } ) => {
+					await requestUtils.deactivatePlugin(
+						'scf-test-setup-options-page'
+					);
+				} );
+
+				test( 'should register a command for the registered options page', async ( {
+					page,
+				} ) => {
+					await openCommandPalette( page );
+
+					const input = getCommandPaletteInput( page );
+
+					await input.fill( 'SCF E2E Test Options' );
+
+					const option = page.getByRole( 'option', {
+						name: /SCF E2E Test Options/,
+					} );
+
+					await expect( option ).toHaveCount( 1 );
+				} );
+
+				test( 'should navigate to the options page via command palette', async ( {
+					page,
+				} ) => {
+					await openCommandPalette( page );
+
+					const input = getCommandPaletteInput( page );
+
+					await input.fill( 'SCF E2E Test Options' );
+
+					await page
+						.getByRole( 'option', {
+							name: /SCF E2E Test Options/,
+						} )
+						.click();
+
+					await expect( page ).toHaveURL(
+						/admin\.php\?page=scf-e2e-test-options/
+					);
+				} );
+			} );
 		} );
 	} );
 } );

tests/e2e/plugins/scf-test-setup-options-page.php

@@ -0,0 +1,37 @@
+<?php
+/**
+ * Plugin Name: SCF Test Setup Options Page
+ * Description: Creates SCF options page for E2E testing
+ * Version: 1.0.0
+ * Author: SCF Testing
+ * Requires Plugins: secure-custom-fields
+ *
+ * @package wordpress/secure-custom-fields
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Register an options page for command palette E2E tests.
+ */
+function scf_test_register_options_page() {
+	if ( ! function_exists( 'acf_update_options_page' ) || acf_get_options_page( 'scf-e2e-test-options' ) ) {
+		return;
+	}
+
+	acf_update_options_page(
+		'scf-e2e-test-options',
+		array(
+			'page_title' => 'SCF E2E Test Options',
+			'menu_title' => 'SCF E2E Test Options',
+			'menu_slug'  => 'scf-e2e-test-options',
+			'capability' => 'edit_posts',
+			'redirect'   => false,
+		)
+	);
+}
+
+add_action( 'acf/init', 'scf_test_register_options_page', 20 );