Skip to content

Instantly share code, notes, and snippets.

@smeric
Last active April 22, 2020 21:42
Show Gist options
  • Save smeric/b5f984c9b8f20cc547baba6f4c48e634 to your computer and use it in GitHub Desktop.
Save smeric/b5f984c9b8f20cc547baba6f4c48e634 to your computer and use it in GitHub Desktop.
Use this javascript code to add classes to the .block-editor__typewriter block just following the .editor-styles-wrapper block. Those classes are here to mimick front-end breakpoints because of ineffectiveness of media queries. See https://sebastien-meric.com/gutenberg-responsive-container-queries/ (in french).
<?php
/**
* Enqueue in editor pages a specific editor-script.js file
*/
function my_theme_editor_container_query() {
// Load the editor script within Gutenberg.
wp_enqueue_script( 'my_theme_editor_container_query', get_stylesheet_directory_uri() .'/editor-script.js' );
}
add_action( 'enqueue_block_editor_assets', 'my_theme_editor_container_query' );
?>
/**
* Philip Walton implementation of "container queries"
*
* Use this javascript code to add classes to the .block-editor__typewriter block just following
* the .editor-styles-wrapper block. Those classes are here to mimick front-end breakpoints.
* As .editor-styles-wrapper container replaces front-end body and because of the 2 sidebars
* (WordPress left menu and Gutenberg right settings sidebar), traditional media queries could
* be very complicated to use. By using those classes for breakpoints it is much more easier
* to simulate front-end sidebars in the back-end editor.
*
* Classes and breakpoints :
* .small-container class added beyond 1px width
* .medium-container class added beyond 992px width
* .large-container class added beyond 1170px width
*
* @see https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
*/
window.addEventListener(
"DOMContentLoaded",
(e) => {
if("ResizeObserver" in self){
var ro = new ResizeObserver(function(entries){
entries.forEach(function(entry){
/**
* Those breakpoints are theme dependant
*/
var breakpoints = {
"small-container" : 1,
"medium-container": 992,
"large-container" : 1170
};
Object.keys(breakpoints).forEach(function(breakpoint){
var minWidth = breakpoints[breakpoint];
entry.contentRect.width >= minWidth
? entry.target.classList.add(breakpoint)
: entry.target.classList.remove(breakpoint);
});
});
});
ro.observe(document.querySelector(".editor-styles-wrapper>.block-editor__typewriter"));
}
}
);
/* So, this declaration, in the editor-style.css file for example : */
.medium-container .block-editor-block-list__layout {
/* any css declarations... */
}
/* would now be equivalent to this media query (if there were no sidebars) : */
@media (min-width: 992px){
.block-editor-block-list__layout {
/* any css declarations... */
}
}
/* because the .medium-container class is dynamicaly added when the div.editor-styles-wrapper
* width is greater than 992px. */
/* Actualy, with both sidebars visible, the equivalent media query would be (min-width: 1186px)
* and it will be different with a folded WordPress menu and/or without the Gutenberg setting
* sidebar...
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment