Ticket #35395: customize-css.diff

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

@@ -533 +533 @@
         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

@@ -423 +423 @@
          *
          * 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 {@see WP_Customize_Control::print_template()}.
@@ -432 +432 @@
          */
         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

@@ -2075 +2075 @@
                                 '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',
+                ) );
+
+                $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">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">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',
+                        ) );
+                }
         }
 
         /**

src/wp-includes/default-filters.php

@@ -236 +236 @@
 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

@@ -169 +169 @@
                         });
                 });
 
+                api( 'wp_custom_css', function( value ) {
+                        value.bind( function( to ) {
+                                $( '#wp-custom-css' ).html( to );
+                        } );
+                } );
+
                 api.trigger( 'preview-ready' );
         });
 

src/wp-includes/theme.php

@@ -1396 +1396 @@
 <?php
 }
 
+
 /**
+ * Render custom CSS.
+ *
+ * @since 4.5
+ */
+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;
+}
+
+/**
  * Add callback for custom TinyMCE editor stylesheets.
  *
  * The parameter $stylesheet is the name of the stylesheet, relative to