Responsive Container View

Block Overview

Property	Value
Name	`prc-block/responsive-container-view`
Title	Responsive View
Category	`design`
Version	0.1.0
Description	A block of blocks that appears and hides at specific viewport widths.
Example	Yes (`deviceType` + `min` with `core/html` sample — inserter preview; parent is controller)

Supports

Feature	Enabled
HTML editing	No
Anchor	Yes
Spacing	blockGap, padding
Typography	fontSize, fontFamily

Attributes

Attribute	Type	Default	Description
`min`	`number`	(none)	Minimum viewport width (px) at which this view becomes visible.
`max`	`number`	(none)	Maximum viewport width (px) at which this view becomes visible.
`orientation`	`string`	`"vertical"`	Layout orientation of inner blocks (`vertical` or `horizontal`).
`deviceType`	`string`	(none)	Pre-defined device type. Enum: `desktop`, `tablet`, `mobile`.
`additionalStyles`	`string`	(none)	Custom CSS styles scoped to this view. Classes are auto-prefixed with the block's unique ID.

Available Styles

None defined in block.json.

Block Variations

Variation	Device Type	Min (px)	Max (px)	Scope
Default	(none)	980	0	inserter
Desktop	`desktop`	980	(none)	inserter, transform
Tablet	`tablet`	480	979	inserter, transform
Mobile	`mobile`	0	479	inserter, transform

Inner Blocks

Accepts any blocks. The default template includes a single core/html block.

Parent / Ancestor Requirements

Required parent: prc-block/responsive-container-controller

This block can only be used inside a Responsive Container Controller.

Usage Instructions

This block is automatically inserted as a child of the Responsive Container controller.
In the block inspector, configure the Responsive Range:
- Minimum: The smallest viewport width (px) at which this view displays.
- Maximum: The largest viewport width (px) at which this view displays.
- Use the Pre-Defined Device Ranges dropdown to quickly set Desktop (980+), Tablet (480-979), or Mobile (0-479).
The min/max values are automatically constrained based on sibling views to prevent overlapping ranges.
Optionally add Additional Styles in the inspector — custom CSS that will be scoped to this view block.
Place your content inside the view. A notice banner shows the current viewport range.

Inserter preview

block.json defines an example with deviceType: desktop, min: 980, and a core/html inner block with sample markup — aligned with the default core/html template in the edit screen.

Block Markup Example

<div
	class="wp-block-prc-block-responsive-container-view"
	id="viewhash1"
	style="display: none;"
>
	<!-- Inner content blocks -->
</div>

PHP Rendering

The block is server-side rendered via Responsive_Container_View::render_callback():

Assigns a unique block ID from the parent controller, or falls back to wp_unique_id() (no longer md5).
Sets display: none as the default inline style (the parent controller's media queries toggle visibility).
Renders InnerBlocks HTML without re-running wp_kses on already-sanitized output.
If additionalStyles are provided, processes CSS class selectors by prefixing them with the block's unique ID for scoping.
Outputs additional styles in an inline <style> tag within the view wrapper.

Frontend Interactivity

No view script. Visibility is controlled by CSS media queries generated by the parent controller.

prc-block/responsive-container-controller — The parent wrapper block that generates media queries and manages the responsive views.