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:
parent
47152fe099
commit
e83203dbcc
12 changed files with 442 additions and 209 deletions
|
@ -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';
|
||||
|
|
137
blockbase/inc/customization.php
Normal file
137
blockbase/inc/customization.php
Normal 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;
|
27
blockbase/inc/customizer-preview.js
Normal file
27
blockbase/inc/customizer-preview.js
Normal 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;
|
||||
}
|
64
blockbase/inc/wp-customize-global-styles-setting.php
Normal file
64
blockbase/inc/wp-customize-global-styles-setting.php
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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)"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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)"
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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)"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue