<!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>[38829] trunk: Customize: Introduce custom CSS for extending theme styles.</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/38829">38829</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/38829","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>westonruter</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2016-10-19 18:14:21 +0000 (Wed, 19 Oct 2016)</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'>Customize: Introduce custom CSS for extending theme styles.
* Custom CSS is associated with a given theme and is displayed in an inline `style` element at the `wp_head` hook after the `wp_print_styles` is called so that it overrides any enqueued stylesheets.
* A `wp_get_custom_css()` function is used for accessing the CSS associated with the current theme (or another theme) and a `wp_get_custom_css` filter for manipulating it.
* CSS is managed in customizer via a new "Additional CSS" section with a single `textarea` control.
* `WP_Customize_Section::$description_hidden` is introduced for hiding extended descriptions in customizer sections behind a help toggle as done with panels.
* CSS is stored in a `custom_css` post type with the theme (stylesheet) slug as the `post_name`.
* `WP_Customize_Custom_CSS_Setting` is introduced to handle validation of CSS, previewing, and persisting the CSS to the `custom_css` post type.
* The `custom_css` setting is tied to a new `unfiltered_css` capability which maps to `unfiltered_html` by default.
* Escaping the message in the notification template is removed to allow markup (`code` tags) to be rendered.
See https://make.wordpress.org/core/2016/10/11/feature-proposal-better-theme-customizations-via-custom-css-with-live-previews/
Props johnregan3, celloexpressions, folletto, westonruter.
Fixes <a href="https://core.trac.wordpress.org/ticket/35395">#35395</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<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="#trunksrcwpincludescapabilitiesphp">trunk/src/wp-includes/capabilities.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizemanagerphp">trunk/src/wp-includes/class-wp-customize-manager.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizesectionphp">trunk/src/wp-includes/class-wp-customize-section.php</a></li>
<li><a href="#trunksrcwpincludesdefaultfiltersphp">trunk/src/wp-includes/default-filters.php</a></li>
<li><a href="#trunksrcwpincludesjscustomizepreviewjs">trunk/src/wp-includes/js/customize-preview.js</a></li>
<li><a href="#trunksrcwpincludespostphp">trunk/src/wp-includes/post.php</a></li>
<li><a href="#trunksrcwpincludesthemephp">trunk/src/wp-includes/theme.php</a></li>
<li><a href="#trunktestsphpunittestsusercapabilitiesphp">trunk/tests/phpunit/tests/user/capabilities.php</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizecustomcsssettingphp">trunk/src/wp-includes/customize/class-wp-customize-custom-css-setting.php</a></li>
<li><a href="#trunktestsphpunittestscustomizecustomcsssettingphp">trunk/tests/phpunit/tests/customize/custom-css-setting.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 2016-10-19 13:45:28 UTC (rev 38828)
+++ trunk/src/wp-admin/css/customize-controls.css 2016-10-19 18:14:21 UTC (rev 38829)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -53,6 +53,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 15px;
</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-controls .customize-info.section-meta {
+ margin-bottom: 15px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-controls .customize-info .accordion-section-title {
</span><span class="cx" style="display: block; padding: 0 10px"> background: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> color: #555;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -124,6 +128,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-controls .customize-info .customize-panel-description,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-info .customize-section-description,
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-controls .no-widget-areas-rendered-notice {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #555;
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -131,15 +136,22 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 12px 15px;
</span><span class="cx" style="display: block; padding: 0 10px"> border-top: 1px solid #ddd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
</span><span class="cx" style="display: block; padding: 0 10px"> border-top: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#customize-controls .customize-info .customize-panel-description p:first-child {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-info .customize-section-description {
+ margin-bottom: 15px;
+}
+
+#customize-controls .customize-info .customize-panel-description p:first-child,
+#customize-controls .customize-info .customize-section-description p:first-child {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#customize-controls .customize-info .customize-panel-description p:last-child {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-info .customize-panel-description p:last-child,
+#customize-controls .customize-info .customize-section-description p:last-child {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -327,6 +339,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 22px;
</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-info div.customize-section-description {
+ margin-top: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> div.customize-section-description p:first-child {
</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="lines" style="display: block; padding: 0 10px; color: #888">@@ -542,6 +558,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 5px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-section-description a.external-link:after {
+ font: 16px/11px dashicons;
+ content: "\f310";
+ top: 3px;
+ position: relative;
+ padding-left: 3px;
+ display: inline-block;
+ text-decoration: none;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-color .color-picker,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-upload div {
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 28px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -963,6 +989,40 @@
</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><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Custom CSS Section
+ *
+ * Modifications to the Section Container to
+ * make the textarea full-width.
+ */
+#customize-theme-controls #sub-accordion-section-custom_css {
+ padding-left: 0;
+ padding-right: 0;
+}
+
+#customize-theme-controls #sub-accordion-section-custom_css .customize-section-title {
+ margin-left: 0;
+}
+
+#customize-theme-controls #sub-accordion-section-custom_css .customize-control-title,
+#customize-theme-controls #sub-accordion-section-custom_css .notice {
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+#sub-accordion-section-custom_css .customize-control-notifications-container {
+ margin-bottom: 15px;
+}
+
+#sub-accordion-section-custom_css textarea {
+ border-right: 0;
+ border-left: 0;
+ font-family: Consolas, Monaco, monospace;
+ font-size: 12px;
+ padding: 6px 8px;
+ height: 553px;
+}
+
+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Themes
</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="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 2016-10-19 13:45:28 UTC (rev 38828)
+++ trunk/src/wp-admin/js/customize-controls.js 2016-10-19 18:14:21 UTC (rev 38829)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -904,7 +904,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.1.0
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> attachEvents: function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var section = this;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var meta, content, section = this;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Expand/Collapse accordion sections on click.
</span><span class="cx" style="display: block; padding: 0 10px"> section.container.find( '.accordion-section-title, .customize-section-back' ).on( 'click keydown', function( event ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -919,6 +919,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> section.expand();
</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">+
+ // This is very similar to what is found for api.Panel.attachEvents().
+ section.container.find( '.customize-section-title .customize-help-toggle' ).on( 'click', function() {
+
+ meta = section.container.find( '.section-meta' );
+ if ( meta.hasClass( 'cannot-expand' ) ) {
+ return;
+ }
+ content = meta.find( '.customize-section-description:first' );
+ content.toggleClass( 'open' );
+ content.slideToggle();
+ content.attr( 'aria-expanded', function ( i, attr ) {
+ return attr === 'true' ? 'false' : '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="trunksrcwpincludescapabilitiesphp"></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/capabilities.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/capabilities.php 2016-10-19 13:45:28 UTC (rev 38828)
+++ trunk/src/wp-includes/capabilities.php 2016-10-19 18:14:21 UTC (rev 38829)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -329,6 +329,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> else
</span><span class="cx" style="display: block; padding: 0 10px"> $caps[] = $cap;
</span><span class="cx" style="display: block; padding: 0 10px"> break;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ case 'unfiltered_css' :
+ $caps[] = 'unfiltered_html';
+ break;
</ins><span class="cx" style="display: block; padding: 0 10px"> case 'edit_files':
</span><span class="cx" style="display: block; padding: 0 10px"> case 'edit_plugins':
</span><span class="cx" style="display: block; padding: 0 10px"> case 'edit_themes':
</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 2016-10-19 13:45:28 UTC (rev 38828)
+++ trunk/src/wp-includes/class-wp-customize-manager.php 2016-10-19 18:14:21 UTC (rev 38829)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -300,6 +300,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-section.php' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ require_once( ABSPATH . WPINC . '/customize/class-wp-customize-custom-css-setting.php' );
</ins><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-filter-setting.php' );
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-header-image-setting.php' );
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-setting.php' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2493,7 +2494,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-customize-control-notifications">
</span><span class="cx" style="display: block; padding: 0 10px"> <ul>
</span><span class="cx" style="display: block; padding: 0 10px"> <# _.each( data.notifications, function( notification ) { #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <li class="notice notice-{{ notification.type || 'info' }} {{ data.altNotice ? 'notice-alt' : '' }}" data-code="{{ notification.code }}" data-type="{{ notification.type }}">{{ notification.message || notification.code }}</li>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <li class="notice notice-{{ notification.type || 'info' }} {{ data.altNotice ? 'notice-alt' : '' }}" data-code="{{ notification.code }}" data-type="{{ notification.type }}">{{{ notification.message || notification.code }}}</li>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# } ); #>
</span><span class="cx" style="display: block; padding: 0 10px"> </ul>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3220,7 +3221,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'section' => 'colors',
</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"> /* Custom Header */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->add_section( 'header_image', array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3366,6 +3366,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'section' => 'static_front_page',
</span><span class="cx" style="display: block; padding: 0 10px"> 'type' => 'dropdown-pages',
</span><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ /* Custom CSS */
+ $this->add_section( 'custom_css', array(
+ 'title' => __( 'Additional CSS' ),
+ 'priority' => 140,
+ 'description_hidden' => true,
+ 'description' => sprintf( '%s<br /><a href="%s" class="external-link" target="_blank">%s<span class="screen-reader-text">%s</span></a>',
+ __( 'CSS allows you to customize the appearance and layout of your site with code. Separate CSS is saved for each of your themes.' ),
+ 'https://codex.wordpress.org/Know_Your_Sources#CSS',
+ __( 'Learn more about CSS' ),
+ __( '(link opens in a new window)' )
+ ),
+ ) );
+
+ $custom_css_setting = new WP_Customize_Custom_CSS_Setting( $this, sprintf( 'custom_css[%s]', get_stylesheet() ), array(
+ 'capability' => 'unfiltered_css',
+ ) );
+ $this->add_setting( $custom_css_setting );
+
+ $this->add_control( 'custom_css', array(
+ 'type' => 'textarea',
+ 'section' => 'custom_css',
+ 'settings' => array( 'default' => $custom_css_setting->id ),
+ ) );
</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 class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3388,7 +3412,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px"> return 0 !== count( get_pages() );
</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="trunksrcwpincludesclasswpcustomizesectionphp"></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-section.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-section.php 2016-10-19 13:45:28 UTC (rev 38828)
+++ trunk/src/wp-includes/class-wp-customize-section.php 2016-10-19 18:14:21 UTC (rev 38829)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -146,6 +146,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> public $active_callback = '';
</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">+ * Show the description or hide it behind the help icon.
+ *
+ * @since 4.7.0
+ * @access public
+ *
+ * @var bool Indicates whether the Section's description should be
+ * hidden behind a help icon ("?") in the Section header,
+ * similar to how help icons are displayed on Panels.
+ */
+ public $description_hidden = false;
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Constructor.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * Any supplied $args override class property defaults.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -223,7 +235,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @return array The array to be exported to the client as JSON.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function json() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $array = wp_array_slice_assoc( (array) $this, array( 'id', 'description', 'priority', 'panel', 'type' ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $array = wp_array_slice_assoc( (array) $this, array( 'id', 'description', 'priority', 'panel', 'type', 'description_hidden' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> $array['title'] = html_entity_decode( $this->title, ENT_QUOTES, get_bloginfo( 'charset' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> $array['content'] = $this->get_content();
</span><span class="cx" style="display: block; padding: 0 10px"> $array['active'] = $this->active();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -324,11 +336,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @see WP_Customize_Manager::render_template()
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function print_template() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ?>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-customize-section-<?php echo $this->type; ?>">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php $this->render_template(); ?>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <?php
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php
</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 class="lines" style="display: block; padding: 0 10px; color: #888">@@ -350,7 +362,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="screen-reader-text"><?php _e( 'Press return or enter to open this section' ); ?></span>
</span><span class="cx" style="display: block; padding: 0 10px"> </h3>
</span><span class="cx" style="display: block; padding: 0 10px"> <ul class="accordion-section-content">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <li class="customize-section-description-container">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <li class="customize-section-description-container section-meta <# if ( data.description_hidden ) { #>customize-info<# } #>">
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="customize-section-title">
</span><span class="cx" style="display: block; padding: 0 10px"> <button class="customize-section-back" tabindex="-1">
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="screen-reader-text"><?php _e( 'Back' ); ?></span>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -361,8 +373,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </span>
</span><span class="cx" style="display: block; padding: 0 10px"> {{ data.title }}
</span><span class="cx" style="display: block; padding: 0 10px"> </h3>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# if ( data.description && data.description_hidden ) { #>
+ <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
+ <div class="description customize-section-description">
+ {{{ data.description }}}
+ </div>
+ <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# if ( data.description ) { #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ <# if ( data.description && ! data.description_hidden ) { #>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="description customize-section-description">
</span><span class="cx" style="display: block; padding: 0 10px"> {{{ data.description }}}
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizecustomcsssettingphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-includes/customize/class-wp-customize-custom-css-setting.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-custom-css-setting.php (rev 0)
+++ trunk/src/wp-includes/customize/class-wp-customize-custom-css-setting.php 2016-10-19 18:14:21 UTC (rev 38829)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,373 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+/**
+ * Customize API: WP_Customize_Custom_CSS_Setting class
+ *
+ * This handles validation, sanitization and saving of the value.
+ *
+ * @package WordPress
+ * @subpackage Customize
+ * @since 4.7.0
+ */
+
+/**
+ * Custom Setting to handle WP Custom CSS.
+ *
+ * @since 4.7.0
+ *
+ * @see WP_Customize_Setting
+ */
+final class WP_Customize_Custom_CSS_Setting extends WP_Customize_Setting {
+
+ /**
+ * The setting type.
+ *
+ * @var string
+ *
+ * @since 4.7.0
+ * @access public
+ */
+ public $type = 'custom_css';
+
+ /**
+ * Setting Transport
+ *
+ * @since 4.7.0
+ * @access public
+ *
+ * @var string
+ */
+ public $transport = 'postMessage';
+
+ /**
+ * Capability required to edit this setting.
+ *
+ * @since 4.7.0
+ * @access public
+ *
+ * @var string
+ */
+ public $capability = 'unfiltered_css';
+
+ /**
+ * Stylesheet
+ *
+ * @since 4.7.0
+ * @access public
+ *
+ * @var string
+ */
+ public $stylesheet = '';
+
+ /**
+ * WP_Customize_Custom_CSS_Setting constructor.
+ *
+ * @since 4.7.0
+ * @access public
+ *
+ * @throws Exception If the setting ID does not match the pattern `custom_css[$stylesheet]`.
+ *
+ * @param WP_Customize_Manager $manager The Customize Manager class.
+ * @param string $id An specific ID of the setting. Can be a
+ * theme mod or option name.
+ * @param array $args Setting arguments.
+ */
+ public function __construct( $manager, $id, $args = array() ) {
+ parent::__construct( $manager, $id, $args );
+ if ( 'custom_css' !== $this->id_data['base'] ) {
+ throw new Exception( 'Expected custom_css id_base.' );
+ }
+ if ( 1 !== count( $this->id_data['keys'] ) || empty( $this->id_data['keys'][0] ) ) {
+ throw new Exception( 'Expected single stylesheet key.' );
+ }
+ $this->stylesheet = $this->id_data['keys'][0];
+ }
+
+ /**
+ * Add filter to preview post value.
+ *
+ * @since 4.7.9
+ * @access public
+ *
+ * @return bool False when preview short-circuits due no change needing to be previewed.
+ */
+ public function preview() {
+ if ( $this->is_previewed ) {
+ return false;
+ }
+ $this->is_previewed = true;
+ add_filter( 'wp_get_custom_css', array( $this, 'filter_previewed_wp_get_custom_css' ), 9, 2 );
+ return true;
+ }
+
+ /**
+ * Filter wp_get_custom_css for applying customized value to return value.
+ *
+ * @since 4.7.0
+ * @access private
+ *
+ * @param string $css Original CSS.
+ * @param string $stylesheet Current stylesheet.
+ * @return string CSS.
+ */
+ public function filter_previewed_wp_get_custom_css( $css, $stylesheet ) {
+ if ( $stylesheet === $this->stylesheet ) {
+ $customized_value = $this->post_value( null );
+ if ( ! is_null( $customized_value ) ) {
+ $css = $customized_value;
+ }
+ }
+ return $css;
+ }
+
+ /**
+ * Fetch the value of the setting.
+ *
+ * @since 4.7.0
+ * @access public
+ *
+ * @return string
+ */
+ public function value() {
+ return wp_get_custom_css( $this->stylesheet );
+ }
+
+ /**
+ * Validate CSS.
+ *
+ * Checks for imbalanced braces, brackets, and comments.
+ * Notifications are rendered when the customizer state is saved.
+ *
+ * @todo There are cases where valid CSS can be incorrectly marked as invalid when strings or comments include balancing characters. To fix, CSS tokenization needs to be used.
+ *
+ * @since 4.7.0
+ * @access public
+ *
+ * @param string $css The input string.
+ * @return true|WP_Error True if the input was validated, otherwise WP_Error.
+ */
+ public function validate( $css ) {
+ $validity = new WP_Error();
+
+ if ( preg_match( '#</?\w+#', $css ) ) {
+ $validity->add( 'illegal_markup', __( 'Markup is not allowed in CSS.' ) );
+ }
+
+ $imbalanced = false;
+
+ // Make sure that there is a closing brace for each opening brace.
+ if ( ! $this->validate_balanced_characters( '{', '}', $css ) ) {
+ $validity->add( 'imbalanced_curly_brackets', __( 'Your curly brackets <code>{}</code> are imbalanced. Make sure there is a closing <code>}</code> for every opening <code>{</code>.' ) );
+ $imbalanced = true;
+ }
+
+ // Ensure brackets are balanced.
+ if ( ! $this->validate_balanced_characters( '[', ']', $css ) ) {
+ $validity->add( 'imbalanced_braces', __( 'Your brackets <code>[]</code> are imbalanced. Make sure there is a closing <code>]</code> for every opening <code>[</code>.' ) );
+ $imbalanced = true;
+ }
+
+ // Ensure parentheses are balanced.
+ if ( ! $this->validate_balanced_characters( '(', ')', $css ) ) {
+ $validity->add( 'imbalanced_parentheses', __( 'Your parentheses <code>()</code> are imbalanced. Make sure there is a closing <code>)</code> for every opening <code>(</code>.' ) );
+ $imbalanced = true;
+ }
+
+ // Ensure single quotes are equal.
+ if ( ! $this->validate_equal_characters( '\'', $css ) ) {
+ $validity->add( 'unequal_single_quotes', __( 'Your single quotes <code>\'</code> are uneven. Make sure there is a closing <code>\'</code> for every opening <code>\'</code>.' ) );
+ $imbalanced = true;
+ }
+
+ // Ensure single quotes are equal.
+ if ( ! $this->validate_equal_characters( '"', $css ) ) {
+ $validity->add( 'unequal_double_quotes', __( 'Your double quotes <code>"</code> are uneven. Make sure there is a closing <code>"</code> for every opening <code>"</code>.' ) );
+ $imbalanced = true;
+ }
+
+ /*
+ * Make sure any code comments are closed properly.
+ *
+ * The first check could miss stray an unpaired comment closing figure, so if
+ * The number appears to be balanced, then check for equal numbers
+ * of opening/closing comment figures.
+ *
+ * Although it may initially appear redundant, we use the first method
+ * to give more specific feedback to the user.
+ */
+ $unclosed_comment_count = $this->validate_count_unclosed_comments( $css );
+ if ( 0 < $unclosed_comment_count ) {
+ $validity->add( 'unclosed_comment', sprintf( _n( 'There is %s unclosed code comment. Close each comment with <code>*/</code>.', 'There are %s unclosed code comments. Close each comment with <code>*/</code>.', $unclosed_comment_count ), $unclosed_comment_count ) );
+ $imbalanced = true;
+ } elseif ( ! $this->validate_balanced_characters( '/*', '*/', $css ) ) {
+ $validity->add( 'imbalanced_comments', __( 'There is an extra <code>*/</code>, indicating an end to a comment. Be sure that there is an opening <code>/*</code> for every closing <code>*/</code>.' ) );
+ $imbalanced = true;
+ }
+ if ( $imbalanced && $this->is_possible_content_error( $css ) ) {
+ $validity->add( 'possible_false_positive', __( 'Imbalanced/Unclosed character errors can be caused <code>content: "";</code> declarations. You may need to remove this or add it a custom CSS file.' ) );
+ }
+
+ if ( empty( $validity->errors ) ) {
+ $validity = parent::validate( $css );
+ }
+ return $validity;
+ }
+
+ /**
+ * Store the CSS setting value in the custom_css custom post type for the stylesheet.
+ *
+ * @since 4.7.0
+ * @access public
+ *
+ * @param string $css The input value.
+ * @return int|false The post ID or false if the value could not be saved.
+ */
+ public function update( $css ) {
+
+ $args = array(
+ 'post_content' => $css ? $css : '',
+ 'post_title' => $this->stylesheet,
+ 'post_name' => sanitize_title( $this->stylesheet ),
+ 'post_type' => 'custom_css',
+ 'post_status' => 'publish',
+ );
+
+ // Update post if it already exists, otherwise create a new one.
+ $post_id = null;
+ $query = new WP_Query( array(
+ 'post_type' => 'custom_css',
+ 'post_status' => get_post_stati(),
+ 'name' => sanitize_title( $this->stylesheet ),
+ 'number' => 1,
+ 'no_found_rows' => true,
+ 'cache_results' => true,
+ 'update_post_meta_cache' => false,
+ 'update_term_meta_cache' => false,
+ 'suppress_filters' => true,
+ ) );
+ if ( ! empty( $query->post ) ) {
+ $args['ID'] = $query->post->ID;
+ $post_id = wp_update_post( wp_slash( $args ) );
+ } else {
+ $post_id = wp_insert_post( wp_slash( $args ) );
+ }
+ if ( ! $post_id ) {
+ return false;
+ }
+
+ // Cache post ID in theme mod for performance to avoid additional DB query.
+ if ( $this->manager->get_stylesheet() === $this->stylesheet ) {
+ set_theme_mod( 'custom_css_post_id', $post_id );
+ }
+
+ return $post_id;
+ }
+
+ /**
+ * Ensure there are a balanced number of paired characters.
+ *
+ * This is used to check that the number of opening and closing
+ * characters is equal.
+ *
+ * For instance, there should be an equal number of braces ("{", "}")
+ * in the CSS.
+ *
+ * @since 4.7.0
+ * @access private
+ *
+ * @param string $opening_char The opening character.
+ * @param string $closing_char The closing character.
+ * @param string $css The CSS input string.
+ *
+ * @return bool
+ */
+ private function validate_balanced_characters( $opening_char, $closing_char, $css ) {
+ return substr_count( $css, $opening_char ) === substr_count( $css, $closing_char );
+ }
+
+ /**
+ * Ensure there are an even number of paired characters.
+ *
+ * This is used to check that the number of a specific
+ * character is even.
+ *
+ * For instance, there should be an even number of double quotes
+ * in the CSS.
+ *
+ * @since 4.7.0
+ * @access private
+ *
+ * @param string $char A character.
+ * @param string $css The CSS input string.
+ * @return bool Equality.
+ */
+ private function validate_equal_characters( $char, $css ) {
+ $char_count = substr_count( $css, $char );
+ return ( 0 === $char_count % 2 );
+ }
+
+ /**
+ * Count unclosed CSS Comments.
+ *
+ * Used during validation.
+ *
+ * @see self::validate()
+ *
+ * @since 4.7.0
+ * @access private
+ *
+ * @param string $css The CSS input string.
+ * @return int Count.
+ */
+ private function validate_count_unclosed_comments( $css ) {
+ $count = 0;
+ $comments = explode( '/*', $css );
+
+ if ( ! is_array( $comments ) || ( 1 >= count( $comments ) ) ) {
+ return $count;
+ }
+
+ unset( $comments[0] ); // The first item is before the first comment.
+ foreach ( $comments as $comment ) {
+ if ( false === strpos( $comment, '*/' ) ) {
+ $count++;
+ }
+ }
+ return $count;
+ }
+
+ /**
+ * Find "content:" within a string.
+ *
+ * Imbalanced/Unclosed validation errors may be caused
+ * when a character is used in a "content:" declaration.
+ *
+ * This function is used to detect if this is a possible
+ * cause of the validation error, so that if it is,
+ * a notification may be added to the Validation Errors.
+ *
+ * Example:
+ * .element::before {
+ * content: "(\"";
+ * }
+ * .element::after {
+ * content: "\")";
+ * }
+ *
+ * Using ! empty() because strpos() may return non-boolean values
+ * that evaluate to false. This would be problematic when
+ * using a strict "false === strpos()" comparison.
+ *
+ * @since 4.7.0
+ * @access private
+ *
+ * @param string $css The CSS input string.
+ * @return bool
+ */
+ private function is_possible_content_error( $css ) {
+ $found = preg_match( '/\bcontent\s*:/', $css );
+ if ( ! empty( $found ) ) {
+ return true;
+ }
+ return false;
+ }
+}
</ins></span></pre></div>
<a id="trunksrcwpincludesdefaultfiltersphp"></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/default-filters.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/default-filters.php 2016-10-19 13:45:28 UTC (rev 38828)
+++ trunk/src/wp-includes/default-filters.php 2016-10-19 18:14:21 UTC (rev 38829)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -245,6 +245,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_head', 'wp_generator' );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_head', 'rel_canonical' );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+add_action( 'wp_head', 'wp_custom_css_cb', 11 );
</ins><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_head', 'wp_site_icon', 99 );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_footer', 'wp_print_footer_scripts', 20 );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'template_redirect', 'wp_shortlink_header', 11, 0 );
</span></span></pre></div>
<a id="trunksrcwpincludesjscustomizepreviewjs"></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/js/customize-preview.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/customize-preview.js 2016-10-19 13:45:28 UTC (rev 38828)
+++ trunk/src/wp-includes/js/customize-preview.js 2016-10-19 18:14:21 UTC (rev 38829)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -786,6 +786,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $( 'body' ).toggleClass( 'wp-custom-logo', !! setting.get() );
</span><span class="cx" style="display: block; padding: 0 10px"> setting.bind( function( attachmentId ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $( 'body' ).toggleClass( 'wp-custom-logo', !! attachmentId );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ });
+ });
+
+ api( 'custom_css[' + api.settings.theme.stylesheet + ']', function( value ) {
+ value.bind( function( to ) {
+ $( '#wp-custom-css' ).text( to );
</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="trunksrcwpincludespostphp"></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/post.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/post.php 2016-10-19 13:45:28 UTC (rev 38828)
+++ trunk/src/wp-includes/post.php 2016-10-19 18:14:21 UTC (rev 38829)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -111,6 +111,35 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'query_var' => false,
</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">+ register_post_type( 'custom_css', array(
+ 'labels' => array(
+ 'name' => __( 'Custom CSS' ),
+ 'singular_name' => __( 'Custom CSS' ),
+ ),
+ 'public' => false,
+ 'hierarchical' => false,
+ 'rewrite' => false,
+ 'query_var' => false,
+ 'delete_with_user' => false,
+ 'can_export' => true,
+ '_builtin' => true, /* internal use only. don't use this when registering your own post type. */
+ 'supports' => array( 'title' ),
+ 'capabilities' => array(
+ 'delete_posts' => 'edit_theme_options',
+ 'delete_post' => 'edit_theme_options',
+ 'delete_published_posts' => 'edit_theme_options',
+ 'delete_private_posts' => 'edit_theme_options',
+ 'delete_others_posts' => 'edit_theme_options',
+ 'edit_post' => 'unfiltered_css',
+ 'edit_posts' => 'unfiltered_css',
+ 'edit_others_posts' => 'unfiltered_css',
+ 'edit_published_posts' => 'unfiltered_css',
+ 'read_post' => 'read',
+ 'read_private_posts' => 'read',
+ 'publish_posts' => 'edit_theme_options',
+ ),
+ ) );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> register_post_type( 'customize_changeset', array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'labels' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'name' => _x( 'Changesets', 'post type general name' ),
</span></span></pre></div>
<a id="trunksrcwpincludesthemephp"></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/theme.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/theme.php 2016-10-19 13:45:28 UTC (rev 38828)
+++ trunk/src/wp-includes/theme.php 2016-10-19 18:14:21 UTC (rev 38829)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1401,6 +1401,89 @@
</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><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Render the Custom CSS style element.
+ *
+ * @since 4.7.0
+ * @access public
+ */
+function wp_custom_css_cb() {
+ $styles = wp_get_custom_css();
+ if ( $styles || is_customize_preview() ) : ?>
+ <style type="text/css" id="wp-custom-css">
+ <?php echo strip_tags( $styles ); // Note that esc_html() cannot be used because `div > span` is not interpreted properly. ?>
+ </style>
+ <?php endif;
+}
+
+/**
+ * Fetch the saved Custom CSS content.
+ *
+ * Gets the content of a Custom CSS post that matches the
+ * current theme.
+ *
+ * @since 4.7.0
+ * @access public
+ *
+ * @param string $stylesheet Optional. A theme object stylesheet name. Defaults to the current theme.
+ *
+ * @return string The Custom CSS Post content.
+ */
+function wp_get_custom_css( $stylesheet = '' ) {
+ $css = '';
+
+ if ( empty( $stylesheet ) ) {
+ $stylesheet = get_stylesheet();
+ }
+
+ $custom_css_query_vars = array(
+ 'post_type' => 'custom_css',
+ 'post_status' => get_post_stati(),
+ 'name' => sanitize_title( $stylesheet ),
+ 'number' => 1,
+ 'no_found_rows' => true,
+ 'cache_results' => true,
+ 'update_post_meta_cache' => false,
+ 'update_term_meta_cache' => false,
+ );
+
+ $post = null;
+ if ( get_stylesheet() === $stylesheet ) {
+ $post_id = get_theme_mod( 'custom_css_post_id' );
+ if ( ! $post_id ) {
+ $query = new WP_Query( $custom_css_query_vars );
+ $post = $query->post;
+
+ /*
+ * Cache the lookup. See WP_Customize_Custom_CSS_Setting::update().
+ * @todo This should get cleared if a custom_css post is added/removed.
+ */
+ set_theme_mod( 'custom_css_post_id', $post ? $post->ID : -1 );
+ } elseif ( $post_id > 0 ) {
+ $post = get_post( $post_id );
+ }
+ } else {
+ $query = new WP_Query( $custom_css_query_vars );
+ $post = $query->post;
+ }
+
+ if ( $post ) {
+ $css = $post->post_content;
+ }
+
+ /**
+ * Modify the Custom CSS Output into the <head>.
+ *
+ * @since 4.7.0
+ *
+ * @param string $css CSS pulled in from the Custom CSS CPT.
+ * @param string $stylesheet The theme stylesheet name.
+ */
+ $css = apply_filters( 'wp_get_custom_css', $css, $stylesheet );
+
+ return $css;
+}
+
+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Add callback for custom TinyMCE editor stylesheets.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * The parameter $stylesheet is the name of the stylesheet, relative to
</span></span></pre></div>
<a id="trunktestsphpunittestscustomizecustomcsssettingphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/phpunit/tests/customize/custom-css-setting.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/customize/custom-css-setting.php (rev 0)
+++ trunk/tests/phpunit/tests/customize/custom-css-setting.php 2016-10-19 18:14:21 UTC (rev 38829)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,231 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+/**
+ * Test Test_WP_Customize_Custom_CSS_Setting.
+ *
+ * Tests WP_Customize_Custom_CSS_Setting.
+ *
+ * @group customize
+ */
+class Test_WP_Customize_Custom_CSS_Setting extends WP_UnitTestCase {
+
+ /**
+ * Instance of WP_Customize_Manager which is reset for each test.
+ *
+ * @var WP_Customize_Manager
+ */
+ public $wp_customize;
+
+ /**
+ * The Setting instance.
+ *
+ * @var WP_Customize_Custom_CSS_Setting
+ */
+ public $setting;
+
+ /**
+ * Set up the test case.
+ *
+ * @see WP_UnitTestCase::setup()
+ */
+ function setUp() {
+ parent::setUp();
+ require_once ABSPATH . WPINC . '/class-wp-customize-manager.php';
+ wp_set_current_user( self::factory()->user->create( array( 'role' => 'administrator' ) ) );
+
+ global $wp_customize;
+ $this->wp_customize = new WP_Customize_Manager();
+ $wp_customize = $this->wp_customize;
+
+ do_action( 'customize_register', $this->wp_customize );
+ $this->setting = new WP_Customize_Custom_CSS_Setting( $this->wp_customize, 'custom_css[twentysixteen]' );
+ $this->wp_customize->add_setting( $this->setting );
+ }
+
+ /**
+ * Tear down the test case.
+ */
+ function tearDown() {
+ parent::tearDown();
+ $this->setting = null;
+ }
+
+ /**
+ * Delete the $wp_customize global when cleaning up scope.
+ */
+ function clean_up_global_scope() {
+ global $wp_customize;
+ $wp_customize = null;
+ parent::clean_up_global_scope();
+ }
+
+ /**
+ * Test constructor.
+ *
+ * Mainly validates that the correct hooks exist.
+ *
+ * Also checks for the post type and the Setting Type.
+ *
+ * @covers WP_Customize_Custom_CSS_Setting::__construct()
+ */
+ function test_construct() {
+ $this->assertTrue( post_type_exists( 'custom_css' ) );
+ $this->assertEquals( 'custom_css', $this->setting->type );
+ $this->assertEquals( 'twentysixteen', $this->setting->stylesheet );
+ $this->assertEquals( 'unfiltered_css', $this->setting->capability );
+
+ $exception = null;
+ try {
+ $x = new WP_Customize_Custom_CSS_Setting( $this->wp_customize, 'bad' );
+ unset( $x );
+ } catch ( Exception $e ) {
+ $exception = $e;
+ }
+ $this->assertInstanceOf( 'Exception', $exception );
+
+ $exception = null;
+ try {
+ $x = new WP_Customize_Custom_CSS_Setting( $this->wp_customize, 'custom_css' );
+ unset( $x );
+ } catch ( Exception $e ) {
+ $exception = $e;
+ }
+ $this->assertInstanceOf( 'Exception', $exception );
+ }
+
+ /**
+ * Test WP_Customize_Custom_CSS_Setting::update().
+ *
+ * @covers wp_get_custom_css()
+ * @covers WP_Customize_Custom_CSS_Setting::value()
+ * @covers WP_Customize_Custom_CSS_Setting::preview()
+ * @covers WP_Customize_Custom_CSS_Setting::update()
+ */
+ function test_crud() {
+ $original_css = 'body { color: black; }';
+ $this->factory()->post->create( array(
+ 'post_title' => $this->setting->stylesheet,
+ 'post_name' => $this->setting->stylesheet,
+ 'post_content' => 'body { color: black; }',
+ 'post_status' => 'publish',
+ 'post_type' => 'custom_css',
+ ) );
+
+ $this->assertEquals( $original_css, wp_get_custom_css( $this->setting->stylesheet ) );
+ $this->assertEquals( $original_css, $this->setting->value() );
+
+ $updated_css = 'body { color: blue; }';
+ $this->wp_customize->set_post_value( $this->setting->id, $updated_css );
+ $this->setting->save();
+ $this->assertEquals( $updated_css, $this->setting->value() );
+ $this->assertEquals( $updated_css, wp_get_custom_css( $this->setting->stylesheet ) );
+
+ $previewed_css = 'body { color: red; }';
+ $this->wp_customize->set_post_value( $this->setting->id, $previewed_css );
+ $this->setting->preview();
+ $this->assertEquals( $previewed_css, $this->setting->value() );
+ $this->assertEquals( $previewed_css, wp_get_custom_css( $this->setting->stylesheet ) );
+ }
+
+ /**
+ * Tests that validation errors are caught appropriately.
+ *
+ * Note that the $validity \WP_Error object must be reset each time
+ * as it picks up the Errors and passes them to the next assertion.
+ *
+ * @covers WP_Customize_Custom_CSS_Setting::validate()
+ */
+ function test_validate() {
+
+ // Empty CSS throws no errors.
+ $result = $this->setting->validate( '' );
+ $this->assertTrue( $result );
+
+ // Basic, valid CSS throws no errors.
+ $basic_css = 'body { background: #f00; } h1.site-title { font-size: 36px; } a:hover { text-decoration: none; } input[type="text"] { padding: 1em; }';
+ $result = $this->setting->validate( $basic_css );
+ $this->assertTrue( $result );
+
+ // Check for Unclosed Comment.
+ $unclosed_comment = $basic_css . ' /* This is a comment. ';
+ $result = $this->setting->validate( $unclosed_comment );
+ $this->assertTrue( array_key_exists( 'unclosed_comment', $result->errors ) );
+
+ // Check for Unopened Comment.
+ $unclosed_comment = $basic_css . ' This is a comment.*/';
+ $result = $this->setting->validate( $unclosed_comment );
+ $this->assertTrue( array_key_exists( 'imbalanced_comments', $result->errors ) );
+
+ // Check for Unclosed Curly Brackets.
+ $unclosed_curly_bracket = $basic_css . ' a.link { text-decoration: none;';
+ $result = $this->setting->validate( $unclosed_curly_bracket );
+ $this->assertTrue( array_key_exists( 'imbalanced_curly_brackets', $result->errors ) );
+
+ // Check for Unopened Curly Brackets.
+ $unopened_curly_bracket = $basic_css . ' a.link text-decoration: none; }';
+ $result = $this->setting->validate( $unopened_curly_bracket );
+ $this->assertTrue( array_key_exists( 'imbalanced_curly_brackets', $result->errors ) );
+
+ // Check for Unclosed Braces.
+ $unclosed_brace = $basic_css . ' input[type="text" { color: #f00; } ';
+ $result = $this->setting->validate( $unclosed_brace );
+ $this->assertTrue( array_key_exists( 'imbalanced_braces', $result->errors ) );
+
+ // Check for Unopened Braces.
+ $unopened_brace = $basic_css . ' inputtype="text"] { color: #f00; } ';
+ $result = $this->setting->validate( $unopened_brace );
+ $this->assertTrue( array_key_exists( 'imbalanced_braces', $result->errors ) );
+
+ // Check for Imbalanced Double Quotes.
+ $imbalanced_double_quotes = $basic_css . ' div.background-image { background-image: url( "image.jpg ); } ';
+ $result = $this->setting->validate( $imbalanced_double_quotes );
+ $this->assertTrue( array_key_exists( 'unequal_double_quotes', $result->errors ) );
+
+ // Check for Imbalanced Single Quotes.
+ $imbalanced_single_quotes = $basic_css . " div.background-image { background-image: url( 'image.jpg ); } ";
+ $result = $this->setting->validate( $imbalanced_single_quotes );
+ $this->assertTrue( array_key_exists( 'unequal_single_quotes', $result->errors ) );
+
+ // Check for Unclosed Parentheses.
+ $unclosed_parentheses = $basic_css . ' div.background-image { background-image: url( "image.jpg" ; } ';
+ $result = $this->setting->validate( $unclosed_parentheses );
+ $this->assertTrue( array_key_exists( 'imbalanced_parentheses', $result->errors ) );
+
+ // Check for Unopened Parentheses.
+ $unopened_parentheses = $basic_css . ' div.background-image { background-image: url "image.jpg" ); } ';
+ $result = $this->setting->validate( $unopened_parentheses );
+ $this->assertTrue( array_key_exists( 'imbalanced_parentheses', $result->errors ) );
+
+ // A basic Content declaration with no other errors should not throw an error.
+ $content_declaration = $basic_css . ' a:before { content: ""; display: block; }';
+ $result = $this->setting->validate( $content_declaration );
+ $this->assertTrue( $result );
+
+ // An error, along with a Content declaration will throw two errors.
+ // In this case, we're using an extra opening brace.
+ $content_declaration = $basic_css . ' a:before { content: "["; display: block; }';
+ $result = $this->setting->validate( $content_declaration );
+ $this->assertTrue( array_key_exists( 'imbalanced_braces', $result->errors ) );
+ $this->assertTrue( array_key_exists( 'possible_false_positive', $result->errors ) );
+
+ $css = 'body { background: #f00; } h1.site-title { font-size: 36px; } a:hover { text-decoration: none; } input[type="text"] { padding: 1em; } /* This is a comment */';
+ $this->assertTrue( $this->setting->validate( $css ) );
+
+ $validity = $this->setting->validate( $css . ' /* This is another comment.' );
+ $this->assertInstanceOf( 'WP_Error', $validity );
+ $this->assertContains( 'unclosed code comment', join( ' ', $validity->get_error_messages() ) );
+
+ $css = '/* This is comment one. */ /* This is comment two. */';
+ $this->assertTrue( $this->setting->validate( $css ) );
+
+ $basic_css = 'body { background: #f00; } h1.site-title { font-size: 36px; } a:hover { text-decoration: none; } input[type="text"] { padding: 1em; }';
+ $this->assertTrue( $this->setting->validate( $basic_css ) );
+
+ $css = $basic_css . ' .link:before { content: "*"; display: block; }';
+ $this->assertTrue( $this->setting->validate( $css ) );
+
+ $css .= ' ( trailing';
+ $validity = $this->setting->validate( $css );
+ $this->assertWPError( $validity );
+ $this->assertNotEmpty( $result->get_error_message( 'possible_false_positive' ) );
+ }
+}
</ins></span></pre></div>
<a id="trunktestsphpunittestsusercapabilitiesphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/user/capabilities.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/user/capabilities.php 2016-10-19 13:45:28 UTC (rev 38828)
+++ trunk/tests/phpunit/tests/user/capabilities.php 2016-10-19 18:14:21 UTC (rev 38829)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -391,6 +391,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // These primitive capabilities have a 'case' in `map_meta_cap()` but aren't meta capabilities:
</span><span class="cx" style="display: block; padding: 0 10px"> $expected['unfiltered_upload'],
</span><span class="cx" style="display: block; padding: 0 10px"> $expected['unfiltered_html'],
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $expected['unfiltered_css'],
</ins><span class="cx" style="display: block; padding: 0 10px"> $expected['edit_files'],
</span><span class="cx" style="display: block; padding: 0 10px"> $expected['edit_plugins'],
</span><span class="cx" style="display: block; padding: 0 10px"> $expected['edit_themes'],
</span></span></pre>
</div>
</div>
</body>
</html>