WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 years ago

#27462 closed enhancement (fixed)

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

Reported by: celloexpressions Owned by: lancewillett
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.9
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: ui Cc:

Description

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.

Attachments (8)

27462.fourteen.audiovideo.diff (1.6 KB) - added by celloexpressions 7 years ago.
Styles for audio & video in Twenty Fourteen
twentythirteen-video-format-video-editor.png (124.4 KB) - added by celloexpressions 7 years ago.
Twenty Thirteen video in the editor, with video post format.
27462.thirteen.audiovideo.diff (1.7 KB) - added by celloexpressions 7 years ago.
Audio/video styling for Twenty Thirteen
27462.fourteen.diff (5.0 KB) - added by celloexpressions 7 years ago.
Audio, video, and galleries for Twenty Fourteen
fourteen-gallery-3-editor-selected.png (367.0 KB) - added by celloexpressions 7 years ago.
Gallery in the editor, selected, mouse over the first image, with Twenty Fourteen
thirteen-gallery-4-mobile-editor-selected.png (299.9 KB) - added by celloexpressions 7 years ago.
Screenshot of 4-column gallery in Twenty Thirteen editor with gallery post format, in mobile viewport
27462.thirteen.diff (5.0 KB) - added by celloexpressions 7 years ago.
Audio, video, and galleries for Twenty Thirteen, with gallery fixes for edge cases and responsiveness
27462.fourteen.2.diff (3.1 KB) - added by celloexpressions 7 years ago.
Fix alignment of gallery images in Twenty Fourteen, matching approach taken for Twenty Thirteen

Download all attachments as: .zip

Change History (23)

#1 @lancewillett
7 years ago

  • Focuses ui added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 3.9

@celloexpressions
7 years ago

Styles for audio & video in Twenty Fourteen

This ticket was mentioned in IRC in #wordpress-dev by celloexpressions. View the logs.


7 years ago

@celloexpressions
7 years ago

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

@celloexpressions
7 years ago

Audio/video styling for Twenty Thirteen

This ticket was mentioned in IRC in #wordpress-ui by celloexpressions. View the logs.


7 years ago

#4 @celloexpressions
7 years ago

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.

#5 follow-up: @lancewillett
7 years ago

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.

#6 @lancewillett
7 years ago

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

#7 in reply to: ↑ 5 @celloexpressions
7 years ago

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

Audio, video, and galleries for Twenty Fourteen

@celloexpressions
7 years ago

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

#8 @celloexpressions
7 years ago

  • Keywords has-patch needs-testing added

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.

#9 follow-up: @bravokeyl
7 years ago

  • Keywords needs-patch removed

#10 in reply to: ↑ 9 @celloexpressions
7 years ago

  • Keywords needs-patch added

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 :)

#11 @lancewillett
7 years ago

In 27637:

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

@celloexpressions
7 years ago

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

@celloexpressions
7 years ago

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

#12 @celloexpressions
7 years ago

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.

#13 @lancewillett
7 years ago

In 27638:

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

@celloexpressions
7 years ago

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

#14 @celloexpressions
7 years ago

  • Keywords needs-patch removed

#15 @lancewillett
7 years ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In 27641:

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

Note: See TracTickets for help on using tickets.