Allow links in Plugins group in the More Menu

[gziolo]

Description

Fixes #11570.

As a first iteration, we can offer PluginMoreMenuItem which takes onClick callback and inserts menu items inside Plugins group. it would allow to handle Modal as well. It might require some code though.

It also includes an option to pass url which turns the menu item into a link.

How has this been tested?

Copy those snippets into JS console and make sure that there are new items added in More Menu. Make sure it produces a valid HTML which follows accessibility guidelines:

• button for items with onClick
• link for items with url

( function() {
	const { createElement } = wp.element;
	const { PluginMoreMenuItem } = wp.editPost;
	const { registerPlugin } = wp.plugins;

	registerPlugin( 'my-plugin-more-menu-button', {
		render() {
			return createElement(
				PluginMoreMenuItem,
				{
					icon: 'smiley',
					onClick: function() { alert( 'Smile :)' ); },
				},
				'Smile :)'
			);
		},
	} );
} )();

( function() {
	const { get } = lodash;
	const { createElement } = wp.element;
	const { PluginMoreMenuItem } = wp.editPost;
	const { addQueryArgs } = wp.url;
	const { registerPlugin } = wp.plugins;

	registerPlugin( 'classic-editor-add-submenu', {
		render() {
			const url = addQueryArgs( document.location.href, { 'classic-editor': null } );
			const linkText = get( window, [ 'classicEditorPluginL10n', 'linkText' ] ) || 'Switch to Classic Editor';

			return createElement(
				PluginMoreMenuItem,
				{
					icon: 'editor-kitchensink',
					href: url,
				},
				linkText
			);
		},
	} );
} )();

Screenshots

TODO

• Docs for PluginMoreMenuItem (similar to what we have here)
• New unit tests
• New e2e tests (similar to what we have here) it's indirectly tested by the sidebar menu item which uses this new component behind the scenes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[azaozz]

Works great here. This way a plugin can add a (simple) link to the menu when needed, or specify a callback for the onClick. Properly adds either an <a> tag or a <button> depending on whether href was passed in the props. Also adds all needed a11y attributes by default.

This "opens up" the menu for plugins and makes it very easy to use.

Tested with different settings and in Chrome, Firefox and Edge on Win10. All works well.

[gziolo]

@youknowriad - I addressed your feedback to make PluginMoreMenuItem more flexible and use it inside PluginSidebarMoreMenuItem.

I also added docs and tests, PR should be ready to go.

[gziolo]

@tofumatt or @afercia - could you confirm this component is accessible?

[tofumatt]

Looks good to me accessibility-wise! Just a little comment about docs, really 😄

[afercia]

Looks good to me. ARIA menu items can be used for links. References:

https://www.w3.org/TR/wai-aria-1.1/#menu
https://www.w3.org/TR/wai-aria-1.1/#menuitem
https://www.w3.org/TR/wai-aria-practices-1.1/#menu

Navigation Menubar Example:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html

It would be really nice to not allow developers to use href="#" links. Is there any way to check the passed url value and throw an error if the value is #? Currently, it is possible to do something like:

( function() {
	const { createElement } = wp.element;
	const { PluginMoreMenuItem } = wp.editPost;
	const { registerPlugin } = wp.plugins;

	registerPlugin( 'classic-editor-add-submenu-hash', {
		render() {
			const url = "#";
			const linkText = "Hash link";

			return createElement(
				PluginMoreMenuItem,
				{
					icon: 'editor-kitchensink',
					href: url,
				},
				linkText
			);
		},
	} );
} )();

and this is bad for semantics and accessibility. A button should be used instead.

Also a value like #non-existing-id would be bad, but I'm not sure there's an easy way to prevent this case.

[gziolo]

It would be really nice to not allow developers to use href="#" links. Is there any way to check the passed url value and throw an error if the value is #? Currently, it is possible to do something like:

It would be interesting to explore whether we could detect using a hash pointing to the same url and render a button instead of an anchor. We might want to use window.location.hash instead as one of the onClick events (we already close the menu when user clicks menu/item).