Twenty Thirteen and Fourteen: Add Audio, Video, and Gallery Styles to editor styles

[celloexpressions]

Now that we have wonderful previews of audio, video, and galleries in the editor, via MCE views, we should apply bundled themes' styling to them in editor styles.

This serves to both achieve a broader testing base for potential customizations to the new MCE views' styling, and to make Twenty Thirteen and Fourteen more awesome.

[celloexpressions]

Styles for audio & video in Twenty Fourteen

[celloexpressions]

Twenty Thirteen video in the editor, with video post format.

[celloexpressions]

Audio/video styling for Twenty Thirteen

[celloexpressions]

Audio/video styles are in the two patches above (also have the structural changes for adding in comments, to hopefully avoid conflicting patches).

The screenshot demonstrates a potential issue with the views styling, when themes have a background color in the editor. Can be solved by making the view background transparent.

I'll work on the galleries next, which are also almost identical between Thirteen and Fourteen. They basically work as designed on the front-end (including the hidden/shown captions), but getting the 4px margins/tight grid is a bit trickier.

[lancewillett]

In both patches you have "8.0 - Galleries" in the table of contents but there's no related CSS rule block -- it goes from 7 to 9. Is that coming in a newer patch, or just a typo?

Nitpick: in a value like rgba(255,255,255,.33); please add a space after each comma.

[lancewillett]

Oops, missed your comment on the galleries coming next. Sorry.

[celloexpressions]

Replying to lancewillett:

Nitpick: in a value like rgba(255,255,255,.33); please add a space after each comma.

Copied from style.css :) Pretty sure I wrote the line there, though. I'll update.

Actually, I'll probably just patch each whole file once I fix the galleries - they were in there but not quite right so I tried to keep things more segmented.

Important note from @azaozz: we can't add any styles to the top-level view divs (ie, .gallery), only children, because that can mess up the view in TinyMCE.

[celloexpressions]

Audio, video, and galleries for Twenty Fourteen

[celloexpressions]

Gallery in the editor, selected, mouse over the first image, with Twenty Fourteen

[celloexpressions]

27462.fourteen.diff​ covers all of the views for Twenty Fourteen. It looks great generally, and matches the front-end (other than the default styling when the gallery is selected). The captions-on-hover even work.

Because of the negative margins on the gallery div, it's a bit hacky to keep everything perfectly aligned. Once there are more than 3 columns (or the images are bigger than 150px, or the viewport is less than ~500px, which I didn't account for), there is no solution other than to have the images overflow the "selected" border. However, I think that this behavior is acceptable, as long as the gallery is centered on the border.

This'll need extensive testing, and getting this committed is probably the best way to encourage that. I'll do the Twenty Thirteen styles later, but they're almost identical to Fourteen and should have exactly the same issues.

[celloexpressions]

Replying to bravokeyl:
Actually, it still needs another patch (for Thirteen). But the one for Fourteen is ready for testing (and potentially commit). Could've done separate tickets, but the patches and any bugs will end up being very similar. Trac doesn't seem to like to have both needs-patch and has-patch, though :)

[lancewillett]

In 27637:

Twenty Fourteen: add Audio, Video, and Gallery Styles to editor styles. Props celloexpressions, see #27462.

[celloexpressions]

Screenshot of 4-column gallery in Twenty Thirteen editor with gallery post format, in mobile viewport

[celloexpressions]

Audio, video, and galleries for Twenty Thirteen, with gallery fixes for edge cases and responsiveness

[celloexpressions]

I figured out a better way to handle the compensation for the negative margins. Rather than assuming the default image size and non-mobile, the width calculations take the outer margin into account. This also resolves the border-overlap issue.

27462.thirteen.diff​ should be good to go; I'll port those improvements to Twenty Fourteen too.

[lancewillett]

In 27638:

Twenty Thirteen: add Audio, Video, and Gallery Styles to editor styles. Props celloexpressions, see #27462.

[celloexpressions]

Fix alignment of gallery images in Twenty Fourteen, matching approach taken for Twenty Thirteen

[lancewillett]

In 27641:

Twenty Fourteen: improved gallery styles in visual editor, props celloexpressions. Fixes #27462.