Add Genesis layout class to Gutenberg editor pages (admin)

add-editor-layout-classes.js

// 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);
    }
};

functions.php

<?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' );

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 */

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.

@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.

Awesome! This is a must have.

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.

@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.

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.