WordPress/wp-includes/customize/class-wp-customize-custom-css-setting.php

200 lines
4.8 KiB
PHP
Raw Normal View History

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
2016-10-19 20:15:31 +02:00
<?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.
*
* @since 4.7.0
* @var string
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
2016-10-19 20:15:31 +02:00
*/
public $type = 'custom_css';
/**
* Setting Transport
*
* @since 4.7.0
* @var string
*/
public $transport = 'postMessage';
/**
* Capability required to edit this setting.
*
* @since 4.7.0
* @var string
*/
public $capability = 'edit_css';
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
2016-10-19 20:15:31 +02:00
/**
* Stylesheet
*
* @since 4.7.0
* @var string
*/
public $stylesheet = '';
/**
* WP_Customize_Custom_CSS_Setting constructor.
*
* @since 4.7.0
*
* @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
*
* @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 the customized value.
*
* This is used in the preview when `wp_get_custom_css()` is called for rendering the styles.
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
2016-10-19 20:15:31 +02:00
*
* @since 4.7.0
* @see wp_get_custom_css()
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
2016-10-19 20:15:31 +02:00
*
* @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. Will return the previewed value when `preview()` is called.
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
2016-10-19 20:15:31 +02:00
*
* @since 4.7.0
* @see WP_Customize_Setting::value()
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
2016-10-19 20:15:31 +02:00
*
* @return string
*/
public function value() {
if ( $this->is_previewed ) {
$post_value = $this->post_value( null );
if ( null !== $post_value ) {
return $post_value;
}
}
$id_base = $this->id_data['base'];
$value = '';
$post = wp_get_custom_css_post( $this->stylesheet );
if ( $post ) {
$value = $post->post_content;
}
if ( empty( $value ) ) {
$value = $this->default;
}
/** This filter is documented in wp-includes/class-wp-customize-setting.php */
$value = apply_filters( "customize_value_{$id_base}", $value, $this );
return $value;
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
2016-10-19 20:15:31 +02:00
}
/**
* Validate CSS.
*
* Checks for imbalanced braces, brackets, and comments.
* Notifications are rendered when the customizer state is saved.
*
* @since 4.7.0
Editor: Add CodeMirror-powered code editor with syntax highlighting, linting, and auto-completion. * Code editor is integrated into the Theme/Plugin Editor, Additional CSS in Customizer, and Custom HTML widget. Code editor is not yet integrated into the post editor, and it may not be until accessibility concerns are addressed. * The CodeMirror component in the Custom HTML widget is integrated in a similar way to TinyMCE being integrated into the Text widget, adopting the same approach for integrating dynamic JavaScript-initialized fields. * Linting is performed for JS, CSS, HTML, and JSON via JSHint, CSSLint, HTMLHint, and JSONLint respectively. Linting is not yet supported for PHP. * When user lacks `unfiltered_html` the capability, the Custom HTML widget will report any Kses-invalid elements and attributes as errors via a custom Kses rule for HTMLHint. * When linting errors are detected, the user will be prevented from saving the code until the errors are fixed, reducing instances of broken websites. * The placeholder value is removed from Custom CSS in favor of a fleshed-out section description which now auto-expands when the CSS field is empty. See #39892. * The CodeMirror library is included as `wp.CodeMirror` to prevent conflicts with any existing `CodeMirror` global. * An `wp.codeEditor.initialize()` API in JS is provided to convert a `textarea` into CodeMirror, with a `wp_enqueue_code_editor()` function in PHP to manage enqueueing the assets and settings needed to edit a given type of code. * A user preference is added to manage whether or not "syntax highlighting" is enabled. The feature is opt-out, being enabled by default. * Allowed file extensions in the theme and plugin editors have been updated to include formats which CodeMirror has modes for: `conf`, `css`, `diff`, `patch`, `html`, `htm`, `http`, `js`, `json`, `jsx`, `less`, `md`, `php`, `phtml`, `php3`, `php4`, `php5`, `php7`, `phps`, `scss`, `sass`, `sh`, `bash`, `sql`, `svg`, `xml`, `yml`, `yaml`, `txt`. Props westonruter, georgestephanis, obenland, melchoyce, pixolin, mizejewski, michelleweber, afercia, grahamarmfield, samikeijonen, rianrietveld, iseulde. See #38707. Fixes #12423, #39892. Built from https://develop.svn.wordpress.org/trunk@41376 git-svn-id: http://core.svn.wordpress.org/trunk@41209 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-09-13 08:08:47 +02:00
* @since 4.9.0 Checking for balanced characters has been moved client-side via linting in code editor.
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
2016-10-19 20:15:31 +02:00
*
* @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.' ) );
}
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
*
* @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 ) {
if ( empty( $css ) ) {
$css = '';
}
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
2016-10-19 20:15:31 +02:00
$r = wp_update_custom_css_post( $css, array(
'stylesheet' => $this->stylesheet,
) );
if ( $r instanceof WP_Error ) {
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
2016-10-19 20:15:31 +02:00
return false;
}
$post_id = $r->ID;
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
2016-10-19 20:15:31 +02:00
// 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;
}
}