In the recent updates of my
Meta Box extensions
Conditional Logic and
Show Hide, I have added full support for Gutenberg, which allows developers to toggle a
meta box or a field based on page template, post format, categories or custom taxonomies.
In order to perform this task, I need a good way to
detect if Gutenberg is active on the current screen. I found that the Gutenberg documentation is too technical and lack of such things. When I view it, I feel I’m reading a reference rather than docs or tutorial.
Anyway, the main question is
how to detect Gutenberg with JavaScript and PHP?
Detect Gutenberg via JavaScript
Gutenberg adds a lot of namespace via
wp global object. It’s quite obvious to use it to detect Gutenberg. So, I was using the following code:
function isGutenbergActive() {
return typeof wp !== 'undefined' && typeof wp.blocks !== 'undefined';
}
However, I found that checking with
wp is not always reliable, especially when you use plugins that also use this object.
There is a better way to
detect Gutenberg via JavaScript using the following code:
function isGutenbergActive() {
return document.body.classList.contains( 'block-editor-page' );
}
This technique uses
body class, where Gutenberg adds its own CSS class
block-editor-page. So, only when Gutenberg is active, the class is available.
Detect Gutenberg via PHP
To
detect if Gutenberg is active on the current screen via PHP, we can use the
current admin screen object. It gives us all the information about the current admin screen, including whether Gutenberg is active or not.
Here is the code:
function is_gutenberg_active() {
return get_current_screen()->is_block_editor();
}
It’s quite easy, isn’t it?
Hopefully, these tips can help you work with Gutenberg easier and faster. If you have a better way to detect Gutenberg via JavaScript or PHP, just let me know in the comments.
Thanks!