Introduction to Bricks

What is a Brick?

A Brick is essentially a React component, that:

1. Uses React Bricks visual editing components (Text, RichText, Image, Repeater, Link, File) in the JSX to enable inline Visual Editing of content;
2. Has a schema property to define a unique name, default properties and specify Sidebar Controls that allow editors to modify certain props.

Below, you’ll find a simple brick example. In the following sections, we’ll explore how to use React Bricks visual editing components and properly configure a brick’s schema.

Meet your first Brick

Here’s an example “Hero Unit” brick. In the JSX code, you’ll notice a React Bricks RichText component that makes text visually editable. The schema defines the brick’s name and includes a sidebar control of type Select allowing editors to adjust the padding.

HeroUnit.tsx

import { types, RichText } from 'react-bricks/frontend'

// Component interface
interface HeroUnitProps {
  title: types.TextValue
  padding: 'big' | 'small'
}

// The React Component
const HeroUnit: types.Brick<HeroUnitProps> = ({ title, padding }) => {
  return (
    <div className={`${padding === 'big' ? 'py-20' : 'py-12'}`}>
      <RichText
        propName="title"
        value={title}
        placeholder="Type a title..."
        renderBlock={({ children }) => (
          <h1 className="text-3xl text-center">{children}</h1>
        )}
        allowedFeatures={[types.RichTextFeatures.Bold]}
      />
    </div>
  )
}

// The Brick's Schema
HeroUnit.schema = {
  name: 'hero-unit',
  label: 'Hero Unit',
  getDefaultProps: () => ({
    padding: 'big',
    title: 'Thick as a React Brick',
  }),

  // Sidebar Controls Definition
  sideEditProps: [
    {
      name: 'padding',
      label: 'Padding',
      type: types.SideEditPropType.Select,
      selectOptions: {
        display: types.OptionsDisplay.Radio,
        options: [
          { value: 'big', label: 'Big' },
          { value: 'small', label: 'Small' },
        ],
      },
    },
  ],
}
export default HeroUnit

Adding a brick to the React Bricks configuration

After creating a new brick, you need to add it to the available bricks to make it visible in the Editor. You can find the available bricks in the react-bricks/bricks/index.ts file.

Bricks are organized into Themes. For example, if your company name is “Acme,” you could create an “Acme” theme to host all your custom bricks that define Acme’s website design system.

Within each theme, bricks can be further organized into Categories (e.g., “Hero Sections,” “CTAs,” “Blog Content,” “Features”).

Let’s demonstrate how to add a “HeroUnit” brick to the Acme theme’s bricks under the “Hero Sections” category:

/react-bricks/bricks/index.ts

import { types } from 'react-bricks/rsc'

import HeroUnit from './acme-theme/HeroUnit'

const bricks: types.Theme[] = [
  {
    themeName: 'Acme',
    categories: [
      {
        categoryName: 'Hero Sections',
        bricks: [HeroUnit, ...],
      },
    ],
  },
]

export default bricks