No class added to body tag in editor for active page/post template

[jlvngs96]

In the classic editor, a body class is added to the editor, indicating the active post/page template. This is very useful when creating the editor specific stylesheet during theme development so the editor matches styles on the front end. For example, my default single post has a sidebar, but I also have a full width post/page template that removes the sidebar. So in the classic editor a body class is added for "page-template-full-width" for example, that lets me target that in the editor stylesheet. Would like this same functionality for Gutenberg. This is important so if the default is active, the editor body is one width, and if a page template is selected, the editor body is another width.

[chrisvanpatten]

Hi @jlvngs96 —

I took a look in the classic editor on a few sites I maintain and the active template is not applied as a class on the backend; only on the front-end.

I totally agree that this would be nice to have but unfortunately it has been raised a few times (#8162 and #7810 in particular) but it seems unlikely it'll happen. That said I'll let someone else from the Gutenberg core team chime in — I think the issue has been raised enough that it should definitely be reconsidered. I know I'd like to see it myself!

[jlvngs96]

It's in the editor "#tinymce" body tag that's in the iframe (not the body tag for the whole admin page). I have no special plugins that would be doing this. Def core:

[chrisvanpatten]

Oooh, interesting. I was looking at the actual body class. I can confirm it's there for me too.

In that case this might qualify as a backcompat issue. I'll tag it and let's see what the other folks say!

[webmandesign]

Hi guys,

I'm all for this to be included. I actually have the exact same issue as @jlvngs96 experiences. Was using the classes to target specific page/post template editor appearance and I think this should be kept in Gutenberg too.

Also, in my opinion it would be better if such classes are applied onto actual Gutenberg editor content area, not on admin body. So, on div.edit-post-visual-editor. This is open for discussion, surely.

If you can, could you also please allow filtering such classes. Currently, for example, it is possible to filter TinyMCE classes via tiny_mce_before_init hook.

Thanks!

[foreverpinetree]

Hi,
A class "page-template-**" is very useful when editing a page, because usually we need to change the backend layout according to the Page Template.
Although I can listen the select which in the Page Attributes to add a class to the body or somewhere, I don't know if it would change later, that's not a safe method.

Looking forward to this feature!

[webmandesign]

Hi guys (@chrisvanpatten),

Any update on this issue? Will the functionality be integrated with Gutenberg?

As my themes actually rely on page template body class change in TinyMCE editor, I'm still hesitating to update them for Gutenberg compatibility because the feature is not integrated in Gutenberg. As you can understand that would basically mean downgrading the user experience which I don't really want to do…

Thanks for any update provided!

[eddhurst]

Keen for this as well - we have some different block styling depending on the template you're on to better reflect the front-end. This works fine on CPT, as the CPT is in the body class, but there's no template class here as yet.

For now I'm going to need to add in some custom JS to achieve this, but it would be super useful going forwards.

[danielbachhuber]

@eddhurst Can you share the JavaScript you end up using so I can add to my Gutenberg Migration Guide?

[eddhurst]

@danielbachhuber

Looking at the way Gutenberg manipulates the classes - it's actually just hooking in and adding to the filter admin_body_class

This was fine for my purposes, so after I've manipulated my custom blocks I add in a hook to add in my class which already fires in the correct place so keeps it nice and tidy.

If you look in gutenberg.php, you can see on lines 192 and 486 how Gutenberg itself hooks into this:

/gutenberg.php: Line 192
add_filter( 'admin_body_class', 'gutenberg_add_admin_body_class' );

/gutenberg.php: Line 487
return "$classes gutenberg-editor-page is-fullscreen-mode is-dark-theme";
the admin_body_class filter is effectively a space separated list as you'd expect classes to be - you can add your own here with minimal fuss.

The way that WordPress looks to handle this, if we look at admin-header.php: https://core.trac.wordpress.org/browser/tags/4.9.8/src/wp-admin/admin-header.php#L197

It initialises the body with all the various classes:
/wp-admin/admin-header.php: Line 197
<body class="wp-admin wp-core-ui no-js <?php echo $admin_body_classes . ' ' . $admin_body_class; ?>">

And then below this adds in the following JS:
/wp-admin/admin-header.php: Line 199
document.body.className = document.body.className.replace('no-js','js');

If you wanted to do it in JS - this approach should work fine too.

[webmandesign]

@danielbachhuber

I'm actually also using JS to dynamically apply template class on Gutenberg's #editor container when a page template is selected/changed. Here is what I've come with:

<?php
add_action( 'enqueue_block_editor_assets', function() {
	wp_add_inline_script(
		'wp-edit-post',
		"
		// When changing page template, change the Gutenberg editor container class.
		( function( $ ) {
			wp.domReady( function() {
				var editorContainer     = $( '#editor' ),
				    templateSelectClass = '.editor-page-attributes__template select';

				editorContainer
					.on( 'change.set-editor-class', templateSelectClass, function() {
						var pageTemplate = $( this ).val() || 'default';

						pageTemplate = pageTemplate
							.substr( pageTemplate.lastIndexOf( '/' ) + 1, pageTemplate.length )
							.replace( /\.php$/, '' )
							.replace( /\./g, '-' );

						editorContainer
							.removeClass( function( index, className ) {
								return ( className.match( /\bpage-template-[^ ]+/ ) || [] ).join( ' ' );
							} )
							.addClass( 'page-template-' + pageTemplate );

						$( document ).trigger( 'editor-classchange' );
					} )
					.find( templateSelectClass ).trigger( 'change.set-editor-class' );
			} );
		} )( jQuery );
		"
	);
} );

This is basically an adapted version of original WordPress code and obviously, this is an example of a PHP function outputting the JS ;)

[designsimply]

I'm closing this issue in order to consolidate with #10640 and would like to note the discussion here has been useful and helpful and it will be linked from the other issue. Sometimes it's hard to choose which to keep when there are duplicates—in this case, the #10640 issue seemed better to me because it's very clear and concise and I am interested in keeping the easiest-to-grok issues open where possible.

Thank you for testing Gutenberg at this stage and for your open discussion on this topic!

[foreverpinetree]

@webmandesign
Thanks for your code. But if the Page Attributes is closed, then refresh the page, you will see that the editor container won't be applied a page-template class.

[websevendev]

@foreverpinetree Here's an alternative: #8162 (comment)

[strarsis]

Based on the code here, I made a little tutorial (sage9 based theme): https://discourse.roots.io/t/gutenberg-body-class-elements-by-template/15310