WordPress.org

Make WordPress Core


Ignore:
Timestamp:
10/19/2016 06:14:21 PM (3 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-customize-section.php

    r38470 r38829  
    147147
    148148    /**
     149     * Show the description or hide it behind the help icon.
     150     *
     151     * @since 4.7.0
     152     * @access public
     153     *
     154     * @var bool Indicates whether the Section's description should be
     155     *           hidden behind a help icon ("?") in the Section header,
     156     *           similar to how help icons are displayed on Panels.
     157     */
     158    public $description_hidden = false;
     159
     160    /**
    149161     * Constructor.
    150162     *
     
    224236     */
    225237    public function json() {
    226         $array = wp_array_slice_assoc( (array) $this, array( 'id', 'description', 'priority', 'panel', 'type' ) );
     238        $array = wp_array_slice_assoc( (array) $this, array( 'id', 'description', 'priority', 'panel', 'type', 'description_hidden' ) );
    227239        $array['title'] = html_entity_decode( $this->title, ENT_QUOTES, get_bloginfo( 'charset' ) );
    228240        $array['content'] = $this->get_content();
     
    325337     */
    326338    public function print_template() {
    327         ?>
     339        ?>
    328340        <script type="text/html" id="tmpl-customize-section-<?php echo $this->type; ?>">
    329341            <?php $this->render_template(); ?>
    330342        </script>
    331         <?php
     343        <?php
    332344    }
    333345
     
    351363            </h3>
    352364            <ul class="accordion-section-content">
    353                 <li class="customize-section-description-container">
     365                <li class="customize-section-description-container section-meta <# if ( data.description_hidden ) { #>customize-info<# } #>">
    354366                    <div class="customize-section-title">
    355367                        <button class="customize-section-back" tabindex="-1">
     
    362374                            {{ data.title }}
    363375                        </h3>
     376                        <# if ( data.description && data.description_hidden ) { #>
     377                            <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
     378                            <div class="description customize-section-description">
     379                                {{{ data.description }}}
     380                            </div>
     381                        <# } #>
    364382                    </div>
    365                     <# if ( data.description ) { #>
     383
     384                    <# if ( data.description && ! data.description_hidden ) { #>
    366385                        <div class="description customize-section-description">
    367386                            {{{ data.description }}}
Note: See TracChangeset for help on using the changeset viewer.