Block visibility support: use CSS range syntax for media queries

[ramonjd]

What?

Follow up to: #73994

• Refactor media query generation in block-visibility.php to use 'width <=', 'width >=', and range syntax for breakpoints.
• Update corresponding tests in block-visibility-test.php.

See: WordPress/wordpress-develop#10629 (review)

Props to @westonruter for the nudge

Why?

I'll quote from WordPress/performance#1696

The max-width numbers are coming from od_get_breakpoint_max_widths() with the min-width numbers being one greater than the previous max-width.

However, could there be an issue where windows are sized sub-pixel dimensions, so that a window is for example 601.5px wide? In this case, neither of these rules would apply and it would be better to use the new CSS range syntax (Can I use?). See writeup.

How?

Use range syntax instead of adding 1px to the next breakpoint.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using#targeting_media_features

Testing

Unit tests:

npm run test:unit:php:base -- --filter=WP_Block_Supports_Block_Visibility_Test

To test manually, enable the experiment:

Then copy and paste this into your post editor, publish and view the frontend.

<!-- wp:paragraph {"metadata":{"blockVisibility":{"mobile":false}}} -->
<p>🔴 Hidden on MOBILE (≤599px) - You should see this on tablet and desktop only</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"metadata":{"blockVisibility":{"tablet":false}}} -->
<p>🟡 Hidden on TABLET (600-959px) - You should see this on mobile and desktop only</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"metadata":{"blockVisibility":{"desktop":false}}} -->
<p>🟢 Hidden on DESKTOP (≥960px) - You should see this on mobile and tablet only</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"metadata":{"blockVisibility":{"mobile":false,"desktop":false}}} -->
<p>🟣 Hidden on MOBILE and DESKTOP - You should only see this on tablet (600-959px)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"metadata":{"blockVisibility":{"mobile":false,"tablet":false}}} -->
<p>🔵 Hidden on MOBILE and TABLET - You should only see this on desktop (≥960px)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"metadata":{"blockVisibility":{"tablet":false,"desktop":false}}} -->
<p>🟠 Hidden on TABLET and DESKTOP - You should only see this on mobile (≤599px)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"metadata":{"blockVisibility":{"mobile":true,"tablet":true,"desktop":true}}} -->
<p>✅ Visible on ALL breakpoints - You should always see this</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"metadata":{"blockVisibility":false}} -->
<p>❌ Completely HIDDEN (boolean false) - You should never see this</p>
<!-- /wp:paragraph -->

Kapture.2025-12-14.at.19.37.29.mp4

Make sure to test with the experiment off as well. The last item should never show with the experiment on and off.

[westonruter]

This is looking great.

While partially stylistic choice, I find either using sprintf() or string interpolation to make the string literals easier to read.

[ramonjd]

While partially stylistic choice, I find either using sprintf() or string interpolation to make the string literals easier to read.

Much better, thank you!

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ramonjd]

Updated this with the feedback from WordPress/wordpress-develop#10629 as well (both should be synced now)

[tellthemachines]

Why is the check no longer needed? We have similar checks in all the other places we're using gutenberg_style_engine_get_stylesheet_from_css_rules.

[ramonjd]

@westonruter picked it up over at WordPress/wordpress-develop#10629 (comment)

By this point, $hidden_on isn't empty, so the loop runs at least once and $css_rules has at least one element.

gutenberg_style_engine_get_stylesheet_from_css_rules already handles empty values too.

[tellthemachines]

LGTM!

[ramonjd]

Thanks for the quick review, folks! 🙇🏻