Context Navigation

← Previous Ticket
Next Ticket →

#64414 closed enhancement (fixed)

Block visibility based on screen size: add backend block support

Reported by:	ramonopoly	Owned by:	ramonopoly
Priority:	normal	Milestone:	7.0
Component:	Editor	Version:	7.0
Severity:	normal	Keywords:	gutenberg-merge has-patch has-unit-tests add-to-field-guide needs-dev-note
Cc:		Focuses:

Description

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:

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.

Change History (5)

This ticket was mentioned in PR #10629 on WordPress/wordpress-develop by @ramonopoly.

7 months ago #1

Keywords has-patch has-unit-tests added

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>