New Block: Reviews by Product

[ryelle]

This is two-step block, with the initial state of the block in "edit mode" without a product selected. Like the Featured Product block, or the Hand-picked Products block. You can choose a single product from this screen:

After picking a product and clicking done, you see a live preview of the reviews for the selected product:

In the Inspector (sidebar), we'll have the following custom panels:

• Product (should be closed by default), with a ProductControl inside
• Content, with toggles for show/hiding review content (see GridContentControl for how we're doing this on grid blocks)
• List Settings, with a default order by and number of initial reviews to display

On the front end, the reviews will be listed and styled like the editor preview, including a dropdown allowing viewers to change the review sorting, and the load more button to load more reviews onto the page.

[jwold]

@Aljullu I forgot to include the SVG. Here you go :)

Icon.svg.zip

[jwold]

@Aljullu and @pmcpinto following are two design options for the Reviews by Product (and Reviews by Category), with:

1. Read More button added in - Note: On Amazon when I press "Read More" it opens to a new individual product review page. On Woo it doesn't seem that individual product reviews have a permalink. Should we have a Read More, and if so, should we link to a single page or just expand the review? Video: https://v.usetapes.com/1MhwlnuTGf

2. Based on the conversation on https://a8c.slack.com/archives/C8X6Q7XQU/p1562926654155200, it makes sense to include a setting: "Maximum products to display" with an input field. Any objections to adding this to the AC? This would be separate from the discussion where we may show/hide the "Order by"

3. From a technical perspective, can we have the "Verified" checkmark on the avatar? If so I like it there.

The big change here, btw, is that I've moved the actual review below the meta info, and then added space between reviews. This takes us back to the original design.

Figma link: https://www.figma.com/file/HJRfFQhztxCoB4GMhiD7iA/Reviews-by-Product?node-id=222%3A2336

[pmcpinto]

Great work @jwold,

Here it goes my feedback:

1- I think we should keep it simple and just expand the review. Opening the review in a single page would require more design & development considerations. Curiously Amazon uses the expand/hide option on mobile, so my assumption is that by using the expand/hide pattern we're going to adopt the best approach for mobile.

2- I agree that we should that setting, if it doesn't overcomplicate too much the block development. And set as default 3 or 5 reviews, so the user doesn't need to see a laundry list when he initially checks the reviews.

3- I prefer the 2nd variation with the checkmark in the avatar and the product below the name and rating.

Cc @albert

[Aljullu]

I love the new designs @jwold!

1. Read More button added in - Note: On Amazon when I press "Read More" it opens to a new individual product review page. On Woo it doesn't seem that individual product reviews have a permalink. Should we have a Read More, and if so, should we link to a single page or just expand the review? Video: https://v.usetapes.com/1MhwlnuTGf

I agree with @pmcpinto's points about this. Adding a single page for each review seems out of the scope for this block.

2. Based on the conversation on https://a8c.slack.com/archives/C8X6Q7XQU/p1562926654155200, it makes sense to include a setting: "Maximum products to display" with an input field. Any objections to adding this to the AC? This would be separate from the discussion where we may show/hide the "Order by"

I'm not sure to understand that. What does it mean 'Maximum products to display'?

3. From a technical perspective, can we have the "Verified" checkmark on the avatar? If so I like it there.

Sure, it's possible and I also like it more!

[jwold]

Thanks for the great feedback!

---

Regarding woocommerce/woocommerce-blocks#12058: Read More button Awesome, let's go ahead then and make the Read more expand the individual product review instead of taking users to a new page, that makes more sense. 250 words feels like a good breakpoint.

---

Regarding woocommerce/woocommerce-blocks#2: Maximum reviews to display Whoops, I meant to say "Maximum reviews to display" instead of products, ha. Hope that makes more sense. Here's an idea for how we could display that, would this work?

---

And, a new item, woocommerce/woocommerce-blocks#4: Reviews shown on page load

This was a setting in the design above that proposed a way for the user to set a page load break point, so that they could show 10 reviews on a page at a time, or 5 at a time, etc, before a page load button appears. I'm wondering if we should remove this feature altogether. Here's how it would have worked:

And, instead of having this feature, we could just make the Load More auto appear every 10 reviews, regardless of what maximum is set on woocommerce/woocommerce-blocks#2 above.

---

The other option is we could just ignore all this and go with the original design, if someone wants to "mimic" only 3 reviews on their homepage they just set "3" in the "reviews shown on page load" setting and just deal with a little "load more" button showing up.

Thoughts, concerns @pmcpinto and @Aljullu?

[pmcpinto]

@jwold Thanks for creating the sketches.

And, instead of having this feature, we could just make the Load More auto appear every 10 reviews, regardless of what maximum is set on woocommerce/woocommerce-blocks#2 above.

I think that this might be the best option. We could also consider setting the page load breakpoint based on the number of reviews the user chooses to display (2nd point)

[Aljullu]

@jwold I like the new setting Maximum reviews to display, I see it playing well with Reviews shown on page load and it will make this block very flexible and powerful.

If we think from a UX perspective having both settings would not overcomplicate the UI, I think it's a good idea allowing to customize both and from a technical perspective shouldn't complicate things too much.

And, instead of having this feature, we could just make the Load More auto appear every 10 reviews, regardless of what maximum is set on woocommerce/woocommerce-blocks#2 above.

I'm not a big fan of this. Depending on the length of reviews customers usually post and the store design, the store owner might want to display more or less reviews every time the user clicks on Load more. Restricting this to be always 10 sounds like an unnecessary restriction from my point of view.

[jwold]

Thanks for that great feedback! I have a proposed change based on that, and some further thoughts I've had.

I'd recommend checking out the Figma prototype to see if I'm missing anything in the logic. Also, here's the source file.

So, suggested settings are:

1. Display Order by - A toggle to show or hide the "Order by" dropdown that allows customers to modify the default ordering of reviews.
2. Order Product Reviews by - This can be changed in the admin regardless of whether it's visible on the frontend.
3. Starting Number of Reviews - Set how many reviews are first shown when the block loads.
4. Display Load More - A toggle to show or hide the "Load More Reviews" button on the frontend.
5. Load More Reviews - Set how many reviews are shown when the "Load More Reviews" button is pressed on the frontend.

cc @Aljullu and @pmcpinto

Any concerns from a technical or logic standpoint with going this direction?

Thanks!

[pmcpinto]

Hey @jwold

Great work. I think it makes sense to move forward with this direction. In terms of development, if it takes too long to implement all the settings we can consider to simplify the experience and backlog some of the settings for a future iteration.

[Aljullu]

Thanks for the improvements @jwold! Settings look good to me and I think they will make this block very powerful.

[Aljullu]

@jwold one thought I had today: I noticed in the new design we are using range sliders next to the inputs for the settings Starting Number of Reviews and Load More Reviews.

If I'm not wrong, the API allows any number between 1 and 100. Do you think those values should be used as the minimum and maximum for the sliders? I imagine most users will want to set values between 1 and 20 (or something like that), having a slider that goes up to 100 might be too much and make the UI hard to use. What do you think?

[pmcpinto]

@Aljullu I agree with you that 100 might be too much. I would limit it to 20 as you suggested

[liviujs]

It would be a really nice thing to have also a Review Title field. Thanks

[jwold]

@liviujs thanks for your suggestion! My concern with having a review title field is that we'd also need to have a way to allow store owners to manipulate the field, and we'd need to include a title on the other WooCommerce blocks that are in progress.

My inclination is to leave the title out, and just allow store owners to add a second block as a headline above it. Does that help to provide an appropriate solution for your request?

So if we did nothing, you'd still be able to show a title like this:

[liviujs]

@jwold That's an amazing solution. Now the reviews section, with "Title/Block" and Filters looks more professional if compared to Yotpo and others. Great work!

[liviujs]

Hi @jwold , I know that topic is closed, but as a last touch to the review section, it would be nice to add the Up/Down vote function on it like here: https://prnt.sc/ojx8co Let me know your thoughts. Thanks.

[jwold]

@liviujs thanks for the feedback! Just to clarify, are you suggesting adding a feature like this?