WYSIWIG editors and rich, inline media

[danielbachhuber]

One of @samuelsidler's suggestions for Shortcake is:

Inline editing would be really nice. We should see if we can make it the default experience for most shortcodes, and all existing core shortcodes. We should also experiment with content blocks, and see what other editors are doing.

Before we get too far into inline editing, let's see how other editors have solved (or ignored) this problem. Specifically: How do different editorial tools allow for inserting complex blocks of content into the body of a page?

We should look at Medium, Squarespace, Poetica, and any other modern WSYWIG editor we can find.

Some discussion: https://wordpress.slack.com/archives/feature-shortcode/p1436209688000126

This could make a good blog post for Fusion.net.

[mattheu]

Squarespace

I'll kick this off with a look at the Squarespace editor.

Main page builder has 'regions' that I can select and edit.

Selecting the main content reveals a fairly traditional editor.

Blocks of content can be inserted between paragraphs.

Lots of different blocks available

Example of inserting/editing a block. This concept appears to be used for all the modules - some have fairly complex settings options.

They use a 'tab' like concept for more complex modules to show/hide fields. The lower tab block is for different versions of similar modules - and can also be added directly from the main module selection view.

Layout

I think squarespace used to give you a lot ammount of control over layout, but it seems that this has been dropped in favour of set templates with editable regions.

Thoughts

• Actually this is all fairly similar to shortcake.
• Modules are kept as a separate concept from layout.
• Our modal is a blocking experience - whereas theirs appears alongside. But they don't do true inline editing.
• They have nicely customized modal UI's for different modules - but essentially similar.
• Interesting the way they expose a traditional editor in the live preview of the page.

[sdsweb]

The "insert" toolbar is very similar to how we solved it with our Note plugin in the customizer. https://i0.wp.com/conductorplugin.com/wp-content/uploads/2015/05/note-animated-gif.gif?resize=570%2C330

[mattheu]

Medium

Medium is a super minimal editor experience. Very simple and implementation is super slick. Looks exactly the same as the front end.

Content blocks - these contextual controls show when you add a double line break. You can insert a very limited range of modules - image, video, embed and divider.

After it has been inserted there are a few further options. eg Style/Alignment controls show above. Again very limited and the styles are fixed within these options. The caption can be edited inline.

Layout. Layout is defined entirely by theme - with only some alignment options available. However these have been implemented in a really interesting way

Thoughts

• Contextual - controls show only when/where you need them.
• Very slick inline editing experience. But options are very limited.
• love the alignment options. Goes beyond left/right/center/none adding custom styles.

[davisshaver]

@danielbachhuber Mind clarifying what you want for this issue? Blog post, or structuring/filling gaps in competitive overview, something else?

[danielbachhuber]

I think a blog post would make for interesting reading / discussion.

For the purposes of getting Shortcake into core, a feature comparison chart would be helpful.

[davisshaver]

Thinking about feature comparison chart. I'll use that as basis for a blog post.

@mattheu @danielbachhuber @goldenapples would you mind reviewing below and letting me know what you'd add or change?

• [ ] Non-blocking editing experience (content & meta/options)
• [ ] Inline element controls (meta/options)
• [ ] Inline editing (content)
• [ ] Custom elements
• [ ] Supports non-block/WYSIWYG layout in editor

[danielbachhuber]

@davisshaver @mattheu how do you want to wrap this up?

[ghost]

Just my twopenny's worth... would MailChimp be a good candidate for comparison here too? I know it's email rather than web, but the concept is the same & it's an ultra-easy editing experience... let me know if you'd like me to contribute.

[mattheu]

@hexagongirl Yeah would love your contribution. Would love to hear about any interesting ways that this problem has been tackled.

[ghost]

@mattheu okeydokes, will see if I can pull something together in the form of a blog post

[mattheu]

Came across a nice looking publishing platform called Atavist

The editor experience is nice and simple. Contextual/Inline controls + content blocks. I thought it was worth writing up and sharing as its similar to how I have imagined shortcake working.

An example of selecting a content block. Uses a sidebar to list available blocks, along with a thumbnail/sample image.

Editing a block settings also uses the sidebar. They comes with predefined example settings which is quite nice. eg. a couple of images for a slideshow so its already set up and working.

You also get a live preview experience - although this isn't really in the context of the content. Its very slick the way they transition to this view though.

Templates. Designs are basically fixed but they allow you to select a few styles for the main title and different section headings.

Ultimately - I think its a pretty nice experience. It isn't a huge departure from the concept of the WordPress admin - with an 'admin' view that is separate from the front end + some templates.

The content blocks experience is pretty slick though. Its a fairly similar approach to shortcake in many ways. I do quite like having the form fields alongside the preview rather than having the blocking modal, and the live preview is done well.

[ghost]

Nice... I like that approach. Reminds me I haven't written up about MailChimp yet. Here goes:

Basic concept is the preview is over the left, with content blocks over to the right. Drag a content block into position to add it:

Click on any of your added content blocks over the left hand side, and the right hand side turns into a panel with content/styles/settings for that block. You can also re-order, duplicate and delete blocks:

Content is edited over to the right in the edit panel, rather than directly inline. Despite using MailChimp quite a bit, this still occasionally gets me... I try and click the cursor in the preview section to the left...

Overall, it's a very easy to use and manageable experience - combining lots of different content types with ease. A combination of this and/or Atavist above would be my WordPress dream :smiley:

[ghost]

There's a forum discussion that I started on themehybrid.com that might also be of interest here - mainly as an insight into what some theme developers are thinking/saying:

http://themehybrid.com/board/topics/best-way-to-build-a-complex-home-page-in-wp/ Page 2 (there doesn't seem to be any nav between pages): http://themehybrid.com/board/topics/best-way-to-build-a-complex-home-page-in-wp/page/2#post-5759