@wordpress/edit-site 3.0.14 → 3.0.18-next.33ec3857e2.0

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
@@ -15,6 +15,15 @@ import { store as editSiteStore } from '../../store';
 export default function WelcomeGuideEditor() {
 	const { toggleFeature } = useDispatch( editSiteStore );
 
+	const isActive = useSelect(
+		( select ) => select( editSiteStore ).isFeatureActive( 'welcomeGuide' ),
+		[]
+	);
+
+	if ( ! isActive ) {
+		return null;
+	}
+
 	return (
 		<Guide
 			className="edit-site-welcome-guide"

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

@@ -1,33 +1,14 @@
-/**
- * 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 />;
+	return (
+		<>
+			<WelcomeGuideEditor />
+			<WelcomeGuideStyles />
+		</>
+	);
 }

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

@@ -1,9 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { ExternalLink, Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -14,6 +15,23 @@ import { store as editSiteStore } from '../../store';
 export default function WelcomeGuideStyles() {
 	const { toggleFeature } = useDispatch( editSiteStore );
 
+	const { isActive, isStylesOpen } = useSelect( ( select ) => {
+		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
+			editSiteStore.name
+		);
+
+		return {
+			isActive: select( editSiteStore ).isFeatureActive(
+				'welcomeGuideStyles'
+			),
+			isStylesOpen: sidebar === 'edit-site/global-styles',
+		};
+	}, [] );
+
+	if ( ! isActive || ! isStylesOpen ) {
+		return null;
+	}
+
 	return (
 		<Guide
 			className="edit-site-welcome-guide"
@@ -99,7 +117,7 @@ export default function WelcomeGuideStyles() {
 								) }
 								<ExternalLink
 									href={ __(
-										'https://wordpress.org/support/article/wordpress-editor/'
+										'https://wordpress.org/support/article/styles-overview/'
 									) }
 								>
 									{ __(

package/src/index.js

@@ -14,6 +14,7 @@ import {
 } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { store as viewportStore } from '@wordpress/viewport';
+import { getQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -21,8 +22,8 @@ import { store as viewportStore } from '@wordpress/viewport';
 import './plugins';
 import './hooks';
 import { store as editSiteStore } from './store';
-import Editor from './components/editor';
-import List from './components/list';
+import EditSiteApp from './components/app';
+import getIsListPage from './utils/get-is-list-page';
 
 /**
  * Reinitializes the editor after the user chooses to reboot the editor after
@@ -33,12 +34,37 @@ import List from './components/list';
  * @param {?Object} settings Editor settings object.
  */
 export function reinitializeEditor( target, settings ) {
+	// This will be a no-op if the target doesn't have any React nodes.
 	unmountComponentAtNode( target );
 	const reboot = reinitializeEditor.bind( null, target, settings );
-	render(
-		<Editor initialSettings={ settings } onError={ reboot } />,
-		target
-	);
+
+	// We dispatch actions and update the store synchronously before rendering
+	// so that we won't trigger unnecessary re-renders with useEffect.
+	{
+		dispatch( editSiteStore ).updateSettings( settings );
+		// Keep the defaultTemplateTypes in the core/editor settings too,
+		// so that they can be selected with core/editor selectors in any editor.
+		// This is needed because edit-site doesn't initialize with EditorProvider,
+		// which internally uses updateEditorSettings as well.
+		dispatch( editorStore ).updateEditorSettings( {
+			defaultTemplateTypes: settings.defaultTemplateTypes,
+			defaultTemplatePartAreas: settings.defaultTemplatePartAreas,
+		} );
+
+		const isLandingOnListPage = getIsListPage(
+			getQueryArgs( window.location.href )
+		);
+
+		if ( isLandingOnListPage ) {
+			// Default the navigation panel to be opened when we're in a bigger
+			// screen and land in the list screen.
+			dispatch( editSiteStore ).setIsNavigationPanelOpened(
+				select( viewportStore ).isViewportMatch( 'medium' )
+			);
+		}
+	}
+
+	render( <EditSiteApp reboot={ reboot } />, target );
 }
 
 /**
@@ -54,7 +80,6 @@ export function initializeEditor( id, settings ) {
 	settings.__experimentalSpotlightEntityBlocks = [ 'core/template-part' ];
 
 	const target = document.getElementById( id );
-	const reboot = reinitializeEditor.bind( null, target, settings );
 
 	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
 	registerCoreBlocks();
@@ -64,35 +89,7 @@ export function initializeEditor( id, settings ) {
 		} );
 	}
 
-	render(
-		<Editor initialSettings={ settings } onError={ reboot } />,
-		target
-	);
-}
-
-/**
- * Initializes the site editor templates list screen.
- *
- * @param {string} id           ID of the root element to render the screen in.
- * @param {string} templateType The type of the list. "wp_template" or "wp_template_part".
- * @param {Object} settings     Editor settings.
- */
-export function initializeList( id, templateType, settings ) {
-	const target = document.getElementById( id );
-
-	dispatch( editorStore ).updateEditorSettings( {
-		defaultTemplateTypes: settings.defaultTemplateTypes,
-		defaultTemplatePartAreas: settings.defaultTemplatePartAreas,
-	} );
-
-	// Default the navigation panel to be opened when we're in a bigger screen.
-	// We update the store synchronously before rendering so that we won't
-	// trigger an unnecessary re-render with useEffect.
-	dispatch( editSiteStore ).setIsNavigationPanelOpened(
-		select( viewportStore ).isViewportMatch( 'medium' )
-	);
-
-	render( <List templateType={ templateType } />, target );
+	reinitializeEditor( target, settings );
 }
 
 export { default as __experimentalMainDashboardButton } from './components/main-dashboard-button';

package/src/plugins/index.js

@@ -1,21 +1,13 @@
-/**
- * External dependencies
- */
-import downloadjs from 'downloadjs';
-
 /**
  * WordPress dependencies
  */
-import { MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 import { registerPlugin } from '@wordpress/plugins';
-import apiFetch from '@wordpress/api-fetch';
-import { download } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
+import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 
 registerPlugin( 'edit-site', {
@@ -23,29 +15,7 @@ registerPlugin( 'edit-site', {
 		return (
 			<>
 				<ToolsMoreMenuGroup>
-					<MenuItem
-						role="menuitem"
-						icon={ download }
-						onClick={ () =>
-							apiFetch( {
-								path: '/wp-block-editor/v1/export',
-								parse: false,
-							} )
-								.then( ( res ) => res.blob() )
-								.then( ( blob ) =>
-									downloadjs(
-										blob,
-										'edit-site-export.zip',
-										'application/zip'
-									)
-								)
-						}
-						info={ __(
-							'Download your templates and template parts.'
-						) }
-					>
-						{ __( 'Export' ) }
-					</MenuItem>
+					<SiteExport />
 					<WelcomeGuideMenuItem />
 				</ToolsMoreMenuGroup>
 			</>

package/src/plugins/site-export.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import downloadjs from 'downloadjs';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuItem } from '@wordpress/components';
+import apiFetch from '@wordpress/api-fetch';
+import { download } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function SiteExport() {
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	async function handleExport() {
+		try {
+			const response = await apiFetch( {
+				path: '/wp-block-editor/v1/export',
+				parse: false,
+			} );
+			const blob = await response.blob();
+
+			downloadjs( blob, 'edit-site-export.zip', 'application/zip' );
+		} catch ( errorResponse ) {
+			let error = {};
+			try {
+				error = await errorResponse.json();
+			} catch ( e ) {}
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the site export.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	}
+
+	return (
+		<MenuItem
+			role="menuitem"
+			icon={ download }
+			onClick={ handleExport }
+			info={ __( 'Download your templates and template parts.' ) }
+		>
+			{ __( 'Export' ) }
+		</MenuItem>
+	);
+}

package/src/plugins/welcome-guide-menu-item.js

@@ -2,9 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { MenuItem } from '@wordpress/components';
-import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -13,22 +12,9 @@ import { store as editSiteStore } from '../store';
 
 export default function WelcomeGuideMenuItem() {
 	const { toggleFeature } = useDispatch( editSiteStore );
-	const isStylesOpen = useSelect( ( select ) => {
-		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
-			editSiteStore.name
-		);
-
-		return sidebar === 'edit-site/global-styles';
-	}, [] );
 
 	return (
-		<MenuItem
-			onClick={ () =>
-				toggleFeature(
-					isStylesOpen ? 'welcomeGuideStyles' : 'welcomeGuide'
-				)
-			}
-		>
+		<MenuItem onClick={ () => toggleFeature( 'welcomeGuide' ) }>
 			{ __( 'Welcome Guide' ) }
 		</MenuItem>
 	);

package/src/store/actions.js

@@ -172,20 +172,6 @@ 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.
@@ -244,15 +230,6 @@ 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.
  */

package/src/store/constants.js

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * The identifier for the data store.
  *
@@ -14,10 +9,3 @@ 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_GENERAL = 'uncategorized';
-
-export const TEMPLATE_PART_AREA_TO_NAME = {
-	[ TEMPLATE_PART_AREA_HEADER ]: __( 'Header' ),
-	[ TEMPLATE_PART_AREA_FOOTER ]: __( 'Footer' ),
-	[ TEMPLATE_PART_AREA_SIDEBAR ]: __( 'Sidebar' ),
-	[ TEMPLATE_PART_AREA_GENERAL ]: __( 'General' ),
-};

package/src/store/reducer.js

@@ -72,39 +72,25 @@ 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 {Array}  state  Current state history.
+ * @param {Object} state  Current edited post.
  * @param {Object} action Dispatched action.
  *
- * @return {Array} Updated state.
+ * @return {Object} 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,
-				},
-			];
-		case 'PUSH_TEMPLATE_PART':
-			return [
-				...state,
-				{
-					type: 'wp_template_part',
-					id: action.templatePartId,
-				},
-			];
-		case 'GO_BACK':
-			return state.slice( 0, -1 );
+			return {
+				type: 'wp_template_part',
+				id: action.templatePartId,
+			};
 	}
 
 	return state;

package/src/store/selectors.js

@@ -135,11 +135,7 @@ export function getHomeTemplateId( state ) {
 }
 
 function getCurrentEditedPost( state ) {
-	return state.editedPost[ state.editedPost.length - 1 ] || {};
-}
-
-function getPreviousEditedPost( state ) {
-	return state.editedPost[ state.editedPost.length - 2 ] || {};
+	return state.editedPost;
 }
 
 /**
@@ -164,28 +160,6 @@ export function getEditedPostId( state ) {
 	return getCurrentEditedPost( state ).id;
 }
 
-/**
- * Returns the previous edited post type (wp_template or wp_template_part).
- *
- * @param {Object} state Global application state.
- *
- * @return {TemplateType?} Template type.
- */
-export function getPreviousEditedPostType( state ) {
-	return getPreviousEditedPost( state ).type;
-}
-
-/**
- * Returns the ID of the previous edited template or template part.
- *
- * @param {Object} state Global application state.
- *
- * @return {string?} Post ID.
- */
-export function getPreviousEditedPostId( state ) {
-	return getPreviousEditedPost( state ).id;
-}
-
 /**
  * Returns the current page object.
  *

package/src/store/test/reducer.js

@@ -88,7 +88,7 @@ describe( 'state', () => {
 
 	describe( 'editedPost()', () => {
 		it( 'should apply default state', () => {
-			expect( editedPost( undefined, {} ) ).toEqual( [] );
+			expect( editedPost( undefined, {} ) ).toEqual( {} );
 		} );
 
 		it( 'should default to returning the same state', () => {
@@ -98,56 +98,39 @@ describe( 'state', () => {
 
 		it( 'should update when a template is set', () => {
 			expect(
-				editedPost( [ { id: 1, type: 'wp_template' } ], {
-					type: 'SET_TEMPLATE',
-					templateId: 2,
-				} )
-			).toEqual( [ { id: 2, type: 'wp_template' } ] );
+				editedPost(
+					{ id: 1, type: 'wp_template' },
+					{
+						type: 'SET_TEMPLATE',
+						templateId: 2,
+					}
+				)
+			).toEqual( { id: 2, type: 'wp_template' } );
 		} );
 
 		it( 'should update when a page is set', () => {
 			expect(
-				editedPost( [ { id: 1, type: 'wp_template' } ], {
-					type: 'SET_PAGE',
-					templateId: 2,
-					page: {},
-				} )
-			).toEqual( [ { id: 2, type: 'wp_template', page: {} } ] );
+				editedPost(
+					{ id: 1, type: 'wp_template' },
+					{
+						type: 'SET_PAGE',
+						templateId: 2,
+						page: {},
+					}
+				)
+			).toEqual( { id: 2, type: 'wp_template', page: {} } );
 		} );
 
 		it( 'should update when a template part is set', () => {
-			expect(
-				editedPost( [ { id: 1, type: 'wp_template' } ], {
-					type: 'SET_TEMPLATE_PART',
-					templatePartId: 2,
-				} )
-			).toEqual( [ { id: 2, type: 'wp_template_part' } ] );
-		} );
-
-		it( 'should update when a template part is pushed', () => {
-			expect(
-				editedPost( [ { id: 1, type: 'wp_template' } ], {
-					type: 'PUSH_TEMPLATE_PART',
-					templatePartId: 2,
-				} )
-			).toEqual( [
-				{ id: 1, type: 'wp_template' },
-				{ id: 2, type: 'wp_template_part' },
-			] );
-		} );
-
-		it( 'should go back to the previous page', () => {
 			expect(
 				editedPost(
-					[
-						{ id: 1, type: 'wp_template' },
-						{ id: 2, type: 'wp_template_part' },
-					],
+					{ id: 1, type: 'wp_template' },
 					{
-						type: 'GO_BACK',
+						type: 'SET_TEMPLATE_PART',
+						templatePartId: 2,
 					}
 				)
-			).toEqual( [ { id: 1, type: 'wp_template' } ] );
+			).toEqual( { id: 2, type: 'wp_template_part' } );
 		} );
 	} );
 

package/src/store/test/selectors.js

@@ -13,8 +13,6 @@ import {
 	getHomeTemplateId,
 	getEditedPostType,
 	getEditedPostId,
-	getPreviousEditedPostType,
-	getPreviousEditedPostId,
 	getPage,
 	getNavigationPanelActiveMenu,
 	getReusableBlocks,
@@ -152,51 +150,22 @@ describe( 'selectors', () => {
 
 	describe( 'getEditedPostId', () => {
 		it( 'returns the template ID', () => {
-			const state = { editedPost: [ { id: 10 } ] };
+			const state = { editedPost: { id: 10 } };
 			expect( getEditedPostId( state ) ).toBe( 10 );
 		} );
 	} );
 
 	describe( 'getEditedPostType', () => {
 		it( 'returns the template type', () => {
-			const state = { editedPost: [ { type: 'wp_template' } ] };
+			const state = { editedPost: { type: 'wp_template' } };
 			expect( getEditedPostType( state ) ).toBe( 'wp_template' );
 		} );
 	} );
 
-	describe( 'getPreviousEditedPostId', () => {
-		it( 'returns the previous template ID', () => {
-			const state = { editedPost: [ { id: 10 }, { id: 20 } ] };
-			expect( getPreviousEditedPostId( state ) ).toBe( 10 );
-		} );
-
-		it( 'returns undefined when there are no previous pages', () => {
-			const state = { editedPost: [ { id: 10 } ] };
-			expect( getPreviousEditedPostId( state ) ).toBeUndefined();
-		} );
-	} );
-
-	describe( 'getPreviousEditedPostType', () => {
-		it( 'returns the previous template type', () => {
-			const state = {
-				editedPost: [
-					{ type: 'wp_template' },
-					{ type: 'wp_template_part' },
-				],
-			};
-			expect( getPreviousEditedPostType( state ) ).toBe( 'wp_template' );
-		} );
-
-		it( 'returns undefined when there are no previous pages', () => {
-			const state = { editedPost: [ { type: 'wp_template' } ] };
-			expect( getPreviousEditedPostType( state ) ).toBeUndefined();
-		} );
-	} );
-
 	describe( 'getPage', () => {
 		it( 'returns the page object', () => {
 			const page = {};
-			const state = { editedPost: [ { page } ] };
+			const state = { editedPost: { page } };
 			expect( getPage( state ) ).toBe( page );
 		} );
 	} );

package/src/utils/get-is-list-page.js

@@ -0,0 +1,11 @@
+/**
+ * Returns if the params match the list page route.
+ *
+ * @param {Object} params          The search params.
+ * @param {string} params.postId   The post ID.
+ * @param {string} params.postType The post type.
+ * @return {boolean} Is list page or not.
+ */
+export default function getIsListPage( { postId, postType } ) {
+	return !! ( ! postId && postType );
+}