@wordpress/edit-site 3.0.24 → 4.0.0

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

@@ -23,6 +23,7 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		__experimentalGetDirtyEntityRecords,
 		isSavingEntityRecord,
 	} = useSelect( coreStore );
+	const { getEditorMode } = useSelect( editSiteStore );
 	const isListViewOpen = useSelect(
 		( select ) => select( editSiteStore ).isListViewOpened(),
 		[]
@@ -35,7 +36,9 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		[]
 	);
 	const { redo, undo } = useDispatch( coreStore );
-	const { setIsListViewOpened } = useDispatch( editSiteStore );
+	const { setIsListViewOpened, switchEditorMode } = useDispatch(
+		editSiteStore
+	);
 	const { enableComplementaryArea, disableComplementaryArea } = useDispatch(
 		interfaceStore
 	);
@@ -80,6 +83,10 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		}
 	} );
 
+	useShortcut( 'core/edit-site/toggle-mode', () => {
+		switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
+	} );
+
 	return null;
 }
 
@@ -137,6 +144,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',
@@ -168,6 +185,15 @@ function KeyboardShortcutsRegister() {
 				},
 			],
 		} );
+		registerShortcut( {
+			name: 'core/edit-site/toggle-mode',
+			category: 'global',
+			description: __( 'Switch between visual editor and code editor.' ),
+			keyCombination: {
+				modifier: 'secondary',
+				character: 'm',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

package/src/components/list/actions/index.js

@@ -39,14 +39,14 @@ export default function Actions( { template } ) {
 				template.id
 			);
 
-			createSuccessNotice( __( 'Template reverted.' ), {
+			createSuccessNotice( __( 'Entity reverted.' ), {
 				type: 'snackbar',
 			} );
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: __( 'An error occurred while reverting the template.' );
+					: __( 'An error occurred while reverting the entity.' );
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
 		}
@@ -68,18 +68,19 @@ export default function Actions( { template } ) {
 							/>
 							<MenuItem
 								isDestructive
+								isTertiary
 								onClick={ () => {
 									removeTemplate( template );
 									onClose();
 								} }
 							>
-								{ __( 'Delete template' ) }
+								{ __( 'Delete' ) }
 							</MenuItem>
 						</>
 					) }
 					{ isRevertable && (
 						<MenuItem
-							info={ __( 'Restore template to default state' ) }
+							info={ __( 'Restore to default state' ) }
 							onClick={ () => {
 								revertAndSaveTemplate();
 								onClose();

package/src/components/list/actions/rename-menu-item.js

@@ -61,14 +61,14 @@ export default function RenameMenuItem( { template, onClose } ) {
 				throw lastError;
 			}
 
-			createSuccessNotice( __( 'Template has been renamed.' ), {
+			createSuccessNotice( __( 'Entity renamed.' ), {
 				type: 'snackbar',
 			} );
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: __( 'An error occurred while renaming the template.' );
+					: __( 'An error occurred while renaming the entity.' );
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
 		}
@@ -86,7 +86,7 @@ export default function RenameMenuItem( { template, onClose } ) {
 			</MenuItem>
 			{ isModalOpen && (
 				<Modal
-					title={ __( 'Rename template' ) }
+					title={ __( 'Rename' ) }
 					closeLabel={ __( 'Close' ) }
 					onRequestClose={ () => {
 						setIsModalOpen( false );

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,71 @@
+/**
+ * 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
+		)
+	);
+}
+
+async function getHomepageParams( siteUrl ) {
+	const siteSettings = await apiFetch( { path: '/wp/v2/settings' } );
+	if ( ! siteSettings ) {
+		return;
+	}
+
+	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( ( res ) => res.json() )
+		.then( ( { data } ) => data );
+
+	if ( ! template?.id ) {
+		return;
+	}
+
+	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/secondary-sidebar/inserter-sidebar.js

@@ -2,13 +2,15 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import { __experimentalLibrary as Library } from '@wordpress/block-editor';
 import { close } from '@wordpress/icons';
 import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,22 +25,30 @@ export default function InserterSidebar() {
 	);
 
 	const isMobile = useViewportMatch( 'medium', '<' );
+	const TagName = ! isMobile ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
+		focusOnMount: null,
 	} );
 
+	const libraryRef = useRef();
+	useEffect( () => {
+		libraryRef.current.focusSearch();
+	}, [] );
+
 	return (
 		<div
 			ref={ inserterDialogRef }
 			{ ...inserterDialogProps }
 			className="edit-site-editor__inserter-panel"
 		>
-			<div className="edit-site-editor__inserter-panel-header">
+			<TagName className="edit-site-editor__inserter-panel-header">
 				<Button
 					icon={ close }
+					label={ __( 'Close block inserter' ) }
 					onClick={ () => setIsInserterOpened( false ) }
 				/>
-			</div>
+			</TagName>
 			<div className="edit-site-editor__inserter-panel-content">
 				<Library
 					showInserterHelpPanel
@@ -48,6 +58,7 @@ export default function InserterSidebar() {
 						insertionPoint.insertionIndex
 					}
 					__experimentalFilterValue={ insertionPoint.filterValue }
+					ref={ libraryRef }
 				/>
 			</div>
 		</div>

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -32,7 +32,8 @@ export default function ListViewSidebar() {
 	}
 
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-	const focusReturnRef = useFocusReturn();
+	const headerFocusReturnRef = useFocusReturn();
+	const contentFocusReturnRef = useFocusReturn();
 	function closeOnEscape( event ) {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
 			setIsListViewOpened( false );
@@ -49,17 +50,23 @@ export default function ListViewSidebar() {
 			className="edit-site-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
 		>
-			<div className="edit-site-editor__list-view-panel-header">
-				<strong id={ labelId }>{ __( 'List view' ) }</strong>
+			<div
+				className="edit-site-editor__list-view-panel-header"
+				ref={ headerFocusReturnRef }
+			>
+				<strong id={ labelId }>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
-					label={ __( 'Close list view sidebar' ) }
+					label={ __( 'Close List View Sidebar' ) }
 					onClick={ () => setIsListViewOpened( false ) }
 				/>
 			</div>
 			<div
 				className="edit-site-editor__list-view-panel-content"
-				ref={ useMergeRefs( [ focusReturnRef, focusOnMountRef ] ) }
+				ref={ useMergeRefs( [
+					contentFocusReturnRef,
+					focusOnMountRef,
+				] ) }
 			>
 				<ListView
 					onSelect={ selectEditorBlock }

package/src/components/secondary-sidebar/style.scss

@@ -16,10 +16,6 @@
 	padding-right: $grid-unit-10;
 	display: flex;
 	justify-content: flex-end;
-
-	@include break-medium() {
-		display: none;
-	}
 }
 
 .edit-site-editor__inserter-panel-content,

package/src/components/sidebar/default-sidebar.js

@@ -15,6 +15,7 @@ export default function DefaultSidebar( {
 	closeLabel,
 	header,
 	headerClassName,
+	panelClassName,
 } ) {
 	return (
 		<>
@@ -27,6 +28,7 @@ export default function DefaultSidebar( {
 				closeLabel={ closeLabel }
 				header={ header }
 				headerClassName={ headerClassName }
+				panelClassName={ panelClassName }
 			>
 				{ children }
 			</ComplementaryArea>

package/src/components/sidebar/global-styles-sidebar.js

@@ -24,6 +24,7 @@ export default function GlobalStylesSidebar() {
 			title={ __( 'Styles' ) }
 			icon={ styles }
 			closeLabel={ __( 'Close global styles sidebar' ) }
+			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
 				<Flex>
 					<FlexBlock>

package/src/components/sidebar/style.scss

@@ -17,6 +17,23 @@
 	}
 }
 
+.edit-site-global-styles-sidebar {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	&__panel,
+	&__navigator-provider {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+	}
+
+	&__navigator-screen {
+		flex: 1;
+	}
+}
+
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
 	margin-left: 0;
 }
@@ -25,20 +42,6 @@
 	margin-left: auto;
 }
 
-.edit-site-global-styles-sidebar__border-controls-row {
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: $grid-unit-15;
-
-	> * {
-		width: calc(50% - #{ $grid-unit-10 });
-	}
-
-	.components-border-style-control__buttons {
-		margin-bottom: 0;
-	}
-}
-
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
 	font-size: $default-font-size * 1.2;
 	font-weight: 500;
@@ -53,6 +56,10 @@
 	border: 0;
 }
 
+.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
+	grid-column: span 1;
+}
+
 .edit-site-global-styles-sidebar__blocks-group {
 	padding-top: $grid-unit-30;
 	border-top: $border-width solid $gray-200;