@wordpress/edit-site 3.0.2 → 3.0.3

package/src/components/sidebar/global-styles-sidebar.js

@@ -1,176 +1,33 @@
-/**
- * External dependencies
- */
-import { map, sortBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { Button, PanelBody, TabPanel } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { getBlockType } from '@wordpress/blocks';
-import { useMemo } from '@wordpress/element';
+import { styles } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import {
-	useGlobalStylesContext,
-	useGlobalStylesReset,
-} from '../editor/global-styles-provider';
+import { useGlobalStylesReset } from '../editor/global-styles-provider';
 import DefaultSidebar from './default-sidebar';
-import {
-	default as TypographyPanel,
-	useHasTypographyPanel,
-} from './typography-panel';
-import { default as BorderPanel, useHasBorderPanel } from './border-panel';
-import { default as ColorPanel, useHasColorPanel } from './color-panel';
-import {
-	default as DimensionsPanel,
-	useHasDimensionsPanel,
-} from './dimensions-panel';
-
-function GlobalStylesPanel( {
-	wrapperPanelTitle,
-	context,
-	getStyle,
-	setStyle,
-	getSetting,
-	setSetting,
-} ) {
-	const hasBorderPanel = useHasBorderPanel( context );
-	const hasColorPanel = useHasColorPanel( context );
-	const hasTypographyPanel = useHasTypographyPanel( context );
-	const hasDimensionsPanel = useHasDimensionsPanel( context );
-
-	if ( ! hasColorPanel && ! hasTypographyPanel && ! hasDimensionsPanel ) {
-		return null;
-	}
-
-	const content = (
-		<>
-			{ hasTypographyPanel && (
-				<TypographyPanel
-					context={ context }
-					getStyle={ getStyle }
-					setStyle={ setStyle }
-				/>
-			) }
-			{ hasColorPanel && (
-				<ColorPanel
-					context={ context }
-					getStyle={ getStyle }
-					setStyle={ setStyle }
-					getSetting={ getSetting }
-					setSetting={ setSetting }
-				/>
-			) }
-			{ hasDimensionsPanel && (
-				<DimensionsPanel
-					context={ context }
-					getStyle={ getStyle }
-					setStyle={ setStyle }
-				/>
-			) }
-			{ hasBorderPanel && (
-				<BorderPanel
-					context={ context }
-					getStyle={ getStyle }
-					setStyle={ setStyle }
-				/>
-			) }
-		</>
-	);
-	if ( ! wrapperPanelTitle ) {
-		return content;
-	}
-	return (
-		<PanelBody title={ wrapperPanelTitle } initialOpen={ false }>
-			{ content }
-		</PanelBody>
-	);
-}
+import GlobalStyles from '../global-styles';
 
-function getPanelTitle( blockName ) {
-	const blockType = getBlockType( blockName );
-
-	// Protect against blocks that aren't registered
-	// eg: widget-area
-	if ( blockType === undefined ) {
-		return blockName;
-	}
-
-	return blockType.title;
-}
-
-function GlobalStylesBlockPanels( {
-	blocks,
-	getStyle,
-	setStyle,
-	getSetting,
-	setSetting,
-} ) {
-	const panels = useMemo(
-		() =>
-			sortBy(
-				map( blocks, ( block, name ) => {
-					return {
-						block,
-						name,
-						wrapperPanelTitle: getPanelTitle( name ),
-					};
-				} ),
-				( { wrapperPanelTitle } ) => wrapperPanelTitle
-			),
-		[ blocks ]
-	);
-
-	return map( panels, ( { block, name, wrapperPanelTitle } ) => {
-		return (
-			<GlobalStylesPanel
-				key={ 'panel-' + name }
-				wrapperPanelTitle={ wrapperPanelTitle }
-				context={ block }
-				getStyle={ getStyle }
-				setStyle={ setStyle }
-				getSetting={ getSetting }
-				setSetting={ setSetting }
-			/>
-		);
-	} );
-}
-
-export default function GlobalStylesSidebar( {
-	identifier,
-	title,
-	icon,
-	closeLabel,
-} ) {
-	const {
-		root,
-		blocks,
-		getStyle,
-		setStyle,
-		getSetting,
-		setSetting,
-	} = useGlobalStylesContext();
+export default function GlobalStylesSidebar() {
 	const [ canRestart, onReset ] = useGlobalStylesReset();
 
-	if ( typeof blocks !== 'object' || ! root ) {
-		// No sidebar is shown.
-		return null;
-	}
-
 	return (
 		<DefaultSidebar
 			className="edit-site-global-styles-sidebar"
-			identifier={ identifier }
-			title={ title }
-			icon={ icon }
-			closeLabel={ closeLabel }
+			identifier="edit-site/global-styles"
+			title={ __( 'Styles' ) }
+			icon={ styles }
+			closeLabel={ __( 'Close global styles sidebar' ) }
 			header={
 				<>
-					<strong>{ title }</strong>
+					<strong>{ __( 'Styles' ) }</strong>
+					<span className="edit-site-global-styles-sidebar__beta">
+						{ __( 'Beta' ) }
+					</span>
 					<Button
 						className="edit-site-global-styles-sidebar__reset-button"
 						isSmall
@@ -183,37 +40,7 @@ export default function GlobalStylesSidebar( {
 				</>
 			}
 		>
-			<TabPanel
-				tabs={ [
-					{ name: 'root', title: __( 'Root' ) },
-					{ name: 'block', title: __( 'By Block Type' ) },
-				] }
-			>
-				{ ( tab ) => {
-					/* Per Block Context */
-					if ( 'block' === tab.name ) {
-						return (
-							<GlobalStylesBlockPanels
-								blocks={ blocks }
-								getStyle={ getStyle }
-								setStyle={ setStyle }
-								getSetting={ getSetting }
-								setSetting={ setSetting }
-							/>
-						);
-					}
-					return (
-						<GlobalStylesPanel
-							hasWrapper={ false }
-							context={ root }
-							getStyle={ getStyle }
-							setStyle={ setStyle }
-							getSetting={ getSetting }
-							setSetting={ setSetting }
-						/>
-					);
-				} }
-			</TabPanel>
+			<GlobalStyles />
 		</DefaultSidebar>
 	);
 }

package/src/components/sidebar/index.js

@@ -3,7 +3,7 @@
  */
 import { createSlotFill, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { cog, typography } from '@wordpress/icons';
+import { cog } from '@wordpress/icons';
 import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
@@ -76,12 +76,7 @@ export function SidebarComplementaryAreaFills() {
 					<InspectorSlot bubblesVirtually />
 				) }
 			</DefaultSidebar>
-			<GlobalStylesSidebar
-				identifier="edit-site/global-styles"
-				title={ __( 'Global Styles' ) }
-				closeLabel={ __( 'Close global styles sidebar' ) }
-				icon={ typography }
-			/>
+			<GlobalStylesSidebar />
 		</>
 	);
 }

package/src/components/sidebar/plugin-sidebar/index.js

@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import { ComplementaryArea } from '@wordpress/interface';
+
+/**
+ * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
+ * It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`.
+ * If you wish to display the sidebar, you can with use the `PluginSidebarMoreMenuItem` component or the `wp.data.dispatch` API:
+ *
+ * ```js
+ * wp.data.dispatch( 'core/edit-site' ).openGeneralSidebar( 'plugin-name/sidebar-name' );
+ * ```
+ *
+ * @see PluginSidebarMoreMenuItem
+ *
+ * @param {Object}                props                                 Element props.
+ * @param {string}                props.name                            A string identifying the sidebar. Must be unique for every sidebar registered within the scope of your plugin.
+ * @param {string}                [props.className]                     An optional class name added to the sidebar body.
+ * @param {string}                props.title                           Title displayed at the top of the sidebar.
+ * @param {boolean}               [props.isPinnable=true]               Whether to allow to pin sidebar to the toolbar. When set to `true` it also automatically renders a corresponding menu item.
+ * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var __ = wp.i18n.__;
+ * var el = wp.element.createElement;
+ * var PanelBody = wp.components.PanelBody;
+ * var PluginSidebar = wp.editSite.PluginSidebar;
+ * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+ *
+ * function MyPluginSidebar() {
+ * 	return el(
+ * 			PluginSidebar,
+ * 			{
+ * 				name: 'my-sidebar',
+ * 				title: 'My sidebar title',
+ * 				icon: moreIcon,
+ * 			},
+ * 			el(
+ * 				PanelBody,
+ * 				{},
+ * 				__( 'My sidebar content' )
+ * 			)
+ * 	);
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PanelBody } from '@wordpress/components';
+ * import { PluginSidebar } from '@wordpress/edit-site';
+ * import { more } from '@wordpress/icons';
+ *
+ * const MyPluginSidebar = () => (
+ * 	<PluginSidebar
+ * 		name="my-sidebar"
+ * 		title="My sidebar title"
+ * 		icon={ more }
+ * 	>
+ * 		<PanelBody>
+ * 			{ __( 'My sidebar content' ) }
+ * 		</PanelBody>
+ * 	</PluginSidebar>
+ * );
+ * ```
+ */
+export default function PluginSidebarEditSite( { className, ...props } ) {
+	return (
+		<ComplementaryArea
+			panelClassName={ className }
+			className="edit-site-sidebar"
+			scope="core/edit-site"
+			{ ...props }
+		/>
+	);
+}

package/src/components/sidebar/style.scss

@@ -38,3 +38,43 @@
 		margin-bottom: 0;
 	}
 }
+
+.edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
+	font-size: $default-font-size * 1.2;
+	font-weight: 500;
+}
+
+.edit-site-global-styles-sidebar .components-navigation__item > button span {
+	font-weight: 500;
+}
+
+.edit-site-typography-panel,
+.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
+	border: 0;
+}
+
+.edit-site-global-styles-sidebar__blocks-group {
+	padding-top: $grid-unit-30;
+	border-top: $border-width solid $gray-200;
+}
+
+.edit-site-global-styles-sidebar__blocks-group-help {
+	padding: 0 $grid-unit-20;
+}
+
+.edit-site-global-styles-color-palette-panel {
+	padding: $grid-unit-20;
+}
+
+.edit-site-global-styles-sidebar__beta {
+	display: inline-flex;
+	margin-left: $grid-unit-10;
+	padding: 0 $grid-unit-10;
+	height: $grid-unit-30;
+	border-radius: $radius-block-ui;
+	background-color: $black;
+	color: $white;
+	align-items: center;
+	font-size: $helptext-font-size;
+	line-height: 1;
+}

package/src/components/template-details/index.js

@@ -4,7 +4,9 @@
 import { __ } from '@wordpress/i18n';
 import {
 	Button,
+	MenuGroup,
 	MenuItem,
+	__experimentalHeading as Heading,
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -16,6 +18,7 @@ import { store as editorStore } from '@wordpress/editor';
 import isTemplateRevertable from '../../utils/is-template-revertable';
 import { MENU_TEMPLATES } from '../navigation-sidebar/navigation-panel/constants';
 import { store as editSiteStore } from '../../store';
+import TemplateAreas from './template-areas';
 
 export default function TemplateDetails( { template, onClose } ) {
 	const { title, description } = useSelect(
@@ -42,11 +45,15 @@ export default function TemplateDetails( { template, onClose } ) {
 	};
 
 	return (
-		<>
-			<div className="edit-site-template-details">
-				<Text size="body" weight={ 600 }>
+		<div className="edit-site-template-details">
+			<div className="edit-site-template-details__group">
+				<Heading
+					level={ 4 }
+					weight={ 600 }
+					className="edit-site-template-details__title"
+				>
 					{ title }
-				</Text>
+				</Heading>
 
 				{ description && (
 					<Text
@@ -58,15 +65,18 @@ export default function TemplateDetails( { template, onClose } ) {
 				) }
 			</div>
 
+			<TemplateAreas />
+
 			{ isTemplateRevertable( template ) && (
-				<div className="edit-site-template-details__revert">
+				<MenuGroup className="edit-site-template-details__group">
 					<MenuItem
+						className="edit-site-template-details__revert-button"
 						info={ __( 'Restore template to theme default' ) }
 						onClick={ revert }
 					>
 						{ __( 'Clear customizations' ) }
 					</MenuItem>
-				</div>
+				</MenuGroup>
 			) }
 
 			<Button
@@ -78,6 +88,6 @@ export default function TemplateDetails( { template, onClose } ) {
 			>
 				{ __( 'Browse all templates' ) }
 			</Button>
-		</>
+		</div>
 	);
 }

package/src/components/template-details/style.scss

@@ -1,46 +1,55 @@
 .edit-site-template-details {
-	margin: $grid-unit-10 $grid-unit-20;
+	.edit-site-template-details__group {
+		margin: 0;
+		padding: $grid-unit-20;
+	}
 
-	p {
-		padding: $grid-unit-10 0;
+	.edit-site-template-details__group + .edit-site-template-details__group {
+		border-top: $border-width solid $gray-400;
 	}
-}
 
-.edit-site-template-details__description {
-	color: $gray-700;
-}
+	.edit-site-template-details__title {
+		margin: 0 0 $grid-unit-15;
+	}
 
-.edit-site-template-details__revert {
-	border-top: $border-width solid $gray-400;
+	.edit-site-template-details__description {
+		margin: 0 0 $grid-unit-15;
+		color: $gray-700;
+	}
+
+	// The group already has a 8px padding inside, so overriding the parent padding.
+	.edit-site-template-details__group.edit-site-template-details__template-areas {
+		padding: $grid-unit-10;
+	}
 
-	.components-menu-item__button {
+	.edit-site-template-details__revert-button {
 		height: auto;
-		padding: $grid-unit-20;
+		padding: 0;
 		text-align: left;
 
 		&:focus:not(:disabled) {
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px $white;
 		}
 	}
-}
 
-.edit-site-template-details__show-all-button.components-button {
-	display: block;
-	background: $gray-900;
-	color: $white;
-	width: 100%;
-	height: ($button-size + $grid-unit-10);
-	border-radius: 0;
-
-	&:hover {
+	.edit-site-template-details__show-all-button.components-button {
+		display: block;
+		background: $gray-900;
 		color: $white;
-	}
+		width: 100%;
+		height: ($button-size + $grid-unit-10);
+		border-radius: 0;
 
-	&:active {
-		color: $gray-400;
-	}
+		&:hover {
+			color: $white;
+		}
 
-	&:focus:not(:disabled) {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px $white;
+		&:active {
+			color: $gray-400;
+		}
+
+		&:focus:not(:disabled) {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px $white;
+		}
 	}
 }

package/src/components/template-details/template-areas.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuGroup, MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { getTemplatePartIcon } from '@wordpress/editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { TEMPLATE_PART_AREA_TO_NAME } from '../../store/constants';
+
+function TemplatePartItem( { area, clientId } ) {
+	const { selectBlock, toggleBlockHighlight } = useDispatch(
+		blockEditorStore
+	);
+	const highlightBlock = () => toggleBlockHighlight( clientId, true );
+	const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );
+
+	return (
+		<MenuItem
+			icon={ getTemplatePartIcon( area ) }
+			iconPosition="left"
+			onClick={ () => {
+				selectBlock( clientId );
+			} }
+			onMouseOver={ highlightBlock }
+			onMouseLeave={ cancelHighlightBlock }
+			onFocus={ highlightBlock }
+			onBlur={ cancelHighlightBlock }
+		>
+			{ TEMPLATE_PART_AREA_TO_NAME[ area ] }
+		</MenuItem>
+	);
+}
+
+export default function TemplateAreas() {
+	const templateAreaBlocks = useSelect(
+		( select ) => select( editSiteStore ).getTemplateAreaBlocks(),
+		[]
+	);
+
+	if ( ! Object.keys( templateAreaBlocks ).length ) {
+		return null;
+	}
+
+	return (
+		<MenuGroup
+			label={ __( 'Template areas' ) }
+			className="edit-site-template-details__group edit-site-template-details__template-areas"
+		>
+			{ Object.entries( templateAreaBlocks ).map(
+				( [ area, templateAreaBlock ] ) => (
+					<TemplatePartItem
+						key={ area }
+						area={ area }
+						clientId={ templateAreaBlock.clientId }
+					/>
+				)
+			) }
+		</MenuGroup>
+	);
+}

package/src/components/template-part-converter/index.js

@@ -20,7 +20,7 @@ export default function TemplatePartConverter() {
 			clientIds: selectedBlockClientIds,
 			blocks: getBlocksByClientId( selectedBlockClientIds ),
 		};
-	} );
+	}, [] );
 
 	// Allow converting a single template part to standard blocks.
 	if ( blocks.length === 1 && blocks[ 0 ]?.name === 'core/template-part' ) {

package/src/components/url-query-controller/index.js

@@ -72,5 +72,5 @@ function useCurrentPageContext() {
 		}
 
 		return null;
-	} );
+	}, [] );
 }

package/src/index.js

@@ -62,3 +62,6 @@ export function initialize( id, settings ) {
 
 export { default as __experimentalMainDashboardButton } from './components/main-dashboard-button';
 export { default as __experimentalNavigationToggle } from './components/navigation-sidebar/navigation-toggle';
+export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';
+export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item';
+export { default as PluginMoreMenuItem } from './components/header/plugin-more-menu-item';

package/src/store/actions.js

@@ -8,6 +8,7 @@ import { addQueryArgs, getPathAndQueryString } from '@wordpress/url';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -121,7 +122,7 @@ export function* removeTemplate( templateId ) {
 /**
  * Returns an action object used to set a template part.
  *
- * @param {number} templatePartId The template part ID.
+ * @param {string} templatePartId The template part ID.
  *
  * @return {Object} Action object.
  */
@@ -132,6 +133,20 @@ export function setTemplatePart( templatePartId ) {
 	};
 }
 
+/**
+ * Returns an action object used to push a template part to navigation history.
+ *
+ * @param {string} templatePartId The template part ID.
+ *
+ * @return {Object} Action object.
+ */
+export function pushTemplatePart( templatePartId ) {
+	return {
+		type: 'PUSH_TEMPLATE_PART',
+		templatePartId,
+	};
+}
+
 /**
  * Updates the homeTemplateId state with the templateId of the page resolved
  * from the given path.
@@ -190,6 +205,15 @@ export function* setPage( page ) {
 	return templateId;
 }
 
+/**
+ * Go back to the current editing page.
+ */
+export function goBack() {
+	return {
+		type: 'GO_BACK',
+	};
+}
+
 /**
  * Displays the site homepage for editing in the editor.
  */
@@ -441,3 +465,31 @@ export function* revertTemplate( template ) {
 		);
 	}
 }
+/**
+ * Returns an action object used in signalling that the user opened an editor sidebar.
+ *
+ * @param {?string} name Sidebar name to be opened.
+ *
+ * @yield {Object} Action object.
+ */
+export function* openGeneralSidebar( name ) {
+	yield controls.dispatch(
+		interfaceStore,
+		'enableComplementaryArea',
+		editSiteStoreName,
+		name
+	);
+}
+
+/**
+ * Returns an action object signalling that the user closed the sidebar.
+ *
+ * @yield {Object} Action object.
+ */
+export function* closeGeneralSidebar() {
+	yield controls.dispatch(
+		interfaceStore,
+		'disableComplementaryArea',
+		editSiteStoreName
+	);
+}