Page Builder In AgencyOS

Speaker 0: Hi there. Bryant here for Directus. Welcome back to the next video in our Agency OS series where we're talking about the Page Builder. When you make the move to Headless, one of the things that your team may miss most is the Page Builder functionality from WordPress or other visual CMS's where you can move things around the screen and control margins and paddings and all of that. While I would argue that's a great thing because I want my content team focused on building the best content possible, not worrying about design or how things look on the page, That can be a blocker.

But fear not, Agency OS and Directus make this easy to build dynamic pages and still maintain a consistent design system. Let's take a look at how it works and how to build new pages. So, on the left hand you can see we've got our front end And then on the right hand side, we'll just pull up the home page. You'll notice that the home page is made up of different content blocks. I can move these blocks around on the page and save and refresh our front end to see those changes being made.

Great. I can move stuff around on the screen. But how about adding new blocks? Very simple. I'll just go down to the create new option and you've got all the blocks that are available that you've added to your Page Builder collection inside Agent c OS.

So we will add a title for this Rich Text block, give it a headline, add some content and save it and we can see the changes happening on the front end. One of the other great features is that you can even reuse existing blocks from other pages so that you don't have to recreate the same stuff on each individual page over and over again. So I just select a logo cloud, refresh, and boom, there it is. Sometimes you may want to hide a block without removing it from the page. It's very easy to do within Aegis CoS.

I just pull up the block that I wanna hide, check the box, refresh on the front end, and now that block is hidden from view ready to be activated whenever I need it. With that out of the way, let's take a look at how we add blocks. We're gonna navigate to the data model within our settings. And if we just search for block, we could see that all of these blocks are just different collections within the Directus project. Now adding new ones is simple.

We can go into our Page Builder under the Blocks section. And this is where we control all of the blocks that are available for our content editors to add and reuse on different pages. Now for adding a new block, what we're gonna do is go back and add a new collection for this block. We'll call it block new. So we'll save this block, and then we'll add some fields to control our content.

So let's add a WYSIWYG editor. We'll just give it a key of content. That's how we're going to access it on the front end. And let's add an image as well. All right, so we've created our collection for our block data.

Let's go back into our pages to the Blocks field and add that block to the related collections so that we can add it when we're building a Page. So I'll just check the box for it, save this, and go back to our front end, to the Home page. And now I will be able to use that block within our page content. So we just add that, we will enter some content, select an image, and add it to the page. Now that we've added it to the page, we should be able to see this on the front end.

So we'll just drag and drop this up to the top so that it displays in the first position on the page. But when I refresh, lo and behold, I don't see that. That's because our front end isn't aware of this block. So let's open up Versus Code and actually create this block so we can render that content on the front end. I'll just, do some window management here and we'll dive into the project.

So we're looking for the components blocks directory. And the quickest way to do this is just cloning one of the existing blocks within the project. We've got a WYSIWYG component here, so I'm just gonna duplicate rich text dot view. Now, I'm just going to do some simple clean up on our types once we've created the file because this is no longer a RichText component, it is our Block New component. Alright, so now we'll just swap out the definition for our props with the new interface and we'll remove the default props because we don't have any properties like alignment that we want to control for this block.

Alright, so now we'll just adjust the template for this. We've got our typography pros for our content. This will render any HTML content in a nice format. And then we are also going to just use the Nuxt Image component, because it has some built in helpers for handling images from Directus. So now we've got our template.

When I refresh the page, I don't see this block being displayed. And that is because we need to make our Page Builder component aware of this particular block. So the page builder component loops through all of the different types of blocks and renders them on the page. We'll just add a new component within the component map using the Resolve component but we don't have any images or content displaying. This is a permissions problem because we created that new collection within Directus but we forgot to set public permissions for it.

So any collections by default have 0 permissions because we want to keep your data secure. So we'll go into the roles and permissions for the public role and we'll look for that block new collection and give read access so anyone in the general public can see our content. Great. We refresh and we're still not there yet. So we have to actually fetch that data from the API, which is happening inside the permalink page within Nuxt.

So we'll go into our fields collection, We'll make sure that we are fetching block new. And much like GraphQL, we want to fetch only the content that we needed so our site stays fast. So we'll do id, content, and image as the keys and then we reload to see that content being rendered on our front end. Now, and that's it. So you are now an expert in all things Page Builder.

Go forth and build your own pages, add your blocks, customize this as you see fit. Stay tuned for more videos in this series where we'll deep dive into other features of Agency OS.