From 71cd7287ba936f0561062a7fba3a5d32dfac75aa Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@automattic.com>
Date: Thu, 25 May 2017 15:19:42 +0000
Subject: [PATCH] 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.


Built from https://develop.svn.wordpress.org/trunk@40839


git-svn-id: http://core.svn.wordpress.org/trunk@40690 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-content/themes/twentyeleven/rtl.css        |   4 +
 wp-content/themes/twentyeleven/style.css      |  20 +++-
 wp-content/themes/twentyfifteen/rtl.css       |   5 +
 wp-content/themes/twentyfifteen/style.css     |   5 +
 wp-content/themes/twentyfourteen/rtl.css      |   4 +
 wp-content/themes/twentyfourteen/style.css    | 104 +++++++++++++-----
 wp-content/themes/twentyseventeen/rtl.css     |   8 ++
 wp-content/themes/twentyseventeen/style.css   |  39 ++++++-
 wp-content/themes/twentyten/rtl.css           |   4 +
 wp-content/themes/twentyten/style.css         |  16 +++
 wp-content/themes/twentythirteen/rtl.css      |   6 +
 wp-content/themes/twentythirteen/style.css    |  44 +++++++-
 wp-content/themes/twentytwelve/style.css      |  11 +-
 wp-includes/version.php                       |   2 +-
 .../widgets/class-wp-widget-media-image.php   |   1 +
 15 files changed, 236 insertions(+), 37 deletions(-)

diff --git a/wp-content/themes/twentyeleven/rtl.css b/wp-content/themes/twentyeleven/rtl.css
index ae85f5d9ec..3927e7f60c 100644
--- a/wp-content/themes/twentyeleven/rtl.css
+++ b/wp-content/themes/twentyeleven/rtl.css
@@ -377,6 +377,10 @@ section.recent-posts .other-recent-posts .comments-link > span {
 	margin-left: -10px;
 	text-align: left;
 }
+.widget_text ul,
+.widget_text ol {
+	margin: 0 2.5em 1.625em 0;
+}
 
 /* =Comments
 ----------------------------------------------- */
diff --git a/wp-content/themes/twentyeleven/style.css b/wp-content/themes/twentyeleven/style.css
index 8cd5082abb..389eea689c 100644
--- a/wp-content/themes/twentyeleven/style.css
+++ b/wp-content/themes/twentyeleven/style.css
@@ -1908,12 +1908,18 @@ section.ephemera .entry-title a span {
 }
 
 /* Widget Image */
-.widget_image img {
+.widget_image img,
+.widget_media_image img {
 	border: 0;
 	padding: 0;
 	height: auto;
 	max-width: 100%;
 }
+@media (min-width: 1024px) {
+	.widget_media_image .size-thumbnail {
+		padding: 6px;
+	}
+}
 
 /* Calendar Widget */
 
@@ -1945,6 +1951,18 @@ section.ephemera .entry-title a span {
 	border-bottom: 1px solid #ccc;
 }
 
+/* Text Widget */
+
+.widget_text ul,
+.widget_text ol {
+	margin: 0 0 1.625em 2.5em;
+}
+.widget_text ul ul,
+.widget_text ol ol,
+.widget_text ul ol,
+.widget_text ol ul {
+	margin-bottom: 0;
+}
 
 /* =Comments
 ----------------------------------------------- */
diff --git a/wp-content/themes/twentyfifteen/rtl.css b/wp-content/themes/twentyfifteen/rtl.css
index 809504a53c..3c1079d06a 100644
--- a/wp-content/themes/twentyfifteen/rtl.css
+++ b/wp-content/themes/twentyfifteen/rtl.css
@@ -288,6 +288,11 @@ img.alignleft {
 	margin: 0.7667em 0.8em 0 0;
 }
 
+.textwidget ul,
+.textwidget ol {
+	margin-left: 0;
+	margin-right: 1.6em;
+}
 
 /**
  * 10.0 Content
diff --git a/wp-content/themes/twentyfifteen/style.css b/wp-content/themes/twentyfifteen/style.css
index 13048ba9d6..6e0f185873 100644
--- a/wp-content/themes/twentyfifteen/style.css
+++ b/wp-content/themes/twentyfifteen/style.css
@@ -1554,6 +1554,11 @@ img.aligncenter {
 	border-bottom: 0;
 }
 
+.textwidget ul,
+.textwidget ol {
+	margin-left: 1.6em;
+}
+
 
 /**
  * 12.0 Content
diff --git a/wp-content/themes/twentyfourteen/rtl.css b/wp-content/themes/twentyfourteen/rtl.css
index af7f6f46ac..5ff7312cbe 100644
--- a/wp-content/themes/twentyfourteen/rtl.css
+++ b/wp-content/themes/twentyfourteen/rtl.css
@@ -335,6 +335,10 @@ td {
 	margin: 0 20px 0 0;
 }
 
+.widget_text ul,
+.widget_text ol {
+	margin: 0 10px 12px 0;
+}
 
 /**
  * 7.2 Content Sidebar Widgets
diff --git a/wp-content/themes/twentyfourteen/style.css b/wp-content/themes/twentyfourteen/style.css
index afa33f6139..d2d29a6c79 100644
--- a/wp-content/themes/twentyfourteen/style.css
+++ b/wp-content/themes/twentyfourteen/style.css
@@ -1347,55 +1347,70 @@ a.post-thumbnail:hover {
 
 /* Mediaelements */
 
-.hentry .mejs-container {
+.hentry .mejs-container,
+.widget .mejs-container {
 	margin: 12px 0 18px;
 }
 
 .hentry .mejs-mediaelement,
-.hentry .mejs-container .mejs-controls {
+.widget .mejs-mediaelement,
+.hentry .mejs-container .mejs-controls,
+.widget .mejs-container .mejs-controls {
 	background: #000;
 }
 
 .hentry .mejs-controls .mejs-time-rail .mejs-time-loaded,
-.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
+.widget .mejs-controls .mejs-time-rail .mejs-time-loaded,
+.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
+.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 	background: #fff;
 }
 
-.hentry .mejs-controls .mejs-time-rail .mejs-time-current {
+.hentry .mejs-controls .mejs-time-rail .mejs-time-current,
+.widget .mejs-controls .mejs-time-rail .mejs-time-current {
 	background: #24890d;
 }
 
 .hentry .mejs-controls .mejs-time-rail .mejs-time-total,
-.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
+.widget .mejs-controls .mejs-time-rail .mejs-time-total,
+.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
+.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
 	background: rgba(255, 255, 255, .33);
 }
 
-.hentry .mejs-container .mejs-controls .mejs-time {
+.hentry .mejs-container .mejs-controls .mejs-time,
+.widget .mejs-container .mejs-controls .mejs-time {
 	padding-top: 9px;
 }
 
 .hentry .mejs-controls .mejs-time-rail span,
+.widget .mejs-controls .mejs-time-rail span,
 .hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
-.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
+.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
+.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
+.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 	border-radius: 0;
 }
 
-.hentry .mejs-overlay-loading {
+.hentry .mejs-overlay-loading,
+.widget .mejs-overlay-loading {
 	background: transparent;
 }
 
-.hentry .mejs-overlay-button {
+.hentry .mejs-overlay-button,
+.widget .mejs-overlay-button {
 	background-color: #fff;
 	background-image: none;
 	border-radius: 2px;
 	box-shadow: 1px 1px 1px rgba(0,0,0,.8);
 	color: #000;
 	height: 36px;
-	margin-left: -24px;
+	margin: -28px 0 0 -24px; /* Keep centered on video (container includes visible controls bar) */
 	width: 48px;
 }
 
-.hentry .mejs-overlay-button:before {
+.hentry .mejs-overlay-button:before,
+.widget .mejs-overlay-button:before {
 	-webkit-font-smoothing: antialiased;
 	content: '\f452';
 	display: inline-block;
@@ -1405,11 +1420,13 @@ a.post-thumbnail:hover {
 	left: 10px;
 }
 
-.hentry .mejs-controls .mejs-button button:focus {
+.hentry .mejs-controls .mejs-button button:focus,
+.widget .mejs-controls .mejs-button button:focus {
 	outline: none;
 }
 
-.hentry .mejs-controls .mejs-button button {
+.hentry .mejs-controls .mejs-button button,
+.widget .mejs-controls .mejs-button button {
 	-webkit-font-smoothing: antialiased;
 	background: none;
 	color: #fff;
@@ -1417,15 +1434,18 @@ a.post-thumbnail:hover {
 	font: normal 16px/1 Genericons;
 }
 
-.hentry .mejs-playpause-button.mejs-play button:before {
+.hentry .mejs-playpause-button.mejs-play button:before,
+.widget .mejs-playpause-button.mejs-play button:before {
 	content: '\f452';
 }
 
-.hentry .mejs-playpause-button.mejs-pause button:before {
+.hentry .mejs-playpause-button.mejs-pause button:before,
+.widget .mejs-playpause-button.mejs-pause button:before {
 	content: '\f448';
 }
 
-.hentry .mejs-volume-button.mejs-mute button:before {
+.hentry .mejs-volume-button.mejs-mute button:before,
+.widget .mejs-volume-button.mejs-mute button:before {
 	content: '\f109';
 	font-size: 20px;
 	position: absolute;
@@ -1433,6 +1453,7 @@ a.post-thumbnail:hover {
 	left: 0;
 }
 
+.widget .mejs-volume-button.mejs-unmute button:before,
 .hentry .mejs-volume-button.mejs-unmute button:before {
 	content: '\f109';
 	left: 0;
@@ -1440,20 +1461,24 @@ a.post-thumbnail:hover {
 	top: 0;
 }
 
-.hentry .mejs-fullscreen-button button:before {
+.hentry .mejs-fullscreen-button button:before,
+.widget .mejs-fullscreen-button button:before {
 	content: '\f474';
 }
 
-.hentry .mejs-fullscreen-button.mejs-unfullscreen button:before {
+.hentry .mejs-fullscreen-button.mejs-unfullscreen button:before,
+.widget .mejs-fullscreen-button.mejs-unfullscreen button:before {
 	content: '\f406';
 }
 
-.hentry .mejs-overlay:hover .mejs-overlay-button {
+.hentry .mejs-overlay:hover .mejs-overlay-button,
+.widget .mejs-overlay:hover .mejs-overlay-button {
 	background-color: #24890d;
 	color: #fff;
 }
 
-.hentry .mejs-controls .mejs-button button:hover {
+.hentry .mejs-controls .mejs-button button:hover,
+.widget .mejs-controls .mejs-button button:hover {
 	color: #41a62a;
 }
 
@@ -2526,7 +2551,8 @@ a.post-thumbnail:hover {
 .widget_nav_menu li,
 .widget_pages li,
 .widget_recent_comments li,
-.widget_recent_entries li {
+.widget_recent_entries li,
+.widget_text li {
 	border-top: 1px solid rgba(255, 255, 255, 0.2);
 	padding: 8px 0 9px;
 }
@@ -2538,7 +2564,8 @@ a.post-thumbnail:hover {
 .widget_nav_menu li:first-child,
 .widget_pages li:first-child,
 .widget_recent_comments li:first-child,
-.widget_recent_entries li:first-child {
+.widget_recent_entries li:first-child,
+.widget_text li {
 	border-top: 0;
 }
 
@@ -2551,7 +2578,8 @@ a.post-thumbnail:hover {
 
 .widget_categories li li:last-child,
 .widget_nav_menu li li:last-child,
-.widget_pages li li:last-child {
+.widget_pages li li:last-child,
+.widget_text li li:last-child {
 	padding-bottom: 0;
 }
 
@@ -2589,6 +2617,24 @@ a.post-thumbnail:hover {
 	margin-bottom: 0;
 }
 
+.widget_text ul,
+.widget_text ol {
+	margin: 0 0 12px 10px;
+}
+
+.widget_text li > ul,
+.widget_text li > ol {
+	margin-bottom: 0;
+}
+
+.widget_text ul {
+	list-style: disc inside;
+}
+
+.widget_text ol {
+	list-style: decimal inside;
+}
+
 
 /**
  * 7.2 Content Sidebar Widgets
@@ -2716,7 +2762,8 @@ a.post-thumbnail:hover {
 .content-sidebar .widget_recent_entries li,
 .content-sidebar .widget_categories li ul,
 .content-sidebar .widget_nav_menu li ul,
-.content-sidebar .widget_pages li ul {
+.content-sidebar .widget_pages li ul,
+.content-sidebar .widget_text li ul {
 	border-color: rgba(0, 0, 0, 0.1);
 }
 
@@ -3973,7 +4020,8 @@ a.post-thumbnail:hover {
 	.primary-sidebar .widget_nav_menu li,
 	.primary-sidebar .widget_pages li,
 	.primary-sidebar .widget_recent_comments li,
-	.primary-sidebar .widget_recent_entries li {
+	.primary-sidebar .widget_recent_entries li,
+	.primary-sidebar .widget_text li {
 		border-top: 0;
 		padding: 0 0 6px;
 	}
@@ -3993,7 +4041,8 @@ a.post-thumbnail:hover {
 	.primary-sidebar .widget_nav_menu li:last-child,
 	.primary-sidebar .widget_pages li:last-child,
 	.primary-sidebar .widget_recent_comments li:last-child,
-	.primary-sidebar .widget_recent_entries li:last-child {
+	.primary-sidebar .widget_recent_entries li:last-child,
+	.primary-sidebar .widget_text li:last-child {
 		padding: 0;
 	}
 
@@ -4002,7 +4051,8 @@ a.post-thumbnail:hover {
 	.footer-sidebar .widget_pages li ul,
 	.primary-sidebar .widget_categories li ul,
 	.primary-sidebar .widget_nav_menu li ul,
-	.primary-sidebar .widget_pages li ul {
+	.primary-sidebar .widget_pages li ul,
+	.primary-sidebar .widget_text li ul {
 		border-top: 0;
 		margin-top: 6px;
 	}
diff --git a/wp-content/themes/twentyseventeen/rtl.css b/wp-content/themes/twentyseventeen/rtl.css
index 059355a8a0..d497e27734 100644
--- a/wp-content/themes/twentyseventeen/rtl.css
+++ b/wp-content/themes/twentyseventeen/rtl.css
@@ -242,6 +242,14 @@ input[type="checkbox"] {
 	padding-right: 1.5rem;
 }
 
+.widget_text ul {
+	margin: 0 1.5em 1.5em 0;
+}
+
+.widget_text ul li ul {
+	margin: 0 1.5em 0 0;
+}
+
 /* Footer */
 
 .social-navigation a {
diff --git a/wp-content/themes/twentyseventeen/style.css b/wp-content/themes/twentyseventeen/style.css
index 37ec33f7c1..2061fa06ee 100644
--- a/wp-content/themes/twentyseventeen/style.css
+++ b/wp-content/themes/twentyseventeen/style.css
@@ -2533,7 +2533,8 @@ h2.widget-title {
 	margin: 0;
 }
 
-.widget ul li {
+.widget ul li,
+.widget ol li {
 	border-bottom: 1px solid #ddd;
 	border-top: 1px solid #ddd;
 	padding: 0.5em 0;
@@ -2594,6 +2595,42 @@ h2.widget-title {
 	word-wrap: break-word;
 }
 
+.widget_text ul {
+	list-style: disc;
+	margin: 0 0 1.5em 1.5em;
+}
+
+.widget_text ol {
+	list-style: decimal;
+}
+
+.widget_text ul li,
+.widget_text ol li {
+	border: none;
+}
+
+.widget_text ul li:last-child,
+.widget_text ol li:last-child {
+	padding-bottom: 0;
+}
+
+.widget_text ul li ul {
+	margin: 0 0 0 1.5em;
+}
+
+.widget_text ul li li {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.widget_text ol li {
+	list-style-position: inside;
+}
+
+.widget_text ol li + li {
+	margin-top: -1px;
+}
+
 /* RSS Widget */
 
 .widget_rss .widget-title .rsswidget:first-child {
diff --git a/wp-content/themes/twentyten/rtl.css b/wp-content/themes/twentyten/rtl.css
index f6fd51e846..f6adb8cc3c 100644
--- a/wp-content/themes/twentyten/rtl.css
+++ b/wp-content/themes/twentyten/rtl.css
@@ -265,6 +265,10 @@ div.menu li{
 	margin-right: 1.3em;
 	margin-left: 0;
 }
+.widget_text ol {
+	margin-left: auto;
+	margin-right: 1.3em;
+}
 
 /* =Footer
 -------------------------------------------------------------- */
diff --git a/wp-content/themes/twentyten/style.css b/wp-content/themes/twentyten/style.css
index c42d770039..42d648a9f3 100644
--- a/wp-content/themes/twentyten/style.css
+++ b/wp-content/themes/twentyten/style.css
@@ -1222,6 +1222,22 @@ h3#reply-title {
 	width: 11px;
 	height: 11px;
 }
+.widget_text ul,
+.widget_text ol {
+	margin-bottom: 1.5em;
+}
+.widget_text ol {
+	margin-left: 1.3em;
+}
+.widget_text ul ul,
+.widget_text ol ol,
+.widget_text ul ol,
+.widget_text ol ul {
+	margin-bottom: 0;
+}
+.widget_media_video video {
+	max-width: 100%;
+}
 
 /* Main sidebars */
 #main .widget-area ul {
diff --git a/wp-content/themes/twentythirteen/rtl.css b/wp-content/themes/twentythirteen/rtl.css
index 447d385c2b..5c5657649f 100644
--- a/wp-content/themes/twentythirteen/rtl.css
+++ b/wp-content/themes/twentythirteen/rtl.css
@@ -535,6 +535,12 @@ div.nav-menu > ul {
 	margin-right: 20px;
 }
 
+.widget_text ul,
+.widget_text ol {
+	padding-left: auto;
+	padding-right: 20px;
+}
+
 /**
  * 7.0 Footer
  * ----------------------------------------------------------------------------
diff --git a/wp-content/themes/twentythirteen/style.css b/wp-content/themes/twentythirteen/style.css
index de890f8434..72a65a318d 100644
--- a/wp-content/themes/twentythirteen/style.css
+++ b/wp-content/themes/twentythirteen/style.css
@@ -1228,27 +1228,37 @@ footer.entry-meta {
 
 /* Mediaelements */
 .hentry .mejs-mediaelement,
-.hentry .mejs-container .mejs-controls {
+.widget .mejs-mediaelement,
+.hentry .mejs-container .mejs-controls,
+.widget .mejs-container .mejs-controls {
 	background: #220e10;
 }
 
 .hentry .mejs-controls .mejs-time-rail .mejs-time-loaded,
-.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
+.widget .mejs-controls .mejs-time-rail .mejs-time-loaded,
+.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
+.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 	background: #fff;
 }
 
-.hentry .mejs-controls .mejs-time-rail .mejs-time-current {
+.hentry .mejs-controls .mejs-time-rail .mejs-time-current,
+.widget .mejs-controls .mejs-time-rail .mejs-time-current {
 	background: #ea9629;
 }
 
 .hentry .mejs-controls .mejs-time-rail .mejs-time-total,
-.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
+.widget .mejs-controls .mejs-time-rail .mejs-time-total,
+.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
+.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
 	background: #595959;
 }
 
 .hentry .mejs-controls .mejs-time-rail span,
+.widget .mejs-controls .mejs-time-rail span,
 .hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
-.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
+.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
+.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
+.widget .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 	border-radius: 0;
 }
 
@@ -2551,6 +2561,30 @@ footer.entry-meta {
 	background-color: transparent;
 }
 
+/* Text widget */
+
+.widget_text ul,
+.widget_text ol {
+	padding-left: 20px;
+	margin-bottom: 16px;
+}
+
+.widget_text li:last-child {
+	padding-bottom: 0;
+}
+
+.widget_text li > ul,
+.widget_text li > ol {
+	margin-bottom: 0;
+}
+
+.widget_text ul {
+	list-style: square;
+}
+
+.widget_text ol {
+	list-style: decimal;
+}
 
 /**
  * 7.0 Footer
diff --git a/wp-content/themes/twentytwelve/style.css b/wp-content/themes/twentytwelve/style.css
index 5686171e7c..a3e56b5898 100644
--- a/wp-content/themes/twentytwelve/style.css
+++ b/wp-content/themes/twentytwelve/style.css
@@ -642,11 +642,19 @@ section[role="banner"] {
 	margin-bottom: 24px;
 	margin-bottom: 1.714285714rem;
 }
-.widget-area .textwidget ul {
+.widget-area .textwidget ul,
+.widget-area .textwidget ol {
 	list-style: disc outside;
 	margin: 0 0 24px;
 	margin: 0 0 1.714285714rem;
 }
+.widget-area .textwidget li > ul,
+.widget-area .textwidget li > ol {
+	margin-bottom: 0;
+}
+.widget-area .textwidget ol {
+	list-style: decimal;
+}
 .widget-area .textwidget li {
 	margin-left: 36px;
 	margin-left: 2.571428571rem;
@@ -1443,7 +1451,6 @@ a.comment-edit-link:hover {
 	text-align: right;
 }
 
-
 /* =Plugins
 ----------------------------------------------- */
 
diff --git a/wp-includes/version.php b/wp-includes/version.php
index b98992ac0a..46bcd8bc15 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.8-beta2-40838';
+$wp_version = '4.8-beta2-40839';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
diff --git a/wp-includes/widgets/class-wp-widget-media-image.php b/wp-includes/widgets/class-wp-widget-media-image.php
index 63e3ef685f..22e891f02a 100644
--- a/wp-includes/widgets/class-wp-widget-media-image.php
+++ b/wp-includes/widgets/class-wp-widget-media-image.php
@@ -201,6 +201,7 @@ class WP_Widget_Media_Image extends WP_Widget_Media {
 			if ( 'custom' === $size || ! in_array( $size, array_merge( get_intermediate_image_sizes(), array( 'full' ) ), true ) ) {
 				$size = array( $instance['width'], $instance['height'] );
 			}
+			$image_attributes['class'] .= sprintf( ' attachment-%1$s size-%1$s', is_array( $size ) ? join( 'x', $size ) : $size );
 
 			$image = wp_get_attachment_image( $attachment->ID, $size, false, $image_attributes );