@wordpress/edit-site 5.4.0 → 5.5.0

package/src/components/keyboard-shortcuts/edit-mode.js

@@ -0,0 +1,116 @@
+/**
+ * WordPress dependencies
+ */
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as interfaceStore } from '@wordpress/interface';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
+import { STORE_NAME } from '../../store/constants';
+
+function KeyboardShortcutsEditMode() {
+	const { getEditorMode } = useSelect( editSiteStore );
+	const isListViewOpen = useSelect(
+		( select ) => select( editSiteStore ).isListViewOpened(),
+		[]
+	);
+	const isBlockInspectorOpen = useSelect(
+		( select ) =>
+			select( interfaceStore ).getActiveComplementaryArea(
+				editSiteStore.name
+			) === SIDEBAR_BLOCK,
+		[]
+	);
+	const { redo, undo } = useDispatch( coreStore );
+	const { setIsListViewOpened, switchEditorMode } =
+		useDispatch( editSiteStore );
+	const { enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
+
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	const handleTextLevelShortcut = ( event, level ) => {
+		event.preventDefault();
+		const destinationBlockName =
+			level === 0 ? 'core/paragraph' : 'core/heading';
+		const currentClientId = getSelectedBlockClientId();
+		if ( currentClientId === null ) {
+			return;
+		}
+		const blockName = getBlockName( currentClientId );
+		if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
+			return;
+		}
+		const attributes = getBlockAttributes( currentClientId );
+		const textAlign =
+			blockName === 'core/paragraph' ? 'align' : 'textAlign';
+		const destinationTextAlign =
+			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
+
+		replaceBlocks(
+			currentClientId,
+			createBlock( destinationBlockName, {
+				level,
+				content: attributes.content,
+				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
+			} )
+		);
+	};
+
+	useShortcut( 'core/edit-site/undo', ( event ) => {
+		undo();
+		event.preventDefault();
+	} );
+
+	useShortcut( 'core/edit-site/redo', ( event ) => {
+		redo();
+		event.preventDefault();
+	} );
+
+	useShortcut( 'core/edit-site/toggle-list-view', () => {
+		setIsListViewOpened( ! isListViewOpen );
+	} );
+
+	useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {
+		// This shortcut has no known clashes, but use preventDefault to prevent any
+		// obscure shortcuts from triggering.
+		event.preventDefault();
+
+		if ( isBlockInspectorOpen ) {
+			disableComplementaryArea( STORE_NAME );
+		} else {
+			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+		}
+	} );
+
+	useShortcut( 'core/edit-site/toggle-mode', () => {
+		switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
+	} );
+
+	useShortcut( 'core/edit-site/transform-heading-to-paragraph', ( event ) =>
+		handleTextLevelShortcut( event, 0 )
+	);
+
+	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+		//the loop is based off on a constant therefore
+		//the hook will execute the same way every time
+		//eslint-disable-next-line react-hooks/rules-of-hooks
+		useShortcut(
+			`core/edit-site/transform-paragraph-to-heading-${ level }`,
+			( event ) => handleTextLevelShortcut( event, level )
+		);
+	} );
+
+	return null;
+}
+
+export default KeyboardShortcutsEditMode;

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

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+function KeyboardShortcutsGlobal() {
+	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+		useSelect( coreStore );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+
+	useShortcut( 'core/edit-site/save', ( event ) => {
+		event.preventDefault();
+
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const isDirty = !! dirtyEntityRecords.length;
+		const isSaving = dirtyEntityRecords.some( ( record ) =>
+			isSavingEntityRecord( record.kind, record.name, record.key )
+		);
+
+		if ( ! isSaving && isDirty ) {
+			setIsSaveViewOpened( true );
+		}
+	} );
+
+	return null;
+}
+
+export default KeyboardShortcutsGlobal;

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

@@ -10,7 +10,9 @@ import { isAppleOS } from '@wordpress/keycodes';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as interfaceStore } from '@wordpress/interface';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -41,6 +43,38 @@ function KeyboardShortcuts() {
 		useDispatch( interfaceStore );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	const handleTextLevelShortcut = ( event, level ) => {
+		event.preventDefault();
+		const destinationBlockName =
+			level === 0 ? 'core/paragraph' : 'core/heading';
+		const currentClientId = getSelectedBlockClientId();
+		if ( currentClientId === null ) {
+			return;
+		}
+		const blockName = getBlockName( currentClientId );
+		if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
+			return;
+		}
+		const attributes = getBlockAttributes( currentClientId );
+		const textAlign =
+			blockName === 'core/paragraph' ? 'align' : 'textAlign';
+		const destinationTextAlign =
+			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
+
+		replaceBlocks(
+			currentClientId,
+			createBlock( destinationBlockName, {
+				level,
+				content: attributes.content,
+				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
+			} )
+		);
+	};
+
 	useShortcut( 'core/edit-site/save', ( event ) => {
 		event.preventDefault();
 
@@ -85,6 +119,20 @@ function KeyboardShortcuts() {
 		switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
 	} );
 
+	useShortcut( 'core/edit-site/transform-heading-to-paragraph', ( event ) =>
+		handleTextLevelShortcut( event, 0 )
+	);
+
+	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+		//the loop is based off on a constant therefore
+		//the hook will execute the same way every time
+		//eslint-disable-next-line react-hooks/rules-of-hooks
+		useShortcut(
+			`core/edit-site/transform-paragraph-to-heading-${ level }`,
+			( event ) => handleTextLevelShortcut( event, level )
+		);
+	} );
+
 	return null;
 }
 
@@ -208,6 +256,28 @@ function KeyboardShortcutsRegister() {
 				character: 'm',
 			},
 		} );
+
+		registerShortcut( {
+			name: `core/edit-site/transform-heading-to-paragraph`,
+			category: 'block-library',
+			description: __( 'Transform heading to paragraph.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: `0`,
+			},
+		} );
+
+		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+			registerShortcut( {
+				name: `core/edit-site/transform-paragraph-to-heading-${ level }`,
+				category: 'block-library',
+				description: __( 'Transform paragraph to heading.' ),
+				keyCombination: {
+					modifier: 'access',
+					character: `${ level }`,
+				},
+			} );
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

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

@@ -0,0 +1,157 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { isAppleOS } from '@wordpress/keycodes';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+function KeyboardShortcutsRegister() {
+	// Registering the shortcuts.
+	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+	useEffect( () => {
+		registerShortcut( {
+			name: 'core/edit-site/save',
+			category: 'global',
+			description: __( 'Save your changes.' ),
+			keyCombination: {
+				modifier: 'primary',
+				character: 's',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/undo',
+			category: 'global',
+			description: __( 'Undo your last changes.' ),
+			keyCombination: {
+				modifier: 'primary',
+				character: 'z',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/redo',
+			category: 'global',
+			description: __( 'Redo your last undo.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: 'z',
+			},
+			// Disable on Apple OS because it conflicts with the browser's
+			// history shortcut. It's a fine alias for both Windows and Linux.
+			// Since there's no conflict for Ctrl+Shift+Z on both Windows and
+			// Linux, we keep it as the default for consistency.
+			aliases: isAppleOS()
+				? []
+				: [
+						{
+							modifier: 'primary',
+							character: 'y',
+						},
+				  ],
+		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/toggle-list-view',
+			category: 'global',
+			description: __( 'Open the block list view.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: 'o',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/toggle-block-settings-sidebar',
+			category: 'global',
+			description: __( 'Show or hide the block settings sidebar.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: ',',
+			},
+		} );
+
+		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',
+			description: __( 'Navigate to the next part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrl',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'n',
+				},
+			],
+		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/previous-region',
+			category: 'global',
+			description: __( 'Navigate to the previous part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrlShift',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'p',
+				},
+				{
+					modifier: 'ctrlShift',
+					character: '~',
+				},
+			],
+		} );
+		registerShortcut( {
+			name: 'core/edit-site/toggle-mode',
+			category: 'global',
+			description: __( 'Switch between visual editor and code editor.' ),
+			keyCombination: {
+				modifier: 'secondary',
+				character: 'm',
+			},
+		} );
+
+		registerShortcut( {
+			name: `core/edit-site/transform-heading-to-paragraph`,
+			category: 'block-library',
+			description: __( 'Transform heading to paragraph.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: `0`,
+			},
+		} );
+
+		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+			registerShortcut( {
+				name: `core/edit-site/transform-paragraph-to-heading-${ level }`,
+				category: 'block-library',
+				description: __( 'Transform paragraph to heading.' ),
+				keyCombination: {
+					modifier: 'access',
+					character: `${ level }`,
+				},
+			} );
+		} );
+	}, [ registerShortcut ] );
+
+	return null;
+}
+
+export default KeyboardShortcutsRegister;

package/src/components/layout/index.js

@@ -40,6 +40,8 @@ import ResizeHandle from '../block-editor/resize-handle';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 import { unlock } from '../../private-apis';
 import SavePanel from '../save-panel';
+import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
+import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
 
 const ANIMATION_DURATION = 0.5;
 const emptyResizeHandleStyles = {
@@ -121,6 +123,8 @@ export default function Layout() {
 
 	return (
 		<>
+			<KeyboardShortcutsRegister />
+			<KeyboardShortcutsGlobal />
 			{ fullResizer }
 			<div
 				{ ...navigateRegionsProps }

package/src/components/layout/style.scss

@@ -207,10 +207,17 @@
 
 	&:focus,
 	&:focus-within {
-		top: 0;
+		top: auto;
 		bottom: 0;
 	}
 
+	&.is-entity-save-view-open {
+		&:focus,
+		&:focus-within {
+			top: 0;
+		}
+	}
+
 	@include break-medium {
 		border-left: $border-width solid $gray-300;
 	}

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

@@ -6,11 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalHStack as HStack,
-	Icon,
-	Tooltip,
-} from '@wordpress/components';
+import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
@@ -20,62 +16,47 @@ import {
 	plugins as pluginIcon,
 	globe as globeIcon,
 } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { _x } from '@wordpress/i18n';
 
 const TEMPLATE_POST_TYPE_NAMES = [ 'wp_template', 'wp_template_part' ];
 
-function CustomizedTooltip( { isCustomized, children } ) {
-	if ( ! isCustomized ) {
-		return children;
-	}
-
-	return (
-		<Tooltip text={ __( 'This template has been customized' ) }>
-			{ children }
-		</Tooltip>
-	);
-}
-
-function BaseAddedBy( { text, icon, imageUrl, isCustomized } ) {
+function BaseAddedBy( { text, icon, imageUrl, isCustomized, templateType } ) {
 	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>
+			{ imageUrl ? (
+				<div
+					className={ classnames( 'edit-site-list-added-by__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt=""
+						src={ imageUrl }
+					/>
+				</div>
+			) : (
+				<div className="edit-site-list-added-by__icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span>
+				{ text }
+				{ isCustomized && (
+					<span className="edit-site-list-added-by__customized-info">
+						{ templateType === 'wp_template'
+							? _x( 'Customized', 'template' )
+							: _x( 'Customized', 'template part' ) }
+					</span>
 				) }
-			</CustomizedTooltip>
-			<span>{ text }</span>
+			</span>
 		</HStack>
 	);
 }
 
-function AddedByTheme( { slug, isCustomized } ) {
+function AddedByTheme( { slug, isCustomized, templateType } ) {
 	const theme = useSelect(
 		( select ) => select( coreStore ).getTheme( slug ),
 		[ slug ]
@@ -86,11 +67,12 @@ function AddedByTheme( { slug, isCustomized } ) {
 			icon={ themeIcon }
 			text={ theme?.name?.rendered || slug }
 			isCustomized={ isCustomized }
+			templateType={ templateType }
 		/>
 	);
 }
 
-function AddedByPlugin( { slug, isCustomized } ) {
+function AddedByPlugin( { slug, isCustomized, templateType } ) {
 	const plugin = useSelect(
 		( select ) => select( coreStore ).getPlugin( slug ),
 		[ slug ]
@@ -101,11 +83,12 @@ function AddedByPlugin( { slug, isCustomized } ) {
 			icon={ pluginIcon }
 			text={ plugin?.name || slug }
 			isCustomized={ isCustomized }
+			templateType={ templateType }
 		/>
 	);
 }
 
-function AddedByAuthor( { id } ) {
+function AddedByAuthor( { id, templateType } ) {
 	const user = useSelect(
 		( select ) => select( coreStore ).getUser( id ),
 		[ id ]
@@ -116,11 +99,12 @@ function AddedByAuthor( { id } ) {
 			icon={ authorIcon }
 			imageUrl={ user?.avatar_urls?.[ 48 ] }
 			text={ user?.nickname }
+			templateType={ templateType }
 		/>
 	);
 }
 
-function AddedBySite() {
+function AddedBySite( { templateType } ) {
 	const { name, logoURL } = useSelect( ( select ) => {
 		const { getEntityRecord, getMedia } = select( coreStore );
 		const siteData = getEntityRecord( 'root', '__unstableBase' );
@@ -134,7 +118,12 @@ function AddedBySite() {
 	}, [] );
 
 	return (
-		<BaseAddedBy icon={ globeIcon } imageUrl={ logoURL } text={ name } />
+		<BaseAddedBy
+			icon={ globeIcon }
+			imageUrl={ logoURL }
+			text={ name }
+			templateType={ templateType }
+		/>
 	);
 }
 
@@ -158,6 +147,7 @@ export default function AddedBy( { templateType, template } ) {
 				<AddedByTheme
 					slug={ template.theme }
 					isCustomized={ template.source === 'custom' }
+					templateType={ templateType }
 				/>
 			);
 		}
@@ -168,6 +158,7 @@ export default function AddedBy( { templateType, template } ) {
 				<AddedByPlugin
 					slug={ template.theme }
 					isCustomized={ template.source === 'custom' }
+					templateType={ templateType }
 				/>
 			);
 		}
@@ -180,11 +171,13 @@ export default function AddedBy( { templateType, template } ) {
 			template.source === 'custom' &&
 			! template.author
 		) {
-			return <AddedBySite />;
+			return <AddedBySite templateType={ templateType } />;
 		}
 	}
 
 	// Simply show the author for templates created from scratch that have an
 	// author or for any other post type.
-	return <AddedByAuthor id={ template.author } />;
+	return (
+		<AddedByAuthor id={ template.author } templateType={ templateType } />
+	);
 }

package/src/components/list/style.scss

@@ -141,7 +141,6 @@
 .edit-site-list-added-by__icon {
 	display: flex;
 	flex-shrink: 0;
-	position: relative;
 	align-items: center;
 	justify-content: center;
 	width: $grid-unit-40;
@@ -152,18 +151,6 @@
 	svg {
 		fill: $white;
 	}
-
-	&.is-customized::after {
-		position: absolute;
-		content: "";
-		background: var(--wp-admin-theme-color);
-		height: $grid-unit-10;
-		width: $grid-unit-10;
-		outline: 2px solid $white;
-		border-radius: 100%;
-		top: -1px;
-		right: -1px;
-	}
 }
 
 .edit-site-list-added-by__avatar {
@@ -189,3 +176,8 @@
 		}
 	}
 }
+
+.edit-site-list-added-by__customized-info {
+	display: block;
+	color: $gray-700;
+}

package/src/components/list/table.js

@@ -46,6 +46,9 @@ export default function Table( { templateType } ) {
 		);
 	}
 
+	const sortedTemplates = [ ...templates ];
+	sortedTemplates.sort( ( a, b ) => a.slug.localeCompare( b.slug ) );
+
 	return (
 		// These explicit aria roles are needed for Safari.
 		// See https://developer.mozilla.org/en-US/docs/Web/CSS/display#tables
@@ -74,7 +77,7 @@ export default function Table( { templateType } ) {
 			</thead>
 
 			<tbody>
-				{ templates.map( ( template ) => (
+				{ sortedTemplates.map( ( template ) => (
 					<tr
 						key={ template.id }
 						className="edit-site-list-table-row"
@@ -84,10 +87,6 @@ export default function Table( { templateType } ) {
 							<Heading level={ 4 }>
 								<Link
 									params={ {
-										path:
-											template.type === 'wp_template'
-												? '/templates/single'
-												: '/template-parts/single',
 										postId: template.id,
 										postType: template.type,
 									} }