Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce

Welcome to this workshop. Today we'll see how we can build a visually readable Next JS website using the React Bricks library. I am Matteo Frana and I am the COO and lead Frontend developer at React Bricks. This will be a live coding workshop, but I suggest that you follow me and I would like that you are relaxed watching what I'm doing instead of having the stress of copying the code in a rush. I will give you the link to the repository at the end. And anyway, if you will follow me, you will understand the basics of React Bricks so well that you will be able to start from scratch without even the need to reach out for the repository. So please follow me, and we don't know how to copy the code. It's really easy. You will see that you will have a very clear method. And so I would start with just a couple of slides to give you some context on what is React Bricks. And so it's less than 10 minutes. And then we'll start coding.

So let's start with what is React Bricks? React Bricks is a CMS with visual editing based on React components. But the most important question is why? Why we created another CMS? And well, without spoiling too much of the talk that will be on June 6th, during the history of content management, we saw many times the alternating of visual editing and editing with forms. So something which is great for the developers and something which is great for content editors without finding a satisfying synthesis between the two. So when I started with the web development, it was 1996 and it was just writing HTML code, that you would send to a server BFTP. Then we had the visual tools like a front page where you could create the code visually, really the code that was created was a mess. And if you gave a front page to your customer, they could destroy the design. So we had CGI with Pearl where you could create the forms to edit content on a database and then get the content from the database to create the HTML and ESP and PHP. Which are the same things with the templating language. And then CMSs came, Joomla, WordPress, where you could edit in a visual way on a white canvas again. But we had the problem that we still could have our customers creating the red text over green background or something like that. And so we added advanced custom fields to WordPress and we were back to Ray Forms. So, and we come to today where we have these two words, we have the tools like Wix or Webflow, which are great for the editors, but they are a no-go for a corporate website because they are not flexible enough. For example, with Wix, you cannot have your pixel perfect design system. With Webflow, when your editor understand how to change things, adding margin, et cetera, they can get creative and change the design. And on the other end, we have the headless CMSs that we love, but where we are back to gray forms. Well, you saw, if you saw the next Conf, you see that also Vercel is thinking that this visual editing now is the time to find these a synthesis of a visual way of editing website, which is great also for the developers. And we'll talk about it later. But essentially this is why we created React Bricks. So essentially we need four products, a Headless CMS, a Visual Editor, a Frontend library to create our code and a product called Freedom. And now we see why.

And let's think we have a Content Editor also a CMO, a Developer, a Designer and a CTO. It seems like the start and the beginning of a joke. An Editor, Developer, Designer, and the CTO walking to a bar. But let's see what are the needs for these personas. The Editor wants to have a tool which is easy to use. It doesn't want to cope with abstract entities and relationships. We as Developer, we need something which is flexible that allows us to use the tool that we love, React frameworks and any CSS framework where we and we need the editor to be autonomous because we don't want to explain editors how to use the CMS. They need to be autonomous in using it. We want to be productive, of course, while designers want to be able to express the perfect corporate image with the design system and be sure that the editor have no way to break it. The CTO wants the team to be productive and wants to choose a solution which is flexible and future-proof. So what we need is a visual editor for the editor and a true visual editor where we have the inline editing like Word or Pages. For the flexibility, we want the coupled headless CMS and ability to use React as it happens with a headless. For readers to be autonomous, we just need a new visual editor, so it solves also the problem for us. To be productive, we need a method. So an opinionated method that helps us creating the front-end. For design system, we need blocks. We need good constraints so that the design system cannot be broken. And if we have all these things, we have a high-productive team because the editor is happy, the developer is happy, and the designer is happy too. So, a great team, great design, good code. Good code, and in the end, great content. So, to have flexibility and to have a system which is future-proof, we need the freedom. The freedom to choose today and the freedom to change ideas tomorrow about the framework for example. So we want a system which is framework-agnostic that works with SDS, with Gatsby, with Remix, that will work with Astro very soon. And we want the freedom to be able to host the website wherever we want, that is Recel, Netlify, or anything else. So, let me reorganize these things. We need a headless CMS, a visual editor. React and Blocks are just the React components. And we need a method with constraints and freedom. The headless CMS is provided by the React Brics APIs. So you have now an enterprise grade headless CMS. With the React Brics library, you have a method to create visually editable content blocks that are React components, and to set good constraints for the editors. And you get for free the freedom to choose and to change idea. So with one product with React Brics, you get all of these four products. With other solution that we are seeing today, like for example, what we saw at the VersaConf, you need a headless CMS, which is something like sanity or contentful. Then you have the visual editor, which is really not in line with visual editing like the one that you will see in a moment, and it will work on the collaboration that you have on VerCel. So you are bound to that platform. You don't have a good method to create the front end blocks, and you are bound to use next JS as a framework. So in the end, you lose some part of the freedom.

So how React Brics is created? Well, everything is based on this concept of visually editable content blocks that are just react components augmented with the React Brics Library. And we call these content blocks Brics. So it's very easy. It's like using Word or Pages for some of the content you directly edit. For example, for the text, you directly click on it, edit. For images, you click and edit them. And this is enabled by the visual components of React Brics like text, rich text, image, repeater, file, et cetera. And for the props that are not directly editable like a background color, it's just like what you would do in Word. You reach out for a cyber control. And so the React Brics have a schema where you can define side edit props that are just controls that map to your component props so that you will receive these values as props of your component.

But let's start immediately. To start, we just need to launch a CLI command. So npx create-reactbrics-app at latest. Let's do it. create-reactbrics-app at latest. Okay, it asks me if I have an account. Yes, I have. Then I answer an account email. I enter my password. Okay, now I can use an existing app or creating a new one, that's great, a new app. Workshop two, three, five, 18. So this is okay also for the project name and for the folder name. Now I can choose if I want an empty project or a website and blogger with Tailwind. Now we choose this one so that we have already some styles and some premade blocks. Then we can choose a framework. So you see that we can choose NextJS, get VR Remix and we are working on the Astro starter. So let's choose NextJS. We can load some default content, let's say, yes. So now the CLI will download the correct starter, download some premade bricks of bricks UI, set up all the configuration and the.env variable with our app ID and API key, so it is connected to our Rare Bricks app, which will install the dependency and then after setting up the repository, you'll see that it will do some call to our API to create some example pages.

Okay, so now we can enter into the project. Okay, and then let's open our VS Code. And meanwhile, let's start the project. While it compiles, let's have a look at the project folder, it's an XGS project, and you see that we have the pages folder, and we will create also a version with a new app folder of next. And you see that in the pages folder, there is the admin folder, where the admin and the administration site leaves. So you host the admin site together with the website, because they both access our content bricks. And so that what you see in the admin is exactly what we get in the front-end. And you see that you have just the editor, playground, upsettings component from RealBricks with an authentication layer. You usually don't have to touch this part, and we have a catch all page here, where the important part is that in the Get-study proxy, you see that we fetch the page using a function of RealBricks, which is FetchPage that will get the Slug and fetch the content. And then we have a page viewer that will show the content exactly as we saw it in the admin. It really, we have a three page viewer here because we have one for the header, one for the page content and one for the footer. This is a way to reuse content across pages when it is used by all the page, then we will see later three way that you can use to reuse content across pages in React Bricks. For the header and the footer it's very, it's handy to do these things and have three page viewer. And then we have the React Bricks folder which is where all the configuration of React Bricks lives. And in particular, we have two very important parts that are Bricks and PageTypes. Bricks are our content blocks. So you see that bricks come from these Bricks folder. If I open the Bricks folder, I have an index. And what we are doing here is exporting an array of themes, we have this concept of themes. And we have two themes. One is this custom theme, which has just one category, hero section with one hero unit, which is here, this is my hero unit component. And then I have real bricks UI theme, which comes from these folder. And if I open the index in this case, you see that we have many premade components that are organized in cathegories. And then they are exported as a real bricks UI theme. So now let's open the project so that we see the real bricks interface. So localhost 3000. This is the website, that we did the default content. So you see, we have a homepage, all that you see are bricks with some default content inside. And we have an About Us page, we have a blog organized with the tags. We can click on a blog article and see the content. But now let's go to this edit content button here that will bring us to the admin folder. Of course you will not have it in your live website. But it's just an easy way to reach the admin folder. Now we can log in with the same credential that we used for the CLI and that we used for the registration of our user. And here we have the pages. So here I clicked on Home. And when I click in the content, you see that this pink border appears. This is a brick. So this is a react components with particular schema and property and that is using the React Bricks components to be visually editable. So you see that here I can click and directly write over the content. So welcome to the React Bricks workshop. I'm not opening up any popup. I'm not reaching out to sidebar controls. I just write over the text as if they were in Word or pages. In this case, I can apply a style, which is highlight because in these texts, I decided that I wanted just to have a highlight. In this case on the right you see that they can apply bold and then we will see that you can provide your own render function for any style that you have in the rich texts. On the right, you see that I can change the gradient of the text, for example, or I can open up this background, collapsible group, and the changed the background color. So everything that you see here is defined by this brick. So you can define a set of collapsible group of props with off controls that map to your props so that you can conditionally render based on these props. If I go to another brick, you see that in this case, for the background you have other colors available and you can remove these gray scale Boolean to have the colored logos. If I go to these other brick here, you see, for example, this is very flexible, you can choose, it is a text media brick where I can choose to have a video from a local video a streaming video where I can set the platform and the video ID, I can have an image so that they can apply that and upload an image that can decide the media size, et cetera.

So now let's see the code of a brick. Let's see how a brick is made. So first of all, I would like to show you my Hero Unit brick, the one from the custom theme. You see that I, when I click to add a new brick, I have all the bricks that are available. And when I hover over a brick, you see the preview of the content. These are all the bricks that you can use that are already made. So you have many, many bricks. If you want to do something similar to these, you can take inspiration from these bricks. Of course, then you will create your own, but if I choose instead of React Bricks UI, I choose custom, I am filtering just these themes. And now we will use this custom theme. Let me add this custom Hero Unit. You see that we have an image. I can click and upload an image. For example, I can add an icon. In this case, you see, I cannot prop because it is an SVG, but let's select an image from Splash. Okay, let's get this image from Splash. Let's see how this looks. Okay, you see that in this case, I can crop it, but I can crop it just as a square. We will see in a moment why. So let's go back to the social friendly name. Okay, so I have an image, I have a text where I cannot apply any rich text style and they cannot create new lines if I click on the Enter button. And they have these rich text where I can apply bold, italic, highlight, code, and I can also click to create new lines. So let's open up the code for this brick. We saw that this is the MyHero unit. So first of all, you see that we import some components from React Bricks, image, rich text, text, and the types from React Bricks. React Bricks is all written in type scripts, so you have everything fully typed. The component is of type brick, but a brick you see that it's just a functional component with a schema property. And you can set these generic so that you can define type or an interface for this brick, and it is used also in the schema where you define the default props for this component. But we'll see it in a moment. You see that we have an image here with the prop name, a fallback alt. So we have a ALT tag as fallback, but you saw that when I upload, I can decide what is the alt. Then I have a max width. This is used by the React Brick server so that if I know that an image is at max 200 pixels, it's not useful that the React Brick server create an image at 2000 pixel for the big screen because anyway it will be at 200 pixels. So it will create an image which is two times 200 pixel for the retina display. This aspect ratio one is what makes the cropping constrained to be a square. So I can set an aspect ratio so that our editors are able to directly crop inside of the interface but having a fixed aspect ratio if I want. And I am applying an image class name. For example here if I change the class to say rounded for and we go here, you see that now it is rounded. Then we have the text with a render function. So when I write over the text I'm writing these h1. Now you see that I'm applying the class names because I'm using Tailwind but Rapbox works with any CSS framework with no CSS framework with the CSS in JS frameworks. So you see I have these render block, a placeholder and the prop name. If I delete this text I have the placeholder type. I put the title. Then we have the rich text. The rich text is similar to the text but I can define the allowed features. So you see that we have all the code, the headings, highlight, order list, quote, et cetera. And they can define the render function for everything. In this case I did the override of the render code so that it's not just a code tag but I have this class name applied. If I want the code to be blue, I can say for example, Sky 200 and in dark it becomes Sky 800. Let me save. And so now, Oh, I didn't save. I forgot to save. So let's add the custom inner unit again and let's create a code tag. So now you see that it is called Sky and if I test in dark color mode, it is dark Sky. Okay, let's save this time. And okay, so I'm on the right. You see that in this case, we have just a simple prop, big padding or a small padding. So when I click I change, that's just the vertical padding. And now we need to see this schema to see how this works. You see that this schema has a name, it has a label that appears when you add the new brick, it has a preview image URL and these can be generated automatically by real bricks, we'll see it in a moment, then we have a function that return the default props that we have when a new brick of this type is added to the page. And then we have decided the props, they can be just an array of props or an array of collapsible group of props in more complex bricks, in this case, we have just the one prop, it is of type select and the option are big or small. What we do is we just take these padding prop and we conditionally render, applying a class or another based on this padding prop. So now it's time to create our own brick. And I'd like to create a brick that has a text on one side and just an image on the other side, so sort of flex with two columns text, maybe let's say a title and description and then image. So I will create it under this custom folder. So let's create a new file. Let's call it, text.image.tsx. And here I show you that I have installed a VS code plugin with Snippet. So I would just say brick and I will get a completed brick scaffold for me, there are many autocomplete that I will show.

But for this first brick, we will write it everything by hand. So I suggest that you install the react bricks plugin of VS Code. And now let's import the types from react bricks. And let's create a component. So text image, which is of the type Brick. And let's just create a div for now. And in this div, let's put an h1, say h1 plus name. Let's make it a bit bigger and bolder. It's a margin bottom that will be useful afterwards. And let's say that in dark mode, the text is white.

Okay. And let's say hello world. Okay. Now, let's export this component. But we see that this is not a valid brick because for a brick, we need to have also the schema. So let's create it. And we need to have at least a name for the brick. In this case, let's do workshop text image. And a label, let's say text image. Okay, now this is a valid minimal brick. Let's add it to all of our bricks. So I go to the index and here, now let's create a new category. This is hero section. Let's create a new category that we call its main content. And here, let's add our text image. Okay, so let's reload. Now, I click the plus button and you see that we have also text image. When I go over here, you see that we have hello world and we cannot change it because it's just the text. We didn't use the text component from React Bricks. So let's fix it. Image and so let's add, just to have better graphics, let me add a section from the Bricks UI here so that everything is not on the left side, but a bit more center with the container also. Okay. Okay, now let's add a text from React Bricks. So text, I'm importing it from React Bricks and for the text we have also a sneaker. So I show you that it can say React Bricks text and so it will create a minimal text let's use it. I haven't let's call this prop title. So you have a text with the prop name of title and the placeholder type a title. As for the render function, we can use this H1 that we already created. So instead of these spun target, let's have this H1, of course, instead of Hello World, we will use the children for the render function. And so, let's see what happens now.

Okay, you already see that there is type a title. So I can write now, this is a title and it is visually editable. I have no formatting. And they cannot add the new lines. It is a simple text that our editor can edit. Okay, so you see, when we have a new brick, now, the editor will see the placeholder. If we want to add a default text, we can do it with the get default props function. So let's do it. Get default props. It will return an object with the title. Let's say, brick as a brick. If you know the Jeju-taro, you know, the title of the Jeju-taro song. So now, when I add a brick of this type, so let's click the plus button and add a text image, you see that we have these default text. Perfect, so, now let me add the image. So we want a text on the left and an image on the right. So let's add a flex div here, just flex, justify between. And here we have two divs, one for the text and one for the image. Let's put our text in the first column. And let's say that here we have class name, which is width of two over five, so that we will have a one over five space between the two columns. We do the same for the other columns. Okay and here we add our image component from React Bricks, we import it from React Bricks. And now I have a snippet also for the image. So image, I click on React Bricks image. And so you see that there is this image with the prop name of image and in alt, this is an image. I am not good at SEO so I use this alt text here. And let's say that we have a max width of 600 for the aspect ratio. Let's say that we want an horizontal image. So let's see, let's say 1.5. And so, let's test it. Okay, I added my text image and you see that now we have the title and I have an image and when I click let's select from a splash, our usual seaside.

You want to go on vacation. And you see that when I select an image I can crop it but with these pixel aspects ratio of 1.5 over one. Okay, so now I'd like to add also a description below. So, under these text, I want to add the rich text. So, rich text from the rich front end and you guessed it. I have a snippet also for the rich text.

Okay, let's say that in this case we don't want to render a span but we want to render a paragraph. So let's just say a paragraph with a class name, let's say Text-LG with some margin in the bottom and the darker text white. Okay, let's close the P, perfect. As for the allowed features, you see that the snippet creates just the bold. Let's add also the italic. Okay. And I want to also create the render a function and so that I can provide my render function, I get to the children and I return an i-tag in the children but I apply a class name. Let's make it blue. So text say Sky 500. And so let's see how it work. Okay, you see I have type text. We need to add a default also for this afterwards but here you see that I can write and I can apply bold, I can apply italic and for italic you see that you have this blue text here because I defined the render function. So let's see just so that we can test everything in dark mode. So since we also use the dark classes of Tailwind we have a component which is just dark code and dark mode compatible. We can test it at different resolutions that by the way you can also configure in the rubrics configure, if you want other breakpoints. And you see that on phone, this is not so great so let's fix it in one second. We can say that the it is a Flex call by default and adjust after a certain point it become a Flex grow. So we can also say that the adjust when it is over a certain point and below we have a margin so that it will collapse and we have some margin between the text and the image and then it disappears. Okay and the same happens for this SM. Okay, so let's test this. Okay. Oh, I didn't save, I always forget to save. Okay, you see that now we have a brick which is editable we can edit the title, we can edit the description, we can add an image and it is already dark mode compatible and responsive. We can also test all the page with the full screen preview and you see exactly what you will see with the Page Viewer. This is the read only mode of React Bricks and what we will see in the front end. So now that we have this brick, let's add a side edit property because you see on the right we cannot modify anything of this brick. I would like the editor to be able to change the color without getting too fancy, I just want him to be able to choose white or light blue and so let's create a side edit prop. So I have an array of sided props, this is an array and to create a sided prop, I can use a snippet, so I click sided prop. What we need, the minimal configuration is a name, let's say BG Color, these will become our prop of our component of course, a label background color, and the type, here you see that we have Boolean, the attimage number range, text, et cetera. Now we choose a select, for a select control, we can provide select options, and select options have a display property, which can be, select, or radio, or color. In this case, we want a color picker, so we choose color. And then we have the array of options, you can provide both an array of options, or you can use a function that returns the options. And you can also provide an async function that will return a promise that resolves to an array of options, so that you can do also call to an external API to get the options. Now I just need simple options, so let's create these array. An option is a object we just select, label and value. In our case, let's say white for the white background, and we add a value. The value can be any for the option type. But if you are using the display color, it must be an object with at least the color property. Why? Because we need to display the color ballet, so we need a color. So in this case, sorry, FFF. We have the FFF, the white color. And since we are using tailwind, I would like to add also class name here, which is bg-white, so that we have our class that we can use to render. Let's add another option, otherwise it doesn't make sense, and so let's say sky. And so it is bg-sky 100, and now you need to trust me that the code for this color is E0F2FE. Okay, now we have a control, which lets you select, lets our editor to select a color. We need to use it in our code, so let's get the bgColor prop. And of course, we need to define a base or a type that you want. So let's say, text image props. And here I define a bgColor, which is of type well, in a rubrics you have the type, you have the interface IColor, which is just an object with a color prop. In this case, we need to add also the class name, type string, that we added. And so, let's add this generic to our brick. It's a brick with this interface. And so now we have the bgColor that we can use. And to use it, we can just use this section, which has already a background color prop, and this background color is very handy because it already gets an object with the color and the class name. So we just pass bgColor here. And now, okay, you see that the get default props throws, erases an error because we need to provide a default for this bgColor. And let's say that by default, we want the white in the ground. Okay, we're good to go. Let's reload. Okay, and now you see that by default, we don't have anything selected because this component was already here. If I add a new one, I will have the white selected, and now I can choose white or sky. And you see that the background color changes and our editor is able to change the background color, but just with what our design system has defined. Now, let's add a new color and let's add also a dark color, let's say BG sky 900, which is 082F49. So that they show you that.

Let me check one thing. Hey, I didn't give a default for the text. So let's give a default for it too. And now, let me reload. Didn't see you. Now you see that I can choose white, this light blue or this blue. And you see that rubrics understand this is a dark color and so the text is white. But it's better to add also a dark plus here, so that the wind will help us. And let's save. And now when I reload, we will get the white text when we apply the dark color.

Okay, so we saw also how we can create these side edit props. And now let's add another prop so that we learn the method very well. For example, we can choose, we can let the editor choose the side of the image and the text. So let's add another prop here, which is a side edit prop click. It is, let's say image side. Image side and it is of type, well, I would say, I will do a radio button in this case. And the radio button is a select and the select options. So let's see, we have a snippet also for the select options. I click it and it is of type select but I want to display it as a radio. And one option is left. I want the image on the left. And the other option is right. You have the image on the right as it is right now. So let's go to our interface. We add the image side, which is of type, it is left or right. And we can take this image side and easy. We just need to change this flex rope into a flex rope reverse. So let's remove these and let's create a template string. I don't want anything advanced like using class name something like that. I just do this. If image side is right, then I use the flex rope class name. Otherwise I do flex rope reverse. Okay let's see if this works. Okay, left, right. Okay, so we need to define a default also for these so that when we add the new brick, if we want to be sure that we have the text on the left and the image on the right, we can say that the image side by default is, you see that you have the auto complete here because the get default props uses the generics that you gave React bricks. And so we see we say that by default the image is on the right. And now we are the new brick of this type. So let's add a new one. Okay. You see that you have all the correct defaults. You have a text description and you have the ground color and the image side. We could also decide to provide a default for the image. Then maybe we will do it. So now you see that when I add a new brick, all the other bricks have these image and especially the one from Real Bricks UI, they have all these beautiful images that are very useful for the editor. Through that, when you hover it, you have the preview but it's great to see this preview image. Let's create a preview image for our brick. We go to the playground and the playground is where you can see all of your design system. You can click on a brick, you can play with it, you can see the props that it has and you can also get a component screenshot. So let's go to our theme which is custom. Let's go to our text image. Well for this screenshot, I want something better. We are taking a photograph so let's add some text. Let's add a beautiful image sometimes this time. Okay, let's get this image here. Okay, and now we get the component screenshot. Okay, now we have the URL in our clipboard. I can go here, and I can say preview image URL and then copy the string. Let's save. Now I go back to my Editor. Okay. The new brick. And you see that the text image has its preview image. So it's really very easy. You have these methods to create bricks, and it's really, really fun. Also it's like playing with Lego bricks. And your Editors, then we will play with the Lego bricks that you created.

So, I'd like to show you one other thing that you can create stories of a block. There is a feature which are these stories that it's not allowed in the Free Plan. And this allows your Editors to create stories of the brick. So essentially, to save a set of properties of a brick.

But, you can also create stories in code. So, let's say that there is, we want our Editor to be able to choose the dark text image. So, we can create, we can go here in the configuration, and say stories. And we want an array of stories. And a story has an ID, let's say dark. It has a name, dark. Dark. And it has the props. For the props, let's use the playground to copy the props. So, I go to the playground in our text image, let's say thick as a dark brick, I have the dark color here, let's put some more text, and then let's select also an image. I add also a default image. So, let's for example, use our logo for the dark the ground. Okay, now I want to do two things. I get this component, the component screenshot, I copy it. And I can add also the preview image URL to a story. Okay, and then I want to copy the props. So, I go here and I copy all the props. And I put them here. Okay, so the title was not defined in our interface. So, let's add the title, string. Let's add a text of type string. And there is something more. Yes, the image. So, the image is of type, types.imageSource. We can use this type from React Bricks. And we're good to go. So, one thing, this story will be available in the story tab that we don't have in the free plan. But, here I can say show as brick. And if I say show as brick true, then what happens is that I go to the editor. I always forgot to save. And I click on the plus button. Sorry. To reload. Okay, and you see that we have the text image and this dark. Really, it is the same component, but if I click on darker, I have the text image component with the dark story. So, with the dark props applied. So, this is a very complete component that we created in a short time. And now I'd like to show you that with DevBricks, you can also nest bricks inside of bricks and they show you how we can do it.

So, let's say that we create a features brick where we have a title and below an array of features which are a short of thumbnails. So, let's start creating this new component. Save this way. And so, under custom, this time, instead of creating a file directly under custom, since I will need the two components, one for the features and one for the single feature item, I will create a new folder, which I call features. And here we have the two files.

So I create a new file, which is features.tsx. And in this case, let's use the Brick snippet so that we are quicker. So, features. Okay. As for the name of the Brick, let's say, workshop features. You don't need this. And, well, the features, and let's create a section. And a container. And now let's add the text for the title. So, text. Text, what we use the snippet, text. And let's say title, and this is a, let's say in each one quite big, so let's name, text three orbital, let's make it extra bold, and let's enter the. And with an margin button, what we want. Okay, let's close this one, so we have a text, and then below, we want to name feature, so now let's just, sorry let's create, below the text, not inside the rendered block. We want to have all the features, so here, we'll have the features.

Okay, we have already a default for this title prop, and so, let's add this brick to our set of bricks. And this interface of. Zoom, and she's not very, okay, so let's add here, the features from our custom features, okay. And so, when I add this features brick, okay, you see it here, you have these text, which we can edit as usual, and here we want to have all the features that can be repeated. So now we have to create these feature brick that will be repeated. So new brick, feature, let's say feature items, so that we don't confuse features and feature is just the letter that is changing. So it's a brick, and well, and these feature items, let's say that the name is WSFeatureItem. The label is FeatureItem. And this brick, I said, it's like a thumbnail. So we want an image, a text, and a description. So let's have a div, last name that I get from here. So, sorry. He is, this button. We remove this button. Okay. Because I have this button. Sorry, I just need to click over here, but there is a ZOOMbar which doesn't allow me to do it. I'm gonna remove it. Sorry, for the first time let me write it because we have the ZOOMbar, sorry. So let's say just flex 0, 1, 30% and say that's why we have some margin bottom. So I have these divs so that I want to have three features per row and so I set these 30% and then I want an image. So image. Let's call it image. The alt is a feature. The aspect ratio one is okay and now we have an image class name. I want to apply a class to this image. Let's see if this time we can do it. We have an image which is smaller and then after the SM breakpoint becomes larger with object contain so that we are sure that it is a square. Really we are sure because we have the aspect ratio of one but we are sure also from a CSS point of view and then we can have a rendered wrapper function. This is a wrapper that is rendered around the image when there is an image. So it's just a render function and we want just to render a div. Where we apply class name. Get it from here. So you see, what we want to do is we want on big screen to have the image and below the text. While on a smaller we have these float left. So the image will just float on the left of the of the text. So we need to have a div here and in this case, what we want to do is I set an overflow in them so that all the text will go to the right of the image and here we want to have our text. So text from React Bricks. And let's say that it is a title. And we have a, let's say that we do create a div with a class name which is this one, okay. Slash div, perfect. And below these title, we want a description. So we create another text. So let's call it description. And it's another div with a plus name. Okay, so this one, so it's a bit gray, in this case, and not so black. And, well, okay. So we have an image, and we have two texts. So let's see how this brick works. Brick works.

So now if I reload. Our features is just the same because we didn't add the new brick, but, oh, I didn't add also the new feature item brick. Sorry! We need to add the feature item. Okay. So now you see that we have the feature item. And if I click, it has an image, which is a square, a text. And here you can set a description. So let's add a default description. And now let's add these features, let's add these feature items in the feature brick.

So to do this, we have to use a new component of React Bricks, which is the repeater. So inside of this div here, we will use a repeater. In order to have the element repeated in columns, we need to just have a flex here. Let's say that we do a flex-wrap and justify the center. Okay, and now we have our repeater. The repeater has a prop name. We have a snippet of that, too. Okay, the repeater is just a prop name. So let's say features as minimal. Then we have many props that we can set on a repeater, but the minimum is a prop name. Now, how can RealBricks know what it has to repeat in this repeater? We need to tell RealBricks what we want to repeat. And so we need to add the repeater items. Repeater item is an array because in a brick, we can have many kind of other bricks that are repeated in many places inside the brick. And in this case, we have one type of brick which is repeated and we need to set it here. We need a name which must match this one, so features. So we are matching that repeater and we need to say what is the item type. The item type is the name of the other brick. So in this case is WS, sorry, feature item. Item. What we can set here, we can override the label. So if we want another label for the item in this case or we can override the defaults for the other brick when used inside of this repeater. In our case, the defaults for the feature item are great. And I'll show you that we can set also Min and Max. Let's say Max 6. And now let's see what happens. Okay. Now you see that you have these add the new feature item. If I click it, you have a feature item. I click it again, we have two, we have three, four, five, five, six, and they cannot add any more. This is because I set the max to six. If you set a minimum number by default, the reference will pad with the default content of the repeated item to a minimum of the number of items that you decided to have. So, in this case, I just set the max. So now I can click here, edit the text, and when I click on an item, you see that you have the pink border around the item and you have the tab active for item. So I have block, which is for the features, and then item, which is for the feature item. Now, neither the features nor the feature item have properties. And well, I'd like to show you how we can have validation rules in Rehabrix. So I will add a side edit prop to the repeated item, the feature item, to show you also how we can validate the props. So the idea is that I want to add a link below the title and description, and it is optional. So the user should be able to choose if they want a link. And so the link appears. I could have used the rich text with the rich text feature link, but then I would have given too much freedom to our editor because they could add any number of links inside of the text. Instead, they want the description to be just a plain text and below to have a link if the user wants it. So first of all, let's create a side edit prop of type boolean. We can call it. Let's use the snippet. We can call it with link. So with link, and it's just a boolean. Okay, sorry. Okay, so we need another prop, which is the link path. Let's add it already. Okay, so it's link path. And it is of type text. Okay, so now let's use these two props. Let's define them in the interface. So we can adjust the with link, which is a boolean. And we have a link path, which is a string. A string. So we use the interface here. And we just get the with link and the link path. Okay, so now below this text, oh, let's give a default. So let's say with link, by default is false.

And link path, by default, is an empty string. So now below these texts. I want to say if I have with link, then I want to render our link. So let's make some, have some distance. So just ID within margin top two.

Okay, and here we use a link. We use a link, but not the next link. We use the link from React Bricks front-end. Why? The link from React Bricks has some interesting features. First of all in the admin, it is clickable, it is editable, so it won't trigger the click or the link. And when the href, the path is a local path, it will use the next JS link, while if you have an HTTPS link, an external link, it will use a simple Anchor. So, and what's more, you have also the class name and the active class name. So it's more powerful and it is cross-framework. When you use the link from React Bricks as the image from React Bricks, the same Bricks, exactly the same Bricks, works in any frameworks. So if you want, if you have an extra JS project and you want to test the Remix, you just start with a CLI with a new project with Remix. You copy the React Bricks folder, you copy the.env variables to have the app ID and the API key and you're good to go. The project works in Remix. So it's important to use this link from React Bricks so that this brick will be across framework.

And so this link, we'll have an hrefl, which is the link path of course. And the inside, let's just write link, okay. So what we did is we added a Boolean sided prop and the text sided prop. We are getting them and when the Boolean is true, we are rendering these link using the link path, okay. So let's say, let's see it. Okay, let's add a feature item. And you see that when I click now, I have with link. If I click with link, I have this link, okay. And I can set a link path. Let's say, slash home. If I go to the preview, you'll see that now I have a link that goes to slash home and it will use the Next.js link. So now this link is not very visible. So let's make it a bit more clear that it is a link. Well, I have it here, okay. And so now what I'd like to do is I want to write over the link. The link text is just the link of fixed at the moment. How can I do it? I just add a text from React Bricks. So I use a text and let's say that it is a link text, the proper. Type text is okay. And it's okay to leave it as a span because we have already these ties on the link. So now let's provide the default also for these link text. Link text, this is the link, save. And now this was already there, but if I remove it and I add a new one and they add a link, you see that you have these, this is a link. You can select the path, but now I can write over this link. It's the link that I can write on.

So I said that I wanted to show you the validation. Let's think that we don't want local path. We want our editors to be able just to put in a URL. And another thing that we want to fix is you see that we have this link path, even when we select the with link. We would like these to disappear. So it's very easy to do. When we have a prop, we can say show and this is a function that gets the props and they want to show it only if I have the with link through. As for the validation, we have validate function that gets two arguments, the value, so the value of this control and there's a second argument, all the props so that we can perform also cross-field validation. In this case, it's easy. Let's get just the value. Let's call it link path, and, well, if I don't have a link path, it's valid. But if I have it, the link path starts with HTTPS. Okay. Or error message, please insert a valid URL. If you return false, it's an error. If you return true, it's okay. If you return a string, there is an error and the error message is the string. So let's see what happens now. Okay. You see that slash home is not valid anymore. It will be a valid path. Well, we decided that we want something that started with HTTPS. So if I do HTTPS. Okay, now it is okay. And you see that we, when I deselect with link I don't have the link path anymore, okay? When this is not valid, if I try to save you see that it says, warning, at least one block has validation errors. So if at least one one side control of at least one brick of the page has a validation error we will have this warning. We can choose in the rubrics configuration to prevent the save, when there is at least a validation error.

In this case, and by default, it allows us to save anyway but we can set it to be more strict. So that would provide a valid link path. Okay. And so we saw also the validation. A thing that's, it's interesting to see, in my opinion, is also the fact that we can pass props from the Father to all the bricks. So let's add a new, let's have a free featured item. And in the Father, we can have, in the Father component, we can have a prop and we want to conditionally render the children based on this prop. So let's do it very quickly. I go to Features and let's get fancy. Let's create the prop, which is a Fluo. So side edit prop. It is the name is, oh, we have two American bracelets. Fluo. And Fluo, and it's just a Boolean. Just a Boolean. And the well, that's the way I add my props of these. So, feature props, I have Fluo, which is a Boolean. And what I do is I get it here, and they just pass it down to the repeater. Oh, let's say that Fluo by default is false. And here in the repeater, I show you we have other props. So for example, you have the render wrapper, render item wrapper, et cetera. But there is a prop, which is item props. So I can pass a prop to all the items and they want to pass it, Fluo. Okay, so now I go to the feature item, and I do the same. So I get these Fluo prop, back Boolean, I'm getting here. And what we want to do is I just want to, okay, I just want to make the background FluoCenter. So let's make this a template string. Sorry, let's make this a template string. And let's say that if I have Fluo, then I add the new class, which is, let's say background Lime 400, something like that, okay? And let's see if these works. Okay, let's add a couple of them. When I click on Fluo, you see that all of them gets these to our props. And another prop that every item gets is the index. So index, which is a number, and you guess it the index in the array so that they can conditionally render based on the fact, for example, that it is odd or even, and then let's do just that. So I say that if the index is odd, odd, so equals one, then I apply this class. And now we get really fancy. If it is even, I add a fuchsia color. Okay. And so let me reload. Okay. So you see that we have these beautiful checkerboard where we can use the index and if you want proper that is passed from the other. Okay. So we have created a new brick, which is these features. Oh, you see that you have a feature item here. This is not great because I don't want the editor to be able to add the feature item directly. So I want to id it from the add screen in the feature item, I can just say in the schema that I want to hide it from the add menu, hide from the menu. True. And so, because I would just want my editor to use the features and add the feature item inside of features. And for these features component, it would be great to have an image. It's really so quick that we just do this. Let's add these as default also. Because when I add the new features, I have it empty without any item, any children inside. Instead I would like to have these feature. So let me copy just these features part here and I add to the default of the features. So in the get default props, I want to add these three items by default. And in this configuration, I get the component screenshot and they put it here in the preview image URL. Here it is. Okay. Now our component is really complete. When we add the new features you'll see that we have these preview image and we have really what we see in the preview because when we add it, we have already three of them.

Okay. So we saw a lot of things. I think that after an hour and a half, we can do a pause. So I would like to do a pause of five minutes and then I'd like to do five minutes of question and questions and answer if you have questions. Afterwards, I would like to show you some more advanced features of Rare Bricks and some CMS features and some more advanced features that we can use to create the blog, for example, that we use to create the blog in the start. and that we can use also to create an eCommerce. And so we will see also some Pokemons to spice up things a bit. So now five minutes of post. And after the pose, I have two questions for you too. So if you have questions I will answer them. I'd like you to tell me, what's your first impression on Rare Brick? To tell me what's your first impression of React Bricks and what you will use it for, what are the advantages that you see in using React Bricks for projects for your customers? And meanwhile, while doing the pose, Dario upgraded the app to an enterprise plan so that we can also see some of the features that are there in the paid plans.

And so, let's come back to the editor. One thing that I'd like to show is that we always look that the blocker tab and then the item tab. But there is also this page tab. This is where you have the CMS properties for the page. So, if it's published or draft. And you can also schedule publish in the future. So for example, if we set this page as draft, I can say that it should be published tomorrow at eight. And so, if I save, you see that now we have this calendar. This is the schedule for publishing for tomorrow. And if I click on the editorial calendar, you can see this page here. So, if you have a blog and you want to schedule the publishing in the future, it's a very useful. And you will see that you can also trigger re-deploy automatically when a page from draft becomes published. So that if you want to create an article for the new year's day, you don't have to be there at midnight to click on the deploy button because it will be done automatically for you.

So, I like to show you the settings of rubrics also. We saw the playground and I'd like to show you also the settings. Here I showed you the full screen preview, but I didn't talk about the get preview link. And just one second, if you click on get preview link, you will have a link in your clipboard that you can send it to anybody, even if they don't have a rubrics account. And clicking on the link, they can see a preview of the page, for example, for an approval process. And so you can share a rubrics page in the preview link. If we go to settings, here you see that, well, in this case, we cannot deploy in any environment because we didn't set up a build hook, so let's do it. When I click on any of these buttons, I will go to the rubrics dashboard. You see that, even if there is this zoom bar, there is dashboard.rubrics.com. Here, we are not anymore in the local admin interface of Rubrics, but we are in the dashboard, so there is an exchange of tokens so that we are already logged in. You see that here, you have the app name. We can set an host name to have a button to go to the website, the credentials. We can invite users. For example, let's invite Dario. At Rubrics, we can choose the role. Let's say Editor. We can say that we can deploy in production, staging, create pages, and edit pages. Okay. We sent an invitation, and now we see that the invitation is pending. You can define custom roles. This is something that is enabled in the Enterprise plans because you can define very fine-grained permissions based also on custom roles. Let's create a custom role translator. R for example. Okay. And we have WebHooks. So let's create a fake WebHook here. And you see that you can trigger the hook on scheduled publishing. This enables Rubrics to call the hook when a page becomes published. So I save it. You have the languages, with Rubrics. You have also the internationalization built in. So let's add the Italian language. You have the change history. So that you can go back in time to the status before any action. I show it to you immediately. So let's go to our editor, and let's go for example, into the pricing page. And let's say that I change the price to 499. I save, but it was the wrong price, so sorry. Okay, now go to the dashboard. I can go back in time, you see that I edited the pricing page. I click, go back. Okay, and now in the editor, let me change page and go back, you see that you have the old price, the correct price. So it's very easy to do this. And another thing that you can do is the backup and restore. You can request a backup. And after a couple of minutes, we receive an email and if you come back, you can download a complete JSON, the complete JSON of your content. So it's just an array of pages with the array of blocks for each page. And with these backup, you can restore autonomously the content to any point in time. Okay, so now let's go back to our editor, and you see that now we have also this Italian tab because we enabled the Italian language. So let's create an Italian translation. For example, let's go to the homepage and let's create an Italian translation. Yes, there is no translation, I want to create it. Now the content is copied from the default language, which is English, but now I can write whatever I want. So benvenuti. Our workshop super reacts. Okay, now there's a translation is completely independent. So in this case I can choose to apply, for example, another gradient and another background color.

So it starts from the default translation and then you can change the content in this localization for the Italian, for example. So now I'd like to show you also the collaboration. So we invited Dario and let's see if Dario has approved our invite. Okay, so you see that it is no more pending. So Dario accepted the invitation to collaborate on this app. And now you see in the right upper corner that there is me and there is also Dario. Collaboration is active for any paid plan and now Dario has entered this page and you see his avatar. Now, when we start editing the page you see that we have this pink border. Matteo Frana is editing. So we are editing and Dario cannot edit. If I save I will release the lock and now let's say that Dario starts editing the page. Okay, you see on the right, that page is locked by Dario Ronzoni with editing the page. Okay, so now if I click, you see that I cannot do anything. I cannot change the content directly. I cannot focus. I cannot change this sidebar. As Dario saves or changes pages without saving we can, the interface becomes the normal interface where I can edit. If Dario now tries to edit again, I have this button force unlock because if I needed to do a really urgent change, I can, of course the audience edits data will be lost but they can click this and force the unlock to save the changes. So this is the collaboration feature of Rio bricks.

I show you also the click to edit feature. If I go to the website, so the front end website on localhost3000. You can see that as I am logged in the admin, oh, sorry, why there is no on page? Because we decided that we want it to be published tomorrow. So let's say that we want it published today and then let's remove this, this claim publishing, okay. Now that this is saved and, okay, let's, okay, we are back with our own page. We hosted the own page. And so you see that in the right bottom corner, you have these edit button. You can choose the corner that you want. If you have the chat on your website in that corner, the interesting thing is that you can navigate the website. For example, go to this about us page, click the edit button. And you will edit directly the about us page.

So, I show you the stories, features, now. Now we have these stories tab here. So I show you what we can do with this. Let's go to the home page. And for example, for our features brick, let's say that our editor wants to save, he really likes the Fluo version. And so, he wants to save this version in this way. Let's say, floo as brick. And they go to stories. And they save the story as floo. They save the story. So you see that we have this story. This one is not saved in code as the one that we created before but it's saved on the rubrics servers. So now if I go to another page, let's say on pricing and the features brick, I can choose the story fluo and I will get back these contents. So this is a way to reuse content across pages in a cookie cutter way. So when if I change this content, I'm not changing the story because the content is completely independent in this moment. I just copied the feature, they all the props from the cookie cutter which is the story. And well, another way to reuse content across pages is to use the embeds. So in a page you can embed another page. So let's say that here I want to embed, I add a new break, let's choose all themes and they have an embed page break. You can create your own embed breaks which are particular breaks and you can choose that you want to embed just one page type. So we will see page type in a moment, but now let's just select a page. So in the home, I want to embed the pricing page, for example. Okay. Now you see that you have the pricing page here and it has this overlay to make understand that it is not editable because this is a single source of growth. This is not like the stories cookie cutter. In this case, if I go to the pricing and I change this, I save, I added this exclamation mark. If I go to the home, you see that it has changed also here. This is not useful to embed entire pages inside of pages, of course. This is useful because you can define page types also of type entities. And so you can add entities which are fragmented, or fragments of page, for example, a call to action, a newsletter subscribe, a product, an offer. And then you can embed these in pages. And when you change it in one place, it will change it everywhere. So you see, we have three main ways to reuse content in React Brics. And I show you this slide which is clear. So you have the cookie cutter way, which are stories. So you start from the cookie cutter content, but then each copy is independent. Off you have the single proof that you can use using page embeds when it is just a part, like a call to action. Or when you need to reuse something across all the pages, like the header and footer, you can have the multiple page viewers. So in your page in Next.js or Gatsby, you use multiple page viewers so that you always have the header, the footer, and the content.

Okay. So let's see the page types and how we implemented the blog. Well, you see that for the blog, we have a slash blog route. I can click on a tag and then we can go to slash tag slash the name of the tag. Now we have just one article and then I can click on the article and the slash blog slash post slash the slag. Okay. From the editor I can go under the blog page type and I can add a new blog post. Let's say test post. Let's add just an image. Let's keep this default one. And you see that in the blog, I can use only some of the bricks, this one column bricks because it defines this in the page type as we show you in one second. So let's save. And the let's also put a feature image here. So we can see here, I can put here, okay. And I want to also set a tag. So let's say a workshop. Okay, I saved the page. Now if I go back to our blog, you see that we have also the new post and the tag workshop. If I click on workshop, sorry. Okay. That was, show it again. Okay, I click on workshop and you have just this one. I click on React Bricks and they have the others. The other, I click on blog and they have both. Okay, if I click on the post, I have the, this is, okay, I am the, the post. Okay. Let's see how we created this. I have a blog folder in the blog, in the blog folder and I have an index. And these index in the get static props is calling fetch pages. But in this case, passing also these parameter type blog. This is the page type blog. In fact, if you open the page types, we have a page type, which is page, which is the default page type. Then we have this page type of type blogger. And you see that they are just some of the blocks that are on the bricks that are allowed. And so I can fetch only the pages that are of page type blogger. So this is what I'm doing in the blog index. So I fetch. Okay, so I am fetching the article of type blog, and then I just map over these posts and render these components, which is the time that show the post. I also fetch all the tags with these fetch tags function, and I've rendered them to have the tag list. The same happens in the tag, in this case, where I fetched by type and also by tag, getting the tag from the context params. For the single post, I have a GetStaticProps, which gets the post by slug, and the GetStaticPars, instead creates a page for all the pages of type blog. So we are using it, in this case, we are on next JS and we are using the GetStaticPars of next JS. But having this page type allows you to do this sort of things. Page types have also the ability to set custom fields, which is interesting. So on these page, page type, let's add a custom field. So custom field is an array, and a custom field as a name, let's say Test, then we have a label, TestField, and we have a type. So it's like a headless CMS where you can define your custom fields. The type is exactly like the side of the prop types. So let's do a simple text. Now I save, and let's go to our editor. Okay, let's go to a page. You see in this blog, you don't have any custom field, but if I go to a page of type Page, you see that under custom fields, now you have this TestField, and I can write from this TestField. This TestField, you will get it when you fetch the page because you will have the custom values, which is an object with a key values, and you will get all these values. And you can use it also inside of a brick. So let's do it. So let's use this, MyHeroUnitBrick. And, well, I have a hook from WebRigs, which is UsePageValues. So I can say const page, setPage equals UsePageValues. Okay, and now from the page, I can take the custom values. So that here I can print, I can render custom values, dot our test. So it was in the MyHeroUnit. So let's add the MyHeroUnit. Okay. You see this as does. Because we wrote that in the test field. Now when I write, here you see that you can get these custom field here. But you can do more. If you have an entity, let's say a product, you can also edit in a visual way the custom field, how can you do it? Well, the text of Rheabricks, instead of taking a prop name, it can also have a custom field name. So custom field name equals test. So instead of printing it in this way, we can have a text.

And now what happens is that when I write here, I have the text that changes, but also when I write here, I have a page value that is changing. So I have a two-way data bindings between this field and the custom fields. So I can edit in a visual way, a structured data over for example product. Well, this same can be done with the metafield. So suppose that your user don't want to go to SEO metafield and fill in the title, but you have always the first paragraph of your page, which has a big title that could be the SEO metatitle. What you can do is you can bind the text to a metafield. So metafield name equals. Now you have description language of title. I put title. So what happens now is that you have home because the SEO metatitle of this page is home. Say home page. And now I'm binding to the SEO meta tag. I change here. I'm changing also the title of the page. This is handy because it can be used also to bind an image to the feature image of the page. On the image, in fact, if I instead of prop name, I do a metafield name, you see that I can just get image. This is the feature image for the page.

Okay. So another thing that I'd like to show you is, I don't know if you noted when I added the, this decided prop that's, let's add a new one. When you choose the type, there is also, there is also these custom. What is a custom page type? This is a way to define your own control for the sidebar. For example, you don't like the reference page color picker. You can create your own component or you want your user to pick a latitude and longitude on a small map. You can create it. So you just set the custom and now you can set your own component. So let's say custom, custom and the component, the component will get what, the value, the on change function and change the value and is valid because we saw that you can validate props. So you may want to render a red border around your component when it does not pass the validation function of real bricks. So to do something very simple we can say input and here you see that the value is our value and change. And here, we just events and say on change, event Okay. So let's test this, sorry, not again. on change what I did wrong here? Oh, I didn't press the input. Okay. Now, if I go here, you see that we have this custom component. And so, this is changing these custom prop using our component. And to see that it is work, we can replace this padding here. We see that this is padding really. Okay? I removed this padding. And now you see that if I write big, it is a big padding. If I write anything else, it is a small padding. So, I'm really changing this prop. And if I could, of course, I'll use also the valid function. We can say validate. Validate is a function of this value that returns say that the value master starts with A, okay? And now I can see that I used this is valid and I see that I have this style and the apply it for example the background color which is, if valid I apply a background color which is a light green. Otherwise, I apply the background color which is red. Okay? Okay so, reload and here we are. It doesn't start with a, if I do something I don't have the value of if it start with a, it is valid. So you can create your custom components this is to show you that rubrics is really very flexible. Really, you, you can also create your custom visual editing components like our text, our text, our image you can create your custom visual component you have also examples of these. And this is complex, but I just show you the the code block that we have in rubrics UI. We have a code block, let's use the search feature, code. And this is a code editor that is also highlighting the, the code that and I can also choose to, for example I like the line two and the show line numbers. If I go to the preview, you see that they have they like numbers. And I like to be number two line two. And what I'm doing is so I'm providing a custom edit, so to edit and we don't need mode. I'm just using Prisma to, to highlight the code. So you can do really anything that you want with rubrics is really very, very, very flexible. I want to show you just one second, the implementation. We show you, for example another advanced feature which are permissions. With permissions you can set very granular permission on any feature of rubrics. For example, you can add a page, you can add translation, can see page, you can delete page, you can use brick. And you can provide your own function that will receive as parameter, as arguments for example, the user and the page. So let's do a simple example. We created a custom role which is translator FR before in the dashboard. If we want to create a rule to prevent French translators to delete the translation in other languages we can just say in permission in the rubrics configuration, we can define this function can delete translation, user page if user custom role ID is equal to translation FR and the page language is not FR written for otherwise return true. So you can really also have some breaks that are used by just some users. So it's really very, very flexible. And they want to show you that there is also a tutorial on the website that I suggest you to do which is here, developers tutorial. Here you have a step by step tutorial with the gamification where you gain points, as you proceed. And it will show you again, how to set up a project how to create a break, next breaks, how to deploy. And so deploying a project is really easy. You just need to copy the API key and next, and in this case, which is next, the next public app APD from your.dev to the environment of their cell or notify or anything. And then you need to set to set up a deploy hook. So you create a deploy hook and you add it in the dashboard of rare bricks as we saw, so that your editor if they have the permission are able to just click on the deploy button and the trigger deploy on your deployment platform. So really, I like to show you just one last thing which is the ability to get external data inside of bricks. This is useful when you have content that comes from a headless CMS or any commerce platform like Shopify. And so you can have your bricks. And for example, which I create a complete e-commerce in XJS and have the product landing page edited using real bricks with some bricks which shows, for example, the the add to cart part, getting data from external data source and then letting the user edit the other part of the page. Because with direct bricks, you can also lock some part of the page. So think that this hero unit here is the other two cart brick and you can get data from an external data source. So the product image, the product name. You can lock this block, okay? And you can choose that the user can update it anything or they can edit, but they cannot move it. And they cannot tell before or after or you can choose that they can just add after. So you can, in this case, this brick will always stay there and your editor will just be able to add a new bricks after this brick. This can be done also on the default content of a page type. So you have a page type, which is a e-commerce product. You can say that by default, it always has a block that shows the other two cart part and this is locked. So your user are not able to change it.

So let's see how we can get external data and use it inside of our bricks. Let's create a new page type. So I will use the Pokemon APIs. So let me use that and create a new page type, which is of course Pokemon. Each type I need to define a plural name. I don't know what's the plural of Pokemon, so I will just say Pokemon. And then I just want to add the getExternalData function. The getExternalData function is a function that gets all the page. So all the page metadata values, custom values, content as an argument, and should return promise that resolves to an object that then can be mapped to our Bricks perhaps. So it's a bit complicated, but really it's not. It's just in a sync function that gets the content and then you use the content inside of the bricks. So I want to for this function, let me just copy here. I have this snippet already. It's this one. Okay, so I'm fetching from the Pokemon APIs, getting the page slug, and then I just map the data because I saw that in the Pokemon API, you have just a very small image of the Pokemon while on these websites, you have a larger version of the Pokemon given the name. So I augment the data using these image URL here. So now we have the page type with this getExternalData function.

Now let's create a brick that we consume this external data. So under our custom brick, I create a new file, which is Pokemon.psx. It's a very simple brick. This can fold it in this way. And now that or the content, let's copy from here. Okay. I have an interface, which is a Pokemon props and the Pokemon props are this one. Okay. So, section. And here I will get the image URL, name, the ID, height and the weight. Okay. Where did they come from? Okay. They come from this function, which is, let me remove this. From a function which is, get a map external data to props. So, the get external map, external data to props has two arguments, the external data, as the first argument, and the bricks, the brick props, as the second argument. It's like the map status to, map status props of Redux, if you know it. So, we must return an object with the props that you want to use. So, in this case, I want to use these props here. So, I am just getting the external data in this case. I don't want to consider the bricks props. Then we saw also these. And I am creating these props that I can use in my component. So, let me check. Why there is an error here? All right, let's look at the popup props. I'm gonna give them a name. I did a28. Rate, wait. Let me check. Type but many things I can use it. I'm sorry. Let me check a second again. Well I am the props with ID and the name height type bricks, props. I've got the year. The year, ID, name, image URL to it. Sorry. Wait so okay. If you can find the URL. Props, it's okay. Year ID, name, height, weight, image URL. Okay. Oh! The parentheses. It was just the, I was getting a, instead of an object props, I was getting all the props the wrong way. Sorry. Okay. Now it's okay. So let's see what happens now, when I go to our website. Now I have a new page type. You see Pokemon here with no pages. So let's create a new page for a Pokemon. Let's say that we want Pikachu. Okay. And now I add a brick. We need to add of course the Pokemon brick to our bricks because we created the Pokemon brick, but we didn't add it to our bricks. So let's add that Pokemon. Now let's go back to Pikachu and let's add a new brick in our custom theme. And you have these Pokemon brick. Okay. I click it and they've got Pikachu. Why? Because the slug of this page is Pikachu. If I go here and I change the slug, so let's say that you want Dragonair, you will get Dragonair. And well, my son said that there is a Pokemon which has the real color of real bricks. So my seven years of the, son said that you have to do Beno or not because it has the color are better with the color of real bricks and it's true. So what we are doing here is we are getting the data and it's not a client side fetch. When you will build the page with Next.js or Remix or Gatsby, these data gets on the server side and then it is passed to the real bricks components. So here you could imagine that you have the product of your e-commerce with the Add to Cart button and below here you can add your own component to let your user compose the landing page in a great way. This is something that most e-commerce platform lacking is a side of creating a landing page in a great way. In this way you can create your bricks and you can use them to aid it as the landing page of an e-commerce product. So one thing that we can see is, well I get this data from my Shopify but if I want my marketing team to change the description because it's not great on the database, for example, the price. No, one can touch the availability either but I want they to be able to change the name of the product for example. What they can do is, well in, first of all, I can create a text.

A rubric text. And in the render function use dee'sh1. Of course, here is not the name, but children. And the prop name is name. So that we get the name of the Pokemon. If I do it in this way, of course it will not work as expected because it's true that I can write here, I can save and I'm saving this field, but as soon as I come back, I have the value from the external data source. But what I can do is in this method function, I can use these bricks props. So I can say that the name is not always the external data name, but I can use the brick props.name, or this one. Really the brick props name can be something which is complex because we have rich text with markers, et cetera. So what we need to do is to use a plain function from web bricks and do plain serialize of these contents. And I have to say, if there is content, I use these. Otherwise I use the external data. Now I should type these better, but now we don't have time. I just want you to see that now, if I reload, I get the value of the name on the brick. But if I delete, I get back the name from the external data source. So I can change it as I want. I can save if I go to another page and I come back. I have the new text, but if I delete, I get back the text that comes from the external data source. So you can also interread these things and have external data that is the only source of truth but you can also let your editor override this. So I think that with these, we've seen many advanced things of React Bricks. And so I'd like just to give you a glimpse of what's next, what we are working on. So, well, I can, let's use these features that we created here. So what's next? Well, one thing that we are working on is the media library. You saw that when I click to add any image, now I can select from a splash or I can choose any major from the local, from my computer, but I cannot get an image from a media library. So it cannot reuse images. We are working on a media library with the search capabilities. You will be able to search by aspect ratio, by color, et cetera. And other things that we are working on is a padding system. And in this way, so you, we will use it. For example, ourself to create a SEO plugin so that instead of the, just the usual meta tag, you will be able to provide the JSON LD schema.org data. And so we want you to be able to create a plugin like that, that will open an interface to edit metadata on the page. So another feature that we want to create is have multiple branches, multiple content branches, so that for example, you want to work on the V2 of your website, but you want to be able to still save on the V1, okay? And then finally you can create another branch of the content, and when you are ready with the V2, you can just switch to V2, or you can have a branch that can be used by your devs. They can do whatever we want, mess with the content, and it will not break the live content. Then another things that we are working on is a workflow. So we want to create an appropriate workflow for pages. So that Uwe has the permission, when you start working on a page, you will create a working copy. And when you're ready with all the edits, so you can say that it is ready for publish, and then another user can approve the publish. And then it will get published when you will click the deploy button. And well, last thing that I'd like to show you is that we are also going to create a marketplace so that you will be able to create sets of bricks and have them in our marketplace. And so that people could download it either for free or paying for them. And so these is our ideas for real bricks before that we're already working on. The other important thing is we want to support Astro. And so we are open really to any other new frameworks that is interesting because our philosophy is that we want to stay frameworks with framework independence, to let you choose the framework and platform independent to let you always host whatever you like. So if you have any final question I'm here. Okay, will rubric support next server side rendering? One more, will this CMS enable content share within multiple pages or maybe multiple apps? Okay, yes. Well, as for the next to yes server side rendering, if you mean server side rendering, it's already supports server side rendering because with the pages folder of rubrics you can do the static generation, you can do server side rendering and you can do incremental static regeneration. In the example we are using the get static props but of course you can also use get server props and have the pages generated server side for every heat. But if you instead of, if you mean the server components, so the app folder of Next.js, yes, we are working on it and so it will be ready soon. Will this CMS enable content share within multiple pages? Yes. I showed a slide so that you have multiple way to share among pages. You can use the stories to have a cookie cutter features. So to repeat something that you did in a page or in other pages, you can embed the fragments. So a set of bricks that you can save as an entity page, you can reuse it across multiple pages and it becomes a single source of truth. So when you change it once, it will change in every page that embeds it or you can use the multiple page viewer to embed directly a header and the footer in all the pages. To share content across multiple apps, at the moment it's not possible, but you can duplicate an app from the dashboard and we get all the users or the content from the original app. So, well, really you could do it using directly the APIs because of course fabrics underneath as APIs, you usually don't need to use them because you have just our wrapper functions like fetch pages that helps you. But using either these pages, these functions or directly our rest APIs, you could reuse content across pages. So I hope that they answered your questions. So, I think that we can finish now. It's a two hour and a half. But I'd like to give you my email address. Let me share the screen again. First of all, I was forgetting. You can find the repository here. So, github.com slash reactbricks slash React Summit 23 Dash Workshop. And what I suggest that you really, instead of looking at the code that we created, you start doing the tutorial and you create your own Bricks because it's really funny. And I think that you now understood the basic software Bricks. So with React Bricks, you have visual editor with good constraints. You saw that it's just React because we never had to went back and forth between a headless CMS to create the fields and then to VS Code to use the fields. It's just React and you have a good method. You just have this also the snippet code. It's really easy to create this visually editable bricks of content. You can host anywhere, you can use any framework and it's enterprise really with features like the collaboration, image optimization, fine-grained permission, multi languages, can you publishing external data the block of content, et cetera. So, well we have also a partner program. So if you want to become a partner agency, please contact me now. My name is matteo at reactbricks.com. You find me also on Twitter at mattfrana. And well, that's all, feel free to contact me for anything. So if you have any question afterwards, really contact me and I will answer you.