@wordpress/edit-site 4.7.0 → 4.10.0

package/src/components/header/undo-redo/undo.js

@@ -7,8 +7,9 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
+import { forwardRef } from '@wordpress/element';
 
-export default function UndoButton() {
+function UndoButton( props, ref ) {
 	const hasUndo = useSelect(
 		( select ) => select( coreStore ).hasUndo(),
 		[]
@@ -16,6 +17,8 @@ export default function UndoButton() {
 	const { undo } = useDispatch( coreStore );
 	return (
 		<Button
+			{ ...props }
+			ref={ ref }
 			icon={ ! isRTL() ? undoIcon : redoIcon }
 			label={ __( 'Undo' ) }
 			shortcut={ displayShortcut.primary( 'z' ) }
@@ -27,3 +30,5 @@ export default function UndoButton() {
 		/>
 	);
 }
+
+export default forwardRef( UndoButton );

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

@@ -20,8 +20,20 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'primaryShift', character: 'k' },
 		description: __( 'Remove a link.' ),
 	},
+	{
+		keyCombination: { character: '[[' },
+		description: __( 'Insert a link to a post or page' ),
+	},
 	{
 		keyCombination: { modifier: 'primary', character: 'u' },
 		description: __( 'Underline the selected text.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: 'd' },
+		description: __( 'Strikethrough the selected text.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: 'x' },
+		description: __( 'Make the selected text inline code.' ),
+	},
 ];

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -34,7 +33,7 @@ const ShortcutList = ( { shortcuts } ) => (
 				className="edit-site-keyboard-shortcut-help-modal__shortcut"
 				key={ index }
 			>
-				{ isString( shortcut ) ? (
+				{ typeof shortcut === 'string' ? (
 					<DynamicShortcut name={ shortcut } />
 				) : (
 					<Shortcut { ...shortcut } />

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

@@ -3,11 +3,6 @@
 		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;

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

@@ -19,10 +19,8 @@ import { SIDEBAR_BLOCK } from '../sidebar/constants';
 import { STORE_NAME } from '../../store/constants';
 
 function KeyboardShortcuts( { openEntitiesSavedStates } ) {
-	const {
-		__experimentalGetDirtyEntityRecords,
-		isSavingEntityRecord,
-	} = useSelect( coreStore );
+	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+		useSelect( coreStore );
 	const { getEditorMode } = useSelect( editSiteStore );
 	const isListViewOpen = useSelect(
 		( select ) => select( editSiteStore ).isListViewOpened(),
@@ -36,12 +34,10 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		[]
 	);
 	const { redo, undo } = useDispatch( coreStore );
-	const { setIsListViewOpened, switchEditorMode } = useDispatch(
-		editSiteStore
-	);
-	const { enableComplementaryArea, disableComplementaryArea } = useDispatch(
-		interfaceStore
-	);
+	const { setIsListViewOpened, switchEditorMode } =
+		useDispatch( editSiteStore );
+	const { enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
 
 	useShortcut( 'core/edit-site/save', ( event ) => {
 		event.preventDefault();

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

@@ -19,9 +19,8 @@ import RenameMenuItem from './rename-menu-item';
 export default function Actions( { template } ) {
 	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
 	const { saveEditedEntityRecord } = useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } = useDispatch(
-		noticesStore
-	);
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
 
 	const isRemovable = isTemplateRemovable( template );
 	const isRevertable = isTemplateRevertable( template );

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

@@ -19,12 +19,10 @@ export default function RenameMenuItem( { template, onClose } ) {
 	const [ title, setTitle ] = useState( () => template.title.rendered );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
-	const { editEntityRecord, saveEditedEntityRecord } = useDispatch(
-		coreStore
-	);
-	const { createSuccessNotice, createErrorNotice } = useDispatch(
-		noticesStore
-	);
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
 
 	if ( ! template.is_custom ) {
 		return null;

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

@@ -106,9 +106,10 @@ function AddedByPlugin( { slug, isCustomized } ) {
 }
 
 function AddedByAuthor( { id } ) {
-	const user = useSelect( ( select ) => select( coreStore ).getUser( id ), [
-		id,
-	] );
+	const user = useSelect(
+		( select ) => select( coreStore ).getUser( id ),
+		[ id ]
+	);
 
 	return (
 		<BaseAddedBy

package/src/components/list/style.scss

@@ -131,14 +131,6 @@
 			width: $grid-unit * 40;
 		}
 	}
-
-	.components-modal__header {
-		border-bottom: none;
-	}
-
-	.components-modal__content::before {
-		margin-bottom: $grid-unit-05;
-	}
 }
 
 .edit-site-list__rename-modal-actions {

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

@@ -18,10 +18,8 @@ export const {
 	Slot: NavigationPanelPreviewSlot,
 } = createSlotFill( 'EditSiteNavigationPanelPreview' );
 
-const {
-	Fill: NavigationSidebarFill,
-	Slot: NavigationSidebarSlot,
-} = createSlotFill( 'EditSiteNavigationSidebar' );
+const { Fill: NavigationSidebarFill, Slot: NavigationSidebarSlot } =
+	createSlotFill( 'EditSiteNavigationSidebar' );
 
 function NavigationSidebar( { isDefaultOpen = false, activeTemplateType } ) {
 	const isDesktopViewport = useViewportMatch( 'medium' );

package/src/components/save-button/index.js

@@ -16,10 +16,8 @@ export default function SaveButton( {
 	isEntitiesSavedStatesOpen,
 } ) {
 	const { isDirty, isSaving } = useSelect( ( select ) => {
-		const {
-			__experimentalGetDirtyEntityRecords,
-			isSavingEntityRecord,
-		} = select( coreStore );
+		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+			select( coreStore );
 		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
 		return {
 			isDirty: dirtyEntityRecords.length > 0,

package/src/components/sidebar/index.js

@@ -28,9 +28,10 @@ export const SidebarInspectorFill = InspectorFill;
 export function SidebarComplementaryAreaFills() {
 	const { sidebar, isEditorSidebarOpened, hasBlockSelection } = useSelect(
 		( select ) => {
-			const _sidebar = select(
-				interfaceStore
-			).getActiveComplementaryArea( STORE_NAME );
+			const _sidebar =
+				select( interfaceStore ).getActiveComplementaryArea(
+					STORE_NAME
+				);
 			const _isEditorSidebarOpened = [
 				SIDEBAR_BLOCK,
 				SIDEBAR_TEMPLATE,
@@ -38,9 +39,8 @@ export function SidebarComplementaryAreaFills() {
 			return {
 				sidebar: _sidebar,
 				isEditorSidebarOpened: _isEditorSidebarOpened,
-				hasBlockSelection: !! select(
-					blockEditorStore
-				).getBlockSelectionStart(),
+				hasBlockSelection:
+					!! select( blockEditorStore ).getBlockSelectionStart(),
 			};
 		},
 		[]

package/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js

@@ -35,9 +35,8 @@ export default function NavigationInspector() {
 			getBlock,
 		} = select( blockEditorStore );
 
-		const { getEntityRecords, hasFinishedResolution, isResolving } = select(
-			coreStore
-		);
+		const { getEntityRecords, hasFinishedResolution, isResolving } =
+			select( coreStore );
 
 		const navigationMenusQuery = [
 			'postType',
@@ -46,14 +45,12 @@ export default function NavigationInspector() {
 		];
 
 		// Get the active Navigation block (if present).
-		const selectedNavId = __experimentalGetActiveBlockIdByBlockNames(
-			'core/navigation'
-		);
+		const selectedNavId =
+			__experimentalGetActiveBlockIdByBlockNames( 'core/navigation' );
 
 		// Get all Navigation blocks currently within the editor canvas.
-		const navBlockIds = __experimentalGetGlobalBlocksByName(
-			'core/navigation'
-		);
+		const navBlockIds =
+			__experimentalGetGlobalBlocksByName( 'core/navigation' );
 		const idToRef = {};
 		navBlockIds.forEach( ( id ) => {
 			idToRef[ id ] = getBlock( id )?.attributes?.ref;

package/src/components/sidebar/template-card/index.js

@@ -10,22 +10,26 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
+import TemplateActions from './template-actions';
 import TemplateAreas from './template-areas';
 
 export default function TemplateCard() {
-	const { title, description, icon } = useSelect( ( select ) => {
+	const {
+		info: { title, description, icon },
+		template,
+	} = useSelect( ( select ) => {
 		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		const { getEntityRecord } = select( coreStore );
-		const { __experimentalGetTemplateInfo: getTemplateInfo } = select(
-			editorStore
-		);
+		const { getEditedEntityRecord } = select( coreStore );
+		const { __experimentalGetTemplateInfo: getTemplateInfo } =
+			select( editorStore );
 
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
-		const record = getEntityRecord( 'postType', postType, postId );
+		const record = getEditedEntityRecord( 'postType', postType, postId );
+
 		const info = record ? getTemplateInfo( record ) : {};
 
-		return info;
+		return { info, template: record };
 	}, [] );
 
 	if ( ! title && ! description ) {
@@ -36,11 +40,15 @@ export default function TemplateCard() {
 		<div className="edit-site-template-card">
 			<Icon className="edit-site-template-card__icon" icon={ icon } />
 			<div className="edit-site-template-card__content">
-				<h2 className="edit-site-template-card__title">{ title }</h2>
+				<div className="edit-site-template-card__header">
+					<h2 className="edit-site-template-card__title">
+						{ title }
+					</h2>
+					<TemplateActions template={ template } />
+				</div>
 				<div className="edit-site-template-card__description">
 					{ description }
 				</div>
-
 				<TemplateAreas />
 			</div>
 		</div>

package/src/components/sidebar/template-card/style.scss

@@ -1,51 +1,65 @@
 .edit-site-template-card {
 	display: flex;
 	align-items: flex-start;
-}
 
-.edit-site-template-card__content {
-	flex-grow: 1;
-	margin-bottom: $grid-unit-05;
-}
+	&__content {
+		flex-grow: 1;
+		margin-bottom: $grid-unit-05;
+	}
 
-.edit-site-template-card__title {
-	font-weight: 500;
-	line-height: $icon-size;
-	&.edit-site-template-card__title {
-		margin: 0 0 $grid-unit-05;
+	&__title {
+		font-weight: 500;
+		line-height: $icon-size;
+		&.edit-site-template-card__title {
+			margin: 0;
+		}
 	}
-}
 
-.edit-site-template-card__description {
-	font-size: $default-font-size;
-	margin: 0 0 $grid-unit-20;
-}
+	&__description {
+		font-size: $default-font-size;
+		margin: 0 0 $grid-unit-20;
+	}
 
-.edit-site-template-card__icon {
-	flex: 0 0 $icon-size;
-	margin-right: $grid-unit-15;
-	width: $icon-size;
-	height: $icon-size;
-}
+	&__icon {
+		flex: 0 0 $icon-size;
+		margin-right: $grid-unit-15;
+		width: $icon-size;
+		height: $icon-size;
+	}
 
-h3.edit-site-template-card__template-areas-title {
-	font-weight: 500;
-	margin: 0 0 $grid-unit-10;
-}
+	&__template-areas-list {
+		margin: 0;
 
-.edit-site-template-card__template-areas-list {
-	margin: 0;
+		> li {
+			margin: 0;
+		}
+	}
 
-	> li {
-		margin: 0;
+	&__template-areas-item {
+		width: 100%;
+
+		// Override the default padding.
+		&.components-button.has-icon {
+			padding: 0;
+		}
 	}
-}
 
-.edit-site-template-card__template-areas-item {
-	width: 100%;
+	&__header {
+		display: flex;
+		justify-content: space-between;
+		margin: 0 0 $grid-unit-05;
+	}
 
-	// Override the default padding.
-	&.components-button.has-icon {
-		padding: 0;
+	&__actions {
+		line-height: 0;
+		> .components-button.is-small.has-icon {
+			padding: 0;
+			min-width: auto;
+		}
 	}
 }
+
+h3.edit-site-template-card__template-areas-title {
+	font-weight: 500;
+	margin: 0 0 $grid-unit-10;
+}

package/src/components/sidebar/template-card/template-actions.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import isTemplateRevertable from '../../../utils/is-template-revertable';
+
+export default function Actions( { template } ) {
+	const { revertTemplate } = useDispatch( editSiteStore );
+	const isRevertable = isTemplateRevertable( template );
+	if ( ! isRevertable ) {
+		return null;
+	}
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Actions' ) }
+			className="edit-site-template-card__actions"
+			toggleProps={ { isSmall: true } }
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup>
+					<MenuItem
+						info={ __( 'Restore to default state' ) }
+						onClick={ () => {
+							revertTemplate( template );
+							onClose();
+						} }
+					>
+						{ __( 'Clear customizations' ) }
+					</MenuItem>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/sidebar/template-card/template-areas.js

@@ -16,14 +16,14 @@ import { __ } from '@wordpress/i18n';
 import { store as editSiteStore } from '../../../store';
 
 function TemplateAreaItem( { area, clientId } ) {
-	const { selectBlock, toggleBlockHighlight } = useDispatch(
-		blockEditorStore
-	);
+	const { selectBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
 	const templatePartArea = useSelect(
 		( select ) => {
-			const defaultAreas = select(
-				editorStore
-			).__experimentalGetDefaultTemplatePartAreas();
+			const defaultAreas =
+				select(
+					editorStore
+				).__experimentalGetDefaultTemplatePartAreas();
 
 			return defaultAreas.find(
 				( defaultArea ) => defaultArea.area === area

package/src/components/template-details/edit-template-title.js

@@ -4,8 +4,10 @@
 import { __ } from '@wordpress/i18n';
 import { TextControl } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
 
 export default function EditTemplateTitle( { template } ) {
+	const [ forceEmpty, setForceEmpty ] = useState( false );
 	const [ title, setTitle ] = useEntityProp(
 		'postType',
 		template.type,
@@ -16,13 +18,19 @@ export default function EditTemplateTitle( { template } ) {
 	return (
 		<TextControl
 			label={ __( 'Title' ) }
-			value={ title }
+			value={ forceEmpty ? '' : title }
 			help={ __(
 				'Give the template a title that indicates its purpose, e.g. "Full Width".'
 			) }
 			onChange={ ( newTitle ) => {
-				setTitle( newTitle || template.slug );
+				if ( ! newTitle && ! forceEmpty ) {
+					setForceEmpty( true );
+					return;
+				}
+				setForceEmpty( false );
+				setTitle( newTitle );
 			} }
+			onBlur={ () => setForceEmpty( false ) }
 		/>
 	);
 }

package/src/components/template-details/index.js

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	MenuGroup,
@@ -17,10 +16,6 @@ import { store as editorStore } from '@wordpress/editor';
  * Internal dependencies
  */
 import isTemplateRevertable from '../../utils/is-template-revertable';
-import {
-	MENU_TEMPLATES,
-	TEMPLATE_PARTS_SUB_MENUS,
-} from '../navigation-sidebar/navigation-panel/constants';
 import { store as editSiteStore } from '../../store';
 import TemplateAreas from './template-areas';
 import EditTemplateTitle from './edit-template-title';
@@ -34,16 +29,6 @@ export default function TemplateDetails( { template, onClose } ) {
 	);
 	const { revertTemplate } = useDispatch( editSiteStore );
 
-	const templateSubMenu = useMemo( () => {
-		if ( template?.type === 'wp_template' ) {
-			return { title: __( 'templates' ), menu: MENU_TEMPLATES };
-		}
-
-		return TEMPLATE_PARTS_SUB_MENUS.find(
-			( { area } ) => area === template?.area
-		);
-	}, [ template ] );
-
 	const browseAllLinkProps = useLink( {
 		// TODO: We should update this to filter by template part's areas as well.
 		postType: template.type,
@@ -106,11 +91,9 @@ export default function TemplateDetails( { template, onClose } ) {
 				className="edit-site-template-details__show-all-button"
 				{ ...browseAllLinkProps }
 			>
-				{ sprintf(
-					/* translators: the template part's area name ("Headers", "Sidebars") or "templates". */
-					__( 'Browse all %s' ),
-					templateSubMenu.title
-				) }
+				{ template?.type === 'wp_template'
+					? __( 'Browse all templates' )
+					: __( 'Browse all template parts' ) }
 			</Button>
 		</div>
 	);

package/src/components/template-details/template-areas.js

@@ -75,14 +75,14 @@ function TemplatePartItem( {
 	clientId,
 	closeTemplateDetailsDropdown,
 } ) {
-	const { selectBlock, toggleBlockHighlight } = useDispatch(
-		blockEditorStore
-	);
+	const { selectBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
 	const templatePartArea = useSelect(
 		( select ) => {
-			const defaultAreas = select(
-				editorStore
-			).__experimentalGetDefaultTemplatePartAreas();
+			const defaultAreas =
+				select(
+					editorStore
+				).__experimentalGetDefaultTemplatePartAreas();
 
 			return defaultAreas.find(
 				( defaultArea ) => defaultArea.area === templatePart.area

package/src/components/template-part-converter/index.js

@@ -12,9 +12,8 @@ import ConvertToTemplatePart from './convert-to-template-part';
 
 export default function TemplatePartConverter() {
 	const { clientIds, blocks } = useSelect( ( select ) => {
-		const { getSelectedBlockClientIds, getBlocksByClientId } = select(
-			blockEditorStore
-		);
+		const { getSelectedBlockClientIds, getBlocksByClientId } =
+			select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		return {
 			clientIds: selectedBlockClientIds,

package/src/components/test/error-boundary.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import * as wpHooks from '@wordpress/hooks';
+/**
+ * Internal dependencies
+ */
+import ErrorBoundary from '../error-boundary';
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+const theError = new Error( 'Kaboom' );
+
+const ChildComponent = () => {
+	throw theError;
+};
+
+describe( 'Error Boundary', () => {
+	describe( 'when error is thrown from a Child component', () => {
+		it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => {
+			const doAction = jest.spyOn( wpHooks, 'doAction' );
+
+			render(
+				<ErrorBoundary>
+					<ChildComponent />
+				</ErrorBoundary>
+			);
+
+			expect( doAction ).toHaveBeenCalledWith(
+				'editor.ErrorBoundary.errorLogged',
+				theError
+			);
+			expect( console ).toHaveErrored();
+		} );
+	} );
+} );

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

@@ -11,9 +11,8 @@ import { useLocation } from '../routes';
 import { store as editSiteStore } from '../../store';
 
 export default function URLQueryController() {
-	const { setTemplate, setTemplatePart, setPage } = useDispatch(
-		editSiteStore
-	);
+	const { setTemplate, setTemplatePart, setPage } =
+		useDispatch( editSiteStore );
 	const {
 		params: { postId, postType },
 	} = useLocation();