Blocks anatomy

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;

The view component of a block receives these props from the Blocks Engine:

id - the unique ID for the current block
properties - the current content
data - the data of the block (stored in the block itself)
blocksConfig - a (potentially customized) copy of the config.blocks.blocksConfig configuration object, useful for blocks that need to render other blocks

You can use them to render the view component.

The edit component of a block receives these props from the Blocks Engine:

type - the type of the block
id - the unique ID for the current block
data - the data of the block (stored in the block itself)
selected - (Bool) true if the block is currently selected
index - the block index order in the list of blocks
pathname - the current URL pathname
onAddBlock - handler for adding a block in the block list
onMutateBlock - handler for mutating a block type into another
onChangeBlock - handler for changing the data of that block
onSelectBlock - handler for selecting the block
onDeleteBlock - handler for deleting the block
onFocusPreviousBlock - handler for focusing the previous block in the block list
onFocusNextBlock - handler for focusing the next block in the block list
handleKeyDown - handler for managing press keys while the block is selected
onMoveBlock - handler for moving blocks
blocksConfig - a (potentially customized) copy of the config.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.

Blocks

Blocks settings