Skip to content

Instantly share code, notes, and snippets.

@derweili
Created February 17, 2020 10:55
Show Gist options
  • Save derweili/6c5b32f414a4895f34eff515b2b24d42 to your computer and use it in GitHub Desktop.
Save derweili/6c5b32f414a4895f34eff515b2b24d42 to your computer and use it in GitHub Desktop.
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