<!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>[41586] trunk/src: Accessibility: CodeMirror editing areas minor improvements.</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/41586">41586</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/41586","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>2017-09-24 15:59:56 +0000 (Sun, 24 Sep 2017)</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: CodeMirror editing areas minor improvements.
- properly labels all the code editor areas (Theme/Plugin, Custom HTML widget, Additional CSS), whether CodeMirror is enabled or disabled
- adds `role="textbox"` and `aria-multiline="true"` to the CodeMirror editing area to allow assistive technologies properly identify it as a textarea
- standardizes the "keyboard trap" help text across the admin and keeps it as a list for better readability
- use the Help text elements as target for `aria-describedby`, to make screen readers read out the help text when focusing the editors
- fixes the `aria-expanded` attribute usage in the Customizer "Additional CSS" help toggle
- moves focus to the CodeMirror editing area when clicking on the associated label
- in the Plugin editor screen: changes a `<big>` element to `<h2>` for better semantics and consistency with the Theme editor screen
- also, removes a few textdomain leftovers, see `better-code-editing` and `default`
Props westonruter, melchoyce, afercia.
Fixes <a href="https://core.trac.wordpress.org/ticket/41872">#41872</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscommoncss">trunk/src/wp-admin/css/common.css</a></li>
<li><a href="#trunksrcwpadmincsscustomizecontrolscss">trunk/src/wp-admin/css/customize-controls.css</a></li>
<li><a href="#trunksrcwpadminjscustomizecontrolsjs">trunk/src/wp-admin/js/customize-controls.js</a></li>
<li><a href="#trunksrcwpadminjsthemeplugineditorjs">trunk/src/wp-admin/js/theme-plugin-editor.js</a></li>
<li><a href="#trunksrcwpadminjswidgetscustomhtmlwidgetsjs">trunk/src/wp-admin/js/widgets/custom-html-widgets.js</a></li>
<li><a href="#trunksrcwpadminplugineditorphp">trunk/src/wp-admin/plugin-editor.php</a></li>
<li><a href="#trunksrcwpadminthemeeditorphp">trunk/src/wp-admin/theme-editor.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizemanagerphp">trunk/src/wp-includes/class-wp-customize-manager.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizepanelphp">trunk/src/wp-includes/class-wp-customize-panel.php</a></li>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizecodeeditorcontrolphp">trunk/src/wp-includes/customize/class-wp-customize-code-editor-control.php</a></li>
<li><a href="#trunksrcwpincludeswidgetsclasswpwidgetcustomhtmlphp">trunk/src/wp-includes/widgets/class-wp-widget-custom-html.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscommoncss"></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/common.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/common.css 2017-09-24 15:15:35 UTC (rev 41585)
+++ trunk/src/wp-admin/css/common.css 2017-09-24 15:59:56 UTC (rev 41586)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3035,6 +3035,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> height: calc( 100vh - 220px );
</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">+#template label {
+ display: inline-block;
+ margin-bottom: 1em;
+ font-weight: 600;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* rtl:ignore */
</span><span class="cx" style="display: block; padding: 0 10px"> #template textarea,
</span><span class="cx" style="display: block; padding: 0 10px"> #docs-list {
</span></span></pre></div>
<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 2017-09-24 15:15:35 UTC (rev 41585)
+++ trunk/src/wp-admin/css/customize-controls.css 2017-09-24 15:59:56 UTC (rev 41586)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -550,12 +550,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 22px;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</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"> .customize-section-description ul {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 1em;
</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"> .customize-section-description ul > li {
</span><span class="cx" style="display: block; padding: 0 10px"> list-style: disc;
</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"> .section-description-buttons {
</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">@@ -1197,12 +1200,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> height: 500px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-section-description-container + #customize-control-custom_css .customize-control-title {
+ margin-left: 12px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-section-description-container + #customize-control-custom_css:last-child textarea {
</span><span class="cx" style="display: block; padding: 0 10px"> border-right: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> border-left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> height: calc( 100vh - 185px );
</span><span class="cx" style="display: block; padding: 0 10px"> resize: none;
</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"> .customize-section-description-container + #customize-control-custom_css:last-child {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: -12px;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 299px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1213,6 +1221,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
</span><span class="cx" style="display: block; padding: 0 10px"> height: calc( 100vh - 185px );
</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"> .CodeMirror-lint-tooltip,
</span><span class="cx" style="display: block; padding: 0 10px"> .CodeMirror-hints {
</span><span class="cx" style="display: block; padding: 0 10px"> z-index: 500000 !important;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1227,6 +1236,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-section-description-container + #customize-control-custom_css:last-child {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 0;
</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"> .customize-section-description-container + #customize-control-custom_css:last-child textarea {
</span><span class="cx" style="display: block; padding: 0 10px"> height: calc( 100vh - 140px );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizecontrolsjs"></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-controls.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/customize-controls.js 2017-09-24 15:15:35 UTC (rev 41585)
+++ trunk/src/wp-admin/js/customize-controls.js 2017-09-24 15:59:56 UTC (rev 41586)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1176,7 +1176,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> content = meta.find( '.customize-section-description:first' );
</span><span class="cx" style="display: block; padding: 0 10px"> content.toggleClass( 'open' );
</span><span class="cx" style="display: block; padding: 0 10px"> content.slideToggle();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- content.attr( 'aria-expanded', function ( i, attr ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( this ).attr( 'aria-expanded', function( i, attr ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return 'true' === attr ? 'false' : 'true';
</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">@@ -1888,12 +1888,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> meta = panel.container.find( '.panel-meta:first' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
- if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
- return;
- }
- event.preventDefault(); // Keep this AFTER the key filter above
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click', function() {
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( meta.hasClass( 'cannot-expand' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3781,6 +3776,20 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> control.editor = wp.codeEditor.initialize( $textarea, settings );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Improve the editor accessibility.
+ $( control.editor.codemirror.display.lineDiv )
+ .attr({
+ role: 'textbox',
+ 'aria-multiline': 'true',
+ 'aria-label': control.params.label,
+ 'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4'
+ });
+
+ // Focus the editor when clicking on its label.
+ control.container.find( 'label' ).on( 'click', function() {
+ control.editor.codemirror.focus();
+ });
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="cx" style="display: block; padding: 0 10px"> * When the CodeMirror instance changes, mirror to the textarea,
</span><span class="cx" style="display: block; padding: 0 10px"> * where we have our "true" change event handler bound.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5968,7 +5977,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">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Set up the section desription behaviors.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Set up the section description behaviors.
</ins><span class="cx" style="display: block; padding: 0 10px"> sectionReady.done( function setupSectionDescription( section ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var control = api.control( 'custom_css' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5976,16 +5985,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> section.container.find( '.section-description-buttons .section-description-close' ).on( 'click', function() {
</span><span class="cx" style="display: block; padding: 0 10px"> section.container.find( '.section-meta .customize-section-description:first' )
</span><span class="cx" style="display: block; padding: 0 10px"> .removeClass( 'open' )
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .slideUp()
- .attr( 'aria-expanded', 'false' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .slideUp();
+
+ section.container.find( '.customize-help-toggle' )
+ .attr( 'aria-expanded', 'false' )
+ .focus(); // Avoid focus loss.
</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"> // Reveal help text if setting is empty.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( control && ! control.setting.get() ) {
</span><span class="cx" style="display: block; padding: 0 10px"> section.container.find( '.section-meta .customize-section-description:first' )
</span><span class="cx" style="display: block; padding: 0 10px"> .addClass( 'open' )
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .show()
- .attr( 'aria-expanded', 'true' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .show();
+
+ section.container.find( '.customize-help-toggle' ).attr( 'aria-expanded', 'true' );
</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="trunksrcwpadminjsthemeplugineditorjs"></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/theme-plugin-editor.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/theme-plugin-editor.js 2017-09-24 15:15:35 UTC (rev 41585)
+++ trunk/src/wp-admin/js/theme-plugin-editor.js 2017-09-24 15:59:56 UTC (rev 41586)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -83,6 +83,20 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> editor = wp.codeEditor.initialize( $( '#newcontent' ), codeEditorSettings );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Improve the editor accessibility.
+ $( editor.codemirror.display.lineDiv )
+ .attr({
+ role: 'textbox',
+ 'aria-multiline': 'true',
+ 'aria-labelledby': 'theme-plugin-editor-label',
+ 'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4'
+ });
+
+ // Focus the editor when clicking on its label.
+ $( '#theme-plugin-editor-label' ).on( 'click', function() {
+ editor.codemirror.focus();
+ });
+
</ins><span class="cx" style="display: block; padding: 0 10px"> component.instance = editor;
</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="trunksrcwpadminjswidgetscustomhtmlwidgetsjs"></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/widgets/custom-html-widgets.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/widgets/custom-html-widgets.js 2017-09-24 15:15:35 UTC (rev 41585)
+++ trunk/src/wp-admin/js/widgets/custom-html-widgets.js 2017-09-24 15:59:56 UTC (rev 41586)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -210,6 +210,21 @@
</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"> control.editor = wp.codeEditor.initialize( control.fields.content, settings );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Improve the editor accessibility.
+ $( control.editor.codemirror.display.lineDiv )
+ .attr({
+ role: 'textbox',
+ 'aria-multiline': 'true',
+ 'aria-labelledby': control.fields.content[0].id + '-label',
+ 'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4'
+ });
+
+ // Focus the editor when clicking on its label.
+ $( '#' + control.fields.content[0].id + '-label' ).on( 'click', function() {
+ control.editor.codemirror.focus();
+ });
+
</ins><span class="cx" style="display: block; padding: 0 10px"> control.fields.content.on( 'change', function() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( this.value !== control.editor.codemirror.getValue() ) {
</span><span class="cx" style="display: block; padding: 0 10px"> control.editor.codemirror.setValue( this.value );
</span></span></pre></div>
<a id="trunksrcwpadminplugineditorphp"></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/plugin-editor.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/plugin-editor.php 2017-09-24 15:15:35 UTC (rev 41585)
+++ trunk/src/wp-admin/plugin-editor.php 2017-09-24 15:59:56 UTC (rev 41586)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -195,7 +195,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> '<p>' . __('You can use the editor to make changes to any of your plugins’ individual PHP files. Be aware that if you make changes, plugins updates will overwrite your customizations.') . '</p>' .
</span><span class="cx" style="display: block; padding: 0 10px"> '<p>' . __('Choose a plugin to edit from the dropdown menu and click the Select button. Click once on any file name to load it in the editor, and make your changes. Don’t forget to save your changes (Update File) when you’re finished.') . '</p>' .
</span><span class="cx" style="display: block; padding: 0 10px"> '<p>' . __('The Documentation menu below the editor lists the PHP functions recognized in the plugin file. Clicking Look Up takes you to a web page about that particular function.') . '</p>' .
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- '<p id="newcontent-description">' . __( 'In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key. In some cases the Esc key will need to be pressed twice before the Tab key will allow you to continue.' ) . '</p>' .
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ '<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>' .
+ '<ul>' .
+ '<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>' .
+ '<li id="editor-keyboard-trap-help-3">' . __( 'To move away from this area, press the Esc key followed by the Tab key.' ) . '</li>' .
+ '<li id="editor-keyboard-trap-help-4">' . __( 'Screen reader users: when in forms mode, you may need to press the Esc key twice.' ) . '</li>' .
+ '</ul>' .
</ins><span class="cx" style="display: block; padding: 0 10px"> '<p>' . __('If you want to make changes but don’t want them to be overwritten when the plugin is updated, you may be ready to think about writing your own plugin. For information on how to edit plugins, write your own from scratch, or just better understand their anatomy, check out the links below.') . '</p>' .
</span><span class="cx" style="display: block; padding: 0 10px"> ( is_network_admin() ? '<p>' . __('Any edits to files from this screen will be reflected on all sites in the network.') . '</p>' : '' )
</span><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -255,7 +260,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="fileedit-sub">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="alignleft">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<big><?php
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<h2>
+ <?php
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( is_plugin_active( $plugin ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( is_writeable( $real_file ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> /* translators: %s: plugin file name */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -273,7 +279,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> echo sprintf( __( 'Browsing %s (inactive)' ), '<strong>' . esc_html( $file ) . '</strong>' );
</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">- ?></big>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ?>
+</h2>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="alignright">
</span><span class="cx" style="display: block; padding: 0 10px"> <form action="plugin-editor.php" method="post">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -321,11 +328,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <form name="template" id="template" action="plugin-editor.php" method="post">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php wp_nonce_field('edit-plugin_' . $file) ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div><textarea cols="70" rows="25" name="newcontent" id="newcontent" aria-describedby="newcontent-description"><?php echo $content; ?></textarea>
- <input type="hidden" name="action" value="update" />
- <input type="hidden" name="file" value="<?php echo esc_attr($file) ?>" />
- <input type="hidden" name="plugin" value="<?php echo esc_attr($plugin) ?>" />
- <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div>
+ <label for="newcontent" id="theme-plugin-editor-label"><?php _e( 'Selected file content:' ); ?></label>
+ <textarea cols="70" rows="25" name="newcontent" id="newcontent" aria-describedby="editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4"><?php echo $content; ?></textarea>
+ <input type="hidden" name="action" value="update" />
+ <input type="hidden" name="file" value="<?php echo esc_attr( $file ); ?>" />
+ <input type="hidden" name="plugin" value="<?php echo esc_attr( $plugin ); ?>" />
+ <input type="hidden" name="scrollto" id="scrollto" value="<?php echo esc_attr( $scrollto ); ?>" />
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php if ( !empty( $docs_select ) ) : ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <div id="documentation" class="hide-if-no-js"><label for="docs-list"><?php _e('Documentation:') ?></label> <?php echo $docs_select ?> <input type="button" class="button" value="<?php esc_attr_e( 'Look Up' ) ?> " onclick="if ( '' != jQuery('#docs-list').val() ) { window.open( 'https://api.wordpress.org/core/handbook/1.0/?function=' + escape( jQuery( '#docs-list' ).val() ) + '&locale=<?php echo urlencode( get_user_locale() ) ?>&version=<?php echo urlencode( get_bloginfo( 'version' ) ) ?>&redirect=true'); }" /></div>
</span></span></pre></div>
<a id="trunksrcwpadminthemeeditorphp"></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/theme-editor.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/theme-editor.php 2017-09-24 15:15:35 UTC (rev 41585)
+++ trunk/src/wp-admin/theme-editor.php 2017-09-24 15:59:56 UTC (rev 41586)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -24,14 +24,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'id' => 'overview',
</span><span class="cx" style="display: block; padding: 0 10px"> 'title' => __('Overview'),
</span><span class="cx" style="display: block; padding: 0 10px"> 'content' =>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- '<p>' . __('You can use the Theme Editor to edit the individual CSS and PHP files which make up your theme.') . '</p>
- <p>' . __( 'Begin by choosing a theme to edit from the dropdown menu and clicking the Select button. A list then appears of the theme’s template files. Clicking once on any file name causes the file to appear in the large Editor box.' ) . '</p>
- <p>' . __('For PHP files, you can use the Documentation dropdown to select from functions recognized in that file. Look Up takes you to a web page with reference material about that particular function.') . '</p>
- <p id="newcontent-description">' . __( 'In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key. In some cases the Esc key will need to be pressed twice before the Tab key will allow you to continue.' ) . '</p>
- <p>' . __('After typing in your edits, click Update File.') . '</p>
- <p>' . __('<strong>Advice:</strong> think very carefully about your site crashing if you are live-editing the theme currently in use.') . '</p>
- <p>' . sprintf( __('Upgrading to a newer version of the same theme will override changes made here. To avoid this, consider creating a <a href="%s">child theme</a> instead.'), __('https://codex.wordpress.org/Child_Themes') ) . '</p>' .
- ( is_network_admin() ? '<p>' . __('Any edits to files from this screen will be reflected on all sites in the network.') . '</p>' : '' )
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ '<p>' . __( 'You can use the Theme Editor to edit the individual CSS and PHP files which make up your theme.' ) . '</p>' .
+ '<p>' . __( 'Begin by choosing a theme to edit from the dropdown menu and clicking the Select button. A list then appears of the theme’s template files. Clicking once on any file name causes the file to appear in the large Editor box.' ) . '</p>' .
+ '<p>' . __( 'For PHP files, you can use the Documentation dropdown to select from functions recognized in that file. Look Up takes you to a web page with reference material about that particular function.' ) . '</p>' .
+ '<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>' .
+ '<ul>' .
+ '<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>' .
+ '<li id="editor-keyboard-trap-help-3">' . __( 'To move away from this area, press the Esc key followed by the Tab key.' ) . '</li>' .
+ '<li id="editor-keyboard-trap-help-4">' . __( 'Screen reader users: when in forms mode, you may need to press the Esc key twice.' ) . '</li>' .
+ '</ul>' .
+ '<p>' . __( 'After typing in your edits, click Update File.' ) . '</p>' .
+ '<p>' . __( '<strong>Advice:</strong> think very carefully about your site crashing if you are live-editing the theme currently in use.' ) . '</p>' .
+ /* translators: placeholder is link to codex article about child themes */
+ '<p>' . sprintf( __( 'Upgrading to a newer version of the same theme will override changes made here. To avoid this, consider creating a <a href="%s">child theme</a> instead.' ), __( 'https://codex.wordpress.org/Child_Themes' ) ) . '</p>' .
+ ( is_network_admin() ? '<p>' . __( 'Any edits to files from this screen will be reflected on all sites in the network.' ) . '</p>' : '' ),
</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"> get_current_screen()->set_help_sidebar(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -294,11 +300,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> else : ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <form name="template" id="template" action="theme-editor.php" method="post">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php wp_nonce_field( 'edit-theme_' . $file . $stylesheet ); ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div><textarea cols="70" rows="30" name="newcontent" id="newcontent" aria-describedby="newcontent-description"><?php echo $content; ?></textarea>
- <input type="hidden" name="action" value="update" />
- <input type="hidden" name="file" value="<?php echo esc_attr( $relative_file ); ?>" />
- <input type="hidden" name="theme" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" />
- <input type="hidden" name="scrollto" id="scrollto" value="<?php echo $scrollto; ?>" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div>
+ <label for="newcontent" id="theme-plugin-editor-label"><?php _e( 'Selected file content:' ); ?></label>
+ <textarea cols="70" rows="30" name="newcontent" id="newcontent" aria-describedby="editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4"><?php echo $content; ?></textarea>
+ <input type="hidden" name="action" value="update" />
+ <input type="hidden" name="file" value="<?php echo esc_attr( $relative_file ); ?>" />
+ <input type="hidden" name="theme" value="<?php echo esc_attr( $theme->get_stylesheet() ); ?>" />
+ <input type="hidden" name="scrollto" id="scrollto" value="<?php echo esc_attr( $scrollto ); ?>" />
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php if ( ! empty( $functions ) ) : ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <div id="documentation" class="hide-if-no-js">
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizemanagerphp"></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-manager.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-manager.php 2017-09-24 15:15:35 UTC (rev 41585)
+++ trunk/src/wp-includes/class-wp-customize-manager.php 2017-09-24 15:59:56 UTC (rev 41586)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4168,40 +4168,41 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Custom CSS */
</span><span class="cx" style="display: block; padding: 0 10px"> $section_description = '<p>';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.', 'better-code-editing' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.' );
</ins><span class="cx" style="display: block; padding: 0 10px"> $section_description .= sprintf(
</span><span class="cx" style="display: block; padding: 0 10px"> ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- esc_url( __( 'https://codex.wordpress.org/CSS', 'default' ) ),
- __( 'Learn more about CSS', 'default' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ esc_url( __( 'https://codex.wordpress.org/CSS' ) ),
+ __( 'Learn more about CSS' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> /* translators: accessibility text */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- __( '(opens in a new window)', 'default' )
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ __( '(opens in a new window)' )
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> $section_description .= '</p>';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $section_description .= '<p>' . __( 'When using a keyboard to navigate:', 'better-code-editing' ) . '</p>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $section_description .= '<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>';
</ins><span class="cx" style="display: block; padding: 0 10px"> $section_description .= '<ul>';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $section_description .= '<li>' . __( 'In the CSS edit field, Tab enters a tab character.', 'better-code-editing' ) . '</li>';
- $section_description .= '<li>' . __( 'To move keyboard focus, press Esc then Tab for the next element, or Esc then Shift+Tab for the previous element.', 'better-code-editing' ) . '</li>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $section_description .= '<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>';
+ $section_description .= '<li id="editor-keyboard-trap-help-3">' . __( 'To move away from this area, press the Esc key followed by the Tab key.' ) . '</li>';
+ $section_description .= '<li id="editor-keyboard-trap-help-4">' . __( 'Screen reader users: when in forms mode, you may need to press the Esc key twice.' ) . '</li>';
</ins><span class="cx" style="display: block; padding: 0 10px"> $section_description .= '</ul>';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( 'false' !== wp_get_current_user()->syntax_highlighting ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $section_description .= '<p>';
</span><span class="cx" style="display: block; padding: 0 10px"> $section_description .= sprintf(
</span><span class="cx" style="display: block; padding: 0 10px"> /* translators: placeholder is link to user profile */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.', 'better-code-editing' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> sprintf(
</span><span class="cx" style="display: block; padding: 0 10px"> ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- esc_url( get_edit_profile_url() . '#syntax_highlighting' ),
- __( 'user profile', 'better-code-editing' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ esc_url( get_edit_profile_url() ),
+ __( 'user profile' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> /* translators: accessibility text */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- __( '(opens in a new window)', 'default' )
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ __( '(opens in a new window)' )
</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"> $section_description .= '</p>';
</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"> $section_description .= '<p class="section-description-buttons">';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $section_description .= '<button type="button" class="button-link section-description-close">' . __( 'Close', 'default' ) . '</button>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $section_description .= '<button type="button" class="button-link section-description-close">' . __( 'Close' ) . '</button>';
</ins><span class="cx" style="display: block; padding: 0 10px"> $section_description .= '</p>';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->add_section( 'custom_css', array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4218,9 +4219,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->add_setting( $custom_css_setting );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->add_control( new WP_Customize_Code_Editor_Control( $this, 'custom_css', array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'section' => 'custom_css',
- 'settings' => array( 'default' => $custom_css_setting->id ),
- 'code_type' => 'text/css',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'label' => __( 'CSS code' ),
+ 'section' => 'custom_css',
+ 'settings' => array( 'default' => $custom_css_setting->id ),
+ 'code_type' => 'text/css',
+ 'input_attrs' => array(
+ 'aria-describedby' => 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4',
+ ),
</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="trunksrcwpincludesclasswpcustomizepanelphp"></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-panel.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-panel.php 2017-09-24 15:15:35 UTC (rev 41585)
+++ trunk/src/wp-includes/class-wp-customize-panel.php 2017-09-24 15:59:56 UTC (rev 41586)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -363,7 +363,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">{{ data.title }}</strong>' );
</span><span class="cx" style="display: block; padding: 0 10px"> ?></span>
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.description ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.description ) { #>
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizecodeeditorcontrolphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/customize/class-wp-customize-code-editor-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-code-editor-control.php 2017-09-24 15:15:35 UTC (rev 41585)
+++ trunk/src/wp-includes/customize/class-wp-customize-code-editor-control.php 2017-09-24 15:59:56 UTC (rev 41586)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -71,6 +71,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $json = parent::json();
</span><span class="cx" style="display: block; padding: 0 10px"> $json['code_type'] = $this->code_type;
</span><span class="cx" style="display: block; padding: 0 10px"> $json['editor_settings'] = $this->editor_settings;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $json['input_attrs'] = $this->input_attrs;
</ins><span class="cx" style="display: block; padding: 0 10px"> return $json;
</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">@@ -98,7 +99,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="description customize-control-description">{{{ data.description }}}</span>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="customize-control-notifications-container"></div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <textarea id="{{ elementIdPrefix }}_editor" class="code"></textarea>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <textarea id="{{ elementIdPrefix }}_editor"
+ <# _.each( _.extend( { 'class': 'code' }, data.input_attrs ), function( value, key ) { #>
+ {{{ key }}}="{{ value }}"
+ <# }); #>
+ ></textarea>
</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="trunksrcwpincludeswidgetsclasswpwidgetcustomhtmlphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/widgets/class-wp-widget-custom-html.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/widgets/class-wp-widget-custom-html.php 2017-09-24 15:15:35 UTC (rev 41585)
+++ trunk/src/wp-includes/widgets/class-wp-widget-custom-html.php 2017-09-24 15:59:56 UTC (rev 41586)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -212,12 +212,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-widget-custom-html-control-fields">
</span><span class="cx" style="display: block; padding: 0 10px"> <# var elementIdPrefix = 'el' + String( Math.random() ).replace( /\D/g, '' ) + '_' #>
</span><span class="cx" style="display: block; padding: 0 10px"> <p>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label for="{{ elementIdPrefix }}title"><?php esc_html_e( 'Title:', 'default' ); ?></label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="{{ elementIdPrefix }}title"><?php esc_html_e( 'Title:' ); ?></label>
</ins><span class="cx" style="display: block; padding: 0 10px"> <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
</span><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <p>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label for="{{ elementIdPrefix }}content" class="screen-reader-text"><?php esc_html_e( 'Content:', 'default' ); ?></label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="{{ elementIdPrefix }}content" id="{{ elementIdPrefix }}content-label"><?php esc_html_e( 'Content:' ); ?></label>
</ins><span class="cx" style="display: block; padding: 0 10px"> <textarea id="{{ elementIdPrefix }}content" class="widefat code content" rows="16" cols="20"></textarea>
</span><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -230,7 +230,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php if ( ! empty( $disallowed_html ) ) : ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <# if ( data.codeEditorDisabled ) { #>
</span><span class="cx" style="display: block; padding: 0 10px"> <p>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <?php _e( 'Some HTML tags are not permitted, including:', 'default' ); ?>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php _e( 'Some HTML tags are not permitted, including:' ); ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <code><?php echo join( '</code>, <code>', $disallowed_html ); ?></code>
</span><span class="cx" style="display: block; padding: 0 10px"> </p>
</span><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -254,25 +254,28 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $content .= __( 'Use the Custom HTML widget to add arbitrary HTML code to your widget areas.' );
</span><span class="cx" style="display: block; padding: 0 10px"> $content .= '</p>';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $content .= '<p>' . __( 'When using a keyboard to navigate:' ) . '</p>';
- $content .= '<ul>';
- $content .= '<li>' . __( 'In the HTML edit field, Tab enters a tab character.' ) . '</li>';
- $content .= '<li>' . __( 'To move keyboard focus, press Esc then Tab for the next element, or Esc then Shift+Tab for the previous element.' ) . '</li>';
- $content .= '</ul>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'false' !== wp_get_current_user()->syntax_highlighting ) {
+ $content .= '<p>';
+ $content .= sprintf(
+ /* translators: placeholder is link to user profile */
+ __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.' ),
+ sprintf(
+ ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
+ esc_url( get_edit_profile_url() ),
+ __( 'user profile' ),
+ /* translators: accessibility text */
+ __( '(opens in a new window)' )
+ )
+ );
+ $content .= '</p>';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $content .= '<p>';
- $content .= sprintf(
- /* translators: placeholder is link to user profile */
- __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plan text mode.' ),
- sprintf(
- ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
- esc_url( get_edit_profile_url() . '#syntax_highlighting' ),
- __( 'user profile' ),
- /* translators: accessibility text */
- __( '(opens in a new window)', 'default' )
- )
- );
- $content .= '</p>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $content .= '<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>';
+ $content .= '<ul>';
+ $content .= '<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>';
+ $content .= '<li id="editor-keyboard-trap-help-3">' . __( 'To move away from this area, press the Esc key followed by the Tab key.' ) . '</li>';
+ $content .= '<li id="editor-keyboard-trap-help-4">' . __( 'Screen reader users: when in forms mode, you may need to press the Esc key twice.' ) . '</li>';
+ $content .= '</ul>';
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $screen->add_help_tab( array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'id' => 'custom_html_widget',
</span></span></pre>
</div>
</div>
</body>
</html>