Media Queries applied to blocks custom css are not working in gutenberg >=16.8.0

[jeflopodev]

Description

I have a query pagination that looks like this:

I opted to hide the pagination numbers with a media query applied as custom CSS in the core/query-pagination-numbers block style.

@media screen and (max-width: 599px) {
  & .page-numbers {
    display: none;
  }
}

But after updating gutenberg from 16.7.1 to 16.8.0 (and 16.8.1 now) I noted that my query pagination numbers were also hidden on higher resolutions with a display: none applied.

This is in theme.json in styles.blocks.core/query-pagination-numbers.css

"css": "& .page-numbers.current { padding: .5rem .7rem; border-radius: .25rem; color: var(--wp--preset--color--query-pagination-numbers-current-contrast); background-color: var(--wp--preset--color--query-pagination-numbers-current-base); } & .page-numbers.dots { padding: .5rem .6rem; border-radius: .25rem; color: var(--wp--preset--color--query-pagination-numbers-dots-contrast); background-color: var(--wp--preset--color--query-pagination-numbers-dots-base); } @media screen and (max-width: 599px) { & .page-numbers { display: none; } }",

It's like the media query fragment is completely ignored, bypassed. But not it's CSS inside that's still applied without resolution constraints.

To demonstrate it, I changed the media query code to @media screen and (max-width: 599px) { & .page-numbers { color: #f00; } }

And as you can see, that css inside the media query is still being applied in a 1024 resolution.

The theme is custom, made by me... But since it's working on 16.7.1 and only failed when I updated to 16.8.0 I guess it's either gutenberg failing or a change that I'm not aware of. For that, I've thoroughtly checked the release notes from 16.7.1 to 16.8.0 and I found nothing that made me think anything has changed.

It's also happening on my navigation menu, that's the only other part where I'm using media queries. Can be seen in the video below.

Oh, and everything was "tested" with CTRL + F5 for refreshing and:

define( 'WP_DEBUG', true );
define( 'SCRIPT_DEBUG', true );
define( 'WP_DEVELOPMENT_MODE', 'theme' );

Step-by-step reproduction instructions

1. Use gutenberg 16.8.0
2. Define a media query with custom CSS in a block style.
3. Check if the media query is being ignored, but it's css still being applied without resolution constraints.

Screenshots, screen recording, code snippet

This video shows how it work on gutenberg 16.7.1 but doesn't properly work in 16.8.0, and how the styles within the media query are still being applied without resolution constraints.

2023-10-12.18-34-33.mp4

Environment info

WordPress 6.4-beta3-56831
Gutenberg 16.7.1 & 16.8.0
Custom theme
Google Chrome 117.0.5938.150 (Build oficial) (64 bits) (cohort: Stable)
Windows 11 Version 21H2 (Build 22000.2538)

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]

I also tried this on a clean install of WordPress 6.4-beta3-56831 + only Gutenberg 16.8.1 + TwentyTwentyFour

The media queries I used aren't working.

"core/site-title": {
    "css": "@media screen and (max-width: 599px) { .wp-block-site-title a { color: #f00 !important; } }"
}

The css selector, is correct... it works without media query as seen here:

"core/site-title": {
    "css": ".wp-block-site-title a { color: #f00 !important; }"
}

I also tried with WordPress 6.4-beta3-56831 + only Gutenberg 16.7.1 + TwentyTwentyFour (same clean install) using:

"core/site-title": {
    "css": "@media screen and (max-width: 599px) { .wp-block-site-title a { color: #f00 !important; } }"
}

And in TT4 is not working...

(as I stated above. Media queries are working on my custom theme with 16.7.1). Weird...

[jeflopodev]

I can confirm the problem with my navigation in the header was an specifity problem (my bad). I added more specific declarations for my selectors, and voila, it was working again.

But I modified the query pagination selectors too. Because I thought that If I wanted to hide the page number I should had been hidding the entire block (makes more sense), and not only the & .page-numbers classes as I was doing. I also tried to solve the problem by adding more specificity.

So I went From:

@media screen and (max-width: 599px) {
    & .page-numbers {
        display: none;
    }
}

To:

@media screen and (max-width: 599px) {
    main nav.wp-block-query-pagination div.wp-block-query-pagination-numbers {
        display: none;
    }
}

Seems that the display property for the class .wp-block-query-pagination-numbers is computed/comes from the user-agent stylesheet.

My understanding is that I should be able to easily override that display: block with simpler CSS declarations (with less specificity), since it is not compared against other CSS declarations.

460px viewport and the page numbers are still displayed

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my_theme_style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

I tried enqueuing the style.css file and adding the CSS only there, and then it works. So it only doesn't work when applying the CSS through styles.blocks.core/query-pagination-numbers.css (custom css)

And one could think... It's my custom theme, I messed it up 😓... So I tried again with TT4. I've set a Posts page, and I made that posts page to use the pattern posts-one-column.php, I've added to that pattern the <!-- wp:query-pagination-numbers /--> block.

And I've added the following custom CSS (checking that the selector is correct):

"core/query-pagination-numbers": {
    "css": "@media screen and (max-width: 599px) { main nav.wp-block-query-pagination div.wp-block-query-pagination-numbers { display: none; } }"
}

On a 500px viewport the Media Query is not working either : /

I tried again over the site-title block:

"core/site-title": {
    "css": " @media screen and (max-width: 599px) { header p.wp-block-site-title { display: none; } }"
},

And it is still displayed : /

Used: WP 6.5-alpha-56968 + Only Gut 16.8.1

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[jeflopodev]

I'm still experiencing this issue with the latest versions ( 6.41 & 6.5-alpha-57126 with *Only* gutenberg 17.0.2 )

2023-11-19.05-45-09.mp4

Steps I followed to reproduce:

1. Download/Clone & install WordPress from https://github.com/WordPress/WordPress
2. Delete all the plugins
3. Install & activate Gutenberg 17.0.2
4. Activate / Use TwentyTwentyFour
5. Go to the editor and go into Styles > Blocks > Site title > Advanced > ADDITIONAL CSS
6. Add this CSS @media screen and (max-width: 599px) { .wp-block-site-title a { color: #f00 !important; } }
7. Check if the media query is working (title is colored in red when the viewport is <= 599px)

I have also checked that .wp-block-site-title a { color: #f00 !important; } is correct and it works without the media query. And that theme.json haven't had color styles applied to the site-title block. There's only a "text": "var(--wp--preset--color--contrast)" in styles > color & styles > link > color

My understanding is that the media query (in the additional css of the block) should override the styles in theme.json file.

But just to be sure in the Paragraph block I used a less common property than color. I used a letter-spacing instead:

[gyurmey2]

It appears that media queries are still not working.

[SirLouen]

Reproduction Report

Description

✅ This report validates that the issue can be reproduced.

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.29
• Server: Apache/2.4.62 (Debian)
• Database: mysqli (Server: 11.8.2-MariaDB-ubu2404 / Client: mysqlnd 8.2.29)
• Browser: Chrome 138.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Four 1.3
• MU Plugins: None activated
• Plugins:
  • Gutenberg 21.3.0-rc.1
  • Test Reports 1.2.0

Testing Instructions

• The same as provided here

Actual Results

1. ✅ Error condition occurs (reproduced).

Additional Notes

• Although it's not working in that area, I can confirm that they work on the main Editor ⇾ Styles section: Example

Supplemental Artifacts

Regular CSS working:

CSS with Media Query