Call for Testing: Ability to Hide Blocks

A new feature is introduced in Gutenberg 21.8RC: the ability to hide blocks from the frontend.

This option provides more flexibility for working with content and layouts. Instead of deleting or moving a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. you don’t want published, you can temporarily hide it. The block remains in the editor, but it will not appear on the live site until the visibility is switched back on.

Why this matters

• Makes it easier to experiment with different layouts without losing content.
• Allows draft or placeholder content to stay visible in the editor but hidden from site visitors.
• Encourages non-destructive editing and smoother collaboration.
• Creates a foundation for future enhancements

Key Changes to Observe

• In the editor,
  • It adds a menu item to the block settings options to change the block’s visibility.
    • “Hide”: A “Hide” option appears on each block by default
    • “Show”: Clicking on “Hide”, the block setting toolbar should display the “Show” option.
  • In the List view, the visibility of multiple blocks can be changed simultaneously.

Test Steps

1. Install and activate the Gutenberg plugin (V21.8RC). Alternatively, you can test this with this playground link.
2. Navigate to the post, page, or template.
3. Select the block and click on the “Hide” control from the toolbar settings
4. Observe that the block is no longer visible in the editor, and the “Show” control should be toggled on for that block (Observe the List view)
5. Check the change in the front end, and the block should be hidden 
6. Now, turn off the hide setting in the editor
7. The block should reappear in the editor and the front end
8. Nested blocks: Place a few blocks inside a Group/Columns block and hide the parent.
   1. Confirm that all inner blocks are hidden
9. Multiple instances: Hide different blocks across the page and verify that only the chosen ones are excluded from the frontend.

Testing Instruction

Since this feature is newly introduced, it needs testing, and feedback is especially valuable.

Please share:

• Did the toggle behave as expected?
• Did you run into inconsistencies between the editor and the frontend?
• Were there any issues with nested, synced, or reusable blocks?

Your input will help refine this feature as it moves toward the WordPress 6.9 release.

Follow #71203 PR for more details. If you observe any related issues, please feel free to report them here.

📈Performance / Asset Check

Hidden blocks should not appear on the frontend, and their related CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site./JS should no longer be actively used. Optionally, you can verify this via the Network tab or CSS Coverage in DevTools. Visible blocks must continue loading normally. On small pages, coverage differences may be subtle; the key point is that hidden blocks do not add frontend markup or assets. Check #9213 PR for more details. If you would like to verify this, follow the steps in the comment.

If you’re unsure whether what you are experiencing is a bug, you can ask in the #outreach channel on the WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

Change Log

1.0.0 Initial Post

1.1.0 Add Performance check

Props to @wildworks @psykro for pre-publish review of this post.

#core-test, #full-site-editing, #gutenberg, #needs-testing