vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-07-01 15:50:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Customize: Introduce custom CSS for extending theme styles.

Browse Source 
* 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@38829 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter
2016-10-19 18:14:21 +00:00
parent 949d991913
commit 76226c9b41
12 changed files with 855 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/wp-includes/theme.php
View File

@@ -1400,6 +1400,89 @@ body.custom-background { <?php echo trim( $style ); ?> }
<?php
}
/**
* Render the Custom CSS style element.
*
* @since 4.7.0
* @access public
*/
function wp_custom_css_cb() {
$styles = wp_get_custom_css();
if ( $styles || is_customize_preview() ) : ?>
<style type="text/css" id="wp-custom-css">
<?php echo strip_tags( $styles ); // Note that esc_html() cannot be used because `div &gt; span` is not interpreted properly. ?>
</style>
<?php endif;
}
/**
* Fetch the saved Custom CSS content.
*
* Gets the content of a Custom CSS post that matches the
* current theme.
*
* @since 4.7.0
* @access public
*
* @param string $stylesheet Optional. A theme object stylesheet name. Defaults to the current theme.
*
* @return string The Custom CSS Post content.
*/
function wp_get_custom_css( $stylesheet = '' ) {
$css = '';
if ( empty( $stylesheet ) ) {
$stylesheet = get_stylesheet();
}
$custom_css_query_vars = array(
'post_type' => 'custom_css',
'post_status' => get_post_stati(),
'name' => sanitize_title( $stylesheet ),
'number' => 1,
'no_found_rows' => true,
'cache_results' => true,
'update_post_meta_cache' => false,
'update_term_meta_cache' => false,
);
$post = null;
if ( get_stylesheet() === $stylesheet ) {
$post_id = get_theme_mod( 'custom_css_post_id' );
if ( ! $post_id ) {
$query = new WP_Query( $custom_css_query_vars );
$post = $query->post;
/*
* Cache the lookup. See WP_Customize_Custom_CSS_Setting::update().
* @todo This should get cleared if a custom_css post is added/removed.
*/
set_theme_mod( 'custom_css_post_id', $post ? $post->ID : -1 );
} elseif ( $post_id > 0 ) {
$post = get_post( $post_id );
}
} else {
$query = new WP_Query( $custom_css_query_vars );
$post = $query->post;
}
if ( $post ) {
$css = $post->post_content;
}
/**
* Modify the Custom CSS Output into the <head>.
*
* @since 4.7.0
*
* @param string $css CSS pulled in from the Custom CSS CPT.
* @param string $stylesheet The theme stylesheet name.
*/
$css = apply_filters( 'wp_get_custom_css', $css, $stylesheet );
return $css;
}
/**
* Add callback for custom TinyMCE editor stylesheets.
*