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

Fix navigation block classname issues #34344

Merged
merged 3 commits into from
Aug 27, 2021
Merged

Fix navigation block classname issues #34344

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
50eb97b
Fix missing class renames.
jasmussen Aug 27, 2021
2428630
Add readme notes.
jasmussen Aug 27, 2021
1390c61
Fix flex issue.
jasmussen Aug 27, 2021
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-library/src/navigation-link/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
* Navigation Items.
*/

.wp-block-navigation-link {
.wp-block-navigation-item {
.wp-block-navigation__submenu-container {
display: block;
}
Expand Down
7 changes: 4 additions & 3 deletions packages/block-library/src/navigation/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@

// Low specificity default to ensure background color applies to submenus.
.wp-block-navigation__container,
.wp-block-navigation-link {
.wp-block-navigation-item {
background-color: inherit;
}

Expand Down Expand Up @@ -215,7 +215,7 @@ $color-control-label-height: 20px;

// Style skeleton elements to mostly match the metrics of actual menu items.
// Needs specificity.
.wp-block-navigation-link.wp-block-navigation-link {
.wp-block-navigation-item.wp-block-navigation-item {
position: relative;
min-width: 72px;

Expand All @@ -237,7 +237,7 @@ $color-control-label-height: 20px;
}


.wp-block-navigation-link.wp-block-navigation-link,
.wp-block-navigation-item.wp-block-navigation-item,
.wp-block-navigation-placeholder__preview-search-icon {
opacity: 0.3;
}
Expand All @@ -250,6 +250,7 @@ $color-control-label-height: 20px;
width: 0;
overflow: hidden;
flex-wrap: nowrap;
flex: 0;
}

// Hide entirely when vertical.
Expand Down
6 changes: 3 additions & 3 deletions packages/block-library/src/navigation/placeholder-preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import { Icon, search } from '@wordpress/icons';
const PlaceholderPreview = () => {
return (
<ul className="wp-block-navigation-placeholder__preview wp-block-navigation__container">
<li className="wp-block-navigation-link">&#8203;</li>
<li className="wp-block-navigation-link">&#8203;</li>
<li className="wp-block-navigation-link">&#8203;</li>
<li className="wp-block-navigation-item">&#8203;</li>
<li className="wp-block-navigation-item">&#8203;</li>
<li className="wp-block-navigation-item">&#8203;</li>
<li className="wp-block-navigation-placeholder__preview-search-icon">
<Icon icon={ search } />
</li>
Expand Down
9 changes: 9 additions & 0 deletions packages/components/src/navigation/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,15 @@ const MyNavigation = () => (
</Navigation>
);
```
## CSS Classes leveraged
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Let me know if this is the right place and/or format for these.

Copy link
Contributor

Choose a reason for hiding this comment

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

Looks good, thanks for doing that. 👍


The structural CSS for the navigation block targets generic classnames across menu items of multiple types including those automatically generated by the Page List block. Here are some of the notable classnames and what they are used for:

- `.wp-block-navigation__submenu-container` is applied to submenus to main menu items.
- `.wp-block-navigation-item` is applied to every menu item.
- `.wp-block-navigation-item__content` is applied to the link inside a menu item.
- `.wp-block-navigation-link__label` is applied to the innermost container around the menu item text label.
- `.wp-block-navigation__submenu-icon` is applied to the submenu indicator (chevron).

## Navigation Props

Expand Down
8 changes: 4 additions & 4 deletions packages/edit-navigation/src/components/editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
font-family: $default-font;

// Increase specificity.
.wp-block-navigation-link {
.wp-block-navigation-item {
display: block;

// Show submenus on click.
Expand All @@ -55,7 +55,7 @@

// Menu items.
// This needs high specificity to override inherited values.
&.wp-block-navigation-link.wp-block-navigation-link {
&.wp-block-navigation-item.wp-block-navigation-item {
margin-right: 0;
}

Expand Down Expand Up @@ -124,7 +124,7 @@
}

// Override inherited values to optimize menu items for the screen context.
.wp-block-navigation-link.has-child {
.wp-block-navigation-item.has-child {
cursor: default;
border-radius: $radius-block-ui;
}
Expand All @@ -137,7 +137,7 @@

// When editing a link with children, highlight the parent
// and adjust the spacing and submenu icon.
.wp-block-navigation-link.has-child.is-editing {
.wp-block-navigation-item.has-child.is-editing {
> .wp-block-navigation__container,
> .wp-block-navigation__submenu-container {
opacity: 1;
Expand Down