Appearance in TypeScript Block Editor control

18 Nov 20181 minute to read

The Block Editor control provides several properties to customize its visual appearance, allowing you to control its dimensions, styling, and behavior.

Setting width and height

You can specify the width and height for the Block Editor control using the width and height properties.

const editor = new BlockEditor({
    width: '100%',
    height: '80vh'
});

// Or with specific pixel values
const editor = new BlockEditor({
    width: '800px',
    height: '500px'
});

Setting readonly mode

You can utilize the readOnly property to control whether the editor is in read-only mode. When set to true, users cannot edit the content but can still view it.

const editor = new BlockEditor({
    readOnly: true
});

Customization using CSS Class

You can use the cssClass property to customize the appearance of the Block Editor control.

const editor = new BlockEditor({
    width: '600px',
    height: '400px',
    cssClass: 'custom-editor-theme'
});

The following example demonstrates the usage of readOnly and cssClass properties of the Block Editor.