wordpress-develop
wordpress-develop copied to clipboard
Block visibility supports: implement block visibility based on breakpoints
[!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
displayproperty to thesafecss_filter_attrfunction.
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