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. Built from https://develop.svn.wordpress.org/trunk@38829 git-svn-id: http://core.svn.wordpress.org/trunk@38772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter
parent
ec5782bed5
commit
1ccd9e7a6c
|
|
@ -53,6 +53,10 @@ body {
|
|||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#customize-controls .customize-info.section-meta {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#customize-controls .customize-info .accordion-section-title {
|
||||
background: #fff;
|
||||
color: #555;
|
||||
|
|
@ -124,6 +128,7 @@ body {
|
|||
}
|
||||
|
||||
#customize-controls .customize-info .customize-panel-description,
|
||||
#customize-controls .customize-info .customize-section-description,
|
||||
#customize-controls .no-widget-areas-rendered-notice {
|
||||
color: #555;
|
||||
display: none;
|
||||
|
|
@ -131,15 +136,22 @@ body {
|
|||
padding: 12px 15px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
#customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
#customize-controls .customize-info .customize-panel-description p:first-child {
|
||||
#customize-controls .customize-info .customize-section-description {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#customize-controls .customize-info .customize-panel-description p:first-child,
|
||||
#customize-controls .customize-info .customize-section-description p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#customize-controls .customize-info .customize-panel-description p:last-child {
|
||||
#customize-controls .customize-info .customize-panel-description p:last-child,
|
||||
#customize-controls .customize-info .customize-section-description p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -327,6 +339,10 @@ div.customize-section-description {
|
|||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.customize-info div.customize-section-description {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
div.customize-section-description p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -542,6 +558,16 @@ p.customize-section-description {
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.customize-section-description a.external-link:after {
|
||||
font: 16px/11px dashicons;
|
||||
content: "\f310";
|
||||
top: 3px;
|
||||
position: relative;
|
||||
padding-right: 3px;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.customize-control-color .color-picker,
|
||||
.customize-control-upload div {
|
||||
line-height: 28px;
|
||||
|
|
@ -962,6 +988,40 @@ p.customize-section-description {
|
|||
float: left;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom CSS Section
|
||||
*
|
||||
* Modifications to the Section Container to
|
||||
* make the textarea full-width.
|
||||
*/
|
||||
#customize-theme-controls #sub-accordion-section-custom_css {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#customize-theme-controls #sub-accordion-section-custom_css .customize-section-title {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#customize-theme-controls #sub-accordion-section-custom_css .customize-control-title,
|
||||
#customize-theme-controls #sub-accordion-section-custom_css .notice {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#sub-accordion-section-custom_css .customize-control-notifications-container {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#sub-accordion-section-custom_css textarea {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
font-size: 12px;
|
||||
padding: 6px 8px;
|
||||
height: 553px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Themes
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -53,6 +53,10 @@ body {
|
|||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#customize-controls .customize-info.section-meta {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#customize-controls .customize-info .accordion-section-title {
|
||||
background: #fff;
|
||||
color: #555;
|
||||
|
|
@ -124,6 +128,7 @@ body {
|
|||
}
|
||||
|
||||
#customize-controls .customize-info .customize-panel-description,
|
||||
#customize-controls .customize-info .customize-section-description,
|
||||
#customize-controls .no-widget-areas-rendered-notice {
|
||||
color: #555;
|
||||
display: none;
|
||||
|
|
@ -131,15 +136,22 @@ body {
|
|||
padding: 12px 15px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
#customize-controls .customize-info .customize-panel-description.open + .no-widget-areas-rendered-notice {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
#customize-controls .customize-info .customize-panel-description p:first-child {
|
||||
#customize-controls .customize-info .customize-section-description {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#customize-controls .customize-info .customize-panel-description p:first-child,
|
||||
#customize-controls .customize-info .customize-section-description p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#customize-controls .customize-info .customize-panel-description p:last-child {
|
||||
#customize-controls .customize-info .customize-panel-description p:last-child,
|
||||
#customize-controls .customize-info .customize-section-description p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -327,6 +339,10 @@ div.customize-section-description {
|
|||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.customize-info div.customize-section-description {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
div.customize-section-description p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -542,6 +558,16 @@ p.customize-section-description {
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.customize-section-description a.external-link:after {
|
||||
font: 16px/11px dashicons;
|
||||
content: "\f310";
|
||||
top: 3px;
|
||||
position: relative;
|
||||
padding-left: 3px;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.customize-control-color .color-picker,
|
||||
.customize-control-upload div {
|
||||
line-height: 28px;
|
||||
|
|
@ -962,6 +988,40 @@ p.customize-section-description {
|
|||
float: right;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom CSS Section
|
||||
*
|
||||
* Modifications to the Section Container to
|
||||
* make the textarea full-width.
|
||||
*/
|
||||
#customize-theme-controls #sub-accordion-section-custom_css {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#customize-theme-controls #sub-accordion-section-custom_css .customize-section-title {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#customize-theme-controls #sub-accordion-section-custom_css .customize-control-title,
|
||||
#customize-theme-controls #sub-accordion-section-custom_css .notice {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#sub-accordion-section-custom_css .customize-control-notifications-container {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#sub-accordion-section-custom_css textarea {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
font-size: 12px;
|
||||
padding: 6px 8px;
|
||||
height: 553px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Themes
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -904,7 +904,7 @@
|
|||
* @since 4.1.0
|
||||
*/
|
||||
attachEvents: function () {
|
||||
var section = this;
|
||||
var meta, content, section = this;
|
||||
|
||||
// Expand/Collapse accordion sections on click.
|
||||
section.container.find( '.accordion-section-title, .customize-section-back' ).on( 'click keydown', function( event ) {
|
||||
|
|
@ -919,6 +919,21 @@
|
|||
section.expand();
|
||||
}
|
||||
});
|
||||
|
||||
// This is very similar to what is found for api.Panel.attachEvents().
|
||||
section.container.find( '.customize-section-title .customize-help-toggle' ).on( 'click', function() {
|
||||
|
||||
meta = section.container.find( '.section-meta' );
|
||||
if ( meta.hasClass( 'cannot-expand' ) ) {
|
||||
return;
|
||||
}
|
||||
content = meta.find( '.customize-section-description:first' );
|
||||
content.toggleClass( 'open' );
|
||||
content.slideToggle();
|
||||
content.attr( 'aria-expanded', function ( i, attr ) {
|
||||
return attr === 'true' ? 'false' : 'true';
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -329,6 +329,9 @@ function map_meta_cap( $cap, $user_id ) {
|
|||
else
|
||||
$caps[] = $cap;
|
||||
break;
|
||||
case 'unfiltered_css' :
|
||||
$caps[] = 'unfiltered_html';
|
||||
break;
|
||||
case 'edit_files':
|
||||
case 'edit_plugins':
|
||||
case 'edit_themes':
|
||||
|
|
|
|||
|
|
@ -300,6 +300,7 @@ final class WP_Customize_Manager {
|
|||
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
|
||||
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-section.php' );
|
||||
|
||||
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-custom-css-setting.php' );
|
||||
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-filter-setting.php' );
|
||||
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-header-image-setting.php' );
|
||||
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-setting.php' );
|
||||
|
|
@ -2493,7 +2494,7 @@ final class WP_Customize_Manager {
|
|||
<script type="text/html" id="tmpl-customize-control-notifications">
|
||||
<ul>
|
||||
<# _.each( data.notifications, function( notification ) { #>
|
||||
<li class="notice notice-{{ notification.type || 'info' }} {{ data.altNotice ? 'notice-alt' : '' }}" data-code="{{ notification.code }}" data-type="{{ notification.type }}">{{ notification.message || notification.code }}</li>
|
||||
<li class="notice notice-{{ notification.type || 'info' }} {{ data.altNotice ? 'notice-alt' : '' }}" data-code="{{ notification.code }}" data-type="{{ notification.type }}">{{{ notification.message || notification.code }}}</li>
|
||||
<# } ); #>
|
||||
</ul>
|
||||
</script>
|
||||
|
|
@ -3220,7 +3221,6 @@ final class WP_Customize_Manager {
|
|||
'section' => 'colors',
|
||||
) ) );
|
||||
|
||||
|
||||
/* Custom Header */
|
||||
|
||||
$this->add_section( 'header_image', array(
|
||||
|
|
@ -3366,6 +3366,30 @@ final class WP_Customize_Manager {
|
|||
'section' => 'static_front_page',
|
||||
'type' => 'dropdown-pages',
|
||||
) );
|
||||
|
||||
/* Custom CSS */
|
||||
$this->add_section( 'custom_css', array(
|
||||
'title' => __( 'Additional CSS' ),
|
||||
'priority' => 140,
|
||||
'description_hidden' => true,
|
||||
'description' => sprintf( '%s<br /><a href="%s" class="external-link" target="_blank">%s<span class="screen-reader-text">%s</span></a>',
|
||||
__( 'CSS allows you to customize the appearance and layout of your site with code. Separate CSS is saved for each of your themes.' ),
|
||||
'https://codex.wordpress.org/Know_Your_Sources#CSS',
|
||||
__( 'Learn more about CSS' ),
|
||||
__( '(link opens in a new window)' )
|
||||
),
|
||||
) );
|
||||
|
||||
$custom_css_setting = new WP_Customize_Custom_CSS_Setting( $this, sprintf( 'custom_css[%s]', get_stylesheet() ), array(
|
||||
'capability' => 'unfiltered_css',
|
||||
) );
|
||||
$this->add_setting( $custom_css_setting );
|
||||
|
||||
$this->add_control( 'custom_css', array(
|
||||
'type' => 'textarea',
|
||||
'section' => 'custom_css',
|
||||
'settings' => array( 'default' => $custom_css_setting->id ),
|
||||
) );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -3388,7 +3412,6 @@ final class WP_Customize_Manager {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
return 0 !== count( get_pages() );
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -145,6 +145,18 @@ class WP_Customize_Section {
|
|||
*/
|
||||
public $active_callback = '';
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
|
|
@ -223,7 +235,7 @@ class WP_Customize_Section {
|
|||
* @return array The array to be exported to the client as JSON.
|
||||
*/
|
||||
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();
|
||||
$array['active'] = $this->active();
|
||||
|
|
@ -324,11 +336,11 @@ class WP_Customize_Section {
|
|||
* @see WP_Customize_Manager::render_template()
|
||||
*/
|
||||
public function print_template() {
|
||||
?>
|
||||
?>
|
||||
<script type="text/html" id="tmpl-customize-section-<?php echo $this->type; ?>">
|
||||
<?php $this->render_template(); ?>
|
||||
</script>
|
||||
<?php
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -350,7 +362,7 @@ class WP_Customize_Section {
|
|||
<span class="screen-reader-text"><?php _e( 'Press return or enter to open this section' ); ?></span>
|
||||
</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">
|
||||
<span class="screen-reader-text"><?php _e( 'Back' ); ?></span>
|
||||
|
|
@ -361,8 +373,15 @@ class WP_Customize_Section {
|
|||
</span>
|
||||
{{ 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 }}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,373 @@
|
|||
<?php
|
||||
/**
|
||||
* Customize API: WP_Customize_Custom_CSS_Setting class
|
||||
*
|
||||
* This handles validation, sanitization and saving of the value.
|
||||
*
|
||||
* @package WordPress
|
||||
* @subpackage Customize
|
||||
* @since 4.7.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* Custom Setting to handle WP Custom CSS.
|
||||
*
|
||||
* @since 4.7.0
|
||||
*
|
||||
* @see WP_Customize_Setting
|
||||
*/
|
||||
final class WP_Customize_Custom_CSS_Setting extends WP_Customize_Setting {
|
||||
|
||||
/**
|
||||
* The setting type.
|
||||
*
|
||||
* @var string
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access public
|
||||
*/
|
||||
public $type = 'custom_css';
|
||||
|
||||
/**
|
||||
* Setting Transport
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access public
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
public $transport = 'postMessage';
|
||||
|
||||
/**
|
||||
* Capability required to edit this setting.
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access public
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
public $capability = 'unfiltered_css';
|
||||
|
||||
/**
|
||||
* Stylesheet
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access public
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
public $stylesheet = '';
|
||||
|
||||
/**
|
||||
* WP_Customize_Custom_CSS_Setting constructor.
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access public
|
||||
*
|
||||
* @throws Exception If the setting ID does not match the pattern `custom_css[$stylesheet]`.
|
||||
*
|
||||
* @param WP_Customize_Manager $manager The Customize Manager class.
|
||||
* @param string $id An specific ID of the setting. Can be a
|
||||
* theme mod or option name.
|
||||
* @param array $args Setting arguments.
|
||||
*/
|
||||
public function __construct( $manager, $id, $args = array() ) {
|
||||
parent::__construct( $manager, $id, $args );
|
||||
if ( 'custom_css' !== $this->id_data['base'] ) {
|
||||
throw new Exception( 'Expected custom_css id_base.' );
|
||||
}
|
||||
if ( 1 !== count( $this->id_data['keys'] ) || empty( $this->id_data['keys'][0] ) ) {
|
||||
throw new Exception( 'Expected single stylesheet key.' );
|
||||
}
|
||||
$this->stylesheet = $this->id_data['keys'][0];
|
||||
}
|
||||
|
||||
/**
|
||||
* Add filter to preview post value.
|
||||
*
|
||||
* @since 4.7.9
|
||||
* @access public
|
||||
*
|
||||
* @return bool False when preview short-circuits due no change needing to be previewed.
|
||||
*/
|
||||
public function preview() {
|
||||
if ( $this->is_previewed ) {
|
||||
return false;
|
||||
}
|
||||
$this->is_previewed = true;
|
||||
add_filter( 'wp_get_custom_css', array( $this, 'filter_previewed_wp_get_custom_css' ), 9, 2 );
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter wp_get_custom_css for applying customized value to return value.
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access private
|
||||
*
|
||||
* @param string $css Original CSS.
|
||||
* @param string $stylesheet Current stylesheet.
|
||||
* @return string CSS.
|
||||
*/
|
||||
public function filter_previewed_wp_get_custom_css( $css, $stylesheet ) {
|
||||
if ( $stylesheet === $this->stylesheet ) {
|
||||
$customized_value = $this->post_value( null );
|
||||
if ( ! is_null( $customized_value ) ) {
|
||||
$css = $customized_value;
|
||||
}
|
||||
}
|
||||
return $css;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch the value of the setting.
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access public
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function value() {
|
||||
return wp_get_custom_css( $this->stylesheet );
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate CSS.
|
||||
*
|
||||
* Checks for imbalanced braces, brackets, and comments.
|
||||
* Notifications are rendered when the customizer state is saved.
|
||||
*
|
||||
* @todo There are cases where valid CSS can be incorrectly marked as invalid when strings or comments include balancing characters. To fix, CSS tokenization needs to be used.
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access public
|
||||
*
|
||||
* @param string $css The input string.
|
||||
* @return true|WP_Error True if the input was validated, otherwise WP_Error.
|
||||
*/
|
||||
public function validate( $css ) {
|
||||
$validity = new WP_Error();
|
||||
|
||||
if ( preg_match( '#</?\w+#', $css ) ) {
|
||||
$validity->add( 'illegal_markup', __( 'Markup is not allowed in CSS.' ) );
|
||||
}
|
||||
|
||||
$imbalanced = false;
|
||||
|
||||
// Make sure that there is a closing brace for each opening brace.
|
||||
if ( ! $this->validate_balanced_characters( '{', '}', $css ) ) {
|
||||
$validity->add( 'imbalanced_curly_brackets', __( 'Your curly brackets <code>{}</code> are imbalanced. Make sure there is a closing <code>}</code> for every opening <code>{</code>.' ) );
|
||||
$imbalanced = true;
|
||||
}
|
||||
|
||||
// Ensure brackets are balanced.
|
||||
if ( ! $this->validate_balanced_characters( '[', ']', $css ) ) {
|
||||
$validity->add( 'imbalanced_braces', __( 'Your brackets <code>[]</code> are imbalanced. Make sure there is a closing <code>]</code> for every opening <code>[</code>.' ) );
|
||||
$imbalanced = true;
|
||||
}
|
||||
|
||||
// Ensure parentheses are balanced.
|
||||
if ( ! $this->validate_balanced_characters( '(', ')', $css ) ) {
|
||||
$validity->add( 'imbalanced_parentheses', __( 'Your parentheses <code>()</code> are imbalanced. Make sure there is a closing <code>)</code> for every opening <code>(</code>.' ) );
|
||||
$imbalanced = true;
|
||||
}
|
||||
|
||||
// Ensure single quotes are equal.
|
||||
if ( ! $this->validate_equal_characters( '\'', $css ) ) {
|
||||
$validity->add( 'unequal_single_quotes', __( 'Your single quotes <code>\'</code> are uneven. Make sure there is a closing <code>\'</code> for every opening <code>\'</code>.' ) );
|
||||
$imbalanced = true;
|
||||
}
|
||||
|
||||
// Ensure single quotes are equal.
|
||||
if ( ! $this->validate_equal_characters( '"', $css ) ) {
|
||||
$validity->add( 'unequal_double_quotes', __( 'Your double quotes <code>"</code> are uneven. Make sure there is a closing <code>"</code> for every opening <code>"</code>.' ) );
|
||||
$imbalanced = true;
|
||||
}
|
||||
|
||||
/*
|
||||
* Make sure any code comments are closed properly.
|
||||
*
|
||||
* The first check could miss stray an unpaired comment closing figure, so if
|
||||
* The number appears to be balanced, then check for equal numbers
|
||||
* of opening/closing comment figures.
|
||||
*
|
||||
* Although it may initially appear redundant, we use the first method
|
||||
* to give more specific feedback to the user.
|
||||
*/
|
||||
$unclosed_comment_count = $this->validate_count_unclosed_comments( $css );
|
||||
if ( 0 < $unclosed_comment_count ) {
|
||||
$validity->add( 'unclosed_comment', sprintf( _n( 'There is %s unclosed code comment. Close each comment with <code>*/</code>.', 'There are %s unclosed code comments. Close each comment with <code>*/</code>.', $unclosed_comment_count ), $unclosed_comment_count ) );
|
||||
$imbalanced = true;
|
||||
} elseif ( ! $this->validate_balanced_characters( '/*', '*/', $css ) ) {
|
||||
$validity->add( 'imbalanced_comments', __( 'There is an extra <code>*/</code>, indicating an end to a comment. Be sure that there is an opening <code>/*</code> for every closing <code>*/</code>.' ) );
|
||||
$imbalanced = true;
|
||||
}
|
||||
if ( $imbalanced && $this->is_possible_content_error( $css ) ) {
|
||||
$validity->add( 'possible_false_positive', __( 'Imbalanced/Unclosed character errors can be caused <code>content: "";</code> declarations. You may need to remove this or add it a custom CSS file.' ) );
|
||||
}
|
||||
|
||||
if ( empty( $validity->errors ) ) {
|
||||
$validity = parent::validate( $css );
|
||||
}
|
||||
return $validity;
|
||||
}
|
||||
|
||||
/**
|
||||
* Store the CSS setting value in the custom_css custom post type for the stylesheet.
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access public
|
||||
*
|
||||
* @param string $css The input value.
|
||||
* @return int|false The post ID or false if the value could not be saved.
|
||||
*/
|
||||
public function update( $css ) {
|
||||
|
||||
$args = array(
|
||||
'post_content' => $css ? $css : '',
|
||||
'post_title' => $this->stylesheet,
|
||||
'post_name' => sanitize_title( $this->stylesheet ),
|
||||
'post_type' => 'custom_css',
|
||||
'post_status' => 'publish',
|
||||
);
|
||||
|
||||
// Update post if it already exists, otherwise create a new one.
|
||||
$post_id = null;
|
||||
$query = new WP_Query( array(
|
||||
'post_type' => 'custom_css',
|
||||
'post_status' => get_post_stati(),
|
||||
'name' => sanitize_title( $this->stylesheet ),
|
||||
'number' => 1,
|
||||
'no_found_rows' => true,
|
||||
'cache_results' => true,
|
||||
'update_post_meta_cache' => false,
|
||||
'update_term_meta_cache' => false,
|
||||
'suppress_filters' => true,
|
||||
) );
|
||||
if ( ! empty( $query->post ) ) {
|
||||
$args['ID'] = $query->post->ID;
|
||||
$post_id = wp_update_post( wp_slash( $args ) );
|
||||
} else {
|
||||
$post_id = wp_insert_post( wp_slash( $args ) );
|
||||
}
|
||||
if ( ! $post_id ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Cache post ID in theme mod for performance to avoid additional DB query.
|
||||
if ( $this->manager->get_stylesheet() === $this->stylesheet ) {
|
||||
set_theme_mod( 'custom_css_post_id', $post_id );
|
||||
}
|
||||
|
||||
return $post_id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensure there are a balanced number of paired characters.
|
||||
*
|
||||
* This is used to check that the number of opening and closing
|
||||
* characters is equal.
|
||||
*
|
||||
* For instance, there should be an equal number of braces ("{", "}")
|
||||
* in the CSS.
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access private
|
||||
*
|
||||
* @param string $opening_char The opening character.
|
||||
* @param string $closing_char The closing character.
|
||||
* @param string $css The CSS input string.
|
||||
*
|
||||
* @return bool
|
||||
*/
|
||||
private function validate_balanced_characters( $opening_char, $closing_char, $css ) {
|
||||
return substr_count( $css, $opening_char ) === substr_count( $css, $closing_char );
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensure there are an even number of paired characters.
|
||||
*
|
||||
* This is used to check that the number of a specific
|
||||
* character is even.
|
||||
*
|
||||
* For instance, there should be an even number of double quotes
|
||||
* in the CSS.
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access private
|
||||
*
|
||||
* @param string $char A character.
|
||||
* @param string $css The CSS input string.
|
||||
* @return bool Equality.
|
||||
*/
|
||||
private function validate_equal_characters( $char, $css ) {
|
||||
$char_count = substr_count( $css, $char );
|
||||
return ( 0 === $char_count % 2 );
|
||||
}
|
||||
|
||||
/**
|
||||
* Count unclosed CSS Comments.
|
||||
*
|
||||
* Used during validation.
|
||||
*
|
||||
* @see self::validate()
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access private
|
||||
*
|
||||
* @param string $css The CSS input string.
|
||||
* @return int Count.
|
||||
*/
|
||||
private function validate_count_unclosed_comments( $css ) {
|
||||
$count = 0;
|
||||
$comments = explode( '/*', $css );
|
||||
|
||||
if ( ! is_array( $comments ) || ( 1 >= count( $comments ) ) ) {
|
||||
return $count;
|
||||
}
|
||||
|
||||
unset( $comments[0] ); // The first item is before the first comment.
|
||||
foreach ( $comments as $comment ) {
|
||||
if ( false === strpos( $comment, '*/' ) ) {
|
||||
$count++;
|
||||
}
|
||||
}
|
||||
return $count;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find "content:" within a string.
|
||||
*
|
||||
* Imbalanced/Unclosed validation errors may be caused
|
||||
* when a character is used in a "content:" declaration.
|
||||
*
|
||||
* This function is used to detect if this is a possible
|
||||
* cause of the validation error, so that if it is,
|
||||
* a notification may be added to the Validation Errors.
|
||||
*
|
||||
* Example:
|
||||
* .element::before {
|
||||
* content: "(\"";
|
||||
* }
|
||||
* .element::after {
|
||||
* content: "\")";
|
||||
* }
|
||||
*
|
||||
* Using ! empty() because strpos() may return non-boolean values
|
||||
* that evaluate to false. This would be problematic when
|
||||
* using a strict "false === strpos()" comparison.
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access private
|
||||
*
|
||||
* @param string $css The CSS input string.
|
||||
* @return bool
|
||||
*/
|
||||
private function is_possible_content_error( $css ) {
|
||||
$found = preg_match( '/\bcontent\s*:/', $css );
|
||||
if ( ! empty( $found ) ) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
@ -245,6 +245,7 @@ add_action( 'wp_head', 'wp_print_head_scripts', 9 );
|
|||
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 );
|
||||
|
|
|
|||
|
|
@ -786,6 +786,12 @@
|
|||
$( 'body' ).toggleClass( 'wp-custom-logo', !! setting.get() );
|
||||
setting.bind( function( attachmentId ) {
|
||||
$( 'body' ).toggleClass( 'wp-custom-logo', !! attachmentId );
|
||||
});
|
||||
});
|
||||
|
||||
api( 'custom_css[' + api.settings.theme.stylesheet + ']', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
$( '#wp-custom-css' ).text( to );
|
||||
} );
|
||||
} );
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -111,6 +111,35 @@ function create_initial_post_types() {
|
|||
'query_var' => false,
|
||||
) );
|
||||
|
||||
register_post_type( 'custom_css', array(
|
||||
'labels' => array(
|
||||
'name' => __( 'Custom CSS' ),
|
||||
'singular_name' => __( 'Custom CSS' ),
|
||||
),
|
||||
'public' => false,
|
||||
'hierarchical' => false,
|
||||
'rewrite' => false,
|
||||
'query_var' => false,
|
||||
'delete_with_user' => false,
|
||||
'can_export' => true,
|
||||
'_builtin' => true, /* internal use only. don't use this when registering your own post type. */
|
||||
'supports' => array( 'title' ),
|
||||
'capabilities' => array(
|
||||
'delete_posts' => 'edit_theme_options',
|
||||
'delete_post' => 'edit_theme_options',
|
||||
'delete_published_posts' => 'edit_theme_options',
|
||||
'delete_private_posts' => 'edit_theme_options',
|
||||
'delete_others_posts' => 'edit_theme_options',
|
||||
'edit_post' => 'unfiltered_css',
|
||||
'edit_posts' => 'unfiltered_css',
|
||||
'edit_others_posts' => 'unfiltered_css',
|
||||
'edit_published_posts' => 'unfiltered_css',
|
||||
'read_post' => 'read',
|
||||
'read_private_posts' => 'read',
|
||||
'publish_posts' => 'edit_theme_options',
|
||||
),
|
||||
) );
|
||||
|
||||
register_post_type( 'customize_changeset', array(
|
||||
'labels' => array(
|
||||
'name' => _x( 'Changesets', 'post type general name' ),
|
||||
|
|
|
|||
|
|
@ -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 > 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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.7-alpha-38828';
|
||||
$wp_version = '4.7-alpha-38829';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue