IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests 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.

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
2016-10-19 18:15:31 +00:00
parent ec5782bed5
commit 1ccd9e7a6c
16 changed files with 692 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
wp-admin/css/customize-controls-rtl.css
View File

@@ -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
*/

2
wp-admin/css/customize-controls-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

64
wp-admin/css/customize-controls.css
View File

@@ -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
*/

2
wp-admin/css/customize-controls.min.css vendored
View File

File diff suppressed because one or more lines are too long