Blocks anatomy
Contents
Blocks anatomy#
Every block is composed of an edit (Edit.jsx
) and a view (View.jsx
) component.
These components can be as simple as a dummy component, no boilerplate is required.
This is an example of the Edit.jsx
:
import React from 'react';
const Edit = props => {
return <div>I am the Block edit component!</div>;
};
export default Edit;
and the View.jsx
.
import React from 'react';
const View = props => {
return <div>I am the Block view component!</div>;
};
export default View;
Block view component props#
The view component of a block receives these props from the Blocks Engine:
id
- the unique ID for the current blockproperties
- the current contentdata
- the data of the block (stored in the block itself)blocksConfig
- a (potentially customized) copy of theconfig.blocks.blocksConfig
configuration object, useful for blocks that need to render other blocks
You can use them to render the view component.
Block edit component props#
The edit component of a block receives these props from the Blocks Engine:
type
- the type of the blockid
- the unique ID for the current blockdata
- the data of the block (stored in the block itself)selected
- (Bool) true if the block is currently selectedindex
- the block index order in the list of blockspathname
- the current URL pathnameonAddBlock
- handler for adding a block in the block listonMutateBlock
- handler for mutating a block type into anotheronChangeBlock
- handler for changing the data of that blockonSelectBlock
- handler for selecting the blockonDeleteBlock
- handler for deleting the blockonFocusPreviousBlock
- handler for focusing the previous block in the block listonFocusNextBlock
- handler for focusing the next block in the block listhandleKeyDown
- handler for managing press keys while the block is selectedonMoveBlock
- handler for moving blocksblocksConfig
- a (potentially customized) copy of theconfig.blocks.blocksConfig
configuration object, useful for blocks that need to render other blocks
You can use all these props to render your edit block and model its behavior.
Default block edit and view components#
Volto later then 16.0.0 ships with a set of default Edit and View components.
The view component is mostly a placeholder, with an auto-generated listing of
the block fields, while the default Edit component is the most interesting, as
it can use the schema
that you can specify in the block configuration to
automatically render a form for the Block settings, in the Volto Sidebar. In
the main editing area, it will render the view component, so for many blocks
you can just develop a schema and the View component.
To use the default Edit and/or View component, just don't set any value in the block configuration:
config.blocks.blocksConfig.myBlock = {
id: 'myBlock',
title: "My block",
edit: null, // or simply omit it
view: null, // or simply omit it
// ... the rest of the settings
}