How Stackable Turns Gutenberg into a Page Builder | Page Builder Summit 2.0 Talk

Hi! Welcome to How to Turn Gutenberg into a Page Builder with Stackable. Thanks for joining me and I hope you learn something new today. So what I want to show you is a new perspective on Gutenberg. And to show you what Stackable brings to the table, what features, what benefits it can bring you as a tool that you can use to build your websites. During the presentation, I also hope to share with you some of my insights when we were building Stackable and also what’s in store for Stackable in the future. 

I’m Benjamin Intal. I’m from the Philippines, I’m the founder and lead developer of Stackable. And I have been developing in the WordPress since 2010. So before we begin, please know that this presentation is prerecorded. I’ll be in the chat and I’ll try to answer your questions if you have any.
So to show you how to turn Gutenberg into a page builder, I think it’s best to take a step back first and ask ourselves, why do we use page builders in the first place? What value do they bring and what problems they were fixing for us? 
Okay, so before we had page builders, in order to build the contents of our website, we had to work with this; the TinyMCE editor which is basically kind of like a word processor. So this is okay if you’re building blog posts, but if you wanted something more elaborate and something that added more functionality aside from just text. Then, you’d have to resort to something else. You’d have to use what we call short codes. 

Something like this, this one displays a gallery with three pictures. So this is okay and there’s nothing fancy about this. You can easily understand what’s going on, but then people started using short codes to lay out content. 

And if you do it that way, It can look something like this. So imagine having tons and tons of these across your website just to make columns, it would be a nightmare just to tweak things. And you’d also need a lot of imagination to know what’s going on. Or you have to hit preview every time, so that’s another problem. 

So we needed something more visual, something that’s easier to use than just short codes. So that’s the start of page builders, but now page builders offer a lot more things aside from just visual editing.

So they provide templates to build for tablets and mobile, and they also allow you to build much more complex layouts. So what makes a page builder? If you take a look at the page builders out there, I think you can boil it down to just two key points:

One, a page builder is something visual, you drag stuff and you drop stuff. And number two, it gives you a faster way of building websites. So if we were to turn Gutenberg into a page builder, we need to address these two points. 

So number one actually is already okay. Gutenberg is already a visual editor, where you can put blocks anywhere in your content. What we need to work on is number two. And this is what we’ve been working on with Stackable. Stackable is a companion to Gutenberg that provides page builder capabilities. 

So just a quick background, we were one of the first Gutenberg plugins to be released. We’ve been in the WordPress plugin directory since February 2018. Actually back then Gutenberg wasn’t yet part of core. 

So Stackable turns Gutenberg into a page builder by providing these: full customization options, an organized inspector, good design starting point, global styling, responsive editing, ready-made designs, dynamic content, and other helpful things.

So let’s start with full customization options. So first off I have here a native cover block. So as you can see, we have a few options to the right in the inspector. Now these are enough to build simple designs, but they are nowhere near the number of options that page builders give us. So let’s compare this to a Stackable block.

So I have here one of our Card blocks. And as you can see, we’ve added in a lot more options for customization. You have container settings, settings for spacing, for images and the different typography that you see inside our block. You also have advanced settings for further refinements. And for even more advanced users, you can also add CSS. 

So that’s full customization options, now on to the inspector. So if there was an UI that made you say I’m currently looking at the page builder, then that’s an inspector. So what we did was we organized our inspector for our blocks as well. We added familiar tabs and we grouped things together into layouts, styles, and advanced settings. So all across our blocks, you can see these tabs so that every block feels familiar. So now, if you know how to use one block, you kind of know already how to use our other blocks because of the same layout.

Next a page builder makes designing easier so that means giving a good starting point. So what do I mean by this?

So in Stackable, one of our blocks is called the Call-to-Action block. And when you add one to your page, it’s already a complete set. It has the basics of what a call to action is. So you have a title, description, and the button that the user can click on. Aside from that, we’ve also included in some common layouts for call to actions. So you can just pick one and start off from that point, and style it to your liking.

So you can also see this in our other blocks. So right here I have a Testimonial block, so it’s also a complete set. You have there the testimonial, the picture of the person who made that testimonial, and their name, and their position. So aside from this, we also noticed that a lot of the times when building web pages, you build them in sections.

So typically you have a section for a feature and then maybe you have a section for a pricing table, and then another section for testimonials. So we’ve added in a way to make blocks into full page sections easily with just a few clicks, really helpful. 

So next up is global styling. So I’ve shown you that you can fully customize your blocks to whatever you need for your site, but doing this again and again for every block can be quite tedious. So what we did was we added some things that would also affect multiple blocks at once across your site. So you have global colors and you also have global typography. 

For global colors, you can change your color palette. You can add as many colors as you like and probably the best part about global colors is that if you want to make a change in the future, you can just adjust your colors and it should take effect across any block that uses that color across your entire website. So it goes the same with typography, you can change all your headings here and you no longer need to go through every block and change your styles across all the texts.

So next we have responsive editing. So page builders are really good at allowing you to design for mobile and tablet screens. Now, Gutenberg has something like this in place where you can change the preview to tablet and mobile to see what it looks like. 

But when previewing other screen sizes, it just adjusts what you see so you can’t really perform edits. So for example here, if I like to change the alignment of my title in tablet so that it will look nicer since the area is smaller. If I change it to centered and then I go back to desktop, you can see that it also affects the desktop style. So it’s not really sticking to tablets only. 

So let’s take a look at what Stackable does. So we’ve added in these responsive toggles, so you can use them to change the preview. And when you’re inside another preview, any changes that you do with only stick to that preview size. So if I go back to desktop, as you can see it goes back to normal. And when I go back to tablet view, it reverts to the new style.

Okay, so not everyone is a designer. And with page builders, they usually come with a set of pre-made designs that you can use. Now Gutenberg already has some pre-made designs and they call them patterns. By default, they provide a few and themes can provide more. And there are more plans to create the pattern directory too similar to the block directory.

For Stackable, we added our own pre-made designs in our own design library. So we grouped them together in what we call UI Kits and these are actually designs that have the same look and feel so that if you’re making a website that has a certain look, you can find the UI Kit that has the closest one and then use those. So we have hundreds of designs that people can use. And we have plans to extend this to have completely designed websites which can be a real time-saver. 

Next is dynamic content. Dynamic content means that you can grab content from other parts of your website and put them inside another. And then when that content changes, it also updates the other parts of your website.

So Gutenberg doesn’t have something like dynamic content yet. Probably the closest one would be the Post block since you can pull your latest blog posts. So what we did was we added this button over here, which we are calling dynamic fields. And for example, you can grab your latest posts and use any property that page has. So I’m going to choose the post title and as you can see in the front end, the title displays.

So here’s the dynamic part. If I create another blog post, a newer blog post and I’ll name it “an Even Newer Blog Post”, the title a while ago will now update to show the new one after I refresh.

So that’s dynamic content. Lastly, Stackable provides other helpful things too. Like for example, if we’re making websites for clients, one of the great things that some page builders do is provide a role manager. Now, Gutenberg doesn’t have anything like this either, but with Stackable you can pick who has full editing access in Gutenberg.

And those who don’t have full access can only edit block contents. So your client can edit parts of their website like text, images, links, but not really the design. The design stays locked in place. So this is actually a great addition to Gutenberg and it works across all blocks and your clients will thank you.
And That’s it! With all of these, Stackable turns Gutenberg into a page builder. So to run it through again, that’s full customization options, an organized inspector, good design starting point, global styles, responsive editing, ready-made designs, dynamic content, and other helpful things like the Role Manager. 

Okay at this point you may be wondering but wait, page builders can design entire websites so how about your headers or your footers? They have theme builders and Gutenberg can only edit the content area. Yeah, that’s currently the case, but not in the future. We will get full site editing with a future update in WordPress, and we can get the ability to change other parts of the website all inside Gutenberg. But while that’s not yet in yet, at least now we can get the help of a good WordPress theme to help us out.

So if you have any more questions that I wasn’t able to answer in the chat, you can always reach me at benjamin@gambit.ph, and in Twitter @bfintal. If you want to learn more about Stackable, please do join our Facebook community. Or you can always visit our website at wpstackable.com 

So before I go, I just want to share what’s in store for the future in Stackable. So the development of our third major release is currently underway. So we’re greatly improving responsive editing so you’ll be fully in charge of things like how your columns would collapse. We’re also working on a few starter sites that you can import to get a fully working website right away and start editing from there. And then overall more flexibility across our blocks. And perhaps a few more new blocks. 

Alright, thanks for listening! I do hope I was able to give you a new perspective on Gutenberg, until next time.