Last active
February 20, 2020 09:09
-
-
Save nickcernis/5aa7110a4d0eeba44729b44bced38aa7 to your computer and use it in GitHub Desktop.
Add Genesis layout class to Gutenberg editor pages (admin)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Add genesis layout classes to the Block Editor. | |
// File lives in the theme's /js/ folder. | |
wp.domReady(function () { | |
yourTheme.updateLayoutClass(); | |
var layouts = document.querySelector(".genesis-layout-selector"); | |
if( layouts ) { | |
layouts.addEventListener("input", function (e) { | |
yourTheme.updateLayoutClass(); | |
}); | |
} | |
}); | |
var yourTheme = { | |
getLayout: function () { | |
var inputs = document.querySelectorAll(".genesis-layout-selector input"); | |
var layout = ""; | |
for (var i = 0, len = inputs.length; i < len; i++) { | |
if (inputs[i].checked) { | |
layout = inputs[i].getAttribute("id"); | |
break; | |
} | |
} | |
if (layout === "default-layout") layout = yourThemeConfig.defaultLayout; | |
return layout; | |
}, | |
setWrapperClass: function (layout) { | |
var root = document.querySelector(".editor-writing-flow"); | |
var classes = root.classList; | |
classes.forEach(function(c){ | |
if (c.includes("genesis-")) root.classList.remove(c); | |
}); | |
root.classList.add("genesis-" + layout); | |
}, | |
updateLayoutClass: function() { | |
var layout = yourTheme.getLayout(); | |
yourTheme.setWrapperClass(layout); | |
} | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
add_action( 'enqueue_block_editor_assets', 'theme_name_block_editor_js' ); | |
/** | |
* Enqueue Gutenberg editor JavaScript to add layout body classes in the admin area. | |
*/ | |
function theme_name_block_editor_js() { | |
wp_enqueue_script( | |
'your-theme-gutenberg-js', | |
get_stylesheet_directory_uri() . '/js/add-editor-layout-classes.js', | |
array( 'wp-dom' ), | |
CHILD_THEME_VERSION, | |
true | |
); | |
wp_localize_script( 'your-theme-gutenberg-js', 'yourThemeConfig', array( | |
'defaultLayout' => genesis_get_default_layout(), | |
)); | |
} | |
// Add support for editor styles. | |
add_theme_support( 'editor-styles' ); | |
// Enqueue editor styles. | |
add_editor_style( '/lib/gutenberg/style-editor.css' ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Example of adjusting the wide block width in editor styles based on the | |
new genesis-content-sidebar classes the above script adds. */ | |
.wp-block[data-align="wide"] { | |
max-width: 1092px; | |
} | |
.genesis-content-sidebar .wp-block[data-align="wide"], | |
.genesis-sidebar-content .wp-block[data-align="wide"] { | |
max-width: 800px; | |
} | |
/* Rest of styles here… */ | |
/* See Genesis Sample for examples: https://github.com/studiopress/genesis-sample/blob/develop/lib/gutenberg/style-editor.css */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you, Nick.
This was my impression.
I currently add a Custom Page class both to the Genesis's Custom Classes and the Gutenberg's Groups in order to reflect style changes in the back-end. I was not able to find a way to assign a class to the whole page in Gutenberg other than via templates and layouts....
Hopefully, we will be able to simply use the Genesis great features in the future.
Thank you.