Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Introduce distraction free mode #41740

Merged
merged 29 commits into from
Oct 10, 2022
Merged

Introduce distraction free mode #41740

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
0d7b629
enhances the effect of the reduceUI preference
draganescu Sep 9, 2022
9d8cfeb
snapshot update
draganescu Sep 10, 2022
586edc7
remove useless prop
draganescu Sep 10, 2022
1f2913b
Adds framer motion animation to header elements in distraction free m…
draganescu Sep 10, 2022
c45670b
Adjusts the bottom distance of snackbars for distraction free mode.
draganescu Sep 10, 2022
a025d28
Deals with editor notices:
draganescu Sep 10, 2022
bec61bc
Limits notices in interface header only when distraction free mode is…
draganescu Sep 12, 2022
d5318cb
Handles toolbar focus in distraction free mode:
draganescu Sep 12, 2022
afc4227
Removes wrong visual margin artefact for notifications in DFM
draganescu Sep 13, 2022
615fc49
refactores reducedUI to distractionFree and hasReducedUI to isDistrac…
draganescu Sep 13, 2022
cb4abb1
Fixes the page jump in distraction free mode.
draganescu Sep 13, 2022
b97bbc1
Bulk adds the same distraction free mode toggle effects to:
draganescu Sep 13, 2022
0eba2b6
Removes "reduce UI" from the prefferences modal.
draganescu Sep 14, 2022
2acbd55
adds back slash to allowed chars in shortcuts visual expression
draganescu Sep 15, 2022
8bb362d
fix snapshot and pref modal test
draganescu Sep 20, 2022
dd72ac1
fix pref modal bug introduced by prev commit
draganescu Sep 21, 2022
2040585
use only one useSelect for easier mock implementation
draganescu Sep 21, 2022
ba0ee54
adds correct order of mocked return values for useSelect
draganescu Sep 22, 2022
a850fb5
fix order of flags in the prefferences modal
draganescu Sep 22, 2022
02f7e70
Moves focus on distraction free toggle to first block via block selec…
draganescu Sep 22, 2022
a517c5f
Remove double border in header and add subtle backdrop transparency.
mtias Oct 5, 2022
4ad9433
Let's not use "Toggle interface" as a name.
mtias Oct 5, 2022
20307d6
Removes the inline toolbar in distraction free mode.
draganescu Oct 5, 2022
c80614f
Adds the mode selector, undo, redo and doc stats back to the toolbar.
draganescu Oct 5, 2022
a99c110
creates the distraction free experiment
draganescu Oct 5, 2022
e35b6d5
Revert "creates the distraction free experiment"
draganescu Oct 5, 2022
7d4bf9e
Combines two css rules into one.
draganescu Oct 6, 2022
9c416de
Undo a new public API `setFeature` in the prefferences package.
draganescu Oct 10, 2022
7254689
Fixes small nits in code.
draganescu Oct 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/use-in-between-inserter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export function useInBetweenInserter() {
const openRef = useContext( InsertionPointOpenRef );
const isInBetweenInserterDisabled = useSelect(
( select ) =>
select( blockEditorStore ).getSettings().hasReducedUI ||
select( blockEditorStore ).getSettings().isDistractionFree ||
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
[]
);
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-parent-selector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -46,7 +46,7 @@ export default function BlockParentSelector() {
'__experimentalParentSelector',
true
),
hasReducedUI: settings.hasReducedUI,
isDistractionFree: settings.isDistractionFree,
};
},
[]
Expand All @@ -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 );
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export function BlockSettingsDropdown( {
const firstBlockClientId = blockClientIds[ 0 ];
const {
firstParentClientId,
hasReducedUI,
isDistractionFree,
onlyBlock,
parentBlockType,
previousBlockClientId,
Expand All @@ -83,7 +83,7 @@ export function BlockSettingsDropdown( {

return {
firstParentClientId: _firstParentClientId,
hasReducedUI: getSettings().hasReducedUI,
isDistractionFree: getSettings().isDistractionFree,
onlyBlock: 1 === getBlockCount(),
parentBlockType: getBlockType( parentBlockName ),
previousBlockClientId:
Expand Down Expand Up @@ -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 );
Expand Down
10 changes: 4 additions & 6 deletions packages/block-editor/src/components/block-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
blockClientId,
blockType,
hasFixedToolbar,
hasReducedUI,
isDistractionFree,
isValid,
isVisual,
isContentLocked,
Expand All @@ -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 )
Expand All @@ -82,7 +82,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
{
ref: nodeRef,
onChange( isFocused ) {
if ( isFocused && hasReducedUI ) {
if ( isFocused && isDistractionFree ) {
return;
}
toggleBlockHighlight( blockClientId, isFocused );
Expand Down Expand Up @@ -132,9 +132,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
) }
<BlockMover
clientIds={ blockClientIds }
hideDragHandle={
hideDragHandle || hasReducedUI
}
hideDragHandle={ hideDragHandle }
/>
</ToolbarGroup>
) }
Expand Down
12 changes: 12 additions & 0 deletions packages/block-editor/src/components/block-tools/insertion-point.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ function InsertionPointPopover( {
nextClientId,
rootClientId,
isInserterShown,
isDistractionFree,
isNavigationMode,
} = useSelect( ( select ) => {
const {
getBlockOrder,
Expand All @@ -41,6 +43,8 @@ function InsertionPointPopover( {
isBlockBeingDragged,
getPreviousBlockClientId,
getNextBlockClientId,
getSettings,
isNavigationMode: _isNavigationMode,
} = select( blockEditorStore );
const insertionPoint = getBlockInsertionPoint();
const order = getBlockOrder( insertionPoint.rootClientId );
Expand All @@ -60,13 +64,17 @@ function InsertionPointPopover( {
_nextClientId = getNextBlockClientId( _nextClientId );
}

const settings = getSettings();

return {
previousClientId: _previousClientId,
nextClientId: _nextClientId,
orientation:
getBlockListSettings( insertionPoint.rootClientId )
?.orientation || 'vertical',
rootClientId: insertionPoint.rootClientId,
isNavigationMode: _isNavigationMode(),
isDistractionFree: settings.isDistractionFree,
isInserterShown: insertionPoint?.__unstableWithInserter,
};
}, [] );
Expand Down Expand Up @@ -169,6 +177,10 @@ function InsertionPointPopover( {
},
};

if ( isDistractionFree && ! isNavigationMode ) {
return null;
}

const className = classnames(
'block-editor-block-list__insertion-point',
'is-' + orientation
Expand Down
15 changes: 14 additions & 1 deletion packages/block-editor/src/components/block-tools/selected-block-popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ function selector( select ) {
isMultiSelecting: isMultiSelecting(),
isTyping: isTyping(),
hasFixedToolbar: getSettings().hasFixedToolbar,
isDistractionFree: getSettings().isDistractionFree,
lastClientId: hasMultiSelection()
? getLastMultiSelectedBlockClientId()
: null,
Expand All @@ -46,6 +47,7 @@ function SelectedBlockPopover( {
clientId,
rootClientId,
isEmptyDefaultBlock,
showContents, // we may need to mount an empty popover because we reuse
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
showContents, // we may need to mount an empty popover because we reuse
showContents, // We may need to mount an empty popover because we reuse.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We reuse what?

capturingClientId,
__unstablePopoverSlot,
__unstableContentRef,
Expand All @@ -55,6 +57,7 @@ function SelectedBlockPopover( {
isMultiSelecting,
isTyping,
hasFixedToolbar,
isDistractionFree,
lastClientId,
} = useSelect( selector, [] );
const isInsertionPointVisible = useSelect(
Expand Down Expand Up @@ -94,6 +97,7 @@ function SelectedBlockPopover( {
editorMode === 'edit' &&
! shouldShowContextualToolbar &&
! hasFixedToolbar &&
! isDistractionFree &&
! isEmptyDefaultBlock;

useShortcut(
Expand Down Expand Up @@ -136,7 +140,7 @@ function SelectedBlockPopover( {
resize={ false }
{ ...popoverProps }
>
{ shouldShowContextualToolbar && (
{ shouldShowContextualToolbar && showContents && (
<BlockContextualToolbar
// If the toolbar is being shown because of being forced
// it should focus the toolbar right after the mount.
Expand Down Expand Up @@ -169,6 +173,8 @@ function wrapperSelector( select ) {
getBlockRootClientId,
getBlock,
getBlockParents,
getSettings,
isNavigationMode: _isNavigationMode,
__experimentalGetBlockListSettingsForBlocks,
} = select( blockEditorStore );

Expand All @@ -195,10 +201,14 @@ function wrapperSelector( select ) {
?.__experimentalCaptureToolbars
);

const settings = getSettings();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getSettings called here doesn't cause a re-render if the settings change, it should probably be called inside useSelect instead to avoid bugs.


return {
clientId,
rootClientId: getBlockRootClientId( clientId ),
name,
isDistractionFree: settings.isDistractionFree,
isNavigationMode: _isNavigationMode(),
isEmptyDefaultBlock:
name && isUnmodifiedDefaultBlock( { name, attributes } ),
capturingClientId,
Expand All @@ -221,6 +231,8 @@ export default function WrappedBlockPopover( {
name,
isEmptyDefaultBlock,
capturingClientId,
isDistractionFree,
isNavigationMode,
} = selected;

if ( ! name ) {
Expand All @@ -232,6 +244,7 @@ export default function WrappedBlockPopover( {
clientId={ clientId }
rootClientId={ rootClientId }
isEmptyDefaultBlock={ isEmptyDefaultBlock }
showContents={ ! isDistractionFree || isNavigationMode }
capturingClientId={ capturingClientId }
__unstablePopoverSlot={ __unstablePopoverSlot }
__unstableContentRef={ __unstableContentRef }
Expand Down
43 changes: 31 additions & 12 deletions packages/edit-post/src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -23,13 +24,12 @@ import MainDashboardButton from './main-dashboard-button';
import { store as editPostStore } from '../../store';
import TemplateTitle from './template-title';

function Header( { setEntitiesSavedStatesCallback } ) {
function Header( { setEntitiesSavedStatesCallback, isDistractionFree } ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this a new prop instead of just using useSelect to retrieve it?

const {
hasActiveMetaboxes,
isPublishSidebarOpened,
isSaving,
showIconLabels,
hasReducedUI,
} = useSelect(
( select ) => ( {
hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
Expand All @@ -38,28 +38,47 @@ 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' );

const slideY = {
hidden: isDistractionFree ? { y: '-50' } : { y: 0 },
hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
};

const slideX = {
hidden: isDistractionFree ? { x: '-100%' } : { x: 0 },
hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
};

return (
<div className={ classes }>
<MainDashboardButton.Slot>
<FullscreenModeClose showTooltip />
<motion.div
variants={ slideX }
transition={ { type: 'tween', delay: 0.8 } }
>
<FullscreenModeClose showTooltip />
</motion.div>
</MainDashboardButton.Slot>
<div className="edit-post-header__toolbar">
<motion.div
variants={ slideY }
transition={ { type: 'tween', delay: 0.8 } }
className="edit-post-header__toolbar"
>
<HeaderToolbar />
<TemplateTitle />
</div>
<div className="edit-post-header__settings">
</motion.div>
<motion.div
variants={ slideY }
transition={ { type: 'tween', delay: 0.8 } }
className="edit-post-header__settings"
>
{ ! 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
Expand Down Expand Up @@ -93,7 +112,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
{ showIconLabels && ! isLargeViewport && (
<MoreMenu showIconLabels={ showIconLabels } />
) }
</div>
</motion.div>
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-post/src/components/header/more-menu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const MoreMenu = ( { showIconLabels } ) => {
scope="core/edit-post"
/>
) }
<WritingMenu />
<WritingMenu onClose={ onClose } />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How is this change related to this PR?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the catch up review! 🙏🏻 This change - which I'll probably undo, idk - is to close the writing menu when entering this mode, because the top toolbar hides and this menu remains orphan in the UI.

<ModeSwitcher />
<ActionItem.Slot
name="core/edit-post/plugin-more-menu"
Expand Down
44 changes: 44 additions & 0 deletions packages/edit-post/src/components/header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,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;
}

}
Loading