Skip to content

Commit

Permalink
Nav block: link text color inheritance fixes and tests (#51710)
Browse files Browse the repository at this point in the history 
* tests and fix for link color inheritance

* test agains emptytheme too, refactor setup, added better comments

* change setup for tests

* removed inherit color for the moment on the block

* finished the first test with all cases

* finished second test

* finished third test

* started the last test

* spacing on comments

* removed unnecessary actions from before/after testing functions

* insert specific id of nav directly to speed up things

* finish checking colors in the editor on desktop

* test the overlay and reset settings

* use variables for colors, cover rest of the cases to test

* introduced a third link to cover non submenu links

* undo unwanted change

* finish the overlay background tests and fix issues with inheritance

* turn colors into variables for readibility

* fix wrong color syntax

* Create test page before creating navigation menu

* Add test coverage for selecting group text color that should be inherited by all links

This test is currently failing. TDD.

* Fix incorrect selector structure.

The &:where(.wp-block-navigation-item a) rule would never apply, as .wp-block-navigation__responsive-container would never also have a .wp-block-navigation-item class on it. Adding the space allows it to apply the inherit rule to the a tag.

* Update tests to check for black text defaults on navigation links

* Big refactor of navigation color tests

* Changed link names from non-descriptive firstLink, secondLink, and thirdLink to clearer names: customLink, submenuLink, and pageLink.
* Combined some repeated operations such as openEditorOverlay, openFrontendOverlay, and resetGlobalStyles
* Added ColorControl for keeping track of all the link selectors

* Revert link color settings changing the navigation link colors

The trunk behavior is to have text color global styles change the navigation color styles, while the global link color styles do not change the navigation colors. Also updated the tests to not have any of those color changes impact the submenus.

* Large refactor of navigation color tests

It was getting difficult to work within several very long tests with a lot of shared code, so I refactored into shared pieces that would make writing the tests easier while keeping debugging easy as well.

Also, one large change was to remove the reliance on global styles since resetting the global styles after a failed test was proving very difficult, and we don't need to use global styles since we can rely on creating a group instead. By wrapping a group on the navigation block we can test the same thing while not needing to deal with global styles.

* Add test for navigation background colors

Also added closing the sidebar in the tests so we don't accidentally grab the links from the sidebar when the navigation block has the sidebar menu open with the same link text.

* Add test to ensure navigation text does not inherit link color from the theme/group

* Only set default navigation submenu and overlay text colors if no navigation text color is selected

* Have li navigation items inherit background color so it can be inherited by the submenu background

* Change how to test editor mobile overlay colors

The tests were a little flaky when tryingn to click the button to open the mobile view since the animation from desktop to mobile in the editor took some time, and the test was trying to click the open menu button before it was able to be clicked.

This updates the test to use the navigation settings itself, which doesn't have an animation, so it should be more reliable.

* Move navigation color tests to own file

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

* update comments

* Update test/e2e/specs/editor/blocks/navigation-colors.spec.js

---------

Co-authored-by: Jerry Jones <[email protected]>
Co-authored-by: Ben Dwyer <[email protected]>
  • Loading branch information
@MaggieCabrera @jeryj @scruffian
3 people authored Jul 13, 2023
1 parent 0b3fb0b commit 033c5e3
Show file tree
Hide file tree
Showing 3 changed files with 569 additions and 17 deletions.
9 changes: 0 additions & 9 deletions packages/block-library/src/navigation/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,15 +123,6 @@
"type": "flex"
}
},
"__experimentalStyle": {
"elements": {
"link": {
"color": {
"text": "inherit"
}
}
}
},
"interactivity": true
},
"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],
Expand Down
35 changes: 27 additions & 8 deletions packages/block-library/src/navigation/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ $navigation-icon-size: 24px;

// Menu item container.
.wp-block-navigation-item {
background-color: inherit;
display: flex;
align-items: center;
position: relative;
Expand Down Expand Up @@ -398,15 +399,26 @@ button.wp-block-navigation-item__content {
}

// Default background and font color.
.wp-block-navigation:not(.has-background) {
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
// Set a background color for submenus so that they're not transparent.
// NOTE TO DEVS - if refactoring this code, please double-check that
// submenus have a default background color, this feature has regressed
// several times, so care needs to be taken.
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
}

// If we do have a background color selected, inherit it from the navigation block
.wp-block-navigation.has-background {
.wp-block-navigation__submenu-container {
// Set a background color for submenus so that they're not transparent.
// NOTE TO DEVS - if refactoring this code, please double-check that
// submenus have a default background color, this feature has regressed
// several times, so care needs to be taken.
background-color: #fff;
background-color: inherit;
}
}

.wp-block-navigation:not(.has-text-color) {
.wp-block-navigation__submenu-container {
// Set a default color for submenu text if none is selected
color: #000;
border: 1px solid rgba(0, 0, 0, 0.15);
}
}

Expand Down Expand Up @@ -458,7 +470,8 @@ button.wp-block-navigation-item__content {
right: 0;
bottom: 0;

.wp-block-navigation-link a {
// Low specificity so that themes can override.
& :where(.wp-block-navigation-item a) {
color: inherit;
}

Expand Down Expand Up @@ -579,6 +592,7 @@ button.wp-block-navigation-item__content {
// Remove background colors for items inside the overlay menu.
// Has to be !important to override global styles.
.wp-block-navigation-item .wp-block-navigation__submenu-container,
.wp-block-navigation__container,
.wp-block-navigation-item,
.wp-block-page-list {
color: inherit !important;
Expand Down Expand Up @@ -620,9 +634,14 @@ button.wp-block-navigation-item__content {
.wp-block-navigation:not(.has-background)
.wp-block-navigation__responsive-container.is-menu-open {
background-color: #fff;
}

.wp-block-navigation:not(.has-text-color)
.wp-block-navigation__responsive-container.is-menu-open {
color: #000;
}


// Overlay menu toggle button label
.wp-block-navigation__toggle_button_label {
font-size: 1rem;
Expand Down
Loading

1 comment on commit 033c5e3

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 033c5e3.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5544279058
📝 Reported issues:

Please sign in to comment.