Advanced Layouts with the Block Editor

In this workshop, participants will learn the core concepts of basic blocks provided in all current WordPress installs. We also explore the anatomy of advanced block layout and how to construct more complex and attractive layouts by just using blocks – without any custom code or plugins.

(This is an adaptation of a talk from WPBlockTalk, April 2020)

Learning outcomes

1. Understand the general purpose and usage of basic and layout blocks.
2. Get a grasp of how you can achieve a complex page layout with blocks.
3. Construct different page layouts using a combination of default blocks.
4. Learn how modern themes work in conjunction with blocks.

Comprehension questions

• What are some of the examples of basic and layout blocks?
• Can you add (nest) a paragraph block within a cover block?
• How do you create a three-column restaurant food menu to a page, using a column, image, paragraph, and spacer blocks?
• What happens to a page layout when you change the site’s theme?

Transcript

I’m Mel, I’m a product designer. I’ve been involved in the WordPress community for many years now. Core committer, I lead the 4.9 core release cycle. And recently I’ve been working on Gutenberg Block Patterns and on themes.

So today I want to talk to you about making unique designs by combining blocks. So let’s start with the basics and talk about the building blocks of block building. There are a couple key blocks that form the basis of most content.

So these are the fundamentals used by the vast majority of websites. At a simplest we have the paragraph block, the paragraph block has a prompt that encourages you to write.

So just you get started. You can add inline formatting like bold or italic text, you can add links, you could change the text alignment, and you could also change the text color and the background color.

We have a heading block headings range from h1 to h6. But you’ll most likely stay within the h2 h4 range most of the time, which is what’s offered up in the toolbar that appears when you select the block. So try to avoid using headings for decoration and instead stick to using the appropriate semantic level.

The list block is useful for you know, adding any sort of list to your website. So often you can turn a long paragraph into a list just to make the content a little bit easier to digest.

It’s just a really great way to enhance the readability of your website and the scanability. Gutenberg Times writes to default quote styles, and also to default pull quote styles.

There are tons of great opportunities for bold attention-grabbing text by using these two quotes, especially if you’re writing like blog posts, articles, any sort of news or editorial content, where you do have quotes.

Then finally, WordPress supports images, galleries, audio, video, all sorts of multimedia. By combining media and text, you can create rich, dynamic layouts that stand out from your average website.

WordPress also provides a number of default layout blocks you can use to provide structure for your basic blocks. So remember, space or gifts, it’s a little bit like that.

So if you don’t have control over your site’s CSS, or you don’t want to write any code, you can actually use a spacer block to add more space between elements on your site. It is super useful for designers and non technical site builders especially.

So there’s the separator block as well also known as a horizontal rule that just adds like a line or any other sort of decorative break between the elements on your site. It’s really great for dividing, say like a heading from some content or creating a separation between two different sections on your site.

So this is where we start to get a little bit more complex. The group block allows you to well group multiple blocks together into one unit.

For example, if you want to have a section on your homepage with a different background color, the group block could be the way to go. So if you’ve worked in Photoshop, Sketch, Figma, or any sort of like design tool, you are familiar with the idea of grouping things together, it’s really kind of the same thing.

Columns are by far one of the most useful blocks WordPress is introduced. So prior to the column block, adding multiple columns to a WordPress page was a clunky experience often requiring shortcodes. I personally, as a designer, he like what they can achieve.

But just like the process of adding them has always been really clunky. So now you can create and edit columns completely visually, and you don’t have to worry about leaving out a closing tag and braking your whole layout by accident, which I have definitely done before.

But cover book is a great way for adding a hero image or a banner to your site. Or you can use it to make bold pull quotes that break up articles, you can add a background color image or video.

And you could overlay it with text in other blocks. So it’s really versatile. The media and text block provides a quick and easy way to add text next to an image or video, which is a common pattern we see like all across the web.

So combine a media and text block, just like a couple stacked in a row, especially if you flip the arrangement. So you have like image on the left text on the right text on the left image on the right cetera.

It’s just a really easy way to create a dynamic homepage with very little content. And then lastly, you know, if you want to add three latest posts to your site’s homepage, you could do that really easily.

Now with the latest post block, you could switch between lists or grid view toggle on or off features like feature images, post dates, or even select posts from specific categories, which is really useful if you’re building any sort of magazine-style layout.

So you can have different sections on your homepage for categories combine static and dynamic content really powerful. So let’s start kind of thinking about how we can take these building blocks and combine them.

So I’m looking to examples on the web right now that I could find the You know, we can look at them and break them down and see how we can use blocks to replicate these designs.

So I like this example, because it features a bold, clear intro sentence, you know this, the sentence is slightly wider than the 5050 split column below, which makes it more visually interesting and brings in some balance to the overall layout.

So let’s break this one down first. This first section, which doesn’t span the entire width of the content can use the column lock. So we have two columns inside one that’s slightly wider, say like 60, or 70%. That houses this header, and then another empty column, that column that’s narrower.

So inside that first column is a heading block. we’re skipping over the second block, the second column in this columns block, because it is going to be empty. So next, we have a second column block that has equal sized columns inside. And each inside each of these columns is a paragraph.

So if we add that into the Gutenberg editor, we get something like this, we could do a lot with this, you know, the theme has a really big impact on how it looks.

Right now I have this group, so we get a background behind it, you could separate it from another section with like a separator block, you know, there’s a really a lot of opportunities for combining this with other patterns on your page.

Here’s another example. You know, I really love how attention grabbing this headline is, and the shape that it kind of forms on the page overall. This top text is really, it’s just like a center paragraph, there’s nothing really special about this.

Next, we have this like great big heading. And then after that, we again have two equal width columns inside of those are paragraphs.

So it’s very similar to the previous example. You know, it doesn’t look as dramatic in Gutenberg without any additional styles. But a really nice theme can make all the difference.

So on this site, the let’s collaborate bar is such a common pattern, and I love the all caps header off to the side, you know, it’s actually something that I tried to design into the 2017 theme, that would have worked so much better if we had Gutenberg, then.

So let’s look at how to build it now that we actually have the right tools. So once again, we look at columns. This left column is a heading, it’s probably, you know, once again, like 40%. This next column is more 60%.

And inside that column, you have a paragraph and then a button block. So it’s really just three blocks inside of columns. Very simple, very easy to replicate.

And Gutenberg, you know, if you wanted to, you could put it inside a group block and add a background color, you could add a nice paragraph parallax effects with an image if you use the cover block, or you know, you could leave it as is and it’s still gonna look really nice.

So I love this article, because it breaks up the content in a way that feels very editorialized – that gradation of size, from the title to the introduction article to the content of the article, it just feels really balanced.

And it makes great use of space, while keeping the line length short. So it’s very easy to read.

So we have our first block, which is the heading or next block is a separator block just a nice line between the title and the content. Now we go to having columns, and on the left, we have this paragraph that is maybe 55 to 60% of the width, probably more like 55.

And the paragraph size is actually set a little bit larger than the Default Paragraph size. So that’s an option you have in the paragraph block is to change the size.

So this next column is full of paragraphs that are just the default size. And when we put that together in Gutenberg, it’s the kind of thing that you’re definitely going to want to like play with just to to get the widths and sizes, right?

Because every theme is different. So this is just default styles like no editor styles.

So you know, if I were to go in and try to get something more like the previous example, I would probably change my theme to make that heading a little bit larger, a little bit more attention-grabbing, I might make the introductory paragraph a little bit narrower, etc.

So there’s a lot of ways that you can take this once you have it in Gutenberg. So this whole site is super dynamic and fun. But I really love the flow, this diagonal section.

This layout, you know, actually looks really complex, but it can be broken down using our block toolbox. So once again, we’ll start with a cover. This will allow us to add a background image or even just a background color. Inside of that we’ll have columns and it’s three equal width columns.

Within each column, we have this heading, a separator if we want it or maybe that’s just a style on the heading and then a paragraph In the next column, things start to get interesting, you can add a spacer block to actually push the content in the middle column down a little bit. So it’s offset.

And then we do this again in the third column to achieve this kind of flow from top to bottom. So one thing you will want to consider for your own site, if you are using spacers, to create this kind of offset layouts, is that you want to add a class so you can remove or decrease the space or heights on smaller screens, we actually might even want to consider approaching this differently by using column alignments instead of spacer blocks.

So every single column can take an alignment, top middle bottom, so the left could be top aligned to the middle could be center aligned, and then the bottom could be right aligned, you know, there’s a lot of different ways to approach it, there’s no one way to achieve any sort of layout in the WordPress Block Editor.

Lastly, this gallery is so much more interesting than like four evenly sized spaced images would be. So having the different size and kind of the offset arrangement brings a ton of personality.

So first, we have our columns, it looks like we have three different columns of content. And the first column we have a spacer, an image and then another image that’s actually been resized, so it’s smaller than the top one.

Our second column is a little bit wider, we have another image that’s been resized, so it’s not necessarily the full width of the column. And then below it, we have a full sized image. And then in the last column, we have a spacer to push down this content.

And then we have the heading and paragraphs. And this is another one where you could approach it in a couple different ways. For example, if you didn’t want to use that space, or you could use the column alignment, and then add a spacer between this body copy and this link.

So rather than rather than pushing everything down from the top, you just align everything to the bottom and then add the extra space between the call to action in the paragraph. So just kind of default as is with that spacer.

This is how it looks in Gutenberg, you know, we get really close just using our basic building blocks. This is not even using any sort of custom stuff. This is totally what comes with WordPress core.

So when you think about the possibilities are really endless, you have a lot of different opportunities to combine blocks into really interesting designs.

Alright, so the basics down, let’s take a look at taking these building blocks, and then applying them to our own site. So now I’m going to show you some demos. So let’s,

let’s get started with that. For this demo, I have created a fake restaurant website. My gastropub article spoke is on kind of the higher end of the pub spectrum. So when he’s a sharp, elegant design to help the business stand out from its competitors.

I’ve created different combinations of blocks on each page that showcase how you can take relatively simple atomic units like images, headings and paragraphs and build them into something that grabs your attention and helps you follow through the site.

And I have to note all of this was built with the latest version of the Gutenberg plugin on a stock installation of WordPress without any additional plugins.

Next up, let’s take a look at how I created each of these pages and what blocks I used. The first element I want to add to my homepage is a hero image with some intro text. So I choose a cover block. I want an image with plenty of empty space on the left side for my content.

And I also want my hero image to take up a little more vertical space and have a little more contrast than the default. So I upped the minimum height and change my overlay color to black.

The next section I want to add is a gallery based on one of the examples we looked at earlier. So I add some spacers to a group block to make sure my section has plenty white space and then I start setting up my columns.

I’m looking to achieve that almost diamond shaped grid of images. I want to choose photos that are more vertical, so they work better with my desired offset gallery layout. I make use of both spacers image sizing and floating to achieve my desired design.

Next up, I want to highlight my restaurants location and hours. I start off with a cover block to create a background for my section and choose an image that shows off the interior of my restaurant. I select the fixed background setting in the sidebar to give it a smooth scrolling effect.

Inside my cover, I add a group block so that I can select a background color for my content. And then inside of that I add some columns with my rest From information.

Looking good, I want to save this block so I can reuse it on other pages. So I had the whole section to my reusable blocks library.

Because my restaurant is magical and made up, it likes to keep its digital presence current, so it blogs every week or two. I know I know it’s a little unrealistic. But I want to highlight these posts on a section of my homepage, I reach for the latest post block.

Showing off my most recent three posts in a grid, I show off my featured images and excerpts to give the customers a preview of each post.

Finally, I want to add a section at the very bottom of the homepage that calls out some special features of the restaurant, brunch and live music had a cover image inside to equal sized columns to call up these features.

Having these call out boxes with background images is a much more interesting design than just putting text alone into some columns.

Like my homepage, I want to start my bad page with a hero. This time instead of using an image I’ve decided to add a subtle background video to make the page a little bit more interesting.

I give it a similar treatment to my other cover blocks, making it taller and giving it a darker overlay.

The next section of this page tells a little bit about my team. I want to use images to draw on my customers and help them feel like they’re a part of the process. Borrow the idea of having a wider heading and narrower copy from some previous examples that I found.

Then I added my images. First a big photo of my team. Then a column block with two smaller photos showing them an action finished with a caption.

I change the sizing of my columns so my images flow from largest to smallest, creating a more dynamic layout.

I want to create a division between this section and my next section. I added some spacer blocks surrounding a separator and then save it so I can reuse it later.

For my next section, I want to highlight my restaurant chef owner, I opt for immediate textblock since I know I want to show off one photo of the chef and a short biography about him.

Because my photo has the chef tilted towards the left I flipped my media and text layout so my chef is now facing my content, helping to draw the eye to the text. To help the section stand out from the white background behind it. I had a light cream colored background color to the block.

My last unique section for this page is all about hype. I proudly proclaim and award this restaurant has received along with a photo of excited customers cheers

Then I opt for a two column layout with testimonials on the left, slightly wider, and some more copy about my restaurant on the right slightly smaller.

Finally, I finish it with my hours and location block.

My menu page starts the same as my other pages with a cover block. For this page, I want to highlight my restaurants best menu item, it’s super awesome burgers.

I adjust the focal point on my background image to bring more of the burger interview. I add my page title.

And then since my restaurant has a lot of different menus depending on the meal I got in a navigation block so that I can anchor link to those sections of the page later on.

So we don’t have a menu block. But we can build a pretty nice looking menu out of our basic building blocks, columns, images and paragraphs. I want to show off a couple different layouts you can use to bring visual interest to any restaurant menu you design.

Our first layout starts out with two rows of three columns. Each column has its own menu item. I’m using text formatting here to bring hierarchy to my content. This is going to be the basis for all of the different menus on this page.

This layout could be improved by adding some images. To this first layout, I had a three column gallery to show off various appetizers my restaurant offers.

Let’s add our next menu section. For this section, I want to try integrating an image in with the menu items. So I add an image to one of my columns.

In this next menu section, I want to try using a slightly different layout. Add a subtitle to the section to note sides. Instead of columns. I use a media and text block to show off my menus shining star, it’s classic burger.

I follow that up with a regular row of menu items.

Lastly, I have one more layout I want to try. I add one large image above the rows and menu items in this section.

Each of these layouts uses the same components but they’re rearranged differently to create unique designs. If you’re building a real website, you might actually just want to stick with one layout and then reuse it throughout your page.

You know, maybe emphasizing certain elements as needed. Play around and figure out what layouts work best with the content. You have. doesn’t take a lot to create really nice layouts from blocks.

So now I just wanted to take a moment to compare the site that we just built with another site using the exact same content but running a different theme. See, one of the beautiful things about building with these core blocks is that they’re supported on every up to date WordPress site.

So you can switch themes without losing any sort of content. Let’s switch on over. I also want you to get a sense for how theme styles can make a huge difference when it comes to the presentation of core blocks. So the bold sans serif headlines look very different from the thin sir.

So the other theme and the dark color scheme gives it a completely different vibe. It’s all the same content. It’s just different colors and different fonts.

I hope everyone now has a basic understanding of how to combine blocks in the WordPress editor into attractive layups. So now go forth and build have some fun.

Thank you so much.