Skip to content

Instantly share code, notes, and snippets.

@nickcernis
Last active February 20, 2020 09:09
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save nickcernis/5aa7110a4d0eeba44729b44bced38aa7 to your computer and use it in GitHub Desktop.
Save nickcernis/5aa7110a4d0eeba44729b44bced38aa7 to your computer and use it in GitHub Desktop.
Add Genesis layout class to Gutenberg editor pages (admin)
// 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);
}
};
<?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' );
/* 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 */
@IvanPr
Copy link

IvanPr commented Feb 20, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment