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

Small follow-ups to the distraction free mode PR #45151

Merged
merged 1 commit into from
Oct 24, 2022
Merged

Small follow-ups to the distraction free mode PR #45151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 4 additions & 1 deletion 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 @@ -24,12 +24,13 @@ import MainDashboardButton from './main-dashboard-button';
import { store as editPostStore } from '../../store';
import TemplateTitle from './template-title';

function Header( { setEntitiesSavedStatesCallback, isDistractionFree } ) {
function Header( { setEntitiesSavedStatesCallback } ) {
const {
hasActiveMetaboxes,
isPublishSidebarOpened,
isSaving,
showIconLabels,
isDistractionFree,
} = useSelect(
( select ) => ( {
hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
Expand All @@ -38,6 +39,8 @@ function Header( { setEntitiesSavedStatesCallback, isDistractionFree } ) {
isSaving: select( editPostStore ).isSavingMetaBoxes(),
showIconLabels:
select( editPostStore ).isFeatureActive( 'showIconLabels' ),
isDistractionFree:
Copy link
Contributor Author

Choose a reason for hiding this comment

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

No need for prop passing from parent to children since we can access this here. The pro here is that the "Header" component becomes more reusable and if we remove the isDistractionFree selector from the parent it would result in a small perf optimization.

select( editPostStore ).isFeatureActive( 'distractionFree' ),
} ),
[]
);
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 onClose={ onClose } />
<WritingMenu />
<ModeSwitcher />
<ActionItem.Slot
name="core/edit-post/plugin-more-menu"
Expand Down
1 change: 0 additions & 1 deletion 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 @@ -242,5 +242,4 @@
position: absolute;
z-index: 35;
}

}
24 changes: 13 additions & 11 deletions packages/edit-post/src/components/header/writing-menu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { useSelect, useDispatch } from '@wordpress/data';
import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
import { MenuGroup } from '@wordpress/components';
import { __, _x } from '@wordpress/i18n';
import { useViewportMatch } from '@wordpress/compose';
Expand All @@ -17,7 +17,8 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
*/
import { store as postEditorStore } from '../../../store';

function WritingMenu( { onClose } ) {
function WritingMenu() {
const registry = useRegistry();
const isDistractionFree = useSelect(
( select ) =>
select( blockEditorStore ).getSettings().isDistractionFree,
Expand All @@ -36,14 +37,15 @@ function WritingMenu( { onClose } ) {
const { selectBlock } = useDispatch( blockEditorStore );

const toggleDistractionFree = () => {
setPreference( 'core/edit-post', 'fixedToolbar', false );
setIsInserterOpened( false );
setIsListViewOpened( false );
closeGeneralSidebar();
onClose();
if ( ! isDistractionFree ) {
selectBlock( blocks[ 0 ].clientId );
}
registry.batch( () => {
setPreference( 'core/edit-post', 'fixedToolbar', false );
setIsInserterOpened( false );
setIsListViewOpened( false );
closeGeneralSidebar();
if ( ! isDistractionFree && !! blocks.length ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is a bug fix where toggling distraction free would fail if the post was empty

selectBlock( blocks[ 0 ].clientId );
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think we can probably get rid of all of these if we just not render them in distraction free mode (remove the inserter, remove list view, remove the sidebar) that way if you switch back to regular mode, they restore to their previous state.

I didn't want to make that change here though.

Copy link
Contributor

Choose a reason for hiding this comment

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

Yea commented to the original PR that this is the second option to this handler. It's a better way but it peppers the code with a lot of extra isDistractionFree checks and my goal is to have the least impact initially.

} );
};

const isLargeViewport = useViewportMatch( 'medium' );
Expand Down Expand Up @@ -84,7 +86,7 @@ function WritingMenu( { onClose } ) {
<PreferenceToggleMenuItem
scope="core/edit-post"
name="distractionFree"
toggleHandler={ toggleDistractionFree }
onToggle={ toggleDistractionFree }
label={ __( 'Distraction free' ) }
info={ __( 'Write with calmness' ) }
messageActivated={ __( 'Distraction free mode activated' ) }
Expand Down
9 changes: 1 addition & 8 deletions packages/edit-post/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,12 +124,6 @@ function Layout( { styles } ) {
documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
};
}, [] );
const [ distractionFree, setDistractionFree ] =
useState( isDistractionFree );

useEffect( () => {
setDistractionFree( isDistractionFree );
}, [ isDistractionFree ] );
Copy link
Contributor Author

Choose a reason for hiding this comment

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

AFAIK, this was useless local state.

Copy link
Contributor

Choose a reason for hiding this comment

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

These bits of code are surprising. I wouldn't have added it for no reason :D 🤷🏻 Probably didnt remove it on iteration X when it wasn't needed anymore 🙇🏻

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, sometimes it's hard to keep track of all the necessary/unnecessary bits as we iterate over feedback.


const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
'is-sidebar-opened': sidebarIsOpened,
Expand Down Expand Up @@ -207,15 +201,14 @@ function Layout( { styles } ) {
<EditorKeyboardShortcutsRegister />
<SettingsSidebar />
<InterfaceSkeleton
isDistractionFree={ distractionFree }
isDistractionFree={ isDistractionFree }
className={ className }
labels={ {
...interfaceLabels,
secondarySidebar: secondarySidebarLabel,
} }
header={
<Header
isDistractionFree={ distractionFree }
setEntitiesSavedStatesCallback={
setEntitiesSavedStatesCallback
}
Expand Down
4 changes: 2 additions & 2 deletions packages/preferences/src/components/preference-toggle-menu-item/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function PreferenceToggleMenuItem( {
messageActivated,
messageDeactivated,
shortcut,
toggleHandler = () => null,
onToggle = () => null,
disabled = false,
} ) {
const isActive = useSelect(
Expand Down Expand Up @@ -55,7 +55,7 @@ export default function PreferenceToggleMenuItem( {
icon={ isActive && check }
isSelected={ isActive }
onClick={ () => {
toggleHandler();
onToggle();
toggle( scope, name );
speakMessage();
} }
Expand Down