Implement a "visual editor" for high impact layouts within Acorn
Create a StreamField block that can be used to create "high impact" layouts directly from the Wagtail backend. High impact layouts are usually those that would be implemented directly from a designer and need to expose a far more extensive set of options, attributes, and source code properties than would normally be provided to a website author or editor.
The goal is not to replace the current Acorn editors (Markdown, Rich Text, etc) or the other structured blocks currently present, but rather to provide a set of options where designers can create "blocks" that fit within the standard layout. When we have asked for feedback from designers, they have typically said: "This platform does not provide me with a sufficient degree of creative freedom to create content."
Design goals and requirements:
- Create a StreamField block that allows for users to have very fine degree of control over the layout, typography, HTML properties, and page components.
- When the Wagtail Editor loads, the block shows a thumbnail of the layout and a single button: "Edit"
- When "Edit" is clicked, it launches a full-page editor where the designer can work.
- Editor built from GrapeJS with a small set of blocks (to start). Again, goal is not to replace, but rather enhance. I don't think we want these layouts to be used as full and complete pages, but layouts within full and complete pages that can be mixed with our other block types.
- Text
- Buttons
- ???
- Integration: How might the data and editor fit into the broader Acorn/Wagtail/StreamField world?
- Output is stored in a CharBlock as serialized JSON (I believe that this is how GrapeJS stores its property lists)
- How would the UI and interaction work?
- Slider Revolution has a very nice demo showcasing how their visual editor fits within WordPress as a Gutenberg block. (See attached design.)
- Visual editor exists in one world, preview and stream layouts exist in the second world
-
Q: What would be required to provide support for GrapeJS within the existing Foundation fronend of Acorn?
- Deprecation and replacement of existing frontend system is not desirable right now.
- Images/videos: Pulled from the Acorn image and video library