Global Link Hover Color overrides Block Level style for Query Navigation Next & Previous blocks

[jeflopodev]

Description

Given the code below, the blocks core/query-pagination-next core/query-pagination-previous should override the value of styles.elements.link.:hover.color.text set to #00ff00. Since these two blocks have block level definitions of that same style set to #ff0000 instead.

Other blocks with links like core/query-pagination-numbers & core/paragraph can override it, and work as expected (hovering with the color #ff0000 set). I've used them just to check.

home.html & theme.json

<!-- wp:query -->
<div class="wp-block-query">
    <!-- wp:query-pagination -->
        <!-- wp:query-pagination-previous /-->
        <!-- wp:query-pagination-numbers /-->
        <!-- wp:query-pagination-next /-->    
    <!-- /wp:query-pagination -->
</div>
<!-- /wp:query -->

<!-- wp:paragraph -->
<p><a href="http://wordpress.org" data-type="link" data-id="wordpress.org">Mauris convallis lectus sit amet aliquet bibendum</a></p>
<!-- /wp:paragraph -->

{
  "styles": {
    "elements": {
      "link": {
        ":hover": {
          "color": {
            "text": "#00ff00"
          }
        }
      }
    },
    "blocks": {
      "core/paragraph": {
        "elements": {
          "link": {
            ":hover": {
              "color": {
                "text": "#ff0000"
              }
            }
          }
        }
      },
      "core/query-pagination-next": {
        "elements": {
          "link": {
            ":hover": {
              "color": {
                "text": "#ff0000"
              }
            }
          }
        }
      },
      "core/query-pagination-previous": {
        "elements": {
          "link": {
            ":hover": {
              "color": {
                "text": "#ff0000"
              }
            }
          }
        }
      },
      "core/query-pagination-numbers": {
        "elements": {
          "link": {
            ":hover": {
              "color": {
                "text": "#ff0000"
              }
            }
          }
        }
      }
    }
  },
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2
}

Step-by-step reproduction instructions

1. Create enough posts to have pagination
2. Create a Posts page, and set it as the static Post page in Settings > Reading
3. Create a templates\home.html template with the core/query-navigation-next & core/query-navigation-previous blocks
4. Setup theme.json so it sets a color value for the properties styles.elements.link.:hover.color.text, styles.blocks.core/query-navigation-next.elements.link.hover.color.text & styles.blocks.core/query-navigation-previous.elements.link.hover.color.text
5. Navigate to the posts page and hover the next and previous links to check

Screenshots, screen recording, code snippet

link.hover.color.not.overriden.mp4

These are the selectors used for every element while forcing :hover state in the DevTools:

force.hover.styles.mp4

Environment info

• I've tried this with WordPress 6.3.1 & 6.4-alpha-56597 + Gutenberg 16.6.0
• I've used a custom made theme named simple with the very minimal files needed to reproduce the bug. It's shown in the video.
• I've also tried this using the Twenty Twenty Three theme (and also happens there)
• I'm using Google Chrome 116.0.5845.188 (Build oficial) (64 bits) (cohort: Stable) in Windows 11 Version 21H2 (Build 22000.2416)

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[jeflopodev]

Oh wait. At first I thought the global style was being used over an existing and a more specific block level style. But now I think that this is because there's no block level hover color styles being used/applied for core/query-pagination-next and core/query-pagination-previous blocks.

That's why it falls back to the value from styles.elements.link.:hover.color.text

I've added a video of the CSS selectors being used.