Skip to content

Navigation Block : try not using css variable for block gap support #37543

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
glendaviesnz merged 10 commits into from
Jan 12, 2022
Merged

Navigation Block : try not using css variable for block gap support #37543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5096297
WIP - manually add block gap support
Dec 21, 2021
07bba07
Add gap styles manually on front end
Dec 22, 2021
f069a25
Account for undefined style atribute
Dec 22, 2021
f54106a
Fallback to theme default block gap setting if not explicitly set on …
Dec 22, 2021
9ec3fd3
Only add the block gap inline style if block gap style is enabled
Dec 22, 2021
e7e7abf
Reinstate blockGap support for the navigation block.
ramonjd Jan 5, 2022
c79b266
Switch to inherit to set value for nested containers, and also set a …
Jan 11, 2022
077a93b
Update docs
Jan 11, 2022
c5f08af
Switch to just using inherit to apply the gap from parent block inste…
Jan 11, 2022
17aeb45
Revert whitespace change
Jan 11, 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 @@ -365,7 +365,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 (units), typography (fontSize, lineHeight), ~~html~~
- **Supports:** align (full, wide), anchor, inserter, spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor

## Navigation Area
Expand Down
6 changes: 5 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 @@ -92,7 +92,11 @@
}
},
"spacing": {
"units": [ "px", "em", "rem", "vh", "vw" ]
"blockGap": true,
"units": [ "px", "em", "rem", "vh", "vw" ],
"__experimentalDefaultControls": {
"blockGap": true
}
},
"__experimentalLayout": {
"allowSwitching": false,
Expand Down
9 changes: 6 additions & 3 deletions packages/block-library/src/navigation/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,11 +306,14 @@ button.wp-block-navigation-item__content {
*/

// Menu items with no background.
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-dialog,
.wp-block-navigation,
.wp-block-navigation .wp-block-page-list,
.wp-block-navigation__container,
.wp-block-navigation__responsive-container-content {
gap: var(--wp--style--block-gap, 2em);
gap: inherit;
}

// Menu items with background.
Expand All @@ -321,7 +324,7 @@ button.wp-block-navigation-item__content {
&,
.wp-block-navigation .wp-block-page-list,
.wp-block-navigation__container {
gap: var(--wp--style--block-gap, 0.5em);
gap: inherit;
}
}

Expand Down Expand Up @@ -509,7 +512,7 @@ button.wp-block-navigation-item__content {
// Space unfolded items using gap and padding for submenus.
.wp-block-navigation__submenu-container,
.wp-block-navigation__container {
gap: var(--wp--style--block-gap, 2em);
gap: inherit;
}

// Apply top padding to nested submenus.
Expand Down