Gutenberg: How to detect "is-gutenberg" via PHP and JS

[elliotcondon]

What is the easiest way to detect if the current edit screen is using Gutenberg in both PHP and JS.

For example, in PHP:

add_action('init', 'my_init');

function my_init() {

    // Detect if is Gutenberg.
    if( is_gutenberg_editor_active() ) {
        // Do something.
    } else {
        // Do something else.
    }
}

And in JS:

$(document).ready(function(){

    // Detect if is Gutenberg.
    if( wp.isGutenbergActive() ) {
        // Do something.
    } else {
        // Do something else.
    }

 });

⚠️ Please keep all replies on topic. This should be a simple and straightforward question to answer without philosophical misdirection about "Classic vs Gutenberg" or "React vs PHP".

Thanks
Elliot

[rilwis]

For JS, I'm using:

function isGutenbergActive() {
    return typeof wp !== 'undefined' && typeof wp.blocks !== 'undefined';
}

[designsimply]

@elliotcondon I found some sample code that I think will help you with the PHP part of your question at https://wordpress.stackexchange.com/a/309955/10377. Can you have a look?

[elliotcondon]

@rilwis Good idea. Be sure to test with YoastSEO + Classic Editor. I ran into some issues where wp.blocks was defined when editing classic.

@designsimply Thanks. get_current_screen()->is_block_editor() looks to be the best PHP option.

[designsimply]

Ace! Closing as it looks like everything's covered now.

[elliotcondon]

@designsimply I was hoping to get an official response from the gutenberg developers as to how we should detect "is-gutenberg" in JS.

By closing the ticket are you confirming the above solution is the official solution?

[designsimply]

By closing the ticket are you confirming the above solution is the official solution?

No. It’s just a solution! Help requests can and should be answered by any contributor.

I think to get an official response on something like this, you will want to submit what you’ve found as a documentation pull request to ask for a code review and that would be really cool because it will have the extra benefit of helping others in the community. Would you open a PR for this?

[elliotcondon]

@designsimply Thanks for the reply. I'm hesitant to open a PR regarding a question. Perhaps I am anticipating incorrectly, but I don't see this going down well.

@noisysocks Quick question. If I as a plugin developer have a question about best practice or "how can I do this with PHP/JS?", where should I ask this question? Here on GitHub, or should I submit a PR containing an edited ".md" file with a question in it?

[noisysocks]

I think that we're trying to move help requests out of GitHub to somewhere more suitable e.g. the WordPress support forums. In your case I'd probably plop quick questions into #core-editor on WP Slack.

Regarding this question: I recommend detecting something more specific than "is Gutenberg loaded on the page?" because the line between Gutenberg and Core will become blurrier as we gradually use Gutenberg code on more and more WP Admin pages.

For detecting if we're editing a post or page using the block editor, I would go with:

• get_current_screen()->is_block_editor() in PHP
• document.body.classList.contains( 'block-editor-page' ) in JavaScript

[elliotcondon]

@noisysocks Thanks for the reply. IMO I'm not sure we should be asking these kinds of questions on slack. Having the question and answer available via google search (stackoverflow / github / etc) will help multiple developers who also have the same question.

[noisysocks]

That's a very good point.

[elliotcondon]

@noisysocks That's why they pay me the big bucks 😉.

[aduth]

Worth noting: get_current_screen()->is_block_editor() is the function one should use, and will work as expected with WordPress 5.x, but currently wrongly returns false when using the block editor while the Gutenberg plugin is active. This is already fixed in #13449, slated for release with Gutenberg 5.0.

In the meantime, you may consider checking for the presence of a defined is_gutenberg_page function and using it as a fallback (example). This should be considered a temporary measure, as Gutenberg will start deprecating these functions in favor of the core alternatives (#13569).