Plugin sorting via priority property in registerPlugin

packages/edit-post/src/components/sidebar/plugin-sidebar/index.js

@@ -136,6 +136,7 @@ export default compose(
 		return {
 			icon: ownProps.icon || context.icon,
 			sidebarName: `${ context.name }/${ ownProps.name }`,
+			priority: ownProps.priority || context.priority,
 		};
 	} ),
 	withSelect( ( select, { sidebarName } ) => {

packages/plugins/README.md

@@ -111,6 +111,7 @@ function Component() {
 registerPlugin( 'plugin-name', {
 	icon: 'smiley',
 	render: Component,
+	priority: 5
 } );
 ```
 
@@ -138,6 +139,7 @@ const Component = () => (
 registerPlugin( 'plugin-name', {
 	icon: 'smiley',
 	render: Component,
+	priority: 5
 } );
 ```
 
@@ -147,6 +149,7 @@ _Parameters_
 -   _settings_ `Object`: The settings for this plugin.
 -   _settings.icon_ `(string|WPElement|Function)`: An icon to be shown in the UI. It can be a slug of the Dashicon, or an element (or function returning an element) if you choose to render your own SVG.
 -   _settings.render_ `Function`: A component containing the UI elements to be rendered.
+-   _settings.priority_ `number`: Allows for controlling the display order of this plugin. Default is 10.
 
 _Returns_
 

packages/plugins/src/api/index.js

@@ -25,6 +25,7 @@ const plugins = {};
  * @param {string|WPElement|Function} settings.icon   An icon to be shown in the UI. It can be a slug of the Dashicon,
  * or an element (or function returning an element) if you choose to render your own SVG.
  * @param {Function}                  settings.render A component containing the UI elements to be rendered.
+ * @param {number}                       settings.priority Allows for controlling the display order of this plugin. Default is 10.
  *
  * @example <caption>ES5</caption>
  * ```js
@@ -59,6 +60,7 @@ const plugins = {};
  * registerPlugin( 'plugin-name', {
  * 	icon: 'smiley',
  * 	render: Component,
+ * 	priority: 5
  * } );
  * ```
  *
@@ -87,6 +89,7 @@ const plugins = {};
  * registerPlugin( 'plugin-name', {
  * 	icon: 'smiley',
  * 	render: Component,
+ * 	priority: 5
  * } );
  * ```
  *
@@ -105,6 +108,13 @@ export function registerPlugin( name, settings ) {
 		);
 		return null;
 	}
+	const { priority = 10 } = settings;
+	if ( priority !== 0 && ( priority.length === 0 || typeof priority !== 'number' ) ) {
+		console.error(
+			'The "priority" property must be a number'
+		);
+		return null;
+	}
 	if ( ! /^[a-z][a-z0-9-]*$/.test( name ) ) {
 		console.error(
 			'Plugin names must include only lowercase alphanumeric characters or dashes, and start with a letter. Example: "my-plugin".'
@@ -129,6 +139,7 @@ export function registerPlugin( name, settings ) {
 	plugins[ name ] = {
 		name,
 		icon: 'admin-plugins',
+		priority,
 		...settings,
 	};
 

packages/plugins/src/api/test/index.js

@@ -29,6 +29,7 @@ describe( 'registerPlugin', () => {
 			name,
 			render: Component,
 			icon,
+			priority: 10,
 		} );
 	} );
 
@@ -65,4 +66,28 @@ describe( 'registerPlugin', () => {
 		} );
 		expect( console ).toHaveErroredWith( 'Plugin "plugin" is already registered.' );
 	} );
+
+	it( 'fails to register a plugin with a priority set to an empty string', () => {
+		registerPlugin( 'priority-as-string', {
+			render: () => {},
+			priority: '',
+		} );
+		expect( console ).toHaveErroredWith( 'The "priority" property must be a number' );
+	} );
+
+	it( 'fails to register a plugin with a priority set to boolean true', () => {
+		registerPlugin( 'priority-as-string', {
+			render: () => {},
+			priority: true,
+		} );
+		expect( console ).toHaveErroredWith( 'The "priority" property must be a number' );
+	} );
+
+	it( 'fails to register a plugin with a priority set to boolean false', () => {
+		registerPlugin( 'priority-as-string', {
+			render: () => {},
+			priority: false,
+		} );
+		expect( console ).toHaveErroredWith( 'The "priority" property must be a number' );
+	} );
 } );

packages/plugins/src/components/plugin-area/index.js

@@ -1,13 +1,14 @@
 /**
  * External dependencies
  */
-import { map } from 'lodash';
+import { map, sortBy } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
 import { addAction, removeAction } from '@wordpress/hooks';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -58,16 +59,22 @@ class PluginArea extends Component {
 	}
 
 	getCurrentPluginsState() {
-		return {
-			plugins: map( getPlugins(), ( { icon, name, render } ) => {
+		const plugins = compose(
+			( list ) => map( list, ( { icon, name, render, priority } ) => {
 				return {
 					Plugin: render,
 					context: {
 						name,
 						icon,
+						priority,
 					},
 				};
 			} ),
+			( list ) => sortBy( list, [ 'priority' ] ),
+		)( getPlugins() );
+
+		return {
+			plugins,
 		};
 	}
 

packages/plugins/src/components/plugin-context/index.js

@@ -7,6 +7,7 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 const { Consumer, Provider } = createContext( {
 	name: null,
 	icon: null,
+	priority: null,
 } );
 
 export { Provider as PluginContextProvider };