Exploring adding Block Variations for display WooCommerce Brands Plugin Shortcodes

[ashleyshaw]

Introduction:

The WooCommerce Brands plugin currently supports shortcode output for brand lists and thumbnails. We’re exploring the idea of creating block-based variations for a more modern WordPress editing experience, allowing users to drag-and-drop brand-related content easily.

Problem/Opportunity:

With the rise of block-based themes and editing, shortcodes are becoming less user-friendly. Users would benefit from native blocks that can be styled and positioned in a more intuitive manner.

Proposed Solution:

Develop new block variations for the WooCommerce Brands plugin that include features like brand lists, thumbnails, and product collections. These blocks will align with the LSX Design system and offer more flexibility to users in the WordPress block editor.

Alternatives Considered:

Continuing to use shortcodes is possible, but block-based editing offers a much more intuitive, modern approach.

Challenges:

• Ensuring the blocks are fully compatible with existing WooCommerce features.
• Offering sufficient customization options without overwhelming the user.

Call for Feedback:

I’d like to hear opinions on whether the community would find value in block-based variations for brands. What additional features should be included in these blocks?

Next Steps:

I’ll start by prototyping a block for brand thumbnails and gather feedback before expanding to other types.

• @ZaredRogers this relates to this issue Figma - Add WooCommerce Brands template parts and templates #184
• @krugazul where would you register the variations? Do we need a plugin or could we register them using block json into a theme? Registering a block variation might contravene the WordPress Theme Review guidelines.

[ZaredRogers]

Design Update

I have created the following design ideas for this:

Single Brand Landing page

Single Branded Product (Banner)

Single Branded Product (Icon)

Single Branded Product (Logo)

Brand Archive (Banner)

Brand Archive (Logo)

Brands Landing