Skip to content

Update OffCanvasEditor to use clientids tree #46541

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

Merged
getdave merged 3 commits into from
Dec 14, 2022
Merged

Update OffCanvasEditor to use clientids tree #46541

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
497d5dc
Navigation: Pass a tree of client ids instead of an array of blocks.
Dec 14, 2022
772aad9
Explain passing custom clientIDs
getdave Dec 14, 2022
e434905
remove whitespace for linter?
Dec 14, 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/off-canvas-editor/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ function ListViewBlock( {

const { isTreeGridMounted, expand, collapse } = useListViewContext();

const isEditable = block.name !== 'core/page-list-item';
const isEditable = blockName !== 'core/page-list-item';
const hasSiblings = siblingBlockCount > 0;
const hasRenderedMovers = showBlockMovers && hasSiblings;
const moverCellClassName = classnames(
Expand Down
6 changes: 3 additions & 3 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 @@ -717,13 +717,13 @@ function Navigation( {
return (
<TagName { ...blockProps }>
<MenuInspectorControls
clientId={ clientId }
createNavigationMenuIsSuccess={
createNavigationMenuIsSuccess
}
createNavigationMenuIsError={ createNavigationMenuIsError }
currentMenuId={ ref }
isNavigationMenuMissing={ isNavigationMenuMissing }
innerBlocks={ innerBlocks }
isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
onCreateNew={ createUntitledEmptyNavigationMenu }
onSelectClassicMenu={ onSelectClassicMenu }
Expand Down Expand Up @@ -759,12 +759,12 @@ function Navigation( {
return (
<TagName { ...blockProps }>
<MenuInspectorControls
clientId={ clientId }
createNavigationMenuIsSuccess={
createNavigationMenuIsSuccess
}
createNavigationMenuIsError={ createNavigationMenuIsError }
isNavigationMenuMissing={ isNavigationMenuMissing }
innerBlocks={ innerBlocks }
isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
onCreateNew={ createUntitledEmptyNavigationMenu }
onSelectClassicMenu={ onSelectClassicMenu }
Expand Down Expand Up @@ -832,13 +832,13 @@ function Navigation( {
<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
<RecursionProvider uniqueId={ recursionId }>
<MenuInspectorControls
clientId={ clientId }
createNavigationMenuIsSuccess={
createNavigationMenuIsSuccess
}
createNavigationMenuIsError={ createNavigationMenuIsError }
currentMenuId={ ref }
isNavigationMenuMissing={ isNavigationMenuMissing }
innerBlocks={ innerBlocks }
isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
onCreateNew={ createUntitledEmptyNavigationMenu }
onSelectClassicMenu={ onSelectClassicMenu }
Expand Down
16 changes: 14 additions & 2 deletions packages/block-library/src/navigation/edit/menu-inspector-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@
import {
__experimentalOffCanvasEditor as OffCanvasEditor,
InspectorControls,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { PanelBody, VisuallyHidden } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

/**
Expand All @@ -15,10 +17,10 @@ import ManageMenusButton from './manage-menus-button';
import NavigationMenuSelector from './navigation-menu-selector';

const MenuInspectorControls = ( {
clientId,
createNavigationMenuIsSuccess,
createNavigationMenuIsError,
currentMenuId = null,
innerBlocks,
isManageMenusButtonDisabled,
onCreateNew,
onSelectClassicMenu,
Expand All @@ -32,6 +34,16 @@ const MenuInspectorControls = ( {
/* translators: %s: The name of a menu. */
const actionLabel = __( "Switch to '%s'" );

// Provide a hierarchy of clientIds for the given Navigation block (clientId).
// This is required else the list view will display the entire block tree.
const clientIdsTree = useSelect(
( select ) => {
const { __unstableGetClientIdsTree } = select( blockEditorStore );
return __unstableGetClientIdsTree( clientId );
},
[ clientId ]
);

return (
<InspectorControls __experimentalGroup={ menuControlsSlot }>
<PanelBody
Expand Down Expand Up @@ -60,7 +72,7 @@ const MenuInspectorControls = ( {
/>
{ isOffCanvasNavigationEditorEnabled ? (
<OffCanvasEditor
blocks={ innerBlocks }
blocks={ clientIdsTree }
isExpanded={ true }
selectBlockInCanvas={ false }
/>
Expand Down