What is a content block? codepen

In Draft, content block is a javascript object inside <Editor/>'s state (that we are keeping in our component and pass as Editor.props.editorState).
We can take a look at what contentBlocks our <Editor/> has by logging convertToRaw(this.state.editorState.getCurrentContent()) to console.

If we seed our editor with <h6>Hii</h6>, it will return, among other stuff, something like this:

blocks: [
  { // content block
    text: "Hii"
    type: "header-six"
  }, {}, {}
]

So "header-six" type corresponds to <h6> html tag.
To determine what content block's type refers to what html tag, refer to https://github.com/facebook/draft-js/blob/16ed6e5a1e7c9d5a0d5718b9a50c8256ee33f938/src/model/immutable/DefaultDraftBlockRenderMap.js (well, or check it with this codepen).

Once again: content block is an object in editor’s state. When <Editor/> renders its state into some actual html we are seeing, it will look at content block's type, map it to some tag (header-six => <h6>), and show it.

What does it even mean to customly render a block? codepen

Look at our codepen. We seeded our Editor with some contentState (by transforming html to the usual contentState object Editor understands). Then Editor needed to transform every content block of contentState to some html tag to display it to us.
By default, content block of type header-six will be transformed to h6.
This process can be controlled by the 3 properties passed to <Editor/> we will be discussing here: blockStyleFn, blockRenderMap and blockRendererFn. Fundamentally they all do the same: they determine the way content block is displayed to us as html.

When to use each of these props?

(contentBlock) = {
  if (contentBlock.getText() === 'Hii') {
    return 'cssClassToUseOnEveryHii';
  }
}

DefaultDraftBlockRenderMap.merge(
  Immutable.Map({
    'header-six': {
        element: 'h1', // or
        wrapper: MyComponent
    }
  })
);

const type = contentBlock.getType();
if (type === 'header-six') {
  return {
    component: MyComponent,
    props: { 
      plainText: contentBlock.getText()
    }
  };
}