@wordpress/edit-site 5.12.2 → 5.12.4

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

@@ -8,8 +8,12 @@ import classnames from 'classnames';
  */
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { useSelect } from '@wordpress/data';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { store as interfaceStore } from '@wordpress/interface';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -18,6 +22,9 @@ import { textFormattingShortcuts } from './config';
 import Shortcut from './shortcut';
 import DynamicShortcut from './dynamic-shortcut';
 
+export const KEYBOARD_SHORTCUT_HELP_MODAL_NAME =
+	'edit-site/keyboard-shortcut-help';
+
 const ShortcutList = ( { shortcuts } ) => (
 	/*
 	 * Disable reason: The `list` ARIA role is redundant but
@@ -82,14 +89,21 @@ const ShortcutCategorySection = ( {
 	);
 };
 
-export default function KeyboardShortcutHelpModal( {
-	isModalActive,
-	toggleModal,
-} ) {
+export default function KeyboardShortcutHelpModal() {
+	const isModalActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive(
+			KEYBOARD_SHORTCUT_HELP_MODAL_NAME
+		)
+	);
+	const { closeModal, openModal } = useDispatch( interfaceStore );
+	const toggleModal = () =>
+		isModalActive
+			? closeModal()
+			: openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
+	useShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );
 	if ( ! isModalActive ) {
 		return null;
 	}
-
 	return (
 		<Modal
 			className="edit-site-keyboard-shortcut-help-modal"

package/src/components/page-library/grid-item.js

@@ -46,7 +46,7 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 		postId: item.type === USER_PATTERNS ? item.id : item.name,
 		categoryId,
 		categoryType: item.type,
-		canvas: 'edit',
+		canvas: 'view',
 	} );
 
 	const onKeyDown = ( event ) => {

package/src/components/preferences-modal/index.js

@@ -5,25 +5,31 @@ import {
 	PreferencesModal,
 	PreferencesModalTabs,
 	PreferencesModalSection,
+	store as interfaceStore,
 } from '@wordpress/interface';
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useDispatch, useRegistry } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import EnableFeature from './enable-feature';
-import { store as siteEditorStore } from '../../store';
+import { store as editSiteStore } from '../../store';
 
-export default function EditSitePreferencesModal( {
-	isModalActive,
-	toggleModal,
-} ) {
+export const PREFERENCES_MODAL_NAME = 'edit-site/preferences';
+
+export default function EditSitePreferencesModal() {
+	const isModalActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( PREFERENCES_MODAL_NAME )
+	);
+	const { closeModal, openModal } = useDispatch( interfaceStore );
+	const toggleModal = () =>
+		isModalActive ? closeModal() : openModal( PREFERENCES_MODAL_NAME );
 	const registry = useRegistry();
 	const { closeGeneralSidebar, setIsListViewOpened, setIsInserterOpened } =
-		useDispatch( siteEditorStore );
+		useDispatch( editSiteStore );
 
 	const { set: setPreference } = useDispatch( preferencesStore );
 	const toggleDistractionFree = () => {

package/src/components/sidebar-navigation-item/style.scss

@@ -15,6 +15,7 @@
 
 	&[aria-current] {
 		background: var(--wp-admin-theme-color);
+		color: $white;
 	}
 
 	.edit-site-sidebar-navigation-item__drilldown-indicator {

package/src/components/sidebar-navigation-screen-navigation-menu/style.scss

@@ -8,8 +8,3 @@
 		}
 	}
 }
-
-.sidebar-navigation__rename-modal-form {
-	// Fix for input focus style being cut off by the modal.
-	padding-top: 1px;
-}

package/src/components/start-template-options/style.scss

@@ -29,9 +29,6 @@ $actions-height: 92px;
 	column-count: 2;
 	column-gap: $grid-unit-30;
 
-	// Small top padding required to avoid cutting off the visible outline when hovering items
-	padding-top: $border-width-focus-fallback;
-
 	@include break-medium() {
 		column-count: 3;
 	}

package/src/hooks/commands/use-edit-mode-commands.js

@@ -4,8 +4,6 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, isRTL } from '@wordpress/i18n';
 import {
-	code,
-	cog,
 	trash,
 	backup,
 	layout,
@@ -13,6 +11,9 @@ import {
 	drawerLeft,
 	drawerRight,
 	blockDefault,
+	cog,
+	code,
+	keyboardClose,
 } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -26,6 +27,8 @@ import { store as editSiteStore } from '../../store';
 import useEditedEntityRecord from '../../components/use-edited-entity-record';
 import isTemplateRemovable from '../../utils/is-template-removable';
 import isTemplateRevertable from '../../utils/is-template-revertable';
+import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
+import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
 import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
@@ -142,6 +145,7 @@ function useEditUICommands() {
 		} ),
 		[]
 	);
+	const { openModal } = useDispatch( interfaceStore );
 	const { toggle } = useDispatch( preferencesStore );
 
 	if ( canvasMode !== 'edit' ) {
@@ -208,6 +212,24 @@ function useEditUICommands() {
 		},
 	} );
 
+	commands.push( {
+		name: 'core/open-preferences',
+		label: __( 'Open editor preferences' ),
+		icon: cog,
+		callback: () => {
+			openModal( PREFERENCES_MODAL_NAME );
+		},
+	} );
+
+	commands.push( {
+		name: 'core/open-shortcut-help',
+		label: __( 'Open keyboard shortcuts' ),
+		icon: keyboardClose,
+		callback: () => {
+			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
+		},
+	} );
+
 	return {
 		isLoading: false,
 		commands,