Make WordPress Core

Opened 9 months ago

Last modified 2 months ago

#58875 new defect (bug)

The hover effect in theme.json is not working

Reported by: titanchan's profile titanchan Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.2.2
Component: Editor Keywords: move-to-github close
Focuses: Cc:

Description (last modified by sabernhardt)

While the color of nav links is working, the hover color of those is not working.

  "core/navigation": {
        "color": {
          "text": "var(--wp--preset--color--midred-2)"
        },
        "elements": {
          "link": {
            ":hover": {
              "color": {
                "text": "var(--wp--preset--color--lightred-3)"
              }
            }
          }
        }
      }

Change History (5)

#1 @rajinsharwar
9 months ago

HI @titanchan, can you add more replication steps, and more details of the bug?

#2 @titanchan
9 months ago

https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/

I have followed all the steps suggested by this post, I've found two bugs actually.

One is what I've mentioned previously, which I was setting the hover color for the nav-links.
I wrote the styles session -> blocks -> core/navigation -> color -> text. This is totally working so far.

But when I add elements -> link -> :hover -> color -> text. The hover color is not working.
This is the details of the problem I've encountered.

Another bug is that some rows/ columns have the control of height, while some have the control of width for the dimension control. This may also be a bug as the remaining control is missing. I've already set the appearanceTools to true.

Finally, the last bug that I've found is the border style control is missing as I've already set it to true.

Last edited 9 months ago by titanchan (previous) (diff)

#3 @audrasjb
9 months ago

  • Component changed from General to Editor

#4 @poena
8 months ago

Hi @titanchan!

I was able to reproduce the problem with the elements > links > hover > color > text added to theme.json not working for the navigation, page list, navigation link, and navigation submenu blocks. (The resulting CSS has a specificity that is too low to override the inherited color)

Enabling the borders in theme.json > settings only enables the control for blocks that support it, not for all blocks.

Kindly report one issue per ticket. When multiple possibly unrelated problems are reported in the same ticket, they are more difficult to manage.

When updates like bug fixes are made to the editor, they are made in the Gutenberg plugin first. This is so that the changes can be tested before updating WordPress itself.

Because of that, issues related to the editor and the blocks should be reported in the Gutenberg GitHub repository.
https://github.com/WordPress/gutenberg/

Before opening a new issue, please use the search on GitHub to check if the problem has already been reported.
Please comment on this ticket if you open new issues or need help doing this.

#5 @sabernhardt
2 months ago

  • Description modified (diff)
  • Keywords move-to-github close added
Note: See TracTickets for help on using tickets.