Skip to content

Enable navigation nesting to be filtered and manually set #38621

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
draganescu merged 8 commits into from
Apr 4, 2022
Merged

Enable navigation nesting to be filtered and manually set #38621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
70b6e7f
add navigation nesting to block edit to be filtered
Feb 8, 2022
4ad4fdb
makes maxNestingLevel available via context set by the navigation block
Mar 6, 2022
2727aaf
set the default maxNestingLevel to 5
Mar 6, 2022
9541e7f
updates the fixture for the navigation block
Mar 7, 2022
c1c4b1a
check max nesting level for the currently selected submenu block
Mar 11, 2022
51a2a9a
adds a test that tries setting nesting to zero and checks no submenus…
draganescu Mar 24, 2022
debc62e
localize the mutation of allowed submenu blocks so we don't affect ot…
draganescu Apr 1, 2022
2432333
revert to clientId instead of selectedBlockId for getting max nesting
draganescu Apr 1, 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 docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,7 +384,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht
- **Name:** core/navigation
- **Category:** theme
- **Supports:** align (full, wide), anchor, inserter, spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor
- **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor

## Navigation Area

Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/navigation-link/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
"fontSize",
"customFontSize",
"showSubmenuIcon",
"maxNestingLevel",
Copy link
Member

@mtias mtias Apr 4, 2022

Choose a reason for hiding this comment

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

I'd suggest calling this maxLevel

"style"
],
"supports": {
Expand Down
5 changes: 2 additions & 3 deletions packages/block-library/src/navigation-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,6 @@ import { store as coreStore } from '@wordpress/core-data';
*/
import { name } from './block.json';

const MAX_NESTING = 5;

/**
* A React hook to determine if it's dragging within the target element.
*
Expand Down Expand Up @@ -400,6 +398,7 @@ export default function NavigationLinkEdit( {
} = attributes;

const [ isInvalid, isDraft ] = useIsInvalidLink( kind, type, id );
const { maxNestingLevel } = context;

const link = {
url,
Expand Down Expand Up @@ -452,7 +451,7 @@ export default function NavigationLinkEdit( {
getBlockParentsByBlockName( clientId, [
name,
'core/navigation-submenu',
] ).length >= MAX_NESTING,
] ).length >= maxNestingLevel,
isTopLevelLink:
getBlockName( getBlockRootClientId( clientId ) ) ===
'core/navigation',
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/navigation-submenu/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
"fontSize",
"customFontSize",
"showSubmenuIcon",
"maxNestingLevel",
"openSubmenusOnClick",
"style"
],
Expand Down
16 changes: 7 additions & 9 deletions packages/block-library/src/navigation-submenu/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
import { escape, pull } from 'lodash';
import { escape, without } from 'lodash';

/**
* WordPress dependencies
Expand Down Expand Up @@ -55,8 +55,6 @@ const DEFAULT_BLOCK = {
name: 'core/navigation-link',
};

const MAX_NESTING = 5;

/**
* A React hook to determine if it's dragging within the target element.
*
Expand Down Expand Up @@ -293,7 +291,7 @@ export default function NavigationSubmenuEdit( {
url,
opensInNewTab,
};
const { showSubmenuIcon, openSubmenusOnClick } = context;
const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
const { saveEntityRecord } = useDispatch( coreStore );

const {
Expand Down Expand Up @@ -351,7 +349,7 @@ export default function NavigationSubmenuEdit( {
return {
isAtMaxNesting:
getBlockParentsByBlockName( clientId, name ).length >=
MAX_NESTING,
maxNestingLevel,
Copy link
Contributor

@getdave getdave Apr 4, 2022

Choose a reason for hiding this comment

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

Should we add this to the dependency array for the useSelect?

Copy link
Contributor Author

@draganescu draganescu Apr 4, 2022

Choose a reason for hiding this comment

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

Not sure ... This does not change dynamically ... I see a future where this will have an inspector control for when building themes, but until then it's a value from the markup.

isTopLevelItem:
getBlockParentsByBlockName( clientId, name ).length === 0,
isParentOfSelectedBlock: hasSelectedInnerBlock(
Expand Down Expand Up @@ -503,9 +501,9 @@ export default function NavigationSubmenuEdit( {
// Always use overlay colors for submenus.
const innerBlocksColors = getColors( context, true );

if ( isAtMaxNesting ) {
pull( ALLOWED_BLOCKS, 'core/navigation-submenu' );
}
const allowedBlocks = isAtMaxNesting
? without( ALLOWED_BLOCKS, 'core/navigation-submenu' )
: ALLOWED_BLOCKS;

const innerBlocksProps = useInnerBlocksProps(
{
Expand All @@ -528,7 +526,7 @@ export default function NavigationSubmenuEdit( {
},
},
{
allowedBlocks: ALLOWED_BLOCKS,
allowedBlocks,
__experimentalDefaultBlock: DEFAULT_BLOCK,
__experimentalDirectInsert: true,

Expand Down
7 changes: 6 additions & 1 deletion packages/block-library/src/navigation/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@
},
"customOverlayTextColor": {
"type": "string"
},
"maxNestingLevel": {
"type": "number",
"default": 5
}
},
"usesContext": [ "navigationArea" ],
Expand All @@ -76,7 +80,8 @@
"showSubmenuIcon": "showSubmenuIcon",
"openSubmenusOnClick": "openSubmenusOnClick",
"style": "style",
"orientation": "orientation"
"orientation": "orientation",
"maxNestingLevel": "maxNestingLevel"
},
"supports": {
"align": [ "wide", "full" ],
Expand Down
40 changes: 40 additions & 0 deletions packages/e2e-tests/specs/editor/blocks/navigation.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -884,6 +884,46 @@ describe( 'Navigation', () => {
newMenuButton.click();
}

it( 'respects the nesting level', async () => {
await createNewPost();

await insertBlock( 'Navigation' );

const navBlock = await waitForBlock( 'Navigation' );

// Create empty Navigation block with no items
const startEmptyButton = await page.waitForXPath(
START_EMPTY_XPATH
);
await startEmptyButton.click();

await populateNavWithOneItem();

await clickOnMoreMenuItem( 'Code editor' );
const codeEditorInput = await page.waitForSelector(
'.editor-post-text-editor'
);

let code = await codeEditorInput.evaluate( ( el ) => el.value );
code = code.replace( '} /-->', ',"maxNestingLevel":0} /-->' );
await codeEditorInput.evaluate(
( el, newCode ) => ( el.value = newCode ),
code
);
await clickButton( 'Exit code editor' );

const blockAppender = navBlock.$( '.block-list-appender' );

expect( blockAppender ).not.toBeNull();

// Check the Submenu block is no longer present.
const navSubmenuSelector =
'[aria-label="Editor content"][role="region"] [aria-label="Block: Submenu"]';
const submenuBlock = await page.$( navSubmenuSelector );

expect( submenuBlock ).toBeFalsy();
} );

it( 'does not retain uncontrolled inner blocks when creating a new entity', async () => {
await createNewPost();
await clickOnMoreMenuItem( 'Code editor' );
Expand Down
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__navigation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
"showSubmenuIcon": true,
"openSubmenusOnClick": false,
"overlayMenu": "mobile",
"hasIcon": true
"hasIcon": true,
"maxNestingLevel": 5
},
"innerBlocks": []
}
Expand Down