From 0d7b6298d052bffaaea7a57da8bc6198eca64e1b Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 9 Sep 2022 22:50:42 +0300 Subject: [PATCH 01/29] enhances the effect of the reduceUI preference - hide all the chrome of the editor, including the block toolbar, top bar, most top bar buttons, insertion point and closes any sidebars Co-authored-by: Matias Ventura <548849+mtias@users.noreply.github.com> Co-authored-by: James Koster <846565+jameskoster@users.noreply.github.com> --- .../src/components/block-toolbar/index.js | 4 +- .../components/block-tools/insertion-point.js | 12 +++ .../block-tools/selected-block-popover.js | 12 +++ .../edit-post/src/components/header/index.js | 7 +- .../src/components/header/more-menu/index.js | 2 +- .../src/components/header/style.scss | 77 +++++++++++++++++++ .../components/header/writing-menu/index.js | 39 +++++++++- .../components/keyboard-shortcuts/index.js | 40 +++++++++- .../edit-post/src/components/layout/index.js | 9 +++ .../src/components/preferences-modal/index.js | 7 ++ .../preference-toggle-menu-item/index.js | 4 + 11 files changed, 198 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 07d4e861f6094..80d88b6a880d9 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -132,9 +132,7 @@ const BlockToolbar = ( { hideDragHandle } ) => { ) } ) } diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js index 5bd69fcd2e532..735c865a856f3 100644 --- a/packages/block-editor/src/components/block-tools/insertion-point.js +++ b/packages/block-editor/src/components/block-tools/insertion-point.js @@ -33,6 +33,8 @@ function InsertionPointPopover( { nextClientId, rootClientId, isInserterShown, + hasReducedUI, + isNavigationMode, } = useSelect( ( select ) => { const { getBlockOrder, @@ -41,6 +43,8 @@ function InsertionPointPopover( { isBlockBeingDragged, getPreviousBlockClientId, getNextBlockClientId, + getSettings, + isNavigationMode: _isNavigationMode, } = select( blockEditorStore ); const insertionPoint = getBlockInsertionPoint(); const order = getBlockOrder( insertionPoint.rootClientId ); @@ -60,6 +64,8 @@ function InsertionPointPopover( { _nextClientId = getNextBlockClientId( _nextClientId ); } + const settings = getSettings(); + return { previousClientId: _previousClientId, nextClientId: _nextClientId, @@ -67,6 +73,8 @@ function InsertionPointPopover( { getBlockListSettings( insertionPoint.rootClientId ) ?.orientation || 'vertical', rootClientId: insertionPoint.rootClientId, + isNavigationMode: _isNavigationMode(), + hasReducedUI: settings.hasReducedUI, isInserterShown: insertionPoint?.__unstableWithInserter, }; }, [] ); @@ -169,6 +177,10 @@ function InsertionPointPopover( { }, }; + if ( hasReducedUI && ! isNavigationMode ) { + return null; + } + const className = classnames( 'block-editor-block-list__insertion-point', 'is-' + orientation diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js index 530a3b7bdc263..ecbf667a7685e 100644 --- a/packages/block-editor/src/components/block-tools/selected-block-popover.js +++ b/packages/block-editor/src/components/block-tools/selected-block-popover.js @@ -169,6 +169,8 @@ function wrapperSelector( select ) { getBlockRootClientId, getBlock, getBlockParents, + getSettings, + isNavigationMode: _isNavigationMode, __experimentalGetBlockListSettingsForBlocks, } = select( blockEditorStore ); @@ -195,10 +197,14 @@ function wrapperSelector( select ) { ?.__experimentalCaptureToolbars ); + const settings = getSettings(); + return { clientId, rootClientId: getBlockRootClientId( clientId ), name, + hasReducedUI: settings.hasReducedUI, + isNavigationMode: _isNavigationMode(), isEmptyDefaultBlock: name && isUnmodifiedDefaultBlock( { name, attributes } ), capturingClientId, @@ -221,8 +227,14 @@ export default function WrappedBlockPopover( { name, isEmptyDefaultBlock, capturingClientId, + hasReducedUI, + isNavigationMode, } = selected; + if ( hasReducedUI && ! isNavigationMode ) { + return null; + } + if ( ! name ) { return null; } diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 8d47f2bc8c78f..25b75e8d60421 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -29,7 +29,6 @@ function Header( { setEntitiesSavedStatesCallback } ) { isPublishSidebarOpened, isSaving, showIconLabels, - hasReducedUI, } = useSelect( ( select ) => ( { hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), @@ -38,17 +37,13 @@ function Header( { setEntitiesSavedStatesCallback } ) { isSaving: select( editPostStore ).isSavingMetaBoxes(), showIconLabels: select( editPostStore ).isFeatureActive( 'showIconLabels' ), - hasReducedUI: - select( editPostStore ).isFeatureActive( 'reducedUI' ), } ), [] ); const isLargeViewport = useViewportMatch( 'large' ); - const classes = classnames( 'edit-post-header', { - 'has-reduced-ui': hasReducedUI, - } ); + const classes = classnames( 'edit-post-header' ); return (
diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js index 6085ce65e51e5..e134c7ac13194 100644 --- a/packages/edit-post/src/components/header/more-menu/index.js +++ b/packages/edit-post/src/components/header/more-menu/index.js @@ -36,7 +36,7 @@ const MoreMenu = ( { showIconLabels } ) => { scope="core/edit-post" /> ) } - + .edit-post-header__settings > .editor-post-preview, + & > .edit-post-header__toolbar { + visibility: hidden; + } + + & > .edit-post-header__settings > .block-editor-post-preview__dropdown { + display: none; + } + + & > .edit-post-header__settings > .interface-pinned-items { + display: none; + } + + & > .edit-post-header__settings > .editor-post-publish-button, + & > .edit-post-header__settings > .editor-post-saved-state, + & > .edit-post-header__settings > .editor-post-save-draft, + & > .edit-post-header__settings > .editor-post-switch-to-draft, + & > .edit-post-header__settings > .editor-post-publish-panel__toggle, + & > .edit-post-header__settings .interface-more-menu-dropdown { + position: relative; + top: -50px; + transition: top 0.2s cubic-bezier(0.7, 0, 0.84, 0); + } + + // show the full screen toggle + & > div:not(.edit-post-header__settings):not(.edit-post-header__toolbar) { + position: absolute; + left: -60px; + transition: left 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); + } + + &:hover { + background-color: rgba(255, 255, 255, 1); + border-bottom: 1px solid #e0e0e0; + transition: background-color 0.4s, border-bottom 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); + + // show the publish button and the more button + > .edit-post-header__settings > .editor-post-publish-button, + & > .edit-post-header__settings > .editor-post-saved-state, + & > .edit-post-header__settings > .editor-post-save-draft, + & > .edit-post-header__settings > .editor-post-switch-to-draft, + > .edit-post-header__settings > .editor-post-publish-panel__toggle, + > .edit-post-header__settings .interface-more-menu-dropdown { + position: relative; + top: 0; + transition: top 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); + } + + & > div:first-child { + left: 0; + transition: left 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); + } + + } + + .components-editor-notices__dismissible { + position: absolute; + top: 0; + width: 100vw; + z-index: z-index(".interface-interface-skeleton__actions"); + } + + + } + +} + .edit-post-header__toolbar { display: flex; flex-grow: 1; diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js index a6e6052fd29df..28d82d3d6ef7b 100644 --- a/packages/edit-post/src/components/header/writing-menu/index.js +++ b/packages/edit-post/src/components/header/writing-menu/index.js @@ -1,13 +1,35 @@ /** * WordPress dependencies */ +import { useSelect, useDispatch } from '@wordpress/data'; import { MenuGroup } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import { useViewportMatch } from '@wordpress/compose'; import { displayShortcut } from '@wordpress/keycodes'; import { PreferenceToggleMenuItem } from '@wordpress/preferences'; +import { store as blockEditorStore } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { store as postEditorStore } from '../../../store'; + +function WritingMenu( { onClose } ) { + const hasReducedUI = useSelect( + ( select ) => select( blockEditorStore ).getSettings().hasReducedUI, + [] + ); + + const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } = + useDispatch( postEditorStore ); + + const toggleDistractionFree = () => { + setIsInserterOpened( false ); + setIsListViewOpened( false ); + closeGeneralSidebar(); + onClose(); + }; -function WritingMenu() { const isLargeViewport = useViewportMatch( 'medium' ); if ( ! isLargeViewport ) { return null; @@ -17,6 +39,7 @@ function WritingMenu() { + ); } diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js index c7d481ee976a4..fcf8c78162f42 100644 --- a/packages/edit-post/src/components/keyboard-shortcuts/index.js +++ b/packages/edit-post/src/components/keyboard-shortcuts/index.js @@ -7,9 +7,10 @@ import { useShortcut, store as keyboardShortcutsStore, } from '@wordpress/keyboard-shortcuts'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { store as editorStore } from '@wordpress/editor'; import { store as blockEditorStore } from '@wordpress/block-editor'; +import { store as noticesStore } from '@wordpress/notices'; /** * Internal dependencies @@ -18,14 +19,20 @@ import { store as editPostStore } from '../../store'; function KeyboardShortcuts() { const { getBlockSelectionStart } = useSelect( blockEditorStore ); - const { getEditorMode, isEditorSidebarOpened, isListViewOpened } = - useSelect( editPostStore ); + const { + getEditorMode, + isEditorSidebarOpened, + isListViewOpened, + isFeatureActive, + } = useSelect( editPostStore ); const isModeToggleDisabled = useSelect( ( select ) => { const { richEditingEnabled, codeEditingEnabled } = select( editorStore ).getEditorSettings(); return ! richEditingEnabled || ! codeEditingEnabled; }, [] ); + const { createInfoNotice } = useDispatch( noticesStore ); + const { switchEditorMode, openGeneralSidebar, @@ -46,6 +53,16 @@ function KeyboardShortcuts() { }, } ); + registerShortcut( { + name: 'core/edit-post/toggle-distraction-free', + category: 'global', + description: __( 'Toggle disrtaction free mode.' ), + keyCombination: { + modifier: 'primaryShift', + character: '\\', + }, + } ); + registerShortcut( { name: 'core/edit-post/toggle-fullscreen', category: 'global', @@ -135,6 +152,23 @@ function KeyboardShortcuts() { toggleFeature( 'fullscreenMode' ); } ); + useShortcut( 'core/edit-post/toggle-distraction-free', () => { + closeGeneralSidebar(); + setIsListViewOpened( false ); + toggleFeature( 'reducedUI' ); + const modeState = isFeatureActive( 'reducedUI' ) + ? __( 'on' ) + : __( 'off' ); + createInfoNotice( + // translators: Mode of distraction free can be 'on' or 'off'; + sprintf( __( 'Distraction free mode turned %s.' ), modeState ), + { + speak: true, + type: 'snackbar', + } + ); + } ); + useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => { // This shortcut has no known clashes, but use preventDefault to prevent any // obscure shortcuts from triggering. diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index d9bf9ba5cbf82..9f502dca2f697 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -124,11 +124,19 @@ function Layout( { styles } ) { documentLabel: postTypeLabel || _x( 'Document', 'noun' ), }; }, [] ); + const [ isDistractionFree, setIsDistractionFree ] = + useState( hasReducedUI ); + + useEffect( () => { + setIsDistractionFree( hasReducedUI ); + }, [ hasReducedUI ] ); + const className = classnames( 'edit-post-layout', 'is-mode-' + mode, { 'is-sidebar-opened': sidebarIsOpened, 'has-fixed-toolbar': hasFixedToolbar, 'has-metaboxes': hasActiveMetaboxes, 'show-icon-labels': showIconLabels, + 'is-distraction-free': isDistractionFree, } ); const openSidebarPanel = () => openGeneralSidebar( @@ -204,6 +212,7 @@ function Layout( { styles } ) { ...interfaceLabels, secondarySidebar: secondarySidebarLabel, } } + isDistractionFree={ isDistractionFree } header={
+ null, + disabled = false, } ) { const isActive = useSelect( ( select ) => !! select( preferencesStore ).get( scope, name ), @@ -53,12 +55,14 @@ export default function PreferenceToggleMenuItem( { icon={ isActive && check } isSelected={ isActive } onClick={ () => { + toggleHandler(); toggle( scope, name ); speakMessage(); } } role="menuitemcheckbox" info={ info } shortcut={ shortcut } + disabled={ disabled } > { label } From 9d8cfeb40d129a159f2e221cd3db0ae7b0791c39 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Sat, 10 Sep 2022 16:08:15 +0300 Subject: [PATCH 02/29] snapshot update --- .../test/__snapshots__/index.js.snap | 68 ++++++++++++++++--- 1 file changed, 57 insertions(+), 11 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap index 723d5c071d425..aa0914a5e7bb8 100644 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap @@ -253,7 +253,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active class="components-toggle-control__label" for="inspector-toggle-control-1" > - Spotlight mode + Distraction Free
@@ -261,7 +261,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active class="components-base-control__help emotion-6 emotion-7" id="inspector-toggle-control-1__help" > - Highlights the current block and fades other content. + Reduce visual distractions by hiding the toolbar and other elements to focus on writing.

@@ -299,7 +299,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active class="components-toggle-control__label" for="inspector-toggle-control-2" > - Show button text labels + Spotlight mode @@ -307,7 +307,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active class="components-base-control__help emotion-6 emotion-7" id="inspector-toggle-control-2__help" > - Show text instead of icons on buttons. + Highlights the current block and fades other content.

@@ -345,7 +345,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active class="components-toggle-control__label" for="inspector-toggle-control-3" > - Always open list view + Show button text labels @@ -353,7 +353,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active class="components-base-control__help emotion-6 emotion-7" id="inspector-toggle-control-3__help" > - Opens the block list view sidebar by default. + Show text instead of icons on buttons.

@@ -391,7 +391,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active class="components-toggle-control__label" for="inspector-toggle-control-4" > - Reduce the interface + Always open list view @@ -399,7 +399,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active class="components-base-control__help emotion-6 emotion-7" id="inspector-toggle-control-4__help" > - Compacts options and outlines in the toolbar. + Opens the block list view sidebar by default.

@@ -437,7 +437,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active class="components-toggle-control__label" for="inspector-toggle-control-5" > - Use theme styles + Reduce the interface @@ -445,7 +445,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active class="components-base-control__help emotion-6 emotion-7" id="inspector-toggle-control-5__help" > - Make the editor look like your theme. + Compacts options and outlines in the toolbar.

@@ -483,13 +483,59 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active class="components-toggle-control__label" for="inspector-toggle-control-6" > - Display block breadcrumbs + Use theme styles

+ Make the editor look like your theme. +

+ + +
+
+
+
+ + + + + + +
+
+

Shows block breadcrumbs at the bottom of the editor.

From 586edc78122eb81c7568325671a49dc4c7cd88c1 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Sat, 10 Sep 2022 16:47:22 +0300 Subject: [PATCH 03/29] remove useless prop --- packages/edit-post/src/components/layout/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 9f502dca2f697..dd004b40a4f5d 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -212,7 +212,6 @@ function Layout( { styles } ) { ...interfaceLabels, secondarySidebar: secondarySidebarLabel, } } - isDistractionFree={ isDistractionFree } header={
Date: Sat, 10 Sep 2022 19:04:54 +0300 Subject: [PATCH 04/29] Adds framer motion animation to header elements in distraction free mode. Co-authored-by: Matias Ventura <548849+mtias@users.noreply.github.com> Co-authored-by: James Koster <846565+jameskoster@users.noreply.github.com> --- .../edit-post/src/components/header/index.js | 36 +++++++++++--- .../src/components/header/style.scss | 47 +------------------ .../edit-post/src/components/layout/index.js | 2 + .../components/interface-skeleton/index.js | 30 +++++++++++- 4 files changed, 62 insertions(+), 53 deletions(-) diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 25b75e8d60421..b4ff13eb14227 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -10,6 +10,7 @@ import { PostSavedState, PostPreviewButton } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; import { PinnedItems } from '@wordpress/interface'; import { useViewportMatch } from '@wordpress/compose'; +import { __unstableMotion as motion } from '@wordpress/components'; /** * Internal dependencies @@ -23,7 +24,7 @@ import MainDashboardButton from './main-dashboard-button'; import { store as editPostStore } from '../../store'; import TemplateTitle from './template-title'; -function Header( { setEntitiesSavedStatesCallback } ) { +function Header( { setEntitiesSavedStatesCallback, hasReducedUI } ) { const { hasActiveMetaboxes, isPublishSidebarOpened, @@ -45,16 +46,39 @@ function Header( { setEntitiesSavedStatesCallback } ) { const classes = classnames( 'edit-post-header' ); + const slideY = { + hidden: hasReducedUI ? { y: '-50' } : { y: 0 }, + hover: { y: 0, transition: { type: 'tween', delay: 0.2 } }, + }; + + const slideX = { + hidden: hasReducedUI ? { x: '-100%' } : { x: 0 }, + hover: { x: 0, transition: { type: 'tween', delay: 0.2 } }, + }; + return (
- + + + -
+ -
-
+ + { ! isPublishSidebarOpened && ( // This button isn't completely hidden by the publish sidebar. // We can't hide the whole toolbar when the publish sidebar is open because @@ -88,7 +112,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { { showIconLabels && ! isLargeViewport && ( ) } -
+
); } diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 1636ebe68e671..9593ee8f3295a 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -35,9 +35,8 @@ .edit-post-header { position: absolute; width: 100%; - background-color: rgba(255, 255, 255, 0); - border-bottom: 0 solid #fff; - transition: background-color 0.2s, border-bottom 0s cubic-bezier(0.25, 0.1, 0.25, 1); + background-color: rgba(255, 255, 255, 1); + border-bottom: 1px solid #e0e0e0; // hide some parts @@ -54,48 +53,6 @@ display: none; } - & > .edit-post-header__settings > .editor-post-publish-button, - & > .edit-post-header__settings > .editor-post-saved-state, - & > .edit-post-header__settings > .editor-post-save-draft, - & > .edit-post-header__settings > .editor-post-switch-to-draft, - & > .edit-post-header__settings > .editor-post-publish-panel__toggle, - & > .edit-post-header__settings .interface-more-menu-dropdown { - position: relative; - top: -50px; - transition: top 0.2s cubic-bezier(0.7, 0, 0.84, 0); - } - - // show the full screen toggle - & > div:not(.edit-post-header__settings):not(.edit-post-header__toolbar) { - position: absolute; - left: -60px; - transition: left 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); - } - - &:hover { - background-color: rgba(255, 255, 255, 1); - border-bottom: 1px solid #e0e0e0; - transition: background-color 0.4s, border-bottom 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); - - // show the publish button and the more button - > .edit-post-header__settings > .editor-post-publish-button, - & > .edit-post-header__settings > .editor-post-saved-state, - & > .edit-post-header__settings > .editor-post-save-draft, - & > .edit-post-header__settings > .editor-post-switch-to-draft, - > .edit-post-header__settings > .editor-post-publish-panel__toggle, - > .edit-post-header__settings .interface-more-menu-dropdown { - position: relative; - top: 0; - transition: top 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); - } - - & > div:first-child { - left: 0; - transition: left 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); - } - - } - .components-editor-notices__dismissible { position: absolute; top: 0; diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index dd004b40a4f5d..fa19741d654ee 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -207,6 +207,7 @@ function Layout( { styles } ) { ) }
- { !! header && ( + { !! header && hasReducedUI && ( + + { header } + + ) } + { !! header && ! hasReducedUI && (
Date: Sat, 10 Sep 2022 19:38:48 +0300 Subject: [PATCH 05/29] Adjusts the bottom distance of snackbars for distraction free mode. Co-authored-by: Javier Arce <4933+javierarce@users.noreply.github.com> --- packages/edit-post/src/components/layout/style.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index f030ce7cdc6b5..f785b695489e3 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -11,6 +11,13 @@ padding-left: 16px; padding-right: 16px; } + +.is-distraction-free { + .components-editor-notices__snackbar { + bottom: 20px; + } +} + @include editor-left(".edit-post-layout .components-editor-notices__snackbar"); .edit-post-layout .editor-post-publish-panel { From a025d28220394e57e9bd4df5dbd5cad47719f715 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Sat, 10 Sep 2022 20:38:11 +0300 Subject: [PATCH 06/29] Deals with editor notices: - moves them to the header of the interface skeleton - moves them on top of the interface header to make them dismissable Co-authored-by: Javier Arce <4933+javierarce@users.noreply.github.com> Co-authored-by: Joen A. <1204802+jasmussen@users.noreply.github.com> --- packages/edit-post/src/components/header/style.scss | 13 +++++-------- packages/edit-post/src/components/layout/index.js | 2 +- .../src/components/interface-skeleton/index.js | 5 +++++ 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 9593ee8f3295a..fe19181a71424 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -52,15 +52,12 @@ & > .edit-post-header__settings > .interface-pinned-items { display: none; } + } - .components-editor-notices__dismissible { - position: absolute; - top: 0; - width: 100vw; - z-index: z-index(".interface-interface-skeleton__actions"); - } - - + .components-editor-notices__dismissible { + position: absolute; + width: calc(100vw - 25px); + z-index: 35; } } diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index fa19741d654ee..fee29d85f3d20 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -221,6 +221,7 @@ function Layout( { styles } ) { } /> } + editorNotices={ } secondarySidebar={ secondarySidebar() } sidebar={ ( ! isMobileViewport || sidebarIsOpened ) && ( @@ -246,7 +247,6 @@ function Layout( { styles } ) { notices={ } content={ <> - { ( mode === 'text' || ! isRichEditingEnabled ) && ( ) } diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index ad4171f525fd5..4bf228327f980 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -33,6 +33,7 @@ function InterfaceSkeleton( hasReducedUI, footer, header, + editorNotices, sidebar, secondarySidebar, notices, @@ -102,6 +103,7 @@ function InterfaceSkeleton( ) } +
+ { editorNotices } +
{ !! secondarySidebar && (
Date: Mon, 12 Sep 2022 12:14:35 +0300 Subject: [PATCH 07/29] Limits notices in interface header only when distraction free mode is on. Co-authored-by: Matias Ventura <548849+mtias@users.noreply.github.com> --- packages/edit-post/src/components/layout/index.js | 1 + .../interface/src/components/interface-skeleton/index.js | 9 +++++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index fee29d85f3d20..eaed89cee05e2 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -247,6 +247,7 @@ function Layout( { styles } ) { notices={ } content={ <> + { ! hasReducedUI && } { ( mode === 'text' || ! isRichEditingEnabled ) && ( ) } diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index 4bf228327f980..6a4380e25f170 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -103,7 +103,6 @@ function InterfaceSkeleton( ) } -
- { editorNotices } -
+ { hasReducedUI && ( +
+ { editorNotices } +
+ ) }
{ !! secondarySidebar && (
Date: Mon, 12 Sep 2022 18:12:09 +0300 Subject: [PATCH 08/29] Handles toolbar focus in distraction free mode: - Shift+Tab shows the top toolbar and allos reverse tabbing - Alt+F10 is disabled like in other situations when focusin the toolbar not possible Co-authored-by: Alex Stine <13755480+alexstine@users.noreply.github.com> --- .../components/block-tools/selected-block-popover.js | 3 +++ packages/edit-post/src/components/header/style.scss | 10 ++++++++++ 2 files changed, 13 insertions(+) diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js index ecbf667a7685e..a19dd0503d52f 100644 --- a/packages/block-editor/src/components/block-tools/selected-block-popover.js +++ b/packages/block-editor/src/components/block-tools/selected-block-popover.js @@ -36,6 +36,7 @@ function selector( select ) { isMultiSelecting: isMultiSelecting(), isTyping: isTyping(), hasFixedToolbar: getSettings().hasFixedToolbar, + hasReducedUI: getSettings().hasReducedUI, lastClientId: hasMultiSelection() ? getLastMultiSelectedBlockClientId() : null, @@ -55,6 +56,7 @@ function SelectedBlockPopover( { isMultiSelecting, isTyping, hasFixedToolbar, + hasReducedUI, lastClientId, } = useSelect( selector, [] ); const isInsertionPointVisible = useSelect( @@ -94,6 +96,7 @@ function SelectedBlockPopover( { editorMode === 'edit' && ! shouldShowContextualToolbar && ! hasFixedToolbar && + ! hasReducedUI && ! isEmptyDefaultBlock; useShortcut( diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index fe19181a71424..d3f3affa25438 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -54,6 +54,16 @@ } } + // we need ! important because we override inline styles + // set by the motion component + .interface-interface-skeleton__header:focus-within { + opacity: 1 !important; + div { + transform: translateX(0) translateZ(0) !important; + } + + } + .components-editor-notices__dismissible { position: absolute; width: calc(100vw - 25px); From afc4227f7ecf9045454e4e1d4717246048e800ba Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 13 Sep 2022 11:58:07 +0300 Subject: [PATCH 09/29] Removes wrong visual margin artefact for notifications in DFM Co-authored-by: Javier Arce <4933+javierarce@users.noreply.github.com> --- packages/edit-post/src/components/header/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index d3f3affa25438..92292c3bf182a 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -66,7 +66,6 @@ .components-editor-notices__dismissible { position: absolute; - width: calc(100vw - 25px); z-index: 35; } From 615fc49ba26c479fc567aa0c96882fee0f8cabbc Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 13 Sep 2022 18:18:11 +0300 Subject: [PATCH 10/29] refactores reducedUI to distractionFree and hasReducedUI to isDistractionFree --- .../block-list/use-in-between-inserter.js | 2 +- .../components/block-parent-selector/index.js | 6 ++--- .../block-settings-dropdown.js | 6 ++--- .../src/components/block-toolbar/index.js | 6 ++--- .../components/block-tools/insertion-point.js | 6 ++--- .../block-tools/selected-block-popover.js | 12 +++++----- .../edit-post/src/components/header/index.js | 6 ++--- .../components/header/writing-menu/index.js | 13 ++++++----- .../components/keyboard-shortcuts/index.js | 4 ++-- .../edit-post/src/components/layout/index.js | 22 +++++++++---------- .../src/components/preferences-modal/index.js | 8 +++---- packages/edit-post/src/editor.js | 8 +++---- .../provider/use-block-editor-settings.js | 2 +- .../components/interface-skeleton/index.js | 12 +++++----- 14 files changed, 57 insertions(+), 56 deletions(-) diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js index bede4c796b165..94643f95f550a 100644 --- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js +++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js @@ -15,7 +15,7 @@ export function useInBetweenInserter() { const openRef = useContext( InsertionPointOpenRef ); const isInBetweenInserterDisabled = useSelect( ( select ) => - select( blockEditorStore ).getSettings().hasReducedUI || + select( blockEditorStore ).getSettings().isDistractionFree || select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out', [] ); diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js index caf488ac06ec6..e338a10f17069 100644 --- a/packages/block-editor/src/components/block-parent-selector/index.js +++ b/packages/block-editor/src/components/block-parent-selector/index.js @@ -24,7 +24,7 @@ import { store as blockEditorStore } from '../../store'; export default function BlockParentSelector() { const { selectBlock, toggleBlockHighlight } = useDispatch( blockEditorStore ); - const { firstParentClientId, shouldHide, hasReducedUI } = useSelect( + const { firstParentClientId, shouldHide, isDistractionFree } = useSelect( ( select ) => { const { getBlockName, @@ -46,7 +46,7 @@ export default function BlockParentSelector() { '__experimentalParentSelector', true ), - hasReducedUI: settings.hasReducedUI, + isDistractionFree: settings.isDistractionFree, }; }, [] @@ -59,7 +59,7 @@ export default function BlockParentSelector() { const { gestures: showMoversGestures } = useShowMoversGestures( { ref: nodeRef, onChange( isFocused ) { - if ( isFocused && hasReducedUI ) { + if ( isFocused && isDistractionFree ) { return; } toggleBlockHighlight( firstParentClientId, isFocused ); diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index 9fbb50c10c364..2495de414c693 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js @@ -59,7 +59,7 @@ export function BlockSettingsDropdown( { const firstBlockClientId = blockClientIds[ 0 ]; const { firstParentClientId, - hasReducedUI, + isDistractionFree, onlyBlock, parentBlockType, previousBlockClientId, @@ -83,7 +83,7 @@ export function BlockSettingsDropdown( { return { firstParentClientId: _firstParentClientId, - hasReducedUI: getSettings().hasReducedUI, + isDistractionFree: getSettings().isDistractionFree, onlyBlock: 1 === getBlockCount(), parentBlockType: getBlockType( parentBlockName ), previousBlockClientId: @@ -171,7 +171,7 @@ export function BlockSettingsDropdown( { const { gestures: showParentOutlineGestures } = useShowMoversGestures( { ref: selectParentButtonRef, onChange( isFocused ) { - if ( isFocused && hasReducedUI ) { + if ( isFocused && isDistractionFree ) { return; } toggleBlockHighlight( firstParentClientId, isFocused ); diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 80d88b6a880d9..b2160b3db4b6b 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -34,7 +34,7 @@ const BlockToolbar = ( { hideDragHandle } ) => { blockClientId, blockType, hasFixedToolbar, - hasReducedUI, + isDistractionFree, isValid, isVisual, isContentLocked, @@ -60,7 +60,7 @@ const BlockToolbar = ( { hideDragHandle } ) => { selectedBlockClientId && getBlockType( getBlockName( selectedBlockClientId ) ), hasFixedToolbar: settings.hasFixedToolbar, - hasReducedUI: settings.hasReducedUI, + isDistractionFree: settings.isDistractionFree, rootClientId: blockRootClientId, isValid: selectedBlockClientIds.every( ( id ) => isBlockValid( id ) @@ -82,7 +82,7 @@ const BlockToolbar = ( { hideDragHandle } ) => { { ref: nodeRef, onChange( isFocused ) { - if ( isFocused && hasReducedUI ) { + if ( isFocused && isDistractionFree ) { return; } toggleBlockHighlight( blockClientId, isFocused ); diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js index 735c865a856f3..a15317d6d081b 100644 --- a/packages/block-editor/src/components/block-tools/insertion-point.js +++ b/packages/block-editor/src/components/block-tools/insertion-point.js @@ -33,7 +33,7 @@ function InsertionPointPopover( { nextClientId, rootClientId, isInserterShown, - hasReducedUI, + isDistractionFree, isNavigationMode, } = useSelect( ( select ) => { const { @@ -74,7 +74,7 @@ function InsertionPointPopover( { ?.orientation || 'vertical', rootClientId: insertionPoint.rootClientId, isNavigationMode: _isNavigationMode(), - hasReducedUI: settings.hasReducedUI, + isDistractionFree: settings.isDistractionFree, isInserterShown: insertionPoint?.__unstableWithInserter, }; }, [] ); @@ -177,7 +177,7 @@ function InsertionPointPopover( { }, }; - if ( hasReducedUI && ! isNavigationMode ) { + if ( isDistractionFree && ! isNavigationMode ) { return null; } diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js index a19dd0503d52f..cd2b5d8deed33 100644 --- a/packages/block-editor/src/components/block-tools/selected-block-popover.js +++ b/packages/block-editor/src/components/block-tools/selected-block-popover.js @@ -36,7 +36,7 @@ function selector( select ) { isMultiSelecting: isMultiSelecting(), isTyping: isTyping(), hasFixedToolbar: getSettings().hasFixedToolbar, - hasReducedUI: getSettings().hasReducedUI, + isDistractionFree: getSettings().isDistractionFree, lastClientId: hasMultiSelection() ? getLastMultiSelectedBlockClientId() : null, @@ -56,7 +56,7 @@ function SelectedBlockPopover( { isMultiSelecting, isTyping, hasFixedToolbar, - hasReducedUI, + isDistractionFree, lastClientId, } = useSelect( selector, [] ); const isInsertionPointVisible = useSelect( @@ -96,7 +96,7 @@ function SelectedBlockPopover( { editorMode === 'edit' && ! shouldShowContextualToolbar && ! hasFixedToolbar && - ! hasReducedUI && + ! isDistractionFree && ! isEmptyDefaultBlock; useShortcut( @@ -206,7 +206,7 @@ function wrapperSelector( select ) { clientId, rootClientId: getBlockRootClientId( clientId ), name, - hasReducedUI: settings.hasReducedUI, + isDistractionFree: settings.isDistractionFree, isNavigationMode: _isNavigationMode(), isEmptyDefaultBlock: name && isUnmodifiedDefaultBlock( { name, attributes } ), @@ -230,11 +230,11 @@ export default function WrappedBlockPopover( { name, isEmptyDefaultBlock, capturingClientId, - hasReducedUI, + isDistractionFree, isNavigationMode, } = selected; - if ( hasReducedUI && ! isNavigationMode ) { + if ( isDistractionFree && ! isNavigationMode ) { return null; } diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index b4ff13eb14227..6a7e72f4b1fd2 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -24,7 +24,7 @@ import MainDashboardButton from './main-dashboard-button'; import { store as editPostStore } from '../../store'; import TemplateTitle from './template-title'; -function Header( { setEntitiesSavedStatesCallback, hasReducedUI } ) { +function Header( { setEntitiesSavedStatesCallback, isDistractionFree } ) { const { hasActiveMetaboxes, isPublishSidebarOpened, @@ -47,12 +47,12 @@ function Header( { setEntitiesSavedStatesCallback, hasReducedUI } ) { const classes = classnames( 'edit-post-header' ); const slideY = { - hidden: hasReducedUI ? { y: '-50' } : { y: 0 }, + hidden: isDistractionFree ? { y: '-50' } : { y: 0 }, hover: { y: 0, transition: { type: 'tween', delay: 0.2 } }, }; const slideX = { - hidden: hasReducedUI ? { x: '-100%' } : { x: 0 }, + hidden: isDistractionFree ? { x: '-100%' } : { x: 0 }, hover: { x: 0, transition: { type: 'tween', delay: 0.2 } }, }; diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js index 28d82d3d6ef7b..4262d48f07a24 100644 --- a/packages/edit-post/src/components/header/writing-menu/index.js +++ b/packages/edit-post/src/components/header/writing-menu/index.js @@ -15,8 +15,9 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; import { store as postEditorStore } from '../../../store'; function WritingMenu( { onClose } ) { - const hasReducedUI = useSelect( - ( select ) => select( blockEditorStore ).getSettings().hasReducedUI, + const isDistractionFree = useSelect( + ( select ) => + select( blockEditorStore ).getSettings().isDistractionFree, [] ); @@ -39,7 +40,7 @@ function WritingMenu( { onClose } ) { { closeGeneralSidebar(); setIsListViewOpened( false ); - toggleFeature( 'reducedUI' ); - const modeState = isFeatureActive( 'reducedUI' ) + toggleFeature( 'distractionFree' ); + const modeState = isFeatureActive( 'distractionFree' ) ? __( 'on' ) : __( 'off' ); createInfoNotice( diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index eaed89cee05e2..e05ec9062ec5c 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -82,7 +82,7 @@ function Layout( { styles } ) { isInserterOpened, isListViewOpened, showIconLabels, - hasReducedUI, + isDistractionFree, showBlockBreadcrumbs, isTemplateMode, documentLabel, @@ -115,8 +115,8 @@ function Layout( { styles } ) { ).getAllShortcutKeyCombinations( 'core/edit-post/next-region' ), showIconLabels: select( editPostStore ).isFeatureActive( 'showIconLabels' ), - hasReducedUI: - select( editPostStore ).isFeatureActive( 'reducedUI' ), + isDistractionFree: + select( editPostStore ).isFeatureActive( 'distractionFree' ), showBlockBreadcrumbs: select( editPostStore ).isFeatureActive( 'showBlockBreadcrumbs' ), @@ -124,12 +124,12 @@ function Layout( { styles } ) { documentLabel: postTypeLabel || _x( 'Document', 'noun' ), }; }, [] ); - const [ isDistractionFree, setIsDistractionFree ] = - useState( hasReducedUI ); + const [ distractionFree, setDistractionFree ] = + useState( isDistractionFree ); useEffect( () => { - setIsDistractionFree( hasReducedUI ); - }, [ hasReducedUI ] ); + setDistractionFree( isDistractionFree ); + }, [ isDistractionFree ] ); const className = classnames( 'edit-post-layout', 'is-mode-' + mode, { 'is-sidebar-opened': sidebarIsOpened, @@ -207,7 +207,7 @@ function Layout( { styles } ) { } content={ <> - { ! hasReducedUI && } + { ! isDistractionFree && } { ( mode === 'text' || ! isRichEditingEnabled ) && ( ) } @@ -267,7 +267,7 @@ function Layout( { styles } ) { } footer={ - ! hasReducedUI && + ! isDistractionFree && showBlockBreadcrumbs && ! isMobileViewport && isRichEditingEnabled && diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index 604b4ebb4ef3b..5fbb93c8376dd 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -54,9 +54,9 @@ export default function EditPostPreferencesModal() { const { getEditorMode, isFeatureActive } = select( editPostStore ); const mode = getEditorMode(); const isRichEditingEnabled = getEditorSettings().richEditingEnabled; - const hasReducedUI = isFeatureActive( 'reducedUI' ); + const isDistractionFree = isFeatureActive( 'distractionFree' ); return ( - ! hasReducedUI && + ! isDistractionFree && isLargeViewport && isRichEditingEnabled && mode === 'visual' @@ -96,7 +96,7 @@ export default function EditPostPreferencesModal() { ) } > ) }
- { !! header && hasReducedUI && ( + { !! header && isDistractionFree && ( ) } - { !! header && ! hasReducedUI && ( + { !! header && ! isDistractionFree && (
) } - { hasReducedUI && ( + { isDistractionFree && (
{ editorNotices }
From cb4abb16d311b417efeb44cdd93eff78f61a8193 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 13 Sep 2022 19:49:49 +0300 Subject: [PATCH 11/29] Fixes the page jump in distraction free mode. Part of this bug but with a different cause exists in trunk as well. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Ella van Durpe <4710635+ellatrix@users.noreply.github.com> --- .../src/components/block-tools/selected-block-popover.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js index cd2b5d8deed33..44dd9b04b3135 100644 --- a/packages/block-editor/src/components/block-tools/selected-block-popover.js +++ b/packages/block-editor/src/components/block-tools/selected-block-popover.js @@ -47,6 +47,7 @@ function SelectedBlockPopover( { clientId, rootClientId, isEmptyDefaultBlock, + showContents, // we may need to mount an empty popover because we reuse capturingClientId, __unstablePopoverSlot, __unstableContentRef, @@ -139,7 +140,7 @@ function SelectedBlockPopover( { resize={ false } { ...popoverProps } > - { shouldShowContextualToolbar && ( + { shouldShowContextualToolbar && showContents && ( Date: Tue, 13 Sep 2022 23:25:51 +0300 Subject: [PATCH 12/29] Bulk adds the same distraction free mode toggle effects to: - toggle in the writing menu - the keyboard shortcut - the preference toggle Adds a new action to set a feature to a desired value. Some duplication, not sure how to DRY. --- .../data/data-core-edit-post.md | 9 +++++ .../components/header/writing-menu/index.js | 12 ++++--- .../components/keyboard-shortcuts/index.js | 16 +++++++++ .../src/components/preferences-modal/index.js | 35 ++++++++++++++----- .../options/enable-feature.js | 7 ++-- packages/edit-post/src/store/actions.js | 13 +++++++ 6 files changed, 78 insertions(+), 14 deletions(-) diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md index 26337e973bd34..60013e7779b35 100644 --- a/docs/reference-guides/data/data-core-edit-post.md +++ b/docs/reference-guides/data/data-core-edit-post.md @@ -440,6 +440,15 @@ _Parameters_ - _metaBoxesPerLocation_ `Object`: Meta boxes per location. +### setFeature + +Triggers an action used to set a feature flag to a desired state. + +_Parameters_ + +- _feature_ `string`: Feature name. +- _value_ `boolean`: Feature value + ### setIsEditingTemplate Returns an action object used to switch to template editing. diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js index 4262d48f07a24..c465e246376d9 100644 --- a/packages/edit-post/src/components/header/writing-menu/index.js +++ b/packages/edit-post/src/components/header/writing-menu/index.js @@ -21,10 +21,16 @@ function WritingMenu( { onClose } ) { [] ); - const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } = - useDispatch( postEditorStore ); + const { + setIsInserterOpened, + setIsListViewOpened, + closeGeneralSidebar, + setFeature, + } = useDispatch( postEditorStore ); const toggleDistractionFree = () => { + setFeature( 'inlineToolbar', ! isDistractionFree ); + setFeature( 'fixedToolbar', false ); setIsInserterOpened( false ); setIsListViewOpened( false ); closeGeneralSidebar(); @@ -51,7 +57,6 @@ function WritingMenu( { onClose } ) { /> + select( blockEditorStore ).getSettings().isDistractionFree, + [] + ); const { getEditorMode, isEditorSidebarOpened, @@ -39,9 +44,19 @@ function KeyboardShortcuts() { closeGeneralSidebar, toggleFeature, setIsListViewOpened, + setIsInserterOpened, + setFeature, } = useDispatch( editPostStore ); const { registerShortcut } = useDispatch( keyboardShortcutsStore ); + const toggleDistractionFree = () => { + setFeature( 'inlineToolbar', ! isDistractionFree ); + setFeature( 'fixedToolbar', false ); + setIsInserterOpened( false ); + setIsListViewOpened( false ); + closeGeneralSidebar(); + }; + useEffect( () => { registerShortcut( { name: 'core/edit-post/toggle-mode', @@ -155,6 +170,7 @@ function KeyboardShortcuts() { useShortcut( 'core/edit-post/toggle-distraction-free', () => { closeGeneralSidebar(); setIsListViewOpened( false ); + toggleDistractionFree(); toggleFeature( 'distractionFree' ); const modeState = isFeatureActive( 'distractionFree' ) ? __( 'on' ) diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index 5fbb93c8376dd..5e521f9d460b7 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -48,22 +48,40 @@ export default function EditPostPreferencesModal() { ( select ) => select( editPostStore ).isModalActive( MODAL_NAME ), [] ); - const showBlockBreadcrumbsOption = useSelect( + const [ showBlockBreadcrumbsOption, isDistractionFree ] = useSelect( ( select ) => { const { getEditorSettings } = select( editorStore ); const { getEditorMode, isFeatureActive } = select( editPostStore ); const mode = getEditorMode(); const isRichEditingEnabled = getEditorSettings().richEditingEnabled; - const isDistractionFree = isFeatureActive( 'distractionFree' ); - return ( - ! isDistractionFree && - isLargeViewport && - isRichEditingEnabled && - mode === 'visual' - ); + const isDistractionFreeEnabled = + isFeatureActive( 'distractionFree' ); + return [ + ! isDistractionFreeEnabled && + isLargeViewport && + isRichEditingEnabled && + mode === 'visual', + isDistractionFreeEnabled, + ]; }, [ isLargeViewport ] ); + + const { + closeGeneralSidebar, + setIsListViewOpened, + setIsInserterOpened, + setFeature, + } = useDispatch( editPostStore ); + + const toggleDistractionFree = () => { + setFeature( 'inlineToolbar', ! isDistractionFree ); + setFeature( 'fixedToolbar', false ); + setIsInserterOpened( false ); + setIsListViewOpened( false ); + closeGeneralSidebar(); + }; + const sections = useMemo( () => [ { @@ -97,6 +115,7 @@ export default function EditPostPreferencesModal() { > ( { - onChange: () => dispatch( editPostStore ).toggleFeature( featureName ), + withDispatch( ( dispatch, { featureName, onToggle = () => {} } ) => ( { + onChange: () => { + onToggle(); + dispatch( editPostStore ).toggleFeature( featureName ); + }, } ) ) )( BaseOption ); diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js index 5fb074f171aae..c58fc47f2cb4a 100644 --- a/packages/edit-post/src/store/actions.js +++ b/packages/edit-post/src/store/actions.js @@ -194,6 +194,19 @@ export const toggleFeature = .dispatch( preferencesStore ) .toggle( 'core/edit-post', feature ); +/** + * Triggers an action used to set a feature flag to a desired state. + * + * @param {string} feature Feature name. + * @param {boolean} value Feature value + */ +export const setFeature = + ( feature, value ) => + ( { registry } ) => + registry + .dispatch( preferencesStore ) + .set( 'core/edit-post', feature, value ); + /** * Triggers an action used to switch editor mode. * From 0eba2b6c9b6d960d3c57892e4cb1ffd87ab8e56f Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 14 Sep 2022 14:52:46 +0300 Subject: [PATCH 13/29] Removes "reduce UI" from the prefferences modal. Co-authored-by: Matias Ventura <548849+mtias@users.noreply.github.com> --- .../edit-post/src/components/preferences-modal/index.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index 5e521f9d460b7..25b525adf89b3 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -142,13 +142,6 @@ export default function EditPostPreferencesModal() { ) } label={ __( 'Always open list view' ) } /> - Date: Thu, 15 Sep 2022 17:35:18 +0300 Subject: [PATCH 14/29] adds back slash to allowed chars in shortcuts visual expression --- packages/keycodes/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/keycodes/src/index.js b/packages/keycodes/src/index.js index 12ba73acdbf7a..abfcb0ad31993 100644 --- a/packages/keycodes/src/index.js +++ b/packages/keycodes/src/index.js @@ -237,7 +237,7 @@ export const displayShortcutList = mapValues( modifiers, ( modifier ) => { // so override the rule to allow symbols used for shortcuts. // see: https://github.com/blakeembrey/change-case#options const capitalizedCharacter = capitalCase( character, { - stripRegexp: /[^A-Z0-9`,\.]/gi, + stripRegexp: /[^A-Z0-9`,\.\\]/gi, } ); return [ ...modifierKeys, capitalizedCharacter ]; From 8bb362de4a8165726b30e07821b466ae5d83a5e7 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 20 Sep 2022 17:08:35 +0300 Subject: [PATCH 15/29] fix snapshot and pref modal test --- .../test/__snapshots__/index.js.snap | 52 ++----------------- .../preferences-modal/test/index.js | 6 +-- 2 files changed, 6 insertions(+), 52 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap index aa0914a5e7bb8..95812a2828ea9 100644 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap @@ -437,7 +437,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active class="components-toggle-control__label" for="inspector-toggle-control-5" > - Reduce the interface + Use theme styles
@@ -445,7 +445,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active class="components-base-control__help emotion-6 emotion-7" id="inspector-toggle-control-5__help" > - Compacts options and outlines in the toolbar. + Make the editor look like your theme.

@@ -482,52 +482,6 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active -
-
-

- Make the editor look like your theme. -

-
-
-
-
-
-
- - - - - - @@ -535,7 +489,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active

Shows block breadcrumbs at the bottom of the editor.

diff --git a/packages/edit-post/src/components/preferences-modal/test/index.js b/packages/edit-post/src/components/preferences-modal/test/index.js index b2ab5ae2465cf..2b287d21459af 100644 --- a/packages/edit-post/src/components/preferences-modal/test/index.js +++ b/packages/edit-post/src/components/preferences-modal/test/index.js @@ -21,7 +21,7 @@ jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() ); describe( 'EditPostPreferencesModal', () => { describe( 'should match snapshot when the modal is active', () => { it( 'large viewports', () => { - useSelect.mockImplementation( () => true ); + useSelect.mockImplementation( () => [ true, false ] ); useViewportMatch.mockImplementation( () => true ); render( ); expect( @@ -29,7 +29,7 @@ describe( 'EditPostPreferencesModal', () => { ).toMatchSnapshot(); } ); it( 'small viewports', () => { - useSelect.mockImplementation( () => true ); + useSelect.mockImplementation( () => [ true, false ] ); useViewportMatch.mockImplementation( () => false ); render( ); expect( @@ -39,7 +39,7 @@ describe( 'EditPostPreferencesModal', () => { } ); it( 'should not render when the modal is not active', () => { - useSelect.mockImplementation( () => false ); + useSelect.mockImplementation( () => [ false, false ] ); render( ); expect( screen.queryByRole( 'dialog', { name: 'Preferences' } ) From dd72ac164bafb01b0817c796149c4c9907441bd1 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 21 Sep 2022 17:19:05 +0300 Subject: [PATCH 16/29] fix pref modal bug introduced by prev commit --- .../edit-post/src/components/preferences-modal/test/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/preferences-modal/test/index.js b/packages/edit-post/src/components/preferences-modal/test/index.js index 2b287d21459af..9c7479dc9421a 100644 --- a/packages/edit-post/src/components/preferences-modal/test/index.js +++ b/packages/edit-post/src/components/preferences-modal/test/index.js @@ -39,7 +39,7 @@ describe( 'EditPostPreferencesModal', () => { } ); it( 'should not render when the modal is not active', () => { - useSelect.mockImplementation( () => [ false, false ] ); + useSelect.mockImplementation( () => false ); render( ); expect( screen.queryByRole( 'dialog', { name: 'Preferences' } ) From 204058555fc2f43b58c6b633962f95a8839af749 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 21 Sep 2022 17:36:11 +0300 Subject: [PATCH 17/29] use only one useSelect for easier mock implementation --- .../src/components/preferences-modal/index.js | 46 ++++++++++--------- .../preferences-modal/test/index.js | 2 +- 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index 25b525adf89b3..0d3e886e48153 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -44,28 +44,30 @@ const MODAL_NAME = 'edit-post/preferences'; export default function EditPostPreferencesModal() { const isLargeViewport = useViewportMatch( 'medium' ); const { closeModal } = useDispatch( editPostStore ); - const isModalActive = useSelect( - ( select ) => select( editPostStore ).isModalActive( MODAL_NAME ), - [] - ); - const [ showBlockBreadcrumbsOption, isDistractionFree ] = useSelect( - ( select ) => { - const { getEditorSettings } = select( editorStore ); - const { getEditorMode, isFeatureActive } = select( editPostStore ); - const mode = getEditorMode(); - const isRichEditingEnabled = getEditorSettings().richEditingEnabled; - const isDistractionFreeEnabled = - isFeatureActive( 'distractionFree' ); - return [ - ! isDistractionFreeEnabled && - isLargeViewport && - isRichEditingEnabled && - mode === 'visual', - isDistractionFreeEnabled, - ]; - }, - [ isLargeViewport ] - ); + const [ showBlockBreadcrumbsOption, isDistractionFree, isModalActive ] = + useSelect( + ( select ) => { + const { getEditorSettings } = select( editorStore ); + const { getEditorMode, isFeatureActive } = + select( editPostStore ); + const modalActive = + select( editPostStore ).isModalActive( MODAL_NAME ); + const mode = getEditorMode(); + const isRichEditingEnabled = + getEditorSettings().richEditingEnabled; + const isDistractionFreeEnabled = + isFeatureActive( 'distractionFree' ); + return [ + ! isDistractionFreeEnabled && + isLargeViewport && + isRichEditingEnabled && + mode === 'visual', + isDistractionFreeEnabled, + modalActive, + ]; + }, + [ isLargeViewport ] + ); const { closeGeneralSidebar, diff --git a/packages/edit-post/src/components/preferences-modal/test/index.js b/packages/edit-post/src/components/preferences-modal/test/index.js index 9c7479dc9421a..92578a292442a 100644 --- a/packages/edit-post/src/components/preferences-modal/test/index.js +++ b/packages/edit-post/src/components/preferences-modal/test/index.js @@ -39,7 +39,7 @@ describe( 'EditPostPreferencesModal', () => { } ); it( 'should not render when the modal is not active', () => { - useSelect.mockImplementation( () => false ); + useSelect.mockImplementation( () => [ false, false, false ] ); render( ); expect( screen.queryByRole( 'dialog', { name: 'Preferences' } ) From ba0ee541d1da0f0a54bd190304189cdd1e5639c7 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 22 Sep 2022 19:18:24 +0300 Subject: [PATCH 18/29] adds correct order of mocked return values for useSelect --- packages/edit-post/src/components/preferences-modal/index.js | 2 +- .../edit-post/src/components/preferences-modal/test/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index 0d3e886e48153..686fe513125d0 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -44,7 +44,7 @@ const MODAL_NAME = 'edit-post/preferences'; export default function EditPostPreferencesModal() { const isLargeViewport = useViewportMatch( 'medium' ); const { closeModal } = useDispatch( editPostStore ); - const [ showBlockBreadcrumbsOption, isDistractionFree, isModalActive ] = + const [ isModalActive, showBlockBreadcrumbsOption, isDistractionFree ] = useSelect( ( select ) => { const { getEditorSettings } = select( editorStore ); diff --git a/packages/edit-post/src/components/preferences-modal/test/index.js b/packages/edit-post/src/components/preferences-modal/test/index.js index 92578a292442a..d1ff306488cb9 100644 --- a/packages/edit-post/src/components/preferences-modal/test/index.js +++ b/packages/edit-post/src/components/preferences-modal/test/index.js @@ -21,7 +21,7 @@ jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() ); describe( 'EditPostPreferencesModal', () => { describe( 'should match snapshot when the modal is active', () => { it( 'large viewports', () => { - useSelect.mockImplementation( () => [ true, false ] ); + useSelect.mockImplementation( () => [ true, true, false ] ); useViewportMatch.mockImplementation( () => true ); render( ); expect( @@ -29,7 +29,7 @@ describe( 'EditPostPreferencesModal', () => { ).toMatchSnapshot(); } ); it( 'small viewports', () => { - useSelect.mockImplementation( () => [ true, false ] ); + useSelect.mockImplementation( () => [ true, true, false ] ); useViewportMatch.mockImplementation( () => false ); render( ); expect( From a850fb596ec2d91c46eb3fbc9990736b94c24bcd Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 22 Sep 2022 19:37:36 +0300 Subject: [PATCH 19/29] fix order of flags in the prefferences modal --- packages/edit-post/src/components/preferences-modal/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index 686fe513125d0..b991a30ebec8b 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -58,12 +58,12 @@ export default function EditPostPreferencesModal() { const isDistractionFreeEnabled = isFeatureActive( 'distractionFree' ); return [ + modalActive, ! isDistractionFreeEnabled && isLargeViewport && isRichEditingEnabled && mode === 'visual', isDistractionFreeEnabled, - modalActive, ]; }, [ isLargeViewport ] From 02f7e70e3f493d3e785c64091f6669864f43d84b Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 22 Sep 2022 20:33:26 +0300 Subject: [PATCH 20/29] Moves focus on distraction free toggle to first block via block selection. Unclear what to do when there is not a post edited by a block editor, but one where the flow of the block list is not linear. Co-authored-by: Alex Stine <13755480+alexstine@users.noreply.github.com> --- .../src/components/header/writing-menu/index.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js index c465e246376d9..8239fb85015a8 100644 --- a/packages/edit-post/src/components/header/writing-menu/index.js +++ b/packages/edit-post/src/components/header/writing-menu/index.js @@ -21,6 +21,11 @@ function WritingMenu( { onClose } ) { [] ); + const blocks = useSelect( + ( select ) => select( blockEditorStore ).getBlocks(), + [] + ); + const { setIsInserterOpened, setIsListViewOpened, @@ -28,6 +33,8 @@ function WritingMenu( { onClose } ) { setFeature, } = useDispatch( postEditorStore ); + const { selectBlock } = useDispatch( blockEditorStore ); + const toggleDistractionFree = () => { setFeature( 'inlineToolbar', ! isDistractionFree ); setFeature( 'fixedToolbar', false ); @@ -35,6 +42,9 @@ function WritingMenu( { onClose } ) { setIsListViewOpened( false ); closeGeneralSidebar(); onClose(); + if ( ! isDistractionFree ) { + selectBlock( blocks[ 0 ].clientId ); + } }; const isLargeViewport = useViewportMatch( 'medium' ); From a517c5f87948a823096a692244d49b58f821b104 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Wed, 5 Oct 2022 10:43:17 +0200 Subject: [PATCH 21/29] Remove double border in header and add subtle backdrop transparency. --- packages/edit-post/src/components/header/style.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 92292c3bf182a..e8689c5d6808e 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -32,10 +32,15 @@ } .is-distraction-free { + .interface-interface-skeleton__header { + border-bottom: none; + } + .edit-post-header { position: absolute; width: 100%; - background-color: rgba(255, 255, 255, 1); + background-color: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(20px) !important; border-bottom: 1px solid #e0e0e0; From 4ad943375366a62f99c3aca3e4718c89ca860822 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Wed, 5 Oct 2022 10:51:23 +0200 Subject: [PATCH 22/29] Let's not use "Toggle interface" as a name. --- .../edit-post/src/components/header/writing-menu/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js index 8239fb85015a8..563371395cab5 100644 --- a/packages/edit-post/src/components/header/writing-menu/index.js +++ b/packages/edit-post/src/components/header/writing-menu/index.js @@ -86,8 +86,8 @@ function WritingMenu( { onClose } ) { scope="core/edit-post" name="distractionFree" toggleHandler={ toggleDistractionFree } - label={ __( 'Toggle interface' ) } - info={ __( 'Work without distraction' ) } + label={ __( 'Distraction free' ) } + info={ __( 'Write with calmness' ) } messageActivated={ __( 'Distraction free mode activated' ) } messageDeactivated={ __( 'Distraction free mode deactivated' ) } shortcut={ displayShortcut.primaryShift( '\\' ) } From 20307d62d9a0c77ebc6e313d7b80c22e1fbcd883 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 5 Oct 2022 15:48:13 +0300 Subject: [PATCH 23/29] Removes the inline toolbar in distraction free mode. For those who have tested this PR run this in console to unset the preference, which is not otherwise visible anywhere: ``` wp.data.dispatch( 'core/preferences' ).set('core/edit-post', 'inlineToolbar', false); ``` Co-authored-by: Matias Ventura <548849+mtias@users.noreply.github.com> --- .../components/header/writing-menu/index.js | 1 - .../components/keyboard-shortcuts/index.js | 6 --- .../src/components/preferences-modal/index.js | 46 +++++++++---------- 3 files changed, 21 insertions(+), 32 deletions(-) diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js index 563371395cab5..d0a599139d390 100644 --- a/packages/edit-post/src/components/header/writing-menu/index.js +++ b/packages/edit-post/src/components/header/writing-menu/index.js @@ -36,7 +36,6 @@ function WritingMenu( { onClose } ) { const { selectBlock } = useDispatch( blockEditorStore ); const toggleDistractionFree = () => { - setFeature( 'inlineToolbar', ! isDistractionFree ); setFeature( 'fixedToolbar', false ); setIsInserterOpened( false ); setIsListViewOpened( false ); diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js index 265a3c080204d..e4f708fa43a01 100644 --- a/packages/edit-post/src/components/keyboard-shortcuts/index.js +++ b/packages/edit-post/src/components/keyboard-shortcuts/index.js @@ -19,11 +19,6 @@ import { store as editPostStore } from '../../store'; function KeyboardShortcuts() { const { getBlockSelectionStart } = useSelect( blockEditorStore ); - const isDistractionFree = useSelect( - ( select ) => - select( blockEditorStore ).getSettings().isDistractionFree, - [] - ); const { getEditorMode, isEditorSidebarOpened, @@ -50,7 +45,6 @@ function KeyboardShortcuts() { const { registerShortcut } = useDispatch( keyboardShortcutsStore ); const toggleDistractionFree = () => { - setFeature( 'inlineToolbar', ! isDistractionFree ); setFeature( 'fixedToolbar', false ); setIsInserterOpened( false ); setIsListViewOpened( false ); diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index b991a30ebec8b..a1fa59c328783 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -44,30 +44,27 @@ const MODAL_NAME = 'edit-post/preferences'; export default function EditPostPreferencesModal() { const isLargeViewport = useViewportMatch( 'medium' ); const { closeModal } = useDispatch( editPostStore ); - const [ isModalActive, showBlockBreadcrumbsOption, isDistractionFree ] = - useSelect( - ( select ) => { - const { getEditorSettings } = select( editorStore ); - const { getEditorMode, isFeatureActive } = - select( editPostStore ); - const modalActive = - select( editPostStore ).isModalActive( MODAL_NAME ); - const mode = getEditorMode(); - const isRichEditingEnabled = - getEditorSettings().richEditingEnabled; - const isDistractionFreeEnabled = - isFeatureActive( 'distractionFree' ); - return [ - modalActive, - ! isDistractionFreeEnabled && - isLargeViewport && - isRichEditingEnabled && - mode === 'visual', - isDistractionFreeEnabled, - ]; - }, - [ isLargeViewport ] - ); + const [ isModalActive, showBlockBreadcrumbsOption ] = useSelect( + ( select ) => { + const { getEditorSettings } = select( editorStore ); + const { getEditorMode, isFeatureActive } = select( editPostStore ); + const modalActive = + select( editPostStore ).isModalActive( MODAL_NAME ); + const mode = getEditorMode(); + const isRichEditingEnabled = getEditorSettings().richEditingEnabled; + const isDistractionFreeEnabled = + isFeatureActive( 'distractionFree' ); + return [ + modalActive, + ! isDistractionFreeEnabled && + isLargeViewport && + isRichEditingEnabled && + mode === 'visual', + isDistractionFreeEnabled, + ]; + }, + [ isLargeViewport ] + ); const { closeGeneralSidebar, @@ -77,7 +74,6 @@ export default function EditPostPreferencesModal() { } = useDispatch( editPostStore ); const toggleDistractionFree = () => { - setFeature( 'inlineToolbar', ! isDistractionFree ); setFeature( 'fixedToolbar', false ); setIsInserterOpened( false ); setIsListViewOpened( false ); From c80614fe58deddd34869cbd94513b180c996f834 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 5 Oct 2022 16:14:49 +0300 Subject: [PATCH 24/29] Adds the mode selector, undo, redo and doc stats back to the toolbar. Co-authored-by: Matias Ventura <548849+mtias@users.noreply.github.com> --- packages/edit-post/src/components/header/style.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index e8689c5d6808e..8617e9df32228 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -45,11 +45,15 @@ // hide some parts - & > .edit-post-header__settings > .editor-post-preview, - & > .edit-post-header__toolbar { + & > .edit-post-header__settings > .editor-post-preview { visibility: hidden; } + & > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle, + & > .edit-post-header__toolbar .edit-post-header-toolbar__list-view-toggle { + display: none; + } + & > .edit-post-header__settings > .block-editor-post-preview__dropdown { display: none; } From a99c1107404297f3339c6f7adb96d725d76a16d7 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 5 Oct 2022 16:34:17 +0300 Subject: [PATCH 25/29] creates the distraction free experiment --- lib/experimental/editor-settings.php | 12 +++++++ lib/experiments-page.php | 11 ++++++ .../components/header/writing-menu/index.js | 27 +++++++++------ .../components/keyboard-shortcuts/index.js | 34 +++++++++++-------- .../src/components/preferences-modal/index.js | 21 +++++++----- 5 files changed, 72 insertions(+), 33 deletions(-) diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index 2b46a401d4b0e..70bafcca736eb 100644 --- a/lib/experimental/editor-settings.php +++ b/lib/experimental/editor-settings.php @@ -83,3 +83,15 @@ function gutenberg_enable_zoomed_out_view() { } add_action( 'admin_init', 'gutenberg_enable_zoomed_out_view' ); + +/** + * Sets a global JS variable used to trigger the availability of distraction free mode. + */ +function gutenberg_enable_distraction_free_mode() { + $gutenberg_experiments = get_option( 'gutenberg-experiments' ); + if ( $gutenberg_experiments && array_key_exists( 'gutenberg-distraction-free-mode', $gutenberg_experiments ) ) { + wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableDistractionFreeMode = true', 'before' ); + } +} + +add_action( 'admin_init', 'gutenberg_enable_distraction_free_mode' ); diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 3d09f05bd655c..6017ae396a501 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -52,6 +52,17 @@ function gutenberg_initialize_experiments_settings() { 'id' => 'gutenberg-zoomed-out-view', ) ); + add_settings_field( + 'gutenberg-distraction-free-mode', + __( 'Distraction free mode ', 'gutenberg' ), + 'gutenberg_display_experiment_field', + 'gutenberg-experiments', + 'gutenberg_experiments_section', + array( + 'label' => __( 'Test a new distraction free mode in the post editor.', 'gutenberg' ), + 'id' => 'gutenberg-distraction-free-mode', + ) + ); register_setting( 'gutenberg-experiments', 'gutenberg-experiments' diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js index d0a599139d390..d83f76248f33f 100644 --- a/packages/edit-post/src/components/header/writing-menu/index.js +++ b/packages/edit-post/src/components/header/writing-menu/index.js @@ -51,6 +51,9 @@ function WritingMenu( { onClose } ) { return null; } + const isDistractionFreeModeExperimentEnabled = + window?.__experimentalEnableDistractionFreeMode; + return ( - + { isDistractionFreeModeExperimentEnabled && ( + + ) } ); } diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js index e4f708fa43a01..fafa586698c0a 100644 --- a/packages/edit-post/src/components/keyboard-shortcuts/index.js +++ b/packages/edit-post/src/components/keyboard-shortcuts/index.js @@ -162,21 +162,25 @@ function KeyboardShortcuts() { } ); useShortcut( 'core/edit-post/toggle-distraction-free', () => { - closeGeneralSidebar(); - setIsListViewOpened( false ); - toggleDistractionFree(); - toggleFeature( 'distractionFree' ); - const modeState = isFeatureActive( 'distractionFree' ) - ? __( 'on' ) - : __( 'off' ); - createInfoNotice( - // translators: Mode of distraction free can be 'on' or 'off'; - sprintf( __( 'Distraction free mode turned %s.' ), modeState ), - { - speak: true, - type: 'snackbar', - } - ); + const isDistractionFreeModeExperimentEnabled = + window?.__experimentalEnableDistractionFreeMode; + if ( isDistractionFreeModeExperimentEnabled ) { + closeGeneralSidebar(); + setIsListViewOpened( false ); + toggleDistractionFree(); + toggleFeature( 'distractionFree' ); + const modeState = isFeatureActive( 'distractionFree' ) + ? __( 'on' ) + : __( 'off' ); + createInfoNotice( + // translators: Mode of distraction free can be 'on' or 'off'; + sprintf( __( 'Distraction free mode turned %s.' ), modeState ), + { + speak: true, + type: 'snackbar', + } + ); + } } ); useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => { diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index a1fa59c328783..90084b2c43851 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -80,6 +80,9 @@ export default function EditPostPreferencesModal() { closeGeneralSidebar(); }; + const isDistractionFreeModeExperimentEnabled = + window?.__experimentalEnableDistractionFreeMode; + const sections = useMemo( () => [ { @@ -111,14 +114,16 @@ export default function EditPostPreferencesModal() { 'Customize options related to the block editor interface and editing flow.' ) } > - + { isDistractionFreeModeExperimentEnabled && ( + + ) } Date: Wed, 5 Oct 2022 17:57:22 +0300 Subject: [PATCH 26/29] Revert "creates the distraction free experiment" This reverts commit 4565b66ea427475a58ec74a98b01fb52c56be47d. --- lib/experimental/editor-settings.php | 12 ------- lib/experiments-page.php | 11 ------ .../components/header/writing-menu/index.js | 27 ++++++--------- .../components/keyboard-shortcuts/index.js | 34 ++++++++----------- .../src/components/preferences-modal/index.js | 21 +++++------- 5 files changed, 33 insertions(+), 72 deletions(-) diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index 70bafcca736eb..2b46a401d4b0e 100644 --- a/lib/experimental/editor-settings.php +++ b/lib/experimental/editor-settings.php @@ -83,15 +83,3 @@ function gutenberg_enable_zoomed_out_view() { } add_action( 'admin_init', 'gutenberg_enable_zoomed_out_view' ); - -/** - * Sets a global JS variable used to trigger the availability of distraction free mode. - */ -function gutenberg_enable_distraction_free_mode() { - $gutenberg_experiments = get_option( 'gutenberg-experiments' ); - if ( $gutenberg_experiments && array_key_exists( 'gutenberg-distraction-free-mode', $gutenberg_experiments ) ) { - wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableDistractionFreeMode = true', 'before' ); - } -} - -add_action( 'admin_init', 'gutenberg_enable_distraction_free_mode' ); diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 6017ae396a501..3d09f05bd655c 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -52,17 +52,6 @@ function gutenberg_initialize_experiments_settings() { 'id' => 'gutenberg-zoomed-out-view', ) ); - add_settings_field( - 'gutenberg-distraction-free-mode', - __( 'Distraction free mode ', 'gutenberg' ), - 'gutenberg_display_experiment_field', - 'gutenberg-experiments', - 'gutenberg_experiments_section', - array( - 'label' => __( 'Test a new distraction free mode in the post editor.', 'gutenberg' ), - 'id' => 'gutenberg-distraction-free-mode', - ) - ); register_setting( 'gutenberg-experiments', 'gutenberg-experiments' diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js index d83f76248f33f..d0a599139d390 100644 --- a/packages/edit-post/src/components/header/writing-menu/index.js +++ b/packages/edit-post/src/components/header/writing-menu/index.js @@ -51,9 +51,6 @@ function WritingMenu( { onClose } ) { return null; } - const isDistractionFreeModeExperimentEnabled = - window?.__experimentalEnableDistractionFreeMode; - return ( - { isDistractionFreeModeExperimentEnabled && ( - - ) } + ); } diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js index fafa586698c0a..e4f708fa43a01 100644 --- a/packages/edit-post/src/components/keyboard-shortcuts/index.js +++ b/packages/edit-post/src/components/keyboard-shortcuts/index.js @@ -162,25 +162,21 @@ function KeyboardShortcuts() { } ); useShortcut( 'core/edit-post/toggle-distraction-free', () => { - const isDistractionFreeModeExperimentEnabled = - window?.__experimentalEnableDistractionFreeMode; - if ( isDistractionFreeModeExperimentEnabled ) { - closeGeneralSidebar(); - setIsListViewOpened( false ); - toggleDistractionFree(); - toggleFeature( 'distractionFree' ); - const modeState = isFeatureActive( 'distractionFree' ) - ? __( 'on' ) - : __( 'off' ); - createInfoNotice( - // translators: Mode of distraction free can be 'on' or 'off'; - sprintf( __( 'Distraction free mode turned %s.' ), modeState ), - { - speak: true, - type: 'snackbar', - } - ); - } + closeGeneralSidebar(); + setIsListViewOpened( false ); + toggleDistractionFree(); + toggleFeature( 'distractionFree' ); + const modeState = isFeatureActive( 'distractionFree' ) + ? __( 'on' ) + : __( 'off' ); + createInfoNotice( + // translators: Mode of distraction free can be 'on' or 'off'; + sprintf( __( 'Distraction free mode turned %s.' ), modeState ), + { + speak: true, + type: 'snackbar', + } + ); } ); useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => { diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index 90084b2c43851..a1fa59c328783 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -80,9 +80,6 @@ export default function EditPostPreferencesModal() { closeGeneralSidebar(); }; - const isDistractionFreeModeExperimentEnabled = - window?.__experimentalEnableDistractionFreeMode; - const sections = useMemo( () => [ { @@ -114,16 +111,14 @@ export default function EditPostPreferencesModal() { 'Customize options related to the block editor interface and editing flow.' ) } > - { isDistractionFreeModeExperimentEnabled && ( - - ) } + Date: Thu, 6 Oct 2022 12:28:57 +0300 Subject: [PATCH 27/29] Combines two css rules into one. Co-authored-by: Matias Ventura <548849+mtias@users.noreply.github.com> --- packages/edit-post/src/components/header/style.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 8617e9df32228..10a7d7ad259f6 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -54,13 +54,11 @@ display: none; } - & > .edit-post-header__settings > .block-editor-post-preview__dropdown { - display: none; - } - + & > .edit-post-header__settings > .block-editor-post-preview__dropdown, & > .edit-post-header__settings > .interface-pinned-items { display: none; } + } // we need ! important because we override inline styles From 9c416dee2c3af689b9ecb6b28034247df0729525 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 10 Oct 2022 13:31:15 +0300 Subject: [PATCH 28/29] Undo a new public API `setFeature` in the prefferences package. Use the store directly instead. Co-authored-by: Daniel Richards <677833+talldan@users.noreply.github.com> --- .../reference-guides/data/data-core-edit-post.md | 9 --------- .../src/components/header/writing-menu/index.js | 16 ++++++++-------- .../src/components/keyboard-shortcuts/index.js | 6 ++++-- .../src/components/preferences-modal/index.js | 13 ++++++------- packages/edit-post/src/store/actions.js | 13 ------------- 5 files changed, 18 insertions(+), 39 deletions(-) diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md index 60013e7779b35..26337e973bd34 100644 --- a/docs/reference-guides/data/data-core-edit-post.md +++ b/docs/reference-guides/data/data-core-edit-post.md @@ -440,15 +440,6 @@ _Parameters_ - _metaBoxesPerLocation_ `Object`: Meta boxes per location. -### setFeature - -Triggers an action used to set a feature flag to a desired state. - -_Parameters_ - -- _feature_ `string`: Feature name. -- _value_ `boolean`: Feature value - ### setIsEditingTemplate Returns an action object used to switch to template editing. diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js index d0a599139d390..3d6c3e75a16ea 100644 --- a/packages/edit-post/src/components/header/writing-menu/index.js +++ b/packages/edit-post/src/components/header/writing-menu/index.js @@ -6,7 +6,10 @@ import { MenuGroup } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import { useViewportMatch } from '@wordpress/compose'; import { displayShortcut } from '@wordpress/keycodes'; -import { PreferenceToggleMenuItem } from '@wordpress/preferences'; +import { + PreferenceToggleMenuItem, + store as preferencesStore, +} from '@wordpress/preferences'; import { store as blockEditorStore } from '@wordpress/block-editor'; /** @@ -26,17 +29,14 @@ function WritingMenu( { onClose } ) { [] ); - const { - setIsInserterOpened, - setIsListViewOpened, - closeGeneralSidebar, - setFeature, - } = useDispatch( postEditorStore ); + const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } = + useDispatch( postEditorStore ); + const { set: setPreference } = useDispatch( preferencesStore ); const { selectBlock } = useDispatch( blockEditorStore ); const toggleDistractionFree = () => { - setFeature( 'fixedToolbar', false ); + setPreference( 'core/edit-post', 'fixedToolbar', false ); setIsInserterOpened( false ); setIsListViewOpened( false ); closeGeneralSidebar(); diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js index e4f708fa43a01..19aa1990f8f48 100644 --- a/packages/edit-post/src/components/keyboard-shortcuts/index.js +++ b/packages/edit-post/src/components/keyboard-shortcuts/index.js @@ -11,6 +11,7 @@ import { __, sprintf } from '@wordpress/i18n'; import { store as editorStore } from '@wordpress/editor'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { store as noticesStore } from '@wordpress/notices'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -40,12 +41,13 @@ function KeyboardShortcuts() { toggleFeature, setIsListViewOpened, setIsInserterOpened, - setFeature, } = useDispatch( editPostStore ); const { registerShortcut } = useDispatch( keyboardShortcutsStore ); + const { set: setPreference } = useDispatch( preferencesStore ); + const toggleDistractionFree = () => { - setFeature( 'fixedToolbar', false ); + setPreference( 'core/edit-post', 'fixedToolbar', false ); setIsInserterOpened( false ); setIsListViewOpened( false ); closeGeneralSidebar(); diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index a1fa59c328783..8bba0691261a6 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -24,6 +24,7 @@ import { PreferencesModalTabs, PreferencesModalSection, } from '@wordpress/interface'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -66,15 +67,13 @@ export default function EditPostPreferencesModal() { [ isLargeViewport ] ); - const { - closeGeneralSidebar, - setIsListViewOpened, - setIsInserterOpened, - setFeature, - } = useDispatch( editPostStore ); + const { closeGeneralSidebar, setIsListViewOpened, setIsInserterOpened } = + useDispatch( editPostStore ); + + const { set: setPreference } = useDispatch( preferencesStore ); const toggleDistractionFree = () => { - setFeature( 'fixedToolbar', false ); + setPreference( 'core/edit-post', 'fixedToolbar', false ); setIsInserterOpened( false ); setIsListViewOpened( false ); closeGeneralSidebar(); diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js index c58fc47f2cb4a..5fb074f171aae 100644 --- a/packages/edit-post/src/store/actions.js +++ b/packages/edit-post/src/store/actions.js @@ -194,19 +194,6 @@ export const toggleFeature = .dispatch( preferencesStore ) .toggle( 'core/edit-post', feature ); -/** - * Triggers an action used to set a feature flag to a desired state. - * - * @param {string} feature Feature name. - * @param {boolean} value Feature value - */ -export const setFeature = - ( feature, value ) => - ( { registry } ) => - registry - .dispatch( preferencesStore ) - .set( 'core/edit-post', feature, value ); - /** * Triggers an action used to switch editor mode. * From 7254689cb54e5ea21aa31197f514f4b6a43304ef Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 10 Oct 2022 14:32:46 +0300 Subject: [PATCH 29/29] Fixes small nits in code. Co-authored-by: Ben Dwyer <275961+scruffian@users.noreply.github.com> --- .../src/components/header/style.scss | 91 +++++++++---------- 1 file changed, 44 insertions(+), 47 deletions(-) diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 10a7d7ad259f6..1228688f25709 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -31,53 +31,6 @@ } } -.is-distraction-free { - .interface-interface-skeleton__header { - border-bottom: none; - } - - .edit-post-header { - position: absolute; - width: 100%; - background-color: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(20px) !important; - border-bottom: 1px solid #e0e0e0; - - - // hide some parts - & > .edit-post-header__settings > .editor-post-preview { - visibility: hidden; - } - - & > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle, - & > .edit-post-header__toolbar .edit-post-header-toolbar__list-view-toggle { - display: none; - } - - & > .edit-post-header__settings > .block-editor-post-preview__dropdown, - & > .edit-post-header__settings > .interface-pinned-items { - display: none; - } - - } - - // we need ! important because we override inline styles - // set by the motion component - .interface-interface-skeleton__header:focus-within { - opacity: 1 !important; - div { - transform: translateX(0) translateZ(0) !important; - } - - } - - .components-editor-notices__dismissible { - position: absolute; - z-index: 35; - } - -} - .edit-post-header__toolbar { display: flex; flex-grow: 1; @@ -247,3 +200,47 @@ } } } + +.is-distraction-free { + .interface-interface-skeleton__header { + border-bottom: none; + } + + .edit-post-header { + backdrop-filter: blur(20px) !important; + background-color: rgba(255, 255, 255, 0.9); + border-bottom: 1px solid #e0e0e0; + position: absolute; + width: 100%; + + + // hide some parts + & > .edit-post-header__settings > .editor-post-preview { + visibility: hidden; + } + + & > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle, + & > .edit-post-header__toolbar .edit-post-header-toolbar__list-view-toggle, + & > .edit-post-header__settings > .block-editor-post-preview__dropdown, + & > .edit-post-header__settings > .interface-pinned-items { + display: none; + } + + } + + // We need ! important because we override inline styles + // set by the motion component. + .interface-interface-skeleton__header:focus-within { + opacity: 1 !important; + div { + transform: translateX(0) translateZ(0) !important; + } + + } + + .components-editor-notices__dismissible { + position: absolute; + z-index: 35; + } + +}