Currently, the copy & delete icons float outside of their respective elements, in a weird vertical alignment. We propose moving them inside the fieldset, and putting them in the more common (and internally consistent) horizontal arrangement. This forges a stronger spacial relationship, and might make them easier click targets, as they are bound by a contrasting color and sharp geometric shape.
Note: we call our WYSIWYG containers 'Enhanced Paragraphs', which you can see in the mockups. A bit silly, I know, but we already used 'Paragraph' for another element. Legacy support: bah!
Done in ccaafae.
Other minor changes:
There are some quirks involved with container element editing, which makes the experience a little less than consistent across the broader UI. Some of the behavior is just plain weird, like how opening the twisty triangle on a container with both fields and related media/stories magically flips their position. Watch it a few times and you'll get a minor headache.
Also, container elements with related media and/or stories can take up tons of screen space; the mockup below moves them into "twisties" (collapsable regions), like elements.
Note: In the mockup above, the edit icon for related stories and media is slightly overloaded: if the "twisty" is already open, then the edit icon triggers the edit relation popup; otherwise, it should force the twisty open AND trigger the popup, so that the UI state stays sane. This could save time and support different user's mental models. If folks think it's weird, we could hide the edit button in the closed state, but that forces an extra click.
Last edited by theory,