How to disable block editor styles for WooCommerce blocks?

Hello,

The explanation below is a bit long, but my question is:

How can I correctly unload this plugin’s back-end block editor styles, so that I can use only the styles I need in my child theme?

Or will that ‘break’ the block editor, and give me the unpredictable results I was getting by using the code mentioned above?

What else can I unload that I’m not using right now, for the back end styles and scripts, if I’m only using the hand-picked product block?

Thank you for your help.

The backstory:

I’m trying to make my own styled version of a featured product. I don’t see how the ‘background’ photo on the current featured block plugin makes sense, when all other ‘default’ WC products are not formatted that way. It messes up the styling. Just an opinion, but letting you know why I’m not using the existing featured product block.

I saw there is a ‘handpicked products’ block.

I used that for one product, set it to one column, and then began styling its front-end display in my theme’s style.css to get it to look like this: https://cloudup.com/cMG5JUHQWI9

That’s great.

The problem is, the back-end block editor keeps taking styles from plugin files in /woo-gutenberg-products-block/build/wc-blocks-editor-style.css

I need to override the styles for this one block only. I don’t need the rest of the plugin (right now).

I create a file using the above path into my child theme hoping it would override styles in the block editor. In other words, a file named wc-blocks-editor-style.css containing my custom styles is now in:

my-child-theme/woo-gutenberg-products-block/build/wc-blocks-editor-style.css

I also added the following code in functions.php to get the plugin to use my custom styles:

/ Adds support for editor styles.
add_theme_support( 'editor-styles' );

// Enqueues editor styles.
add_editor_style( '/woo-gutenberg-products-block/build/wc-blocks-editor-style.css' );

It has reformatted the block in the block editor, which is great.

But I don’t need the extras that WooCommerce blocks is loading in the back end. I want to reduce bloat as much as possible since our back end is getting slow.

If I disable the block editor styles completely, using this method:

/**
 * Disable WooCommerce block styles (back-end).
 */
function slug_disable_woocommerce_block_editor_styles() {
  wp_deregister_style( 'wc-block-editor' );
  wp_deregister_style( 'wc-block-style' );
}
add_action( 'enqueue_block_assets', 'slug_disable_woocommerce_block_editor_styles', 1, 1 );

Then I get this error:

Or a blank white screen. Or a notice to attempt block recovery. It depends on which ‘hard refresh’ I’m doing, and it seems to be random results each time (I keep refreshing consecutively). Sometimes, when refreshing, I get the ‘regular’ block editor showing the above hand-picked product block that I’ve restyled, but it still loads the plugin’s files.

Does anyone know a good solution for what I’m trying to do here?

I don’t want to go through the trouble of creating my own custom blocks for this one thing. I just want to disable what I’m not using in an already-working plugin, which can come in handy later on. Then, when I need other features, I’d like to enable them later.

It seems like it should be a lot simpler than it is…but I can’t figure it out. Sorry ??

• This topic was modified 3 years, 4 months ago by joycegrace.
• This topic was modified 3 years, 4 months ago by joycegrace.