wp-shortcake / shortcake

Shortcake makes using WordPress shortcodes a piece of cake.
GNU General Public License v2.0
664 stars 142 forks source link

Ability to edit a shortcode's attributes inline #116

Open danielbachhuber opened 9 years ago

danielbachhuber commented 9 years ago

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

sc0ttkclark commented 9 years ago

Such yes

bfintal commented 9 years ago

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

mattheu commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

:+1: 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: https://github.com/fusioneng/Shortcake/issues/115 (select existing text and turn into a shortcode)

danielbachhuber commented 9 years ago

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 https://github.com/fusioneng/Shortcake/issues/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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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.