How to force Gutenberg on WooCommerce’s Products

Why?

WooCommerce disables Gutenberg in their Product custom post type.

If, like me, you enjoy Gutenberg and have clients and websites using templates compatible with it, and you don’t use storefront for your WooCommerce stores (or maybe you do but then I don’t know why you’re here), you will want to override WooCommerce’s disabling.

How?

As of right now, May 2019, what I found worked was resetting WooCommerce’s own disabling lines. Within the WooCommerce plugin, I’ve found the following:

woocommerce\includes\class-wc-post-types.php

add_filter( 'gutenberg_can_edit_post_type', array( __CLASS__, 'gutenberg_can_edit_post_type' ), 10, 2 );
add_filter( 'use_block_editor_for_post_type', array( __CLASS__, 'gutenberg_can_edit_post_type' ), 10, 2 );

public static function gutenberg_can_edit_post_type( $can_edit, $post_type ) {
     return 'product' === $post_type ? false : $can_edit;
} 

Based on this discovery, I’ve created the following lines and put them into my theme’s functions.php:

my-child-theme\functions.php

add_filter( 'gutenberg_can_edit_post_type', 'mechamyu_override_gutenberg_can_edit_post_type', 100, 2 );
add_filter( 'use_block_editor_for_post_type', 'mechamyu_override_gutenberg_can_edit_post_type', 100, 2 );

function mechamyu_override_gutenberg_can_edit_post_type( $can_edit, $post_type ) {
     return 'product' === $post_type ? true : $can_edit;
} 

And it worked!!

Note: As you can see, I put 100 as the priority for these filters. I don’t trust the system, but I guess you could put 11 and it’d still work.

Why again?

When I was researching to do just that, I couldn’t find anything.

I tried to look online for a while before realizing that googling “Gutenberg force enable WooCommerce” or any variant would only return either “How to use WooCommerce’s product blocks” or “How to force disable Gutenberg in WordPress,” which is nowhere near what I was looking for.

Moreover, I tried looking into “Enable custom post type Gutenberg” which gave me some leads (that fixed other issues I had) but I couldn’t figure out how to bypass an already-defined custom post type. And, even if I did manage to edit/amend that custom post type, it wouldn’t have worked, because of WooCommerce’s filters that force Gutenberg out anyway.

When I finally managed to make it work, I figured, I couldn’t be the only one wanting that outcome, right? I couldn’t be the only developer who really despise Storefront themes and made their own, right?

Right??

Oh well. Hopefully this can help someone else.

If you have any questions, don’t hesitate to leave comments. I’d love to try and help. I’ll link somewhere soon all the StackOverflow and other blog posts I read before having to take the matter into my own hands (like how to fix custom post types and taxonomies compatibility with Gutenberg).

Cheers!

About Karine Frenette-G

Talk WordPress to me.

Leave a Reply

Your email address will not be published. Required fields are marked *