Add patterns: Testimonials

[g-elwell]

Description

Fixes #57, #58, #59

I've tackled all three of these in a single PR as working through them I realised they depend on one another.

• I've set the "default" quote block style with a border as seen in the 3 column layout. The "plain" styling removes this border/padding.
• The base block sizing/spacing is as per the 2 and 3 column layouts, the larger single testimonial has increased sizing/spacing applied to the block itself

This PR also registers the Capsule block style variation for core/heading blocks which is used in a few sections. It seems that a heading would be semantically correct in the locations where this is being used.

Couple of notes:

• I'm not happy with the vertical alignment of the heading/quote. Unfortunately, space-between isn't an option on stack (only on row) which is a shame as this is all it would need to be perfect. Unless there's another way to do this I'm not aware of? Edit: found this in the block toolbar!

• We're limited with how we can style the location part of the citation, so I'm using a line break and subscript to get this working. Not that intuitive to set up, but I think this is okay for a pre-made pattern?

• The Figma uses a different font just for the location part of the citation (instrument sans), I'm assuming this should be using manrope?

Screenshots

Testing Instructions

1. Create a page
2. Add the patterns (found under 'testimonials')
3. Confirm that they looks like the designs (spacing/colors/etc.)

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: g-elwell <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: juanfra <[email protected]>
Co-authored-by: beafialho <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[g-elwell]

Apologies if anyone started reviewing this, as I started working on other testimonial patterns I realised they would be better within a single PR so have pushed several updates here and changed the title/description to reflect this.

[beafialho]

Apologies for the delay, taking a look now!

[beafialho]

Unfortunately I'm not able to test this because I'm seeing a lot of conflicts with theme.json on my GH desktop from the latest commits. From the screenshots, this looks fine but I'd like to be able to test it. @g-elwell could you please try to fix these conflicts?

[g-elwell]

Unfortunately I'm not able to test this because I'm seeing a lot of conflicts with theme.json on my GH desktop from the latest commits. From the screenshots, this looks fine but I'd like to be able to test it. @g-elwell could you please try to fix these conflicts?

Hi @beafialho - the conflicts should be resolved now if you'd like to give this another try? Thanks!

[juanfra]

Thanks for the hard work on this one @g-elwell - There's a lot of progress and we're getting closer.

I've replaced the image with the one already merged into the theme (264b44a), however I suggest we crop the image to remove the black border (I had done this previously on my version). Currently it looks like this:

Let's follow your suggestion, as we need to have it without the border. Let's use the one I'm adding to this comment.

image-from-rawpixel-id-5918459.webp.zip

I've worked through all the feedback given so far. I also noticed that some upstream font sizes affected these patterns, so needed to bump the quote font sizes up to x-large.

Since yesterday, we also have custom font sizes for headings that you could use in patterns.

I see that there are some merge conflicts with the theme.json, can you please take a look and that? Ideally we should respect the format that's coming from trunk.

[beafialho]

Hi @beafialho - the conflicts should be resolved now if you'd like to give this another try? Thanks!

I'm still seeing these conflicts and I can't test it.

[g-elwell]

Hi @beafialho - the conflicts should be resolved now if you'd like to give this another try? Thanks!

I'm still seeing these conflicts and I can't test it.

That's odd, it says it's resolved here and in the CLI. I'll install GH desktop and see what happens. Please bare with me.

[g-elwell]

Should be good now @beafialho 🤞

Thanks for the hard work on this one @g-elwell - There's a lot of progress and we're getting closer.

I've replaced the image with the one already merged into the theme (264b44a), however I suggest we crop the image to remove the black border (I had done this previously on my version). Currently it looks like this:

Let's follow your suggestion, as we need to have it without the border. Let's use the one I'm adding to this comment.

image-from-rawpixel-id-5918459.webp.zip

Done thanks 19d738d

I've worked through all the feedback given so far. I also noticed that some upstream font sizes affected these patterns, so needed to bump the quote font sizes up to x-large.

Since yesterday, we also have custom font sizes for headings that you could use in patterns.

Is there somewhere you'd prefer me to use these over the existing sizes? x-large seems to do the trick on most of these patterns. In the Review with large image on right pattern, it looks like it falls in between heading-1 and huge so may need to remain a one-off?

[beafialho]

I was able to test already, perhaps it was something particular with my environment. Thank you for the work done in these patterns so far!

I'm seeing a few issues:

Review with large image on right

• The image is overflowing the square edges. This is happening because the image is set to align: center and it should be align: none. The image should also not have the black border, it should look like the crop on Figma.

• The “Superb product and customer service!” should be set to XXL instead of XL.
• The "Jo Mulligan / Atlanta, GA" text is looking very tiny. This seems to have a specific quote in there, I don't know why but regardless, we should set it to XL instead of L so it is coherent with the other patterns.

size.mp4

Two columns with avatar

• This pattern is also not looking good on tablet. If we untoggle the "Inner blocks use content width" for the group inside the Quote block, it looks much better in all screen sizes.

Three column layout with 6 testimonials

This one is looking good ✅

[g-elwell]

I was able to test already, perhaps it was something particular with my environment. Thank you for the work done in these patterns so far!

I'm seeing a few issues:

Review with large image on right

• The image is overflowing the square edges. This is happening because the image is set to align: center and it should be align: none. The image should also not have the black border, it should look like the crop on Figma.

I've removed the alignment and cropped the image

• The “Superb product and customer service!” should be set to XXL instead of XL.
• The "Jo Mulligan / Atlanta, GA" text is looking very tiny. This seems to have a specific quote in there, I don't know why but regardless, we should set it to XL instead of L so it is coherent with the other patterns.

I've increased font sizes as suggested

Two columns with avatar

• This pattern is also not looking good on tablet. If we untoggle the "Inner blocks use content width" for the group inside the Quote block, it looks much better in all screen sizes.

I've removed the group to remove the content width on this pattern

Three column layout with 6 testimonials

This one is looking good ✅

Thanks!

Current screenshot:

[carolinan]

I will merge this and then create a follow up for the duplicate images.