<!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>[45499] trunk/src: Accessibility: Improve accessibility of all the media views form controls.</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/45499">45499</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/45499","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-06-07 20:43:26 +0000 (Fri, 07 Jun 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: Improve accessibility of all the media views form controls.
- changes the media views form controls to have explicitly associated labels with for/id attributes
- adds a few missing labels / aria-labels
- improves a few existing labels / aria-labels
- improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes
- improves the image custom size input fields and their labelling
- adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies
- swaps the columns source order in the image details template, to make visual and DOM order match
- swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match
- gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right
- merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload")
- makes the "upload-ui" consistent across the media views
- hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner
- adds comments to all the media templates to clarify their usage
- slightly increases vertical spacing between form fields in the media sidebar
- removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4
- removes some CSS still targeting Internet Explorer 7 and 8
Fixes <a href="https://core.trac.wordpress.org/ticket/47141">#47141</a>.
Fixes <a href="https://core.trac.wordpress.org/ticket/47122">#47122</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcjs_enqueuesvendormediaelementwpmediaelementcss">trunk/src/js/_enqueues/vendor/mediaelement/wp-mediaelement.css</a></li>
<li><a href="#trunksrcjsmediaviewsembedurljs">trunk/src/js/media/views/embed/url.js</a></li>
<li><a href="#trunksrcjsmediaviewsframeimagedetailsjs">trunk/src/js/media/views/frame/image-details.js</a></li>
<li><a href="#trunksrcjsmediaviewssettingsattachmentdisplayjs">trunk/src/js/media/views/settings/attachment-display.js</a></li>
<li><a href="#trunksrcwpadmincssmediacss">trunk/src/wp-admin/css/media.css</a></li>
<li><a href="#trunksrcwpadminincludesimageeditphp">trunk/src/wp-admin/includes/image-edit.php</a></li>
<li><a href="#trunksrcwpadminincludesmediaphp">trunk/src/wp-admin/includes/media.php</a></li>
<li><a href="#trunksrcwpincludescssbuttonscss">trunk/src/wp-includes/css/buttons.css</a></li>
<li><a href="#trunksrcwpincludescssmediaviewscss">trunk/src/wp-includes/css/media-views.css</a></li>
<li><a href="#trunksrcwpincludesmediatemplatephp">trunk/src/wp-includes/media-template.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcjs_enqueuesvendormediaelementwpmediaelementcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/_enqueues/vendor/mediaelement/wp-mediaelement.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/_enqueues/vendor/mediaelement/wp-mediaelement.css 2019-06-07 20:23:46 UTC (rev 45498)
+++ trunk/src/js/_enqueues/vendor/mediaelement/wp-mediaelement.css 2019-06-07 20:43:26 UTC (rev 45499)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -67,9 +67,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: visible;
</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">-.media-embed-details .embed-media-settings .setting span {
- max-width: 400px;
- width: auto;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-embed-details .embed-media-settings .setting span:not(.button-group) {
+ max-width: 400px; /* Back-compat for pre-5.3 */
+ width: auto; /* Back-compat for pre-5.3 */
</ins><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"> .media-embed-details .embed-media-settings .checkbox-setting span {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -94,7 +94,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"> .media-embed-details .setting .remove-setting {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 5px 0;
</ins><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"> .media-embed-details .setting a:hover {
</span></span></pre></div>
<a id="trunksrcjsmediaviewsembedurljs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/media/views/embed/url.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/media/views/embed/url.js 2019-06-07 20:23:46 UTC (rev 45498)
+++ trunk/src/js/media/views/embed/url.js 2019-06-07 20:43:26 UTC (rev 45499)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,5 +1,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var View = wp.media.View,
</span><span class="cx" style="display: block; padding: 0 10px"> $ = jQuery,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ l10n = wp.media.view.l10n,
</ins><span class="cx" style="display: block; padding: 0 10px"> EmbedUrl;
</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">@@ -13,17 +14,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @augments Backbone.View
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> EmbedUrl = View.extend(/** @lends wp.media.view.EmbedUrl.prototype */{
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- tagName: 'label',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ tagName: 'span',
</ins><span class="cx" style="display: block; padding: 0 10px"> className: 'embed-url',
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> events: {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'input': 'url',
- 'keyup': 'url',
- 'change': 'url'
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'input': 'url'
</ins><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"> initialize: function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- this.$input = $('<input id="embed-url-field" type="url" />').val( this.model.get('url') );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ this.$input = $( '<input id="embed-url-field" type="url" />' )
+ .attr( 'aria-label', l10n.insertFromUrlTitle )
+ .val( this.model.get('url') );
</ins><span class="cx" style="display: block; padding: 0 10px"> this.input = this.$input[0];
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> this.spinner = $('<span class="spinner" />')[0];
</span></span></pre></div>
<a id="trunksrcjsmediaviewsframeimagedetailsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/media/views/frame/image-details.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/media/views/frame/image-details.js 2019-06-07 20:23:46 UTC (rev 45498)
+++ trunk/src/js/media/views/frame/image-details.js 2019-06-07 20:43:26 UTC (rev 45499)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -134,7 +134,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> items: {
</span><span class="cx" style="display: block; padding: 0 10px"> back: {
</span><span class="cx" style="display: block; padding: 0 10px"> text: l10n.back,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- priority: 20,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ priority: 80,
</ins><span class="cx" style="display: block; padding: 0 10px"> click: function() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( previous ) {
</span><span class="cx" style="display: block; padding: 0 10px"> frame.setState( previous );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -147,7 +147,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> replace: {
</span><span class="cx" style="display: block; padding: 0 10px"> style: 'primary',
</span><span class="cx" style="display: block; padding: 0 10px"> text: l10n.replace,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- priority: 80,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ priority: 20,
</ins><span class="cx" style="display: block; padding: 0 10px"> requires: { selection: true },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> click: function() {
</span></span></pre></div>
<a id="trunksrcjsmediaviewssettingsattachmentdisplayjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/media/views/settings/attachment-display.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/media/views/settings/attachment-display.js 2019-06-07 20:23:46 UTC (rev 45498)
+++ trunk/src/js/media/views/settings/attachment-display.js 2019-06-07 20:43:26 UTC (rev 45499)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -66,7 +66,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> attachment = this.options.attachment;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( 'none' === linkTo || 'embed' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $input.addClass( 'hidden' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $input.closest( '.setting' ).addClass( 'hidden' );
</ins><span class="cx" style="display: block; padding: 0 10px"> return;
</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">@@ -82,7 +82,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $input.prop( 'readonly', 'custom' !== linkTo );
</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">- $input.removeClass( 'hidden' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $input.closest( '.setting' ).removeClass( 'hidden' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // If the input is visible, focus and select its contents.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! wp.media.isTouchDevice && $input.is(':visible') ) {
</span></span></pre></div>
<a id="trunksrcwpadmincssmediacss"></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/media.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/media.css 2019-06-07 20:23:46 UTC (rev 45498)
+++ trunk/src/wp-admin/css/media.css 2019-06-07 20:43:26 UTC (rev 45499)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -374,12 +374,11 @@
</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"> .drag-drop .drag-drop-inside {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 70px auto 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 60px auto 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> width: 250px;
</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"> .drag-drop-inside p {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #a0a5aa;
</del><span class="cx" style="display: block; padding: 0 10px"> font-size: 14px;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 5px 0;
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -480,7 +479,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: #c00;
</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">-.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3, /* Back-compat for pre-4.4 */
</del><span class="cx" style="display: block; padding: 0 10px"> .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1031,7 +1029,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</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">-#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
</del><span class="cx" style="display: block; padding: 0 10px"> #poststuff .imgedit-group-top h2 {
</span><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1109,6 +1106,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 8px 0;
</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">+.imgedit-save-target legend {
+ font-weight: 600;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .imgedit-group {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 8px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 10px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1126,7 +1127,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 7px;
</span><span class="cx" style="display: block; padding: 0 10px"> text-align: center;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- vertical-align: middle;
</del><span class="cx" style="display: block; padding: 0 10px"> font-size: 13px;
</span><span class="cx" style="display: block; padding: 0 10px"> color: #444;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1190,10 +1190,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 16px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 6px 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">-
- .imgedit-applyto .imgedit-label {
- vertical-align: middle;
- }
</del><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><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1232,10 +1228,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> height: 40px;
</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">- .upload-php .media-modal-close .media-modal-icon {
- margin: 9px 10px;
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> .edit-attachment-frame .edit-media-header .right:before,
</span><span class="cx" style="display: block; padding: 0 10px"> .edit-attachment-frame .edit-media-header .left:before {
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 40px !important;
</span></span></pre></div>
<a id="trunksrcwpadminincludesimageeditphp"></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/includes/image-edit.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/image-edit.php 2019-06-07 20:23:46 UTC (rev 45498)
+++ trunk/src/wp-admin/includes/image-edit.php 2019-06-07 20:43:26 UTC (rev 45499)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -64,16 +64,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <fieldset class="imgedit-scale">
</span><span class="cx" style="display: block; padding: 0 10px"> <legend><?php _e( 'New dimensions:' ); ?></legend>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="nowrap">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale width' ); ?></label>
</ins><span class="cx" style="display: block; padding: 0 10px"> <input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </label>
- <span class="imgedit-separator">×</span>
- <label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="imgedit-separator" aria-hidden="true">×</span>
+ <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
</ins><span class="cx" style="display: block; padding: 0 10px"> <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </label>
</del><span class="cx" style="display: block; padding: 0 10px"> <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
</span><span class="cx" style="display: block; padding: 0 10px"> <input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> </fieldset>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -124,13 +122,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <fieldset class="imgedit-crop-ratio">
</span><span class="cx" style="display: block; padding: 0 10px"> <legend><?php _e( 'Aspect ratio:' ); ?></legend>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="nowrap">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></label>
</ins><span class="cx" style="display: block; padding: 0 10px"> <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </label>
- <span class="imgedit-separator">:</span>
- <label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="imgedit-separator" aria-hidden="true">:</span>
+ <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></label>
</ins><span class="cx" style="display: block; padding: 0 10px"> <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </label>
</del><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </fieldset>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -137,13 +133,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
</span><span class="cx" style="display: block; padding: 0 10px"> <legend><?php _e( 'Selection:' ); ?></legend>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="nowrap">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection width' ); ?></label>
</ins><span class="cx" style="display: block; padding: 0 10px"> <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </label>
- <span class="imgedit-separator">×</span>
- <label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="imgedit-separator" aria-hidden="true">×</span>
+ <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'selection height' ); ?></label>
</ins><span class="cx" style="display: block; padding: 0 10px"> <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </label>
</del><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </fieldset>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -168,19 +162,22 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
</span><span class="cx" style="display: block; padding: 0 10px"> <fieldset>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <legend><?php _e( 'Apply changes to:' ); ?></legend>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="imgedit-label">
- <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
- <?php _e( 'All image sizes' ); ?></label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="imgedit-label">
+ <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
+ <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="imgedit-label">
- <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
- <?php _e( 'Thumbnail' ); ?></label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="imgedit-label">
+ <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
+ <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="imgedit-label">
- <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
- <?php _e( 'All sizes except thumbnail' ); ?></label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="imgedit-label">
+ <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
+ <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> </fieldset>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span></span></pre></div>
<a id="trunksrcwpadminincludesmediaphp"></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/includes/media.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/media.php 2019-06-07 20:23:46 UTC (rev 45498)
+++ trunk/src/wp-admin/includes/media.php 2019-06-07 20:43:26 UTC (rev 45499)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2072,7 +2072,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <div id="drag-drop-area">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="drag-drop-inside">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <p class="drag-drop-info"><?php _e( 'Drop files here' ); ?></p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <p class="drag-drop-info"><?php _e( 'Drop files to upload' ); ?></p>
</ins><span class="cx" style="display: block; padding: 0 10px"> <p><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
</span><span class="cx" style="display: block; padding: 0 10px"> <p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e( 'Select Files' ); ?>" class="button" /></p>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span></span></pre></div>
<a id="trunksrcwpincludescssbuttonscss"></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/css/buttons.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/css/buttons.css 2019-06-07 20:23:46 UTC (rev 45498)
+++ trunk/src/wp-includes/css/buttons.css 2019-06-07 20:43:26 UTC (rev 45499)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -309,7 +309,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> border-radius: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: -1px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- z-index: 10;
</del><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"> .wp-core-ui .button-group > .button-primary {
</span></span></pre></div>
<a id="trunksrcwpincludescssmediaviewscss"></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/css/media-views.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/css/media-views.css 2019-06-07 20:23:46 UTC (rev 45498)
+++ trunk/src/wp-includes/css/media-views.css 2019-06-07 20:43:26 UTC (rev 45499)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -18,11 +18,22 @@
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-overflow-scrolling: touch;
</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">-.media-modal legend,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-modal legend {
+ padding: 0;
+ font-size: 13px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .media-modal label {
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 13px;
</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-modal .legend-inline {
+ position: absolute;
+ transform: translate(-100%, 50%);
+ margin-left: -1%;
+ line-height: 1.2;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .media-frame input,
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame textarea {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 6px 8px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -30,8 +41,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame select,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-admin .media-frame select {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 2px;
</ins><span class="cx" style="display: block; padding: 0 10px"> line-height: 2;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-top: 3px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ height: 28px;
+ vertical-align: middle;
</ins><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"> .media-frame a {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -92,11 +105,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: #5b9dd9;
</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">-.media-frame select {
- height: 24px;
- padding: 2px;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .media-frame input:disabled,
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame textarea:disabled,
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame input[readonly],
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -121,7 +129,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: #72777c;
</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">-.media-frame .hidden {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*
+ * In some cases there's the need of higher specificity,
+ * for example higher than `.media-embed .setting`.
+ */
+.media-frame .hidden,
+.media-frame .setting.hidden {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: none;
</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">@@ -234,10 +247,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> width: calc(48% - 12px);
</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">-.media-modal-content .media-toolbar-primary .media-button {
- float: right;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .media-modal-content .attachments-browser .search {
</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="lines" style="display: block; padding: 0 10px; color: #888">@@ -321,25 +330,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> bottom: 0;
</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">-.media-sidebar .sidebar-title {
- font-size: 20px;
- margin: 0;
- padding: 12px 10px 10px;
- line-height: 28px;
-}
-
-.media-sidebar .sidebar-content {
- padding: 0 10px;
- margin-bottom: 130px;
-}
-
-.media-sidebar .search {
- display: block;
- width: 100%;
-}
-
-.media-sidebar h3, /* Back-compat for pre-4.4 */
-.image-details h3, /* Back-compat for pre-4.4 */
</del><span class="cx" style="display: block; padding: 0 10px"> .media-sidebar h2,
</span><span class="cx" style="display: block; padding: 0 10px"> .image-details h2 {
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -355,21 +345,27 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 0 0 10px;
+}
+
+.media-sidebar .collection-settings .setting {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin: 1px 0;
</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">-.media-sidebar .setting label,
-.attachment-details .setting label {
- display: block;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-sidebar .setting.has-description,
+.attachment-details .setting.has-description {
+ margin-bottom: 5px;
</ins><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">-.media-sidebar .setting .link-to-custom,
-.attachment-details .setting .link-to-custom {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-sidebar .setting .link-to-custom {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin: 3px 2px 0;
</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">-.media-sidebar .setting span,
-.attachment-details .setting span {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-sidebar .setting span, /* Back-compat for pre-5.3 */
+.attachment-details .setting span, /* Back-compat for pre-5.3 */
+.media-sidebar .setting .name,
+.media-sidebar .setting .value,
+.attachment-details .setting .name {
</ins><span class="cx" style="display: block; padding: 0 10px"> min-width: 30%;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 4%;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 12px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -381,8 +377,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 80px;
</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">-.media-sidebar .setting select,
-.attachment-details .setting select {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-sidebar .setting .value {
+ text-align: left;
+}
+
+.media-sidebar .setting select {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: 65%;
</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">@@ -399,8 +398,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 0;
</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">-.media-sidebar .setting span,
-.attachment-details .setting span,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-sidebar .setting span, /* Back-compat for pre-5.3 */
+.attachment-details .setting span, /* Back-compat for pre-5.3 */
+.media-sidebar .setting .name,
+.media-sidebar .setting .value,
+.media-sidebar .checkbox-label-inline,
+.attachment-details .setting .name,
+.attachment-details .setting .value,
</ins><span class="cx" style="display: block; padding: 0 10px"> .compat-item label span {
</span><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="cx" style="display: block; padding: 0 10px"> min-height: 22px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -410,6 +414,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: #666;
</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-sidebar .checkbox-label-inline {
+ font-size: 12px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .compat-item label span {
</span><span class="cx" style="display: block; padding: 0 10px"> text-align: right;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -450,7 +458,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 12px;
</span><span class="cx" style="display: block; padding: 0 10px"> font-style: normal;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-bottom: 0.5em;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-bottom: 10px;
</ins><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"> .media-sidebar .setting textarea,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -460,11 +468,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> resize: vertical;
</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">-.media-sidebar select,
-.attachment-details select {
- margin-top: 3px;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .compat-item {
</span><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -759,8 +762,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> max-height: 100%;
</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">-.media-frame-content .crop-content .upload-errors
-{
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-frame-content .crop-content .upload-errors {
</ins><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 300px;
</span><span class="cx" style="display: block; padding: 0 10px"> top: 50%;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -940,11 +942,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> transform: translate( -50%, -70% );
</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">-.ie8 .wp-core-ui .attachment img.icon {
- top: 20%;
- position: relative;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-core-ui .attachment .filename {
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> left: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1201,7 +1198,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 400px;
</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">-.uploader-inline .media-uploader-status h3, /* Back-compat for pre-4.4 */
</del><span class="cx" style="display: block; padding: 0 10px"> .uploader-inline .media-uploader-status h2 {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1289,22 +1285,40 @@
</span><span class="cx" style="display: block; padding: 0 10px"> word-wrap: break-word;
</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">-.uploader-window {
- position: fixed;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Window and Editor uploaders used to display "drop zones"
+ */
+.uploader-window,
+.wp-editor-wrap .uploader-editor {
</ins><span class="cx" style="display: block; padding: 0 10px"> top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> right: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> bottom: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: rgba(0, 86, 132, 0.9);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ text-align: center;
+ display: none;
+}
+
+.uploader-window {
+ position: fixed;
</ins><span class="cx" style="display: block; padding: 0 10px"> z-index: 250000;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- display: none;
- text-align: center;
- opacity: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ opacity: 0; /* Only the inline uploader is animated with JS, the editor one isn't */
</ins><span class="cx" style="display: block; padding: 0 10px"> transition: opacity 250ms;
</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">-.uploader-window-content {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-editor-wrap .uploader-editor {
</ins><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ z-index: 99998; /* under the toolbar */
+ background: rgba(150, 150, 150, 0.9);
+}
+
+.uploader-window,
+.wp-editor-wrap .uploader-editor.droppable {
+ background: rgba(0, 86, 132, 0.9);
+}
+
+.uploader-window-content,
+.wp-editor-wrap .uploader-editor-content {
+ position: absolute;
</ins><span class="cx" style="display: block; padding: 0 10px"> top: 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> left: 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> right: 10px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1312,19 +1326,31 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border: 1px dashed #fff;
</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">-.uploader-window h3, /* Back-compat for pre-4.4 */
-.uploader-window h1 {
- margin: -0.5em 0 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* uploader drop-zone title */
+.uploader-window h1, /* Back-compat for pre-5.3 */
+.uploader-window .uploader-editor-title,
+.wp-editor-wrap .uploader-editor .uploader-editor-title {
</ins><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> top: 50%;
</span><span class="cx" style="display: block; padding: 0 10px"> left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> right: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- transform: translateY( -50% );
- font-size: 40px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ transform: translateY(-50%);
+ font-size: 3em;
+ line-height: 1.3;
+ font-weight: 600;
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #fff;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 0;
+ padding: 0 10px;
</ins><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">+.wp-editor-wrap .uploader-editor .uploader-editor-title {
+ display: none;
+}
+
+.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
+ display: block;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .uploader-window .media-progress-bar {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 300px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1366,7 +1392,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0 0 4em;
</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">-.uploader-inline h3, /* Back-compat for pre-4.4 */
</del><span class="cx" style="display: block; padding: 0 10px"> .uploader-inline h2 {
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.4;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1389,7 +1414,6 @@
</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"> .uploader-inline p {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- font-size: 12px;
</del><span class="cx" style="display: block; padding: 0 10px"> margin: 0.5em 0;
</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">@@ -1580,15 +1604,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .attachment-details .settings-save-status {
</span><span class="cx" style="display: block; padding: 0 10px"> float: right;
</span><span class="cx" style="display: block; padding: 0 10px"> text-transform: none;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- z-index: 10;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ font-weight: 400;
</ins><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"> .attachment-details .settings-save-status .spinner {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ float: none;
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-left: 5px;
</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"> .attachment-details .settings-save-status .saved {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- float: right;
</del><span class="cx" style="display: block; padding: 0 10px"> display: none;
</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">@@ -1597,7 +1621,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"> .attachment-details.save-complete .settings-save-status .saved {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- display: block;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: inline-block;
</ins><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"> .attachment-info {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1704,10 +1728,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: hidden;
</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">-.attachment-display-settings h4 {
- margin: 1.4em 0 0.4em;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .collection-settings {
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: hidden;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1717,7 +1737,8 @@
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.collection-settings .setting span {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.collection-settings .setting span, /* Back-compat for pre-5.3 */
+.collection-settings .setting .name {
</ins><span class="cx" style="display: block; padding: 0 10px"> min-width: inherit;
</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">@@ -1772,7 +1793,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</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">-.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
</del><span class="cx" style="display: block; padding: 0 10px"> .media-modal .imgedit-group-top h2,
</span><span class="cx" style="display: block; padding: 0 10px"> .media-modal .imgedit-group-top h2 .button-link {
</span><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1783,7 +1803,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 3px;
</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">-.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
</del><span class="cx" style="display: block; padding: 0 10px"> .media-modal .imgedit-group-top h2 a,
</span><span class="cx" style="display: block; padding: 0 10px"> .media-modal .imgedit-group-top h2 .button-link {
</span><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1839,7 +1858,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 16px;
</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">-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Embed from URL and Image Details
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1855,12 +1873,16 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame .embed-url input {
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 18px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 12px 14px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 12px 40px 12px 14px; /* right padding to leave room for the spinner */
</ins><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> min-width: 200px;
</span><span class="cx" style="display: block; padding: 0 10px"> box-shadow: inset 2px 2px 4px -2px rgba(0, 0, 0, 0.1);
</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-frame .embed-url input::-ms-clear {
+ display: none; /* the "x" in IE 11 conflicts with the spinner */
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .media-frame .embed-url .spinner {
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> top: 32px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1878,7 +1900,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> right: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> bottom: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 16px 16px 32px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 0 16px 32px;
</ins><span class="cx" style="display: block; padding: 0 10px"> overflow: auto;
</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">@@ -1941,7 +1963,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> left: 0;
</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">-.image-details .column-settings h3, /* Back-compat for pre-4.4 */
</del><span class="cx" style="display: block; padding: 0 10px"> .image-details .column-settings h2 {
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-top: 20px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1992,22 +2013,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> content: "\f142";
</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">-.image-details .embed-media-settings .size {
- margin-bottom: 4px;
-}
-
-.image-details .custom-size span {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.image-details .custom-size label, /* Back-compat for pre-5.3 */
+.image-details .custom-size .custom-size-setting {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-}
-
-.image-details .custom-size label {
- display: block;
</del><span class="cx" style="display: block; padding: 0 10px"> float: left;
</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">-.image-details .custom-size span small {
- color: #555d66; /* #f3f3f3 background */
- font-size: inherit;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.image-details .custom-size .custom-size-setting label {
+ float: none;
</ins><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"> .image-details .custom-size input {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2019,10 +2032,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 26px 6px 0 6px;
</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">-.image-details .custom-size:after {
- content: "";
- display: table;
- clear: both;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.image-details .custom-size .description {
+ margin-left: 0;
</ins><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"> .media-embed .thumbnail {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2049,7 +2060,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: hidden;
</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">-.media-embed .setting {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-embed .setting,
+.media-embed .setting-group {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 10px 0;
</span><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2057,6 +2069,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</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-embed .setting-group .setting:not(.checkbox-setting) {
+ margin: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .media-embed .setting.has-description {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 5px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2066,7 +2082,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-style: normal;
</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">-.image-details .embed-media-settings .setting {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.image-details .embed-media-settings .setting,
+.image-details .embed-media-settings .setting-group {
</ins><span class="cx" style="display: block; padding: 0 10px"> float: none;
</span><span class="cx" style="display: block; padding: 0 10px"> width: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2080,11 +2097,11 @@
</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"> .media-embed .setting input[type="text"],
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.media-embed .setting textarea {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-embed .setting textarea,
+.media-embed fieldset {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 400px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 1px 0;
</del><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"> .image-details .embed-media-settings .setting input[type="text"],
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2096,6 +2113,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .image-details .embed-media-settings .setting input.link-to-custom,
</span><span class="cx" style="display: block; padding: 0 10px"> .image-details .embed-media-settings .link-target,
</span><span class="cx" style="display: block; padding: 0 10px"> .image-details .embed-media-settings .custom-size,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.image-details .embed-media-settings .setting-group,
</ins><span class="cx" style="display: block; padding: 0 10px"> .image-details .description {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 27%;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 70%;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2107,23 +2125,36 @@
</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"> .image-details .embed-media-settings .link-target {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-top: 24px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: 16px;
</ins><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">+.image-details .checkbox-label,
+.audio-details .checkbox-label,
+.video-details .checkbox-label {
+ vertical-align: baseline;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .media-embed .setting input.hidden,
</span><span class="cx" style="display: block; padding: 0 10px"> .media-embed .setting textarea.hidden {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</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">-.media-embed .setting span {
- display: block;
- width: 200px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-embed .setting span, /* Back-compat for pre-5.3 */
+.media-embed .setting .name,
+.media-embed .setting-group .name {
+ display: inline-block;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-size: 13px;
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.84615384;
</span><span class="cx" style="display: block; padding: 0 10px"> color: #666;
</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">-.image-details .embed-media-settings .setting span {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-embed .setting span {
+ display: block; /* Back-compat for pre-5.3 */
+ width: 200px; /* Back-compat for pre-5.3 */
+}
+
+.image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
+.image-details .embed-media-settings .setting .name {
</ins><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 25%;
</span><span class="cx" style="display: block; padding: 0 10px"> text-align: right;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2131,10 +2162,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.1;
</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">-.media-embed .setting .button-group {
- margin: 2px 0;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .media-embed-sidebar {
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> top: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2146,100 +2173,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 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">-/* Drag & drop on the editor upload */
-.wp-editor-wrap .uploader-editor {
- background: rgba(150, 150, 150, 0.9);
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 99998; /* under the toolbar */
- display: none;
- text-align: center;
-}
-
-.wp-editor-wrap .uploader-editor-content {
- border: 1px dashed #fff;
- position: absolute;
- top: 10px;
- left: 10px;
- right: 10px;
- bottom: 10px;
-}
-
-.wp-editor-wrap .uploader-editor .uploader-editor-title {
- position: absolute;
- top: 50%;
- left: 0;
- right: 0;
- transform: translateY( -50% );
- font-size: 3em;
- line-height: 1.3;
- font-weight: 600;
- color: #fff;
- padding: 0;
- margin: 0;
- display: none;
-}
-
-.wp-editor-wrap .uploader-editor.droppable {
- background: rgba(0, 86, 132, 0.9);
-}
-
-.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
- display: block;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * IE7 Fixes
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Button groups fix: can be removed together with the Back-compat for pre-5.3
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.ie7 .media-frame .attachments-browser {
- position: static;
-}
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .media-frame .setting .button-group {
+ display: flex;
+ margin: 0 !important;
+ max-width: none !important;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.ie7 .media-frame .embed-url input {
- margin-top: 4px;
- width: 90%;
-}
-
-.ie7 .compat-item {
- width: 99%;
-}
-
-.ie7 .attachment-display-settings {
- width: auto;
-}
-
-.ie7 .attachment-preview,
-.ie7 .attachment-preview .thumbnail {
- width: 120px;
- height: 120px;
-}
-
-.ie7 .media-frame .attachment .describe {
- width: 102px;
-}
-
-.ie7 .media-sidebar .setting select {
- max-width: 55%;
-}
-
-.ie7 .media-sidebar .setting input[type="text"],
-.ie7 .media-sidebar .setting input[type="password"],
-.ie7 .media-sidebar .setting input[type="email"],
-.ie7 .media-sidebar .setting input[type="number"],
-.ie7 .media-sidebar .setting input[type="search"],
-.ie7 .media-sidebar .setting input[type="tel"],
-.ie7 .media-sidebar .setting input[type="url"],
-.ie7 .media-sidebar .setting textarea {
- width: 55%;
-}
-
-.ie7 .media-sidebar .setting .link-to-custom {
- float: left;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Localization
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2355,21 +2297,33 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .media-sidebar .setting input,
</span><span class="cx" style="display: block; padding: 0 10px"> .media-sidebar .setting textarea,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .media-sidebar .setting span,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .media-sidebar .setting .name,
</ins><span class="cx" style="display: block; padding: 0 10px"> .attachment-details .setting input,
</span><span class="cx" style="display: block; padding: 0 10px"> .attachment-details .setting textarea,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .attachment-details .setting span,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .attachment-details .setting .name,
</ins><span class="cx" style="display: block; padding: 0 10px"> .compat-item label span {
</span><span class="cx" style="display: block; padding: 0 10px"> float: none;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: inline-block;
</ins><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">- .media-sidebar .setting span,
- .attachment-details .setting span,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .media-sidebar .setting span, /* Back-compat for pre-5.3 */
+ .attachment-details .setting span, /* Back-compat for pre-5.3 */
+ .media-sidebar .checkbox-label-inline {
+ float: none;
+ }
+
+ .media-sidebar .setting .select-label-inline {
+ display: inline;
+ }
+
+ .media-sidebar .setting .name,
+ .media-sidebar .checkbox-label-inline,
+ .attachment-details .setting .name,
</ins><span class="cx" style="display: block; padding: 0 10px"> .compat-item label span {
</span><span class="cx" style="display: block; padding: 0 10px"> text-align: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> min-height: 16px;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding: 8px 2px 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 8px 2px 2px;
</ins><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"> .media-sidebar .setting .value,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2428,17 +2382,31 @@
</span><span class="cx" style="display: block; padding: 0 10px"> right: 30px;
</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">- .image-details .embed-media-settings .setting {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .image-details .embed-media-settings .setting,
+ .image-details .embed-media-settings .setting-group {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin: 20px;
</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">- .image-details .embed-media-settings .setting span {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
+ .image-details .embed-media-settings .setting .name {
</ins><span class="cx" style="display: block; padding: 0 10px"> float: none;
</span><span class="cx" style="display: block; padding: 0 10px"> text-align: left;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 4px;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-left: 0;
</ins><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-modal .legend-inline {
+ position: static;
+ transform: none;
+ margin-left: 0;
+ margin-bottom: 6px;
+ }
+
+ .image-details .embed-media-settings .setting-group .setting {
+ margin-bottom: 0;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .image-details .embed-media-settings .setting input.link-to-custom,
</span><span class="cx" style="display: block; padding: 0 10px"> .image-details .embed-media-settings .setting input[type="text"],
</span><span class="cx" style="display: block; padding: 0 10px"> .image-details .embed-media-settings .setting textarea {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2460,6 +2428,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"> .collection-settings .setting input[type="checkbox"] {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ float: none;
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpincludesmediatemplatephp"></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/media-template.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/media-template.php 2019-06-07 20:23:46 UTC (rev 45498)
+++ trunk/src/wp-includes/media-template.php 2019-06-07 20:43:26 UTC (rev 45499)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -174,16 +174,8 @@
</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 lte IE 8]>
- <style>
- .attachment:focus {
- outline: #1e8cbe solid;
- }
- .selected.attachment {
- outline: #1e8cbe solid;
- }
- </style>
- <![endif]-->
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ <?php // Template for the media frame: used both in the media grid and in the media modal. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-media-frame">
</span><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="lines" style="display: block; padding: 0 10px; color: #888">@@ -193,6 +185,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="media-frame-uploader"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the media modal. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-media-modal">
</span><span class="cx" style="display: block; padding: 0 10px"> <div tabindex="0" class="<?php echo $class; ?>">
</span><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></button>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -201,12 +194,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="media-modal-backdrop"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the window uploader, used for example in the media grid. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-uploader-window">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="uploader-window-content">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <h1><?php _e( 'Drop files to upload' ); ?></h1>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="uploader-editor-title"><?php _e( 'Drop files to upload' ); ?></div>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the editor uploader. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-uploader-editor">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="uploader-editor-content">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="uploader-editor-title"><?php _e( 'Drop files to upload' ); ?></div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -213,6 +208,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the inline uploader, used for example in the Media Library admin page - Add New. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-uploader-inline">
</span><span class="cx" style="display: block; padding: 0 10px"> <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.canClose ) { #>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -223,17 +219,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <h2 class="upload-message">{{ data.message }}</h2>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php if ( ! _device_can_upload() ) : ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <h2 class="upload-instructions"><?php printf( __( 'The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.' ), 'https://apps.wordpress.org/' ); ?></h2>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="upload-ui">
+ <h2 class="upload-instructions"><?php _e( 'Your browseer cannot upload files' ); ?></h2>
+ <p><?php printf( __( 'The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.' ), 'https://apps.wordpress.org/' ); ?></p>
+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
- <?php
- /** This action is documented in wp-admin/includes/media.php */
- do_action( 'upload_ui_over_quota' );
- ?>
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="upload-ui">
+ <h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
+ <?php
+ /** This action is documented in wp-admin/includes/media.php */
+ do_action( 'upload_ui_over_quota' );
+ ?>
+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php else : ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="upload-ui">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h2>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files to upload' ); ?></h2>
</ins><span class="cx" style="display: block; padding: 0 10px"> <p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
</span><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -286,6 +286,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the view switchers, used for example in the Media Grid. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-media-library-view-switcher">
</span><span class="cx" style="display: block; padding: 0 10px"> <a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ); ?>" class="view-list">
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="screen-reader-text"><?php _e( 'List View' ); ?></span>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -295,6 +296,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </a>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the uploading status UI. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-uploader-status">
</span><span class="cx" style="display: block; padding: 0 10px"> <h2><?php _e( 'Uploading' ); ?></h2>
</span><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -310,22 +312,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="upload-errors"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the uploading status errors. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-uploader-status-error">
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="upload-error-filename">{{{ data.filename }}}</span>
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="upload-error-message">{{ data.message }}</span>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the Attachment Details layout in the media browser. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-edit-attachment-frame">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="edit-media-header">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
- <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Previous' ); ?></span></button>
+ <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Next' ); ?></span></button>
</ins><span class="cx" style="display: block; padding: 0 10px"> </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-content"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the Attachment Details two columns layout. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-attachment-details-two-column">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="attachment-media-view {{ data.orientation }}">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <h2 class="screen-reader-text"><?php _e( 'Attachment Preview' ); ?></h2>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="thumbnail thumbnail-{{ data.type }}">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.uploading ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="media-progress-bar"><div></div></div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -365,17 +371,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button edit-attachment"><?php _e( 'Edit Image' ); ?></button>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } else if ( 'pdf' === data.subtype && data.sizes ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <?php _e( 'Document Preview' ); ?>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <p><?php _e( 'Document Preview' ); ?></p>
</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"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="attachment-info">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span class="settings-save-status">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="settings-save-status" role="status">
</ins><span class="cx" style="display: block; padding: 0 10px"> <span class="spinner"></span>
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
</span><span class="cx" style="display: block; padding: 0 10px"> </span>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="details">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <h2 class="screen-reader-text"><?php _e( 'Details' ); ?></h2>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -418,17 +425,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="settings">
</span><span class="cx" style="display: block; padding: 0 10px"> <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( 'image' === data.type ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting" data-setting="alt">
- <span class="name"><?php _e( 'Alternative Text' ); ?></span>
- <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting has-description" data-setting="alt">
+ <label for="attachment-details-two-column-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
+ <input type="text" id="attachment-details-two-column-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting" data-setting="title">
- <span class="name"><?php _e( 'Title' ); ?></span>
- <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting" data-setting="title">
+ <label for="attachment-details-two-column-title" class="name"><?php _e( 'Title' ); ?></label>
+ <input type="text" id="attachment-details-two-column-title" value="{{ data.title }}" {{ maybeReadOnly }} />
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php endif; ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( 'audio' === data.type ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -437,26 +444,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'album' => __( 'Album' ),
</span><span class="cx" style="display: block; padding: 0 10px"> ) as $key => $label ) :
</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 class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
- <span class="name"><?php echo $label; ?></span>
- <input type="text" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
+ <label for="attachment-details-two-column-<?php echo esc_attr( $key ); ?>" class="name"><?php echo $label; ?></label>
+ <input type="text" id="attachment-details-two-column-<?php echo esc_attr( $key ); ?>" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php endforeach; ?>
</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 class="setting" data-setting="caption">
- <span class="name"><?php _e( 'Caption' ); ?></span>
- <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
- </label>
- <label class="setting" data-setting="description">
- <span class="name"><?php _e( 'Description' ); ?></span>
- <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
- </label>
- <div class="setting">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting" data-setting="caption">
+ <label for="attachment-details-two-column-caption" class="name"><?php _e( 'Caption' ); ?></label>
+ <textarea id="attachment-details-two-column-caption" {{ maybeReadOnly }}>{{ data.caption }}</textarea>
+ </span>
+ <span class="setting" data-setting="description">
+ <label for="attachment-details-two-column-description" class="name"><?php _e( 'Description' ); ?></label>
+ <textarea id="attachment-details-two-column-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
+ </span>
+ <span class="setting">
</ins><span class="cx" style="display: block; padding: 0 10px"> <span class="name"><?php _e( 'Uploaded By' ); ?></span>
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="value">{{ data.authorName }}</span>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.uploadedToTitle ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="setting">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting">
</ins><span class="cx" style="display: block; padding: 0 10px"> <span class="name"><?php _e( 'Uploaded To' ); ?></span>
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.uploadedToLink ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -463,12 +470,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <# } else { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="value">{{ data.uploadedToTitle }}</span>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting" data-setting="url">
- <span class="name"><?php _e( 'Copy Link' ); ?></span>
- <input type="text" value="{{ data.url }}" readonly />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting" data-setting="url">
+ <label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
+ <input type="text" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="attachment-compat"></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">@@ -489,10 +496,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php endif; ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</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><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the Attachment "thumbnails" in the Media Grid. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-attachment">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="thumbnail">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -529,24 +536,29 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( data.describe ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( 'image' === data.type ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- placeholder="<?php esc_attr_e( 'Caption this image…' ); ?>" {{ maybeReadOnly }} />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ aria-label="<?php esc_attr_e( 'Caption' ); ?>"
+ placeholder="<?php esc_attr_e( 'Caption…' ); ?>" {{ maybeReadOnly }} />
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } else { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <input type="text" value="{{ data.title }}" class="describe" data-setting="title"
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( 'video' === data.type ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- placeholder="<?php esc_attr_e( 'Describe this video…' ); ?>"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ aria-label="<?php esc_attr_e( 'Video title' ); ?>"
+ placeholder="<?php esc_attr_e( 'Video title…' ); ?>"
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } else if ( 'audio' === data.type ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- placeholder="<?php esc_attr_e( 'Describe this audio file…' ); ?>"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ aria-label="<?php esc_attr_e( 'Audio title' ); ?>"
+ placeholder="<?php esc_attr_e( 'Audio title…' ); ?>"
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } else { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- placeholder="<?php esc_attr_e( 'Describe this media file…' ); ?>"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ aria-label="<?php esc_attr_e( 'Media title' ); ?>"
+ placeholder="<?php esc_attr_e( 'Media title…' ); ?>"
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #> {{ maybeReadOnly }} />
</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"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the Attachment details, used for example in the sidebar. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-attachment-details">
</span><span class="cx" style="display: block; padding: 0 10px"> <h2>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php _e( 'Attachment Details' ); ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span class="settings-save-status">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="settings-save-status" role="status">
</ins><span class="cx" style="display: block; padding: 0 10px"> <span class="spinner"></span>
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="saved"><?php esc_html_e( 'Saved.' ); ?></span>
</span><span class="cx" style="display: block; padding: 0 10px"> </span>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -607,20 +619,19 @@
</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"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px"> <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( 'image' === data.type ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting" data-setting="alt">
- <span class="name"><?php _e( 'Alt Text' ); ?></span>
- <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting has-description" data-setting="alt">
+ <label for="attachment-details-alt-text" class="name"><?php _e( 'Alt Text' ); ?></label>
+ <input type="text" id="attachment-details-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting" data-setting="title">
- <span class="name"><?php _e( 'Title' ); ?></span>
- <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting" data-setting="title">
+ <label for="attachment-details-title" class="name"><?php _e( 'Title' ); ?></label>
+ <input type="text" id="attachment-details-title" value="{{ data.title }}" {{ maybeReadOnly }} />
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php endif; ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( 'audio' === data.type ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -629,26 +640,27 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'album' => __( 'Album' ),
</span><span class="cx" style="display: block; padding: 0 10px"> ) as $key => $label ) :
</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 class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
- <span class="name"><?php echo $label; ?></span>
- <input type="text" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting" data-setting="<?php echo esc_attr( $key ); ?>">
+ <label for="attachment-details-<?php echo esc_attr( $key ); ?>" class="name"><?php echo $label; ?></label>
+ <input type="text" id="attachment-details-<?php echo esc_attr( $key ); ?>" value="{{ data.<?php echo $key; ?> || data.meta.<?php echo $key; ?> || '' }}" />
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php endforeach; ?>
</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 class="setting" data-setting="caption">
- <span class="name"><?php _e( 'Caption' ); ?></span>
- <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
- </label>
- <label class="setting" data-setting="description">
- <span class="name"><?php _e( 'Description' ); ?></span>
- <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
- </label>
- <label class="setting" data-setting="url">
- <span class="name"><?php _e( 'Copy Link' ); ?></span>
- <input type="text" value="{{ data.url }}" readonly />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting" data-setting="caption">
+ <label for="attachment-details-caption" class="name"><?php _e( 'Caption' ); ?></label>
+ <textarea id="attachment-details-caption" {{ maybeReadOnly }}>{{ data.caption }}</textarea>
+ </span>
+ <span class="setting" data-setting="description">
+ <label for="attachment-details-description" class="name"><?php _e( 'Description' ); ?></label>
+ <textarea id="attachment-details-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
+ </span>
+ <span class="setting" data-setting="url">
+ <label for="attachment-details-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
+ <input type="text" id="attachment-details-copy-link" value="{{ data.url }}" readonly />
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the Selection status bar. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-media-selection">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="selection-info">
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="count"></span>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -662,13 +674,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="selection-view"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the Attachment display settings, used for example in the sidebar. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-attachment-display-settings">
</span><span class="cx" style="display: block; padding: 0 10px"> <h2><?php _e( 'Attachment Display Settings' ); ?></h2>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( 'image' === data.type ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting align">
- <span><?php _e( 'Alignment' ); ?></span>
- <select class="alignment"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting align">
+ <label for="attachment-display-settings-alignment" class="name"><?php _e( 'Alignment' ); ?></label>
+ <select id="attachment-display-settings-alignment" class="alignment"
</ins><span class="cx" style="display: block; padding: 0 10px"> data-setting="align"
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.userSettings ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> data-user-setting="align"
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -687,61 +700,63 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php esc_html_e( 'None' ); ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </option>
</span><span class="cx" style="display: block; padding: 0 10px"> </select>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
</ins><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">- <div class="setting">
- <label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting">
+ <label for="attachment-display-settings-link-to" class="name">
</ins><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.model.canEmbed ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span><?php _e( 'Embed or Link' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php _e( 'Embed or Link' ); ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } else { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span><?php _e( 'Link To' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php _e( 'Link To' ); ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </label>
+ <select id="attachment-display-settings-link-to" class="link-to"
+ data-setting="link"
+ <# if ( data.userSettings && ! data.model.canEmbed ) { #>
+ data-user-setting="urlbutton"
+ <# } #>>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <select class="link-to"
- data-setting="link"
- <# if ( data.userSettings && ! data.model.canEmbed ) { #>
- data-user-setting="urlbutton"
- <# } #>>
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.model.canEmbed ) { #>
+ <option value="embed" selected>
+ <?php esc_html_e( 'Embed Media Player' ); ?>
+ </option>
+ <option value="file">
+ <# } else { #>
+ <option value="none" selected>
+ <?php esc_html_e( 'None' ); ?>
+ </option>
+ <option value="file">
+ <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.model.canEmbed ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <option value="embed" selected>
- <?php esc_html_e( 'Embed Media Player' ); ?>
- </option>
- <option value="file">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php esc_html_e( 'Link to Media File' ); ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } else { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <option value="none" selected>
- <?php esc_html_e( 'None' ); ?>
- </option>
- <option value="file">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php esc_html_e( 'Media File' ); ?>
</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 ( data.model.canEmbed ) { #>
- <?php esc_html_e( 'Link to Media File' ); ?>
- <# } else { #>
- <?php esc_html_e( 'Media File' ); ?>
- <# } #>
- </option>
- <option value="post">
- <# if ( data.model.canEmbed ) { #>
- <?php esc_html_e( 'Link to Attachment Page' ); ?>
- <# } else { #>
- <?php esc_html_e( 'Attachment Page' ); ?>
- <# } #>
- </option>
- <# if ( 'image' === data.type ) { #>
- <option value="custom">
- <?php esc_html_e( 'Custom URL' ); ?>
- </option>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </option>
+ <option value="post">
+ <# if ( data.model.canEmbed ) { #>
+ <?php esc_html_e( 'Link to Attachment Page' ); ?>
+ <# } else { #>
+ <?php esc_html_e( 'Attachment Page' ); ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </select>
- </label>
- <input type="text" class="link-to-custom" data-setting="linkUrl" />
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </option>
+ <# if ( 'image' === data.type ) { #>
+ <option value="custom">
+ <?php esc_html_e( 'Custom URL' ); ?>
+ </option>
+ <# } #>
+ </select>
+ </span>
+ <span class="setting">
+ <label for="attachment-display-settings-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
+ <input type="text" id="attachment-display-settings-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( 'undefined' !== typeof data.sizes ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting">
- <span><?php _e( 'Size' ); ?></span>
- <select class="size" name="size"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting">
+ <label for="attachment-display-settings-size" class="name"><?php _e( 'Size' ); ?></label>
+ <select id="attachment-display-settings-size" class="size" name="size"
</ins><span class="cx" style="display: block; padding: 0 10px"> data-setting="size"
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.userSettings ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> data-user-setting="imgsize"
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -769,16 +784,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php endforeach; ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </select>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the Gallery settings, used for example in the sidebar. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-gallery-settings">
</span><span class="cx" style="display: block; padding: 0 10px"> <h2><?php _e( 'Gallery Settings' ); ?></h2>
</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 class="setting">
- <span><?php _e( 'Link To' ); ?></span>
- <select class="link-to"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting">
+ <label for="gallery-settings-link-to" class="name"><?php _e( 'Link To' ); ?></label>
+ <select id="gallery-settings-link-to" class="link-to"
</ins><span class="cx" style="display: block; padding: 0 10px"> data-setting="link"
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.userSettings ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> data-user-setting="urlbutton"
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -796,11 +812,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php esc_html_e( 'None' ); ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </option>
</span><span class="cx" style="display: block; padding: 0 10px"> </select>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting">
- <span><?php _e( 'Columns' ); ?></span>
- <select class="columns" name="columns"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting">
+ <label for="gallery-settings-columns" class="name select-label-inline"><?php _e( 'Columns' ); ?></label>
+ <select id="gallery-settings-columns" class="columns" name="columns"
</ins><span class="cx" style="display: block; padding: 0 10px"> data-setting="columns">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php for ( $i = 1; $i <= 9; $i++ ) : ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <option value="<?php echo esc_attr( $i ); ?>" <#
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -810,16 +826,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </option>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php endfor; ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </select>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting">
- <span><?php _e( 'Random Order' ); ?></span>
- <input type="checkbox" data-setting="_orderbyRandom" />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting">
+ <input type="checkbox" id="gallery-settings-random-order" data-setting="_orderbyRandom" />
+ <label for="gallery-settings-random-order" class="checkbox-label-inline"><?php _e( 'Random Order' ); ?></label>
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting size">
- <span><?php _e( 'Size' ); ?></span>
- <select class="size" name="size"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting size">
+ <label for="gallery-settings-size" class="name"><?php _e( 'Size' ); ?></label>
+ <select id="gallery-settings-size" class="size" name="size"
</ins><span class="cx" style="display: block; padding: 0 10px"> data-setting="size"
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.userSettings ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> data-user-setting="imgsize"
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -844,9 +860,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </option>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php endforeach; ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </select>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the Playlists settings, used for example in the sidebar. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-playlist-settings">
</span><span class="cx" style="display: block; padding: 0 10px"> <h2><?php _e( 'Playlist Settings' ); ?></h2>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -853,53 +870,63 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <# var emptyModel = _.isEmpty( data.model ),
</span><span class="cx" style="display: block; padding: 0 10px"> isVideo = 'video' === data.controller.get('library').props.get('type'); #>
</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 class="setting">
- <input type="checkbox" data-setting="tracklist" <# if ( emptyModel ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting">
+ <input type="checkbox" id="playlist-settings-show-list" data-setting="tracklist" <# if ( emptyModel ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px"> checked="checked"
</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 ( isVideo ) { #>
- <span><?php _e( 'Show Video List' ); ?></span>
- <# } else { #>
- <span><?php _e( 'Show Tracklist' ); ?></span>
- <# } #>
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="playlist-settings-show-list" class="checkbox-label-inline">
+ <# if ( isVideo ) { #>
+ <?php _e( 'Show Video List' ); ?>
+ <# } else { #>
+ <?php _e( 'Show Tracklist' ); ?>
+ <# } #>
+ </label>
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( ! isVideo ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting">
- <input type="checkbox" data-setting="artists" <# if ( emptyModel ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting">
+ <input type="checkbox" id="playlist-settings-show-artist" data-setting="artists" <# if ( emptyModel ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px"> checked="checked"
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #> />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span><?php _e( 'Show Artist Name in Tracklist' ); ?></span>
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="playlist-settings-show-artist" class="checkbox-label-inline">
+ <?php _e( 'Show Artist Name in Tracklist' ); ?>
+ </label>
+ </span>
</ins><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">- <label class="setting">
- <input type="checkbox" data-setting="images" <# if ( emptyModel ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting">
+ <input type="checkbox" id="playlist-settings-show-images" data-setting="images" <# if ( emptyModel ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px"> checked="checked"
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #> />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span><?php _e( 'Show Images' ); ?></span>
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="playlist-settings-show-images" class="checkbox-label-inline">
+ <?php _e( 'Show Images' ); ?>
+ </label>
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the "Insert from URL" layout. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-embed-link-settings">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting link-text">
- <span><?php _e( 'Link Text' ); ?></span>
- <input type="text" class="alignment" data-setting="linkText" />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting link-text">
+ <label for="embed-link-settings-link-text" class="name"><?php _e( 'Link Text' ); ?></label>
+ <input type="text" id="embed-link-settings-link-text" class="alignment" data-setting="linkText" />
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="embed-container" style="display: none;">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="embed-preview"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the "Insert from URL" image preview and details. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-embed-image-settings">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="thumbnail">
- <img src="{{ data.model.url }}" draggable="false" alt="" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="wp-clearfix">
+ <div class="thumbnail">
+ <img src="{{ data.model.url }}" draggable="false" alt="" />
+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</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 class="setting alt-text has-description">
- <span><?php _e( 'Alternative Text' ); ?></span>
- <input type="text" data-setting="alt" aria-describedby="alt-text-description" />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting alt-text has-description">
+ <label for="embed-image-settings-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
+ <input type="text" id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description" />
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -906,67 +933,63 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /** This filter is documented in wp-admin/includes/media.php */
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! apply_filters( 'disable_captions', '' ) ) :
</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 class="setting caption">
- <span><?php _e( 'Caption' ); ?></span>
- <textarea data-setting="caption" />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting caption">
+ <label for="embed-image-settings-caption" class="name"><?php _e( 'Caption' ); ?></label>
+ <textarea id="embed-image-settings-caption" data-setting="caption" />
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php endif; ?>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="setting align">
- <span><?php _e( 'Align' ); ?></span>
- <div class="button-group button-large" data-setting="align">
- <button class="button" value="left">
- <?php esc_html_e( 'Left' ); ?>
- </button>
- <button class="button" value="center">
- <?php esc_html_e( 'Center' ); ?>
- </button>
- <button class="button" value="right">
- <?php esc_html_e( 'Right' ); ?>
- </button>
- <button class="button active" value="none">
- <?php esc_html_e( 'None' ); ?>
- </button>
- </div>
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <fieldset class="setting-group">
+ <legend class="name"><?php _e( 'Align' ); ?></legend>
+ <span class="setting align">
+ <span class="button-group button-large" data-setting="align">
+ <button class="button" value="left">
+ <?php esc_html_e( 'Left' ); ?>
+ </button>
+ <button class="button" value="center">
+ <?php esc_html_e( 'Center' ); ?>
+ </button>
+ <button class="button" value="right">
+ <?php esc_html_e( 'Right' ); ?>
+ </button>
+ <button class="button active" value="none">
+ <?php esc_html_e( 'None' ); ?>
+ </button>
+ </span>
+ </span>
+ </fieldset>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="setting link-to">
- <span><?php _e( 'Link To' ); ?></span>
- <div class="button-group button-large" data-setting="link">
- <button class="button" value="file">
- <?php esc_html_e( 'Image URL' ); ?>
- </button>
- <button class="button" value="custom">
- <?php esc_html_e( 'Custom URL' ); ?>
- </button>
- <button class="button active" value="none">
- <?php esc_html_e( 'None' ); ?>
- </button>
- </div>
- <input type="text" class="link-to-custom" data-setting="linkUrl" />
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <fieldset class="setting-group">
+ <legend class="name"><?php _e( 'Link To' ); ?></legend>
+ <span class="setting link-to">
+ <span class="button-group button-large" data-setting="link">
+ <button class="button" value="file">
+ <?php esc_html_e( 'Image URL' ); ?>
+ </button>
+ <button class="button" value="custom">
+ <?php esc_html_e( 'Custom URL' ); ?>
+ </button>
+ <button class="button active" value="none">
+ <?php esc_html_e( 'None' ); ?>
+ </button>
+ </span>
+ </span>
+ <span class="setting">
+ <label for="embed-image-settings-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
+ <input type="text" id="embed-image-settings-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
+ </span>
+ </fieldset>
</ins><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the Image details, used for example in the editor. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-image-details">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="media-embed">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="embed-media-settings">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="column-image">
- <div class="image">
- <img src="{{ data.model.url }}" draggable="false" alt="" />
-
- <# if ( data.attachment && window.imageEdit ) { #>
- <div class="actions">
- <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
- <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
- </div>
- <# } #>
- </div>
- </div>
</del><span class="cx" style="display: block; padding: 0 10px"> <div class="column-settings">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting alt-text has-description">
- <span><?php _e( 'Alternative Text' ); ?></span>
- <input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting alt-text has-description">
+ <label for="image-details-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
+ <input type="text" id="image-details-alt-text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -973,36 +996,38 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /** This filter is documented in wp-admin/includes/media.php */
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! apply_filters( 'disable_captions', '' ) ) :
</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 class="setting caption">
- <span><?php _e( 'Caption' ); ?></span>
- <textarea data-setting="caption">{{ data.model.caption }}</textarea>
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting caption">
+ <label for="image-details-caption" class="name"><?php _e( 'Caption' ); ?></label>
+ <textarea id="image-details-caption" data-setting="caption">{{ data.model.caption }}</textarea>
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php endif; ?>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <h2><?php _e( 'Display Settings' ); ?></h2>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="setting align">
- <span><?php _e( 'Align' ); ?></span>
- <div class="button-group button-large" data-setting="align">
- <button class="button" value="left">
- <?php esc_html_e( 'Left' ); ?>
- </button>
- <button class="button" value="center">
- <?php esc_html_e( 'Center' ); ?>
- </button>
- <button class="button" value="right">
- <?php esc_html_e( 'Right' ); ?>
- </button>
- <button class="button active" value="none">
- <?php esc_html_e( 'None' ); ?>
- </button>
- </div>
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <fieldset class="setting-group">
+ <legend class="legend-inline"><?php _e( 'Align' ); ?></legend>
+ <span class="setting align">
+ <span class="button-group button-large" data-setting="align">
+ <button class="button" value="left">
+ <?php esc_html_e( 'Left' ); ?>
+ </button>
+ <button class="button" value="center">
+ <?php esc_html_e( 'Center' ); ?>
+ </button>
+ <button class="button" value="right">
+ <?php esc_html_e( 'Right' ); ?>
+ </button>
+ <button class="button active" value="none">
+ <?php esc_html_e( 'None' ); ?>
+ </button>
+ </span>
+ </span>
+ </fieldset>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.attachment ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting size">
- <span><?php _e( 'Size' ); ?></span>
- <select class="size" name="size"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting size">
+ <label for="image-details-size" class="name"><?php _e( 'Size' ); ?></label>
+ <select id="image-details-size" class="size" name="size"
</ins><span class="cx" style="display: block; padding: 0 10px"> data-setting="size"
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.userSettings ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> data-user-setting="imgsize"
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1033,16 +1058,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php _e( 'Custom Size' ); ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </option>
</span><span class="cx" style="display: block; padding: 0 10px"> </select>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
- <label><span><?php _e( 'Width' ); ?> <small>(px)</small></span> <input data-setting="customWidth" type="number" step="1" value="{{ data.model.customWidth }}" /></label><span class="sep">×</span><label><span><?php _e( 'Height' ); ?> <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="custom-size wp-clearfix<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
+ <span class="custom-size-setting">
+ <label for="image-details-size-width"><?php _e( 'Width' ); ?></label>
+ <input type="number" id="image-details-size-width" aria-describedby="image-size-desc" data-setting="customWidth" step="1" value="{{ data.model.customWidth }}" />
+ </span>
+ <span class="sep" aria-hidden="true">×</span>
+ <span class="custom-size-setting">
+ <label for="image-details-size-height"><?php _e( 'Height' ); ?></label>
+ <input type="number" id="image-details-size-height" aria-describedby="image-size-desc" data-setting="customHeight" step="1" value="{{ data.model.customHeight }}" />
+ </span>
+ <p id="image-size-desc" class="description"><?php _e( 'Image size in pixels' ); ?></p>
</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">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="setting link-to">
- <span><?php _e( 'Link To' ); ?></span>
- <select data-setting="link">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting link-to">
+ <label for="image-details-link-to" class="name"><?php _e( 'Link To' ); ?></label>
+ <select id="image-details-link-to" data-setting="link">
</ins><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.attachment ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <option value="file">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php esc_html_e( 'Media File' ); ?>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1062,46 +1096,64 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php esc_html_e( 'None' ); ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </option>
</span><span class="cx" style="display: block; padding: 0 10px"> </select>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <input type="text" class="link-to-custom" data-setting="linkUrl" />
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
+ <span class="setting">
+ <label for="image-details-link-to-custom" class="name"><?php _e( 'URL' ); ?></label>
+ <input type="text" id="image-details-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
+ </span>
+
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="advanced-section">
</span><span class="cx" style="display: block; padding: 0 10px"> <h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="advanced-settings hidden">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="advanced-image">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting title-text">
- <span><?php _e( 'Image Title Attribute' ); ?></span>
- <input type="text" data-setting="title" value="{{ data.model.title }}" />
- </label>
- <label class="setting extra-classes">
- <span><?php _e( 'Image CSS Class' ); ?></span>
- <input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting title-text">
+ <label for="image-details-title-attribute" class="name"><?php _e( 'Image Title Attribute' ); ?></label>
+ <input type="text" id="image-details-title-attribute" data-setting="title" value="{{ data.model.title }}" />
+ </span>
+ <span class="setting extra-classes">
+ <label for="image-details-css-class" class="name"><?php _e( 'Image CSS Class' ); ?></label>
+ <input type="text" id="image-details-css-class" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="advanced-link">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="setting link-target">
- <label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new tab' ); ?></label>
- </div>
- <label class="setting link-rel">
- <span><?php _e( 'Link Rel' ); ?></span>
- <input type="text" data-setting="linkRel" value="{{ data.model.linkRel }}" />
- </label>
- <label class="setting link-class-name">
- <span><?php _e( 'Link CSS Class' ); ?></span>
- <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting link-target">
+ <input type="checkbox" id="image-details-link-target" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>>
+ <label for="image-details-link-target" class="checkbox-label"><?php _e( 'Open link in a new tab' ); ?></label>
+ </span>
+ <span class="setting link-rel">
+ <label for="image-details-link-rel" class="name"><?php _e( 'Link Rel' ); ?></label>
+ <input type="text" id="image-details-link-rel" data-setting="linkRel" value="{{ data.model.linkRel }}" />
+ </span>
+ <span class="setting link-class-name">
+ <label for="image-details-link-css-class" class="name"><?php _e( 'Link CSS Class' ); ?></label>
+ <input type="text" id="image-details-link-css-class" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
+ </span>
</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"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="column-image">
+ <div class="image">
+ <img src="{{ data.model.url }}" draggable="false" alt="" />
+ <# if ( data.attachment && window.imageEdit ) { #>
+ <div class="actions">
+ <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
+ <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
+ </div>
+ <# } #>
+ </div>
+ </div>
</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"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the Image Editor layout. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-image-editor">
</span><span class="cx" style="display: block; padding: 0 10px"> <div id="media-head-{{ data.id }}"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div id="image-editor-{{ data.id }}"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for an embedded Audio details. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-audio-details">
</span><span class="cx" style="display: block; padding: 0 10px"> <# var ext, html5types = {
</span><span class="cx" style="display: block; padding: 0 10px"> mp3: wp.media.view.settings.embedMimes.mp3,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1119,11 +1171,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> delete html5types[ ext ];
</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">- <div class="setting">
- <label for="audio-source"><?php _e( 'URL' ); ?></label>
- <input type="text" id="audio-source" readonly data-setting="src" value="{{ data.model.src }}" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting">
+ <label for="audio-details-source" class="name"><?php _e( 'caca URL' ); ?></label>
+ <input type="text" id="audio-details-source" readonly data-setting="src" value="{{ data.model.src }}" />
</ins><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1134,47 +1186,54 @@
</span><span class="cx" style="display: block; padding: 0 10px"> delete html5types.<?php echo $type; ?>;
</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">- <div class="setting">
- <label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></label>
- <input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting">
+ <label for="audio-details-<?php echo $type . '-source'; ?>" class="name"><?php echo strtoupper( $type ); ?></label>
+ <input type="text" id="audio-details-<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
</ins><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php endforeach ?>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( ! _.isEmpty( html5types ) ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="setting">
- <span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ); ?></span>
- <div class="button-large">
- <# _.each( html5types, function (mime, type) { #>
- <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
- <# } ) #>
- </div>
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <fieldset class="setting-group">
+ <legend class="name"><?php _e( 'Add alternate sources for maximum HTML5 playback' ); ?></legend>
+ <span class="setting">
+ <span class="button-large">
+ <# _.each( html5types, function (mime, type) { #>
+ <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
+ <# } ) #>
+ </span>
+ </span>
+ </fieldset>
</ins><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">- <div class="setting preload">
- <span><?php _e( 'Preload' ); ?></span>
- <div class="button-group button-large" data-setting="preload">
- <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
- <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
- <button class="button active" value="none"><?php _e( 'None' ); ?></button>
- </div>
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <fieldset class="setting-group">
+ <legend class="name"><?php _e( 'Preload' ); ?></legend>
+ <span class="setting preload">
+ <span class="button-group button-large" data-setting="preload">
+ <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
+ <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
+ <button class="button active" value="none"><?php _e( 'None' ); ?></button>
+ </span>
+ </span>
+ </fieldset>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting checkbox-setting autoplay">
- <input type="checkbox" data-setting="autoplay" />
- <span><?php _e( 'Autoplay' ); ?></span>
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting-group">
+ <span class="setting checkbox-setting autoplay">
+ <input type="checkbox" id="audio-details-autoplay" data-setting="autoplay" />
+ <label for="audio-details-autoplay" class="checkbox-label"><?php _e( 'Autoplay' ); ?></label>
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting checkbox-setting">
- <input type="checkbox" data-setting="loop" />
- <span><?php _e( 'Loop' ); ?></span>
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting checkbox-setting">
+ <input type="checkbox" id="audio-details-loop" data-setting="loop" />
+ <label for="audio-details-loop" class="checkbox-label"><?php _e( 'Loop' ); ?></label>
+ </span>
+ </span>
</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"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for an embedded Video details. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-video-details">
</span><span class="cx" style="display: block; padding: 0 10px"> <# var ext, html5types = {
</span><span class="cx" style="display: block; padding: 0 10px"> mp4: wp.media.view.settings.embedMimes.mp4,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1203,11 +1262,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> delete html5types[ ext ];
</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">- <div class="setting">
- <label for="video-source"><?php _e( 'URL' ); ?></label>
- <input type="text" id="video-source" readonly data-setting="src" value="{{ data.model.src }}" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting">
+ <label for="video-details-source" class="name"><?php _e( 'URL' ); ?></label>
+ <input type="text" id="video-details-source" readonly data-setting="src" value="{{ data.model.src }}" />
</ins><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> foreach ( $video_types as $type ) :
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1217,53 +1276,60 @@
</span><span class="cx" style="display: block; padding: 0 10px"> delete html5types.<?php echo $type; ?>;
</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">- <div class="setting">
- <label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></label>
- <input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting">
+ <label for="video-details-<?php echo $type . '-source'; ?>" class="name"><?php echo strtoupper( $type ); ?></label>
+ <input type="text" id="video-details-<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
</ins><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php endforeach ?>
</span><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"> <# if ( ! _.isEmpty( html5types ) ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="setting">
- <span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ); ?></span>
- <div class="button-large">
- <# _.each( html5types, function (mime, type) { #>
- <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
- <# } ) #>
- </div>
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <fieldset class="setting-group">
+ <legend class="name"><?php _e( 'Add alternate sources for maximum HTML5 playback' ); ?></legend>
+ <span class="setting">
+ <span class="button-large">
+ <# _.each( html5types, function (mime, type) { #>
+ <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
+ <# } ) #>
+ </span>
+ </span>
+ </fieldset>
</ins><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"> <# if ( ! _.isEmpty( data.model.poster ) ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="setting">
- <label for="poster-image"><?php _e( 'Poster Image' ); ?></label>
- <input type="text" id="poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting">
+ <label for="video-details-poster-image" class="name"><?php _e( 'Poster Image' ); ?></label>
+ <input type="text" id="video-details-poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
</ins><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="setting preload">
- <span><?php _e( 'Preload' ); ?></span>
- <div class="button-group button-large" data-setting="preload">
- <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
- <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
- <button class="button active" value="none"><?php _e( 'None' ); ?></button>
- </div>
- </div>
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting checkbox-setting autoplay">
- <input type="checkbox" data-setting="autoplay" />
- <span><?php _e( 'Autoplay' ); ?></span>
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <fieldset class="setting-group">
+ <legend class="name"><?php _e( 'Preload' ); ?></legend>
+ <span class="setting preload">
+ <span class="button-group button-large" data-setting="preload">
+ <button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
+ <button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
+ <button class="button active" value="none"><?php _e( 'None' ); ?></button>
+ </span>
+ </span>
+ </fieldset>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="setting checkbox-setting">
- <input type="checkbox" data-setting="loop" />
- <span><?php _e( 'Loop' ); ?></span>
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting-group">
+ <span class="setting checkbox-setting autoplay">
+ <input type="checkbox" id="video-details-autoplay" data-setting="autoplay" />
+ <label for="video-details-autoplay" class="checkbox-label"><?php _e( 'Autoplay' ); ?></label>
+ </span>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="setting" data-setting="content">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="setting checkbox-setting">
+ <input type="checkbox" id="video-details-loop" data-setting="loop" />
+ <label for="video-details-loop" class="checkbox-label"><?php _e( 'Loop' ); ?></label>
+ </span>
+ </span>
+
+ <span class="setting" data-setting="content">
</ins><span class="cx" style="display: block; padding: 0 10px"> <#
</span><span class="cx" style="display: block; padding: 0 10px"> var content = '';
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! _.isEmpty( data.model.content ) ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1270,20 +1336,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var tracks = jQuery( data.model.content ).filter( 'track' );
</span><span class="cx" style="display: block; padding: 0 10px"> _.each( tracks.toArray(), function (track) {
</span><span class="cx" style="display: block; padding: 0 10px"> content += track.outerHTML; #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label for="video-track"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></label>
- <input class="content-track" type="text" id="video-track" readonly value="{{ track.outerHTML }}" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="video-details-track" class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></label>
+ <input class="content-track" type="text" id="video-details-track" readonly value="{{ track.outerHTML }}" />
</ins><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } ); #>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } else { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <span class="name"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span><br />
</ins><span class="cx" style="display: block; padding: 0 10px"> <em><?php _e( 'There are no associated subtitles.' ); ?></em>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> <textarea class="hidden content-setting">{{ content }}</textarea>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </span>
</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"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for a Gallery within the editor. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-editor-gallery">
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.attachments.length ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="gallery gallery-columns-{{ data.columns }}">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1314,11 +1381,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the Crop area layout, used for example in the Customizer. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-crop-content">
</span><span class="cx" style="display: block; padding: 0 10px"> <img class="crop-image" src="{{ data.url }}" alt="<?php esc_attr_e( 'Image crop area preview. Requires mouse interaction.' ); ?>">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="upload-errors"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php // Template for the Site Icon preview, used for example in the Customizer. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-site-icon-preview">
</span><span class="cx" style="display: block; padding: 0 10px"> <h2><?php _e( 'Preview' ); ?></h2>
</span><span class="cx" style="display: block; padding: 0 10px"> <strong aria-hidden="true"><?php _e( 'As a browser icon' ); ?></strong>
</span></span></pre>
</div>
</div>
</body>
</html>