I believe Gutenberg content was iframed in WP 6.2 if all blocks are v3. I have used a function like below to add very important custom classes to my admin body tags which in turn alters how the content is presented. This is important for layout and consistency.
add_filter('admin_body_class', function ($classes) {
global $pagenow;
//check if the current page is post.php and if the post parameters set
if ( $pagenow ==='post.php' || $pagenow ==='post-new.php' ) {
global $post;
/* ... */
$classes .= ' super-important-editing-class';
}
return $classes;
});
I've searched like crazy to find a filter which makes me do the same thing on the iframes body tag ('block-editor-iframe__body editor-styles-wrapper ...').
Does anyone know a way to do this?
I believe Gutenberg content was iframed in WP 6.2 if all blocks are v3. I have used a function like below to add very important custom classes to my admin body tags which in turn alters how the content is presented. This is important for layout and consistency.
add_filter('admin_body_class', function ($classes) {
global $pagenow;
//check if the current page is post.php and if the post parameters set
if ( $pagenow ==='post.php' || $pagenow ==='post-new.php' ) {
global $post;
/* ... */
$classes .= ' super-important-editing-class';
}
return $classes;
});
I've searched like crazy to find a filter which makes me do the same thing on the iframes body tag ('block-editor-iframe__body editor-styles-wrapper ...').
Does anyone know a way to do this?
Finally, one year later, I have a solution. I guess it can be written smarter but this is what I've come up with if someone is interested.
In this answer I get class names from meta data values, but as you can se below they can be set directly or by some other functionality of choice.
functions.php
(notice the change from the filter admin_body_class to the action enqueue_block_assets).
function site_editor_styles() {
if ( is_admin() ) {
global $pagenow;
$classes = '';
if ( $pagenow ==='post.php' || $pagenow ==='post-new.php' ) {
global $post;
$post_type = get_post_type($post->ID);
$class1 = 'my-default-class-1';
$class2 = 'my-default-class-2';
/* If you use ACF you can use get_field() */
if( class_exists('ACF') ) {
/* Check if we're on a pattern */
if ($post_type == 'wp_block') {
$class1 = 'pattern-class-1';
$class2 = 'pattern-class-2';
} else {
$class1 = get_field('my_key', $post->ID);
$class1 = get_field('my_key', $post->ID);
}
}
/* If you don't use ACF or other alternative you can use get_post_meta($post->ID, 'your_meta_key', true); */
/*
if ($post_type == 'wp_block') {
$class1 = 'pattern-class-1';
$class2 = 'pattern-class-2';
} else {
$class1 = get_post_meta($post->ID, 'my_key', true);
$class1 = get_post_meta($post->ID, 'my_key', true);
}
*/
// Separate lines for clarity
$classes .= 'post-type-' . $post_type . ' ';
$classes .= 'my-class-' . $class1 . ' ';
$classes .= 'my-class-' . $class2;
}
// Enqueue or Javascript
wp_enqueue_script(
'custom-iframe-classes',
get_template_directory_uri() . '/assets/js/editor.js',
array('wp-blocks', 'wp-dom'),
filemtime( get_stylesheet_directory() . '/assets/js/editor.js' ),
true
);
// Pass the class names to the script
wp_localize_script('custom-iframe-classes', 'iframeBodyData', [
'classes' => $classes,
]);
}
}
add_action( 'enqueue_block_assets', 'site_editor_styles' );
editor.js
wp.domReady(() => {
// Attempt adding classes immediately if iframe is already available
function addClassesToIframeBody() {
const editorIframe = document.querySelector('iframe')
if (editorIframe) {
const editorBody= editorIframe.contentDocument.querySelector(".editor-styles-wrapper");
if (editorBody) {
editorBody.classList.add(...iframeBodyData.classes.split(' '));
console.log('Classes added to iframe body');
return true;
}
}
return false;
}
if (!addClassesToIframeBody()) {
// Observe `document.body` for the iframe addition
const observer = new MutationObserver(() => {
const editorIframe = document.querySelector('iframe')
if (editorIframe) {
const editorBody= editorIframe.contentDocument.querySelector(".editor-styles-wrapper");
if (editorBody) {
if (addClassesToIframeBody()) {
observer.disconnect();
console.log('Stopped observing - iframe body found and modified');
}
} else {
console.log('No body (.editor-styles-wrapper) found')
}
}
});
console.log('Starting MutationObserver on document.body');
observer.observe(document.body, { childList: true, subtree: true });
}
});
And to make stuff happen with the new classes added to <body> I also enqueue a stylesheet.
functions.scss
function site_enqueue_editor_styles() {
if ( is_admin() ) {
$editor_css_path = get_stylesheet_directory() . '/assets/dist/css/gutenberg.editor.min.css';
if (file_exists($editor_css_path)) {
$css_version = filemtime($editor_css_path);
} else {
$css_version = mt_rand();
}
wp_enqueue_style( 'admin-editor',
get_stylesheet_directory_uri() . '/assets/dist/css/gutenberg.editor.min.css',
false,
$css_version
);
}
}
add_action( 'enqueue_block_assets', 'site_enqueue_editor_styles' );
gutenberg.editor.scss
.block-editor-iframe__html.is-zoomed-out {
/* Styles for when zoomed out */
background-color: #e0e0e0;
.block-editor-iframe__body.editor-styles-wrapper {
padding: 0 2rem;
.editor-visual-editor__post-title-wrapper {
margin-top: 2rem;
}
}
}
.block-editor-iframe__body.editor-styles-wrapper {
/* This styles the whole body */
background-color: darkkhaki;
&.post-type-post {
/* styles for posts */
}
&.post-type-page {
/* styles for pages */
background-color: lightsalmon;
}
&.post-type-cpt {
/* styles for custom post type, change cpt to post type name */
}
&.my-default-class-1 .editor-visual-editor__post-title-wrapper {
/* this styles the title area */
background-color: skyblue;
padding: 1rem 5rem;
margin-top: 1rem !important;
}
&.my-default-class-1 .wp-block-post-content {
/* this styles the content area */
background-color: papayawhip;
padding: 5rem;
}
}