@wordpress/edit-site 5.13.0 → 5.15.0

package/build/components/header-edit-mode/more-menu/index.js

@@ -11,7 +11,7 @@ var _element = require("@wordpress/element");
 
 var _i18n = require("@wordpress/i18n");
 
-var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
+var _data = require("@wordpress/data");
 
 var _keycodes = require("@wordpress/keycodes");
 
@@ -23,9 +23,9 @@ var _interface = require("@wordpress/interface");
 
 var _preferences = require("@wordpress/preferences");
 
-var _keyboardShortcutHelpModal = _interopRequireDefault(require("../../keyboard-shortcut-help-modal"));
+var _keyboardShortcutHelpModal = _interopRequireWildcard(require("../../keyboard-shortcut-help-modal"));
 
-var _preferencesModal = _interopRequireDefault(require("../../preferences-modal"));
+var _preferencesModal = _interopRequireWildcard(require("../../preferences-modal"));
 
 var _toolsMoreMenuGroup = _interopRequireDefault(require("../tools-more-menu-group"));
 
@@ -37,6 +37,12 @@ var _copyContentMenuItem = _interopRequireDefault(require("./copy-content-menu-i
 
 var _modeSwitcher = _interopRequireDefault(require("../mode-switcher"));
 
+var _store = require("../../../store");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * WordPress dependencies
  */
@@ -47,9 +53,29 @@ var _modeSwitcher = _interopRequireDefault(require("../mode-switcher"));
 function MoreMenu({
   showIconLabels
 }) {
-  const [isModalActive, toggleModal] = (0, _element.useReducer)(isActive => !isActive, false);
-  const [isPreferencesModalActive, togglePreferencesModal] = (0, _element.useReducer)(isActive => !isActive, false);
-  (0, _keyboardShortcuts.useShortcut)('core/edit-site/keyboard-shortcuts', toggleModal);
+  const registry = (0, _data.useRegistry)();
+  const isDistractionFree = (0, _data.useSelect)(select => select(_preferences.store).get('core/edit-site', 'distractionFree'), []);
+  const {
+    setIsInserterOpened,
+    setIsListViewOpened,
+    closeGeneralSidebar
+  } = (0, _data.useDispatch)(_store.store);
+  const {
+    openModal
+  } = (0, _data.useDispatch)(_interface.store);
+  const {
+    set: setPreference
+  } = (0, _data.useDispatch)(_preferences.store);
+
+  const toggleDistractionFree = () => {
+    registry.batch(() => {
+      setPreference('core/edit-site', 'fixedToolbar', false);
+      setIsInserterOpened(false);
+      setIsListViewOpened(false);
+      closeGeneralSidebar();
+    });
+  };
+
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_interface.MoreMenuDropdown, {
     toggleProps: {
       showTooltip: !showIconLabels,
@@ -64,6 +90,7 @@ function MoreMenu({
   }, (0, _element.createElement)(_preferences.PreferenceToggleMenuItem, {
     scope: "core/edit-site",
     name: "fixedToolbar",
+    disabled: isDistractionFree,
     label: (0, _i18n.__)('Top toolbar'),
     info: (0, _i18n.__)('Access all block and document tools in a single place'),
     messageActivated: (0, _i18n.__)('Top toolbar activated'),
@@ -75,17 +102,26 @@ function MoreMenu({
     info: (0, _i18n.__)('Focus on one block at a time'),
     messageActivated: (0, _i18n.__)('Spotlight mode activated'),
     messageDeactivated: (0, _i18n.__)('Spotlight mode deactivated')
-  }), (0, _element.createElement)(_modeSwitcher.default, null), (0, _element.createElement)(_interface.ActionItem.Slot, {
+  }), (0, _element.createElement)(_preferences.PreferenceToggleMenuItem, {
+    scope: "core/edit-site",
+    name: "distractionFree",
+    onToggle: toggleDistractionFree,
+    label: (0, _i18n.__)('Distraction free'),
+    info: (0, _i18n.__)('Write with calmness'),
+    messageActivated: (0, _i18n.__)('Distraction free mode activated'),
+    messageDeactivated: (0, _i18n.__)('Distraction free mode deactivated'),
+    shortcut: _keycodes.displayShortcut.primaryShift('\\')
+  })), (0, _element.createElement)(_modeSwitcher.default, null), (0, _element.createElement)(_interface.ActionItem.Slot, {
     name: "core/edit-site/plugin-more-menu",
     label: (0, _i18n.__)('Plugins'),
     as: _components.MenuGroup,
     fillProps: {
       onClick: onClose
     }
-  })), (0, _element.createElement)(_components.MenuGroup, {
+  }), (0, _element.createElement)(_components.MenuGroup, {
     label: (0, _i18n.__)('Tools')
   }, (0, _element.createElement)(_siteExport.default, null), (0, _element.createElement)(_components.MenuItem, {
-    onClick: toggleModal,
+    onClick: () => openModal(_keyboardShortcutHelpModal.KEYBOARD_SHORTCUT_HELP_MODAL_NAME),
     shortcut: _keycodes.displayShortcut.access('h')
   }, (0, _i18n.__)('Keyboard shortcuts')), (0, _element.createElement)(_welcomeGuideMenuItem.default, null), (0, _element.createElement)(_copyContentMenuItem.default, null), (0, _element.createElement)(_components.MenuItem, {
     icon: _icons.external,
@@ -102,13 +138,7 @@ function MoreMenu({
       onClose
     }
   })), (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, {
-    onClick: togglePreferencesModal
-  }, (0, _i18n.__)('Preferences'))))), (0, _element.createElement)(_keyboardShortcutHelpModal.default, {
-    isModalActive: isModalActive,
-    toggleModal: toggleModal
-  }), (0, _element.createElement)(_preferencesModal.default, {
-    isModalActive: isPreferencesModalActive,
-    toggleModal: togglePreferencesModal
-  }));
+    onClick: () => openModal(_preferencesModal.PREFERENCES_MODAL_NAME)
+  }, (0, _i18n.__)('Preferences'))))), (0, _element.createElement)(_keyboardShortcutHelpModal.default, null), (0, _element.createElement)(_preferencesModal.default, null));
 }
 //# sourceMappingURL=index.js.map

package/build/components/header-edit-mode/more-menu/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/header-edit-mode/more-menu/index.js"],"names":["MoreMenu","showIconLabels","isModalActive","toggleModal","isActive","isPreferencesModalActive","togglePreferencesModal","showTooltip","variant","onClose","MenuGroup","onClick","displayShortcut","access","external"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { useReducer } from '@wordpress/element';\nimport { useShortcut } from '@wordpress/keyboard-shortcuts';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { external } from '@wordpress/icons';\nimport { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';\nimport { ActionItem, MoreMenuDropdown } from '@wordpress/interface';\nimport { PreferenceToggleMenuItem } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport KeyboardShortcutHelpModal from '../../keyboard-shortcut-help-modal';\nimport EditSitePreferencesModal from '../../preferences-modal';\nimport ToolsMoreMenuGroup from '../tools-more-menu-group';\nimport SiteExport from './site-export';\nimport WelcomeGuideMenuItem from './welcome-guide-menu-item';\nimport CopyContentMenuItem from './copy-content-menu-item';\nimport ModeSwitcher from '../mode-switcher';\n\nexport default function MoreMenu( { showIconLabels } ) {\n\tconst [ isModalActive, toggleModal ] = useReducer(\n\t\t( isActive ) => ! isActive,\n\t\tfalse\n\t);\n\n\tconst [ isPreferencesModalActive, togglePreferencesModal ] = useReducer(\n\t\t( isActive ) => ! isActive,\n\t\tfalse\n\t);\n\n\tuseShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );\n\n\treturn (\n\t\t<>\n\t\t\t<MoreMenuDropdown\n\t\t\t\ttoggleProps={ {\n\t\t\t\t\tshowTooltip: ! showIconLabels,\n\t\t\t\t\t...( showIconLabels && { variant: 'tertiary' } ),\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<MenuGroup label={ _x( 'View', 'noun' ) }>\n\t\t\t\t\t\t\t<PreferenceToggleMenuItem\n\t\t\t\t\t\t\t\tscope=\"core/edit-site\"\n\t\t\t\t\t\t\t\tname=\"fixedToolbar\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Top toolbar' ) }\n\t\t\t\t\t\t\t\tinfo={ __(\n\t\t\t\t\t\t\t\t\t'Access all block and document tools in a single place'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tmessageActivated={ __(\n\t\t\t\t\t\t\t\t\t'Top toolbar activated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tmessageDeactivated={ __(\n\t\t\t\t\t\t\t\t\t'Top toolbar deactivated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<PreferenceToggleMenuItem\n\t\t\t\t\t\t\t\tscope=\"core/edit-site\"\n\t\t\t\t\t\t\t\tname=\"focusMode\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Spotlight mode' ) }\n\t\t\t\t\t\t\t\tinfo={ __( 'Focus on one block at a time' ) }\n\t\t\t\t\t\t\t\tmessageActivated={ __(\n\t\t\t\t\t\t\t\t\t'Spotlight mode activated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tmessageDeactivated={ __(\n\t\t\t\t\t\t\t\t\t'Spotlight mode deactivated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ModeSwitcher />\n\t\t\t\t\t\t\t<ActionItem.Slot\n\t\t\t\t\t\t\t\tname=\"core/edit-site/plugin-more-menu\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Plugins' ) }\n\t\t\t\t\t\t\t\tas={ MenuGroup }\n\t\t\t\t\t\t\t\tfillProps={ { onClick: onClose } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t<MenuGroup label={ __( 'Tools' ) }>\n\t\t\t\t\t\t\t<SiteExport />\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ toggleModal }\n\t\t\t\t\t\t\t\tshortcut={ displayShortcut.access( 'h' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Keyboard shortcuts' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t<WelcomeGuideMenuItem />\n\t\t\t\t\t\t\t<CopyContentMenuItem />\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\ticon={ external }\n\t\t\t\t\t\t\t\trole=\"menuitem\"\n\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/site-editor/'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Help' ) }\n\t\t\t\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t<ToolsMoreMenuGroup.Slot\n\t\t\t\t\t\t\t\tfillProps={ { onClose } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t<MenuItem onClick={ togglePreferencesModal }>\n\t\t\t\t\t\t\t\t{ __( 'Preferences' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</MoreMenuDropdown>\n\t\t\t<KeyboardShortcutHelpModal\n\t\t\t\tisModalActive={ isModalActive }\n\t\t\t\ttoggleModal={ toggleModal }\n\t\t\t/>\n\t\t\t<EditSitePreferencesModal\n\t\t\t\tisModalActive={ isPreferencesModalActive }\n\t\t\t\ttoggleModal={ togglePreferencesModal }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/header-edit-mode/more-menu/index.js"],"names":["MoreMenu","showIconLabels","registry","isDistractionFree","select","preferencesStore","get","setIsInserterOpened","setIsListViewOpened","closeGeneralSidebar","siteEditorStore","openModal","interfaceStore","set","setPreference","toggleDistractionFree","batch","showTooltip","variant","onClose","displayShortcut","primaryShift","MenuGroup","onClick","KEYBOARD_SHORTCUT_HELP_MODAL_NAME","access","external","PREFERENCES_MODAL_NAME"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { useSelect, useDispatch, useRegistry } from '@wordpress/data';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { external } from '@wordpress/icons';\nimport { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';\nimport {\n\tActionItem,\n\tMoreMenuDropdown,\n\tstore as interfaceStore,\n} from '@wordpress/interface';\nimport {\n\tPreferenceToggleMenuItem,\n\tstore as preferencesStore,\n} from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport {\n\tKEYBOARD_SHORTCUT_HELP_MODAL_NAME,\n\tdefault as KeyboardShortcutHelpModal,\n} from '../../keyboard-shortcut-help-modal';\nimport {\n\tPREFERENCES_MODAL_NAME,\n\tdefault as EditSitePreferencesModal,\n} from '../../preferences-modal';\nimport ToolsMoreMenuGroup from '../tools-more-menu-group';\nimport SiteExport from './site-export';\nimport WelcomeGuideMenuItem from './welcome-guide-menu-item';\nimport CopyContentMenuItem from './copy-content-menu-item';\nimport ModeSwitcher from '../mode-switcher';\nimport { store as siteEditorStore } from '../../../store';\n\nexport default function MoreMenu( { showIconLabels } ) {\n\tconst registry = useRegistry();\n\tconst isDistractionFree = useSelect(\n\t\t( select ) =>\n\t\t\tselect( preferencesStore ).get(\n\t\t\t\t'core/edit-site',\n\t\t\t\t'distractionFree'\n\t\t\t),\n\t\t[]\n\t);\n\n\tconst { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =\n\t\tuseDispatch( siteEditorStore );\n\tconst { openModal } = useDispatch( interfaceStore );\n\tconst { set: setPreference } = useDispatch( preferencesStore );\n\n\tconst toggleDistractionFree = () => {\n\t\tregistry.batch( () => {\n\t\t\tsetPreference( 'core/edit-site', 'fixedToolbar', false );\n\t\t\tsetIsInserterOpened( false );\n\t\t\tsetIsListViewOpened( false );\n\t\t\tcloseGeneralSidebar();\n\t\t} );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<MoreMenuDropdown\n\t\t\t\ttoggleProps={ {\n\t\t\t\t\tshowTooltip: ! showIconLabels,\n\t\t\t\t\t...( showIconLabels && { variant: 'tertiary' } ),\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<MenuGroup label={ _x( 'View', 'noun' ) }>\n\t\t\t\t\t\t\t<PreferenceToggleMenuItem\n\t\t\t\t\t\t\t\tscope=\"core/edit-site\"\n\t\t\t\t\t\t\t\tname=\"fixedToolbar\"\n\t\t\t\t\t\t\t\tdisabled={ isDistractionFree }\n\t\t\t\t\t\t\t\tlabel={ __( 'Top toolbar' ) }\n\t\t\t\t\t\t\t\tinfo={ __(\n\t\t\t\t\t\t\t\t\t'Access all block and document tools in a single place'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tmessageActivated={ __(\n\t\t\t\t\t\t\t\t\t'Top toolbar activated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tmessageDeactivated={ __(\n\t\t\t\t\t\t\t\t\t'Top toolbar deactivated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<PreferenceToggleMenuItem\n\t\t\t\t\t\t\t\tscope=\"core/edit-site\"\n\t\t\t\t\t\t\t\tname=\"focusMode\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Spotlight mode' ) }\n\t\t\t\t\t\t\t\tinfo={ __( 'Focus on one block at a time' ) }\n\t\t\t\t\t\t\t\tmessageActivated={ __(\n\t\t\t\t\t\t\t\t\t'Spotlight mode activated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tmessageDeactivated={ __(\n\t\t\t\t\t\t\t\t\t'Spotlight mode deactivated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<PreferenceToggleMenuItem\n\t\t\t\t\t\t\t\tscope=\"core/edit-site\"\n\t\t\t\t\t\t\t\tname=\"distractionFree\"\n\t\t\t\t\t\t\t\tonToggle={ toggleDistractionFree }\n\t\t\t\t\t\t\t\tlabel={ __( 'Distraction free' ) }\n\t\t\t\t\t\t\t\tinfo={ __( 'Write with calmness' ) }\n\t\t\t\t\t\t\t\tmessageActivated={ __(\n\t\t\t\t\t\t\t\t\t'Distraction free mode activated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tmessageDeactivated={ __(\n\t\t\t\t\t\t\t\t\t'Distraction free mode deactivated'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tshortcut={ displayShortcut.primaryShift(\n\t\t\t\t\t\t\t\t\t'\\\\'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t<ModeSwitcher />\n\t\t\t\t\t\t<ActionItem.Slot\n\t\t\t\t\t\t\tname=\"core/edit-site/plugin-more-menu\"\n\t\t\t\t\t\t\tlabel={ __( 'Plugins' ) }\n\t\t\t\t\t\t\tas={ MenuGroup }\n\t\t\t\t\t\t\tfillProps={ { onClick: onClose } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<MenuGroup label={ __( 'Tools' ) }>\n\t\t\t\t\t\t\t<SiteExport />\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\topenModal(\n\t\t\t\t\t\t\t\t\t\tKEYBOARD_SHORTCUT_HELP_MODAL_NAME\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tshortcut={ displayShortcut.access( 'h' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Keyboard shortcuts' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t<WelcomeGuideMenuItem />\n\t\t\t\t\t\t\t<CopyContentMenuItem />\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\ticon={ external }\n\t\t\t\t\t\t\t\trole=\"menuitem\"\n\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/site-editor/'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Help' ) }\n\t\t\t\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t<ToolsMoreMenuGroup.Slot\n\t\t\t\t\t\t\t\tfillProps={ { onClose } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\topenModal( PREFERENCES_MODAL_NAME )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Preferences' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</MoreMenuDropdown>\n\t\t\t<KeyboardShortcutHelpModal />\n\t\t\t<EditSitePreferencesModal />\n\t\t</>\n\t);\n}\n"]}

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

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.KEYBOARD_SHORTCUT_HELP_MODAL_NAME = void 0;
 exports.default = KeyboardShortcutHelpModal;
 
 var _element = require("@wordpress/element");
@@ -17,6 +18,8 @@ var _i18n = require("@wordpress/i18n");
 
 var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
 
+var _interface = require("@wordpress/interface");
+
 var _data = require("@wordpress/data");
 
 var _config = require("./config");
@@ -36,6 +39,9 @@ var _dynamicShortcut = _interopRequireDefault(require("./dynamic-shortcut"));
 /**
  * Internal dependencies
  */
+const KEYBOARD_SHORTCUT_HELP_MODAL_NAME = 'edit-site/keyboard-shortcut-help';
+exports.KEYBOARD_SHORTCUT_HELP_MODAL_NAME = KEYBOARD_SHORTCUT_HELP_MODAL_NAME;
+
 const ShortcutList = ({
   shortcuts
 }) =>
@@ -84,10 +90,17 @@ const ShortcutCategorySection = ({
   });
 };
 
-function KeyboardShortcutHelpModal({
-  isModalActive,
-  toggleModal
-}) {
+function KeyboardShortcutHelpModal() {
+  const isModalActive = (0, _data.useSelect)(select => select(_interface.store).isModalActive(KEYBOARD_SHORTCUT_HELP_MODAL_NAME));
+  const {
+    closeModal,
+    openModal
+  } = (0, _data.useDispatch)(_interface.store);
+
+  const toggleModal = () => isModalActive ? closeModal() : openModal(KEYBOARD_SHORTCUT_HELP_MODAL_NAME);
+
+  (0, _keyboardShortcuts.useShortcut)('core/edit-site/keyboard-shortcuts', toggleModal);
+
   if (!isModalActive) {
     return null;
   }

package/build/components/keyboard-shortcut-help-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/keyboard-shortcut-help-modal/index.js"],"names":["ShortcutList","shortcuts","map","shortcut","index","ShortcutSection","title","className","ShortcutCategorySection","categoryName","additionalShortcuts","categoryShortcuts","select","keyboardShortcutsStore","getCategoryShortcuts","concat","KeyboardShortcutHelpModal","isModalActive","toggleModal","keyCombination","character","description","ariaLabel","textFormattingShortcuts"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AAKA,MAAMA,YAAY,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF;AACpB;AACD;AACA;AACA;;AACC;AACA;AACC,EAAA,SAAS,EAAC,uDADX;AAEC,EAAA,IAAI,EAAC;AAFN,GAIGA,SAAS,CAACC,GAAV,CAAe,CAAEC,QAAF,EAAYC,KAAZ,KAChB;AACC,EAAA,SAAS,EAAC,kDADX;AAEC,EAAA,GAAG,EAAGA;AAFP,GAIG,OAAOD,QAAP,KAAoB,QAApB,GACD,4BAAC,wBAAD;AAAiB,EAAA,IAAI,EAAGA;AAAxB,EADC,GAGD,4BAAC,iBAAD,OAAeA;AAAf,EAPF,CADC,CAJH;AAiBA;AAvBD;;AA0BA,MAAME,eAAe,GAAG,CAAE;AAAEC,EAAAA,KAAF;AAASL,EAAAA,SAAT;AAAoBM,EAAAA;AAApB,CAAF,KACvB;AACC,EAAA,SAAS,EAAG,yBACX,iDADW,EAEXA,SAFW;AADb,GAMG,CAAC,CAAED,KAAH,IACD;AAAI,EAAA,SAAS,EAAC;AAAd,GACGA,KADH,CAPF,EAWC,4BAAC,YAAD;AAAc,EAAA,SAAS,EAAGL;AAA1B,EAXD,CADD;;AAgBA,MAAMO,uBAAuB,GAAG,CAAE;AACjCF,EAAAA,KADiC;AAEjCG,EAAAA,YAFiC;AAGjCC,EAAAA,mBAAmB,GAAG;AAHW,CAAF,KAIzB;AACN,QAAMC,iBAAiB,GAAG,qBACvBC,MAAF,IAAc;AACb,WAAOA,MAAM,CAAEC,wBAAF,CAAN,CAAiCC,oBAAjC,CACNL,YADM,CAAP;AAGA,GALwB,EAMzB,CAAEA,YAAF,CANyB,CAA1B;AASA,SACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAGH,KADT;AAEC,IAAA,SAAS,EAAGK,iBAAiB,CAACI,MAAlB,CAA0BL,mBAA1B;AAFb,IADD;AAMA,CApBD;;AAsBe,SAASM,yBAAT,CAAoC;AAClDC,EAAAA,aADkD;AAElDC,EAAAA;AAFkD,CAApC,EAGX;AACH,MAAK,CAAED,aAAP,EAAuB;AACtB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,KAAK,EAAG,cAAI,oBAAJ,CAFT;AAGC,IAAA,cAAc,EAAGC;AAHlB,KAKC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAC,wDADX;AAEC,IAAA,SAAS,EAAG,CAAE,mCAAF;AAFb,IALD,EASC,4BAAC,uBAAD;AACC,IAAA,KAAK,EAAG,cAAI,kBAAJ,CADT;AAEC,IAAA,YAAY,EAAC;AAFd,IATD,EAcC,4BAAC,uBAAD;AACC,IAAA,KAAK,EAAG,cAAI,qBAAJ,CADT;AAEC,IAAA,YAAY,EAAC;AAFd,IAdD,EAmBC,4BAAC,uBAAD;AACC,IAAA,KAAK,EAAG,cAAI,iBAAJ,CADT;AAEC,IAAA,YAAY,EAAC,OAFd;AAGC,IAAA,mBAAmB,EAAG,CACrB;AACCC,MAAAA,cAAc,EAAE;AAAEC,QAAAA,SAAS,EAAE;AAAb,OADjB;AAECC,MAAAA,WAAW,EAAE,cACZ,qDADY,CAFd;;AAKC;AACAC,MAAAA,SAAS,EAAE,cAAI,eAAJ;AANZ,KADqB;AAHvB,IAnBD,EAiCC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,iBAAJ,CADT;AAEC,IAAA,SAAS,EAAGC;AAFb,IAjCD,CADD;AAwCA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { textFormattingShortcuts } from './config';\nimport Shortcut from './shortcut';\nimport DynamicShortcut from './dynamic-shortcut';\n\nconst ShortcutList = ( { shortcuts } ) => (\n\t/*\n\t * Disable reason: The `list` ARIA role is redundant but\n\t * Safari+VoiceOver won't announce the list otherwise.\n\t */\n\t/* eslint-disable jsx-a11y/no-redundant-roles */\n\t<ul\n\t\tclassName=\"edit-site-keyboard-shortcut-help-modal__shortcut-list\"\n\t\trole=\"list\"\n\t>\n\t\t{ shortcuts.map( ( shortcut, index ) => (\n\t\t\t<li\n\t\t\t\tclassName=\"edit-site-keyboard-shortcut-help-modal__shortcut\"\n\t\t\t\tkey={ index }\n\t\t\t>\n\t\t\t\t{ typeof shortcut === 'string' ? (\n\t\t\t\t\t<DynamicShortcut name={ shortcut } />\n\t\t\t\t) : (\n\t\t\t\t\t<Shortcut { ...shortcut } />\n\t\t\t\t) }\n\t\t\t</li>\n\t\t) ) }\n\t</ul>\n\t/* eslint-enable jsx-a11y/no-redundant-roles */\n);\n\nconst ShortcutSection = ( { title, shortcuts, className } ) => (\n\t<section\n\t\tclassName={ classnames(\n\t\t\t'edit-site-keyboard-shortcut-help-modal__section',\n\t\t\tclassName\n\t\t) }\n\t>\n\t\t{ !! title && (\n\t\t\t<h2 className=\"edit-site-keyboard-shortcut-help-modal__section-title\">\n\t\t\t\t{ title }\n\t\t\t</h2>\n\t\t) }\n\t\t<ShortcutList shortcuts={ shortcuts } />\n\t</section>\n);\n\nconst ShortcutCategorySection = ( {\n\ttitle,\n\tcategoryName,\n\tadditionalShortcuts = [],\n} ) => {\n\tconst categoryShortcuts = useSelect(\n\t\t( select ) => {\n\t\t\treturn select( keyboardShortcutsStore ).getCategoryShortcuts(\n\t\t\t\tcategoryName\n\t\t\t);\n\t\t},\n\t\t[ categoryName ]\n\t);\n\n\treturn (\n\t\t<ShortcutSection\n\t\t\ttitle={ title }\n\t\t\tshortcuts={ categoryShortcuts.concat( additionalShortcuts ) }\n\t\t/>\n\t);\n};\n\nexport default function KeyboardShortcutHelpModal( {\n\tisModalActive,\n\ttoggleModal,\n} ) {\n\tif ( ! isModalActive ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"edit-site-keyboard-shortcut-help-modal\"\n\t\t\ttitle={ __( 'Keyboard shortcuts' ) }\n\t\t\tonRequestClose={ toggleModal }\n\t\t>\n\t\t\t<ShortcutSection\n\t\t\t\tclassName=\"edit-site-keyboard-shortcut-help-modal__main-shortcuts\"\n\t\t\t\tshortcuts={ [ 'core/edit-site/keyboard-shortcuts' ] }\n\t\t\t/>\n\t\t\t<ShortcutCategorySection\n\t\t\t\ttitle={ __( 'Global shortcuts' ) }\n\t\t\t\tcategoryName=\"global\"\n\t\t\t/>\n\n\t\t\t<ShortcutCategorySection\n\t\t\t\ttitle={ __( 'Selection shortcuts' ) }\n\t\t\t\tcategoryName=\"selection\"\n\t\t\t/>\n\n\t\t\t<ShortcutCategorySection\n\t\t\t\ttitle={ __( 'Block shortcuts' ) }\n\t\t\t\tcategoryName=\"block\"\n\t\t\t\tadditionalShortcuts={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tkeyCombination: { character: '/' },\n\t\t\t\t\t\tdescription: __(\n\t\t\t\t\t\t\t'Change the block type after adding a new paragraph.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t/* translators: The forward-slash character. e.g. '/'. */\n\t\t\t\t\t\tariaLabel: __( 'Forward-slash' ),\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t/>\n\t\t\t<ShortcutSection\n\t\t\t\ttitle={ __( 'Text formatting' ) }\n\t\t\t\tshortcuts={ textFormattingShortcuts }\n\t\t\t/>\n\t\t</Modal>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/keyboard-shortcut-help-modal/index.js"],"names":["KEYBOARD_SHORTCUT_HELP_MODAL_NAME","ShortcutList","shortcuts","map","shortcut","index","ShortcutSection","title","className","ShortcutCategorySection","categoryName","additionalShortcuts","categoryShortcuts","select","keyboardShortcutsStore","getCategoryShortcuts","concat","KeyboardShortcutHelpModal","isModalActive","interfaceStore","closeModal","openModal","toggleModal","keyCombination","character","description","ariaLabel","textFormattingShortcuts"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseShortcut,\n\tstore as keyboardShortcutsStore,\n} from '@wordpress/keyboard-shortcuts';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { textFormattingShortcuts } from './config';\nimport Shortcut from './shortcut';\nimport DynamicShortcut from './dynamic-shortcut';\n\nexport const KEYBOARD_SHORTCUT_HELP_MODAL_NAME =\n\t'edit-site/keyboard-shortcut-help';\n\nconst ShortcutList = ( { shortcuts } ) => (\n\t/*\n\t * Disable reason: The `list` ARIA role is redundant but\n\t * Safari+VoiceOver won't announce the list otherwise.\n\t */\n\t/* eslint-disable jsx-a11y/no-redundant-roles */\n\t<ul\n\t\tclassName=\"edit-site-keyboard-shortcut-help-modal__shortcut-list\"\n\t\trole=\"list\"\n\t>\n\t\t{ shortcuts.map( ( shortcut, index ) => (\n\t\t\t<li\n\t\t\t\tclassName=\"edit-site-keyboard-shortcut-help-modal__shortcut\"\n\t\t\t\tkey={ index }\n\t\t\t>\n\t\t\t\t{ typeof shortcut === 'string' ? (\n\t\t\t\t\t<DynamicShortcut name={ shortcut } />\n\t\t\t\t) : (\n\t\t\t\t\t<Shortcut { ...shortcut } />\n\t\t\t\t) }\n\t\t\t</li>\n\t\t) ) }\n\t</ul>\n\t/* eslint-enable jsx-a11y/no-redundant-roles */\n);\n\nconst ShortcutSection = ( { title, shortcuts, className } ) => (\n\t<section\n\t\tclassName={ classnames(\n\t\t\t'edit-site-keyboard-shortcut-help-modal__section',\n\t\t\tclassName\n\t\t) }\n\t>\n\t\t{ !! title && (\n\t\t\t<h2 className=\"edit-site-keyboard-shortcut-help-modal__section-title\">\n\t\t\t\t{ title }\n\t\t\t</h2>\n\t\t) }\n\t\t<ShortcutList shortcuts={ shortcuts } />\n\t</section>\n);\n\nconst ShortcutCategorySection = ( {\n\ttitle,\n\tcategoryName,\n\tadditionalShortcuts = [],\n} ) => {\n\tconst categoryShortcuts = useSelect(\n\t\t( select ) => {\n\t\t\treturn select( keyboardShortcutsStore ).getCategoryShortcuts(\n\t\t\t\tcategoryName\n\t\t\t);\n\t\t},\n\t\t[ categoryName ]\n\t);\n\n\treturn (\n\t\t<ShortcutSection\n\t\t\ttitle={ title }\n\t\t\tshortcuts={ categoryShortcuts.concat( additionalShortcuts ) }\n\t\t/>\n\t);\n};\n\nexport default function KeyboardShortcutHelpModal() {\n\tconst isModalActive = useSelect( ( select ) =>\n\t\tselect( interfaceStore ).isModalActive(\n\t\t\tKEYBOARD_SHORTCUT_HELP_MODAL_NAME\n\t\t)\n\t);\n\tconst { closeModal, openModal } = useDispatch( interfaceStore );\n\tconst toggleModal = () =>\n\t\tisModalActive\n\t\t\t? closeModal()\n\t\t\t: openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );\n\tuseShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );\n\tif ( ! isModalActive ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"edit-site-keyboard-shortcut-help-modal\"\n\t\t\ttitle={ __( 'Keyboard shortcuts' ) }\n\t\t\tonRequestClose={ toggleModal }\n\t\t>\n\t\t\t<ShortcutSection\n\t\t\t\tclassName=\"edit-site-keyboard-shortcut-help-modal__main-shortcuts\"\n\t\t\t\tshortcuts={ [ 'core/edit-site/keyboard-shortcuts' ] }\n\t\t\t/>\n\t\t\t<ShortcutCategorySection\n\t\t\t\ttitle={ __( 'Global shortcuts' ) }\n\t\t\t\tcategoryName=\"global\"\n\t\t\t/>\n\n\t\t\t<ShortcutCategorySection\n\t\t\t\ttitle={ __( 'Selection shortcuts' ) }\n\t\t\t\tcategoryName=\"selection\"\n\t\t\t/>\n\n\t\t\t<ShortcutCategorySection\n\t\t\t\ttitle={ __( 'Block shortcuts' ) }\n\t\t\t\tcategoryName=\"block\"\n\t\t\t\tadditionalShortcuts={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tkeyCombination: { character: '/' },\n\t\t\t\t\t\tdescription: __(\n\t\t\t\t\t\t\t'Change the block type after adding a new paragraph.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t/* translators: The forward-slash character. e.g. '/'. */\n\t\t\t\t\t\tariaLabel: __( 'Forward-slash' ),\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t/>\n\t\t\t<ShortcutSection\n\t\t\t\ttitle={ __( 'Text formatting' ) }\n\t\t\t\tshortcuts={ textFormattingShortcuts }\n\t\t\t/>\n\t\t</Modal>\n\t);\n}\n"]}

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

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _i18n = require("@wordpress/i18n");
+
 var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
 
 var _data = require("@wordpress/data");
@@ -17,6 +19,10 @@ var _interface = require("@wordpress/interface");
 
 var _blocks = require("@wordpress/blocks");
 
+var _preferences = require("@wordpress/preferences");
+
+var _notices = require("@wordpress/notices");
+
 var _store = require("../../store");
 
 var _constants = require("../sidebar-edit-mode/constants");
@@ -41,8 +47,12 @@ function KeyboardShortcutsEditMode() {
     undo
   } = (0, _data.useDispatch)(_coreData.store);
   const {
+    isFeatureActive,
     setIsListViewOpened,
-    switchEditorMode
+    switchEditorMode,
+    toggleFeature,
+    setIsInserterOpened,
+    closeGeneralSidebar
   } = (0, _data.useDispatch)(_store.store);
   const {
     enableComplementaryArea,
@@ -56,6 +66,19 @@ function KeyboardShortcutsEditMode() {
     getSelectedBlockClientId,
     getBlockAttributes
   } = (0, _data.useSelect)(_blockEditor.store);
+  const {
+    set: setPreference
+  } = (0, _data.useDispatch)(_preferences.store);
+  const {
+    createInfoNotice
+  } = (0, _data.useDispatch)(_notices.store);
+
+  const toggleDistractionFree = () => {
+    setPreference('core/edit-site', 'fixedToolbar', false);
+    setIsInserterOpened(false);
+    setIsListViewOpened(false);
+    closeGeneralSidebar();
+  };
 
   const handleTextLevelShortcut = (event, level) => {
     event.preventDefault();
@@ -121,6 +144,14 @@ function KeyboardShortcutsEditMode() {
     //eslint-disable-next-line react-hooks/rules-of-hooks
     (0, _keyboardShortcuts.useShortcut)(`core/edit-site/transform-paragraph-to-heading-${level}`, event => handleTextLevelShortcut(event, level));
   });
+  (0, _keyboardShortcuts.useShortcut)('core/edit-site/toggle-distraction-free', () => {
+    toggleDistractionFree();
+    toggleFeature('distractionFree');
+    createInfoNotice(isFeatureActive('distractionFree') ? (0, _i18n.__)('Distraction free mode turned on.') : (0, _i18n.__)('Distraction free mode turned off.'), {
+      id: 'core/edit-site/distraction-free-mode/notice',
+      type: 'snackbar'
+    });
+  });
   return null;
 }
 

package/build/components/keyboard-shortcuts/edit-mode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/keyboard-shortcuts/edit-mode.js"],"names":["KeyboardShortcutsEditMode","getEditorMode","editSiteStore","isListViewOpen","select","isListViewOpened","isBlockInspectorOpen","interfaceStore","getActiveComplementaryArea","name","SIDEBAR_BLOCK","redo","undo","coreStore","setIsListViewOpened","switchEditorMode","enableComplementaryArea","disableComplementaryArea","replaceBlocks","blockEditorStore","getBlockName","getSelectedBlockClientId","getBlockAttributes","handleTextLevelShortcut","event","level","preventDefault","destinationBlockName","currentClientId","blockName","attributes","textAlign","destinationTextAlign","content","STORE_NAME","forEach"],"mappings":";;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAfA;AACA;AACA;;AAQA;AACA;AACA;AAKA,SAASA,yBAAT,GAAqC;AACpC,QAAM;AAAEC,IAAAA;AAAF,MAAoB,qBAAWC,YAAX,CAA1B;AACA,QAAMC,cAAc,GAAG,qBACpBC,MAAF,IAAcA,MAAM,CAAEF,YAAF,CAAN,CAAwBG,gBAAxB,EADQ,EAEtB,EAFsB,CAAvB;AAIA,QAAMC,oBAAoB,GAAG,qBAC1BF,MAAF,IACCA,MAAM,CAAEG,gBAAF,CAAN,CAAyBC,0BAAzB,CACCN,aAAcO,IADf,MAEMC,wBAJqB,EAK5B,EAL4B,CAA7B;AAOA,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAiB,uBAAaC,eAAb,CAAvB;AACA,QAAM;AAAEC,IAAAA,mBAAF;AAAuBC,IAAAA;AAAvB,MACL,uBAAab,YAAb,CADD;AAEA,QAAM;AAAEc,IAAAA,uBAAF;AAA2BC,IAAAA;AAA3B,MACL,uBAAaV,gBAAb,CADD;AAGA,QAAM;AAAEW,IAAAA;AAAF,MAAoB,uBAAaC,kBAAb,CAA1B;AACA,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,wBAAhB;AAA0CC,IAAAA;AAA1C,MACL,qBAAWH,kBAAX,CADD;;AAGA,QAAMI,uBAAuB,GAAG,CAAEC,KAAF,EAASC,KAAT,KAAoB;AACnDD,IAAAA,KAAK,CAACE,cAAN;AACA,UAAMC,oBAAoB,GACzBF,KAAK,KAAK,CAAV,GAAc,gBAAd,GAAiC,cADlC;AAEA,UAAMG,eAAe,GAAGP,wBAAwB,EAAhD;;AACA,QAAKO,eAAe,KAAK,IAAzB,EAAgC;AAC/B;AACA;;AACD,UAAMC,SAAS,GAAGT,YAAY,CAAEQ,eAAF,CAA9B;;AACA,QAAKC,SAAS,KAAK,gBAAd,IAAkCA,SAAS,KAAK,cAArD,EAAsE;AACrE;AACA;;AACD,UAAMC,UAAU,GAAGR,kBAAkB,CAAEM,eAAF,CAArC;AACA,UAAMG,SAAS,GACdF,SAAS,KAAK,gBAAd,GAAiC,OAAjC,GAA2C,WAD5C;AAEA,UAAMG,oBAAoB,GACzBL,oBAAoB,KAAK,gBAAzB,GAA4C,OAA5C,GAAsD,WADvD;AAGAT,IAAAA,aAAa,CACZU,eADY,EAEZ,yBAAaD,oBAAb,EAAmC;AAClCF,MAAAA,KADkC;AAElCQ,MAAAA,OAAO,EAAEH,UAAU,CAACG,OAFc;AAGlC,SAAG;AAAE,SAAED,oBAAF,GAA0BF,UAAU,CAAEC,SAAF;AAAtC;AAH+B,KAAnC,CAFY,CAAb;AAQA,GA1BD;;AA4BA,sCAAa,qBAAb,EAAsCP,KAAF,IAAa;AAChDZ,IAAAA,IAAI;AACJY,IAAAA,KAAK,CAACE,cAAN;AACA,GAHD;AAKA,sCAAa,qBAAb,EAAsCF,KAAF,IAAa;AAChDb,IAAAA,IAAI;AACJa,IAAAA,KAAK,CAACE,cAAN;AACA,GAHD,EAxDoC,CA6DpC;;AACA,sCAAa,iCAAb,EAAgD,MAAM;AACrD,QAAKvB,cAAL,EAAsB;AACrB;AACA;;AACDW,IAAAA,mBAAmB,CAAE,IAAF,CAAnB;AACA,GALD;AAOA,sCAAa,8CAAb,EAA+DU,KAAF,IAAa;AACzE;AACA;AACAA,IAAAA,KAAK,CAACE,cAAN;;AAEA,QAAKpB,oBAAL,EAA4B;AAC3BW,MAAAA,wBAAwB,CAAEiB,sBAAF,CAAxB;AACA,KAFD,MAEO;AACNlB,MAAAA,uBAAuB,CAAEkB,sBAAF,EAAcxB,wBAAd,CAAvB;AACA;AACD,GAVD;AAYA,sCAAa,4BAAb,EAA2C,MAAM;AAChDK,IAAAA,gBAAgB,CAAEd,aAAa,OAAO,QAApB,GAA+B,MAA/B,GAAwC,QAA1C,CAAhB;AACA,GAFD;AAIA,sCAAa,+CAAb,EAAgEuB,KAAF,IAC7DD,uBAAuB,CAAEC,KAAF,EAAS,CAAT,CADxB;AAIA,GAAE,CAAF,EAAK,CAAL,EAAQ,CAAR,EAAW,CAAX,EAAc,CAAd,EAAiB,CAAjB,EAAqBW,OAArB,CAAgCV,KAAF,IAAa;AAC1C;AACA;AACA;AACA,wCACE,iDAAiDA,KAAO,EAD1D,EAEGD,KAAF,IAAaD,uBAAuB,CAAEC,KAAF,EAASC,KAAT,CAFrC;AAIA,GARD;AAUA,SAAO,IAAP;AACA;;eAEczB,yB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useShortcut } from '@wordpress/keyboard-shortcuts';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { createBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';\nimport { STORE_NAME } from '../../store/constants';\n\nfunction KeyboardShortcutsEditMode() {\n\tconst { getEditorMode } = useSelect( editSiteStore );\n\tconst isListViewOpen = useSelect(\n\t\t( select ) => select( editSiteStore ).isListViewOpened(),\n\t\t[]\n\t);\n\tconst isBlockInspectorOpen = useSelect(\n\t\t( select ) =>\n\t\t\tselect( interfaceStore ).getActiveComplementaryArea(\n\t\t\t\teditSiteStore.name\n\t\t\t) === SIDEBAR_BLOCK,\n\t\t[]\n\t);\n\tconst { redo, undo } = useDispatch( coreStore );\n\tconst { setIsListViewOpened, switchEditorMode } =\n\t\tuseDispatch( editSiteStore );\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\tconst { getBlockName, getSelectedBlockClientId, getBlockAttributes } =\n\t\tuseSelect( blockEditorStore );\n\n\tconst handleTextLevelShortcut = ( event, level ) => {\n\t\tevent.preventDefault();\n\t\tconst destinationBlockName =\n\t\t\tlevel === 0 ? 'core/paragraph' : 'core/heading';\n\t\tconst currentClientId = getSelectedBlockClientId();\n\t\tif ( currentClientId === null ) {\n\t\t\treturn;\n\t\t}\n\t\tconst blockName = getBlockName( currentClientId );\n\t\tif ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {\n\t\t\treturn;\n\t\t}\n\t\tconst attributes = getBlockAttributes( currentClientId );\n\t\tconst textAlign =\n\t\t\tblockName === 'core/paragraph' ? 'align' : 'textAlign';\n\t\tconst destinationTextAlign =\n\t\t\tdestinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';\n\n\t\treplaceBlocks(\n\t\t\tcurrentClientId,\n\t\t\tcreateBlock( destinationBlockName, {\n\t\t\t\tlevel,\n\t\t\t\tcontent: attributes.content,\n\t\t\t\t...{ [ destinationTextAlign ]: attributes[ textAlign ] },\n\t\t\t} )\n\t\t);\n\t};\n\n\tuseShortcut( 'core/edit-site/undo', ( event ) => {\n\t\tundo();\n\t\tevent.preventDefault();\n\t} );\n\n\tuseShortcut( 'core/edit-site/redo', ( event ) => {\n\t\tredo();\n\t\tevent.preventDefault();\n\t} );\n\n\t// Only opens the list view. Other functionality for this shortcut happens in the rendered sidebar.\n\tuseShortcut( 'core/edit-site/toggle-list-view', () => {\n\t\tif ( isListViewOpen ) {\n\t\t\treturn;\n\t\t}\n\t\tsetIsListViewOpened( true );\n\t} );\n\n\tuseShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {\n\t\t// This shortcut has no known clashes, but use preventDefault to prevent any\n\t\t// obscure shortcuts from triggering.\n\t\tevent.preventDefault();\n\n\t\tif ( isBlockInspectorOpen ) {\n\t\t\tdisableComplementaryArea( STORE_NAME );\n\t\t} else {\n\t\t\tenableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );\n\t\t}\n\t} );\n\n\tuseShortcut( 'core/edit-site/toggle-mode', () => {\n\t\tswitchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );\n\t} );\n\n\tuseShortcut( 'core/edit-site/transform-heading-to-paragraph', ( event ) =>\n\t\thandleTextLevelShortcut( event, 0 )\n\t);\n\n\t[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {\n\t\t//the loop is based off on a constant therefore\n\t\t//the hook will execute the same way every time\n\t\t//eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tuseShortcut(\n\t\t\t`core/edit-site/transform-paragraph-to-heading-${ level }`,\n\t\t\t( event ) => handleTextLevelShortcut( event, level )\n\t\t);\n\t} );\n\n\treturn null;\n}\n\nexport default KeyboardShortcutsEditMode;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/keyboard-shortcuts/edit-mode.js"],"names":["KeyboardShortcutsEditMode","getEditorMode","editSiteStore","isListViewOpen","select","isListViewOpened","isBlockInspectorOpen","interfaceStore","getActiveComplementaryArea","name","SIDEBAR_BLOCK","redo","undo","coreStore","isFeatureActive","setIsListViewOpened","switchEditorMode","toggleFeature","setIsInserterOpened","closeGeneralSidebar","enableComplementaryArea","disableComplementaryArea","replaceBlocks","blockEditorStore","getBlockName","getSelectedBlockClientId","getBlockAttributes","set","setPreference","preferencesStore","createInfoNotice","noticesStore","toggleDistractionFree","handleTextLevelShortcut","event","level","preventDefault","destinationBlockName","currentClientId","blockName","attributes","textAlign","destinationTextAlign","content","STORE_NAME","forEach","id","type"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useShortcut } from '@wordpress/keyboard-shortcuts';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { createBlock } from '@wordpress/blocks';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';\nimport { STORE_NAME } from '../../store/constants';\n\nfunction KeyboardShortcutsEditMode() {\n\tconst { getEditorMode } = useSelect( editSiteStore );\n\tconst isListViewOpen = useSelect(\n\t\t( select ) => select( editSiteStore ).isListViewOpened(),\n\t\t[]\n\t);\n\tconst isBlockInspectorOpen = useSelect(\n\t\t( select ) =>\n\t\t\tselect( interfaceStore ).getActiveComplementaryArea(\n\t\t\t\teditSiteStore.name\n\t\t\t) === SIDEBAR_BLOCK,\n\t\t[]\n\t);\n\tconst { redo, undo } = useDispatch( coreStore );\n\tconst {\n\t\tisFeatureActive,\n\t\tsetIsListViewOpened,\n\t\tswitchEditorMode,\n\t\ttoggleFeature,\n\t\tsetIsInserterOpened,\n\t\tcloseGeneralSidebar,\n\t} = useDispatch( editSiteStore );\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\tconst { getBlockName, getSelectedBlockClientId, getBlockAttributes } =\n\t\tuseSelect( blockEditorStore );\n\n\tconst { set: setPreference } = useDispatch( preferencesStore );\n\tconst { createInfoNotice } = useDispatch( noticesStore );\n\n\tconst toggleDistractionFree = () => {\n\t\tsetPreference( 'core/edit-site', 'fixedToolbar', false );\n\t\tsetIsInserterOpened( false );\n\t\tsetIsListViewOpened( false );\n\t\tcloseGeneralSidebar();\n\t};\n\n\tconst handleTextLevelShortcut = ( event, level ) => {\n\t\tevent.preventDefault();\n\t\tconst destinationBlockName =\n\t\t\tlevel === 0 ? 'core/paragraph' : 'core/heading';\n\t\tconst currentClientId = getSelectedBlockClientId();\n\t\tif ( currentClientId === null ) {\n\t\t\treturn;\n\t\t}\n\t\tconst blockName = getBlockName( currentClientId );\n\t\tif ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {\n\t\t\treturn;\n\t\t}\n\t\tconst attributes = getBlockAttributes( currentClientId );\n\t\tconst textAlign =\n\t\t\tblockName === 'core/paragraph' ? 'align' : 'textAlign';\n\t\tconst destinationTextAlign =\n\t\t\tdestinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';\n\n\t\treplaceBlocks(\n\t\t\tcurrentClientId,\n\t\t\tcreateBlock( destinationBlockName, {\n\t\t\t\tlevel,\n\t\t\t\tcontent: attributes.content,\n\t\t\t\t...{ [ destinationTextAlign ]: attributes[ textAlign ] },\n\t\t\t} )\n\t\t);\n\t};\n\n\tuseShortcut( 'core/edit-site/undo', ( event ) => {\n\t\tundo();\n\t\tevent.preventDefault();\n\t} );\n\n\tuseShortcut( 'core/edit-site/redo', ( event ) => {\n\t\tredo();\n\t\tevent.preventDefault();\n\t} );\n\n\t// Only opens the list view. Other functionality for this shortcut happens in the rendered sidebar.\n\tuseShortcut( 'core/edit-site/toggle-list-view', () => {\n\t\tif ( isListViewOpen ) {\n\t\t\treturn;\n\t\t}\n\t\tsetIsListViewOpened( true );\n\t} );\n\n\tuseShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {\n\t\t// This shortcut has no known clashes, but use preventDefault to prevent any\n\t\t// obscure shortcuts from triggering.\n\t\tevent.preventDefault();\n\n\t\tif ( isBlockInspectorOpen ) {\n\t\t\tdisableComplementaryArea( STORE_NAME );\n\t\t} else {\n\t\t\tenableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );\n\t\t}\n\t} );\n\n\tuseShortcut( 'core/edit-site/toggle-mode', () => {\n\t\tswitchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );\n\t} );\n\n\tuseShortcut( 'core/edit-site/transform-heading-to-paragraph', ( event ) =>\n\t\thandleTextLevelShortcut( event, 0 )\n\t);\n\n\t[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {\n\t\t//the loop is based off on a constant therefore\n\t\t//the hook will execute the same way every time\n\t\t//eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tuseShortcut(\n\t\t\t`core/edit-site/transform-paragraph-to-heading-${ level }`,\n\t\t\t( event ) => handleTextLevelShortcut( event, level )\n\t\t);\n\t} );\n\n\tuseShortcut( 'core/edit-site/toggle-distraction-free', () => {\n\t\ttoggleDistractionFree();\n\t\ttoggleFeature( 'distractionFree' );\n\t\tcreateInfoNotice(\n\t\t\tisFeatureActive( 'distractionFree' )\n\t\t\t\t? __( 'Distraction free mode turned on.' )\n\t\t\t\t: __( 'Distraction free mode turned off.' ),\n\t\t\t{\n\t\t\t\tid: 'core/edit-site/distraction-free-mode/notice',\n\t\t\t\ttype: 'snackbar',\n\t\t\t}\n\t\t);\n\t} );\n\n\treturn null;\n}\n\nexport default KeyboardShortcutsEditMode;\n"]}

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

@@ -144,6 +144,15 @@ function KeyboardShortcutsRegister() {
         }
       });
     });
+    registerShortcut({
+      name: 'core/edit-site/toggle-distraction-free',
+      category: 'global',
+      description: (0, _i18n.__)('Toggle distraction free mode.'),
+      keyCombination: {
+        modifier: 'primaryShift',
+        character: '\\'
+      }
+    });
   }, [registerShortcut]);
   return null;
 }

package/build/components/keyboard-shortcuts/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/keyboard-shortcuts/register.js"],"names":["KeyboardShortcutsRegister","registerShortcut","keyboardShortcutsStore","name","category","description","keyCombination","modifier","character","aliases","forEach","level"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { isAppleOS } from '@wordpress/keycodes';\nimport { useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\n\nfunction KeyboardShortcutsRegister() {\n\t// Registering the shortcuts.\n\tconst { registerShortcut } = useDispatch( keyboardShortcutsStore );\n\tuseEffect( () => {\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/save',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Save your changes.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primary',\n\t\t\t\tcharacter: 's',\n\t\t\t},\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/undo',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Undo your last changes.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primary',\n\t\t\t\tcharacter: 'z',\n\t\t\t},\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/redo',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Redo your last undo.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primaryShift',\n\t\t\t\tcharacter: 'z',\n\t\t\t},\n\t\t\t// Disable on Apple OS because it conflicts with the browser's\n\t\t\t// history shortcut. It's a fine alias for both Windows and Linux.\n\t\t\t// Since there's no conflict for Ctrl+Shift+Z on both Windows and\n\t\t\t// Linux, we keep it as the default for consistency.\n\t\t\taliases: isAppleOS()\n\t\t\t\t? []\n\t\t\t\t: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tmodifier: 'primary',\n\t\t\t\t\t\t\tcharacter: 'y',\n\t\t\t\t\t\t},\n\t\t\t\t  ],\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/toggle-list-view',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Open the block list view.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'access',\n\t\t\t\tcharacter: 'o',\n\t\t\t},\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/toggle-block-settings-sidebar',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Show or hide the Settings sidebar.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primaryShift',\n\t\t\t\tcharacter: ',',\n\t\t\t},\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/keyboard-shortcuts',\n\t\t\tcategory: 'main',\n\t\t\tdescription: __( 'Display these keyboard shortcuts.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'access',\n\t\t\t\tcharacter: 'h',\n\t\t\t},\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/next-region',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Navigate to the next part of the editor.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'ctrl',\n\t\t\t\tcharacter: '`',\n\t\t\t},\n\t\t\taliases: [\n\t\t\t\t{\n\t\t\t\t\tmodifier: 'access',\n\t\t\t\t\tcharacter: 'n',\n\t\t\t\t},\n\t\t\t],\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/previous-region',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Navigate to the previous part of the editor.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'ctrlShift',\n\t\t\t\tcharacter: '`',\n\t\t\t},\n\t\t\taliases: [\n\t\t\t\t{\n\t\t\t\t\tmodifier: 'access',\n\t\t\t\t\tcharacter: 'p',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tmodifier: 'ctrlShift',\n\t\t\t\t\tcharacter: '~',\n\t\t\t\t},\n\t\t\t],\n\t\t} );\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/toggle-mode',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Switch between visual editor and code editor.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'secondary',\n\t\t\t\tcharacter: 'm',\n\t\t\t},\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/transform-heading-to-paragraph',\n\t\t\tcategory: 'block-library',\n\t\t\tdescription: __( 'Transform heading to paragraph.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'access',\n\t\t\t\tcharacter: `0`,\n\t\t\t},\n\t\t} );\n\n\t\t[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {\n\t\t\tregisterShortcut( {\n\t\t\t\tname: `core/edit-site/transform-paragraph-to-heading-${ level }`,\n\t\t\t\tcategory: 'block-library',\n\t\t\t\tdescription: __( 'Transform paragraph to heading.' ),\n\t\t\t\tkeyCombination: {\n\t\t\t\t\tmodifier: 'access',\n\t\t\t\t\tcharacter: `${ level }`,\n\t\t\t\t},\n\t\t\t} );\n\t\t} );\n\t}, [ registerShortcut ] );\n\n\treturn null;\n}\n\nexport default KeyboardShortcutsRegister;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/keyboard-shortcuts/register.js"],"names":["KeyboardShortcutsRegister","registerShortcut","keyboardShortcutsStore","name","category","description","keyCombination","modifier","character","aliases","forEach","level"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { isAppleOS } from '@wordpress/keycodes';\nimport { useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\n\nfunction KeyboardShortcutsRegister() {\n\t// Registering the shortcuts.\n\tconst { registerShortcut } = useDispatch( keyboardShortcutsStore );\n\tuseEffect( () => {\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/save',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Save your changes.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primary',\n\t\t\t\tcharacter: 's',\n\t\t\t},\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/undo',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Undo your last changes.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primary',\n\t\t\t\tcharacter: 'z',\n\t\t\t},\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/redo',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Redo your last undo.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primaryShift',\n\t\t\t\tcharacter: 'z',\n\t\t\t},\n\t\t\t// Disable on Apple OS because it conflicts with the browser's\n\t\t\t// history shortcut. It's a fine alias for both Windows and Linux.\n\t\t\t// Since there's no conflict for Ctrl+Shift+Z on both Windows and\n\t\t\t// Linux, we keep it as the default for consistency.\n\t\t\taliases: isAppleOS()\n\t\t\t\t? []\n\t\t\t\t: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tmodifier: 'primary',\n\t\t\t\t\t\t\tcharacter: 'y',\n\t\t\t\t\t\t},\n\t\t\t\t  ],\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/toggle-list-view',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Open the block list view.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'access',\n\t\t\t\tcharacter: 'o',\n\t\t\t},\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/toggle-block-settings-sidebar',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Show or hide the Settings sidebar.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primaryShift',\n\t\t\t\tcharacter: ',',\n\t\t\t},\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/keyboard-shortcuts',\n\t\t\tcategory: 'main',\n\t\t\tdescription: __( 'Display these keyboard shortcuts.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'access',\n\t\t\t\tcharacter: 'h',\n\t\t\t},\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/next-region',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Navigate to the next part of the editor.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'ctrl',\n\t\t\t\tcharacter: '`',\n\t\t\t},\n\t\t\taliases: [\n\t\t\t\t{\n\t\t\t\t\tmodifier: 'access',\n\t\t\t\t\tcharacter: 'n',\n\t\t\t\t},\n\t\t\t],\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/previous-region',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Navigate to the previous part of the editor.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'ctrlShift',\n\t\t\t\tcharacter: '`',\n\t\t\t},\n\t\t\taliases: [\n\t\t\t\t{\n\t\t\t\t\tmodifier: 'access',\n\t\t\t\t\tcharacter: 'p',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tmodifier: 'ctrlShift',\n\t\t\t\t\tcharacter: '~',\n\t\t\t\t},\n\t\t\t],\n\t\t} );\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/toggle-mode',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Switch between visual editor and code editor.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'secondary',\n\t\t\t\tcharacter: 'm',\n\t\t\t},\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/transform-heading-to-paragraph',\n\t\t\tcategory: 'block-library',\n\t\t\tdescription: __( 'Transform heading to paragraph.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'access',\n\t\t\t\tcharacter: `0`,\n\t\t\t},\n\t\t} );\n\n\t\t[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {\n\t\t\tregisterShortcut( {\n\t\t\t\tname: `core/edit-site/transform-paragraph-to-heading-${ level }`,\n\t\t\t\tcategory: 'block-library',\n\t\t\t\tdescription: __( 'Transform paragraph to heading.' ),\n\t\t\t\tkeyCombination: {\n\t\t\t\t\tmodifier: 'access',\n\t\t\t\t\tcharacter: `${ level }`,\n\t\t\t\t},\n\t\t\t} );\n\t\t} );\n\n\t\tregisterShortcut( {\n\t\t\tname: 'core/edit-site/toggle-distraction-free',\n\t\t\tcategory: 'global',\n\t\t\tdescription: __( 'Toggle distraction free mode.' ),\n\t\t\tkeyCombination: {\n\t\t\t\tmodifier: 'primaryShift',\n\t\t\t\tcharacter: '\\\\',\n\t\t\t},\n\t\t} );\n\t}, [ registerShortcut ] );\n\n\treturn null;\n}\n\nexport default KeyboardShortcutsRegister;\n"]}

package/build/components/layout/index.js

@@ -109,6 +109,7 @@ function Layout() {
   const isListPage = (0, _getIsListPage.default)(params, isMobileViewport);
   const isEditorPage = !isListPage;
   const {
+    isDistractionFree,
     hasFixedToolbar,
     canvasMode,
     previousShortcut,
@@ -124,7 +125,8 @@ function Layout() {
       canvasMode: getCanvasMode(),
       previousShortcut: getAllShortcutKeyCombinations('core/edit-site/previous-region'),
       nextShortcut: getAllShortcutKeyCombinations('core/edit-site/next-region'),
-      hasFixedToolbar: select(_preferences.store).get('fixedToolbar')
+      hasFixedToolbar: select(_preferences.store).get('core/edit-site', 'fixedToolbar'),
+      isDistractionFree: select(_preferences.store).get('core/edit-site', 'distractionFree')
     };
   }, []);
   const isEditing = canvasMode === 'edit';
@@ -139,7 +141,29 @@ function Layout() {
   const [canvasResizer, canvasSize] = (0, _compose.useResizeObserver)();
   const [fullResizer] = (0, _compose.useResizeObserver)();
   const [isResizing] = (0, _element.useState)(false);
-  const isEditorLoading = (0, _hooks.useIsSiteEditorLoading)(); // Sets the right context for the command center
+  const isEditorLoading = (0, _hooks.useIsSiteEditorLoading)();
+  const [isResizableFrameOversized, setIsResizableFrameOversized] = (0, _element.useState)(false); // This determines which animation variant should apply to the header.
+  // There is also a `isDistractionFreeHovering` state that gets priority
+  // when hovering the `edit-site-layout__header-container` in distraction
+  // free mode. It's set via framer and trickles down to all the children
+  // so they can use this variant state too.
+  //
+  // TODO: The issue with this is we want to have the hover state stick when hovering
+  // a popover opened via the header. We'll probably need to lift this state to
+  // handle it ourselves. Also, focusWithin the header needs to be handled.
+
+  let headerAnimationState;
+
+  if (canvasMode === 'view') {
+    // We need 'view' to always take priority so 'isDistractionFree'
+    // doesn't bleed over into the view (sidebar) state
+    headerAnimationState = 'view';
+  } else if (isDistractionFree) {
+    headerAnimationState = 'isDistractionFree';
+  } else {
+    headerAnimationState = canvasMode; // edit, view, init
+  } // Sets the right context for the command palette
+
 
   const commandContext = canvasMode === 'edit' && isEditorPage ? 'site-editor-edit' : 'site-editor';
   useCommandContext(commandContext);
@@ -155,52 +179,107 @@ function Layout() {
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_commands.CommandMenu, null), (0, _element.createElement)(_register.default, null), (0, _element.createElement)(_global.default, null), fullResizer, (0, _element.createElement)("div", { ...navigateRegionsProps,
     ref: navigateRegionsProps.ref,
     className: (0, _classnames.default)('edit-site-layout', navigateRegionsProps.className, {
+      'is-distraction-free': isDistractionFree && isEditing,
       'is-full-canvas': isFullCanvas,
       'is-edit-mode': isEditing,
       'has-fixed-toolbar': hasFixedToolbar
     })
+  }, (0, _element.createElement)(_components.__unstableMotion.div, {
+    className: "edit-site-layout__header-container",
+    variants: {
+      isDistractionFree: {
+        opacity: 0,
+        transition: {
+          type: 'tween',
+          delay: 0.8,
+          delayChildren: 0.8
+        } // How long to wait before the header exits
+
+      },
+      isDistractionFreeHovering: {
+        opacity: 1,
+        transition: {
+          type: 'tween',
+          delay: 0.2,
+          delayChildren: 0.2
+        } // How long to wait before the header shows
+
+      },
+      view: {
+        opacity: 1
+      },
+      edit: {
+        opacity: 1
+      }
+    },
+    whileHover: isDistractionFree ? 'isDistractionFreeHovering' : undefined,
+    animate: headerAnimationState
   }, (0, _element.createElement)(_siteHub.default, {
+    as: _components.__unstableMotion.div,
+    variants: {
+      isDistractionFree: {
+        x: '-100%'
+      },
+      isDistractionFreeHovering: {
+        x: 0
+      },
+      view: {
+        x: 0
+      },
+      edit: {
+        x: 0
+      }
+    },
     ref: hubRef,
+    isTransparent: isResizableFrameOversized,
     className: "edit-site-layout__hub"
   }), (0, _element.createElement)(_components.__unstableAnimatePresence, {
     initial: false
   }, isEditorPage && isEditing && (0, _element.createElement)(_interface.NavigableRegion, {
+    key: "header",
     className: "edit-site-layout__header",
     ariaLabel: (0, _i18n.__)('Editor top bar'),
     as: _components.__unstableMotion.div,
-    animate: {
-      y: 0
-    },
-    initial: {
-      y: '-100%'
+    variants: {
+      isDistractionFree: {
+        opacity: 0,
+        y: 0
+      },
+      isDistractionFreeHovering: {
+        opacity: 1,
+        y: 0
+      },
+      view: {
+        opacity: 1,
+        y: '-100%'
+      },
+      edit: {
+        opacity: 1,
+        y: 0
+      }
     },
     exit: {
       y: '-100%'
     },
+    initial: {
+      opacity: isDistractionFree ? 1 : 0,
+      y: isDistractionFree ? 0 : '-100%'
+    },
     transition: {
       type: 'tween',
-      duration: disableMotion ? 0 : ANIMATION_DURATION,
+      duration: disableMotion ? 0 : 0.2,
       ease: 'easeOut'
     }
-  }, isEditing && (0, _element.createElement)(_headerEditMode.default, null))), (0, _element.createElement)("div", {
+  }, (0, _element.createElement)(_headerEditMode.default, null)))), (0, _element.createElement)("div", {
     className: "edit-site-layout__content"
-  }, (0, _element.createElement)(_components.__unstableAnimatePresence, {
-    initial: false
   }, (0, _element.createElement)(_components.__unstableMotion.div, {
-    initial: {
-      opacity: 0
-    },
-    animate: showSidebar ? {
-      opacity: 1,
-      display: 'block'
-    } : {
-      opacity: 0,
-      transitionEnd: {
-        display: 'none'
-      }
-    },
-    exit: {
-      opacity: 0
+    // The sidebar is needed for routing on mobile
+    // (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
+    // so we can't remove the element entirely. Using `inert` will make
+    // it inaccessible to screen readers and keyboard navigation.
+    inert: showSidebar ? undefined : 'inert',
+    animate: {
+      opacity: showSidebar ? 1 : 0
     },
     transition: {
       type: 'tween',
@@ -211,7 +290,7 @@ function Layout() {
     className: "edit-site-layout__sidebar"
   }, (0, _element.createElement)(_interface.NavigableRegion, {
     ariaLabel: (0, _i18n.__)('Navigation')
-  }, (0, _element.createElement)(_sidebar.default, null)))), (0, _element.createElement)(_savePanel.default, null), showCanvas && (0, _element.createElement)(_element.Fragment, null, isListPage && (0, _element.createElement)(_pageMain.default, null), isEditorPage && (0, _element.createElement)("div", {
+  }, (0, _element.createElement)(_sidebar.default, null))), (0, _element.createElement)(_savePanel.default, null), showCanvas && (0, _element.createElement)(_element.Fragment, null, isListPage && (0, _element.createElement)(_pageMain.default, null), isEditorPage && (0, _element.createElement)("div", {
     className: (0, _classnames.default)('edit-site-layout__canvas-container', {
       'is-resizing': isResizing
     })
@@ -225,7 +304,9 @@ function Layout() {
     } : {},
     initial: false,
     layout: "position",
-    className: "edit-site-layout__canvas",
+    className: (0, _classnames.default)('edit-site-layout__canvas', {
+      'is-right-aligned': isResizableFrameOversized
+    }),
     transition: {
       type: 'tween',
       duration: disableMotion || isResizing ? 0 : ANIMATION_DURATION,
@@ -234,7 +315,8 @@ function Layout() {
   }, (0, _element.createElement)(_errorBoundary.default, null, (0, _element.createElement)(_resizableFrame.default, {
     isReady: !isEditorLoading,
     isFullWidth: isEditing,
-    oversizedClassName: "edit-site-layout__resizable-frame-oversized",
+    isOversized: isResizableFrameOversized,
+    setIsOversized: setIsResizableFrameOversized,
     innerContentStyle: {
       background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor
     }