Inline editing of Banner Block

[brynwhyman]

User Story

As a CMS user, I want to be able to edit the contents of a banner block within a page context, so that I can edit the block more efficiently.

Acceptance Criteria

• [x] The call to action link field is updated to be React based
• [x] The banner block can be expanded and collapsed
• [x] The editable features currently available for a banner block are present for inline editing, including:
  • [x] Title (and a checkbox to display or hide it)
  • [x] Image
  • [x] Content with TinyMCE widget
  • [x] Call to action
• [x] Clicking ‘Save’ at the page level saves the current content entered in the block.
• [x] Clicking ‘Publish’ at the page level publishes the current content entered in the block.
• [x] Styling as per wireframe: https://projects.invisionapp.com/share/ZRL4T2HQAGB#/screens/301923215

[robbieaverill]

The bulk of the inline editing work in elemental would solve most of these A/Cs.

We will need to make a React based form schema component for the link field in this module, which won't work in the inline editing context otherwise.

[raissanorth]

I made a start on this one, see https://github.com/creative-commoners/silverstripe-elemental-bannerblock/tree/pulls/2.0/call-to-reactify

There are a lot of incredibly random cryptic error messages coming up for me however, so I suggest starting from scratch. But I thought I'd share this to let @robbieaverill what I had tried up until moving on to another ticket.

For instance it is important to expose elemental-bannerblock's bundle file, which we haven't done yet.

[robbieaverill]

The problem is that we built this initially to be largely entwine and SS template driven, rather than React driven. Only the "actions" menu is React driven at the moment.

In order to make this work we'll need to rewrite the whole component to be React driven. I've got it rendering now but need to work on the "insert link" modal dialog, which previously we were repurposing from TinyMCE - that's a fragile design and I'd like to use the InsertLinkModal component from admin instead now, but when I'm trying to loadComponent() and bring that in, it complains that the Redux store isn't provided. When I check with a breakpoint, window.ss.store is undefined.

If we can get that component to render the insert link form (it can still use the page's schema, since it's the same modal essentially), then we can move forward with this.

@unclecheese are you able to provide any advice?

[robbieaverill]

@raissanorth I've pushed up a commit to your branch which has the React rewrite for the BlockLinkField working outside of React forms. I've temporarily put $inline_editable = false on the BannerBlock in order to test the React rewrite of BlockLinkField on its own, where it's injected with entwine.

The pulls/2.0/call-to-reactify branch now needs the following:

• Get the React form component to work in inline editing (similar errors thrown to before, relating to search fields?)
• Write some jest tests for it
• Ensure that the Behat tests are passing

FYI I've put as much of the logic as possible into the React components to try and ensure that whether it's rendered with entwine or with a FormBuilderLoader, it shouldn't matter. As long as the schema data is provided, it should be fine either way.

Maybe see if @ScopeyNZ can help with whatever the search console error message is? Sorry but I've run out of time to work on this.

[raissanorth]

Outstanding tasks:

• [x] Get the React form component to work in inline editing
• [x] Write some Jest tests for it
• [x] Ensure that the Behat tests are passing

[NightJar]

Closed in #13