Skip to content

Instantly share code, notes, and snippets.

@smeric
Created Sep 16, 2021
Embed
What would you like to do?
Use this javascript code to add classes to the .is-root-container 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).
/**
* Philip Walton implementation of "container queries"
*
* Use inline javascript 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/
*/
document.addEventListener(
"readystatechange",
(e) => {
if( e.target.readyState === 'complete' && "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 .is-root-container"));
}
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment