@wordpress/edit-site 3.0.1-next.253d9b6e21.0 → 3.0.3

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/convert-to-regular.js

@@ -10,13 +10,7 @@ import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export default function ConvertToRegularBlocks( { clientId } ) {
-	const { innerBlocks } = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__unstableGetBlockWithBlockTree(
-				clientId
-			),
-		[ clientId ]
-	);
+	const { getBlocks } = useSelect( blockEditorStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 
 	return (
@@ -24,7 +18,7 @@ export default function ConvertToRegularBlocks( { clientId } ) {
 			{ ( { onClose } ) => (
 				<MenuItem
 					onClick={ () => {
-						replaceBlocks( clientId, innerBlocks );
+						replaceBlocks( clientId, getBlocks( clientId ) );
 						onClose();
 					} }
 				>

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
@@ -54,7 +55,7 @@ export function* setTemplate( templateId, templateSlug ) {
 	const pageContext = { templateSlug };
 	if ( ! templateSlug ) {
 		const template = yield controls.resolveSelect(
-			coreStore.name,
+			coreStore,
 			'getEntityRecord',
 			'postType',
 			'wp_template',
@@ -78,7 +79,7 @@ export function* setTemplate( templateId, templateSlug ) {
  */
 export function* addTemplate( template ) {
 	const newTemplate = yield controls.dispatch(
-		coreStore.name,
+		coreStore,
 		'saveEntityRecord',
 		'postType',
 		'wp_template',
@@ -87,7 +88,7 @@ export function* addTemplate( template ) {
 
 	if ( template.content ) {
 		yield controls.dispatch(
-			coreStore.name,
+			coreStore,
 			'editEntityRecord',
 			'postType',
 			'wp_template',
@@ -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.
@@ -160,7 +175,7 @@ export function setHomeTemplateId( homeTemplateId ) {
 export function* setPage( page ) {
 	if ( ! page.path && page.context?.postId ) {
 		const entity = yield controls.resolveSelect(
-			coreStore.name,
+			coreStore,
 			'getEntityRecord',
 			'postType',
 			page.context.postType || 'post',
@@ -170,7 +185,7 @@ export function* setPage( page ) {
 		page.path = getPathAndQueryString( entity.link );
 	}
 	const { id: templateId, slug: templateSlug } = yield controls.resolveSelect(
-		coreStore.name,
+		coreStore,
 		'__experimentalGetTemplateForLink',
 		page.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.
  */
@@ -198,7 +222,7 @@ export function* showHomepage() {
 		show_on_front: showOnFront,
 		page_on_front: frontpageId,
 	} = yield controls.resolveSelect(
-		coreStore.name,
+		coreStore,
 		'getEntityRecord',
 		'root',
 		'site'
@@ -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
+	);
+}

package/src/store/constants.js

@@ -1,6 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * The identifier for the data store.
  *
  * @type {string}
  */
 export const STORE_NAME = 'core/edit-site';
+
+export const TEMPLATE_PART_AREA_HEADER = 'header';
+export const TEMPLATE_PART_AREA_FOOTER = 'footer';
+export const TEMPLATE_PART_AREA_SIDEBAR = 'sidebar';
+
+export const TEMPLATE_PART_AREA_TO_NAME = {
+	[ TEMPLATE_PART_AREA_HEADER ]: __( 'Header' ),
+	[ TEMPLATE_PART_AREA_FOOTER ]: __( 'Footer' ),
+	[ TEMPLATE_PART_AREA_SIDEBAR ]: __( 'Sidebar' ),
+};

package/src/store/reducer.js

@@ -72,25 +72,39 @@ export function settings( state = {}, action ) {
  * Reducer keeping track of the currently edited Post Type,
  * Post Id and the context provided to fill the content of the block editor.
  *
- * @param {Object} state  Current state.
+ * @param {Array}  state  Current state history.
  * @param {Object} action Dispatched action.
  *
- * @return {Object} Updated state.
+ * @return {Array} Updated state.
  */
-export function editedPost( state = {}, action ) {
+export function editedPost( state = [], action ) {
 	switch ( action.type ) {
 		case 'SET_TEMPLATE':
 		case 'SET_PAGE':
-			return {
-				type: 'wp_template',
-				id: action.templateId,
-				page: action.page,
-			};
+			return [
+				{
+					type: 'wp_template',
+					id: action.templateId,
+					page: action.page,
+				},
+			];
 		case 'SET_TEMPLATE_PART':
-			return {
-				type: 'wp_template_part',
-				id: action.templatePartId,
-			};
+			return [
+				{
+					type: 'wp_template_part',
+					id: action.templatePartId,
+				},
+			];
+		case 'PUSH_TEMPLATE_PART':
+			return [
+				...state,
+				{
+					type: 'wp_template_part',
+					id: action.templatePartId,
+				},
+			];
+		case 'GO_BACK':
+			return state.slice( 0, -1 );
 	}
 
 	return state;