@wordpress/edit-site 3.0.8 → 3.0.12

package/src/components/navigation-sidebar/navigation-panel/index.js

@@ -9,6 +9,9 @@ import classnames from 'classnames';
 import {
 	__experimentalNavigation as Navigation,
 	__experimentalNavigationBackButton as NavigationBackButton,
+	__experimentalNavigationGroup as NavigationGroup,
+	__experimentalNavigationItem as NavigationItem,
+	__experimentalNavigationMenu as NavigationMenu,
 } from '@wordpress/components';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -16,65 +19,43 @@ import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { ESCAPE } from '@wordpress/keycodes';
 import { decodeEntities } from '@wordpress/html-entities';
+import { addQueryArgs } from '@wordpress/url';
+import {
+	home as siteIcon,
+	layout as templateIcon,
+	symbolFilled as templatePartIcon,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import SiteMenu from './menus';
 import MainDashboardButton from '../../main-dashboard-button';
 import { store as editSiteStore } from '../../../store';
-import { MENU_ROOT } from './constants';
 
-const NavigationPanel = ( { isOpen } ) => {
-	const {
-		page: { context: { postType, postId } = {} } = {},
-		editedPostId,
-		editedPostType,
-		activeMenu,
-		siteTitle,
-	} = useSelect( ( select ) => {
-		const {
-			getEditedPostType,
-			getEditedPostId,
-			getNavigationPanelActiveMenu,
-			getPage,
-		} = select( editSiteStore );
+const SITE_EDITOR_KEY = 'site-editor';
+
+const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
+	const { isNavigationOpen, siteTitle } = useSelect( ( select ) => {
 		const { getEntityRecord } = select( coreDataStore );
 
 		const siteData =
 			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
 
 		return {
-			page: getPage(),
-			editedPostId: getEditedPostId(),
-			editedPostType: getEditedPostType(),
-			activeMenu: getNavigationPanelActiveMenu(),
 			siteTitle: siteData.name,
+			isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
 		};
 	}, [] );
-
-	const {
-		setNavigationPanelActiveMenu: setActive,
-		setIsNavigationPanelOpened,
-	} = useDispatch( editSiteStore );
-
-	let activeItem;
-	if ( activeMenu !== MENU_ROOT ) {
-		if ( activeMenu.startsWith( 'content' ) ) {
-			activeItem = `${ postType }-${ postId }`;
-		} else {
-			activeItem = `${ editedPostType }-${ editedPostId }`;
-		}
-	}
+	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
 	// Ensures focus is moved to the panel area when it is activated
 	// from a separate component (such as document actions in the header).
 	const panelRef = useRef();
 	useEffect( () => {
-		if ( isOpen ) {
+		if ( isNavigationOpen ) {
 			panelRef.current.focus();
 		}
-	}, [ activeMenu, isOpen ] );
+	}, [ activeItem, isNavigationOpen ] );
 
 	const closeOnEscape = ( event ) => {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
@@ -87,7 +68,7 @@ const NavigationPanel = ( { isOpen } ) => {
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			className={ classnames( `edit-site-navigation-panel`, {
-				'is-open': isOpen,
+				'is-open': isNavigationOpen,
 			} ) }
 			ref={ panelRef }
 			tabIndex="-1"
@@ -100,21 +81,46 @@ const NavigationPanel = ( { isOpen } ) => {
 					</div>
 				</div>
 				<div className="edit-site-navigation-panel__scroll-container">
-					<Navigation
-						activeItem={ activeItem }
-						activeMenu={ activeMenu }
-						onActivateMenu={ setActive }
-					>
-						{ activeMenu === MENU_ROOT && (
-							<MainDashboardButton.Slot>
-								<NavigationBackButton
-									backButtonLabel={ __( 'Dashboard' ) }
-									className="edit-site-navigation-panel__back-to-dashboard"
-									href="index.php"
+					<Navigation activeItem={ activeItem }>
+						<MainDashboardButton.Slot>
+							<NavigationBackButton
+								backButtonLabel={ __( 'Dashboard' ) }
+								className="edit-site-navigation-panel__back-to-dashboard"
+								href="index.php"
+							/>
+						</MainDashboardButton.Slot>
+
+						<NavigationMenu>
+							<NavigationGroup title={ __( 'Editor' ) }>
+								<NavigationItem
+									icon={ siteIcon }
+									title={ __( 'Site' ) }
+									item={ SITE_EDITOR_KEY }
+									href={ addQueryArgs( window.location.href, {
+										postId: undefined,
+										postType: undefined,
+									} ) }
+								/>
+								<NavigationItem
+									icon={ templateIcon }
+									title={ __( 'Templates' ) }
+									item="wp_template"
+									href={ addQueryArgs( window.location.href, {
+										postId: undefined,
+										postType: 'wp_template',
+									} ) }
+								/>
+								<NavigationItem
+									icon={ templatePartIcon }
+									title={ __( 'Template Parts' ) }
+									item="wp_template_part"
+									href={ addQueryArgs( window.location.href, {
+										postId: undefined,
+										postType: 'wp_template_part',
+									} ) }
 								/>
-							</MainDashboardButton.Slot>
-						) }
-						<SiteMenu />
+							</NavigationGroup>
+						</NavigationMenu>
 					</Navigation>
 				</div>
 			</div>

package/src/components/navigation-sidebar/navigation-panel/style.scss

@@ -9,8 +9,10 @@
 	@include reduce-motion("transition");
 
 	// Footer is visible from medium so we subtract footer's height
-	@include break-medium() {
-		height: calc(100% - #{$button-size-small + $border-width});
+	.interface-interface-skeleton.has-footer & {
+		@include break-medium() {
+			height: calc(100% - #{$button-size-small + $border-width});
+		}
 	}
 }
 

package/src/components/navigation-sidebar/navigation-toggle/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
 	Icon,
@@ -17,44 +17,31 @@ import { useReducedMotion } from '@wordpress/compose';
  */
 import { store as editSiteStore } from '../../../store';
 
-function NavigationToggle( { icon, isOpen } ) {
-	const {
-		isRequestingSiteIcon,
-		navigationPanelMenu,
-		siteIconUrl,
-	} = useSelect( ( select ) => {
-		const { getCurrentTemplateNavigationPanelSubMenu } = select(
-			editSiteStore
-		);
-		const { getEntityRecord, isResolving } = select( coreDataStore );
-		const siteData =
-			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-
-		return {
-			isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [
-				'root',
-				'__unstableBase',
-				undefined,
-			] ),
-			navigationPanelMenu: getCurrentTemplateNavigationPanelSubMenu(),
-			siteIconUrl: siteData.site_icon_url,
-		};
-	}, [] );
+function NavigationToggle( { icon } ) {
+	const { isNavigationOpen, isRequestingSiteIcon, siteIconUrl } = useSelect(
+		( select ) => {
+			const { getEntityRecord, isResolving } = select( coreDataStore );
+			const siteData =
+				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
 
-	const {
-		openNavigationPanelToMenu,
-		setIsNavigationPanelOpened,
-	} = useDispatch( editSiteStore );
+			return {
+				isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
+				isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [
+					'root',
+					'__unstableBase',
+					undefined,
+				] ),
+				siteIconUrl: siteData.site_icon_url,
+			};
+		},
+		[]
+	);
+	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
 	const disableMotion = useReducedMotion();
 
-	const toggleNavigationPanel = () => {
-		if ( isOpen ) {
-			setIsNavigationPanelOpened( false );
-			return;
-		}
-		openNavigationPanelToMenu( navigationPanelMenu );
-	};
+	const toggleNavigationPanel = () =>
+		setIsNavigationPanelOpened( ! isNavigationOpen );
 
 	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
 
@@ -84,7 +71,8 @@ function NavigationToggle( { icon, isOpen } ) {
 	return (
 		<motion.div
 			className={
-				'edit-site-navigation-toggle' + ( isOpen ? ' is-open' : '' )
+				'edit-site-navigation-toggle' +
+				( isNavigationOpen ? ' is-open' : '' )
 			}
 			whileHover="expand"
 		>

package/src/components/navigation-sidebar/navigation-toggle/test/index.js

@@ -34,6 +34,7 @@ describe( 'NavigationToggle', () => {
 						site_icon_url: 'https://fakeUrl.com',
 					} ),
 					isResolving: () => false,
+					isNavigationOpened: () => false,
 				} ) );
 			} );
 
@@ -53,6 +54,7 @@ describe( 'NavigationToggle', () => {
 						site_icon_url: '',
 					} ),
 					isResolving: () => false,
+					isNavigationOpened: () => false,
 				} ) );
 			} );
 

package/src/components/sidebar/style.scss

@@ -62,7 +62,8 @@
 	padding: 0 $grid-unit-20;
 }
 
-.edit-site-global-styles-color-palette-panel {
+.edit-site-global-styles-color-palette-panel,
+.edit-site-global-styles-gradient-palette-panel {
 	padding: $grid-unit-20;
 }
 

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

@@ -90,9 +90,10 @@ export default function TemplateDetails( { template, onClose } ) {
 
 			<Button
 				className="edit-site-template-details__show-all-button"
-				href={ addQueryArgs( 'edit.php', {
+				href={ addQueryArgs( window.location.href, {
 					// TODO: We should update this to filter by template part's areas as well.
-					post_type: template.type,
+					postId: undefined,
+					postType: template.type,
 				} ) }
 			>
 				{ sprintf(

package/src/components/template-part-converter/convert-to-template-part.js

@@ -6,61 +6,36 @@ import { kebabCase } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import {
 	BlockSettingsMenuControls,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	MenuItem,
-	Icon,
-	BaseControl,
-	TextControl,
-	Flex,
-	FlexItem,
-	FlexBlock,
-	Button,
-	Modal,
-	__experimentalRadioGroup as RadioGroup,
-	__experimentalRadio as Radio,
-} from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { MenuItem } from '@wordpress/components';
 import { createBlock, serialize } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
-import { store as editorStore } from '@wordpress/editor';
-import { check } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { TEMPLATE_PART_AREA_GENERAL } from '../../store/constants';
+import CreateTemplatePartModal from '../create-template-part-modal';
 
 export default function ConvertToTemplatePart( { clientIds, blocks } ) {
-	const instanceId = useInstanceId( ConvertToTemplatePart );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const [ title, setTitle ] = useState( '' );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const [ area, setArea ] = useState( TEMPLATE_PART_AREA_GENERAL );
-
-	const templatePartAreas = useSelect(
-		( select ) =>
-			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
-		[]
-	);
 
-	const onConvert = async ( templatePartTitle ) => {
-		const defaultTitle = __( 'Untitled Template Part' );
+	const onConvert = async ( { title, area } ) => {
 		const templatePart = await saveEntityRecord(
 			'postType',
 			'wp_template_part',
 			{
-				slug: kebabCase( templatePartTitle || defaultTitle ),
-				title: templatePartTitle || defaultTitle,
+				slug: kebabCase( title ),
+				title,
 				content: serialize( blocks ),
 				area,
 			}
@@ -78,122 +53,27 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	};
 
 	return (
-		<BlockSettingsMenuControls>
-			{ ( { onClose } ) => (
-				<>
+		<>
+			<BlockSettingsMenuControls>
+				{ ( { onClose } ) => (
 					<MenuItem
 						onClick={ () => {
 							setIsModalOpen( true );
+							onClose();
 						} }
 					>
 						{ __( 'Make template part' ) }
 					</MenuItem>
-					{ isModalOpen && (
-						<Modal
-							title={ __( 'Create a template part' ) }
-							closeLabel={ __( 'Close' ) }
-							onRequestClose={ () => {
-								setIsModalOpen( false );
-								setTitle( '' );
-							} }
-							overlayClassName="edit-site-template-part-converter__modal"
-						>
-							<form
-								onSubmit={ ( event ) => {
-									event.preventDefault();
-									onConvert( title );
-									setIsModalOpen( false );
-									setTitle( '' );
-									onClose();
-								} }
-							>
-								<TextControl
-									label={ __( 'Name' ) }
-									value={ title }
-									onChange={ setTitle }
-								/>
-								<BaseControl
-									label={ __( 'Area' ) }
-									id={ `edit-site-template-part-converter__area-selection-${ instanceId }` }
-									className="edit-site-template-part-converter__area-base-control"
-								>
-									<RadioGroup
-										label={ __( 'Area' ) }
-										className="edit-site-template-part-converter__area-radio-group"
-										id={ `edit-site-template-part-converter__area-selection-${ instanceId }` }
-										onChange={ setArea }
-										checked={ area }
-									>
-										{ templatePartAreas.map(
-											( {
-												icon,
-												label,
-												area: value,
-												description,
-											} ) => (
-												<Radio
-													key={ label }
-													value={ value }
-													className="edit-site-template-part-converter__area-radio"
-												>
-													<Flex
-														align="start"
-														justify="start"
-													>
-														<FlexItem>
-															<Icon
-																icon={ icon }
-															/>
-														</FlexItem>
-														<FlexBlock className="edit-site-template-part-converter__option-label">
-															{ label }
-															<div>
-																{ description }
-															</div>
-														</FlexBlock>
-
-														<FlexItem className="edit-site-template-part-converter__checkbox">
-															{ area ===
-																value && (
-																<Icon
-																	icon={
-																		check
-																	}
-																/>
-															) }
-														</FlexItem>
-													</Flex>
-												</Radio>
-											)
-										) }
-									</RadioGroup>
-								</BaseControl>
-								<Flex
-									className="edit-site-template-part-converter__convert-modal-actions"
-									justify="flex-end"
-								>
-									<FlexItem>
-										<Button
-											variant="secondary"
-											onClick={ () => {
-												setIsModalOpen( false );
-												setTitle( '' );
-											} }
-										>
-											{ __( 'Cancel' ) }
-										</Button>
-									</FlexItem>
-									<FlexItem>
-										<Button variant="primary" type="submit">
-											{ __( 'Create' ) }
-										</Button>
-									</FlexItem>
-								</Flex>
-							</form>
-						</Modal>
-					) }
-				</>
+				) }
+			</BlockSettingsMenuControls>
+			{ isModalOpen && (
+				<CreateTemplatePartModal
+					closeModal={ () => {
+						setIsModalOpen( false );
+					} }
+					onCreate={ onConvert }
+				/>
 			) }
-		</BlockSettingsMenuControls>
+		</>
 	);
 }

package/src/components/welcome-guide/editor.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import WelcomeGuideImage from './image';
+import { store as editSiteStore } from '../../store';
+
+export default function WelcomeGuideEditor() {
+	const { toggleFeature } = useDispatch( editSiteStore );
+
+	return (
+		<Guide
+			className="edit-site-welcome-guide"
+			contentLabel={ __( 'Welcome to the site editor' ) }
+			finishButtonText={ __( 'Get Started' ) }
+			onFinish={ () => toggleFeature( 'welcomeGuide' ) }
+			pages={ [
+				{
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/edit-your-site.svg?1"
+							animatedSrc="https://s.w.org/images/block-editor/edit-your-site.gif?1"
+						/>
+					),
+					content: (
+						<>
+							<h1 className="edit-site-welcome-guide__heading">
+								{ __( 'Edit your site' ) }
+							</h1>
+							<p className="edit-site-welcome-guide__text">
+								{ __(
+									'Design everything on your site — from the header right down to the footer — using blocks.'
+								) }
+							</p>
+							<p className="edit-site-welcome-guide__text">
+								{ createInterpolateElement(
+									__(
+										'Click <StylesIconImage /> to start designing your blocks, and choose your typography, layout, and colors.'
+									),
+									{
+										StylesIconImage: (
+											<img
+												alt={ __( 'styles' ) }
+												src="data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' fill='%231E1E1E'/%3E%3C/svg%3E%0A"
+											/>
+										),
+									}
+								) }
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}

package/src/components/welcome-guide/image.js

@@ -0,0 +1,11 @@
+export default function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {
+	return (
+		<picture className="edit-site-welcome-guide__image">
+			<source
+				srcSet={ nonAnimatedSrc }
+				media="(prefers-reduced-motion: reduce)"
+			/>
+			<img src={ animatedSrc } width="312" height="240" alt="" />
+		</picture>
+	);
+}

package/src/components/welcome-guide/index.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import WelcomeGuideEditor from './editor';
+import WelcomeGuideStyles from './styles';
+import { store as editSiteStore } from '../../store';
+
+export default function WelcomeGuide() {
+	const { isActive, isStylesOpen } = useSelect( ( select ) => {
+		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
+			editSiteStore.name
+		);
+		const isStylesSidebar = sidebar === 'edit-site/global-styles';
+		const feature = isStylesSidebar ? 'welcomeGuideStyles' : 'welcomeGuide';
+
+		return {
+			isActive: select( editSiteStore ).isFeatureActive( feature ),
+			isStylesOpen: isStylesSidebar,
+		};
+	}, [] );
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	return isStylesOpen ? <WelcomeGuideStyles /> : <WelcomeGuideEditor />;
+}

package/src/components/welcome-guide/style.scss

@@ -0,0 +1,37 @@
+.edit-site-welcome-guide {
+	width: 312px;
+
+	&__image {
+		background: #00a0d2;
+		margin: 0 0 $grid-unit-20;
+		> img {
+			display: block;
+			max-width: 100%;
+			object-fit: cover;
+		}
+	}
+
+	&__heading {
+		font-family: $default-font;
+		font-size: 24px;
+		line-height: 1.4;
+		margin: $grid-unit-20 0 $grid-unit-20 0;
+		padding: 0 $grid-unit-40;
+	}
+
+	&__text {
+		font-size: $default-font-size;
+		line-height: 1.4;
+		margin: 0 0 $grid-unit-20 0;
+		padding: 0 $grid-unit-40;
+
+		img {
+			vertical-align: bottom;
+		}
+	}
+
+	&__inserter-icon {
+		margin: 0 4px;
+		vertical-align: text-top;
+	}
+}