True-to-Site Block Editor

What it helps you do

Edit pages while the canvas looks like the live site — same fonts, colors, button styles, and spacing — so you spend less time toggling between Preview and the front end.

Where to find it

  • Any Pages or Posts edit screen in the block editor.
  • The editing canvas (center) shows themed content; the sidebar and toolbar use separate chrome styles so controls stay readable.

How to use it

  1. Open a page or post in the block editor as usual.
  2. Build with Dirigible blocks — typography, buttons, and widths should match Customizer choices without extra setup.
  3. Use the responsive preview icons in the editor toolbar to check tablet and mobile layouts.
  4. When in doubt, click Preview or view the published URL — the editor is close, not a pixel-perfect browser match for every block.

What happens automatically

  • The editor loads the same front-end stylesheets the site uses, scoped to the editing canvas.
  • Compiled theme variables (palette, type scale, spacing) inject into the iframe so headings and paragraphs pick up your brand.
  • Dirigible Fonts families load with the same @font-face rules as the live site.
  • Google Fonts, Typekit, and other embeds from Scripts & Embeds → Embed Fonts are fetched for the editor preview.
  • Additional CSS from the Customizer is cached and applied inside the editor when selectors match block markup.
  • Floating block appenders and column hover states reduce layout jump while you edit.

Things to know

  • The editor iframe cannot mirror every front-end quirk (sticky headers, scroll animations, and some third-party scripts only run on the live site).
  • Additional CSS aimed at rare front-end selectors may not appear in the editor if block HTML differs — test on the front end for critical tweaks.
  • WooCommerce admin screens do not load Dirigible editor styles — this applies to pages and posts.
  • Changing Styles in the Customizer updates the editor after you publish Customizer changes (and may require refreshing an open edit tab).

Related settings and guides