<!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>[46375] trunk: Accessibility: Media: Add more headings in the Media Modal.</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/46375">46375</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/46375","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-10-03 12:09:31 +0000 (Thu, 03 Oct 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: Media: Add more headings in the Media Modal.
Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces.
- adds three new headings within the media modal
- improves plural form translation for "item selected" by using `wp.i18n`
- horizontally centers the media modal menu in the responsive view
Props kjellr, karmatosed, melchoyce, afercia.
See <a href="https://core.trac.wordpress.org/ticket/47149">#47149</a>.
Fixes <a href="https://core.trac.wordpress.org/ticket/47610">#47610</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcjsmediaviewsattachmentsbrowserjs">trunk/src/js/media/views/attachments/browser.js</a></li>
<li><a href="#trunksrcjsmediaviewsselectionjs">trunk/src/js/media/views/selection.js</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>
<li><a href="#trunksrcwpincludesmediaphp">trunk/src/wp-includes/media.php</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
<li><a href="#trunktestsqunitindexhtml">trunk/tests/qunit/index.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcjsmediaviewsattachmentsbrowserjs"></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/attachments/browser.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/media/views/attachments/browser.js 2019-10-02 23:21:17 UTC (rev 46374)
+++ trunk/src/js/media/views/attachments/browser.js 2019-10-03 12:09:31 UTC (rev 46375)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -132,7 +132,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"> createToolbar: function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var LibraryViewSwitcher, Filters, toolbarOptions;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var LibraryViewSwitcher, Filters, toolbarOptions,
+ showFilterByType = -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> toolbarOptions = {
</span><span class="cx" style="display: block; padding: 0 10px"> controller: this.controller
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -153,9 +154,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> priority: -60
</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 ( -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] ) ) {
- // "Filters" will return a <select>, need to render
- // screen reader text before
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( showFilterByType || this.options.date ) {
+ /*
+ * Create a h2 heading before the select elements that filter attachments.
+ * This heading is visible in the modal and visually hidden in the grid.
+ */
+ this.toolbar.set( 'filters-heading', new wp.media.view.Heading( {
+ priority: -100,
+ text: l10n.filterAttachments,
+ level: 'h2',
+ className: 'media-attachments-filter-heading'
+ }).render() );
+ }
+
+ if ( showFilterByType ) {
+ // "Filters" is a <select>, a visually hidden label element needs to be rendered before.
</ins><span class="cx" style="display: block; padding: 0 10px"> this.toolbar.set( 'filtersLabel', new wp.media.view.Label({
</span><span class="cx" style="display: block; padding: 0 10px"> value: l10n.filterByType,
</span><span class="cx" style="display: block; padding: 0 10px"> attributes: {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -195,7 +208,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> priority: -90
</span><span class="cx" style="display: block; padding: 0 10px"> }).render() );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // DateFilter is a <select>, screen reader text needs to be rendered before
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // DateFilter is a <select>, a visually hidden label element needs to be rendered before.
</ins><span class="cx" style="display: block; padding: 0 10px"> this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
</span><span class="cx" style="display: block; padding: 0 10px"> value: l10n.filterByDate,
</span><span class="cx" style="display: block; padding: 0 10px"> attributes: {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -317,7 +330,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"> } else if ( this.options.date ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // DateFilter is a <select>, screen reader text needs to be rendered before
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // DateFilter is a <select>, a visually hidden label element needs to be rendered before.
</ins><span class="cx" style="display: block; padding: 0 10px"> this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
</span><span class="cx" style="display: block; padding: 0 10px"> value: l10n.filterByDate,
</span><span class="cx" style="display: block; padding: 0 10px"> attributes: {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -333,7 +346,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"> if ( this.options.search ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Search is an input, screen reader text needs to be rendered before
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Search is an input, a visually hidden label element needs to be rendered before.
</ins><span class="cx" style="display: block; padding: 0 10px"> this.toolbar.set( 'searchLabel', new wp.media.view.Label({
</span><span class="cx" style="display: block; padding: 0 10px"> value: l10n.searchMediaLabel,
</span><span class="cx" style="display: block; padding: 0 10px"> attributes: {
</span></span></pre></div>
<a id="trunksrcjsmediaviewsselectionjs"></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/selection.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/media/views/selection.js 2019-10-02 23:21:17 UTC (rev 46374)
+++ trunk/src/js/media/views/selection.js 2019-10-03 12:09:31 UTC (rev 46375)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,4 +1,5 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-var l10n = wp.media.view.l10n,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+var _n = wp.i18n._n,
+ sprintf = wp.i18n.sprintf,
</ins><span class="cx" style="display: block; padding: 0 10px"> Selection;
</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">@@ -60,7 +61,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> this.$el.toggleClass( 'one', 1 === collection.length );
</span><span class="cx" style="display: block; padding: 0 10px"> this.$el.toggleClass( 'editing', editing );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- this.$('.count').text( l10n.selected.replace('%d', collection.length) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ this.$( '.count' ).text(
+ /* translators: %s: Number of selected media attachments. */
+ sprintf( _n( '%s item selected', '%s items selected', collection.length ), collection.length )
+ );
</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"> edit: function( event ) {
</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-10-02 23:21:17 UTC (rev 46374)
+++ trunk/src/wp-includes/css/media-views.css 2019-10-03 12:09:31 UTC (rev 46375)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -268,7 +268,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-modal-content .media-frame select.attachment-filters {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-top: 11px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: 32px;
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-right: 2%;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 42%;
</span><span class="cx" style="display: block; padding: 0 10px"> width: calc(48% - 12px);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -307,12 +307,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border-top: 1px solid #ddd;
</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 screen and (max-width: 782px) {
- .media-frame-toolbar .media-toolbar {
- bottom: -48px;
- }
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .media-toolbar-primary {
</span><span class="cx" style="display: block; padding: 0 10px"> float: right;
</span><span class="cx" style="display: block; padding: 0 10px"> height: 100%;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -768,6 +762,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-frame.hide-menu .media-frame-menu,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-frame.hide-menu .media-frame-menu-heading,
</ins><span class="cx" style="display: block; padding: 0 10px"> .media-frame.hide-router .media-frame-router,
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame.hide-toolbar .media-frame-toolbar {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -780,6 +775,32 @@
</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><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.media-frame-menu-heading,
+.media-attachments-filter-heading {
+ position: absolute;
+ left: 20px;
+ top: 22px;
+ margin: 0;
+ font-size: 13px;
+ line-height: 1;
+ /* Above the media-frame-menu. */
+ z-index: 151;
+}
+
+.media-attachments-filter-heading {
+ top: 10px;
+ left: 16px;
+}
+
+.mode-grid .media-attachments-filter-heading {
+ top: 0;
+ left: -9999px;
+}
+
+.mode-grid .media-frame-actions-heading {
+ display: none;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-core-ui .button.media-frame-menu-toggle {
</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">@@ -849,7 +870,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Search
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame .search {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-top: 10px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: 32px;
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: 4px;
</span><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="lines" style="display: block; padding: 0 10px; color: #888">@@ -1106,7 +1127,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .attachments-browser .media-toolbar {
</span><span class="cx" style="display: block; padding: 0 10px"> right: 300px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- height: 50px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ height: 72px;
+ background: #fff;
</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"> .attachments-browser.hide-sidebar .media-toolbar {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1127,7 +1149,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .attachments-browser .attachments,
</span><span class="cx" style="display: block; padding: 0 10px"> .attachments-browser .uploader-inline {
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- top: 50px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ top: 72px;
</ins><span class="cx" style="display: block; padding: 0 10px"> left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> right: 300px;
</span><span class="cx" style="display: block; padding: 0 10px"> bottom: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2330,7 +2352,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> z-index: 2000;
</span><span class="cx" style="display: block; padding: 0 10px"> top: 75px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- left: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ left: 50%;
+ transform: translateX(-50%);
</ins><span class="cx" style="display: block; padding: 0 10px"> right: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> bottom: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 5px 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2350,17 +2373,35 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 5px 10px;
</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">+ /* Visually hide the menu heading keeping it available to assistive technologies. */
+ .media-frame-menu-heading {
+ clip: rect(1px, 1px, 1px, 1px);
+ -webkit-clip-path: inset(50%);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ padding: 0;
+ width: 1px;
+ word-wrap: normal !important;
+ }
+
+ /* Reveal the menu toggle button. */
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
</span><span class="cx" style="display: block; padding: 0 10px"> display: inline-flex;
</span><span class="cx" style="display: block; padding: 0 10px"> align-items: center;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- vertical-align: top;
- min-height: 40px;
- margin: -6px 6px 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ margin: -6px 0 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: 0 2px 0 12px;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 0.875rem;
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: 600;
</span><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><span class="cx" style="display: block; padding: 0 10px"> background: transparent;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Only for IE11 to vertically align text within the inline-flex button */
+ height: 0.1%;
+ /* Modern browsers */
+ min-height: 40px;
</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"> .wp-core-ui .button.media-frame-menu-toggle:hover,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2564,8 +2605,31 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .media-frame select {
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 16px;
</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 .media-toolbar input[type="search"] {
+ line-height: 1.625; /* 26px */
+ }
</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 screen and (max-width: 782px) {
+ .attachments-browser .media-toolbar {
+ height: 82px;
+ }
+
+ .attachments-browser .attachments,
+ .attachments-browser .uploader-inline {
+ top: 82px;
+ }
+
+ .media-frame .media-toolbar input[type="search"] {
+ line-height: 2.25; /* 36px */
+ }
+
+ .media-frame-toolbar .media-toolbar {
+ bottom: -48px;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* Responsive on portrait and landscape */
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (max-width: 640px), screen and (max-height: 400px) {
</span><span class="cx" style="display: block; padding: 0 10px"> /* Full-bleed modal */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2635,10 +2699,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-core-ui.wp-customizer .media-button {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 13px;
</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.hide-router .media-frame-content {
- top: 40px;
- }
</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></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-10-02 23:21:17 UTC (rev 46374)
+++ trunk/src/wp-includes/media-template.php 2019-10-03 12:09:31 UTC (rev 46375)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -178,6 +178,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php // Template for the media frame: used both in the media grid and in the media modal. ?>
</span><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-title" id="media-frame-title"></div>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <h2 class="media-frame-menu-heading"><?php _e( 'Media Types' ); ?></h2>
</ins><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button button-link media-frame-menu-toggle" aria-expanded="false">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php _e( 'Media Types' ); ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="dashicons dashicons-arrow-down" aria-hidden="true"></span>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -187,6 +188,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="media-frame-router"></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"> </div>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <h2 class="media-frame-actions-heading screen-reader-text"><?php _e( 'Available actions' ); ?></h2>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="media-frame-toolbar"></div>
</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></pre></div>
<a id="trunksrcwpincludesmediaphp"></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.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/media.php 2019-10-02 23:21:17 UTC (rev 46374)
+++ trunk/src/wp-includes/media.php 2019-10-03 12:09:31 UTC (rev 46375)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3931,7 +3931,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'addToVideoPlaylistTitle' => __( 'Add to Video Playlist' ),
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Headings
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'attachmentsList' => __( 'Attachments list' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'filterAttachments' => __( 'Filter Media' ),
+ 'attachmentsList' => __( 'Media list' ),
</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"> /**
</span></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></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/script-loader.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/script-loader.php 2019-10-02 23:21:17 UTC (rev 46374)
+++ trunk/src/wp-includes/script-loader.php 2019-10-03 12:09:31 UTC (rev 46375)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1617,7 +1617,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // To enqueue media-views or media-editor, call wp_enqueue_media().
</span><span class="cx" style="display: block; padding: 0 10px"> // Both rely on numerous settings, styles, and templates to operate correctly.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'wp-api-request', 'wp-a11y' ), false, 1 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'wp-api-request', 'wp-a11y', 'wp-i18n' ), false, 1 );
</ins><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor' ), false, 1 );
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'jquery', 'media-views', 'media-audiovideo' ), false, 1 );
</span></span></pre></div>
<a id="trunktestsqunitindexhtml"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/index.html</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/index.html 2019-10-02 23:21:17 UTC (rev 46374)
+++ trunk/tests/qunit/index.html 2019-10-03 12:09:31 UTC (rev 46375)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -44,8 +44,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../build/wp-includes/js/mediaelement/mediaelement-and-player.min.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../build/wp-includes/js/mediaelement/wp-mediaelement.js"></script>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <script src="../../build/wp-includes/js/dist/i18n.js"></script>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- window._wpMediaViewsL10n = {"url":"URL","addMedia":"Add Media","search":"Search","select":"Select","cancel":"Cancel","update":"Update","replace":"Replace","remove":"Remove","back":"Back","selected":"%d selected","dragInfo":"Drag and drop to reorder media files.","uploadFilesTitle":"Upload Files","uploadImagesTitle":"Upload Images","mediaLibraryTitle":"Media Library","insertMediaTitle":"Add Media","createNewGallery":"Create a new gallery","createNewPlaylist":"Create a new playlist","createNewVideoPlaylist":"Create a new video playlist&qu
ot;,"returnToLibrary":"\u2190 Return to library","allMediaItems":"All media items","allDates":"All dates","noItemsFound":"No items found.","insertIntoPost":"Insert into post","unattached":"Unattached","mine":"Mine","trash":"Trash","uploadedToThisPost":"Uploaded to this post","warnDelete":"You are about to permanently delete this item from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkDelete":"You are about to permanently delete these items from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkTrash":"You are about to trash these items.\n 'Cancel' to stop, 'OK' to delete.","bulkSelect":"Bulk Select","trashSelected":"Move to Trash&quo
t;,"restoreSelected":"Restore from Trash","deletePermanently":"Delete Permanently","apply":"Apply","filterByDate":"Filter by date","filterByType":"Filter by type","searchMediaLabel":"Search Media","searchMediaPlaceholder":"Search media items...","noMedia":"No media files found.","attachmentDetails":"Attachment Details","insertFromUrlTitle":"Insert from URL","setFeaturedImageTitle":"Featured Image","setFeaturedImage":"Set featured image","createGalleryTitle":"Create Gallery","editGalleryTitle":"Edit Gallery","cancelGalleryTitle":"\u2190 Cancel Gallery","insertGallery":"Insert gallery","updateGallery":"Update gallery","addToGallery":"Ad
d to gallery","addToGalleryTitle":"Add to Gallery","reverseOrder":"Reverse order","imageDetailsTitle":"Image Details","imageReplaceTitle":"Replace Image","imageDetailsCancel":"Cancel Edit","editImage":"Edit Image","chooseImage":"Choose Image","selectAndCrop":"Select and Crop","skipCropping":"Skip Cropping","cropImage":"Crop Image","cropYourImage":"Crop your image","cropping":"Cropping\u2026","suggestedDimensions":"Suggested image dimensions: %1$s by %2$s pixels.","cropError":"There has been an error cropping your image.","audioDetailsTitle":"Audio Details","audioReplaceTitle":"Replace Audio","audioAddSourceTitle":"Add Audio Source","audioD
etailsCancel":"Cancel Edit","videoDetailsTitle":"Video Details","videoReplaceTitle":"Replace Video","videoAddSourceTitle":"Add Video Source","videoDetailsCancel":"Cancel Edit","videoSelectPosterImageTitle":"Select Poster Image","videoAddTrackTitle":"Add Subtitles","playlistDragInfo":"Drag and drop to reorder tracks.","createPlaylistTitle":"Create Audio Playlist","editPlaylistTitle":"Edit Audio Playlist","cancelPlaylistTitle":"\u2190 Cancel Audio Playlist","insertPlaylist":"Insert audio playlist","updatePlaylist":"Update audio playlist","addToPlaylist":"Add to audio playlist","addToPlaylistTitle":"Add to Audio Playlist","videoPlaylistDragInfo":"Drag and drop to reorder videos.&qu
ot;,"createVideoPlaylistTitle":"Create Video Playlist","editVideoPlaylistTitle":"Edit Video Playlist","cancelVideoPlaylistTitle":"\u2190 Cancel Video Playlist","insertVideoPlaylist":"Insert video playlist","updateVideoPlaylist":"Update video playlist","addToVideoPlaylist":"Add to video playlist","addToVideoPlaylistTitle":"Add to Video Playlist","settings":{"tabs":[],"tabUrl":"http:\/\/src.wordpress-develop.test\/wp-admin\/media-upload.php?chromeless=1","mimeTypes":{"image":"Images","audio":"Audio","video":"Video"},"captions":true,"nonce":{"sendToEditor":"68dd6db760"},"post":{"id":0},"defaultProps":{"link":"none","align":"","
size":""},"attachmentCounts":{"audio":1,"video":1},"oEmbedProxyUrl":"http:\/\/src.wordpress-develop.test\/wp-json\/oembed\/1.0\/proxy","embedExts":["mp3","ogg","flac","m4a","wav","mp4","m4v","webm","ogv","flv"],"embedMimes":{"mp3":"audio\/mpeg","ogg":"audio\/ogg","flac":"audio\/flac","m4a":"audio\/mpeg","wav":"audio\/wav","mp4":"video\/mp4","m4v":"video\/mp4","webm":"video\/webm","ogv":"video\/ogg","flv":"video\/x-flv"},"contentWidth":640,"months":[{"year":"2018","month":"11","text":"November 2018"},{"year":"201
8","month":"10","text":"October 2018"},{"year":"2018","month":"7","text":"July 2018"},{"year":"2014","month":"1","text":"January 2014"},{"year":"2013","month":"12","text":"December 2013"},{"year":"2013","month":"9","text":"September 2013"},{"year":"2013","month":"4","text":"April 2013"},{"year":"2013","month":"3","text":"March 2013"},{"year":"2012","month":"7","text":"July 2012"},{"year":"2012","month":"6","text":"June 2012"},{"year":"2011","m
onth":"7","text":"July 2011"},{"year":"2011","month":"1","text":"January 2011"}],"mediaTrash":0}};
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ window._wpMediaViewsL10n = {"mediaFrameDefaultTitle":"Media","url":"URL","addMedia":"Add Media","search":"Search","select":"Select","cancel":"Cancel","update":"Update","replace":"Replace","remove":"Remove","back":"Back","selected":"%d selected","dragInfo":"Drag and drop to reorder media files.","uploadFilesTitle":"Upload Files","uploadImagesTitle":"Upload Images","mediaLibraryTitle":"Media Library","insertMediaTitle":"Add Media","createNewGallery":"Create a new gallery","createNewPlaylist":"Create a new playlist","createNewVide
oPlaylist":"Create a new video playlist","returnToLibrary":"\u2190 Return to library","allMediaItems":"All media items","allDates":"All dates","noItemsFound":"No items found.","insertIntoPost":"Insert into post","unattached":"Unattached","mine":"Mine","trash":"Trash","uploadedToThisPost":"Uploaded to this post","warnDelete":"You are about to permanently delete this item from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkDelete":"You are about to permanently delete these items from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkTrash":"You are about to trash these items.\n 'Cancel' to stop, 'OK' to delete.","bulkSelect":"Bulk Select&quo
t;,"trashSelected":"Move to Trash","restoreSelected":"Restore from Trash","deletePermanently":"Delete Permanently","apply":"Apply","filterByDate":"Filter by date","filterByType":"Filter by type","searchMediaLabel":"Search Media","searchMediaPlaceholder":"Search media items...","mediaFound":"Number of media items found: %d","mediaFoundHasMoreResults":"Number of media items displayed: %d. Scroll the page for more results.","noMedia":"No media items found.","noMediaTryNewSearch":"No media items found. Try a different search.","attachmentDetails":"Attachment Details","insertFromUrlTitle":"Insert from URL","setFeaturedImageTitle":"Featured Image","setFeaturedImage":"Set featured
image","createGalleryTitle":"Create Gallery","editGalleryTitle":"Edit Gallery","cancelGalleryTitle":"\u2190 Cancel Gallery","insertGallery":"Insert gallery","updateGallery":"Update gallery","addToGallery":"Add to gallery","addToGalleryTitle":"Add to Gallery","reverseOrder":"Reverse order","imageDetailsTitle":"Image Details","imageReplaceTitle":"Replace Image","imageDetailsCancel":"Cancel Edit","editImage":"Edit Image","chooseImage":"Choose Image","selectAndCrop":"Select and Crop","skipCropping":"Skip Cropping","cropImage":"Crop Image","cropYourImage":"Crop your image","cropping":"Cropping\u2026","suggestedDimensions&qu
ot;:"Suggested image dimensions: %1$s by %2$s pixels.","cropError":"There has been an error cropping your image.","audioDetailsTitle":"Audio Details","audioReplaceTitle":"Replace Audio","audioAddSourceTitle":"Add Audio Source","audioDetailsCancel":"Cancel Edit","videoDetailsTitle":"Video Details","videoReplaceTitle":"Replace Video","videoAddSourceTitle":"Add Video Source","videoDetailsCancel":"Cancel Edit","videoSelectPosterImageTitle":"Select Poster Image","videoAddTrackTitle":"Add Subtitles","playlistDragInfo":"Drag and drop to reorder tracks.","createPlaylistTitle":"Create Audio Playlist","editPlaylistTitle":"Edit Audio Playlist","cancelPlaylistTitle":"\u2190 Cancel Audio Playlist
","insertPlaylist":"Insert audio playlist","updatePlaylist":"Update audio playlist","addToPlaylist":"Add to audio playlist","addToPlaylistTitle":"Add to Audio Playlist","videoPlaylistDragInfo":"Drag and drop to reorder videos.","createVideoPlaylistTitle":"Create Video Playlist","editVideoPlaylistTitle":"Edit Video Playlist","cancelVideoPlaylistTitle":"\u2190 Cancel Video Playlist","insertVideoPlaylist":"Insert video playlist","updateVideoPlaylist":"Update video playlist","addToVideoPlaylist":"Add to video playlist","addToVideoPlaylistTitle":"Add to Video Playlist","filterAttachments":"Filter Media","attachmentsList":"Media list","settings":{"tabs":[],"tabUrl":"http:\/\
/build.wordpress-develop.test\/wp-admin\/media-upload.php?chromeless=1","mimeTypes":{"image":"Images","audio":"Audio","video":"Video","application\/msword,application\/vnd.openxmlformats-officedocument.wordprocessingml.document,application\/vnd.ms-word.document.macroEnabled.12,application\/vnd.ms-word.template.macroEnabled.12,application\/vnd.oasis.opendocument.text,application\/vnd.apple.pages,application\/pdf,application\/vnd.ms-xpsdocument,application\/oxps,application\/rtf,application\/wordperfect,application\/octet-stream":"Documents","application\/vnd.apple.numbers,application\/vnd.oasis.opendocument.spreadsheet,application\/vnd.ms-excel,application\/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application\/vnd.ms-excel.sheet.macroEnabled.12,application\/vnd.ms-excel.sheet.binary.macroEnabled.12":"Spreadsheets","application\/x-gzip,application\/rar,a
pplication\/x-tar,application\/zip,application\/x-7z-compressed":"Archives"},"captions":true,"nonce":{"sendToEditor":"078fccea44"},"post":{"id":7734,"nonce":"b81d45d05c","featuredImageId":-1},"defaultProps":{"link":"","align":"","size":""},"attachmentCounts":{"audio":1,"video":1},"oEmbedProxyUrl":"http:\/\/build.wordpress-develop.test\/wp-json\/oembed\/1.0\/proxy","embedExts":["mp3","ogg","flac","m4a","wav","mp4","m4v","webm","ogv","flv"],"embedMimes":{"mp3":"audio\/mpeg","ogg":"audio\/ogg","flac":"audio\/flac","m4a":"audio\/mpeg","wav":"audio\/wav&qu
ot;,"mp4":"video\/mp4","m4v":"video\/mp4","webm":"video\/webm","ogv":"video\/ogg","flv":"video\/x-flv"},"contentWidth":580,"months":[{"year":"2019","month":"10","text":"October 2019"},{"year":"2019","month":"9","text":"September 2019"},{"year":"2019","month":"7","text":"July 2019"},{"year":"2019","month":"6","text":"June 2019"},{"year":"2014","month":"1","text":"January 2014"},{"year":"2013","month":"12","text":"December 2013"},{"year":"2013","month":"9","text":&
quot;September 2013"},{"year":"2013","month":"4","text":"April 2013"},{"year":"2013","month":"3","text":"March 2013"},{"year":"2012","month":"7","text":"July 2012"},{"year":"2012","month":"6","text":"June 2012"},{"year":"2011","month":"7","text":"July 2011"},{"year":"2011","month":"1","text":"January 2011"}],"mediaTrash":0}};
</ins><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../build/wp-includes/js/media-views.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../build/wp-includes/js/media-editor.js"></script>
</span></span></pre>
</div>
</div>
</body>
</html>