xwp / wp-core-media-widgets

Feature plugin for development of new core media widgets for image, video, and audio (and others)
https://wordpress.org/plugins/wp-core-media-widgets/
35 stars 8 forks source link

Placeholder spacing issues #148

Closed melchoyce closed 7 years ago

melchoyce commented 7 years ago

Reported by @celloexpressions:

Incorrect spacing between the placeholder and the buttons (2em total, instead of 1em = 13px). Remove top margin from buttons and add bottom margin on preview, or remove bottom margin on placeholder to fix.

Confirmed this is the case. Looks like the HTML structure is different for the existing media elements in the Customizer, and the widgets. For example, here's the header image:

<div class="attachment-media-view">
    <div class="placeholder">No video selected</div>
    ...
</div>

Here's the image widget:

<div class="attachment-media-view">
   <p class="placeholder">No image selected</p>
</div>

Since .placeholder is applied to a <p> instead of a <div>, it inherits extra margins from the default <p> styling. We should change this to a <div> to match the existing structure.

That said, I'd like to see about tweaking these styles Customizer-wide in core, since I do think that the lack of margin makes the placeholder feel cramped.