Convert ElementalEditor GridField to a React based equivalent

[robbieaverill]

Prior to beginning work on inline editing of content blocks, we'll need to:

Create a new react app - e.g. ElementalEditor and power as much of this with React, GraphQL and form factory/schema as possible now to pave the way for the react driven CMS in future.

We don't need to continue using gridfield for elemental, particularly because the editor only really has one column.

Acceptance criteria

• Keep current styling, but update where it makes sense
• Re-build current functionality to be utilising React
• Page will have one elemental area
• Behat tests
• Extensible
• drag and drop isn't expected to work on completion of this issue (see Implement React based drag and drop for reordering elements in the editor #285)

Subtasks

• Branch master -> 3 for 3.x support and make master 4.x @robbieaverill
• Add necessary GraphQL query configuration and query HOC NEW Add GraphQL query HOC for returning the content blocks on a page #274 @robbieaverill NEW Add GraphQL query HOC for returning the content blocks on a page #274
• Bind GraphQL query to ElementList container @robbieaverill NEW Query for reading blocks is now bound to ElementEditor component #277
• Create all empty React components and containers Initial work on converting elemental to react #275 @ScopeyNZ
• Create skeleton ElementEditor container Initial work on converting elemental to react #275 @ScopeyNZ
• Create skeleton ElementList container Initial work on converting elemental to react #275 @ScopeyNZ
• Create skeleton Element container Initial work on converting elemental to react #275 @ScopeyNZ
• Create skeleton Toolbar container Initial work on converting elemental to react #275 @ScopeyNZ
• Create skeleton Header component Initial work on converting elemental to react #275 @ScopeyNZ @raissanorth
• Create skeleton Content component Initial work on converting elemental to react #275 @ScopeyNZ
• Create skeleton AddNew component Initial work on converting elemental to react #275 @ScopeyNZ
• Implement current markup and CSS for ElementEditor @ScopeyNZ
• Implement current markup and CSS for ElementList Element and Content component updates #284
• Implement current markup and CSS for Element Element and Content component updates #284 @raissanorth
• Implement current markup and CSS for Toolbar ADD React version of the elemental add block control #281 @ScopeyNZ
• Implement current markup and CSS for Header Update skeleton Header component #278 @raissanorth
• Implement current markup and CSS for Content Element and Content component updates #284 @raissanorth
• Implement current markup and CSS for AddNew ADD React version of the elemental add block control #281 @ScopeyNZ
• Add start of upgrade guide (contribute to it ongoing) DOCS Start upgrade guide for elemental 3 to 4, fix broken image link in readme #283
• Enable delete action from block level
• Edit ability (via GridFieldDetailForm) still works

[robbieaverill]

Clarification on an acceptance criteria point:

(A/C) Page will have one elemental area

Elemental currently supports multiple elemental areas per page, but only provides one out of the box.

We'll implement this in a way that works for the default ElementalArea relationship, but attempt to document how devs can add more elemental editors for extra relationships they want to add.

It's unlikely to be as easy as it was with PHP GridFields.

[robbieaverill]

Edit ability (via GridFieldDetailForm) still works

We looked at removing GridField as a backend as part of this work, but until we have a React replacement for an edit form we'll need to keep it there to support blocks that won't be able to be edited inline (such as userform blocks).

For more info, see silverstripe/silverstripe-admin#590