Try/quadrat semantic color customizations (#4090)

* Refactored blockbase color configuration from 'descriptive' to 'semantic'

* Refactored Quadrat to support Semantic Colors

* WIP experiment to allow Customizer editing of semantic colors in Quadrat

* Update the settings in theme.json not styles

* remove class variable for simplicity

* allow users to set multiple colors

* move merged colors to a class property

* Refactored to simplify and integrate changes to save everything at once

* Refactored and implemented save-all-at-once

* Refactored color customization logic from Quadrat to Blockbase

* Refactored Mayland blocks to support semantic color customizations

* Refactored Seedlet for configurable semantic colors.  Refactored meaning of 'primary' in blockbase.

* Minor color cleanups

* Fixed quadrat background color override

* Change variables to camelCase

* remove slug class property

* rename a few variables and add some comments

* remove the noop.css

* don't assume properties exist

Co-authored-by: Ben Dwyer <ben@scruffian.com>
This commit is contained in:
Jason Crist 2021-06-25 06:22:53 -04:00 committed by GitHub
parent 47152fe099
commit e83203dbcc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 442 additions and 209 deletions

View file

@ -80,3 +80,8 @@ function blockbase_fonts_url() {
// Make a single request for the theme fonts.
return esc_url_raw( 'https://fonts.googleapis.com/css2?' . implode( '&', $font_families ) );
}
/**
* Customize Global Styles
*/
require get_template_directory() . '/inc/customization.php';

View file

@ -0,0 +1,137 @@
<?php
require_once 'wp-customize-global-styles-setting.php';
class GlobalStylesCustomizer {
private $user_color_palette;
function __construct() {
add_action( 'customize_register', array( $this, 'initialize' ) );
add_action( 'customize_preview_init', array( $this, 'customize_preview_js' ) );
add_action( 'wp_enqueue_scripts', array( $this, 'create_customization_style_element' ) );
add_action( 'customize_save_after', array( $this, 'handle_customize_save_after' ) );
}
function customize_preview_js() {
wp_enqueue_script( 'customizer-preview-color', get_template_directory_uri() . '/inc/customizer-preview.js', array( 'customize-preview' ) );
wp_localize_script( 'customizer-preview-color', 'userColorPalette', $this->user_color_palette );
}
function create_customization_style_element() {
wp_enqueue_style( 'global-styles-customizations', ' ', array( 'global-styles' ) ); // This needs to load after global_styles, hence the dependency
wp_add_inline_style( 'global-styles-customizations', '{}' );
}
function initialize( $wp_customize ) {
$this->user_color_palette = $this->build_user_color_palette();
$this->register_color_controls( $wp_customize, $this->user_color_palette );
}
function build_user_color_palette() {
// Get the merged theme.json.
$theme_json = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_raw_data();
$theme_color_palette = $theme_json['settings']['color']['palette']['theme'];
$user_color_palette = $theme_json['settings']['color']['palette']['theme'];
// Create a user color palette from user settings, if there are any.
if ( isset( $theme_json['settings']['color']['palette']['user'] ) ) {
$user_color_palette = $theme_json['settings']['color']['palette']['user'];
}
// Combine theme settings with user settings.
foreach ( $user_color_palette as $key => $palette_item ) {
$user_color_palette[ $key ]['default'] = $this->get_theme_default_color_value( $palette_item['slug'], $theme_color_palette );
}
return $user_color_palette;
}
function get_theme_default_color_value( $slug, $palette ) {
foreach ( $palette as $palette_item ) {
if ( $palette_item['slug'] === $slug ) {
return $palette_item['color'];
}
}
return null;
}
function register_color_controls( $wp_customize, $palette ) {
$section_key = 'customize-global-styles';
//Add a Section to the Customizer for these bits
$wp_customize->add_section(
$section_key,
array(
'capability' => 'edit_theme_options',
'description' => __( 'Color Customization for Quadrat' ),
'title' => __( 'Colors' ),
)
);
foreach ( $palette as $palette_item ) {
$this->register_color_control( $wp_customize, $palette_item, $section_key );
}
}
function register_color_control( $wp_customize, $palette_item, $section_key ) {
$setting_key = $section_key . $palette_item['slug'];
$global_styles_setting = new WP_Customize_Global_Styles_Setting(
$wp_customize,
$setting_key,
array(
'default' => $palette_item['default'],
'sanitize_callback' => 'sanitize_hex_color',
'slug' => $palette_item['slug'],
'user_value' => $palette_item['color'],
)
);
$wp_customize->add_setting( $global_styles_setting );
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
$setting_key,
array(
'section' => $section_key,
'label' => $palette_item['name'],
)
)
);
}
function handle_customize_save_after( $manager ) {
//update the palette based on the controls
foreach ( $this->user_color_palette as $key => $palette_item ) {
$setting = $manager->get_setting( 'customize-global-styles' . $palette_item['slug'] );
if ( isset( $setting->new_value ) ) {
$this->user_color_palette[ $key ]['color'] = $setting->new_value;
}
}
// Get the user's theme.json from the CPT.
$user_custom_post_type_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_custom_post_type_id();
$user_theme_json_post = get_post( $user_custom_post_type_id );
$user_theme_json_post_content = json_decode( $user_theme_json_post->post_content );
// Create the color palette inside settings if it doesn't exist.
if ( property_exists( $user_theme_json_post_content, 'settings' ) ) {
if ( property_exists( $user_theme_json_post_content->settings, 'color' ) ) {
$user_theme_json_post_content->settings->color->palette = $this->user_color_palette;
} else {
$user_theme_json_post_content->settings->color = (object) array( 'palette' => $this->user_color_palette );
}
} else {
$user_theme_json_post_content->settings = (object) array( 'color' => (object) array( 'palette' => $this->user_color_palette ) );
}
// Update the theme.json with the new settings.
$user_theme_json_post->post_content = json_encode( $user_theme_json_post_content );
return wp_update_post( $user_theme_json_post );
}
}
new GlobalStylesCustomizer;

View file

@ -0,0 +1,27 @@
if ( userColorPalette ) {
// For each of the palette items add a listener
userColorPalette.forEach( ( paletteItem ) => {
const settingName = 'customize-global-styles' + paletteItem.slug;
wp.customize( settingName, ( value ) => {
value.bind( ( newValue ) => {
paletteItem.color = newValue;
updatePreview( userColorPalette );
} );
} );
} );
}
function updatePreview( palette ) {
// build the CSS variables to inject
let innerHTML = ':root,body{';
palette.forEach( ( paletteItem ) => {
innerHTML += `--wp--preset--color--${ paletteItem.slug }:${ paletteItem.color };`;
} );
innerHTML += ';}';
// inject them into the body
const styleElement = document.getElementById(
'global-styles-customizations-inline-css'
);
styleElement.innerHTML = innerHTML;
}

View file

@ -0,0 +1,64 @@
<?php
if ( class_exists( 'WP_Customize_Setting' ) && ! class_exists( 'WP_Customize_Global_Styles_Setting' ) ) {
/**
* Customize API: WP_Customize_Global_Styles_Setting class
*
* This handles saving and retrieving of the value.
*
*/
/**
* Custom Setting to handle WP Global_Styles.
*
* @see WP_Customize_Setting
*/
final class WP_Customize_Global_Styles_Setting extends WP_Customize_Setting {
/**
* The setting type.
*
* @var string
*/
public $type = 'global_styles';
/**
* Setting Transport
*
* @var string
*/
public $transport = 'postMessage';
/**
* User value
*
* @var string
*/
public $user_value = '';
/**
* Fetch the value of the setting.
*
* @see WP_Customize_Setting::value()
*
* @return string
*/
public function value() {
return $this->user_value;
}
/**
* Store the color in the Global Styles custom post
*
* @param string $color The input color.
* @return WP_Post|WP_Error The post or a WP_Error if the value could not be saved.
*/
public function update( $color ) {
if ( empty( $color ) ) {
return;
}
$this->new_value = $color;
}
}
}

View file

@ -39,29 +39,29 @@
"gradients": [],
"palette": [
{
"slug": "black",
"color": "#000000",
"name": "Black"
},
{
"slug": "white",
"color": "#ffffff",
"name": "White"
},
{
"slug": "blue",
"slug": "primary",
"color": "#007cba",
"name": "Blue"
"name": "Primary"
},
{
"slug": "almost-black",
"slug": "secondary",
"color": "#006ba1",
"name": "Secondary"
},
{
"slug": "foreground",
"color": "#333333",
"name": "Almost Black"
"name": "Foreground"
},
{
"slug": "almost-white",
"color": "#FAFAFA",
"name": "Almost White"
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "selection",
"color": "#c2c2c2",
"name": "Selection"
}
]
},
@ -71,22 +71,22 @@
},
"button": {
"border": {
"color": "var(--wp--custom--color--secondary)",
"color": "var(--wp--custom--color--primary)",
"radius": "4px",
"style": "solid",
"width": "2px"
},
"color": {
"background": "var(--wp--custom--color--secondary)",
"background": "var(--wp--custom--color--primary)",
"text": "var(--wp--custom--color--background)"
},
"hover": {
"color": {
"text": "var(--wp--custom--color--background)",
"background": "#006ba1"
"background": "var(--wp--custom--color--secondary)"
},
"border": {
"color": "#006ba1"
"color": "var(--wp--custom--color--secondary)"
}
},
"spacing": {
@ -110,12 +110,11 @@
}
},
"color": {
"primary": "var(--wp--preset--color--black)",
"secondary": "var(--wp--preset--color--blue)",
"tertiary": "var(--wp--preset--color--almost-white)",
"foreground": "var(--wp--preset--color--almost-black)",
"background": "var(--wp--preset--color--white)",
"selection": "var(--wp--preset--color--almost-white)"
"foreground": "var(--wp--preset--color--foreground)",
"background": "var(--wp--preset--color--background)",
"primary": "var(--wp--preset--color--primary)",
"secondary": "var(--wp--preset--color--secondary)",
"selection": "var(--wp--preset--color--selection)"
},
"form": {
"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
@ -397,7 +396,7 @@
},
"core/quote": {
"border": {
"color": "var(--wp--custom--color--secondary)",
"color": "var(--wp--custom--color--primary)",
"style": "solid",
"width": "0 0 0 1px"
},
@ -449,7 +448,7 @@
},
"link": {
"color": {
"text": "var(--wp--custom--color--secondary)"
"text": "var(--wp--custom--color--primary)"
}
}
},

View file

@ -22,49 +22,42 @@
"gradients": [ ],
"palette": [
{
"slug": "black",
"color": "#000000",
"name": "Black"
},
{
"slug": "almost-black",
"slug": "foreground",
"color": "#1a1a1a",
"name": "Almost Black"
"name": "Foreground"
},
{
"slug": "white",
"color": "#FFFFFF",
"name": "White"
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "gray",
"slug": "primary",
"color": "#000000",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#666666",
"name": "Gray"
"name": "Secondary"
},
{
"slug": "dark-gray",
"color": "#333333",
"name": "Dark Gray"
"slug": "selection",
"color": "#add8e6",
"name": "Selection"
}
]
},
"custom": {
"button": {
"border": {
"radius": "5px"
"radius": "5px",
"color": "var(--wp--custom--color--foreground)"
},
"color": {
"text": "var(--wp--custom--color--background)",
"background": "var(--wp--custom--color--foreground)"
},
"hover": {
"color": {
"background": "var(--wp--custom--color--tertiary)"
},
"border": {
"color": "var(--wp--custom--color--tertiary)"
}
},
"spacing": {
"padding": {
"top": "4px",
@ -79,12 +72,11 @@
}
},
"color": {
"primary": "var(--wp--preset--color--black)",
"secondary": "var(--wp--preset--color--almost-black)",
"tertiary": "var(--wp--preset--color--gray)",
"foreground": "var(--wp--preset--color--black)",
"background": "var(--wp--preset--color--white)",
"selection": "lightblue"
"primary": "var(--wp--preset--color--primary)",
"secondary": "var(--wp--preset--color--secondary)",
"foreground": "var(--wp--preset--color--foreground)",
"background": "var(--wp--preset--color--background)",
"selection": "var(--wp--preset--color--selection)"
},
"fontsToLoadFromGoogle": [
"family=Poppins:ital,wght@0,400;0,600;1,400"
@ -188,10 +180,6 @@
}
},
"core/post-date": {
"color": {
"link": "var(--wp--custom--color--foreground-light)",
"text": "var(--wp--custom--color--foreground-light)"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
}

View file

@ -18,6 +18,24 @@
"area": "Post Meta"
}
],
"customTemplates": [
{
"name": "blank",
"title": "Blank",
"postTypes": [
"page",
"post"
]
},
{
"name": "header-footer-only",
"title": "Header and Footer Only",
"postTypes": [
"page",
"post"
]
}
],
"settings": {
"border": {
"customColor": true,
@ -29,29 +47,29 @@
"gradients": [],
"palette": [
{
"slug": "black",
"color": "#000000",
"name": "Black"
},
{
"slug": "almost-black",
"slug": "foreground",
"color": "#1a1a1a",
"name": "Almost Black"
"name": "Foreground"
},
{
"slug": "white",
"color": "#FFFFFF",
"name": "White"
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "gray",
"slug": "primary",
"color": "#000000",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#666666",
"name": "Gray"
"name": "Secondary"
},
{
"slug": "dark-gray",
"color": "#333333",
"name": "Dark Gray"
"slug": "selection",
"color": "#add8e6",
"name": "Selection"
}
]
},
@ -61,7 +79,7 @@
},
"button": {
"border": {
"color": "var(--wp--custom--color--secondary)",
"color": "var(--wp--custom--color--foreground)",
"radius": "5px",
"style": "solid",
"width": "2px"
@ -73,10 +91,10 @@
"hover": {
"color": {
"text": "var(--wp--custom--color--background)",
"background": "var(--wp--custom--color--tertiary)"
"background": "var(--wp--custom--color--secondary)"
},
"border": {
"color": "var(--wp--custom--color--tertiary)"
"color": "var(--wp--custom--color--secondary)"
}
},
"spacing": {
@ -100,12 +118,11 @@
}
},
"color": {
"primary": "var(--wp--preset--color--black)",
"secondary": "var(--wp--preset--color--almost-black)",
"tertiary": "var(--wp--preset--color--gray)",
"foreground": "var(--wp--preset--color--black)",
"background": "var(--wp--preset--color--white)",
"selection": "lightblue"
"foreground": "var(--wp--preset--color--foreground)",
"background": "var(--wp--preset--color--background)",
"primary": "var(--wp--preset--color--primary)",
"secondary": "var(--wp--preset--color--secondary)",
"selection": "var(--wp--preset--color--selection)"
},
"form": {
"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
@ -366,8 +383,8 @@
},
"core/post-date": {
"color": {
"link": "var(--wp--custom--color--foreground-light)",
"text": "var(--wp--custom--color--foreground-light)"
"link": "var(--wp--custom--color--foreground)",
"text": "var(--wp--custom--color--foreground)"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
@ -409,7 +426,7 @@
},
"core/quote": {
"border": {
"color": "var(--wp--custom--color--secondary)",
"color": "var(--wp--custom--color--primary)",
"style": "solid",
"width": "0 0 0 1px"
},

View file

@ -4,30 +4,21 @@
"gradients": [],
"palette": [
{
"slug": "black",
"color": "#000000",
"name": "Black"
},
{
"slug": "white",
"color": "#ffffff",
"name": "White"
},
{
"slug": "pink",
"slug": "primary",
"color": "#FFD1D1",
"name": "Pink"
"name": "Primary"
},
{
"slug": "blue",
"color": "#292C6D",
"name": "Blue"
},
{
"slug": "darker-blue",
"slug": "secondary",
"color": "#151853",
"name": "Darker Blue"
"name": "Secondary"
},
{
"slug": "background",
"color": "#292C6D",
"name": "Background"
}
]
},
"custom": {
@ -56,11 +47,11 @@
}
},
"color": {
"primary": "var(--wp--preset--color--pink)",
"secondary": "var(--wp--preset--color--darker-blue)",
"foreground": "var(--wp--preset--color--pink)",
"background": "var(--wp--preset--color--blue)",
"selection": "var(--wp--preset--color--darker-blue)"
"foreground": "var(--wp--preset--color--primary)",
"background": "var(--wp--preset--color--background)",
"primary": "var(--wp--preset--color--primary)",
"secondary": "var(--wp--preset--color--secondary)",
"selection": "var(--wp--preset--color--secondary)"
},
"fontsToLoadFromGoogle": [
"family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700"

View file

@ -1,6 +1,6 @@
// Provide reasonable default colors when a background color is chosen
// that doesn't work with the default foreground color
.has-pink-background-color,
.has-white-background-color {
color: var(--wp--preset--color--blue);
.has-primary-background-color {
color: var(--wp--preset--color--background);
}

View file

@ -10,6 +10,24 @@
"area": "footer"
}
],
"customTemplates": [
{
"name": "blank",
"title": "Blank",
"postTypes": [
"page",
"post"
]
},
{
"name": "header-footer-only",
"title": "Header and Footer Only",
"postTypes": [
"page",
"post"
]
}
],
"settings": {
"border": {
"customColor": true,
@ -21,29 +39,19 @@
"gradients": [],
"palette": [
{
"slug": "black",
"color": "#000000",
"name": "Black"
},
{
"slug": "white",
"color": "#ffffff",
"name": "White"
},
{
"slug": "pink",
"slug": "primary",
"color": "#FFD1D1",
"name": "Pink"
"name": "Primary"
},
{
"slug": "blue",
"color": "#292C6D",
"name": "Blue"
},
{
"slug": "darker-blue",
"slug": "secondary",
"color": "#151853",
"name": "Darker Blue"
"name": "Secondary"
},
{
"slug": "background",
"color": "#292C6D",
"name": "Background"
}
]
},
@ -92,12 +100,11 @@
}
},
"color": {
"primary": "var(--wp--preset--color--pink)",
"secondary": "var(--wp--preset--color--darker-blue)",
"tertiary": "var(--wp--preset--color--almost-white)",
"foreground": "var(--wp--preset--color--pink)",
"background": "var(--wp--preset--color--blue)",
"selection": "var(--wp--preset--color--darker-blue)"
"foreground": "var(--wp--preset--color--primary)",
"background": "var(--wp--preset--color--background)",
"primary": "var(--wp--preset--color--primary)",
"secondary": "var(--wp--preset--color--secondary)",
"selection": "var(--wp--preset--color--secondary)"
},
"form": {
"padding": "20px",
@ -420,7 +427,7 @@
},
"core/quote": {
"border": {
"color": "var(--wp--custom--color--secondary)",
"color": "var(--wp--custom--color--primary)",
"style": "solid",
"width": "0px"
},

View file

@ -55,60 +55,46 @@
],
"palette": [
{
"slug": "black",
"color": "#000000",
"name": "Black"
},
{
"slug": "white",
"color": "#ffffff",
"name": "White"
},
{
"slug": "green",
"slug": "primary",
"color": "#3C8067",
"name": "Green"
"name": "Primary"
},
{
"slug": "almost-black",
"slug": "secondary",
"color": "#336D58",
"name": "Secondary"
},
{
"slug": "foreground",
"color": "#333333",
"name": "Almost Black"
"name": "Foreground"
},
{
"slug": "almost-white",
"color": "#FAFAFA",
"name": "Almost White"
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "light-grey",
"color": "#EFEFEF",
"name": "Light Grey"
"slug": "selection",
"color": "#f2f2f2",
"name": "Selection"
}
]
},
"custom": {
"button": {
"border": {
"color": "var(--wp--custom--color--secondary)"
"color": "var(--wp--custom--color--primary)"
},
"hover": {
"color": {
"background": "#336D58"
"background": "var(--wp--custom--color--secondary)"
},
"border": {
"color": "#336D58"
"color": "var(--wp--custom--color--secondary)"
}
}
},
"color": {
"primary": "var(--wp--preset--color--black)",
"secondary": "var(--wp--preset--color--green)",
"tertiary": "var(--wp--preset--color--almost-white)",
"foreground": "var(--wp--preset--color--almost-black)",
"background": "var(--wp--preset--color--white)",
"selection": "#f2f2f2"
},
"fontsToLoadFromGoogle": [
"family=Fira+Sans:ital,wght@0,400;0,500;1,400",
"family=Playfair+Display:ital,wght@0,400;0,700;1,400"
@ -208,7 +194,7 @@
},
"core/separator": {
"color": {
"text": "var(--wp--preset--color--light-grey)"
"text": "#EFEFEF"
}
},
"core/site-title": {

View file

@ -14,6 +14,24 @@
"area": "Post Meta"
}
],
"customTemplates": [
{
"name": "blank",
"title": "Blank",
"postTypes": [
"page",
"post"
]
},
{
"name": "header-footer-only",
"title": "Header and Footer Only",
"postTypes": [
"page",
"post"
]
}
],
"settings": {
"border": {
"customColor": true,
@ -62,34 +80,29 @@
],
"palette": [
{
"slug": "black",
"color": "#000000",
"name": "Black"
},
{
"slug": "white",
"color": "#ffffff",
"name": "White"
},
{
"slug": "green",
"slug": "primary",
"color": "#3C8067",
"name": "Green"
"name": "Primary"
},
{
"slug": "almost-black",
"slug": "secondary",
"color": "#336D58",
"name": "Secondary"
},
{
"slug": "foreground",
"color": "#333333",
"name": "Almost Black"
"name": "Foreground"
},
{
"slug": "almost-white",
"color": "#FAFAFA",
"name": "Almost White"
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "light-grey",
"color": "#EFEFEF",
"name": "Light Grey"
"slug": "selection",
"color": "#f2f2f2",
"name": "Selection"
}
]
},
@ -99,22 +112,22 @@
},
"button": {
"border": {
"color": "var(--wp--custom--color--secondary)",
"color": "var(--wp--custom--color--primary)",
"radius": "4px",
"style": "solid",
"width": "2px"
},
"color": {
"background": "var(--wp--custom--color--secondary)",
"background": "var(--wp--custom--color--primary)",
"text": "var(--wp--custom--color--background)"
},
"hover": {
"color": {
"text": "var(--wp--custom--color--background)",
"background": "#336D58"
"background": "var(--wp--custom--color--secondary)"
},
"border": {
"color": "#336D58"
"color": "var(--wp--custom--color--secondary)"
}
},
"spacing": {
@ -138,12 +151,11 @@
}
},
"color": {
"primary": "var(--wp--preset--color--black)",
"secondary": "var(--wp--preset--color--green)",
"tertiary": "var(--wp--preset--color--almost-white)",
"foreground": "var(--wp--preset--color--almost-black)",
"background": "var(--wp--preset--color--white)",
"selection": "#f2f2f2"
"foreground": "var(--wp--preset--color--foreground)",
"background": "var(--wp--preset--color--background)",
"primary": "var(--wp--preset--color--primary)",
"secondary": "var(--wp--preset--color--secondary)",
"selection": "var(--wp--preset--color--selection)"
},
"form": {
"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
@ -425,7 +437,7 @@
},
"core/separator": {
"color": {
"text": "var(--wp--preset--color--light-grey)"
"text": "#EFEFEF"
},
"border": {
"color": "currentColor",
@ -444,7 +456,7 @@
},
"core/quote": {
"border": {
"color": "var(--wp--custom--color--secondary)",
"color": "var(--wp--custom--color--primary)",
"style": "solid",
"width": "0 0 0 1px"
},
@ -496,7 +508,7 @@
},
"link": {
"color": {
"text": "var(--wp--custom--color--secondary)"
"text": "var(--wp--custom--color--primary)"
}
}
},