Revisions

packages/edit-post/src/components/header/index.js

@@ -94,10 +94,7 @@ function Header() {
 					aria-expanded={ isEditorSidebarOpened }
 					shortcut={ shortcut }
 				/>
-				<PinnedItems.Slot
-					scope="core/edit-post"
-					as={ [ 'div', Button ] }
-				/>
+				<PinnedItems.Slot scope="core/edit-post" />
 				<MoreMenu />
 			</div>
 		</div>

packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { ComplementaryArea } from '@wordpress/interface';
+import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
 
 /**
  * Renders a menu item in `Plugins` group in `More Menu` drop down,
@@ -55,6 +55,6 @@ import { ComplementaryArea } from '@wordpress/interface';
 
 export default function PluginSidebarMoreMenuItem( props ) {
 	return (
-		<ComplementaryArea.MoreMenuItem scope="core/edit-post" { ...props } />
+		<ComplementaryAreaMoreMenuItem scope="core/edit-post" { ...props } />
 	);
 }

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

@@ -36,7 +36,7 @@ const SettingsSidebar = () => {
 	}
 	return (
 		<PluginSidebarEditPost
-			complementaryAreaIdentifier={ sidebarName }
+			identifier={ sidebarName }
 			header={ <SettingsHeader sidebarName={ sidebarName } /> }
 			closeLabel={ __( 'Close settings' ) }
 			headerClassName="edit-post-sidebar__panel-tabs"

packages/edit-site/src/components/header/index.js

@@ -8,7 +8,6 @@ import {
 	Inserter,
 } from '@wordpress/block-editor';
 import { PinnedItems } from '@wordpress/interface';
-import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -75,10 +74,7 @@ export default function Header() {
 			</div>
 			<div className="edit-site-header__actions">
 				<SaveButton />
-				<PinnedItems.Slot
-					as={ [ 'div', Button ] }
-					scope="core/edit-site"
-				/>
+				<PinnedItems.Slot scope="core/edit-site" />
 				<MoreMenu />
 			</div>
 		</div>

packages/edit-site/src/components/sidebar/index.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { createSlotFill } from '@wordpress/components';
-import { ComplementaryArea } from '@wordpress/interface';
+import {
+	ComplementaryArea,
+	ComplementaryAreaMoreMenuItem,
+} from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
 import { cog, pencil } from '@wordpress/icons';
 
@@ -15,19 +18,19 @@ const DefaultSidebar = ( { areaId, title, icon, children } ) => {
 		<>
 			<ComplementaryArea
 				scope="core/edit-site"
-				complementaryAreaIdentifier={ areaId }
+				identifier={ areaId }
 				title={ title }
 				icon={ icon }
 			>
 				{ children }
 			</ComplementaryArea>
-			<ComplementaryArea.MoreMenuItem
+			<ComplementaryAreaMoreMenuItem
 				scope="core/edit-site"
-				complementaryAreaIdentifier={ areaId }
+				identifier={ areaId }
 				icon={ icon }
 			>
 				{ title }
-			</ComplementaryArea.MoreMenuItem>
+			</ComplementaryAreaMoreMenuItem>
 		</>
 	);
 };

packages/interface/src/components/action-item/README.md

@@ -49,3 +49,10 @@ Callback function executed when a click on the item happens.
 - Type: `Function`
 - Required: no
 
+### as
+
+The component that is going to be used to render a the action item. If the component is not passed it defaults to the component specified on the slot.
+
+- Type: `Array`
+- Required: no
+

packages/interface/src/components/action-item/index.js

@@ -31,11 +31,12 @@ function ActionItemSlot( {
 	);
 }
 
-function ActionItem( { name, onClick, ...props } ) {
+function ActionItem( { name, as, onClick, ...props } ) {
 	return (
 		<Fill name={ name }>
 			{ ( fillProps ) => {
-				const { onClick: fpOnClick, as: Item } = fillProps;
+				const { onClick: fpOnClick, as: fpAs } = fillProps;
+				const Item = as || fpAs || Button;
 				return (
 					<Item
 						onClick={

packages/interface/src/components/complementary-area-context/index.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { withPluginContext } from '@wordpress/plugins';
+
+export default withPluginContext( ( context, ownProps ) => {
+	return {
+		icon: ownProps.icon || context.icon,
+		identifier:
+			ownProps.identifier || `${ context.name }/${ ownProps.name }`,
+	};
+} );

packages/interface/src/components/complementary-area-header/index.js

@@ -11,7 +11,7 @@ import { close } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { ComplementaryAreaToggle } from '../complementary-area';
+import ComplementaryAreaToggle from '../complementary-area-toggle';
 
 const ComplementaryAreaHeader = ( {
 	smallScreenTitle,

packages/interface/src/components/complementary-area-more-menu-item/README.md

@@ -0,0 +1,44 @@
+ComplementaryAreaMoreMenuItem
+=============================
+
+Renders an item in the more menu that allows toggling a complementary area.
+Props not referenced here are passed to the component used to render the menu item.
+
+### scope
+
+The scope of the complementary area e.g: "core/edit-post", "core/edit-site", "myplugin/custom-screen-a",
+
+- Type: `String`
+- Required: Yes
+
+### identifier
+
+Identifier of the complementary area. The string is saved on the store and allows to identify which of the sidebars is active.
+
+- Type: `String`
+- Required: No
+- Default: Concatenation of `name` of the plugin extracted from the context (when available) with the `targe` of the sidebar passed as a property.
+
+### target
+
+Name of the complementary area. The name of the complementarity area is concatenated with the name of the plugin to form the identifier of the complementary area. The name of the plugin is extracted from the plugin context where the sidebar is rendered. If there is no plugin context available or there is a need to specify a custom identifier, please use the `identifier` property instead.
+
+- Type: `String`
+- Required: No
+
+### selectedIcon
+
+An icon to use when the complementary area is open e.g: a check mark.
+If the prop is not passed the icon of the complementary area or of the plugin is used.
+
+
+- Type: `Element`
+- Required: no
+
+### as
+
+A component used to render the item.
+Defaults to what was specified in the slot for menu items but specific component can be used.
+
+- Type: `Component`
+- Required: no

packages/interface/src/components/complementary-area-more-menu-item/index.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { check } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import ComplementaryAreaToggle from '../complementary-area-toggle';
+import ActionItem from '../action-item';
+
+export default function ComplementaryAreaMoreMenuItem( {
+	scope,
+	target,
+	...props
+} ) {
+	return (
+		<ComplementaryAreaToggle
+			as={ ( toggleProps ) => {
+				return (
+					<ActionItem
+						name={ `${ scope }/plugin-more-menu` }
+						{ ...toggleProps }
+					/>
+				);
+			} }
+			role="menuitemcheckbox"
+			selectedIcon={ check }
+			name={ target }
+			scope={ scope }
+			{ ...props }
+		/>
+	);
+}

packages/interface/src/components/complementary-area-toggle/README.md

@@ -0,0 +1,46 @@
+ComplementaryAreaToggle
+=============================
+
+`ComplementaryArea.Toggle` is a component used to render a UI allowing the toggle (open/close) a complementary area.
+
+## Props
+
+### scope
+
+The scope of the complementary area e.g: "core/edit-post", "core/edit-site", "myplugin/custom-screen-a",
+
+- Type: `String`
+- Required: Yes
+
+### identifier
+
+Identifier of the complementary area.
+
+- Type: `String`
+- Required: No
+- Default: Concatenation of `name` of the plugin extracted from the context (when available) with the "name" of the sidebar passed as a property.
+
+### name
+
+Name of the complementary area. The name of the complementarity area is concatenated with the name of the plugin to form the identifier of the complementary area. The name of the plugin is extracted from the plugin context where the sidebar is rendered. If there is no plugin context available or there is a need to specify a custom identifier, please use the `identifier` property instead.
+
+- Type: `String`
+- Required: No
+
+
+### selectedIcon
+
+An icon to use when the complementary area is open e.g: a check mark.
+If the prop is not passed the icon of the complementary area or of the plugin is used.
+
+
+- Type: `Element`
+- Required: no
+
+### as
+
+A component used to render the toggle.
+Defaults to and `Button` can be changed to `MenuItem`or a custom component for example.
+
+- Type: `Component`
+- Required: no

packages/interface/src/components/complementary-area-toggle/index.js

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import complementaryAreaContext from '../complementary-area-context';
+
+function ComplementaryAreaToggle( {
+	as = Button,
+	scope,
+	identifier,
+	icon,
+	selectedIcon,
+	...props
+} ) {
+	const ComponentToUse = as;
+	const isSelected = useSelect(
+		( select ) =>
+			select( 'core/interface' ).getActiveComplementaryArea( scope ) ===
+			identifier,
+		[ identifier ]
+	);
+	const { enableComplementaryArea, disableComplementaryArea } = useDispatch(
+		'core/interface'
+	);
+	return (
+		<ComponentToUse
+			icon={ selectedIcon && isSelected ? selectedIcon : icon }
+			isSelected={ isSelected }
+			onClick={ () => {
+				if ( isSelected ) {
+					disableComplementaryArea( scope );
+				} else {
+					enableComplementaryArea( scope, identifier );
+				}
+			} }
+			{ ...omit( props, [ 'name' ] ) }
+		/>
+	);
+}
+
+export default complementaryAreaContext( ComplementaryAreaToggle );