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

wp-content/mu-plugins/viget-wp/src/assets/js/editor-body-classes.js

@@ -0,0 +1,74 @@
+/**
+ * Adds the front end's template body classes to the block editor canvas, so
+ * page-scoped styles (e.g. `.post-type-archive-{type} ...`) apply while editing.
+ *
+ * @package VigetWP
+ */
+
+(function (wp) {
+	if (!wp?.data) {
+		return;
+	}
+
+	const CANVAS = 'iframe[name="editor-canvas"]';
+
+	// Body classes WordPress adds on the front end for the template or post being edited.
+	const getClasses = () => {
+		const editor = wp.data.select('core/editor');
+		const type = editor?.getCurrentPostType();
+
+		if (!type) {
+			return [];
+		}
+
+		if ('wp_template' === type) {
+			const slug = String(editor.getCurrentPostId() ?? '').split('//').pop();
+			const [, kind, postType] = slug.match(/^(archive|single)-(.+)$/) ?? [];
+
+			if ('archive' === kind) {
+				return ['archive', 'post-type-archive', `post-type-archive-${postType}`];
+			}
+
+			if ('single' === kind) {
+				return ['single', `single-${postType}`];
+			}
+
+			return [];
+		}
+
+		return 'page' === type ? ['page'] : ['single', `single-${type}`];
+	};
+
+	const apply = () => {
+		const body = document.querySelector(CANVAS)?.contentDocument?.body;
+
+		if (!body) {
+			return;
+		}
+
+		const next = getClasses();
+		const previous = (body.dataset.vigetwpBodyClasses ?? '').split(' ').filter(Boolean);
+
+		if (previous.join(' ') === next.join(' ') && next.every((name) => body.classList.contains(name))) {
+			return;
+		}
+
+		body.classList.remove(...previous);
+		body.classList.add(...next);
+		body.dataset.vigetwpBodyClasses = next.join(' ');
+	};
+
+	wp.data.subscribe(apply);
+
+	// The canvas iframe reloads on its own (template switches, device previews).
+	new MutationObserver(() => {
+		document.querySelectorAll(CANVAS).forEach((iframe) => {
+			if (!iframe.dataset.vigetwpBodyClassesBound) {
+				iframe.dataset.vigetwpBodyClassesBound = '1';
+				iframe.addEventListener('load', apply);
+			}
+		});
+
+		apply();
+	}).observe(document.body, { childList: true, subtree: true });
+})(window.wp);

wp-content/mu-plugins/viget-wp/src/classes/Admin/EditorBodyClasses.php

@@ -0,0 +1,50 @@
+<?php
+/**
+ * Editor Body Classes
+ *
+ * @package VigetWP
+ */
+
+namespace VigetWP\Admin;
+
+/**
+ * Adds front-end template body classes to the block editor canvas, so
+ * page-scoped styles apply while editing.
+ */
+class EditorBodyClasses {
+
+	/**
+	 * EditorBodyClasses constructor.
+	 */
+	public function __construct() {
+		$this->load_assets();
+	}
+
+	/**
+	 * Enqueue the editor script.
+	 *
+	 * @return void
+	 */
+	private function load_assets(): void {
+		add_action(
+			'enqueue_block_editor_assets',
+			function () {
+				$version = vigetwp()->get_version();
+
+				if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
+					$version = filemtime( VIGETWP_PLUGIN_PATH . 'src/assets/js/editor-body-classes.js' );
+				}
+
+				wp_enqueue_script(
+					'vigetwp-editor-body-classes',
+					VIGETWP_PLUGIN_URL . 'src/assets/js/editor-body-classes.js',
+					[ 'wp-data' ],
+					$version,
+					[
+						'in_footer' => true,
+					]
+				);
+			}
+		);
+	}
+}

wp-content/mu-plugins/viget-wp/src/classes/Core.php

@@ -13,6 +13,7 @@
 use VigetWP\Admin\Blocks;
 use VigetWP\Admin\ColorScheme;
 use VigetWP\Admin\DashboardWidgets;
+use VigetWP\Admin\EditorBodyClasses;
 use VigetWP\Admin\FileEditors;
 use VigetWP\Admin\Footer;
 use VigetWP\Admin\CustomScripts;
@@ -169,6 +170,7 @@ private function init_modules(): void {
 		new TinyMCE();
 		new DashboardWidgets();
 		new FileEditors();
+		new EditorBodyClasses();
 
 		// Plugins
 		new CreateBlockTheme();