Responsive Gutenberg
4WP Responsive
Responsive controls for core Gutenberg blocks — per-breakpoint spacing, visibility, font-size, and alignment. Theme.json-first, editor-friendly, and no front-end JavaScript.
WordPress 6.0+ · PHP 7.4+ · GPL v2+ · Open source on GitHub (WordPress.org listing not submitted)
4WP Responsive is part of the 4WP suite — responsive breakpoint controls for the Block Editor without custom blocks or front-end scripts. Source and documentation live on GitHub; an official WordPress.org listing has not been submitted yet.
Responsive Gutenberg blocks without a page builder
Set different padding, margin, font-size, text alignment, and visibility for Desktop, Tablet, and Mobile — directly in the block inspector. The editor preview follows the selected device mode; the front end receives utility CSS classes and CSS variables only.
What it does today
- Responsive spacing — padding and margin per side (top, right, bottom, left) for each breakpoint.
- Responsive visibility — hide or show a block only on Desktop, Tablet, or Mobile.
- Responsive typography — font-size per breakpoint for blocks that support typography controls.
- Responsive alignment — text align left, center, right, or justify per breakpoint.
- Core block compatible — Heading, Paragraph, Group, List, and any block with the same feature supports.
- Editor sync — hidden blocks are dimmed in the editor instead of removed; device tabs match preview.
How it works
theme.json presets map to utility classes — for example has-forwp-padding-top-mobile-40, has-forwp-font-size-desktop-large, or has-forwp-text-align-mobile-center.
Custom values (e.g. 150px, 2rem) use a has-forwp-*-custom class plus a CSS variable on the block, such as --forwp-padding-top-mobile: 150px; — keeping markup clean while allowing arbitrary sizes.
The plugin generates a single CSS file cached with a hash under wp-content/uploads/4wp-responsive/ by default (path configurable in settings).
Editor UI
Open any supported block and find Responsive Spacing in the sidebar — tabs for Desktop, Tablet, and Mobile with sections for Padding, Margin, Font Size, Alignment, and Visibility. Each tab shows the active breakpoint width when available.
Perfect for
- Block theme teams that want breakpoint-specific spacing without duplicating sections
- Agencies shipping FSE sites with theme.json design tokens
- Developers who prefer CSS classes over inline styles and want zero front-end JavaScript
- Sites that need mobile-only or desktop-only visibility on standard core blocks
Key advantages
Theme.json-first responsive controls — minimal markup, safe fallback, production-ready CSS
Theme.json-first
Spacing and font-size presets come from the active theme. Breakpoints can be defined in theme.json under settings.custom.breakpoints.
Standard blocks
No custom block lock-in — extend core Gutenberg blocks you already use. Works with any block that exposes the same spacing, typography, and alignment supports.
Clean CSS output
Utility classes and CSS variables only — no front-end JS. Content stays readable if the plugin is deactivated; custom values never rely on inline padding or margin.
Settings & requirements
Configure the plugin under Settings → 4WP Responsive. Breakpoints are shown in a table with their active source: theme.json (when settings.custom.breakpoints is defined), plugin settings when the theme has none, or built-in defaults. If the theme owns breakpoints, custom fields in the plugin are disabled to avoid conflicts.
| WordPress | 6.0 or higher |
| PHP | 7.4 or higher |
| Recommended | Block theme with theme.json for spacing and font-size presets |
| Distribution | GitHub — WordPress.org listing not submitted |
| Generated CSS | wp-content/uploads/4wp-responsive/ (path override available) |
Part of the 4WP Bundle ecosystem — responsive block tooling alongside FAQ, Style Switcher, and other Gutenberg-first plugins.
FAQ
Common questions about responsive Gutenberg controls — wrapped with 4WP FAQ for Schema JSON-LD when the FAQ plugin is active
What is 4WP Responsive?
4WP Responsive adds Desktop, Tablet, and Mobile controls for spacing, visibility, font-size, and text alignment on core Gutenberg blocks — through the block inspector, without custom blocks.
Is 4WP Responsive on WordPress.org?
Not yet. The plugin has not been submitted to the official WordPress.org directory. Install and review the source from the GitHub repository.
Do I need a custom block?
No. The plugin extends blocks that already support spacing, typography, and alignment — such as Heading, Paragraph, Group, and List — via sidebar controls.
Does it add JavaScript on the front end?
No. Output is limited to utility CSS classes and CSS variables. A single generated stylesheet handles responsive rules — no front-end script dependency.
How does it use theme.json?
Spacing and font-size presets are read from the active theme’s theme.json. Breakpoints can be defined in settings.custom.breakpoints; when present, they override plugin defaults and lock conflicting admin fields.
What happens if I deactivate the plugin?
Block content remains intact. Responsive utility classes and variables stop applying, so layouts may look different — but no block markup is destroyed. This is by design for a safe fallback.
Can I use custom spacing values?
Yes. Presets use named utility classes; arbitrary values use a has-forwp-*-custom class with a CSS variable (for example --forwp-padding-top-mobile: 150px) instead of inline styles.
Where is the generated CSS stored?
By default under wp-content/uploads/4wp-responsive/, cached with a content hash. You can override the storage path in Settings → 4WP Responsive if your deployment requires a fixed location.
Try responsive controls on core blocks
Clone the repository, activate the plugin, and set per-breakpoint spacing and visibility from the block inspector — theme.json-first, no front-end JS.