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

Navigation: Add an edit menu button to the block controls #45772

Closed
wants to merge 1 commit into from
Closed

Navigation: Add an edit menu button to the block controls #45772

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
63 changes: 63 additions & 0 deletions packages/block-library/src/navigation/edit/edit-menu-toolbar-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/**
* WordPress dependencies
*/
import {
BlockControls,
} from '@wordpress/block-editor';
import { useSelect, useDispatch } from '@wordpress/data';
import {
ToolbarButton,
ToolbarGroup,
} from '@wordpress/components';
import { store as interfaceStore } from '@wordpress/interface';
import { __ } from '@wordpress/i18n';

const EditMenuToolbarButton = () => {
// 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,
} = useSelect(
( select ) => {
// eslint-disable-next-line @wordpress/data-no-store-string-literals
const editorSelectors = select( 'core/editor' );
return {
isPostEditor: !! editorSelectors.getEditedPostAttribute( 'type' )
};
}
);
const { enableComplementaryArea } = useDispatch( interfaceStore );
Copy link
Contributor

Choose a reason for hiding this comment

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

I'd probably avoid importing the store here as well as this will bundle the interface package into block-library and that package is only meant to be used in top level packages (edit-post, edit-site, edit-widgets...)

// eslint-disable-next-line @wordpress/data-no-store-string-literals
const { openGeneralSidebar } = useDispatch( 'core/edit-post' );
Copy link
Contributor

Choose a reason for hiding this comment

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

What happens if it's neither edit-post nor edit-post. How should the navigation block behave?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Nothing I guess!

const openBlockInspector = () => {
if ( isPostEditor ) {
openGeneralSidebar( 'edit-post/block' );
} else {
enableComplementaryArea( 'core/edit-site', 'edit-site/block-inspector' );
}
};

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

if ( ! isOffCanvasNavigationEditorEnabled ) {
return null;
}

return (
<BlockControls>
<ToolbarGroup>
<ToolbarButton
className="components-toolbar__control"
label={ __( 'Open list view' ) }
onClick={ openBlockInspector } // TODO - focus the menu part
>
{ __( 'Edit menu' ) }
</ToolbarButton>
</ToolbarGroup>
</BlockControls>
);
};

export default EditMenuToolbarButton;
4 changes: 4 additions & 0 deletions packages/block-library/src/navigation/edit/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ import useCreateNavigationMenu from './use-create-navigation-menu';
import { useInnerBlocks } from './use-inner-blocks';
import { detectColors } from './utils';
import ManageMenusButton from './manage-menus-button';
import EditMenuToolbarButton from './edit-menu-toolbar-button';

function Navigation( {
attributes,
Expand Down Expand Up @@ -736,6 +737,7 @@ function Navigation( {
</PanelBody>
</InspectorControls>
{ stylingInspectorControls }
<EditMenuToolbarButton />
<ResponsiveWrapper
id={ clientId }
onToggle={ setResponsiveMenuVisibility }
Expand Down Expand Up @@ -799,6 +801,7 @@ function Navigation( {
) }
</PanelBody>
</InspectorControls>
<EditMenuToolbarButton />
<Warning>
{ __(
'Navigation menu has been deleted or is unavailable. '
Expand Down Expand Up @@ -953,6 +956,7 @@ function Navigation( {

{ ! isLoading && (
<TagName { ...blockProps }>
<EditMenuToolbarButton />
<ResponsiveWrapper
id={ clientId }
onToggle={ setResponsiveMenuVisibility }
Expand Down
56 changes: 1 addition & 55 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,15 +40,12 @@ const LAYOUT = {
alignments: [],
};

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

export default function BlockEditor( { setIsInserterOpen } ) {
const {
storedSettings,
templateType,
templateId,
page,
isNavigationSidebarOpen,
} = useSelect(
( select ) => {
const { getSettings, getEditedPostType, getEditedPostId, getPage } =
Expand All @@ -65,10 +56,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 +128,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,30 +136,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
const isTemplatePart = templateType === 'wp_template_part';
const hasBlocks = blocks.length !== 0;

const NavMenuSidebarToggle = () => (
<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;
}
Comment on lines -181 to -183
Copy link
Contributor

Choose a reason for hiding this comment

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

So just to be clear the "global" navigation sidebar is now officially abandoned? Is just want to be sure before we start removing all of this code.

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 I don't think this change means that, it's just this isn't the way we want to access it.


return (
<BlockEditorProvider
Expand Down Expand Up @@ -244,15 +199,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