Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Page Template specific editor styles for the WordPress Block Editor (Gutenberg)
const {
subscribe,
select
} = wp.data;
/**
* Add dark-mode class to block-editor based on selected page template
*/
wp.domReady( () => {
const postType = select( 'core/editor' ).getCurrentPostType();
if ( postType === 'page' ) {
// get element to attach the darkmode class
var element = document.getElementById("editor");
// Subscribe to editor state changes.
let checkRequiredField = subscribe( () => {
const template = select('core/editor').getEditedPostAttribute( 'template' ) // get selected page template
if ( template.includes('dark') ) {
element.classList.add("dark-mode-editor");
element.classList.add("page-template-dark");
} else {
element.classList.remove("dark-mode-editor");
element.classList.remove("page-template-dark");
}
} );
}
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.