<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[44796] trunk: Accessibility: Replace media placeholder clickable divs with buttons.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/44796">44796</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/44796","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>afercia</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2019-03-05 17:49:00 +0000 (Tue, 05 Mar 2019)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Accessibility: Replace media placeholder clickable divs with buttons.
`<button>` elements are natively interactive, supported by any assistive technology, and must be used instead of non-semantic, non-accessible `<div>` elements.
Also, this change aligns the Media Widgets and the Customizer site icon and site logo controls with the design pattern used in the new Block Editor for similar controls.
Props ramonopoly, welcher, afercia.
Fixes <a href="https://core.trac.wordpress.org/ticket/43151">#43151</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscustomizecontrolscss">trunk/src/wp-admin/css/customize-controls.css</a></li>
<li><a href="#trunksrcwpadmincsswidgetscss">trunk/src/wp-admin/css/widgets.css</a></li>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizemediacontrolphp">trunk/src/wp-includes/customize/class-wp-customize-media-control.php</a></li>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizesiteiconcontrolphp">trunk/src/wp-includes/customize/class-wp-customize-site-icon-control.php</a></li>
<li><a href="#trunksrcwpincludeswidgetsclasswpwidgetmediagalleryphp">trunk/src/wp-includes/widgets/class-wp-widget-media-gallery.php</a></li>
<li><a href="#trunksrcwpincludeswidgetsclasswpwidgetmediaphp">trunk/src/wp-includes/widgets/class-wp-widget-media.php</a></li>
<li><a href="#trunktestsqunitindexhtml">trunk/tests/qunit/index.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscustomizecontrolscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/customize-controls.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-controls.css 2019-03-05 02:13:25 UTC (rev 44795)
+++ trunk/src/wp-admin/css/customize-controls.css 2019-03-05 17:49:00 UTC (rev 44796)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1379,6 +1379,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control .attachment-media-view .placeholder,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control .attachment-media-view .button-add-media,
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-header .placeholder {
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1390,6 +1391,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control .attachment-media-view .button-add-media {
+ cursor: pointer;
+ background-color: #edeff0;
+ color: #32373c;
+}
+
+.customize-control .attachment-media-view .button-add-media:hover {
+ background-color: #fbfbfc;
+}
+
+.customize-control .attachment-media-view .button-add-media:focus {
+ background-color: #fbfbfc;
+ border-style: solid;
+ border-color: #5b9dd9;
+ box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+ /* Only visible in Windows High Contrast mode */
+ outline: 2px solid transparent;
+ outline-offset: -2px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-header .inner {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span></span></pre></div>
<a id="trunksrcwpadmincsswidgetscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/widgets.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/widgets.css 2019-03-05 02:13:25 UTC (rev 44795)
+++ trunk/src/wp-admin/css/widgets.css 2019-03-05 17:49:00 UTC (rev 44796)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -84,6 +84,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 8px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-widget-control .attachment-media-view .button-add-media,
</ins><span class="cx" style="display: block; padding: 0 10px"> .media-widget-control .placeholder {
</span><span class="cx" style="display: block; padding: 0 10px"> border: 1px dashed #b4b9be;
</span><span class="cx" style="display: block; padding: 0 10px"> box-sizing: border-box;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -95,6 +96,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-widget-control .attachment-media-view .button-add-media {
+ cursor: pointer;
+ background-color: #edeff0;
+ color: #32373c;
+}
+
+.media-widget-control .attachment-media-view .button-add-media:hover {
+ background-color: #fbfbfc;
+}
+
+.media-widget-control .attachment-media-view .button-add-media:focus {
+ background-color: #fbfbfc;
+ border-style: solid;
+ border-color: #5b9dd9;
+ box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+ /* Only visible in Windows High Contrast mode */
+ outline: 2px solid transparent;
+ outline-offset: -2px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .media-widget-control .media-widget-preview {
</span><span class="cx" style="display: block; padding: 0 10px"> background: transparent;
</span><span class="cx" style="display: block; padding: 0 10px"> text-align: center;
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizemediacontrolphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/customize/class-wp-customize-media-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-media-control.php 2019-03-05 02:13:25 UTC (rev 44795)
+++ trunk/src/wp-includes/customize/class-wp-customize-media-control.php 2019-03-05 17:49:00 UTC (rev 44796)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -132,12 +132,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> public function content_template() {
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <#
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var selectButtonId = _.uniqueId( 'customize-media-control-button-' );
</del><span class="cx" style="display: block; padding: 0 10px"> var descriptionId = _.uniqueId( 'customize-media-control-description-' );
</span><span class="cx" style="display: block; padding: 0 10px"> var describedByAttr = data.description ? ' aria-describedby="' + descriptionId + '" ' : '';
</span><span class="cx" style="display: block; padding: 0 10px"> #>
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.label ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="customize-control-title" for="{{ selectButtonId }}">{{ data.label }}</label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="customize-control-title">{{ data.label }}</span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="customize-control-notifications-container"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.description ) { #>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -182,22 +181,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="actions">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.canUpload ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button type="button" class="button upload-button control-focus" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.change }}</button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="button upload-button control-focus" {{{ describedByAttr }}}>{{ data.button_labels.change }}</button>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } else { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="attachment-media-view">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="placeholder">
- {{ data.button_labels.placeholder }}
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.canUpload ) { #>
+ <button type="button" class="upload-button button-add-media" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
+ <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="actions">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.defaultAttachment ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button default-button">{{ data.button_labels['default'] }}</button>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# if ( data.canUpload ) { #>
- <button type="button" class="button upload-button" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
- <# } #>
</del><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -241,6 +237,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> case 'image':
</span><span class="cx" style="display: block; padding: 0 10px"> return array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'select' => __( 'Select image' ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'site_icon' => __( 'Select site icon' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> 'change' => __( 'Change image' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'default' => __( 'Default' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'remove' => __( 'Remove' ),
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizesiteiconcontrolphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/customize/class-wp-customize-site-icon-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-site-icon-control.php 2019-03-05 02:13:25 UTC (rev 44795)
+++ trunk/src/wp-includes/customize/class-wp-customize-site-icon-control.php 2019-03-05 17:49:00 UTC (rev 44796)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -47,14 +47,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function content_template() {
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label for="{{ data.settings['default'] }}-button">
- <# if ( data.label ) { #>
- <span class="customize-control-title">{{ data.label }}</span>
- <# } #>
- <# if ( data.description ) { #>
- <span class="description customize-control-description">{{{ data.description }}}</span>
- <# } #>
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.label ) { #>
+ <span class="customize-control-title">{{ data.label }}</span>
+ <# } #>
+ <# if ( data.description ) { #>
+ <span class="description customize-control-description">{{{ data.description }}}</span>
+ <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.attachment && data.attachment.id ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="attachment-media-view">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -74,22 +72,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="actions">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.canUpload ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['change']; ?></button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="button upload-button"><?php echo $this->button_labels['change']; ?></button>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } else { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="attachment-media-view">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="placeholder">
- <?php echo $this->button_labels['placeholder']; ?>
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.canUpload ) { #>
+ <button type="button" class="upload-button button-add-media"><?php echo $this->button_labels['site_icon']; ?></button>
+ <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="actions">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.defaultAttachment ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button default-button"><?php echo $this->button_labels['default']; ?></button>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# if ( data.canUpload ) { #>
- <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['select']; ?></button>
- <# } #>
</del><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span></span></pre></div>
<a id="trunksrcwpincludeswidgetsclasswpwidgetmediagalleryphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/widgets/class-wp-widget-media-gallery.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/widgets/class-wp-widget-media-gallery.php 2019-03-05 02:13:25 UTC (rev 44795)
+++ trunk/src/wp-includes/widgets/class-wp-widget-media-gallery.php 2019-03-05 17:49:00 UTC (rev 44796)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -228,7 +228,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </ul>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } else { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="attachment-media-view">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <p class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="placeholder button-add-media"><?php echo esc_html( $this->l10n['add_media'] ); ?></button>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span></span></pre></div>
<a id="trunksrcwpincludeswidgetsclasswpwidgetmediaphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/widgets/class-wp-widget-media.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/widgets/class-wp-widget-media.php 2019-03-05 02:13:25 UTC (rev 44795)
+++ trunk/src/wp-includes/widgets/class-wp-widget-media.php 2019-03-05 17:49:00 UTC (rev 44796)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -411,7 +411,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="media-widget-preview <?php echo esc_attr( $this->id_base ); ?>">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="attachment-media-view">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="select-media button-add-media not-selected">
+ <?php echo esc_html( $this->l10n['add_media'] ); ?>
+ </button>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <p class="media-widget-buttons">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -423,9 +425,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php echo esc_html( $this->l10n['replace_media'] ); ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </button>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php endif; ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button type="button" class="button select-media not-selected">
- <?php echo esc_html( $this->l10n['add_media'] ); ?>
- </button>
</del><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="media-widget-fields">
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span></span></pre></div>
<a id="trunktestsqunitindexhtml"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/index.html</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/index.html 2019-03-05 02:13:25 UTC (rev 44795)
+++ trunk/tests/qunit/index.html 2019-03-05 17:49:00 UTC (rev 44796)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -45,7 +45,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../build/wp-includes/js/mediaelement/mediaelement-and-player.min.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../build/wp-includes/js/mediaelement/wp-mediaelement.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- window._wpMediaViewsL10n = {"url":"URL","addMedia":"Add Media","search":"Search","select":"Select","cancel":"Cancel","update":"Update","replace":"Replace","remove":"Remove","back":"Back","selected":"%d selected","dragInfo":"Drag and drop to reorder media files.","uploadFilesTitle":"Upload Files","uploadImagesTitle":"Upload Images","mediaLibraryTitle":"Media Library","insertMediaTitle":"Insert Media","createNewGallery":"Create a new gallery","createNewPlaylist":"Create a new playlist","createNewVideoPlaylist":"Create a new video playlist
","returnToLibrary":"\u2190 Return to library","allMediaItems":"All media items","allDates":"All dates","noItemsFound":"No items found.","insertIntoPost":"Insert into post","unattached":"Unattached","trash":"Trash","uploadedToThisPost":"Uploaded to this post","warnDelete":"You are about to permanently delete this item.\nThis will remove it from your site.\n 'Cancel' to stop, 'OK' to delete.","warnBulkDelete":"You are about to permanently delete these items.\nThis will remove them from your site.\n 'Cancel' to stop, 'OK' to delete.","warnBulkTrash":"You are about to trash these items.\n 'Cancel' to stop, 'OK' to delete.","bulkSelect":"Bulk Select","cancelSelection":"Cancel Selection","trashSelected":"Trash S
elected","untrashSelected":"Untrash Selected","deleteSelected":"Delete Selected","deletePermanently":"Delete Permanently","apply":"Apply","filterByDate":"Filter by date","filterByType":"Filter by type","searchMediaLabel":"Search Media","searchMediaPlaceholder":"Search media items...","noMedia":"No media files found.","attachmentDetails":"Attachment Details","insertFromUrlTitle":"Insert from URL","setFeaturedImageTitle":"Featured Image","setFeaturedImage":"Set featured image","createGalleryTitle":"Create Gallery","editGalleryTitle":"Edit Gallery","cancelGalleryTitle":"\u2190 Cancel Gallery","insertGallery":"Insert gallery","updateGallery&qu
ot;:"Update gallery","addToGallery":"Add to gallery","addToGalleryTitle":"Add to Gallery","reverseOrder":"Reverse order","imageDetailsTitle":"Image Details","imageReplaceTitle":"Replace Image","imageDetailsCancel":"Cancel Edit","editImage":"Edit Image","chooseImage":"Choose Image","selectAndCrop":"Select and Crop","skipCropping":"Skip Cropping","cropImage":"Crop Image","cropYourImage":"Crop your image","cropping":"Cropping\u2026","suggestedDimensions":"Suggested image dimensions:","cropError":"There has been an error cropping your image.","audioDetailsTitle":"Audio Details","audioReplaceTitle":"Replace Audio","audioAddSourceTitle"
;:"Add Audio Source","audioDetailsCancel":"Cancel Edit","videoDetailsTitle":"Video Details","videoReplaceTitle":"Replace Video","videoAddSourceTitle":"Add Video Source","videoDetailsCancel":"Cancel Edit","videoSelectPosterImageTitle":"Select Poster Image","videoAddTrackTitle":"Add Subtitles","playlistDragInfo":"Drag and drop to reorder tracks.","createPlaylistTitle":"Create Audio Playlist","editPlaylistTitle":"Edit Audio Playlist","cancelPlaylistTitle":"\u2190 Cancel Audio Playlist","insertPlaylist":"Insert audio playlist","updatePlaylist":"Update audio playlist","addToPlaylist":"Add to audio playlist","addToPlaylistTitle":"Add to Audio Playlist","videoPlaylistDragInfo"
;:"Drag and drop to reorder videos.","createVideoPlaylistTitle":"Create Video Playlist","editVideoPlaylistTitle":"Edit Video Playlist","cancelVideoPlaylistTitle":"\u2190 Cancel Video Playlist","insertVideoPlaylist":"Insert video playlist","updateVideoPlaylist":"Update video playlist","addToVideoPlaylist":"Add to video playlist","addToVideoPlaylistTitle":"Add to Video Playlist","settings":{"tabs":[],"tabUrl":"http:\/\/src.wordpress-develop.dev\/wp-admin\/media-upload.php?chromeless=1","mimeTypes":{"image":"Images","audio":"Audio","video":"Video"},"captions":true,"nonce":{"sendToEditor":"9585d11de6"},"post":{"id":0},"defaultProps":{"link":"none&q
uot;,"align":"","size":""},"attachmentCounts":{"audio":1,"video":1},"embedExts":["mp3","ogg","wma","m4a","wav","mp4","m4v","webm","ogv","wmv","flv"],"embedMimes":{"mp3":"audio\/mpeg","ogg":"audio\/ogg","wma":"audio\/x-ms-wma","m4a":"audio\/mpeg","wav":"audio\/wav","mp4":"video\/mp4","m4v":"video\/mp4","webm":"video\/webm","ogv":"video\/ogg","wmv":"video\/x-ms-wmv","flv":"video\/x-flv"},"contentWidth":525,"months":[{"year":"2017","month":"4","text":"April 2017"}],"mediaTrash":0}};
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ window._wpMediaViewsL10n = {"url":"URL","addMedia":"Add Media","search":"Search","select":"Select","cancel":"Cancel","update":"Update","replace":"Replace","remove":"Remove","back":"Back","selected":"%d selected","dragInfo":"Drag and drop to reorder media files.","uploadFilesTitle":"Upload Files","uploadImagesTitle":"Upload Images","mediaLibraryTitle":"Media Library","insertMediaTitle":"Add Media","createNewGallery":"Create a new gallery","createNewPlaylist":"Create a new playlist","createNewVideoPlaylist":"Create a new video playlist&quo
t;,"returnToLibrary":"\u2190 Return to library","allMediaItems":"All media items","allDates":"All dates","noItemsFound":"No items found.","insertIntoPost":"Insert into post","unattached":"Unattached","mine":"Mine","trash":"Trash","uploadedToThisPost":"Uploaded to this post","warnDelete":"You are about to permanently delete this item from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkDelete":"You are about to permanently delete these items from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkTrash":"You are about to trash these items.\n 'Cancel' to stop, 'OK' to delete.","bulkSelect":"Bulk Select","cancelSelection":"Cancel Selection
","trashSelected":"Trash Selected","untrashSelected":"Untrash Selected","deleteSelected":"Delete Selected","deletePermanently":"Delete Permanently","apply":"Apply","filterByDate":"Filter by date","filterByType":"Filter by type","searchMediaLabel":"Search Media","searchMediaPlaceholder":"Search media items...","noMedia":"No media files found.","attachmentDetails":"Attachment Details","insertFromUrlTitle":"Insert from URL","setFeaturedImageTitle":"Featured Image","setFeaturedImage":"Set featured image","createGalleryTitle":"Create Gallery","editGalleryTitle":"Edit Gallery","cancelGalleryTitle":"\u2190 Cancel Gallery","insertGallery":&qu
ot;Insert gallery","updateGallery":"Update gallery","addToGallery":"Add to gallery","addToGalleryTitle":"Add to Gallery","reverseOrder":"Reverse order","imageDetailsTitle":"Image Details","imageReplaceTitle":"Replace Image","imageDetailsCancel":"Cancel Edit","editImage":"Edit Image","chooseImage":"Choose Image","selectAndCrop":"Select and Crop","skipCropping":"Skip Cropping","cropImage":"Crop Image","cropYourImage":"Crop your image","cropping":"Cropping\u2026","suggestedDimensions":"Suggested image dimensions: %1$s by %2$s pixels.","cropError":"There has been an error cropping your image.","audioDetailsTitle":"Audio Details","audioReplaceT
itle":"Replace Audio","audioAddSourceTitle":"Add Audio Source","audioDetailsCancel":"Cancel Edit","videoDetailsTitle":"Video Details","videoReplaceTitle":"Replace Video","videoAddSourceTitle":"Add Video Source","videoDetailsCancel":"Cancel Edit","videoSelectPosterImageTitle":"Select Poster Image","videoAddTrackTitle":"Add Subtitles","playlistDragInfo":"Drag and drop to reorder tracks.","createPlaylistTitle":"Create Audio Playlist","editPlaylistTitle":"Edit Audio Playlist","cancelPlaylistTitle":"\u2190 Cancel Audio Playlist","insertPlaylist":"Insert audio playlist","updatePlaylist":"Update audio playlist","addToPlaylist":"Add to audio playlist","addToPlaylistTitle"
:"Add to Audio Playlist","videoPlaylistDragInfo":"Drag and drop to reorder videos.","createVideoPlaylistTitle":"Create Video Playlist","editVideoPlaylistTitle":"Edit Video Playlist","cancelVideoPlaylistTitle":"\u2190 Cancel Video Playlist","insertVideoPlaylist":"Insert video playlist","updateVideoPlaylist":"Update video playlist","addToVideoPlaylist":"Add to video playlist","addToVideoPlaylistTitle":"Add to Video Playlist","settings":{"tabs":[],"tabUrl":"http:\/\/src.wordpress-develop.test\/wp-admin\/media-upload.php?chromeless=1","mimeTypes":{"image":"Images","audio":"Audio","video":"Video"},"captions":true,"nonce":{"sendToEditor":"68dd6db760"},"post":{"
;id":0},"defaultProps":{"link":"none","align":"","size":""},"attachmentCounts":{"audio":1,"video":1},"oEmbedProxyUrl":"http:\/\/src.wordpress-develop.test\/wp-json\/oembed\/1.0\/proxy","embedExts":["mp3","ogg","flac","m4a","wav","mp4","m4v","webm","ogv","flv"],"embedMimes":{"mp3":"audio\/mpeg","ogg":"audio\/ogg","flac":"audio\/flac","m4a":"audio\/mpeg","wav":"audio\/wav","mp4":"video\/mp4","m4v":"video\/mp4","webm":"video\/webm","ogv":"video\/ogg","flv":"video\/x-flv"},"contentWidth":640,"months":[{"year":"2018&
quot;,"month":"11","text":"November 2018"},{"year":"2018","month":"10","text":"October 2018"},{"year":"2018","month":"7","text":"July 2018"},{"year":"2014","month":"1","text":"January 2014"},{"year":"2013","month":"12","text":"December 2013"},{"year":"2013","month":"9","text":"September 2013"},{"year":"2013","month":"4","text":"April 2013"},{"year":"2013","month":"3","text":"March 2013"},{"year":"2012","month":"7","text":"July 2012"},{"year":"2012",&quo
t;month":"6","text":"June 2012"},{"year":"2011","month":"7","text":"July 2011"},{"year":"2011","month":"1","text":"January 2011"}],"mediaTrash":0}};
</ins><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../build/wp-includes/js/media-views.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../build/wp-includes/js/media-editor.js"></script>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -588,33 +588,32 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </div><!-- #available-widgets -->
</span><span class="cx" style="display: block; padding: 0 10px"> </div><!-- #widgets-left -->
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <script type="text/html" id="tmpl-widget-media-media_image-control">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <script type="text/html" id="tmpl-widget-media-media_image-control">
</ins><span class="cx" style="display: block; padding: 0 10px"> <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
</span><span class="cx" style="display: block; padding: 0 10px"> <p>
</span><span class="cx" style="display: block; padding: 0 10px"> <label for="{{ elementIdPrefix }}title">Title:</label>
</span><span class="cx" style="display: block; padding: 0 10px"> <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
</span><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="media-widget-preview">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="media-widget-preview media_image">
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="attachment-media-view">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="placeholder">No image selected</div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="select-media button-add-media not-selected">
+ Add Image </button>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <p class="media-widget-buttons">
</span><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button edit-media selected">
</span><span class="cx" style="display: block; padding: 0 10px"> Edit Image </button>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button type="button" class="button change-media select-media selected">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="button change-media select-media selected">
</ins><span class="cx" style="display: block; padding: 0 10px"> Replace Image </button>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button type="button" class="button select-media not-selected">
- Add Image </button>
- </p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </p>
+ <div class="media-widget-fields">
+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <script type="text/html" id="tmpl-wp-media-widget-image-preview">
- <#
- var describedById = 'describedBy-' + String( Math.random() );
- #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ <script type="text/html" id="tmpl-wp-media-widget-image-preview">
</ins><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.error && 'missing_attachment' === data.error ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="notice notice-error notice-alt notice-missing-attachment">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <p>We can’t find that image. Check your <a href="http://src.wordpress-develop.dev/wp-admin/upload.php">media library</a> and make sure it wasn’t deleted.</p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <p>We can’t find that image. Check your <a href="http://src.wordpress-develop.test/wp-admin/upload.php">media library</a> and make sure it wasn’t deleted.</p>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } else if ( data.error ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="notice notice-error notice-alt">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -621,50 +620,55 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <p>Unable to preview media due to an unknown error.</p>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } else if ( data.url ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <img class="attachment-thumb" src="{{ data.url }}" draggable="false" alt="{{ data.alt }}" <# if ( ! data.alt && data.currentFilename ) { #> aria-describedby="{{ describedById }}" <# } #> />
- <# if ( ! data.alt && data.currentFilename ) { #>
- <p class="hidden" id="{{ describedById }}">Current image: {{ data.currentFilename }}</p>
- <# } #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <img class="attachment-thumb" src="{{ data.url }}" draggable="false" alt="{{ data.alt }}"
+ <# if ( ! data.alt && data.currentFilename ) { #>
+ aria-label="
+ The current image has no alternative text. The file name is: {{ data.currentFilename }} "
+ <# } #>
+ />
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <script type="text/html" id="tmpl-widget-media-media_video-control">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ <script type="text/html" id="tmpl-widget-media-media_video-control">
</ins><span class="cx" style="display: block; padding: 0 10px"> <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
</span><span class="cx" style="display: block; padding: 0 10px"> <p>
</span><span class="cx" style="display: block; padding: 0 10px"> <label for="{{ elementIdPrefix }}title">Title:</label>
</span><span class="cx" style="display: block; padding: 0 10px"> <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
</span><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="media-widget-preview">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="media-widget-preview media_video">
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="attachment-media-view">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="placeholder">No video selected</div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="select-media button-add-media not-selected">
+ Add Video </button>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <p class="media-widget-buttons">
</span><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button edit-media selected">
</span><span class="cx" style="display: block; padding: 0 10px"> Edit Video </button>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button type="button" class="button change-media select-media selected">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="button change-media select-media selected">
</ins><span class="cx" style="display: block; padding: 0 10px"> Replace Video </button>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button type="button" class="button select-media not-selected">
- Add Video </button>
- </p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </p>
+ <div class="media-widget-fields">
+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <script type="text/html" id="tmpl-wp-media-widget-video-preview">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ <script type="text/html" id="tmpl-wp-media-widget-video-preview">
</ins><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.error && 'missing_attachment' === data.error ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="notice notice-error notice-alt notice-missing-attachment">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <p>We can’t find that video. Check your <a href="http://src.wordpress-develop.dev/wp-admin/upload.php">media library</a> and make sure it wasn’t deleted.</p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <p>We can’t find that video. Check your <a href="http://src.wordpress-develop.test/wp-admin/upload.php">media library</a> and make sure it wasn’t deleted.</p>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } else if ( data.error && 'unsupported_file_type' === data.error ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="notice notice-error notice-alt notice-missing-attachment">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <p>Sorry, we can’t display the video file type selected. Please select a supported video file (<code>.mp4</code>, <code>.m4v</code>, <code>.webm</code>, <code>.ogv</code>, <code>.wmv</code>, <code>.flv</code>) or stream (YouTube or Vimeo) instead.</p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <p>Sorry, we can’t load the video at the supplied URL. Please check that the URL is for a supported video file (<code>.mp4</code>, <code>.m4v</code>, <code>.webm</code>, <code>.ogv</code>, <code>.flv</code>) or stream (e.g. YouTube and Vimeo).</p>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } else if ( data.error ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="notice notice-error notice-alt">
</span><span class="cx" style="display: block; padding: 0 10px"> <p>Unable to preview media due to an unknown error.</p>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# } else if ( data.is_hosted_embed && data.model.poster ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# } else if ( data.is_oembed && data.model.poster ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px"> <a href="{{ data.model.src }}" target="_blank" class="media-widget-video-link">
</span><span class="cx" style="display: block; padding: 0 10px"> <img src="{{ data.model.poster }}" />
</span><span class="cx" style="display: block; padding: 0 10px"> </a>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# } else if ( data.is_hosted_embed ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# } else if ( data.is_oembed ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px"> <a href="{{ data.model.src }}" target="_blank" class="media-widget-video-link no-poster">
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="dashicons dashicons-format-video"></span>
</span><span class="cx" style="display: block; padding: 0 10px"> </a>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -688,7 +692,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> h = Math.ceil( ( data.model.height * w ) / data.model.width );
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> h = data.model.height;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( w ) {
</span><span class="cx" style="display: block; padding: 0 10px"> w_rule = 'width: ' + w + 'px; ';
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -708,15 +712,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> class="wp-video-shortcode {{ classes.join( ' ' ) }}"
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( w ) { #>width="{{ w }}"<# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( h ) { #>height="{{ h }}"<# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <#
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <#
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! _.isUndefined( data.model.poster ) && data.model.poster ) {
</span><span class="cx" style="display: block; padding: 0 10px"> #> poster="{{ data.model.poster }}"<#
</span><span class="cx" style="display: block; padding: 0 10px"> } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- preload="{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}"<#
- if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ preload ="{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}"
+ <#
+ if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> #> autoplay<#
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> #> loop<#
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> #>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -731,96 +736,97 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <# }
</span><span class="cx" style="display: block; padding: 0 10px"> } #>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# if ( data.model.mp4 ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.model.mp4 ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px"> <source src="{{ data.model.mp4 }}" type="{{ settings.embedMimes[ 'mp4' ] }}" />
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# if ( data.model.m4v ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.model.m4v ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px"> <source src="{{ data.model.m4v }}" type="{{ settings.embedMimes[ 'm4v' ] }}" />
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# if ( data.model.webm ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.model.webm ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px"> <source src="{{ data.model.webm }}" type="{{ settings.embedMimes[ 'webm' ] }}" />
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# if ( data.model.ogv ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.model.ogv ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px"> <source src="{{ data.model.ogv }}" type="{{ settings.embedMimes[ 'ogv' ] }}" />
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# if ( data.model.wmv ) { #>
- <source src="{{ data.model.wmv }}" type="{{ settings.embedMimes[ 'wmv' ] }}" />
- <# } #>
- <# if ( data.model.flv ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.model.flv ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px"> <source src="{{ data.model.flv }}" type="{{ settings.embedMimes[ 'flv' ] }}" />
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> {{{ data.model.content }}}
</span><span class="cx" style="display: block; padding: 0 10px"> </video>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# } #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <script type="text/html" id="tmpl-widget-media-media_audio-control">
- <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
- <p>
- <label for="{{ elementIdPrefix }}title">Title:</label>
- <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
- </p>
- <div class="media-widget-preview">
- <div class="attachment-media-view">
- <div class="placeholder">No audio selected</div>
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ <script type="text/html" id="tmpl-widget-media-media_audio-control">
+ <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
+ <p>
+ <label for="{{ elementIdPrefix }}title">Title:</label>
+ <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
+ </p>
+ <div class="media-widget-preview media_audio">
+ <div class="attachment-media-view">
+ <button type="button" class="select-media button-add-media not-selected">
+ Add Audio </button>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <p class="media-widget-buttons">
- <button type="button" class="button edit-media selected">
- Edit Audio </button>
- <button type="button" class="button change-media select-media selected">
- Replace Audio </button>
- <button type="button" class="button select-media not-selected">
- Add Audio </button>
- </p>
- </script>
- <script type="text/html" id="tmpl-wp-media-widget-audio-preview">
- <# if ( data.error && 'missing_attachment' === data.error ) { #>
- <div class="notice notice-error notice-alt notice-missing-attachment">
- <p>We can’t find that audio file. Check your <a href="http://src.wordpress-develop.dev/wp-admin/upload.php">media library</a> and make sure it wasn’t deleted.</p>
- </div>
- <# } else if ( data.error ) { #>
- <div class="notice notice-error notice-alt">
- <p>Unable to preview media due to an unknown error.</p>
- </div>
- <# } else if ( data.model && data.model.src ) { #>
- <audio style="visibility: hidden"
- controls
- class="wp-audio-shortcode"
- width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
- preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
- <#
- if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
- #> autoplay<#
- }
- if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
- #> loop<#
- }
- #>
- >
- <# if ( ! _.isEmpty( data.model.src ) ) { #>
- <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
- <# } #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </div>
+ <p class="media-widget-buttons">
+ <button type="button" class="button edit-media selected">
+ Edit Audio </button>
+ <button type="button" class="button change-media select-media selected">
+ Replace Audio </button>
+ </p>
+ <div class="media-widget-fields">
+ </div>
+ </script>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# if ( ! _.isEmpty( data.model.mp3 ) ) { #>
- <source src="{{ data.model.mp3 }}" type="{{ wp.media.view.settings.embedMimes[ 'mp3' ] }}" />
- <# } #>
- <# if ( ! _.isEmpty( data.model.ogg ) ) { #>
- <source src="{{ data.model.ogg }}" type="{{ wp.media.view.settings.embedMimes[ 'ogg' ] }}" />
- <# } #>
- <# if ( ! _.isEmpty( data.model.wma ) ) { #>
- <source src="{{ data.model.wma }}" type="{{ wp.media.view.settings.embedMimes[ 'wma' ] }}" />
- <# } #>
- <# if ( ! _.isEmpty( data.model.m4a ) ) { #>
- <source src="{{ data.model.m4a }}" type="{{ wp.media.view.settings.embedMimes[ 'm4a' ] }}" />
- <# } #>
- <# if ( ! _.isEmpty( data.model.wav ) ) { #>
- <source src="{{ data.model.wav }}" type="{{ wp.media.view.settings.embedMimes[ 'wav' ] }}" />
- <# } #>
- </audio>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <script type="text/html" id="tmpl-wp-media-widget-audio-preview">
+ <# if ( data.error && 'missing_attachment' === data.error ) { #>
+ <div class="notice notice-error notice-alt notice-missing-attachment">
+ <p>We can’t find that audio file. Check your <a href="http://src.wordpress-develop.test/wp-admin/upload.php">media library</a> and make sure it wasn’t deleted.</p>
+ </div>
+ <# } else if ( data.error ) { #>
+ <div class="notice notice-error notice-alt">
+ <p>Unable to preview media due to an unknown error.</p>
+ </div>
+ <# } else if ( data.model && data.model.src ) { #>
+ <audio style="visibility: hidden"
+ controls
+ class="wp-audio-shortcode"
+ width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
+ preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
+ <#
+ if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+ #> autoplay<#
+ }
+ if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+ #> loop<#
+ }
+ #>
+>
+ <# if ( ! _.isEmpty( data.model.src ) ) { #>
+ <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
+ <# } #>
+
+ <# if ( ! _.isEmpty( data.model.mp3 ) ) { #>
+ <source src="{{ data.model.mp3 }}" type="{{ wp.media.view.settings.embedMimes[ 'mp3' ] }}" />
+ <# } #>
+ <# if ( ! _.isEmpty( data.model.ogg ) ) { #>
+ <source src="{{ data.model.ogg }}" type="{{ wp.media.view.settings.embedMimes[ 'ogg' ] }}" />
+ <# } #>
+ <# if ( ! _.isEmpty( data.model.flac ) ) { #>
+ <source src="{{ data.model.flac }}" type="{{ wp.media.view.settings.embedMimes[ 'flac' ] }}" />
+ <# } #>
+ <# if ( ! _.isEmpty( data.model.m4a ) ) { #>
+ <source src="{{ data.model.m4a }}" type="{{ wp.media.view.settings.embedMimes[ 'm4a' ] }}" />
+ <# } #>
+ <# if ( ! _.isEmpty( data.model.wav ) ) { #>
+ <source src="{{ data.model.wav }}" type="{{ wp.media.view.settings.embedMimes[ 'wav' ] }}" />
+ <# } #>
+ </audio>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </script>
- <script type="text/html" id="tmpl-media-frame">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </script>
+
+ <script type="text/html" id="tmpl-media-frame">
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="media-frame-menu"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="media-frame-title"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="media-frame-router"></div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -835,53 +841,63 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <label for="{{ elementIdPrefix }}title">Title:</label>
</span><span class="cx" style="display: block; padding: 0 10px"> <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
</span><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="media-widget-preview">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="media-widget-preview media_gallery">
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="attachment-media-view">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="placeholder">No images selected</div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="select-media button-add-media not-selected">
+ Add Images </button>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </div>
- <p class="media-widget-buttons">
- <button type="button" class="button edit-media selected">
- Edit Gallery </button>
- <button type="button" class="button change-media select-media selected">
- Replace Media </button>
- <button type="button" class="button select-media not-selected">
- Add Media </button>
- </p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </div>
+ <p class="media-widget-buttons">
+ <button type="button" class="button edit-media selected">
+ Edit Gallery </button>
+ </p>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="media-widget-fields">
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
- <# var describedById = 'describedBy-' + String( Math.random() ); #>
- <# data.attachments = data.attachments ? JSON.parse(data.attachments) : ''; #>
- <# if ( Array.isArray( data.attachments ) && data.attachments.length ) { #>
- <div class="gallery gallery-columns-{{ data.columns }}">
- <# _.each( data.attachments, function( attachment, index ) { #>
- <dl class="gallery-item">
- <dt class="gallery-icon">
- <# if ( attachment.sizes.thumbnail ) { #>
- <img src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}" alt="" />
- <# } else { #>
- <img src="{{ attachment.url }}" alt="" />
- <# } #>
- </dt>
- <# if ( attachment.caption ) { #>
- <dd class="wp-caption-text gallery-caption">
- {{{ data.verifyHTML( attachment.caption ) }}}
- </dd>
- <# } #>
- </dl>
- <# if ( index % data.columns === data.columns - 1 ) { #>
- <br style="clear: both;">
- <# } #>
- <# } ); #>
- </div>
- <# } else { #>
- <div class="attachment-media-view">
- <p class="placeholder">No images selected</p>
- </div>
- <# } #>
- </script>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ <script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
+ <#
+ var ids = _.filter( data.ids, function( id ) {
+ return ( id in data.attachments );
+ } );
+ #>
+ <# if ( ids.length ) { #>
+ <ul class="gallery media-widget-gallery-preview" role="list">
+ <# _.each( ids, function( id, index ) { #>
+ <# var attachment = data.attachments[ id ]; #>
+ <# if ( index < 6 ) { #>
+ <li class="gallery-item">
+ <div class="gallery-icon">
+ <img alt="{{ attachment.alt }}"
+ <# if ( index === 5 && data.ids.length > 6 ) { #> aria-hidden="true" <# } #>
+ <# if ( attachment.sizes.thumbnail ) { #>
+ src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}"
+ <# } else { #>
+ src="{{ attachment.url }}"
+ <# } #>
+ <# if ( ! attachment.alt && attachment.filename ) { #>
+ aria-label="
+ The current image has no alternative text. The file name is: {{ attachment.filename }} "
+ <# } #>
+ />
+ <# if ( index === 5 && data.ids.length > 6 ) { #>
+ <div class="gallery-icon-placeholder">
+ <p class="gallery-icon-placeholder-text" aria-label="
+ Additional images added to this gallery: {{ data.ids.length - 5 }} ">+{{ data.ids.length - 5 }}</p>
+ </div>
+ <# } #>
+ </div>
+ </li>
+ <# } #>
+ <# } ); #>
+ </ul>
+ <# } else { #>
+ <div class="attachment-media-view">
+ <button type="button" class="placeholder button-add-media">Add Images</button>
+ </div>
+ <# } #>
+ </script>
+
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-customize-control-date_time-content">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <# _.defaults( data, {"settings":[],"type":"date_time","priority":10,"active":true,"section":"","content":"<li id=\"customize-control-temp\" class=\"customize-control customize-control-date_time\">\n\t\t\t\t\t<\/li>","label":"","description":"","instanceNumber":73,"maxYear":9999,"minYear":1000,"allowPastDate":true,"twelveHourFormat":true,"includeTime":true,"defaultValue":null,"month_choices":{"1":{"text":"1-Jan","value":1},"2":{"text":"2-Feb","value":2},"3":{"text":"3-Mar","value":3},"4":{"text":"4-Apr","value":4},"
5":{"text":"5-May","value":5},"6":{"text":"6-Jun","value":6},"7":{"text":"7-Jul","value":7},"8":{"text":"8-Aug","value":8},"9":{"text":"9-Sep","value":9},"10":{"text":"10-Oct","value":10},"11":{"text":"11-Nov","value":11},"12":{"text":"12-Dec","value":12}}} ); #>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2202,6 +2218,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <img id="preview-app-icon" src="{{ data.url }}" alt="Preview as an app icon"/>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> </div><!-- end widget templates -->
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../build/wp-includes/js/tinymce/tinymce.min.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../build/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js"></script>
</span></span></pre>
</div>
</div>
</body>
</html>