Block visibility based on screen size: add backend block support

[ramonopoly]

WordPress 7.0 with build upon the block visibility block support introduced in 6.9, with functionality to allow hiding a block based on screen size.

Here are the relevant issues:

• ​Add option to hide blocks based on screen size
• ​Responsive previewing and device-specific editing

To that end, the backend block supports capability needs to be implemented with the following scope:

Block visibility block supports: Define and document the blockVisibility attribute to support both boolean (hide everywhere) and object format (per-device visibility). Define breakpoints constants consistent with those in the editor.

Frontend CSS output: Create PHP block support that generates CSS media queries and applies .wp-block-hidden-[device] classes to blocks based on their visibility settings.

A ​corresponding Gutenberg patch exists to guide development.

See also:

• ​WordPress 7.0: iteration issue for add option to hide blocks based on screen size
• ​Make Core post planning for 7.0

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

To test manually, enable the experiment:

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

<p>🔴 Hidden on MOBILE (≤599px) - You should see this on tablet and desktop only</p>



<p>🟡 Hidden on TABLET (600-959px) - You should see this on mobile and desktop only</p>



<p>🟢 Hidden on DESKTOP (≥960px) - You should see this on mobile and tablet only</p>



<p>🟣 Hidden on MOBILE and DESKTOP - You should only see this on tablet (600-959px)</p>



<p>🔵 Hidden on MOBILE and TABLET - You should only see this on desktop (≥960px)</p>



<p>🟠 Hidden on TABLET and DESKTOP - You should only see this on mobile (≤599px)</p>



<p>✅ Visible on ALL breakpoints - You should always see this</p>



<p>❌ Completely HIDDEN (boolean false) - You should never see this</p>

​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.