From 76226c9b411be1cf20a76c4f9f88968d88cb66de Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Wed, 19 Oct 2016 18:14:21 +0000
Subject: [PATCH] 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 #35395.


git-svn-id: https://develop.svn.wordpress.org/trunk@38829 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css       |  64 ++-
 src/wp-admin/js/customize-controls.js         |  17 +-
 src/wp-includes/capabilities.php              |   3 +
 .../class-wp-customize-manager.php            |  29 +-
 .../class-wp-customize-section.php            |  29 +-
 .../class-wp-customize-custom-css-setting.php | 373 ++++++++++++++++++
 src/wp-includes/default-filters.php           |   1 +
 src/wp-includes/js/customize-preview.js       |   6 +
 src/wp-includes/post.php                      |  29 ++
 src/wp-includes/theme.php                     |  83 ++++
 .../tests/customize/custom-css-setting.php    | 231 +++++++++++
 tests/phpunit/tests/user/capabilities.php     |   1 +
 12 files changed, 855 insertions(+), 11 deletions(-)
 create mode 100644 src/wp-includes/customize/class-wp-customize-custom-css-setting.php
 create mode 100644 tests/phpunit/tests/customize/custom-css-setting.php

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index be32bd7b3b..96aba5455c 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -53,6 +53,10 @@ body {
 	margin-bottom: 15px;
 }
 
+#customize-controls .customize-info.section-meta {
+	margin-bottom: 15px;
+}
+
 #customize-controls .customize-info .accordion-section-title {
 	background: #fff;
 	color: #555;
@@ -124,6 +128,7 @@ body {
 }
 
 #customize-controls .customize-info .customize-panel-description,
+#customize-controls .customize-info .customize-section-description,
 #customize-controls .no-widget-areas-rendered-notice {
 	color: #555;
 	display: none;
@@ -131,15 +136,22 @@ body {
 	padding: 12px 15px;
 	border-top: 1px solid #ddd;
 }
+
 #customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
 	border-top: none;
 }
 
-#customize-controls .customize-info .customize-panel-description p:first-child {
+#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 {
 	margin-top: 0;
 }
 
-#customize-controls .customize-info .customize-panel-description p:last-child {
+#customize-controls .customize-info .customize-panel-description p:last-child,
+#customize-controls .customize-info .customize-section-description p:last-child {
 	margin-bottom: 0;
 }
 
@@ -327,6 +339,10 @@ div.customize-section-description {
 	margin-top: 22px;
 }
 
+.customize-info div.customize-section-description {
+	margin-top: 0;
+}
+
 div.customize-section-description p:first-child {
 	margin-top: 0;
 }
@@ -542,6 +558,16 @@ p.customize-section-description {
 	margin-bottom: 5px;
 }
 
+.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;
+}
+
 .customize-control-color .color-picker,
 .customize-control-upload div {
 	line-height: 28px;
@@ -962,6 +988,40 @@ p.customize-section-description {
 	float: right;
 }
 
+/**
+ * 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;
+}
+
 /**
  * Themes
  */
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 9b0e78e3b7..e354d0decd 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -904,7 +904,7 @@
 		 * @since 4.1.0
 		 */
 		attachEvents: function () {
-			var section = this;
+			var meta, content, section = this;
 
 			// Expand/Collapse accordion sections on click.
 			section.container.find( '.accordion-section-title, .customize-section-back' ).on( 'click keydown', function( event ) {
@@ -919,6 +919,21 @@
 					section.expand();
 				}
 			});
+
+			// 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';
+				});
+			});
 		},
 
 		/**
diff --git a/src/wp-includes/capabilities.php b/src/wp-includes/capabilities.php
index 841fba1488..c9158b6071 100644
--- a/src/wp-includes/capabilities.php
+++ b/src/wp-includes/capabilities.php
@@ -329,6 +329,9 @@ function map_meta_cap( $cap, $user_id ) {
 		else
 			$caps[] = $cap;
 		break;
+	case 'unfiltered_css' :
+		$caps[] = 'unfiltered_html';
+		break;
 	case 'edit_files':
 	case 'edit_plugins':
 	case 'edit_themes':
diff --git a/src/wp-includes/class-wp-customize-manager.php b/src/wp-includes/class-wp-customize-manager.php
index 28ec792d0f..23a65f127f 100644
--- a/src/wp-includes/class-wp-customize-manager.php
+++ b/src/wp-includes/class-wp-customize-manager.php
@@ -300,6 +300,7 @@ final class WP_Customize_Manager {
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-section.php' );
 
+		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-custom-css-setting.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-filter-setting.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-header-image-setting.php' );
 		require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-setting.php' );
@@ -2493,7 +2494,7 @@ final class WP_Customize_Manager {
 		<script type="text/html" id="tmpl-customize-control-notifications">
 			<ul>
 				<# _.each( data.notifications, function( notification ) { #>
-					<li class="notice notice-{{ notification.type || 'info' }} {{ data.altNotice ? 'notice-alt' : '' }}" data-code="{{ notification.code }}" data-type="{{ notification.type }}">{{ notification.message || notification.code }}</li>
+					<li class="notice notice-{{ notification.type || 'info' }} {{ data.altNotice ? 'notice-alt' : '' }}" data-code="{{ notification.code }}" data-type="{{ notification.type }}">{{{ notification.message || notification.code }}}</li>
 				<# } ); #>
 			</ul>
 		</script>
@@ -3220,7 +3221,6 @@ final class WP_Customize_Manager {
 			'section' => 'colors',
 		) ) );
 
-
 		/* Custom Header */
 
 		$this->add_section( 'header_image', array(
@@ -3366,6 +3366,30 @@ final class WP_Customize_Manager {
 			'section' => 'static_front_page',
 			'type' => 'dropdown-pages',
 		) );
+
+		/* 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 ),
+		) );
 	}
 
 	/**
@@ -3388,7 +3412,6 @@ final class WP_Customize_Manager {
 				}
 			}
 		}
-
 		return 0 !== count( get_pages() );
 	}
 
diff --git a/src/wp-includes/class-wp-customize-section.php b/src/wp-includes/class-wp-customize-section.php
index 0a916f2f54..68d677133e 100644
--- a/src/wp-includes/class-wp-customize-section.php
+++ b/src/wp-includes/class-wp-customize-section.php
@@ -145,6 +145,18 @@ class WP_Customize_Section {
 	 */
 	public $active_callback = '';
 
+	/**
+	 * 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;
+
 	/**
 	 * Constructor.
 	 *
@@ -223,7 +235,7 @@ class WP_Customize_Section {
 	 * @return array The array to be exported to the client as JSON.
 	 */
 	public function json() {
-		$array = wp_array_slice_assoc( (array) $this, array( 'id', 'description', 'priority', 'panel', 'type' ) );
+		$array = wp_array_slice_assoc( (array) $this, array( 'id', 'description', 'priority', 'panel', 'type', 'description_hidden' ) );
 		$array['title'] = html_entity_decode( $this->title, ENT_QUOTES, get_bloginfo( 'charset' ) );
 		$array['content'] = $this->get_content();
 		$array['active'] = $this->active();
@@ -324,11 +336,11 @@ class WP_Customize_Section {
 	 * @see WP_Customize_Manager::render_template()
 	 */
 	public function print_template() {
-        ?>
+		?>
 		<script type="text/html" id="tmpl-customize-section-<?php echo $this->type; ?>">
 			<?php $this->render_template(); ?>
 		</script>
-        <?php
+		<?php
 	}
 
 	/**
@@ -350,7 +362,7 @@ class WP_Customize_Section {
 				<span class="screen-reader-text"><?php _e( 'Press return or enter to open this section' ); ?></span>
 			</h3>
 			<ul class="accordion-section-content">
-				<li class="customize-section-description-container">
+				<li class="customize-section-description-container section-meta <# if ( data.description_hidden ) { #>customize-info<# } #>">
 					<div class="customize-section-title">
 						<button class="customize-section-back" tabindex="-1">
 							<span class="screen-reader-text"><?php _e( 'Back' ); ?></span>
@@ -361,8 +373,15 @@ class WP_Customize_Section {
 							</span>
 							{{ data.title }}
 						</h3>
+						<# 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>
+						<# } #>
 					</div>
-					<# if ( data.description ) { #>
+
+					<# if ( data.description && ! data.description_hidden ) { #>
 						<div class="description customize-section-description">
 							{{{ data.description }}}
 						</div>
diff --git a/src/wp-includes/customize/class-wp-customize-custom-css-setting.php b/src/wp-includes/customize/class-wp-customize-custom-css-setting.php
new file mode 100644
index 0000000000..285adb5f7f
--- /dev/null
+++ b/src/wp-includes/customize/class-wp-customize-custom-css-setting.php
@@ -0,0 +1,373 @@
+<?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;
+	}
+}
diff --git a/src/wp-includes/default-filters.php b/src/wp-includes/default-filters.php
index 6301f732c9..d5f2116257 100644
--- a/src/wp-includes/default-filters.php
+++ b/src/wp-includes/default-filters.php
@@ -245,6 +245,7 @@ add_action( 'wp_head',             'wp_print_head_scripts',            9    );
 add_action( 'wp_head',             'wp_generator'                           );
 add_action( 'wp_head',             'rel_canonical'                          );
 add_action( 'wp_head',             'wp_shortlink_wp_head',            10, 0 );
+add_action( 'wp_head',             'wp_custom_css_cb',                11    );
 add_action( 'wp_head',             'wp_site_icon',                    99    );
 add_action( 'wp_footer',           'wp_print_footer_scripts',         20    );
 add_action( 'template_redirect',   'wp_shortlink_header',             11, 0 );
diff --git a/src/wp-includes/js/customize-preview.js b/src/wp-includes/js/customize-preview.js
index cebe41f485..52de00df6a 100644
--- a/src/wp-includes/js/customize-preview.js
+++ b/src/wp-includes/js/customize-preview.js
@@ -786,6 +786,12 @@
 			$( 'body' ).toggleClass( 'wp-custom-logo', !! setting.get() );
 			setting.bind( function( attachmentId ) {
 				$( 'body' ).toggleClass( 'wp-custom-logo', !! attachmentId );
+			});
+		});
+
+		api( 'custom_css[' + api.settings.theme.stylesheet + ']', function( value ) {
+			value.bind( function( to ) {
+				$( '#wp-custom-css' ).text( to );
 			} );
 		} );
 
diff --git a/src/wp-includes/post.php b/src/wp-includes/post.php
index 463c874767..1ea56f2919 100644
--- a/src/wp-includes/post.php
+++ b/src/wp-includes/post.php
@@ -111,6 +111,35 @@ function create_initial_post_types() {
 		'query_var' => false,
 	) );
 
+	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',
+		),
+	) );
+
 	register_post_type( 'customize_changeset', array(
 		'labels' => array(
 			'name'               => _x( 'Changesets', 'post type general name' ),
diff --git a/src/wp-includes/theme.php b/src/wp-includes/theme.php
index b5b8541a1e..9ec5ec09de 100644
--- a/src/wp-includes/theme.php
+++ b/src/wp-includes/theme.php
@@ -1400,6 +1400,89 @@ body.custom-background { <?php echo trim( $style ); ?> }
 <?php
 }
 
+/**
+ * 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 &gt; 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;
+}
+
 /**
  * Add callback for custom TinyMCE editor stylesheets.
  *
diff --git a/tests/phpunit/tests/customize/custom-css-setting.php b/tests/phpunit/tests/customize/custom-css-setting.php
new file mode 100644
index 0000000000..4c98012626
--- /dev/null
+++ b/tests/phpunit/tests/customize/custom-css-setting.php
@@ -0,0 +1,231 @@
+<?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' ) );
+	}
+}
diff --git a/tests/phpunit/tests/user/capabilities.php b/tests/phpunit/tests/user/capabilities.php
index cba096bb84..9375054845 100644
--- a/tests/phpunit/tests/user/capabilities.php
+++ b/tests/phpunit/tests/user/capabilities.php
@@ -391,6 +391,7 @@ class Tests_User_Capabilities extends WP_UnitTestCase {
 			// These primitive capabilities have a 'case' in `map_meta_cap()` but aren't meta capabilities:
 			$expected['unfiltered_upload'],
 			$expected['unfiltered_html'],
+			$expected['unfiltered_css'],
 			$expected['edit_files'],
 			$expected['edit_plugins'],
 			$expected['edit_themes'],