@wordpress/edit-site 3.0.26 → 3.0.29

package/src/components/keyboard-shortcut-help-modal/index.js

@@ -0,0 +1,135 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { isString } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { textFormattingShortcuts } from './config';
+import Shortcut from './shortcut';
+import DynamicShortcut from './dynamic-shortcut';
+
+const ShortcutList = ( { shortcuts } ) => (
+	/*
+	 * Disable reason: The `list` ARIA role is redundant but
+	 * Safari+VoiceOver won't announce the list otherwise.
+	 */
+	/* eslint-disable jsx-a11y/no-redundant-roles */
+	<ul
+		className="edit-site-keyboard-shortcut-help-modal__shortcut-list"
+		role="list"
+	>
+		{ shortcuts.map( ( shortcut, index ) => (
+			<li
+				className="edit-site-keyboard-shortcut-help-modal__shortcut"
+				key={ index }
+			>
+				{ isString( shortcut ) ? (
+					<DynamicShortcut name={ shortcut } />
+				) : (
+					<Shortcut { ...shortcut } />
+				) }
+			</li>
+		) ) }
+	</ul>
+	/* eslint-enable jsx-a11y/no-redundant-roles */
+);
+
+const ShortcutSection = ( { title, shortcuts, className } ) => (
+	<section
+		className={ classnames(
+			'edit-site-keyboard-shortcut-help-modal__section',
+			className
+		) }
+	>
+		{ !! title && (
+			<h2 className="edit-site-keyboard-shortcut-help-modal__section-title">
+				{ title }
+			</h2>
+		) }
+		<ShortcutList shortcuts={ shortcuts } />
+	</section>
+);
+
+const ShortcutCategorySection = ( {
+	title,
+	categoryName,
+	additionalShortcuts = [],
+} ) => {
+	const categoryShortcuts = useSelect(
+		( select ) => {
+			return select( keyboardShortcutsStore ).getCategoryShortcuts(
+				categoryName
+			);
+		},
+		[ categoryName ]
+	);
+
+	return (
+		<ShortcutSection
+			title={ title }
+			shortcuts={ categoryShortcuts.concat( additionalShortcuts ) }
+		/>
+	);
+};
+
+export default function KeyboardShortcutHelpModal( {
+	isModalActive,
+	toggleModal,
+} ) {
+	if ( ! isModalActive ) {
+		return null;
+	}
+
+	return (
+		<Modal
+			className="edit-site-keyboard-shortcut-help-modal"
+			title={ __( 'Keyboard shortcuts' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ toggleModal }
+		>
+			<ShortcutSection
+				className="edit-site-keyboard-shortcut-help-modal__main-shortcuts"
+				shortcuts={ [ 'core/edit-site/keyboard-shortcuts' ] }
+			/>
+			<ShortcutCategorySection
+				title={ __( 'Global shortcuts' ) }
+				categoryName="global"
+			/>
+
+			<ShortcutCategorySection
+				title={ __( 'Selection shortcuts' ) }
+				categoryName="selection"
+			/>
+
+			<ShortcutCategorySection
+				title={ __( 'Block shortcuts' ) }
+				categoryName="block"
+				additionalShortcuts={ [
+					{
+						keyCombination: { character: '/' },
+						description: __(
+							'Change the block type after adding a new paragraph.'
+						),
+						/* translators: The forward-slash character. e.g. '/'. */
+						ariaLabel: __( 'Forward-slash' ),
+					},
+				] }
+			/>
+			<ShortcutSection
+				title={ __( 'Text formatting' ) }
+				shortcuts={ textFormattingShortcuts }
+			/>
+		</Modal>
+	);
+}

package/src/components/keyboard-shortcut-help-modal/shortcut.js

@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import { castArray } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { displayShortcutList, shortcutAriaLabel } from '@wordpress/keycodes';
+
+function KeyCombination( { keyCombination, forceAriaLabel } ) {
+	const shortcut = keyCombination.modifier
+		? displayShortcutList[ keyCombination.modifier ](
+				keyCombination.character
+		  )
+		: keyCombination.character;
+	const ariaLabel = keyCombination.modifier
+		? shortcutAriaLabel[ keyCombination.modifier ](
+				keyCombination.character
+		  )
+		: keyCombination.character;
+
+	return (
+		<kbd
+			className="edit-site-keyboard-shortcut-help-modal__shortcut-key-combination"
+			aria-label={ forceAriaLabel || ariaLabel }
+		>
+			{ castArray( shortcut ).map( ( character, index ) => {
+				if ( character === '+' ) {
+					return <Fragment key={ index }>{ character }</Fragment>;
+				}
+
+				return (
+					<kbd
+						key={ index }
+						className="edit-site-keyboard-shortcut-help-modal__shortcut-key"
+					>
+						{ character }
+					</kbd>
+				);
+			} ) }
+		</kbd>
+	);
+}
+
+export default function Shortcut( {
+	description,
+	keyCombination,
+	aliases = [],
+	ariaLabel,
+} ) {
+	return (
+		<>
+			<div className="edit-site-keyboard-shortcut-help-modal__shortcut-description">
+				{ description }
+			</div>
+			<div className="edit-site-keyboard-shortcut-help-modal__shortcut-term">
+				<KeyCombination
+					keyCombination={ keyCombination }
+					forceAriaLabel={ ariaLabel }
+				/>
+				{ aliases.map( ( alias, index ) => (
+					<KeyCombination
+						keyCombination={ alias }
+						forceAriaLabel={ ariaLabel }
+						key={ index }
+					/>
+				) ) }
+			</div>
+		</>
+	);
+}

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/list/table.js

@@ -8,6 +8,7 @@ import {
 	VisuallyHidden,
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -98,8 +99,10 @@ export default function Table( { templateType } ) {
 										postType: template.type,
 									} }
 								>
-									{ template.title?.rendered ||
-										template.slug }
+									{ decodeEntities(
+										template.title?.rendered ||
+											template.slug
+									) }
 								</Link>
 							</Heading>
 							{ template.description }

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;