Command Center: Request for feedback

As the Site Editor and WP-Adminadmin (and super admin) get more and more features, the need to navigate quickly and efficiently across them is becoming increasingly important. Visual editors and code editors alike are adopting the command center as a solution to this problem, with examples such as Visual Studio Code for desktop applications and Notion in the web applications spectrum.

Prototype

Initially proposed as part of the WP-Admin experience revamp post, an early prototype of a command center has now been implemented as an experiment in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, starting in Gutenberg 15.6. Once enabled in Gutenberg > Experiments, you can navigate to the Site editor and hit the cmd + k (or ctrl + k on Windows and Linux) shortcut to open the command center, run commands and quickly access frequently used actions.

Initially implemented in the Post and Site editors, the command center is meant to be added to all of WP-Admin in the future.

We would love to hear your feedback on this feature and its APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.:

• How does the user experience feel? (The feature will be tested in the FSE Outreach Program).
• Are the APIs (detailed down here) capable enough to address third-party use-cases?

To follow progress and provide feedback, please refer to this issue on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/: https://github.com/WordPress/gutenberg/issues/48457.

API

Note: The following API is available in Gutenberg trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision. and will be included in the next Gutenberg release. As it’s an early prototype, both design and API changes are possible before the API lands in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. in the next WordPress release.

One aspect worth highlighting is the proposed API to interact with the command center. The command center has been developed as an independent @wordpress/commands package. It offers APIs to render and register commands dynamically. These extension points allow plugins to inject any commands of their liking and opens the door for interactions with LLMs, as outlined in this previous post.

There are two ways to register commands: static commands and dynamic commands.

Static commands

Static commands can be registered using the wp.data.dispatch( wp.commands.store ).registerCommand action or using the wp.data.useCommand ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. hook. Both methods receive a command object as an argument, which provides a unique name, a label, an icon, a callback function that is called when the command is selected, and potentially a context.

Example:

wp.commands.useCommand( {
	name: 'add new post',
	label: __( 'Add new post' ),
	icon: plus,
	callback: () => {
		document.location.href = 'post-new.php';
	},
} );

Dynamic commands

Dynamic commands, on the other hand, are registered using “command loaders.” These are needed when the command list depends on the search term entered by the user in the command center input. For example, when a user types “contact”, the command center need to filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. the available pages using that input.

Example:

function usePageSearchCommandLoader( { search } ) {
	// Retreiving the pages for the "search" term
	const { records, isLoading } = useSelect(
		( select ) => {
			const { getEntityRecords } = select( coreStore );
			const query = {
				search: !! search ? search : undefined,
				per_page: 10,
				orderby: search ? 'relevance' : 'date',
			};
			return {
				records: getEntityRecords( 'postType', 'page', query ),
				isLoading: ! select( coreStore ).hasFinishedResolution(
					'getEntityRecords',
					[ 'postType', 'page', query ]
				),
			};
		},
		[ search ]
	);

	// Creating the commands
	const commands = useMemo( () => {
		return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {
			return {
				name: record.title?.rendered + ' ' + record.id,
				label: record.title?.rendered
					? record.title?.rendered
					: __( '(no title)' ),
				icon: icons[ postType ],
				callback: ( { close } ) => {
					const args = {
						postType,
						postId: record.id,
						...extraArgs,
					};
					document.location = addQueryArgs( 'site-editor.php', args );
					close();
				},
			};
		} );
	}, [ records, history ] );

	return {
		commands,
		isLoading,
	};
}

useCommandLoader( {
	name: 'myplugin/page-search',
	hook: usePageSearchCommandLoader,
} );

Contextual commands

Commands can be contextual. This means that in a given context (for example, when navigating the site editor, or when editing a template), some specific commands are given more priority and are visible as soon as you open the command center. And when typing the command center, these contextual commands are shown above the rest of the commands.

At the moment, two contexts have been implemented:

• site-editor This is the context that is set when you are navigating in the site editor (sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. visible).
• site-editor-edit This is the context that is set when you are editing a document (template, template part or page) in the site editor.

As the usage of the Command Center expands, more contexts will be added. 

To attach a command or a command loader to a given context, it is as simple as adding the context property (with the right context value from the available contexts above) to the useCommand or useCommandLoader calls.

---

The command center and its API will be valuable additions to WordPress Core, and any feedback you have to offer will be greatly appreciated.

Thank you for your continued support and contributions to WordPress.

Props @annezazu and @priethor for the post review. and @jameskoster for the video

#gutenberg