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

Navigation: Add 'edit' to the block toolbar #45853

Closed
wants to merge 2 commits into from
Closed

Navigation: Add 'edit' to the block toolbar #45853

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21cb5d6
Navigation: Add 'edit' to the block toolbar
scruffian Nov 17, 2022
9cbe8ac
remove the additional button from edit site
scruffian Nov 17, 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: 2 additions & 0 deletions packages/edit-post/src/plugins/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import CopyContentMenuItem from './copy-content-menu-item';
import KeyboardShortcutsHelpMenuItem from './keyboard-shortcuts-help-menu-item';
import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
import WelcomeGuideMenuItem from './welcome-guide-menu-item';
import NavigationEditMenuItem from './navigation-edit-menu-item';

registerPlugin( 'edit-post', {
render() {
Expand Down Expand Up @@ -55,6 +56,7 @@ registerPlugin( 'edit-post', {
</>
) }
</ToolsMoreMenuGroup>
<NavigationEditMenuItem />
</>
);
},
Expand Down
88 changes: 88 additions & 0 deletions packages/edit-post/src/plugins/navigation-edit-menu-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/**
* WordPress dependencies
*/
import {
BlockEditorProvider,
BlockTools,
__unstableBlockToolbarLastItem,
__unstableBlockNameContext,
} from '@wordpress/block-editor';
import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { Fragment } from '@wordpress/element';
import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
import { __ } from '@wordpress/i18n';

const NavMenuSidebarToggle = () => {
// Blocks can be loaded into both post and site editors.
// We use this to determine which editor we are in so that
// we can determine which inspector controls to open.
const {
isPostEditor,
Copy link
Contributor

Choose a reason for hiding this comment

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

There's no need to test isPostEditor, we're always in post editor here, since this plugin is defined in edit-post

Copy link
Contributor Author

Choose a reason for hiding this comment

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

In my testing, this was also running in the site editor.

} = useSelect(
( select ) => {
// eslint-disable-next-line @wordpress/data-no-store-string-literals
Copy link
Contributor

Choose a reason for hiding this comment

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

Is it ok to use string literals here then?

const editorSelectors = select( 'core/editor' );
return {
isPostEditor: !! editorSelectors.getEditedPostAttribute( 'type' )
};
}
);

// eslint-disable-next-line @wordpress/data-no-store-string-literals
const { openGeneralSidebar } = useDispatch( 'core/edit-post' );
// eslint-disable-next-line @wordpress/data-no-store-string-literals
const { enableComplementaryArea } = useDispatch( 'core/interface' );
const openBlockInspector = () => {
if ( isPostEditor ) {
openGeneralSidebar( 'edit-post/block' );
} else {
enableComplementaryArea( 'core/edit-site', 'edit-site/block-inspector' );
}
};
Comment on lines +36 to +42
Copy link
Contributor

Choose a reason for hiding this comment

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

It feels like we should either have:

  • normalized the structure of the editors
  • create an abstraction to handle this kind of stuff

Not for this PR though...


return (
<ToolbarGroup>
<ToolbarButton
className="components-toolbar__control"
label={ __( 'Open navigation list view' ) }
onClick={ openBlockInspector }
>
{ __( 'Edit' ) }
</ToolbarButton>
</ToolbarGroup>
);
};

// Conditionally include NavMenu sidebar in Plugin only.
// Optimise for dead code elimination.
// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
let MaybeNavMenuSidebarToggle = Fragment;

const isOffCanvasNavigationEditorEnabled =
window?.__experimentalEnableOffCanvasNavigationEditor === true;

if ( isOffCanvasNavigationEditorEnabled ) {
MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
}

const NavigationEditMenuItem = () => {
return (
<BlockEditorProvider>
<BlockTools>
<__unstableBlockToolbarLastItem>
<__unstableBlockNameContext.Consumer>
{ ( blockName ) =>
blockName === 'core/navigation' && (
<MaybeNavMenuSidebarToggle />
)
}
</__unstableBlockNameContext.Consumer>
</__unstableBlockToolbarLastItem>
</BlockTools>
<ReusableBlocksMenuItems />
</BlockEditorProvider>
);
};

export default NavigationEditMenuItem;
64 changes: 2 additions & 62 deletions packages/edit-site/src/components/block-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,21 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { useSelect, useDispatch } from '@wordpress/data';
import { useCallback, useMemo, useRef, Fragment } from '@wordpress/element';
import { useCallback, useMemo, useRef } from '@wordpress/element';
import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
import {
BlockList,
BlockEditorProvider,
__experimentalLinkControl,
BlockInspector,
BlockTools,
__unstableBlockToolbarLastItem,
__unstableBlockSettingsMenuFirstItem,
__unstableUseTypingObserver as useTypingObserver,
BlockEditorKeyboardShortcuts,
store as blockEditorStore,
__unstableBlockNameContext,
} from '@wordpress/block-editor';
import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
import { listView } from '@wordpress/icons';
import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { store as interfaceStore } from '@wordpress/interface';

/**
* Internal dependencies
Expand All @@ -46,16 +40,8 @@ const LAYOUT = {
alignments: [],
};

const NAVIGATION_SIDEBAR_NAME = 'edit-site/navigation-menu';

export default function BlockEditor( { setIsInserterOpen } ) {
const {
storedSettings,
templateType,
templateId,
page,
isNavigationSidebarOpen,
} = useSelect(
const { storedSettings, templateType, templateId, page } = useSelect(
( select ) => {
const { getSettings, getEditedPostType, getEditedPostId, getPage } =
select( editSiteStore );
Expand All @@ -65,10 +51,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
templateType: getEditedPostType(),
templateId: getEditedPostId(),
page: getPage(),
isNavigationSidebarOpen:
select( interfaceStore ).getActiveComplementaryArea(
editSiteStore.name
) === NAVIGATION_SIDEBAR_NAME,
};
},
[ setIsInserterOpen ]
Expand Down Expand Up @@ -141,14 +123,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
templateType
);
const { setPage } = useDispatch( editSiteStore );
const { enableComplementaryArea, disableComplementaryArea } =
useDispatch( interfaceStore );
const toggleNavigationSidebar = useCallback( () => {
const toggleComplementaryArea = isNavigationSidebarOpen
? disableComplementaryArea
: enableComplementaryArea;
toggleComplementaryArea( editSiteStore.name, NAVIGATION_SIDEBAR_NAME );
}, [ isNavigationSidebarOpen ] );
const contentRef = useRef();
const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
const isMobileViewport = useViewportMatch( 'small', '<' );
Expand All @@ -157,31 +131,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
const isTemplatePart = templateType === 'wp_template_part';
const hasBlocks = blocks.length !== 0;

const NavMenuSidebarToggle = () => (
getdave marked this conversation as resolved.
Show resolved Hide resolved
<ToolbarGroup>
<ToolbarButton
className="components-toolbar__control"
label={
isNavigationSidebarOpen
? __( 'Close list view' )
: __( 'Open list view' )
}
onClick={ toggleNavigationSidebar }
icon={ listView }
isActive={ isNavigationSidebarOpen }
/>
</ToolbarGroup>
);

// Conditionally include NavMenu sidebar in Plugin only.
// Optimise for dead code elimination.
// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
let MaybeNavMenuSidebarToggle = Fragment;

if ( process.env.IS_GUTENBERG_PLUGIN ) {
MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
}

return (
<BlockEditorProvider
settings={ settings }
Expand Down Expand Up @@ -244,15 +193,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
<BlockInspectorButton onClick={ onClose } />
) }
</__unstableBlockSettingsMenuFirstItem>
<__unstableBlockToolbarLastItem>
<__unstableBlockNameContext.Consumer>
{ ( blockName ) =>
blockName === 'core/navigation' && (
<MaybeNavMenuSidebarToggle />
)
}
</__unstableBlockNameContext.Consumer>
</__unstableBlockToolbarLastItem>
</BlockTools>
<ReusableBlocksMenuItems />
</BlockEditorProvider>
Expand Down