Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save mjsdiaz/e580f4aad60cba8703574c6be8ef6258 to your computer and use it in GitHub Desktop.
Save mjsdiaz/e580f4aad60cba8703574c6be8ef6258 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");
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 */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment