Product Collection: Enhance No Results View in Block

[imanish003]

Related GitHub discussion: https://github.com/woocommerce/woocommerce-blocks/discussions/10707

Summary

• The goal of this task is to improve the "No Results" view in the Product Collection block. The task will involve offering default content, introducing patterns, and examining the visibility toggle options in List View.

---

Background

• The "No Results" block currently always shows up at the bottom of the Product Collection block, with an empty Paragraph block as the default content. This design can be cumbersome to work with, especially when multiple Collection blocks are present on the same page. We aim to provide a more dynamic, user-friendly, and customizable experience.

---

Designs

• Figma: zx83mG5ZnDiacPdH6GlO2j-fi-399_96156

• Current No Results block Screenshot
  

• Proposed Changes Screenshot
  

• Visibility Toggle Video

CleanShot.2023-08-23.at.12.14.38.mp4

---

Acceptance Criteria

• Default Content: Implement default content that automatically appears in the No Results block.
• Design Patterns: Introduce design patterns that offer customization options for merchants and builders.
• Icon Change: Update the icon for the block to the Conditional Content icon.
• Description Update: Make the description more readable and understandable.
• Visibility: Introduce a mechanism to show the No Results block only when the parent Collection block (or one of its children) is selected.
  • Hidden Indicator in List View: Investigate if it's possible to add a new "hidden" indicator icon that can toggle the visibility of the No Results block in the List View.

---

Feedback Loop

• This task will involve a feedback loop with @shaunandrews . After the initial implementation of the features, @shaunandrews will review the changes and may suggest further enhancements or modifications. This is to ensure that the improved No Results block aligns with the overall UX goals.

---

Additional Notes

• The visibility toggle feature may require contributions to Gutenberg core.
• This improvement can also benefit other blocks like Mini Cart, and Query Loop, which have similar "No Results" views.

CC: @kmanijak