@wordpress/edit-site 3.0.25 → 3.0.28

package/src/components/keyboard-shortcut-help-modal/style.scss

@@ -0,0 +1,66 @@
+.edit-site-keyboard-shortcut-help-modal {
+	&__section {
+		margin: 0 0 2rem 0;
+	}
+
+	&__main-shortcuts .edit-site-keyboard-shortcut-help-modal__shortcut-list {
+		// Push the shortcut to be flush with top modal header.
+		margin-top: -$grid-unit-30 -$border-width;
+	}
+
+	&__section-title {
+		font-size: 0.9rem;
+		font-weight: 600;
+	}
+
+	&__shortcut {
+		display: flex;
+		align-items: baseline;
+		padding: 0.6rem 0;
+		border-top: 1px solid $gray-300;
+		margin-bottom: 0;
+
+		&:last-child {
+			border-bottom: 1px solid $gray-300;
+		}
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	&__shortcut-term {
+		font-weight: 600;
+		margin: 0 0 0 1rem;
+		text-align: right;
+	}
+
+	&__shortcut-description {
+		flex: 1;
+		margin: 0;
+
+		// IE 11 flex item fix - ensure the item does not collapse.
+		flex-basis: auto;
+	}
+
+	&__shortcut-key-combination {
+		display: block;
+		background: none;
+		margin: 0;
+		padding: 0;
+
+		& + .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination {
+			margin-top: 10px;
+		}
+	}
+
+	&__shortcut-key {
+		padding: 0.25rem 0.5rem;
+		border-radius: 8%;
+		margin: 0 0.2rem 0 0.2rem;
+
+		&:last-child {
+			margin: 0 0 0 0.2rem;
+		}
+	}
+}

package/src/components/keyboard-shortcuts/index.js

@@ -137,6 +137,16 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
+		registerShortcut( {
+			name: 'core/edit-site/keyboard-shortcuts',
+			category: 'main',
+			description: __( 'Display these keyboard shortcuts.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: 'h',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/edit-site/next-region',
 			category: 'global',

package/src/components/list/added-by.js

@@ -18,6 +18,7 @@ import {
 	commentAuthorAvatar as authorIcon,
 	layout as themeIcon,
 	plugins as pluginIcon,
+	globe as globeIcon,
 } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -35,6 +36,45 @@ function CustomizedTooltip( { isCustomized, children } ) {
 	);
 }
 
+function BaseAddedBy( { text, icon, imageUrl, isCustomized } ) {
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+
+	return (
+		<HStack alignment="left">
+			<CustomizedTooltip isCustomized={ isCustomized }>
+				{ imageUrl ? (
+					<div
+						className={ classnames(
+							'edit-site-list-added-by__avatar',
+							{
+								'is-loaded': isImageLoaded,
+							}
+						) }
+					>
+						<img
+							onLoad={ () => setIsImageLoaded( true ) }
+							alt=""
+							src={ imageUrl }
+						/>
+					</div>
+				) : (
+					<div
+						className={ classnames(
+							'edit-site-list-added-by__icon',
+							{
+								'is-customized': isCustomized,
+							}
+						) }
+					>
+						<Icon icon={ icon } />
+					</div>
+				) }
+			</CustomizedTooltip>
+			<span>{ text }</span>
+		</HStack>
+	);
+}
+
 function AddedByTheme( { slug, isCustomized } ) {
 	const theme = useSelect(
 		( select ) => select( coreStore ).getTheme( slug ),
@@ -42,18 +82,11 @@ function AddedByTheme( { slug, isCustomized } ) {
 	);
 
 	return (
-		<HStack alignment="left">
-			<CustomizedTooltip isCustomized={ isCustomized }>
-				<div
-					className={ classnames( 'edit-site-list-added-by__icon', {
-						'is-customized': isCustomized,
-					} ) }
-				>
-					<Icon icon={ themeIcon } />
-				</div>
-			</CustomizedTooltip>
-			<span>{ theme?.name?.rendered || slug }</span>
-		</HStack>
+		<BaseAddedBy
+			icon={ themeIcon }
+			text={ theme?.name?.rendered || slug }
+			isCustomized={ isCustomized }
+		/>
 	);
 }
 
@@ -64,14 +97,11 @@ function AddedByPlugin( { slug, isCustomized } ) {
 	);
 
 	return (
-		<HStack alignment="left">
-			<CustomizedTooltip isCustomized={ isCustomized }>
-				<div className="edit-site-list-added-by__icon">
-					<Icon icon={ pluginIcon } />
-				</div>
-			</CustomizedTooltip>
-			<span>{ plugin?.name || slug }</span>
-		</HStack>
+		<BaseAddedBy
+			icon={ pluginIcon }
+			text={ plugin?.name || slug }
+			isCustomized={ isCustomized }
+		/>
 	);
 }
 
@@ -79,35 +109,13 @@ function AddedByAuthor( { id } ) {
 	const user = useSelect( ( select ) => select( coreStore ).getUser( id ), [
 		id,
 	] );
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-
-	const avatarURL = user?.avatar_urls?.[ 48 ];
-	const hasAvatar = !! avatarURL;
 
 	return (
-		<HStack alignment="left">
-			<div
-				className={ classnames(
-					hasAvatar
-						? 'edit-site-list-added-by__avatar'
-						: 'edit-site-list-added-by__icon',
-					{
-						'is-loaded': isImageLoaded,
-					}
-				) }
-			>
-				{ hasAvatar ? (
-					<img
-						onLoad={ () => setIsImageLoaded( true ) }
-						alt=""
-						src={ avatarURL }
-					/>
-				) : (
-					<Icon icon={ authorIcon } />
-				) }
-			</div>
-			<span>{ user?.nickname }</span>
-		</HStack>
+		<BaseAddedBy
+			icon={ authorIcon }
+			imageUrl={ user?.avatar_urls?.[ 48 ] }
+			text={ user?.nickname }
+		/>
 	);
 }
 
@@ -117,29 +125,15 @@ function AddedBySite() {
 		const siteData = getEntityRecord( 'root', '__unstableBase' );
 
 		return {
-			name: siteData.name,
+			name: siteData?.name,
 			logoURL: siteData?.site_logo
 				? getMedia( siteData.site_logo )?.source_url
 				: undefined,
 		};
 	}, [] );
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
 
 	return (
-		<HStack alignment="left">
-			<div
-				className={ classnames( 'edit-site-list-added-by__avatar', {
-					'is-loaded': isImageLoaded,
-				} ) }
-			>
-				<img
-					onLoad={ () => setIsImageLoaded( true ) }
-					alt=""
-					src={ logoURL }
-				/>
-			</div>
-			<span>{ name }</span>
-		</HStack>
+		<BaseAddedBy icon={ globeIcon } imageUrl={ logoURL } text={ name } />
 	);
 }
 

package/src/components/routes/redirect-to-homepage.js

@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import history from '../../utils/history';
+import getIsListPage from '../../utils/get-is-list-page';
+
+function getNeedsHomepageRedirect( params ) {
+	const { postType } = params;
+	return (
+		! getIsListPage( params ) &&
+		! [ 'post', 'page', 'wp_template', 'wp_template_part' ].includes(
+			postType
+		)
+	);
+}
+
+/**
+ * Returns the postType and postId of the default homepage.
+ *
+ * @param {string} siteUrl The URL of the site.
+ * @return {Object} An object containing the postType and postId properties
+ *                  or `undefined` if a homepage could not be found.
+ */
+async function getHomepageParams( siteUrl ) {
+	const siteSettings = await apiFetch( { path: '/wp/v2/settings' } );
+	if ( ! siteSettings ) {
+		throw new Error( '`getHomepageParams`: unable to load site settings.' );
+	}
+
+	const {
+		show_on_front: showOnFront,
+		page_on_front: frontpageId,
+	} = siteSettings;
+
+	// If the user has set a page as the homepage, use those details.
+	if ( showOnFront === 'page' ) {
+		return {
+			postType: 'page',
+			postId: frontpageId,
+		};
+	}
+
+	// Else get the home template.
+	// This matches the logic in `__experimentalGetTemplateForLink`.
+	// (packages/core-data/src/resolvers.js)
+	const template = await window
+		.fetch( addQueryArgs( siteUrl, { '_wp-find-template': true } ) )
+		.then( ( response ) => {
+			if ( ! response.ok ) {
+				throw new Error(
+					`\`getHomepageParams\`: HTTP status error, ${ response.status } ${ response.statusText }`
+				);
+			}
+
+			return response.json();
+		} )
+		.then( ( { data } ) => {
+			if ( data.message ) {
+				throw new Error(
+					`\`getHomepageParams\`: REST API error, ${ data.message }`
+				);
+			}
+
+			return data;
+		} );
+
+	if ( ! template?.id ) {
+		throw new Error( '`getHomepageParams`: unable to find home template.' );
+	}
+
+	return {
+		postType: 'wp_template',
+		postId: template.id,
+	};
+}
+
+export default async function redirectToHomepage( siteUrl ) {
+	const searchParams = new URLSearchParams( history.location.search );
+	const params = Object.fromEntries( searchParams.entries() );
+
+	if ( getNeedsHomepageRedirect( params ) ) {
+		const homepageParams = await getHomepageParams( siteUrl );
+
+		if ( homepageParams ) {
+			history.replace( homepageParams );
+		}
+	}
+}

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

@@ -30,11 +30,16 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
 	const onConvert = async ( { title, area } ) => {
+		// Currently template parts only allow latin chars.
+		// Fallback slug will receive suffix by default.
+		const cleanSlug =
+			kebabCase( title ).replace( /[^\w-]+/g, '' ) || 'wp-custom-part';
+
 		const templatePart = await saveEntityRecord(
 			'postType',
 			'wp_template_part',
 			{
-				slug: kebabCase( title ),
+				slug: cleanSlug,
 				title,
 				content: serialize( blocks ),
 				area,

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

@@ -2,63 +2,31 @@
  * WordPress dependencies
  */
 import { useEffect } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { useLocation, useHistory } from '../routes';
+import { useLocation } from '../routes';
 import { store as editSiteStore } from '../../store';
 
 export default function URLQueryController() {
-	const { setTemplate, setTemplatePart, showHomepage, setPage } = useDispatch(
+	const { setTemplate, setTemplatePart, setPage } = useDispatch(
 		editSiteStore
 	);
-	const history = useHistory();
 	const {
 		params: { postId, postType },
 	} = useLocation();
-	const { getPage, getEditedPostId, getEditedPostType } = useSelect(
-		editSiteStore
-	);
 
 	// Set correct entity on page navigation.
 	useEffect( () => {
-		let isMounted = true;
-
 		if ( 'page' === postType || 'post' === postType ) {
 			setPage( { context: { postType, postId } } ); // Resolves correct template based on ID.
 		} else if ( 'wp_template' === postType ) {
 			setTemplate( postId );
 		} else if ( 'wp_template_part' === postType ) {
 			setTemplatePart( postId );
-		} else {
-			showHomepage().then( () => {
-				if ( ! isMounted ) {
-					return;
-				}
-
-				const page = getPage();
-				const editedPostId = getEditedPostId();
-				const editedPostType = getEditedPostType();
-
-				if ( page?.context?.postId && page?.context?.postType ) {
-					history.replace( {
-						postId: page.context.postId,
-						postType: page.context.postType,
-					} );
-				} else if ( editedPostId && editedPostType ) {
-					history.replace( {
-						postId: editedPostId,
-						postType: editedPostType,
-					} );
-				}
-			} );
 		}
-
-		return () => {
-			isMounted = false;
-		};
 	}, [ postId, postType ] );
 
 	return null;

package/src/index.js

@@ -13,17 +13,19 @@ import {
 	__experimentalFetchUrlData as fetchUrlData,
 } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
 import { store as viewportStore } from '@wordpress/viewport';
 import { getQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
-import './plugins';
 import './hooks';
 import { store as editSiteStore } from './store';
 import EditSiteApp from './components/app';
 import getIsListPage from './utils/get-is-list-page';
+import redirectToHomepage from './components/routes/redirect-to-homepage';
+import ErrorBoundaryWarning from './components/error-boundary/warning';
 
 /**
  * Reinitializes the editor after the user chooses to reboot the editor after
@@ -33,7 +35,27 @@ import getIsListPage from './utils/get-is-list-page';
  * @param {Element} target   DOM node in which editor is rendered.
  * @param {?Object} settings Editor settings object.
  */
-export function reinitializeEditor( target, settings ) {
+export async function reinitializeEditor( target, settings ) {
+	// The site editor relies on `postType` and `postId` params in the URL to
+	// define what's being edited. When visiting via the dashboard link, these
+	// won't be present. Do a client side redirect to the 'homepage' if that's
+	// the case.
+	try {
+		await redirectToHomepage( settings.siteUrl );
+	} catch ( error ) {
+		render(
+			<ErrorBoundaryWarning
+				message={ __(
+					'The editor is unable to find a block template for the homepage.'
+				) }
+				error={ error }
+				dashboardLink="index.php"
+			/>,
+			target
+		);
+		return;
+	}
+
 	// This will be a no-op if the target doesn't have any React nodes.
 	unmountComponentAtNode( target );
 	const reboot = reinitializeEditor.bind( null, target, settings );
@@ -42,6 +64,7 @@ export function reinitializeEditor( target, settings ) {
 	// 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,

package/src/store/actions.js

@@ -209,11 +209,17 @@ export function* setPage( page ) {
 
 		page.path = getPathAndQueryString( entity.link );
 	}
-	const { id: templateId, slug: templateSlug } = yield controls.resolveSelect(
+	const template = yield controls.resolveSelect(
 		coreStore,
 		'__experimentalGetTemplateForLink',
 		page.path
 	);
+
+	if ( ! template ) {
+		return;
+	}
+
+	const { id: templateId, slug: templateSlug } = template;
 	yield {
 		type: 'SET_PAGE',
 		page: ! templateSlug
@@ -230,40 +236,6 @@ export function* setPage( page ) {
 	return templateId;
 }
 
-/**
- * Displays the site homepage for editing in the editor.
- */
-export function* showHomepage() {
-	const {
-		show_on_front: showOnFront,
-		page_on_front: frontpageId,
-	} = yield controls.resolveSelect(
-		coreStore,
-		'getEntityRecord',
-		'root',
-		'site'
-	);
-
-	const { siteUrl } = yield controls.select(
-		editSiteStoreName,
-		'getSettings'
-	);
-
-	const page = {
-		path: siteUrl,
-		context:
-			showOnFront === 'page'
-				? {
-						postType: 'page',
-						postId: frontpageId,
-				  }
-				: {},
-	};
-
-	const homeTemplate = yield* setPage( page );
-	yield setHomeTemplateId( homeTemplate );
-}
-
 /**
  * Returns an action object used to set the active navigation panel menu.
  *

package/src/store/test/actions.js

@@ -7,7 +7,6 @@ import {
 	addTemplate,
 	setTemplatePart,
 	setPage,
-	showHomepage,
 	setHomeTemplateId,
 	setIsListViewOpened,
 } from '../actions';
@@ -105,95 +104,6 @@ describe( 'actions', () => {
 		} );
 	} );
 
-	describe( 'showHomepage', () => {
-		it( 'should calculate and set the homepage if it is set to show posts', () => {
-			const it = showHomepage();
-
-			expect( it.next().value ).toEqual( {
-				args: [ 'root', 'site' ],
-				selectorName: 'getEntityRecord',
-				storeKey: 'core',
-				type: '@@data/RESOLVE_SELECT',
-			} );
-
-			expect( it.next( { show_on_front: 'posts' } ).value ).toEqual( {
-				args: [],
-				selectorName: 'getSettings',
-				storeKey: 'core/edit-site',
-				type: '@@data/SELECT',
-			} );
-
-			const page = {
-				path: 'http:/my-site',
-				context: {},
-			};
-
-			expect( it.next( { siteUrl: 'http:/my-site' } ).value ).toEqual( {
-				type: '@@data/RESOLVE_SELECT',
-				storeKey: 'core',
-				selectorName: '__experimentalGetTemplateForLink',
-				args: [ page.path ],
-			} );
-			expect( it.next( { id: 'theme//slug' } ).value ).toEqual( {
-				type: 'SET_PAGE',
-				page,
-				templateId: 'theme//slug',
-			} );
-			expect( it.next( 'theme//slug' ).value ).toEqual( {
-				type: 'SET_HOME_TEMPLATE',
-				homeTemplateId: 'theme//slug',
-			} );
-			expect( it.next().done ).toBe( true );
-		} );
-
-		it( 'should calculate and set the homepage if it is set to show a page', () => {
-			const pageId = 2;
-
-			const it = showHomepage();
-
-			expect( it.next().value ).toEqual( {
-				args: [ 'root', 'site' ],
-				selectorName: 'getEntityRecord',
-				storeKey: 'core',
-				type: '@@data/RESOLVE_SELECT',
-			} );
-
-			expect(
-				it.next( { show_on_front: 'page', page_on_front: pageId } )
-					.value
-			).toEqual( {
-				args: [],
-				selectorName: 'getSettings',
-				storeKey: 'core/edit-site',
-				type: '@@data/SELECT',
-			} );
-
-			const page = {
-				path: 'http:/my-site',
-				context: {
-					postType: 'page',
-					postId: pageId,
-				},
-			};
-			expect( it.next( { siteUrl: 'http:/my-site' } ).value ).toEqual( {
-				type: '@@data/RESOLVE_SELECT',
-				storeKey: 'core',
-				selectorName: '__experimentalGetTemplateForLink',
-				args: [ page.path ],
-			} );
-			expect( it.next( { id: 'theme//slug' } ).value ).toEqual( {
-				type: 'SET_PAGE',
-				page,
-				templateId: 'theme//slug',
-			} );
-			expect( it.next( 'theme//slug' ).value ).toEqual( {
-				type: 'SET_HOME_TEMPLATE',
-				homeTemplateId: 'theme//slug',
-			} );
-			expect( it.next().done ).toBe( true );
-		} );
-	} );
-
 	describe( 'setHomeTemplateId', () => {
 		it( 'should return the SET_HOME_TEMPLATE action', () => {
 			const homeTemplateId = 90;

package/src/style.scss

@@ -17,6 +17,7 @@
 @import "./components/create-template-part-modal/style.scss";
 @import "./components/secondary-sidebar/style.scss";
 @import "./components/welcome-guide/style.scss";
+@import "./components/keyboard-shortcut-help-modal/style.scss";
 
 // In order to use mix-blend-mode, this element needs to have an explicitly set background-color.
 // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations.

package/build/plugins/index.js

@@ -1,28 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _element = require("@wordpress/element");
-
-var _plugins = require("@wordpress/plugins");
-
-var _toolsMoreMenuGroup = _interopRequireDefault(require("../components/header/tools-more-menu-group"));
-
-var _siteExport = _interopRequireDefault(require("./site-export"));
-
-var _welcomeGuideMenuItem = _interopRequireDefault(require("./welcome-guide-menu-item"));
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-(0, _plugins.registerPlugin)('edit-site', {
-  render() {
-    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_toolsMoreMenuGroup.default, null, (0, _element.createElement)(_siteExport.default, null), (0, _element.createElement)(_welcomeGuideMenuItem.default, null)));
-  }
-
-});
-//# sourceMappingURL=index.js.map

package/build/plugins/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/edit-site/src/plugins/index.js"],"names":["render"],"mappings":";;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,6BAAgB,WAAhB,EAA6B;AAC5BA,EAAAA,MAAM,GAAG;AACR,WACC,qDACC,4BAAC,2BAAD,QACC,4BAAC,mBAAD,OADD,EAEC,4BAAC,6BAAD,OAFD,CADD,CADD;AAQA;;AAV2B,CAA7B","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { registerPlugin } from '@wordpress/plugins';\n\n/**\n * Internal dependencies\n */\nimport ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';\nimport SiteExport from './site-export';\nimport WelcomeGuideMenuItem from './welcome-guide-menu-item';\n\nregisterPlugin( 'edit-site', {\n\trender() {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<ToolsMoreMenuGroup>\n\t\t\t\t\t<SiteExport />\n\t\t\t\t\t<WelcomeGuideMenuItem />\n\t\t\t\t</ToolsMoreMenuGroup>\n\t\t\t</>\n\t\t);\n\t},\n} );\n"]}