Social modals for Gutensidebar

[hedgefield]

The snippet preview is in a modal as of 8.1, and here is a mockup of the other social previews following in its footsteps:

https://sketch.cloud/s/vQKb8/all/page-1/sidebar/play

The sections appear separately in the sidebar, but all link to the same modal, where they expand the relevant section.

The modal should be fixed near the top of the screen, so that it doesn't jump around when you expand and collapse sections. If the screen is too small to show an entire section, the modal becomes fullscreen and the accordeon area becomes scrollable, BUT the top and bottom bits (with the title and the save button) then become fixed to the top and bottom of the screen, so you can always save or quit.

Pressing Save applies the contents of the fields to your post. Pressing X (close) does still save the contents of the fields while the user remains on the post edit page but doesn't apply them to the post itself - it's a sort of saved draft. That way you can close the modal without losing your changes (unless you also go to a different page in WP of course).