Last active
May 10, 2019 17:10
-
-
Save rogerlos/9c156a580e2a3cfaf862b837cc01e015 to your computer and use it in GitHub Desktop.
Simple script that will add a way to change WordPress Gutenberg editor styles based on template chosen for the post or page.
This file contains hidden or 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
/** | |
* License: GPLv2 | |
* Created by Roger Los (rogerlos.com) | |
* https://github.com/rogerlos | |
*/ | |
jQuery( function ( $ ) { | |
/** | |
* Some values needed for this to work. The actual select is not set in this constant as jQuery won't | |
* catch its value changing, in my experience... | |
* | |
* CONTROL_WRAPPER - jQuery selector; Required, Gutenberg wrapper containing the template dropdown | |
* APPEND_TO - jQuery selector; Required, Where you would like to append your template class in the editor | |
* CLASS_PREFIX - String; Optional, will add a prefix before your template class | |
*/ | |
const CONTROL_WRAPPER = '.editor-page-attributes__template' ); | |
const APPEND_TO = '#editor'; | |
const CLASS_PREFIX = 'mytheme-template-'; | |
// keeps track of the chosen template | |
let CURRENT = ''; | |
/** | |
* After the editor has loaded: | |
* 1. Find the template select control | |
* 2. Add class to your chosen DOM object | |
* 3. Watch for new template selection | |
*/ | |
$(window).on('load', function() { | |
let $template = $( CONTROL_WRAPPER ).find( 'select' ); | |
editor_add_class( $template.val() ); | |
$template.on( 'change', function() { | |
editor_add_class( $(this).val() ); | |
}); | |
}); | |
/** | |
* Adds template class to APPEND_TO. | |
* | |
* @param {string} value - New template file name, including extension | |
*/ | |
function editor_add_class( value ) { | |
let $wrapper = $( APPEND_TO ); | |
// make sure value is set | |
value = typeof( value ) === 'undefined' ? '' : value; | |
// dancing: the old template class is removed and the new one added | |
$wrapper.removeClass( CURRENT ); | |
CURRENT = editor_class( value ); | |
$wrapper.addClass( CURRENT ); | |
} | |
/** | |
* Mashes together chosen prefix with the template filename after stripping | |
* the "php" extension. | |
* | |
* @param {string} template - Value gleaned from template select control | |
* @returns {string} | |
*/ | |
function editor_class( template ) { | |
let regex = /\.php/i; | |
template = template.replace( regex, '' ); | |
return CLASS_PREFIX + template; | |
} | |
} ); |
This file contains hidden or 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 | |
/** | |
* License: GPLv2 | |
* Created by Roger Los (rogerlos.com) | |
* https://github.com/rogerlos | |
* | |
* The code below assumes use in a theme, and that the JS file above is within theme's 'js' directory. | |
* Adjust to suit if you're working within a plugin. | |
*/ | |
/** | |
* Adds JS to admin. | |
*/ | |
function add_template_class_to_gutenberg() { | |
wp_enqueue_script( | |
'gutenberg-template-class', | |
get_stylesheet_directory() . '/js/add_template_to_gutenberg_editor.js', | |
[ 'jquery' ], | |
'1.0', | |
true | |
); | |
} | |
/** | |
* Adds CSS sheet to editor. | |
*/ | |
function add_editor_css() { | |
wp_enqueue_style( 'mytheme-gutenberg-css', get_stylesheet_directory() . '/css/sample_editor.css' ); | |
} | |
// You could potentially add the JS as a block asset as well, but I haven't tried it. | |
add_action( 'enqueue_block_assets', 'add_editor_css' ); | |
add_action( 'admin_enqueue_scripts', 'add_template_class_to_gutenberg' ); |
This file contains hidden or 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
/* Here's an example where different editor widths are set for different templates */ | |
/* All of this theme's theoretical templates use a 1000px width, except a sidebar */ | |
/* template 'page-with-sidebar.php' */ | |
.wp-block { | |
max-width: 1000px; | |
} | |
.mytheme-template-page-with-sidebar { | |
.wp-block { | |
max-width: 600px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment