Forked from nickcernis/add-editor-layout-classes.js
Created
January 28, 2019 23:10
-
-
Save mjsdiaz/e580f4aad60cba8703574c6be8ef6258 to your computer and use it in GitHub Desktop.
Add Genesis layout class to Gutenberg editor pages (admin)
This file contains 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"); | |
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 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 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