Bundled Themes: Add styles for wysiwyg Text and Media widgets

[Soean]

In #35760 the Text widget was extended with TinyMCE. The Text widget supports now bold, italic, lists and links. The default themes should support the styles for the html elements.

[Soean]

Adds styles for Text widget.

[obenland]

@Soean Could you give 40745.4.diff​ a try and see how you like it?
We would also need before/after pictures for each theme, for folks to get an idea of the changes.

Thanks!

[celloexpressions]

Adding a series of "before" screenshots for each bundled theme below, and also including media widgets here as they need some related adjustments. That way we can streamline the cross-theme testing and documentation for both widget types.

[celloexpressions]

After evaluating all eight bundled themes, there are some critical issues that need to be fixed. Most notably is list styling - for many themes, there are no bullet points, and the way the editor converts things to ul automatically, this could lead to a lot of frustration and confusing/unexpected results. Additionally, I found several other issues listed below. The scope of my testing was limited generally to each theme's primary widget area.

I don't have time to test them all with the patch, but it looks like 40745.4.diff​ addresses many of the issues. The MediaElement.js inconsistencies in Twenty Thirteen and Twenty Fourteen still need to be addressed there. Once the issues listed below are verified as fixed, someone should do a pass on the general design to make other less obvious improvements. Where possible, the original theme designers should be consulted.

Based on the scope of issues, and over half of the bundled themes requiring at least some adjustments, there needs to be a dev note on make/core to discuss updating themes to support the new widgets, with some of the common issues (list styling with bullets, list spacing, MediaElements, image spacing, etc.). Time should also be allotted and effort made with the Theme Review Team to do outreach to theme authors to give them time to evaluate and update their themes.

Summary of definite issues that need to be fixed (based on current trunk):

Twenty Ten:

• No issues

Twenty Eleven:

• Image widget with caption padding issues
• Unordered vs. ordered list alignment issues

Twenty Twelve:

• No issues

Twenty Thirteen:

• Ordered lists missing ordering
• Unordered lists missing bullets
• List spacing is very odd
• MediaElement.js players are missing custom theme coloring and do not match media players in post content

Twenty Fourteen:

• Ordered lists missing ordering
• Unordered lists missing bullets
• MediaElement.js players are missing custom theme coloring and do not match media players in post content
• MediaElement.js players are missing custom theme-specified icons (via Genericons, and associated icon recoloring) and do not match media players in post content. Screenshot doesn't show it, but the video player interactions are particularly different.

Twenty Fifteen:

• Inadequate color contrast in image widget caption (and possibly also in text widget - needs accessibility team verification)

Twenty Sixteen:

• No issues

Twenty Seventeen:

• Unordered lists missing bullets
• List spacing is very odd
• List numbers hanging into margin come very close to adjacent content area (not visible in this particular screenshot)

[obenland]

40745.5.diff​ improves styles. I added before/after screenshots of the changes, please see above.

@celloexpressions I duplicated the custom mediaelement styles for widgets, would you mind testing those again?

[ocean90]

40745.5.diff​ looks good to me. Worth to mention that we also support the formatting shortcuts in the editor so elements like headings, block quotes, horizontal lines and inline code are also available. But those are also looking good.

[celloexpressions]

Twenty Thirteen: should we use a different background color on media elements in the footer widget area? It matches the footer background currently.

[celloexpressions]

Twenty Fourteen: completed fix with matching iconography and colors on media players in content and the content sidebar widget area (patch forthcoming).

[celloexpressions]

Fix media player icons for Twenty Fourteen, amending 40725.6.diff (also fixes spacing issue likely caused by a past MediaElement.js update).

[celloexpressions]

Did a couple quick spot checks. Minor issues:

• Twenty Seventeen: appears to have more space before a list than after the list, which looks a bit off. Possibly also the same issue in Twenty Fourteen.
• Twenty Thirteen: we may want to select one of the other theme colors for the background color of the MediaElement players when they're used in the primary (footer) widget area, as the background of that widget area matches the color used for players in the content.

I also made some additional fixes for MediaElement.js player in Twenty Fourteen in 40745.6.diff​, which theoretically includes everything in 40745.5.diff​ but please double-check.

Let's try to round up several people to do some testing on each of the themes - these styles will be used on a lot of sites and we need to make sure they're up to the quality standards of bundled themes. With different widget areas and configurations, we'll discover a few minor tweaks that we can make to improve things.

[Joen]

Twenty Thirteen: should we use a different background color on media elements in the footer widget area? It matches the footer background currently.

I don't think that's critically necessary. But if need be, we can use #1b1b19 or even just plain black. I think that'd be good.

[karmatosed]

I have tested every theme using the latest patch. Here are the outstanding issues I think we need to care for.

1. Twenty Fourteen:

This we may put down to a design decision, but because of the higher break point with less padding, you get really bid videos and audio:

2. Twenty Fourteen:

I am unsure the dark audio on dark sidebar works well:

Twenty Thirteen has this too, but not critical.

---

Here is a visual record of each theme:

Twenty-seventeen:
video, image, audio widget:

text widget:

mobile:

Twenty Sixteen:

video, image, audio widget:

text widget:

mobile:

Twenty Fifteen:

video, image, audio widget:

text widget:

mobile:

Twenty Fourteen:

video, image, audio widget:

text widget:

mobile:

Twenty Thirteen:

video, image, audio widget:

text widget:

mobile:

Twenty Twelve:

video, image, audio widget:

text widget:

mobile:

Twenty Eleven:

video, image, audio widget:

text widget:

Twenty Ten:

video, image, audio widget:

text widget:

[karmatosed]

With regards to the dark/on dark issue in Twenty Fourteen, what you get for the dark color on Twenty Fifteen is this:

I would suggest if we do it, then this is a good fix.

[karmatosed]

I am testing the color variations in themes also and notice for example Twenty Seventeen's dark:

As several themes have this we may want to just put it down to design decisions and not fix.

[karmatosed]

I can confirm no new issues when testing the default theme color variations.

[obenland]

In 40839:

Default themes: Improve styles for 4.8 widgets

Mostly adds styles for lists and mediaelement.js instances within widgets.
Adds size classname to image widget so themes can customize their display.

Props Soean, obenland, celloexpressions, ocean90, karmatosed.
Fixes #40745.

[jorbin]

In 40883:

Bundled Themes - Bump themes in preparation for 4.8

Change version numbers in stylesheets, fix typo in Twenty Fourteen readme and update copyright dates for themes. Twentysixteen wasn't updated this cycle.

See #40745 for changes that helped push this along.
Fixes #40905.
Props davidakennedy, mrahmadawais, maedahbatool.

[jorbin]

In 40884:

Bundled Themes - Bump themes in preparation for 4.8

Backports [40883] from trunk to 4.8

Change version numbers in stylesheets, fix typo in Twenty Fourteen readme and update copyright dates for themes. Twentysixteen wasn't updated this cycle.

See #40745 for changes that helped push this along.
Fixes #40905.
Props davidakennedy, mrahmadawais, maedahbatool.

[desrosj]

As far as I can tell, this change did not receive a developer note. Removing the needs-dev-note keyword.