@wordpress/edit-site 5.4.0 → 5.6.0

package/src/components/global-styles/typography-panel.js

@@ -2,18 +2,16 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../private-apis';
-import { useSupportedStyles } from './hooks';
 
 const {
 	useGlobalStyle,
 	useGlobalSetting,
-	overrideSettingsWithSupports,
+	useSettingsForBlockElement,
 	TypographyPanel: StylesTypographyPanel,
 } = unlock( blockEditorPrivateApis );
 
@@ -40,10 +38,10 @@ export default function TypographyPanel( {
 	} );
 	const [ rawSettings ] = useGlobalSetting( '', name );
 	const usedElement = element === 'heading' ? headingLevel : element;
-	const supports = useSupportedStyles( name, usedElement );
-	const settings = useMemo(
-		() => overrideSettingsWithSupports( rawSettings, supports ),
-		[ rawSettings, supports ]
+	const settings = useSettingsForBlockElement(
+		rawSettings,
+		name,
+		usedElement
 	);
 
 	return (

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

@@ -24,6 +24,7 @@ import ScreenBlockList from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
+import ScreenFilters from './screen-filters';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
@@ -68,7 +69,7 @@ function GlobalStylesActionMenu() {
 		<GlobalStylesMenuFill>
 			<DropdownMenu
 				icon={ moreVertical }
-				label={ __( 'More Styles actions' ) }
+				label={ __( 'Styles actions' ) }
 				controls={ [
 					{
 						title: __( 'Reset to defaults' ),
@@ -205,6 +206,10 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenBackgroundColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path={ parentMenu + '/filters' }>
+				<ScreenFilters name={ name } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
 				<ScreenTextColor name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>

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

@@ -36,4 +36,14 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'access', character: 'x' },
 		description: __( 'Make the selected text inline code.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: '0' },
+		description: __( 'Convert the current heading to a paragraph.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: '1-6' },
+		description: __(
+			'Convert the current paragraph or heading to a heading of level 1 to 6.'
+		),
+	},
 ];

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 }
@@ -273,6 +277,21 @@ export default function Layout() {
 							{ canvasResizer }
 							{ !! canvasSize.width && (
 								<motion.div
+									whileHover={
+										isEditorPage && canvasMode === 'view'
+											? {
+													scale: 1.005,
+													transition: {
+														duration:
+															disableMotion ||
+															isResizing
+																? 0
+																: 0.5,
+														ease: 'easeOut',
+													},
+											  }
+											: {}
+									}
 									initial={ false }
 									layout="position"
 									className="edit-site-layout__canvas"

package/src/components/layout/style.scss

@@ -49,11 +49,9 @@
 }
 
 .edit-site-layout__content {
+	height: 100%;
 	flex-grow: 1;
 	display: flex;
-
-	// Hide scrollbars during the edit/view animation.
-	overflow: hidden;
 }
 
 .edit-site-layout__sidebar {
@@ -207,10 +205,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;
 	}