Let's cook our first brick!🍳

Explore the /bricks folder

The react-bricks/bricks directory is where bricks live.

You can see that the index file imports the pre-made blocks by our react-bricks-ui library and adds custom bricks in a "Default" theme.

The bricks exported by the index files are used by React Bricks (they are passed as config to the ReactBricks component with other configuration settings) in the react-bricks/config.ts file.

A new brick...

Under the bricks/custom folder, create a new file called Thumbnail.tsx, with the following minimal content:

// Thumbnail.tsx
import { types } from 'react-bricks/frontend'

const Thumbnail: types.Brick = () => {
  return <div className="p-6 text-center">Thumbnail</div>
}

Thumbnail.schema = {
  name: 'thumbnail',
  label: 'Thumbnail',
}

export default Thumbnail

You see that a brick is a normal React functional component with a schema static property. The schema describes the behavior of the brick.

In particular here you see the minimal required configuration, with:

• name: unique name for this brick
• label: pretty name for the visual editor interface

...in the wall!

Let's add our new brick to React Bricks: open the index.ts file in the bricks folder and modify it in this way:

// index.ts
import { types } from 'react-bricks/frontend'

import HeroUnit from './custom/MyHeroUnit'
import Pokemon from './custom/Pokemon'
import reactBricksUITheme from './react-bricks-ui'
import Thumbnail from './Thumbnail'

const bricks: types.Theme[] = [
  reactBricksUITheme, // React Bricks UI
  {
    themeName: 'Default',
    categories: [
      {
        categoryName: 'Custom bricks',
        bricks: [HeroUnit, Pokemon, Thumbnail], // Custom Bricks
      },
    ],
  },
]

export default bricks

Let's test our brand new brick. Open the Admin interface and try to add a new block clicking on the + below a selected block.

In the right sidebar you should now see the "Thumbnail" brick. If you click on it, a new Thumbnail block will appear in the page.

Nothing special so far. You see that you can't edit the text visually, yet.

In the next step we'll add the visual editing magic! ✨