Ticket #35395: 35395.diff

src/wp-admin/css/customize-controls.css

@@ -534 +534 @@
         margin-bottom: 5px;
 }
 
+.customize-control-description a.external-link:after {
+    font: 16px/11px dashicons;
+    content: "\f310";
+    top: 3px;
+    position: relative;
+}
+
 .customize-control-color .color-picker,
 .customize-control-upload div {
         line-height: 28px;

src/wp-includes/class-wp-customize-control.php

@@ -446 +446 @@
          *
          * Allows the content to be overriden without having to rewrite the wrapper in `$this::render()`.
          *
-         * Supports basic input types `text`, `checkbox`, `textarea`, `radio`, `select` and `dropdown-pages`.
+         * Supports basic input types `none`, `text`, `checkbox`, `textarea`, `radio`, `select` and `dropdown-pages`.
          * Additional input types such as `email`, `url`, `number`, `hidden` and `date` are supported implicitly.
          *
          * Control content can alternately be rendered in JS. See WP_Customize_Control::print_template().
@@ -455 +455 @@
          */
         protected function render_content() {
                 switch( $this->type ) {
+                        case 'none':
+                                        if ( ! empty( $this->label ) ) : ?>
+                                                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
+                                        <?php endif;
+                                        if ( ! empty( $this->description ) ) : ?>
+                                                <span class="description customize-control-description"><?php echo $this->description; ?></span>
+                                        <?php endif;
+                                break;
                         case 'checkbox':
                                 ?>
                                 <label>

src/wp-includes/class-wp-customize-manager.php

@@ -1535 +1535 @@
                 <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>
@@ -2315 +2315 @@
                                 'type'       => 'dropdown-pages',
                         ) );
                 }
+
+                /* Custom CSS */
+
+                $this->add_section( 'custom_css', array(
+                        'title'    => __( 'Custom CSS' ),
+                        'priority' => 140,
+                ) );
+
+                $this->add_setting( 'wp_custom_css' , array(
+                        'type'              => 'theme_mod',
+                        'transport'         => 'postMessage',
+                        'sanitize_callback' => array( $this, '_sanitize_css' ),
+                        'validate_callback' => array( $this, '_validate_css' ),
+                ) );
+
+                $this->add_control( 'wp_custom_css', array(
+                        'label'       => __( 'Custom CSS' ),
+                        'description' => __( 'CSS allows you to customize the appearance and layout of your site with code. Each theme has its own set of CSS styles, which this option overrides on a per-theme basis. <a href="https://codex.wordpress.org/Know_Your_Sources#CSS" class="external-link" target="_blank">Learn more about CSS <span class="screen-reader-text">(link opens in a new window)</span></a>.' ),
+                        'type'        => 'textarea',
+                        'section'     => 'custom_css',
+                ) );
+
+                if ( ! is_multisite() ) {
+                        $this->add_setting( 'wp_custom_css_more', array() );
+                        $this->add_control( 'wp_custom_css_more', array(
+                                'type' => 'none',
+                                'description' => __( 'Enjoy writing custom CSS? <a href="https://developer.wordpress.org/themes/advanced-topics/child-themes/" class="external-link" target="_blank">Take your customizations to the next level with a child theme <span class="screen-reader-text">(link opens in a new window)</span></a>.' ),
+                                'section'     => 'custom_css',
+                        ) );
+                }
+
+                $this->selective_refresh->add_partial( 'wp_custom_css', array(
+                        'selector' => '#wp-custom-css',
+                        'render_callback' => 'wp_get_custom_css',
+                ) );
         }
 
         /**
@@ -2352 +2387 @@
         }
 
         /**
+         * Callback for sanitizing CSS.
+         *
+         * @since 4.7.0
+         *
+         * @param string $css
+         * @return mixed
+         */
+        public function _sanitize_css( $css ) {
+                // @todo determine what is required for CSS sanitization. Likely requires breaking css into arrays and handling piece by piece.
+
+                return $css;
+        }
+
+        /**
+         * Callback for validating CSS.
+         *
+         * Checks for unbalanced braces and unclosed comments.
+         *
+         * @since 4.7.0
+         *
+         * @param mixed  $validity
+         * @param string $css
+         * @return mixed
+         */
+        public function _validate_css( $validity, $css ) {
+                // Make sure that there is a closing brace for each opening brace.
+                if ( substr_count( $css, '{' ) !== substr_count( $css, '}' ) ) {
+                        $validity->add( 'unbalanced_braces', __( 'Your braces <code>{}</code> are unbalanced. Make sure there is a closing <code>}</code> for every opening <code>{</code>.' ) );
+                }
+                
+                // Make sure that any code comments are closed properly.
+                $count = 0;
+                $comments = explode( '/*', $css );
+                unset( $comments[0] ); // The first array came before the first comment.
+                foreach( $comments as $comment ) {
+                        if ( false === strpos( $comment, '*/' ) ) {
+                                $count++;
+                        }
+                }
+                if ( 0 < $count ) {
+                        $validity->add( 'unclosed_comment', sprintf( _n( 'There is an unclosed code comment. Close each comment with <code>*/</code>.', 'There are %s unclosed code comments. Close each comment with <code>*/</code>.', $count ), $count ) );
+                }
+
+                return $validity;
+        }
+
+        /**
          * Callback for rendering the custom logo, used in the custom_logo partial.
          *
          * This method exists because the partial object and context data are passed

src/wp-includes/default-filters.php

@@ -244 +244 @@
 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 );

src/wp-includes/js/customize-preview.js

@@ -235 +235 @@
                         $( 'body' ).toggleClass( 'wp-custom-logo', !! setting.get() );
                         setting.bind( function( attachmentId ) {
                                 $( 'body' ).toggleClass( 'wp-custom-logo', !! attachmentId );
+                        });
+                });
+
+                api( 'wp_custom_css', function( value ) {
+                        value.bind( function( to ) {
+                                $( '#wp-custom-css' ).html( to );
                         } );
                 } );
 

src/wp-includes/theme.php

@@ -1400 +1400 @@
 <?php
 }
 
+
 /**
+ * Render custom CSS.
+ *
+ * @since 4.7.0
+ */
+function wp_custom_css_cb() {
+        $styles = get_theme_mod( 'wp_custom_css' );
+        if ( $styles ) :
+?>
+        <style type="text/css" id="wp-custom-css">
+                <?php echo $styles; ?>
+        </style>
+<?php
+        endif;
+}
+
+/**
+ * Get custom CSS.
+ *
+ * @return string CSS.
+ * @since 4.7.0
+ */
+function wp_get_custom_css() {
+        return get_theme_mod( 'wp_custom_css', '' );
+}
+
+/**
  * Add callback for custom TinyMCE editor stylesheets.
  *
  * The parameter $stylesheet is the name of the stylesheet, relative to