@wordpress/edit-site 3.0.7 → 3.0.11

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

@@ -1,30 +1,53 @@
 /**
  * WordPress dependencies
  */
+import { useEffect, useState } from '@wordpress/element';
 import { createSlotFill } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import NavigationPanel from './navigation-panel';
 import NavigationToggle from './navigation-toggle';
-import { store as editSiteStore } from '../../store';
 
 export const {
 	Fill: NavigationPanelPreviewFill,
 	Slot: NavigationPanelPreviewSlot,
 } = createSlotFill( 'EditSiteNavigationPanelPreview' );
 
-export default function NavigationSidebar() {
-	const isNavigationOpen = useSelect( ( select ) => {
-		return select( editSiteStore ).isNavigationOpened();
-	}, [] );
+export default function NavigationSidebar( {
+	isDefaultOpen = false,
+	activeTemplateType,
+} ) {
+	const isDesktopViewport = useViewportMatch( 'medium' );
+	const [ isNavigationOpen, setIsNavigationOpen ] = useState(
+		isDefaultOpen && isDesktopViewport
+	);
+
+	useEffect( () => {
+		// When transitioning to desktop open the navigation if `isDefaultOpen` is true.
+		if ( isDefaultOpen && isDesktopViewport ) {
+			setIsNavigationOpen( true );
+		}
+
+		// When transitioning to mobile/tablet, close the navigation.
+		if ( ! isDesktopViewport ) {
+			setIsNavigationOpen( false );
+		}
+	}, [ isDefaultOpen, isDesktopViewport ] );
 
 	return (
 		<>
-			<NavigationToggle isOpen={ isNavigationOpen } />
-			<NavigationPanel isOpen={ isNavigationOpen } />
+			<NavigationToggle
+				isOpen={ isNavigationOpen }
+				setIsOpen={ setIsNavigationOpen }
+			/>
+			<NavigationPanel
+				isOpen={ isNavigationOpen }
+				setIsOpen={ setIsNavigationOpen }
+				activeTemplateType={ activeTemplateType }
+			/>
 			<NavigationPanelPreviewSlot />
 		</>
 	);

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

@@ -9,64 +9,33 @@ 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';
+import { useSelect } from '@wordpress/data';
 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';
 
 /**
  * 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 NavigationPanel = ( { isOpen, setIsOpen, activeTemplateType } ) => {
+	const 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,
-		};
+		return siteData.name;
 	}, [] );
 
-	const {
-		setNavigationPanelActiveMenu: setActive,
-		setIsNavigationPanelOpened,
-	} = useDispatch( editSiteStore );
-
-	let activeItem;
-	if ( activeMenu !== MENU_ROOT ) {
-		if ( activeMenu.startsWith( 'content' ) ) {
-			activeItem = `${ postType }-${ postId }`;
-		} else {
-			activeItem = `${ editedPostType }-${ editedPostId }`;
-		}
-	}
-
 	// 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();
@@ -74,12 +43,12 @@ const NavigationPanel = ( { isOpen } ) => {
 		if ( isOpen ) {
 			panelRef.current.focus();
 		}
-	}, [ activeMenu, isOpen ] );
+	}, [ activeTemplateType, isOpen ] );
 
 	const closeOnEscape = ( event ) => {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
 			event.preventDefault();
-			setIsNavigationPanelOpened( false );
+			setIsOpen( false );
 		}
 	};
 
@@ -100,21 +69,42 @@ 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={ activeTemplateType }>
+						<MainDashboardButton.Slot>
+							<NavigationBackButton
+								backButtonLabel={ __( 'Dashboard' ) }
+								className="edit-site-navigation-panel__back-to-dashboard"
+								href="index.php"
+							/>
+						</MainDashboardButton.Slot>
+
+						<NavigationMenu>
+							<NavigationGroup title={ __( 'Editor' ) }>
+								<NavigationItem
+									title={ __( 'Site' ) }
+									href={ addQueryArgs( window.location.href, {
+										postId: undefined,
+										postType: undefined,
+									} ) }
+								/>
+								<NavigationItem
+									title={ __( 'Templates' ) }
+									item="wp_template"
+									href={ addQueryArgs( window.location.href, {
+										postId: undefined,
+										postType: 'wp_template',
+									} ) }
+								/>
+								<NavigationItem
+									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 } from '@wordpress/data';
 import {
 	Button,
 	Icon,
@@ -12,20 +12,8 @@ import { wordpress } from '@wordpress/icons';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { useReducedMotion } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-
-function NavigationToggle( { icon, isOpen } ) {
-	const {
-		isRequestingSiteIcon,
-		navigationPanelMenu,
-		siteIconUrl,
-	} = useSelect( ( select ) => {
-		const { getCurrentTemplateNavigationPanelSubMenu } = select(
-			editSiteStore
-		);
+function NavigationToggle( { icon, isOpen, setIsOpen } ) {
+	const { isRequestingSiteIcon, siteIconUrl } = useSelect( ( select ) => {
 		const { getEntityRecord, isResolving } = select( coreDataStore );
 		const siteData =
 			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
@@ -36,25 +24,13 @@ function NavigationToggle( { icon, isOpen } ) {
 				'__unstableBase',
 				undefined,
 			] ),
-			navigationPanelMenu: getCurrentTemplateNavigationPanelSubMenu(),
 			siteIconUrl: siteData.site_icon_url,
 		};
 	}, [] );
 
-	const {
-		openNavigationPanelToMenu,
-		setIsNavigationPanelOpened,
-	} = useDispatch( editSiteStore );
-
 	const disableMotion = useReducedMotion();
 
-	const toggleNavigationPanel = () => {
-		if ( isOpen ) {
-			setIsNavigationPanelOpened( false );
-			return;
-		}
-		openNavigationPanelToMenu( navigationPanelMenu );
-	};
+	const toggleNavigationPanel = () => setIsOpen( ( open ) => ! open );
 
 	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
 

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;
+	}
+}