WordPress.org
Get WordPress

Make WordPress Core


Ignore:
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:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/theme.php

    r38810 r38829  
    14021402
    14031403/**
     1404 * Render the Custom CSS style element.
     1405 *
     1406 * @since 4.7.0
     1407 * @access public
     1408 */
     1409function wp_custom_css_cb() {
     1410    $styles = wp_get_custom_css();
     1411    if ( $styles || is_customize_preview() ) : ?>
     1412        <style type="text/css" id="wp-custom-css">
     1413            <?php echo strip_tags( $styles ); // Note that esc_html() cannot be used because `div &gt; span` is not interpreted properly. ?>
     1414        </style>
     1415    <?php endif;
     1416}
     1417
     1418/**
     1419 * Fetch the saved Custom CSS content.
     1420 *
     1421 * Gets the content of a Custom CSS post that matches the
     1422 * current theme.
     1423 *
     1424 * @since 4.7.0
     1425 * @access public
     1426 *
     1427 * @param string $stylesheet Optional. A theme object stylesheet name. Defaults to the current theme.
     1428 *
     1429 * @return string The Custom CSS Post content.
     1430 */
     1431function wp_get_custom_css( $stylesheet = '' ) {
     1432    $css = '';
     1433
     1434    if ( empty( $stylesheet ) ) {
     1435        $stylesheet = get_stylesheet();
     1436    }
     1437
     1438    $custom_css_query_vars = array(
     1439        'post_type' => 'custom_css',
     1440        'post_status' => get_post_stati(),
     1441        'name' => sanitize_title( $stylesheet ),
     1442        'number' => 1,
     1443        'no_found_rows' => true,
     1444        'cache_results' => true,
     1445        'update_post_meta_cache' => false,
     1446        'update_term_meta_cache' => false,
     1447    );
     1448
     1449    $post = null;
     1450    if ( get_stylesheet() === $stylesheet ) {
     1451        $post_id = get_theme_mod( 'custom_css_post_id' );
     1452        if ( ! $post_id ) {
     1453            $query = new WP_Query( $custom_css_query_vars );
     1454            $post = $query->post;
     1455
     1456            /*
     1457             * Cache the lookup. See WP_Customize_Custom_CSS_Setting::update().
     1458             * @todo This should get cleared if a custom_css post is added/removed.
     1459             */
     1460            set_theme_mod( 'custom_css_post_id', $post ? $post->ID : -1 );
     1461        } elseif ( $post_id > 0 ) {
     1462            $post = get_post( $post_id );
     1463        }
     1464    } else {
     1465        $query = new WP_Query( $custom_css_query_vars );
     1466        $post = $query->post;
     1467    }
     1468
     1469    if ( $post ) {
     1470        $css = $post->post_content;
     1471    }
     1472
     1473    /**
     1474     * Modify the Custom CSS Output into the <head>.
     1475     *
     1476     * @since 4.7.0
     1477     *
     1478     * @param string $css        CSS pulled in from the Custom CSS CPT.
     1479     * @param string $stylesheet The theme stylesheet name.
     1480     */
     1481    $css = apply_filters( 'wp_get_custom_css', $css, $stylesheet );
     1482
     1483    return $css;
     1484}
     1485
     1486/**
    14041487 * Add callback for custom TinyMCE editor stylesheets.
    14051488 *
Note: See TracChangeset for help on using the changeset viewer.