Pinegrow Countdown: Day 2 – Pinegrow is STILL not a Page Builder

I’ve said this before, and it bears repeating. Pinegrow is not a Page Builder. Yes, you can build a page with it, but that is where the similarities end. The reason I point this out is because this one misconception is at the root of a lot of frustration that I hear from new Pinegrow users who are trying to make WordPress blocks or themes.

In this video, I’m going to show you why Pinegrow is different, so you don’t fall into the trap of trying to use it like something it’s not, only to get frustrated and give up.

If you haven’t watched my previous video about this, I suggest doing that right now because I’m not going to repeat too much of it. Check the description below for the link and come back when you’re ready.

In this video, I’m going to expand on two points, content separation and WordPress Actions.

Content Separation

What do I mean when I say content separation? What I mean, is that Pinegrow gives us the ability to completely separate our content from our design. Anyone who has used or created classic page templates with custom fields knows what I’m talking about. We’d start by creating custom fields for pretty much every piece of content. Every headline, every image, every text block would be defined using custom fields. Then, we’d design the page templates to display those custom fields however you wanted.

While designing, we used placeholder text or images to make sure things looked roughly the way we wanted. Because ultimately, we knew that the website’s editors were going to be the ones to add or change their content. This provided a strong sense of structure to the page’s design and layout, and it gave editors clear guidance about what to put and where to put it.

Working with Pinegrow is a lot like this.

How People Use Page Builders

Now, let’s take the example of how people tend to use Page Builders. Instead of defining all the pieces of content beforehand, we simply open our page builder and start building. We grab components, which might be headlines, images, text blocks, or complex elements like carousels and accordions, and we drop them onto our pages. We fill in the text that our clients give us or drop in some lorem ipsum text, hit publish, and call it a day.

Wait a minute, that actually sounds pretty awesome, right? And it does. At first. If you are the site designer. Look what happens to sites built like that over time, though. I usually see it going in one of two ways. In the best-case scenario, you get hired to make all the updates and changes to the site. This is great for small businesses who don’t have in-house marketing teams or content editors. You make money, the website stays looking the way it should, and everyone is happy.

Mature Organizations

In reality though, more mature organizations are going to want to manage their own content and they’ll probably have some brand guidelines that they need to enforce. And here is where we start to see the issues. Because now, instead of going into the WordPress page editor and simply filling out some fields, they have to open a completely separate page builder interface to manage their content. This leads to frustration, confusion, and chaos.

And wait… look at that. There are some flashy new components that we can drag onto the page. How cool would it be to add some scrolling text or a fun animation? And just like that, the carefully designed website that you built under the guidance of your client’s leadership team has gotten out of hand. Before long, every page starts to take on a different look and feel and all sense of cohesion or brand has gone out the window. I’m not exaggerating either, I see this all the time.

And please don’t get me started on the challenges of migrating content that was created using page builders. But I digress…

Content Separation with Pinegrow Blocks

With Pinegrow, it looks a lot like you are working in a Page Builder, but in truth, it’s a lot more like working in a visual code editor. You have to stop thinking about putting the final content into Pinegrow, and start thinking of the content in there as being a temporary placeholder to help you with your design and data structure. Sure, you could create an entire page template or block with all the final content in place, but then you’d have to edit code to make any changes later on. Instead, you use WordPress actions and block attributes to tell Pinegrow that a piece of content is editable. Pinegrow then takes that placeholder content and replaces it with the code that allows editors to modify the content when it creates your block.

If you’ve used page builders with dynamic data features, this is similar. Only we do it for all pieces of editable content, not just a few pieces per page. The result is a custom WordPress block that is styled exactly the way you want and has all the content fields defined and editable for the end user. We can even go so far as to control what kind of styling options we want to make available to them. Should they be allowed to change the font size or color? No problem. Should everything except the text be locked down. We can do that too.

And, by the way, I’m not just picking on page builders here. The WordPress block editor is just as bad in this regard. And with 3^rd party block plugin suites, it’s even more confusing since each one has a different interface, a myriad of controls and options, and tons of overlapping functionality.

I personally think that the Block Editor can be a good thing for WordPress, but I see why so many developers hate it. It’s a complete mess unless it’s tamed properly.

WordPress Actions

Now, let’s move on to WordPress actions. This is another area that seems to trip people up, more because of misaligned expectations than anything else.

Again, coming back to the Page Builder paradigm, it might be easy to think of these WordPress actions as things that you would drop onto your page to create. It doesn’t work that way in Pinegrow though. Each of these actions actually refers to a bit of WordPress logic or functions that you’ll assign to placeholder elements inside the Pinegrow builder. When Pinegrow exports your theme or block, it takes those elements, with any of the styling you’ve applied, and converts them to PHP or JavaScript code. In fact, you can even click on the preview icon to see the code that it’s going to create for you. Which, frankly, is a great way to both troubleshoot issues and to learn more about the inner workings of WordPress.

So here is my advice. As you are creating your blocks, try to think about how you want the block to behave as well as look. Then, focus on designing it to look the way you want and apply the WordPress actions wherever they’re needed. It’ll take a bit of practice, but pretty soon you’ll get the hang of it. Remember, even though Pinegrow takes away the need to know how to code in PHP and JavaScript, it still helps to try to think through your project the way a programmer would.

Wrap-Up

Alright, that’s all for today. We have just two days left before Pinegrow drops some new products on us and I’ll be back tomorrow with another short video.

Stay tuned to my channel and Pinegrow’s YouTube channel for more information, and I’ll see you in tomorrow’s video.