[wp-trac] [WordPress Trac] #42203: Ensure media & embeds in Text widget are styled properly across widget areas in bundled themes

[WordPress Trac]

#42203: Ensure media & embeds in Text widget are styled properly across widget
areas in bundled themes
----------------------------+----------------------------
 Reporter:  westonruter     |       Owner:  davidakennedy
     Type:  task (blessed)  |      Status:  assigned
 Priority:  high            |   Milestone:  4.9
Component:  Bundled Theme   |     Version:
 Severity:  normal          |  Resolution:
 Keywords:                  |     Focuses:
----------------------------+----------------------------

Comment (by davidakennedy):

 Overall thoughts

 - Some of the margin issues should be easy to solve.
 - The bigger challenge is dealing with widget areas that are extremely
 narrow, like in Twenty Fourteen and Twenty Fifteen in some cases.
 - Also, handling responsive iframes, objects, etc will probably be a
 challenge without adding a lot of extra CSS or a jQuery library like
 FitVids. Many of the video embeds didn't look bad in the widget areas,
 they just weren't full width in all cases.
 - I'm going to focus on the newer themes first since they likely have a
 higher install base and should be easier to fix in most cases.

 I'm going to test #41969 tomorrow as well and come up with some patches.

 Test results follow:

 '''2017'''

 Sidebar: Video iframes in sidebar not full width. Would need to have extra
 code to make full width.
 Footer 1: Video iframes in sidebar not full width. Would need to have
 extra code to make full width.
 Footer 2: Video iframes in sidebar not full width. Would need to have
 extra code to make full width.

 The is especially noticeable in the footer widgets areas on certain screen
 sizes.

 Screen shot: https://cloudup.com/cf0xK0ilIvv

 '''2016'''

 Sidebar: Video iframes in sidebar not full width. Would need to have extra
 code to make full width.
 Footer 1: Video iframes in sidebar not full width. Would need to have
 extra code to make full width.
 Footer 2: Video iframes in sidebar not full width. Would need to have
 extra code to make full width.

 The is especially noticeable in the footer widgets areas on certain screen
 sizes.

 Screen shot: https://cloudup.com/ckDlQsJL8mO

 '''2015'''

 The standard desktop widths in the one widget area look good. However, at
 smaller screen sizes, the iframes aren't full width.

 Screenshot: https://cloudup.com/cA-JHysSvs5

 At smaller widths with the sidebar to the left, some of the styles for the
 MediaElement.js player hit some stress cases.

 Screenshot: https://cloudup.com/cVCIQyl-fb6

 The Instagram embed styles look broken at narrow widths.

 Screenshot: https://cloudup.com/clyPiTiDxBM

 '''2014'''

 Primary Sidebar: This sidebar has a narrow width, and some of the styles
 for the MediaElement.js player hit some stress cases.

 Screenshot: https://cloudup.com/cM_SiDVw40S

 Primary Sidebar, Content Sidebar Footer Widget Area: The YouTube embed
 breaks.

 Screenshot: https://cloudup.com/c7TqKMb0A-A

 '''2013'''

 Main Widget Area: Similar to other narrow widget areas in default themes,
 the Instagram widget looks broken.

 Screenshot: https://cloudup.com/cTSNn7gnK3T

 Secondary Widget Area: Video iframes in sidebar not full width. Would need
 to have extra code to make full width.

 Screenshot: https://cloudup.com/cmJ3M-YEmty

 Also, some of the MediaElement.js containers need a margin.

 '''2012'''

 Main Sidebar: Some of the MediaElement.js containers need a margin. Video
 iframes in sidebar not full width. Would need to have a extra code to make
 full width. The is especially noticeable in the footer widgets areas on
 certain screen sizes. Same for both Front Page Widget Areas.

 Screenshot: https://cloudup.com/cbl-F7BLkiv

 '''2011'''

 Main Sidebar: Some of the MediaElement.js containers need a margin. Video
 iframes in sidebar not full width. Would need to have a extra code to make
 full width. This is more noticable at smaller screen sizes when the
 sidebar drops under the main content areas.

 Screenshot: https://cloudup.com/caTAILX2ZmG

 Showcase Sidebar: This area has similar issues as other narrow widget
 areas.

 Screenshot: https://cloudup.com/crdIXxAalFI

 Footer Area One, Two and Three: These have the same issues as previously
 noted.

 Screenshot: https://cloudup.com/c-QxyfB3iVO

 '''2010'''

 All the widget areas in this theme have similar issues to the other
 themes. Most notable are needing margins on the MediaElement.js
 containers. Although, this theme isn't responsive so it doesn't have as
 many width issues as other themes.

 Screenshot: https://cloudup.com/cibKJF4PQ1n

--
Ticket URL: <https://core.trac.wordpress.org/ticket/42203#comment:7>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform