Typography Blocks in JavaScript Block Editor control

18 Nov 20183 minutes to read

Typography blocks are essential for organizing and presenting text-based content. The Block Editor control supports various structural blocks—such as Paragraph, Heading, Collapsible (CollapsibleParagraph and CollapsibleHeading), Divider, Quote, and Callout—to help you format and structure content effectively.

Configure paragraph block

Paragraph blocks are the most common type, used for standard text content. They serve as the default block type and provide basic text formatting options. To render a Paragraph block, set the blockType property to Paragraph.

BlockType

// Adding paragraph block
{
    blockType: 'Paragraph',
    content: [
        {
            contentType: 'Text',
            content: 'This is a paragraph block example.'
        }
    ]
}

The following sample demonstrates the configuration of a paragraph block in the Block Editor.

Configure placeholder

You can configure placeholder text for block using the placeholder property. This text appears when the block is empty. The default placeholder for the paragraph block is Write something or ‘/’ for commands..

Block type & properties

// Adding placeholder
 {
    blockType: 'Paragraph',
    properties: {placeholder: 'Start typing ...'}
}

The below sample demonstrates the configuration of placeholder in the Block Editor for the paragraph block.

Configure heading block

Heading blocks create document titles and section headers. These blocks help structure content hierarchically, making it easier to read and navigate. Render a Heading block by setting the blockType property to Heading.

Configuring levels

By using the properties, you can set the heading level using the level property, with 1 being the highest level (title) and 4 being the lowest (subsection).

Block type & properties

// Adding heading block
{
    blockType: 'Heading',
    properties: { level: 1 },
    // levels range from 1 to 4
    content: [
        {
            contentType: 'Text',
            content: 'This is a heading block example.'
        }
    ]
}

The following sample demonstrates the configuration of a heading block in the Block Editor.

Configure placeholder

You can configure placeholder text for block using the placeholder property. This text appears when the block is empty. The default placeholder for heading block is Heading{level}.

// Adding placeholder value to blocktype
{
    blockType: 'Heading',
    properties: { 
        level: 1,
        placeholder: 'Heading1'
    }
}

Configure divider block

A Divider block inserts a horizontal line to separate content. Render it by setting the blockType to Divider.

Block type & properties

// Adding divider block
{
    {
        blockType: 'Paragraph',
        content: [
            contentType: 'Text',
            content: 'This is a paragraph 1.'
        ]
    },
    {
        blockType: 'Divider' 
    },
    {
        blockType: 'Paragraph',
        content: [
            contentType: 'Text',
            content: 'This is a paragraph 1.'
        ]
    }
}

This sample shows how to place a divider between two blocks.