RSM Focus

by rsmspark

Description

A clearer way to build in Gutenberg.

Tired of a cluttered block editor when designing complex, responsive pages? RSM Focus turns the native Gutenberg experience into a professional, distraction-free design workspace.

Why Choose RSM Focus?

True 16:9 Focus Viewport for realistic layout decisions
Elegant toggleable wireframe overlays with block labels
Live Preview Mirror with Desktop (16:9), Tablet (3:4), and Mobile (9:16) views
Structure Overlay toggle on the preview for perfect alignment
Beautiful scroll animations with marketing presets
Per-breakpoint responsive visibility controls
Layout Band support for full-bleed sections

Broad Compatibility

Works seamlessly with Gutenberg and plays nicely with popular page builders including Elementor, Beaver Builder, Divi, and SiteOrigin (especially tight integration via shared widget/block support).

Part of the RSM Spark Suite — Production-grade, GDPR-ready, and HPOS compatible. Trusted by professional site builders and agencies.

Free vs Pro — This free plugin is fully functional for Focus mode, wireframe, preview, animations, layout bands, and responsive visibility (standard mobile/tablet bands). Additional tools are available in the separate RSM Focus Pro plugin from rsmspark.com.

Documentation

Product guides live on the RSMSpark documentation site. Editor JavaScript source is included under /src; rebuild with npm install && npm run build (see package.json).

Full documentation: https://rsmspark.com/documentation
Focus documentation: https://rsmspark.com/documentation/rsm-focus

Support

Full documentation: https://rsmspark.com/documentation
Support forum: https://rsmspark.com/support
Website: https://rsmspark.com

Installation

Download directly from WordPress.org.
If you already have RSM Spark (the free central hub) installed, you can install any combination of RSM plugins in one go from RSM Spark Plugins.
Minimum Requirements — WordPress 6.5+, PHP 8.0+.
Recommended — Latest WordPress version; modern browser for best editor experience.
Edit a post or page in the block editor and click Focus in the toolbar.

Faq

Does Focus work in the Site Editor?

Yes on block themes. You get the full 16:9 viewport, wireframe, and live preview mirror on templates, template parts, navigation, and patterns.

Can I toggle the wireframe on and off?

Yes. Wireframe visibility is fully toggleable from the Focus toolbar or status bar.

How do the device previews work?

The preview mirror supports Desktop (16:9), Tablet (3:4), and Mobile (9:16). Switch instantly while Structure Overlay stays synchronized.

Will RSM Focus slow down my site?

No. Focus is an editor-only enhancement. It adds no frontend assets or performance impact on your published pages.

Does it work with caching plugins and page builders?

Yes. It is compatible with major caching plugins and works alongside Elementor, Beaver Builder, Divi, and SiteOrigin.

Is it secure for production use?

Yes. RSM Focus follows strict security practices with proper nonces, sanitization, and permission checks. No critical or high findings in reviews. GDPR-ready.

Is there a Pro add-on?

Yes. RSM Focus Pro is a separate plugin from rsmspark.com with additional tools. This free directory plugin is fully usable on its own.

Where is the unminified editor source?

Human-readable JavaScript lives in the plugin /src directory (paired with build/index.js). Rebuild with npm install && npm run build using Node.js and @wordpress/scripts.

Reviews

Changelog

1.12.6

WordPress.org review: remove custom-breakpoint settings scaffolding and Pro-only Focus hub RSF admin from the free ZIP; drop per-breakpoint text-align attributes from free shared RSF; rename editor JS globals to rsmsparkFocus*.

1.12.5

WordPress.org review: remove locked Pro custom-breakpoint / text-align code from the free ZIP (soft upsell only); ship editor source under /src for Guideline 4.

[Full changelog available in the plugin or at https://rsmspark.com/documentation]