wordpress-develop icon indicating copy to clipboard operation
wordpress-develop copied to clipboard

Block visibility supports: implement block visibility based on breakpoints

Open ramonjd opened this issue 1 month ago • 2 comments

[!NOTE] The feature is still in an experiment in Gutenberg, so this PR is a placeholder for stabilization. See: https://github.com/WordPress/gutenberg/pull/73994

This PR syncs the changes in https://github.com/WordPress/gutenberg/pull/73994. It:

  • implements breakpoint visibility support in block rendering, allowing blocks to be hidden or shown based on defined breakpoints.
  • introduces the display property to the safecss_filter_attr function.

Unit tests:

npm run test:php -- --filter Tests_Kses 
npm run test:php -- --filter Tests_Block_Supports_Block_Visibility

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

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

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

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

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

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

<!-- wp:paragraph {"metadata":{"blockVisibility":{"viewport":{"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 -->

https://github.com/user-attachments/assets/45f86b73-f8f8-4763-a1eb-2303fda96105

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

Trac ticket: https://core.trac.wordpress.org/ticket/64414

ramonjd avatar Dec 15 '25 02:12 ramonjd