Skip to content

[N/A] VigetWP: Front-end body classes in the editor canvas - #295

Open
bd-viget wants to merge 1 commit into
mainfrom
bd/editor-canvas-body-classes
Open

bd-viget wants to merge 1 commit into
mainfrom
bd/editor-canvas-body-classes

Conversation

@bd-viget

Copy link
Copy Markdown
Contributor

Summary

The editor canvas iframe only gets editor classes, so page-scoped styles like .post-type-archive-{type} ... don't apply in the Site Editor. This adds the matching front-end body classes to the canvas.

New VigetWP\Admin\EditorBodyClasses enqueues src/assets/js/editor-body-classes.js, which reads the template/post being edited:

  • archive-{type} templates → archive post-type-archive post-type-archive-{type}
  • single-{type} templates and posts → single single-{type}
  • Pages → page

It reapplies when the canvas iframe reloads or you switch templates. It's a close approximation of the front end classes, not a 1:1 copy.

Issues

  • N/A

Testing Instructions

  1. Register a CPT with an archive, and add a style scoped to it, e.g. .post-type-archive-{type} .wp-block-post-title { color: red; }
  2. Open its archive-{type} template in the Site Editor
  3. Confirm the canvas <body> has archive post-type-archive post-type-archive-{type} and the style applies
  4. Switch to another template and confirm the classes update

Screenshots

N/A

🤖 Generated with Claude Code

https://claude.ai/code/session_01AnE8gr5CL5zMoLydyGFRaZ

The block editor canvas iframe only gets editor classes, so page-scoped styles like .post-type-archive-{type} don't apply while editing. A small editor script reads the template or post being edited and adds the matching front-end classes to the canvas body: archive-{type} templates get archive post-type-archive post-type-archive-{type}, single-{type} templates and posts get single single-{type}, and pages get page. It reapplies when the canvas iframe reloads or the edited entity changes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Claude-Session: https://claude.ai/code/session_01AnE8gr5CL5zMoLydyGFRaZ
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant