Awesome

volto-subblocks

A widget for Volto to have a block with subblocks

To be used with mrs-developer, see Volto docs for further usage informations.

If you are using Volto < 16, then use v1.2.3.

Usage

This is meant to edit blocks with sub-blocks, where the sub-blocks are all of the same type.

SubblocksEdit

The edit component of the parent block must extend the class SubblocksEdit. If you want to enable drag&drop to reorder subblocks, you have to use the HOC 'withDNDContext'.

export default withDNDContext(Edit);

In the render() function of this component, you have to:

• wrap all content with 'SubblocksWrapper' component:

<SubblocksWrapper node={this.node}>...</SubblocksWrapper>

• iterate on this.state.subblocks to draw subblocks.
• render each subblock passing this props:

  <EditBlock
    data={subblock}
    index={subindex}
    selected={this.isSubblockSelected(subindex)}
    {...this.subblockProps}
  />
  

Usage

• You could insert the add button simply writing {this.renderAddBlockButton()}

• this.state.subblocks: contains subblocks. Used to iterate on subblocks
• this.state.subIndexSelected: contains the index of the current selected subblock
• this.onChangeSubblocks(subblockIndex, subblock): function to call when a subblock value is changed.
  • subblockIndex: is the index of the subblock in subblocks array
  • subblock: is the subblock object with new value/values.
• this.onMoveSubblock(dragIndex, hoverIndex): function to call when a subblock changes his position / order in subblock list.
  • dragIndex: initial index of the item
  • hoverIndex: destination index of the item.
• this.onSubblockChangeFocus(index): called when the focus on subblocks changes.
  • index: is the index of the focused subblock.
• this.deleteSubblock(index): function to call to delete subblock at index position.
• this.isSubblockSelected(index): return true if subblock ad index position is selected.
• this.renderAddBlockButton(title): renders the add block button.
  • title: if given, the title is displayed on button. Default the title is 'Add block'.
• this.subblockProps: it's an object that contains default props for edit each subblock.

Example

import React from 'react';
import {
  withDNDContext,
  SubblocksEdit,
  SubblocksWrapper,
} from 'volto-subblocks';
import EditBlock from './EditBlock';

class Edit extends SubblocksEdit {
  render() {
    if (__SERVER__) {
      return <div />;
    }

    return (
      <SubblocksWrapper node={this.node}>
        ...
        {this.state.subblocks.map((subblock, subindex) => (
          <EditBlock
            data={subblock}
            index={subindex}
            selected={this.isSubblockSelected(subindex)}
            {...this.subblockProps}
            openObjectBrowser={this.props.openObjectBrowser}
          />
        ))}
        {this.props.selected && this.renderAddBlockButton()}
        ...
      </SubblocksWrapper>
    );
  }
}

export default React.memo(withDNDContext(Edit));

SubblockEdit

The edit component of the subblock must extend the class SubblockEdit

If you want to enable drag&drop to reorder subblocks, you have to compose with injectDNDSubblocks.

export default compose(injectDNDSubblocks)(EditBlock);

In the render() function of this component, you have to:

• wrap all content with 'Subblock' component. By default Subblock component is draggable. If you prefer not to make subblocks draggable, you could add the prop draggable={false}:

<Subblock subblock={this}>...</Subblock>

Example

import React from 'react';
import { compose } from 'redux';
import { injectDNDSubblocks, SubblockEdit, Subblock } from 'volto-subblocks';

class EditBlock extends SubblockEdit {
  render() {
    if (__SERVER__) {
      return <div />;
    }

    return <Subblock subblock={this}>...</Subblock>;
  }
}

export default React.memo(compose(injectDNDSubblocks)(EditBlock));

SubblocksWrapper

It's the wrapper to use in parent component. Properties:

• node: the 'node' var that will contain ref for this node.
• className: to add class or classes to the wrapper.

Example

<SubblocksWrapper node={this.node} className="additional_class">
  ....
</SubblocksWrapper>

Subblock

It's the wrapper for each subblock. Use it in subblock edit component. Properties:

• subblock: the current class instance of subblock
• className: to add class or classes to the wrapper.
• draggable: default true. If you don't want to make your subblock sortable with drag&drop, you can pass false.

Example

<Subblock subblock={this} className="additional_class" draggable={false}>
  ....
</Subblock>

Authors

This product was developed by RedTurtle Technology team.