YS Editor Scope Wrapper

中文版本: README.zh-TW.md

Apply CSS scope classes to the WordPress Block Editor wrapper and iframe canvas, so wrapper-scoped CSS that only exists on the frontend also works inside the editor preview.

The problem

Many page-builder workflows write CSS as .scope-class .xxx { ... }:

• On the frontend — the page builder (GreenShift / GL Page Builder / etc.) injects <div class="scope-class"> around the_content, so .scope-class .xxx rules match.
• In the Block Editor — that wrapper does not exist. .editor-styles-wrapper has no scope-class on it, so every wrapper-scoped rule becomes dead. The editor shows raw text, no fonts, no colors, no layout.

This plugin closes that gap.

What it does

On every Block Editor load:

1. Reads the configured class list from ys_editor_scope_classes option.
2. Adds each class to .editor-styles-wrapper (and iframe[name="editor-canvas"] body, for the new iframe canvas mode).
3. Uses MutationObserver so iframe lazy-loading and editor remounting are handled.

The added classes are pure DOM additions — they are not written into post_content.

Auto-detection

The Settings screen automatically scans your published posts and surfaces candidate classes you can tick on/off: