7. Create a block using BlockDataForm#

The BlockDataForm renders an form fully integrated with a block's extension mechanisms: variations and block styles. To use it, instantiate the schema and pass it down to the component. A full Volto block edit component could be like:

export const MyBlockSchema = ({data, intl}) => {
  return {
    title: "My block",
    fieldsets: [
        id: 'default',
        title: 'Default',
        fields: ['myfield']
    properties: {
      myfield: {
        title: "My field",
        widget: "number",
    required: [],

export const MyBlockEdit = (props) => {
  const {
  } = props;

  let schema = Schema({ data, intl });

  return (
      <SidebarPortal selected={selected}>
          onChangeField={(id, value) => {
            onChangeBlock(block, {
              [id]: value,

Note: in the future, this step may even be completely avoided, when Volto will have a generic Edit component that uses this recipe for all the blocks.

If there's any registered variations for this block, they will be displayed as a Select control for the active variation, in the sidebar.

  myblock: {
    id: 'myblock',
    title: 'My Block',
    icon: heroSVG,
    group: 'common',
    view: MyBlockView,
    edit: MyBlockEdit,
    restricted: false,
    mostUsed: false,
    blockHasOwnFocusManagement: true,
    sidebarTab: 1,
    blockSchema: MyBlockSchema,
    security: {
      addPermission: [],
      view: [],
    variations: [
        id: 'leftSideView',
        isDefault: true,
        view: MyLeftSideView,
        id: 'rightSideView',
        isDefault: true,
        view: MyRighSideView,

Note: you can assign the schema to blockSchema in the block configuration. It is used only to extract the block default values. This integration will be improved, in the future.