Changeset 38829 for trunk/src/wp-includes/class-wp-customize-section.php

Timestamp:

10/19/2016 06:14:21 PM (8 years ago)

Author:

westonruter

Message:

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.

File:

• trunk/src/wp-includes/class-wp-customize-section.php (modified) (5 diffs)

trunk/src/wp-includes/class-wp-customize-section.php

@@ -147 +147 @@
 
     /**
+     * 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.
      *
@@ -224 +236 @@
      */
     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();
@@ -325 +337 @@
      */
     public function print_template() {
-        ?>
+        ?>
         <script type="text/html" id="tmpl-customize-section-<?php echo $this->type; ?>">
             <?php $this->render_template(); ?>
         </script>
-        <?php
+        <?php
     }
 
@@ -351 +363 @@
             </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">
@@ -362 +374 @@
                             {{ 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 }}}