Ability to edit a shortcode's attributes inline

[danielbachhuber]

For shortcodes that don't have substantially complex fields, it might be nice to be able to edit a shortcode's attributes inline.

[sc0ttkclark]

Such yes

[bfintal]

This would be great, although I'm not so certain that TinyMCE views can readily handle this

[mattheu]

I think a first step could be to allow shortcodes to override the editor form view and provide their own.

This way - you could completely customize the appearance. You could make the form look exactly like the rendered shortcode.

The next step - you could provide an option to render the form inline instead of the preview for a given shortcode. Providing editable forms doesn't totally break the MCE views this should be OK.

[danielbachhuber]

Inline editing came up as a core integration point. We should prioritize it for v0.6.0, and explore how other editors do this / content blocks.

Another consideration for inline editing is block vs. non-block shortcodes. Inline editing could be less functional for non-block shortcodes, as we'll have less space to work with.

[cliffordp]

👍
Right now the only way is to go to the "Text" editor instead of the "Visual" editor... but then you lose your place (which [xyz] shortcode was I wanting to edit? where in this long post was that [abc] shortcode? etc)

And possibly related: #115 (select existing text and turn into a shortcode)

[danielbachhuber]

Some conversation from Slack:

goldenapples [12:22 PM] Only way I can see that happening, is allowing shortcodes to render an edit preview with blocks of text marked as “contenteditable”, and using some postmessage magic to maintain the link between those fields in the preview and the shortcode itself.
goldenapples [12:23 PM] It seems possible, but not easy or obvious, and even after exploring technical feasibility probably needs a lot of UX thought.
danielbachhuber [12:23 PM] there’s another approach we could take: open form fields inline instead of modal
danielbachhuber [12:24 PM] I think you’d get 80% of the benefit for 20% of the effort
goldenapples [12:24 PM] hmm. what does “inline” mean in that context? like, rendering form inputs inside the wpview iframe?
danielbachhuber [12:25 PM] yeah
danielbachhuber [12:25 PM] or on top of
matth_eu [12:26 PM] For me - I feel like ‘inline’ means directly editing the preview? Just doing the fields hits the technical limitations - but not sure its a better UX than the modal.
danielbachhuber [12:27 PM] yeah
danielbachhuber [12:27 PM] I think the tough thing about directly editing the preview would be that probably less than 10% of embedded assets would actually support that
goldenapples [12:27 PM] I’d rather hit quick edit buttons #169 first and figure out a good way of exposing that UI to registered shortcodes.
danielbachhuber [12:27 PM] e.g. most embedded asset’s “values” aren’t necessarily directly editable
goldenapples [12:28 PM] true.
matth_eu [12:28 PM] Yeah exactly. Another thing that would get us a long way towards it - I’d like individual shortcodes to be able to provide a 100% custom form view. For example they can style it up to look exactly like the preview.
matth_eu [12:28 PM] We could tackle these 2 separately
matth_eu [12:29 PM] Then combined together - pretty much give the option to do inline editing.

[khromov]

Sounds good - getting rid of the modal would be a huge step. For many fields you could do replace the field with an input area as you click on it. (And give some visual hinting when user hovers over it). Drupal 8 has some great ideas for front-end editors, see:
https://www.youtube.com/watch?v=evBpwxWPzPk

Also Aesop does this very well in the context of WP.

[StaggerLeee]

Can you please when talking about major changes do as they recently did on WordPress Trac. Make some screenshots for us dumb people. Very hard to follow you guys. Please.

[danielbachhuber]

Can you please when talking about major changes do as they recently did on WordPress Trac. Make some screenshots for us dumb people. Very hard to follow you guys. Please.

Will do. No big or breaking changes coming at this time.