<!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>[35304] trunk/src: Customizer: Make the widgets "Reorder" and "Add a Widget" buttons...</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { 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/35304">35304</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/35304","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>2015-10-20 20:14:51 +0000 (Tue, 20 Oct 2015)</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'>Customizer: Make the widgets "Reorder" and "Add a Widget" buttons... buttons.
For accessibility, UI controls should preferably be native controls. Adds
ARIA attributes and labels to improve accessibility and pair these buttons
with the ones in the Menu Customizer.
Props obenland, TomHarrigan, sanket.parmar, metodiew, afercia.
Fixes <a href="https://core.trac.wordpress.org/ticket/33327">#33327</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscustomizecontrolscss">trunk/src/wp-admin/css/customize-controls.css</a></li>
<li><a href="#trunksrcwpadmincsscustomizenavmenuscss">trunk/src/wp-admin/css/customize-nav-menus.css</a></li>
<li><a href="#trunksrcwpadmincsscustomizewidgetscss">trunk/src/wp-admin/css/customize-widgets.css</a></li>
<li><a href="#trunksrcwpadminjscustomizewidgetsjs">trunk/src/wp-admin/js/customize-widgets.js</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizecontrolphp">trunk/src/wp-includes/class-wp-customize-control.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizewidgetsphp">trunk/src/wp-includes/class-wp-customize-widgets.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscustomizecontrolscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/customize-controls.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-controls.css 2015-10-20 19:19:37 UTC (rev 35303)
+++ trunk/src/wp-admin/css/customize-controls.css 2015-10-20 20:14:51 UTC (rev 35304)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -615,9 +615,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Style for custom settings */
</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><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Dropdowns
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> .accordion-section .dropdown {
</span><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -698,6 +699,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * iOS can't scroll iframes,
</span><span class="cx" style="display: block; padding: 0 10px"> * instead it expands the iframe size to match the size of the content
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> .ios .wp-full-overlay {
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -710,7 +712,7 @@
</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 controls **/
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* Media controls */
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-media .current,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-upload .current,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -995,6 +997,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Themes
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> @-webkit-keyframes customize-reload {
</span><span class="cx" style="display: block; padding: 0 10px"> 0% { opacity: 0; }
</span><span class="cx" style="display: block; padding: 0 10px"> 100% { opacity: 1; }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1228,6 +1231,82 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 25px 0 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Widgets and Menus common styles
+ */
+
+/* higher specificity than .wp-core-ui .button-secondary */
+#customize-theme-controls .add-new-widget,
+#customize-theme-controls .add-new-menu-item {
+ cursor: pointer;
+ float: right;
+ margin-left: 10px;
+ -webkit-transition: all 0.2s;
+ transition: all 0.2s;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ outline: none;
+}
+
+.reordering .add-new-widget,
+.reordering .add-new-menu-item {
+ opacity: 0.2;
+ pointer-events: none;
+ cursor: not-allowed; /* doesn't work in conjunction with pointer-events */
+}
+
+.add-new-widget:before,
+.add-new-menu-item:before {
+ content: "\f132";
+ display: inline-block;
+ position: relative;
+ left: -2px;
+ top: -1px;
+ font: normal 20px/1 dashicons;
+ vertical-align: middle;
+ -webkit-transition: all 0.2s;
+ transition: all 0.2s;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* Reordering */
+.reorder-toggle {
+ float: right;
+ padding: 5px 8px;
+ text-decoration: none;
+ cursor: pointer;
+ outline: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.reorder-toggle:focus {
+ outline: 1px dotted;
+}
+
+.reorder,
+.reordering .reorder-done {
+ display: block;
+ padding: 5px 8px;
+}
+
+.reorder-done,
+.reordering .reorder {
+ display: none;
+ color: #0073aa;
+}
+
+.reorder-toggle:hover .reorder-done,
+.reorder-toggle:active .reorder-done,
+.reorder-toggle:focus .reorder-done {
+ color: #00a0d2;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* Responsive */
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-controls-preview-toggle {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span></span></pre></div>
<a id="trunksrcwpadmincsscustomizenavmenuscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/customize-nav-menus.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-nav-menus.css 2015-10-20 19:19:37 UTC (rev 35303)
+++ trunk/src/wp-admin/css/customize-nav-menus.css 2015-10-20 20:14:51 UTC (rev 35304)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -90,18 +90,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
</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">-/* Menu-item reordering nav. */
-.reordering .customize-control-nav_menu .reorder,
-.customize-control-nav_menu .reorder-done {
- display: none;
-}
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Menu items reordering styles
+ */
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.customize-control-nav_menu .reorder,
-.reordering .customize-control-nav_menu .reorder-done {
- display: inline-block;
- padding: 5px 8px;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .menu-item-reorder-nav {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #fff;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -110,12 +102,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> right: 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">-#customize-theme-controls .reordering .add-new-menu-item {
- opacity: 0.2;
- pointer-events: none;
- cursor: not-allowed;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .menu-item-reorder-nav button {
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: hidden;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -361,10 +347,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer button:focus .toggle-indicator:after {
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-box-shadow:
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 0 0 0 1px #5b9dd9,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 0 0 0 1px #5b9dd9,
</ins><span class="cx" style="display: block; padding: 0 10px"> 0 0 2px 1px rgba(30, 140, 190, .8);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- box-shadow:
- 0 0 0 1px #5b9dd9,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ box-shadow:
+ 0 0 0 1px #5b9dd9,
</ins><span class="cx" style="display: block; padding: 0 10px"> 0 0 2px 1px rgba(30, 140, 190, .8);
</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">@@ -479,9 +465,10 @@
</span><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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/*
- * Add-menu-items mode.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Add-menu-items mode
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-full-overlay-main {
</span><span class="cx" style="display: block; padding: 0 10px"> right: auto; /* This overrides a right: 0; which causes the preview to resize rather than slide off screen at the normal size. */
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -496,34 +483,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> opacity: 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">-/* Add-new button. */
-#customize-theme-controls .add-new-menu-item {
- cursor: pointer;
- float: right;
- margin-left: 10px;
- -webkit-transition: all 0.2s;
- transition: all 0.2s;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- outline: none;
-}
-
-.add-new-menu-item:before {
- content: "\f132";
- display: inline-block;
- position: relative;
- left: -2px;
- top: -1px;
- font: normal 20px/1 dashicons;
- vertical-align: middle;
- -webkit-transition: all 0.2s;
- transition: all 0.2s;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .adding-menu-items .add-new-menu-item,
</span><span class="cx" style="display: block; padding: 0 10px"> .adding-menu-items .add-new-menu-item:hover,
</span><span class="cx" style="display: block; padding: 0 10px"> .add-menu-toggle.open,
</span></span></pre></div>
<a id="trunksrcwpadmincsscustomizewidgetscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/customize-widgets.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-widgets.css 2015-10-20 19:19:37 UTC (rev 35303)
+++ trunk/src/wp-admin/css/customize-widgets.css 2015-10-20 20:14:51 UTC (rev 35304)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -117,45 +117,9 @@
</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">-* Widget reordering styles
-**/
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Widget reordering styles
+ */
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.reorder-toggle {
- float: right;
- padding: 5px 8px;
- text-decoration: none;
- cursor: pointer;
- outline: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-.reorder-toggle:focus {
- outline: 1px dotted;
-}
-
-.reorder-done,
-.reordering .reorder {
- display: none;
-}
-
-.reordering .reorder-done {
- display: block;
- color: #0073aa;
-}
-
-.reordering .reorder-done:hover,
-.reordering .reorder-done:active {
- color: #00a0d2;
-}
-
-#customize-theme-controls .reordering .add-new-widget {
- opacity: 0.2;
- pointer-events: none;
- cursor: not-allowed;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .widget-reorder-nav {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> float: right;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -213,7 +177,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> cursor: default;
</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">-#customize-theme-controls .move-widget-area {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-theme-controls .move-widget-area {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> background: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> border: 1px solid #dedede;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -288,42 +252,15 @@
</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">-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Styles for new widget addition panel
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-full-overlay-main {
</span><span class="cx" style="display: block; padding: 0 10px"> right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#customize-theme-controls .add-new-widget {
- cursor: pointer;
- float: right;
- margin-left: 10px;
- -webkit-transition: all 0.2s;
- transition: all 0.2s;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- outline: none;
-}
-
-.add-new-widget:before {
- content: "\f132";
- display: inline-block;
- position: relative;
- left: -2px;
- top: -1px;
- font: normal 20px/1 dashicons;
- vertical-align: middle;
- -webkit-transition: all 0.2s;
- transition: all 0.2s;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> body.adding-widget .add-new-widget,
</span><span class="cx" style="display: block; padding: 0 10px"> body.adding-widget .add-new-widget:hover {
</span><span class="cx" style="display: block; padding: 0 10px"> background: #eee;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -456,7 +393,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Widget Icon styling
</span><span class="cx" style="display: block; padding: 0 10px"> * No plurals in naming.
</span><span class="cx" style="display: block; padding: 0 10px"> * Ordered from lowest to highest specificity.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- **/
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ */
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #available-widgets .widget-title {
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizewidgetsjs"></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/js/customize-widgets.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/customize-widgets.js 2015-10-20 19:19:37 UTC (rev 35303)
+++ trunk/src/wp-admin/js/customize-widgets.js 2015-10-20 20:14:51 UTC (rev 35304)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1789,11 +1789,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Keyboard-accessible reordering
</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.container.find( '.reorder-toggle' ).on( 'click keydown', function( event ) {
- if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar
- return;
- }
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ this.container.find( '.reorder-toggle' ).on( 'click', function() {
</ins><span class="cx" style="display: block; padding: 0 10px"> self.toggleReordering( ! self.isReordering );
</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">@@ -1804,18 +1800,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> _setupAddition: function() {
</span><span class="cx" style="display: block; padding: 0 10px"> var self = this;
</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.container.find( '.add-new-widget' ).on( 'click keydown', function( event ) {
- if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar
- return;
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ this.container.find( '.add-new-widget' ).on( 'click', function() {
+ var addNewWidgetBtn = $( this );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( self.$sectionContent.hasClass( 'reordering' ) ) {
</span><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="cx" style="display: block; padding: 0 10px"> if ( ! $( 'body' ).hasClass( 'adding-widget' ) ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ addNewWidgetBtn.attr( 'aria-expanded', 'true' );
</ins><span class="cx" style="display: block; padding: 0 10px"> api.Widgets.availableWidgetsPanel.open( self );
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ addNewWidgetBtn.attr( 'aria-expanded', 'false' );
</ins><span class="cx" style="display: block; padding: 0 10px"> api.Widgets.availableWidgetsPanel.close();
</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">@@ -1869,6 +1865,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @todo We should have a reordering state instead and rename this to onChangeReordering
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> toggleReordering: function( showOrHide ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var addNewWidgetBtn = this.$sectionContent.find( '.add-new-widget' ),
+ reorderBtn = this.container.find( '.reorder-toggle' ),
+ widgetsTitle = this.$sectionContent.find( '.widget-title' );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> showOrHide = Boolean( showOrHide );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( showOrHide === this.$sectionContent.hasClass( 'reordering' ) ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1883,10 +1883,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> formControl.collapse();
</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">- this.$sectionContent.find( '.first-widget .move-widget' ).focus();
- this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', -1 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ addNewWidgetBtn.attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
+ reorderBtn.attr( 'aria-label', l10n.reorderLabelOff );
+ wp.a11y.speak( l10n.reorderModeOn );
+ // Hide widget titles while reordering: title is already in the reorder controls.
+ widgetsTitle.attr( 'aria-hidden', 'true' );
</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">- this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', 0 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ addNewWidgetBtn.removeAttr( 'tabindex aria-hidden' );
+ reorderBtn.attr( 'aria-label', l10n.reorderLabelOn );
+ wp.a11y.speak( l10n.reorderModeOff );
+ widgetsTitle.attr( 'aria-hidden', 'false' );
</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="trunksrcwpincludesclasswpcustomizecontrolphp"></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/class-wp-customize-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-control.php 2015-10-20 19:19:37 UTC (rev 35303)
+++ trunk/src/wp-includes/class-wp-customize-control.php 2015-10-20 20:14:51 UTC (rev 35304)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -344,7 +344,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 3.4.0
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> protected function render() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $id = 'customize-control-' . str_replace( '[', '-', str_replace( ']', '', $this->id ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $id = 'customize-control-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
</ins><span class="cx" style="display: block; padding: 0 10px"> $class = 'customize-control customize-control-' . $this->type;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> ?><li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1312,7 +1312,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </span>
</span><span class="cx" style="display: block; padding: 0 10px"> </label>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="container">
</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"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="actions">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php if ( current_user_can( 'upload_files' ) ): ?>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1465,15 +1465,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @access public
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function render_content() {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $id = 'reorder-widgets-desc-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
</ins><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span class="button-secondary add-new-widget" tabindex="0">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="button-secondary add-new-widget" aria-expanded="false" aria-controls="available-widgets">
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php _e( 'Add a Widget' ); ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </span>
-
- <span class="reorder-toggle" tabindex="0">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </button>
+ <button type="button" class="not-a-button reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
</ins><span class="cx" style="display: block; padding: 0 10px"> <span class="reorder"><?php _ex( 'Reorder', 'Reorder widgets in Customizer' ); ?></span>
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering widgets in Customizer' ); ?></span>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </button>
+ <p class="screen-reader-text" id="<?php echo esc_attr( $id ); ?>"><?php _e( 'When in reorder mode, additional controls to reorder widgets will be available in the widgets list above.' ); ?></p>
</ins><span class="cx" style="display: block; padding: 0 10px"> <?php
</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="trunksrcwpincludesclasswpcustomizewidgetsphp"></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/class-wp-customize-widgets.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-widgets.php 2015-10-20 19:19:37 UTC (rev 35303)
+++ trunk/src/wp-includes/class-wp-customize-widgets.php 2015-10-20 20:14:51 UTC (rev 35304)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -674,6 +674,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'widgetMovedUp' => __( 'Widget moved up' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'widgetMovedDown' => __( 'Widget moved down' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'noAreasRendered' => __( 'There are no widget areas currently rendered in the preview. Navigate in the preview to a template that makes use of a widget area in order to access its widgets here.' ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'reorderModeOn' => __( 'Reorder mode enabled' ),
+ 'reorderModeOff' => __( 'Reorder mode closed' ),
+ 'reorderLabelOn' => esc_attr__( 'Reorder widgets' ),
+ 'reorderLabelOff' => esc_attr__( 'Close reorder mode' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'tpl' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'widgetReorderNav' => $widget_reorder_nav_tpl,
</span></span></pre>
</div>
</div>
</body>
</html>