Built-in Block Types and Configuration in React Block Editor

The Block Editor uses blocks as the fundamental units for creating and managing content. The entire editor content is structured as a collection of these blocks, which are configured and managed through the blocks property.

Prerequisites: Before using block types, ensure you’ve set up the Block Editor component as described in Getting Started. The blocks property accepts an array of block objects with configuration details.

Blocks

Blocks are the core building elements of the editor, where each block represents a distinct content unit, such as a Paragraph, Heading, List, or specialized content like a Code Snippet or Image. This block-based architecture makes it easy for users to rearrange, format, and manage discrete pieces of content independently.

You can configure blocks with various properties such as id, blockType, content to create a rich and structured editor. The following is a basic block structure:

const blocksData: BlockModel[] = [
     {
        blockType: 'Paragraph',
        content: [
            {
                contentType: ContentType.Text,
                content: 'This is a paragraph block example.'
            }
        ]
    }
];

Block types

The Block Editor includes the following built-in block types, each with distinct formatting and functionality options suited to different content needs:

Built-in Block Types Description
Paragraph Default block type for regular text content with optional placeholder text.
Heading (levels 1–4) Heading levels for document structure; levels 1–4 correspond to heading hierarchy.
Table Block for displaying data in a tabular format with rows and columns.
Checklist Interactive to-do lists with checkable items.
BulletList Unordered lists with bullet points.
NumberedList Ordered lists with sequential numbering.
Code Formatted code blocks with syntax highlighting and language selection.
Quote Styled block for quotations and blockquotes.
Callout Highlighted block for important information and alerts.
Divider Horizontal separator line for visual content division.
CollapsibleParagraph & CollapsibleHeading (1–4) Content blocks that expand/collapse to show or hide child content; heading variants follow 1–4 hierarchy.
Image Block for displaying images with sizing and alignment options.
Template Renders custom JSX or HTML content using user-defined block structures.

For blocks such as code, callout, table, image, and collapsible, the first Backspace/Delete action highlights the entire block with an overlay selection (allowing cancellation), and the second action removes the block content. This provides consistent block deletion behavior across these block types.

Configure indent

You can specify the indentation level of a block using the indent property. This property accepts a numeric value (typically 0–10) that determines how deeply a block is nested from the left margin. Each indent level increases spacing from the left edge.

By default, the indent property is set to 0.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
  const blocksData = [
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a paragraph with no indentation (indent: 0)'
        }
      ],
      indent: 0
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This paragraph has one level of indentation (indent: 1)'
        }
      ],
      indent: 1
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This paragraph has two levels of indentation (indent: 2)'
        }
      ],
      indent: 2
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'Back to no indentation'
        }
      ],
      indent: 0
    }
  ];

  return (
    <BlockEditorComponent id="blockEditor" blocks={blocksData} />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, BlockModel, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
    const blocksData: BlockModel[] = [
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a paragraph with no indentation (indent: 0)'
        }
      ],
      indent: 0
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This paragraph has one level of indentation (indent: 1)'
        }
      ],
      indent: 1
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This paragraph has two levels of indentation (indent: 2)'
        }
      ],
      indent: 2
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'Back to no indentation'
        }
      ],
      indent: 0
    }
  ];

  return (
    <BlockEditorComponent id="blockEditor" blocks={blocksData} />
  );
}

export default App;

ReactDOM.render(<App />, document.getElementById('container'));

Configure CSS Class

You can apply custom styling to individual blocks using the cssClass property. This property accepts a string containing one or more CSS class names. To avoid conflicts, prefix CSS class names with component-specific identifiers (e.g., block-custom-highlight or editor-special-style).

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
  const blocksData = [
    {
      blockType: 'Heading',
      properties: { level: 1},
      content: [
        {
          contentType: ContentType.Text,
          content: 'Custom CSS Classes in Block Editor'
        }
      ]
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'Default paragraph block'
        }
      ]
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is an info block'
        }
      ],
      cssClass: 'info-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a warning block'
        }
      ],
      cssClass: 'warning-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a success block'
        }
      ],
      cssClass: 'success-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is an error block'
        }
      ],
      cssClass: 'error-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a custom font block'
        }
      ],
      cssClass: 'custom-font'
    }
  ];

  return (
    <BlockEditorComponent id="blockEditor" blocks={blocksData} />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('container'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, BlockModel, ContentType } from '@syncfusion/ej2-react-blockeditor';

function App() {
  const blocksData: BlockModel[] = [
    {
      blockType: 'Heading',
      properties: { level: 1},
      content: [
        {
          contentType: ContentType.Text,
          content: 'Custom CSS Classes in Block Editor'
        }
      ]
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'Default paragraph block'
        }
      ]
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is an info block'
        }
      ],
      cssClass: 'info-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a warning block'
        }
      ],
      cssClass: 'warning-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a success block'
        }
      ],
      cssClass: 'success-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is an error block'
        }
      ],
      cssClass: 'error-block'
    },
    {
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is a custom font block'
        }
      ],
      cssClass: 'custom-font'
    }
  ];

  return (
    <BlockEditorComponent id="blockEditor" blocks={blocksData} />
  );
}

export default App;

ReactDOM.render(<App />, document.getElementById('container'));
#container {
  margin: 50px;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

/* Custom CSS for blocks  */
.e-block.info-block, .e-block.warning-block, .e-block.success-block, .e-block.error-block {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 4px;
    margin-bottom: 5px;
    border-left: 4px solid;
}

.e-block.info-block {
    background-color: #e6f3ff;
    border-left-color: #007bff;
    color: #004085;
}

.e-block.warning-block {
    background-color: #fff8e1;
    border-left-color: #ffc107;
    color: #856404;
}

.e-block.success-block {
    background-color: #e8f5e9;
    border-left-color: #28a745;
    color: #155724;
}

.e-block.error-block {
    background-color: #fdecea;
    border-left-color: #dc3545;
    color: #721c24;
}

.e-block.custom-font {
    font-family: 'Georgia', serif;
    font-size: 18px;
    color: #4a4a4a;
    border-bottom: 2px dotted #ccc;
    padding-top: 10px;
    padding-bottom: 10px;
}

Configure templates

The Block Editor allows you to use custom templates for specialized content by setting blockType to 'Template' and defining the template property. Templates can be defined as JSX functions, HTML strings, or DOM elements, allowing you to render dynamic content. Use template props to access block data for rendering block-specific information.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';

function App() {
  const blocksData = [
    {
        blockType: 'Template',
        template: `<div class="notification-card">
            <div class="notification-header">
                <span class="notification-icon">📢</span>
                <h3 class="notification-title">Important Announcement</h3>
            </div>
            <div class="notification-content">
                <p>The system will be undergoing maintenance on Saturday from 2:00 AM to 4:00 AM.</p>
                <p>Please save your work before this time to prevent any data loss.</p>
            </div>
        </div>`
    }
];
  return <BlockEditorComponent id="block-editor" blocks={blocksData}></BlockEditorComponent>;
}

export default App;
ReactDOM.render(<App />, document.getElementById('container'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BlockEditorComponent, BlockModel } from '@syncfusion/ej2-react-blockeditor';

function App() {
    const blocksData: BlockModel[] = [
     {
        blockType: 'Template',
        template: `<div class="notification-card">
            <div class="notification-header">
                <span class="notification-icon">📢</span>
                <h3 class="notification-title">Important Announcement</h3>
            </div>
            <div class="notification-content">
                <p>The system will be undergoing maintenance on Saturday from 2:00 AM to 4:00 AM.</p>
                <p>Please save your work before this time to prevent any data loss.</p>
            </div>
        </div>`
    }
];

  return <BlockEditorComponent id="block-editor" blocks={blocksData}></BlockEditorComponent>;
}

export default App;
ReactDOM.render(<App />, document.getElementById('container'));
#container {
  margin: 50px;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}