In order to get the featured projects displaying on the home page, let's create a new block. Once again from the block library, I'll click the new block button. I still want a nested block this time since it'll be nested on the home page and we'll call it featured projects and click add block. Alright, our featured projects block I think should contain two fields.
First we'll have a title field and this will just be for displaying the title above the little section for our featured projects. Probably the user will fill it out with the words featured projects. Next, I'll create a field called projects, and this will be used for selecting which projects we want to display as our featured projects. Now StoryBot actually makes it really easy to create fields that reference different stories.
Let me show you what I mean by that. So let me go to the projects field here. and I'll change its fill type from text to multi options. And then I'll scroll down and let's set the source to stories.
This means that we can select multiple stories in order to fill out this fill. So yeah, we want to be able to select multiple different projects to show. Next, let's tell it which stories we want to be available as options. In our case, that's the stories from the projects folder.
I'll also check this little checkbox just above called use UID instead of ID. Just because when I hover over the little tool tip here, it says this is recommended to be checked. Let's also allow our content creators to reorder these feature projects in any way they desire. And let's say that there's a minimum of at least one project to be displayed and a maximum of maybe three.
So I'll hit save and back to fields. And now let's go put this block to good use. Over on the home page, under the content section, I'll come over here to the editor and say add block. And the block I want to add now of course is featured projects.
When I open this block up for editing, you can see that now we have a little drop down in order to select which projects we want to display. I'll choose the food picker upper sticks, as well as the toast maker. and add them to our homepage. Then we'll also fill out our title as Featured Projects.
And this actually brings up a pretty cool little feature of a Story Block. So since this is going to be Featured Projects probably every single time, we can actually provide a default value of Featured Projects so the user doesn't even have to think about it. Well, we can actually edit the fields for our block right here from this Story Editor page. To do that, I'll come over here to this little gear here and say edit field.
Then I can scroll down and just give it the default value that I want it to have. Right. Now we need to create the feature projects component over in the code base. That way we can actually see something on the page.
Under the story block directory, we'll say new file feature projects dot view. Since we have pretty much the same script setup section for most of these story block components. view. That way we have our block prop available.
And then let's just print out the content of the block so we can kind of see the JSON payload that we're working with. All right. Back over in the browser, I can now see the printout of the JSON for this block. If it didn't show up for you, you might need to try restarting your dev server since we just created a new component.
Here, you can see that we have access to the title, Feature Projects, which is great. But for the Projects property, all that we actually get in the API column is the IDs for those projects. And that certainly is not going to be sufficient for our needs. We need all the information like the project name and the image in order to display it on the homepage.
Well, we can actually tell StoryBlock to send us this information. via a configuration option. view that's powering the home page. And then when we call the use StoryBlock composable, alongside the version option, I'll provide one more option called resolve relations.
So now we need to tell StoryBlock which relations to resolve. projects. The way this works is that we first inform StoryBlock what block the relation exist on and then which field awesome so now after saving the file and checking things out in the browser again it looks like things have disappeared down here let me hit save just to make sure i've i've saved the file and our feature project stays on our home page and okay yeah now now it pops up but it looks like we're still only getting the ids let me see if i did something wrong here oh Yeah, it looks like we said featured project here instead of featured projects, plural. Save it again.
Awesome. This time in the JSON payload, we get the full objects giving us all the data for those projects. That means all that's left to do now is to actually provide the markup for our featured project section. Here we provide some markup with classes and some styles.
We'll print out the block title here. This is that featured projects title. And then most importantly, we loop over each of the projects in the block, provide a link to the actual project page based on its slug, display the image for that project, and then lastly print out that project name. Perfect.
Now we have our featured projects showing up on the home page. But there's one last thing we forgot to do. and that's to provide the Veditable directive on the root element. Awesome.
Now we can click on that section, and it shows up feature projects here, and it takes us to the proper section in the editor. Before we conclude the video, let me show you just one more thing. That is, if I do add or remove one of these projects, let's say we can remove the Toast Maker, then you'll notice the preview doesn't actually update right away. If we hit the save button, you can see that the preview does update.
However, this isn't really ideal. To fix this, we can add another option to our new story block composable. And actually, this is going to go as a third argument to the composable. This third argument is technically options for the story block bridge, which is the technology that tells the visual editor how to interact with the preview.
The option here is the same as we passed before. that is resolve relations but this time it's camel cased instead of snake cased and then we'll just pass the same value as before now over in the browser let's give the page a refresh for a good measure and then alter the feature projects again awesome this time it updates in the preview right away without having to hit save and if i want to add one back in perfect that works great In order to get the featured projects displaying on the home page, let's create a new block. Once again from the block library, I'll click the new block button. I still want a nested block this time since it'll be nested on the home page and we'll call it featured projects and click add block.
Alright, our featured projects block I think should contain two fields. First we'll have a title field and this will just be for displaying the title above the little section for our featured projects. Probably the user will fill it out with the words featured projects. Next, I'll create a field called projects, and this will be used for selecting which projects we want to display as our featured projects.
Now StoryBot actually makes it really easy to create fields that reference different stories. Let me show you what I mean by that. So let me go to the projects field here. and I'll change its fill type from text to multi options.
And then I'll scroll down and let's set the source to stories. This means that we can select multiple stories in order to fill out this fill. So yeah, we want to be able to select multiple different projects to show. Next, let's tell it which stories we want to be available as options.
In our case, that's the stories from the projects folder. I'll also check this little checkbox just above called use UID instead of ID. Just because when I hover over the little tool tip here, it says this is recommended to be checked. Let's also allow our content creators to reorder these feature projects in any way they desire.
And let's say that there's a minimum of at least one project to be displayed and a maximum of maybe three. So I'll hit save and back to fields. And now let's go put this block to good use. Over on the home page, under the content section, I'll come over here to the editor and say add block.
And the block I want to add now of course is featured projects. When I open this block up for editing, you can see that now we have a little drop down in order to select which projects we want to display. I'll choose the food picker upper sticks, as well as the toast maker. and add them to our homepage.
Then we'll also fill out our title as Featured Projects. And this actually brings up a pretty cool little feature of a Story Block. So since this is going to be Featured Projects probably every single time, we can actually provide a default value of Featured Projects so the user doesn't even have to think about it. Well, we can actually edit the fields for our block right here from this Story Editor page.
To do that, I'll come over here to this little gear here and say edit field. Then I can scroll down and just give it the default value that I want it to have. Right. Now we need to create the feature projects component over in the code base.
That way we can actually see something on the page. Under the story block directory, we'll say new file feature projects dot view. Since we have pretty much the same script setup section for most of these story block components. view.
That way we have our block prop available. And then let's just print out the content of the block so we can kind of see the JSON payload that we're working with. All right. Back over in the browser, I can now see the printout of the JSON for this block.
If it didn't show up for you, you might need to try restarting your dev server since we just created a new component. Here, you can see that we have access to the title, Feature Projects, which is great. But for the Projects property, all that we actually get in the API column is the IDs for those projects. And that certainly is not going to be sufficient for our needs.
We need all the information like the project name and the image in order to display it on the homepage. Well, we can actually tell StoryBlock to send us this information. via a configuration option. view that's powering the home page.
And then when we call the use StoryBlock composable, alongside the version option, I'll provide one more option called resolve relations. So now we need to tell StoryBlock which relations to resolve. projects. The way this works is that we first inform StoryBlock what block the relation exist on and then which field awesome so now after saving the file and checking things out in the browser again it looks like things have disappeared down here let me hit save just to make sure i've i've saved the file and our feature project stays on our home page and okay yeah now now it pops up but it looks like we're still only getting the ids let me see if i did something wrong here oh Yeah, it looks like we said featured project here instead of featured projects, plural.
Save it again. Awesome. This time in the JSON payload, we get the full objects giving us all the data for those projects. That means all that's left to do now is to actually provide the markup for our featured project section.
Here we provide some markup with classes and some styles. We'll print out the block title here. This is that featured projects title. And then most importantly, we loop over each of the projects in the block, provide a link to the actual project page based on its slug, display the image for that project, and then lastly print out that project name.
Perfect. Now we have our featured projects showing up on the home page. But there's one last thing we forgot to do. and that's to provide the Veditable directive on the root element.
Awesome. Now we can click on that section, and it shows up feature projects here, and it takes us to the proper section in the editor. Before we conclude the video, let me show you just one more thing. That is, if I do add or remove one of these projects, let's say we can remove the Toast Maker, then you'll notice the preview doesn't actually update right away.
If we hit the save button, you can see that the preview does update. However, this isn't really ideal. To fix this, we can add another option to our new story block composable. And actually, this is going to go as a third argument to the composable.
This third argument is technically options for the story block bridge, which is the technology that tells the visual editor how to interact with the preview. The option here is the same as we passed before. that is resolve relations but this time it's camel cased instead of snake cased and then we'll just pass the same value as before now over in the browser let's give the page a refresh for a good measure and then alter the feature projects again awesome this time it updates in the preview right away without having to hit save and if i want to add one back in perfect that works great