WP Block Editor ( Gutenberg )

Overview

Gutenberg block editor ( or just Block Editor ) replaces the previous WordPress classic editor starting from WordPress 5.0+.

The feature of the new Block Editor is a focus on visualization - you no longer need to write complex HTML markup to display certain elements. Just like you no longer need to use shortcodes that are not visually very clear. Just use ready-made blocks to create the content you want. Move the blocks anywhere on the page, and even put some blocks in other blocks.

If we're talking about WoCommerce - by default Block Editor contains a lot of ready-made blocks for displaying products and setting their appearance.

And we are happy to announce that you can also display plugin labels on such products inside the blocks. And you don't even need to do anything extra for this - it should work by default.

Display label for WooCommerce blocks

As mentioned earlier - you don't need to make any extra steps here in order to show your product labels inside such WooCommerce blocks. Just create a label, make sure that its display condition meets all criterias and you will see this label inside Block Editor products.

If we talk about specific blocks that can be used then we recommend the default WooCommerce block.

WooCommerce blocks

We recommend using WooCommerce blocks like Featured Products, Hand-picked Products, Best Selling Products, Products by Category, Newest Products, On Sale Products, Products by Attribute, Top Rated Products, Products by Tag.

All this WooCommerce block was tested with plugin labels and should work without any issues.

Just choose any of the mentioned blocks and place it to the needed place inside your Block Editor with the right settings.

Note: You may not see product labels inside the editor page. But they will appear when you visit the same page on the site.

Hand-picked Products block inside editor page

Hand-picked Products block on site page

FAQ

Below is a list of some most common questions/problem solutions that can come when using plugin labels with Block Editor.

Q: Labels are not working for WooCommerce All Products block. What to do?

This is one of the few blocks that does not support working with plugin labels.

We suggest using other WooCommerce blocks that were specified above. They are fully supported and must display product labels without any issues.

Q: Will labels work with the standard WordPress Query Loop block?

Well it depends on your current theme. And, of course, you need to set products value for Post type block option.

So the theme will support standard WooCommerce hooks for this block and, as a result, labels will be visible here. Some will not and labels won't appear.

In most cases we recommend to use default WooCommerce blocks that are built specially for product displaying and will properly display plugin labels most of the time.

Q: Can I hide product labels for certain blocks?

In most cases it would be enough for you to just disable the label for certain pages that include needed blocks. You can do this with page related display conditions.

But if you really want to disable the labels only for certain blocks then it is also possible with the help of some custom code snippets.

In the example below we will hide all product labels for Hand-picked Products block.

class AWL_Hide_for_Blocks {

    public $exlude_from_blocks = array( 'woocommerce/handpicked-products' );

    public $is_excluded_block = false;

    public function __construct() {

        add_filter( 'render_block', array( $this, 'render_block' ), 10, 2 );

        add_filter( 'pre_render_block', array( $this, 'pre_render_block' ), 10, 3 );

        add_filter( 'awl_show_label_for_product', array( $this, 'awl_show_label_for_product' ), 10, 3 );

    }

    public function render_block( $block_content = '', $block = [] ) {
        if ( array_search( $block['blockName'], $this->exlude_from_blocks ) !== false ) {
            $this->is_excluded_block = false;
        }
        return $block_content;
    }

    public function pre_render_block( $null, $parsed_block, $parent_block ) {
        if ( array_search( $parsed_block['blockName'], $this->exlude_from_blocks ) !== false ) {
            $this->is_excluded_block = true;
        }
        return $null;
    }

    public function awl_show_label_for_product( $match_condition, $product, $label_id ) {
        if ( $this->is_excluded_block ) {
            $match_condition = false;
        }
        return $match_condition;
    }

}

new AWL_Hide_for_Blocks();

Modify values inside the $exlude_from_blocks array to add or change products blocks that must display plugin labels.

You can modify this code in many ways and, for example, exclude only certain labels matching them by ID. Or add additional conditions to hide labels for blocks that are displayed on certain pages.