Flexblocks Quick & Easy Recipes – Bodacious Block Quote

Note: This tutorial assumes some knowledge of Flexbox and Flexblocks. For more information see our blog post Learn Flexbox Visually In The WordPress Block Editor With Flexblocks.

The blockquote is one of the most used blocks of content in all of web design. When used to display a testimonial, the blockquote can be super effective at communicating social proof that a product or service is up to snuff.

What Are Blockquotes?

Many people don’t know this, but blockquote is actually built into HTML via the <blockquote> tag. Its purpose is to semantically indicate that a given block of text is an extended quotation. The blockquote tag supports the ‘cite’ attribute to indicate where the quote came from. There’s also a <cite> html tag that can be placed inside of a blockquote to display the citation information.

The WordPress block editor comes with a blockquote block out of the box, it is simply called “Quote” (core/quote). While some themes will style blockquotes with various levels of indentation, background color, and ::before and ::after content, other themes leave the blockquote pretty much unstyled. For this tutorial we’ll be using WordPress’s built in 2023 theme which for the most part leaves the blockquote unstyled but for some (seemingly excessive) margin and padding.

The WordPress repo has about a billion block libraries with a billion different blockquote blocks, but instead of searching for just the right one, we’ll create our own. A popular design pattern is to use the ::before and ::after pseudoselectors to add an image of a quotation mark before and/or after the quote. While we won’t be using the ::before and ::after selectors, we can achieve the same result with flexblocks. Before we start building, we’ll need to find an image of quotation marks that we like.

I used svgrepo to find an SVG image of a nice looking quotation marks, and used inkscape to change the fill color and to flip, rotate, and resize the image. As a side note, svgrepo is an amazing resource if you’re looking for vector images for icons or illustrations. Unfortunately in order to use SVG images in WordPress you’ll need a plugin. I use SVG Support which always seems to do the job for me, but others may work. If you’re following along here are the images I’m going to use, feel free to download and use them yourself.

Let’s Start Building Our Blockquote

For this tutorial I’ll be using Flexblocks Pro, but the free version can accomplish everything except for the reveal animations. Flexblocks Pro also includes a section in the WordPress admin called “Flexblocks Pattern Archive” where we can build block patterns and then insert them into posts and pages at a later time.

Step #1 – Create The Skeleton Of Our Block Pattern Using The Flexblocks Container and 3 Flexblocks Items

First we’ll create a flexblocks container along with three flexblocks items. The flexblocks container will have a flex-direction of “row” and the items will keep their default settings for now.

Step #2 – Add The Quote Images To The Outer Blocks and A Blockquote Block To The Inner Block

The design we’re going for is to have a blockquote surrounded by our two large images of quotes. To accomplish this we’ll add the quote images to the two outer Flexblocks Items, and a Quote block to the inner Flexblocks item. We’ll also populate the Quote block with some dummy text.

As we can see from the preview screen, our blockquote is looking pretty decent, but our quotes have been shrunken due to the middle Flexblocks item taking up all the space. Also, it would look nicer if the quote image on the left were aligned with the bottom of the block. Font size could use some help as well. Let’s take care of these issues.

Step #3 – Set Flex-Shrink to 0 For Our Outer Flexblocks and Adjust Alignment and Font Size

So to fix up our blockquote we’ll set the Flex Shrink property on both of the outside blocks to 0, while Flex Grow is kept at its default value of 0. This will force our outer blocks to remain at a size where the images they contain won’t be shrunken down. I also went ahead and set the Justify Content and Align Items of the Flexblocks Container to “flex-start”, and then set the Align Self property of the right outer block to “flex-end” to align it with the end of the quote.

This looks pretty good, but if we look at our blockquote in a mobile view in our devtools we’ll notice that our blockquote text is being squished by having the images on either side mixed with the excessive padding and margin of the default blockquote styling. Let’s keep iterating.

Step #4 – Use A Responsive Break Point To Change Flex Direction On Mobile

The nice thing about Flexblocks is that we can change their behavior based on the viewport width with responsive breakpoints. The responsive breakpoint switch is located under the Flexblocks Container’s General Settings, and when turned on it exposes some additional settings like at which viewport width to trigger the breakpoint as well as options to hide the block above or below that breakpoint. Additional settings will also be revealed under the Flex Options tab for Flex Direction, Align Items, Justify Content, and Wrap. We’ll set the Flex Direction (Responsive) to “column” so that when the viewport is narrower than 768px we’ll stack our items rather than display them in a row.

Now our quote is looking much better. You could stop here and call it good, but lets play around a little and see what else we can do.

Step #5 – Some Final Tweaks

For this last step I adjusted the size of the quote images and also added a bit of padding to those blocks. I added a background color to the main container, and also added some reveal animations to each of the three Flexblocks Items. I staggered the animations using the Reveal Delay setting for a little bit of extra pizazz. At this point our blockquote is done, but as you can see there are a million ways to add your own flair with Flexblocks. The point of these tutorials isn’t to build this one single exact thing, rather it’s to teach you how to build anything with Flexblocks.

Here’s our finished product, I pasted it from my tutorial server directly into this blog post. I had to add a bit of padding to the middle block because my theme doesn’t style the block quote at all, but otherwise it looks pretty much the same. One could make the case for leaving out the second quote image, changing the background color, border radius, etc., but that’s the beauty of Flexblocks (you can do what you want).

Cheers!