Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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 */
@carasmo

This comment has been minimized.

Copy link

@carasmo carasmo commented Jan 20, 2020

In Gutenberg, there's no .genesis-layout-selector class. There's also no value in the Default Layout. Plus it's not radio buttons. I'm not as brilliant with JS at all.

@nickcernis

This comment has been minimized.

Copy link
Owner Author

@nickcernis nickcernis commented Jan 20, 2020

@carasmo This code was written before Genesis moved the layout selector to the sidebar. I don't recommend using this at present, as it depends on manipulating the editor directly.

There's an issue in the Genesis repo to add classes to the editor once that's supported by WordPress core.

@IvanPr

This comment has been minimized.

Copy link

@IvanPr IvanPr commented Jan 30, 2020

Awesome! This is a must have.

@IvanPr

This comment has been minimized.

Copy link

@IvanPr IvanPr commented Feb 20, 2020

Nick, may I ask about the Genesis Page's 'Custom Classes' [Body Class, Post Class] setting - https://i.imgur.com/ULyCNxc.png

Is there a way to push those classes to the Gutenberg editor somehow?
I can only see those added in the front-end.

Thank you.

@nickcernis

This comment has been minimized.

Copy link
Owner Author

@nickcernis nickcernis commented Feb 20, 2020

@IvanPr There is not a safe way to do this at the moment – we would have to manipulate the DOM directly instead of using the React lifecycle. The result of manipulating the DOM directly is that class name additions are lost during React redraws, such as when switching from “Visual” to “Code” mode in the editor and back again.

When WP Core provides an API to adjust editor root classes, we can then add the same page/post classes safely. Currently this depends on WordPress/gutenberg#13339 (comment). We may contribute something to core to enable this, but I don't have a timeline at present.

@IvanPr

This comment has been minimized.

Copy link

@IvanPr 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
You can’t perform that action at this time.