Blockbase: Add support for custom palettes customization (#4098)

* first pass at color palette controls without functionality

* made palettes look like color annotations plugin

* make color selection functional

* get palettes from theme.json

* rename file

* rename colors preview file

* rename files

* more file renaming for clarity

* simplify settings

* rebuilt mayland and seedlet with alternative palettes

* renamed default template, dynamic theme name

* remove space

* Added default Varia/Seedlet palettes to blockbase

* check if the custom palette array is empty

* Only render color palette picker controls if there are alternatives to default.

* Only render color palette picker controls if there are alternatives to default. (fix)

* Removed commented code

* change palettes to an array

* chagne props comment

* removed unnecesary credit

* undo last commit, brought back the credits

* readd the settings file

* rebuild children

Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Jason Crist <jcrist@pbking.com>

blockbase/functions.php

@@ -95,4 +95,5 @@ function blockbase_fonts_url() {
 /**
  * Customize Global Styles
  */
-require get_template_directory() . '/inc/customization.php';
+require get_template_directory() . '/inc/wp-customize-colors.php';
+require get_template_directory() . '/inc/wp-customize-color-palettes.php';

blockbase/inc/color-customization.css

@@ -0,0 +1,48 @@
+.customize-control-color-palette .color-palette-group {
+	display: grid;
+	flex-wrap: wrap;
+	grid-template-columns: 1fr 1fr 1fr;
+	column-gap: 15px;
+	row-gap: 15px;
+}
+
+.customize-control-color-palette .color-palette-group input {
+    display: none;    
+}
+
+.customize-control-color-palette .color-palette-group .color-option {
+	padding: 0;
+}
+
+.customize-control-color-palette input:checked + .color-option .custom-color-palette {
+    border-color: #2271b1;
+}
+
+.custom-color-palette {
+	position: relative;
+	display: flex;
+	border-radius: 2px;
+	border: 1px solid rgba(0,0,0,0.1);
+	height: 50px;
+	width: 72px;
+	overflow: hidden;
+}
+
+.color-palette-label {
+	background: #000;
+	color: #fff;
+	font-size: 10px;
+	opacity: 0.7;
+	position: absolute;
+	bottom: 5px;
+	right: 0;
+	left: 0;
+	text-indent: 5px;
+	line-height: 1.5;
+	padding-bottom: 1px;
+}
+
+.color-stripe {
+	flex: 1 1 auto;
+	border: 1px solid rgba(0,0,0,0.1);
+}

blockbase/inc/color-palettes-controls.js

@@ -0,0 +1,11 @@
+wp.customize( 'color_palette', ( value ) => {
+	value.bind( ( newValue ) => {
+		const newPalette = colorPalettes[ newValue ].colors;
+		Object.keys( newPalette ).forEach( function ( slug ) {
+			const color = newPalette[ slug ];
+			wp.customize
+				.control( 'customize-global-styles' + slug )
+				.setting.set( color );
+		} );
+	} );
+} );

blockbase/inc/wp-customize-color-palettes.php

@@ -0,0 +1,84 @@
+<?php
+
+require_once 'wp-customize-palette-control.php';
+
+class GlobalStylesColorPalettes {
+	private $palettes = array();
+
+	function __construct() {
+		add_action( 'customize_register', array( $this, 'color_palette_control' ) );
+		add_action( 'customize_controls_enqueue_scripts', array( $this, 'customize_preview_js' ) );
+	}
+
+	function customize_preview_js() {
+		wp_enqueue_script( 'customizer-color-palettes', get_template_directory_uri() . '/inc/color-palettes-controls.js', array( 'customize-controls' ) );
+		wp_localize_script( 'customizer-color-palettes', 'colorPalettes', $this->palettes );
+	}
+
+	function build_palettes( $theme_json ) {
+
+		$default_palette = $theme_json['settings']['color']['palette']['theme'];
+
+		$default_palette_setting = array();
+		foreach ( $default_palette as $default_color ) {
+			$default_palette_setting[ $default_color['slug'] ] = $default_color['color'];
+		}
+
+		$this->palettes['default-palette'] = array(
+			'label'  => 'Default',
+			'colors' => $default_palette_setting,
+		);
+
+		$custom_palettes = $theme_json['settings']['custom']['colorPalettes'];
+		if ( ! empty( $custom_palettes ) ) {
+			foreach ( $custom_palettes as $custom_palette ) {
+				$custom_palette_setting = array();
+				foreach ( $custom_palette['colors'] as $color_slug => $color ) {
+					$custom_palette_setting[ $color_slug ] = $color;
+				}
+
+				$this->palettes[ $custom_palette['slug'] ] = array(
+					'label'  => $custom_palette['label'],
+					'colors' => $custom_palette_setting,
+				);
+			}
+		}
+	}
+
+	function color_palette_control( $wp_customize ) {
+
+		$theme_json = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data()->get_raw_data();
+
+		if ( ! isset( $theme_json['settings']['custom']['colorPalettes'] ) ) {
+			return;
+		}
+
+		$this->build_palettes( $theme_json );
+
+		$wp_customize->add_setting(
+			'color_palette',
+			array(
+				'default'    => 'default-palette',
+				'capability' => 'edit_theme_options',
+				'transport'  => 'postMessage', // We need this to stop the page refreshing.
+			)
+		);
+
+		$wp_customize->add_control(
+			new Color_Palette_Control(
+				$wp_customize,
+				'color_palette',
+				array(
+					'label'       => __( 'Color Scheme', 'blockbase' ),
+					'description' => __( 'Choose a color scheme for your website.', 'blockbase' ),
+					'section'     => 'customize-global-styles',
+					'choices'     => $this->palettes,
+					'settings'    => 'color_palette',
+				)
+			)
+		);
+
+	}
+}
+
+new GlobalStylesColorPalettes;

blockbase/inc/customization.php → blockbase/inc/wp-customize-colors.php

@@ -1,8 +1,8 @@
 <?php
 
-require_once 'wp-customize-global-styles-setting.php';
+require_once 'wp-customize-color-settings.php';
 
-class GlobalStylesCustomizer {
+class GlobalStylesColorCustomizer {
 
 	private $user_color_palette;
 
@@ -14,7 +14,7 @@ class GlobalStylesCustomizer {
 	}
 
 	function customize_preview_js() {
-		wp_enqueue_script( 'customizer-preview-color', get_template_directory_uri() . '/inc/customizer-preview.js', array( 'customize-preview' ) );
+		wp_enqueue_script( 'customizer-preview-color', get_template_directory_uri() . '/inc/customize-colors-preview.js', array( 'customize-preview' ) );
 		wp_localize_script( 'customizer-preview-color', 'userColorPalette', $this->user_color_palette );
 	}
 
@@ -61,13 +61,15 @@ class GlobalStylesCustomizer {
 
 		$section_key = 'customize-global-styles';
 
+		$theme = wp_get_theme();
+
 		//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' ),
+				'description' => sprintf( __( 'Color Customization for %1$s', 'blockbase' ), $theme->name ),
+				'title'       => __( 'Colors', 'blockbase' ),
 			)
 		);
 
@@ -85,7 +87,6 @@ class GlobalStylesCustomizer {
 			array(
 				'default'           => $palette_item['default'],
 				'sanitize_callback' => 'sanitize_hex_color',
-				'slug'              => $palette_item['slug'],
 				'user_value'        => $palette_item['color'],
 			)
 		);
@@ -107,8 +108,8 @@ class GlobalStylesCustomizer {
 		//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;
+			if ( null !== $setting->post_value() ) {
+				$this->user_color_palette[ $key ]['color'] = $setting->post_value();
 			}
 		}
 
@@ -129,9 +130,9 @@ class GlobalStylesCustomizer {
 		}
 
 		// Update the theme.json with the new settings.
-		$user_theme_json_post->post_content                     = json_encode( $user_theme_json_post_content );
+		$user_theme_json_post->post_content = json_encode( $user_theme_json_post_content );
 		return wp_update_post( $user_theme_json_post );
 	}
 }
 
-new GlobalStylesCustomizer;
+new GlobalStylesColorCustomizer;

blockbase/inc/wp-customize-palette-control.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Color Palette Customizer Control
+ *
+ * Based on https://github.com/HardeepAsrani/o2
+ */
+
+if ( class_exists( 'WP_Customize_Control' ) && ! class_exists( 'Color_Palette_Control' ) ) {
+	class Color_Palette_Control extends WP_Customize_Control {
+
+		public $type = 'color-palette';
+
+		public function enqueue() {
+			wp_enqueue_style( 'color-customization', get_template_directory_uri() . '/inc/color-customization.css' );
+		}
+
+		public function render_content() {
+			?>
+				<label>
+					<?php if ( ! empty( $this->label ) ) : ?>
+						<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
+					<?php endif;
+					if ( ! empty( $this->description ) ) : ?>
+						<span class="description customize-control-description"><?php echo esc_html( $this->description ); ?></span>
+					<?php endif; ?>
+					<div class="color-palette-group">
+					<?php foreach ( $this->choices as $value => $label ) : ?>
+						<input name="color_palette_<?php echo esc_attr( $this->id ); ?>" id="color_palette_<?php echo esc_attr( $this->id ); ?>_<?php echo esc_attr( $value ); ?>" type="radio" value="<?php echo esc_attr( $value ); ?>" <?php $this->link(); checked( $this->value(), $value ); ?> >
+							<label for="color_palette_<?php echo esc_attr( $this->id ); ?>_<?php echo esc_attr( $value ); ?>" class="color-option">
+								<div class="custom-color-palette">
+									<span class="color-palette-label"><?php echo esc_attr( $label['label'] ); ?></span>
+									<?php foreach ( $label['colors'] as $slug => $color ) : ?>
+										<div class="color-stripe" style="background-color: <?php echo esc_attr( $color ); ?>">&nbsp;</div>
+									<?php endforeach; ?>
+									</tr>
+								</div>
+							</label>
+						</input>
+					<?php endforeach; ?>
+					</div>
+				</label>
+		<?php }
+	}
+}

blockbase/rebuild-child-themes.sh

@@ -5,6 +5,6 @@ declare -a ChildThemes=( "mayland-blocks" "seedlet-blocks" "quadrat" )
 for child in ${ChildThemes[@]}; do
 	cd '../'${child}
 	echo 'Rebulding '${child}
+	npm i
 	npm run build
 done
-

blockbase/theme.json

@@ -116,6 +116,41 @@
 				"secondary": "var(--wp--preset--color--secondary)",
 				"selection": "var(--wp--preset--color--selection)"
 			},
+			"colorPalettes": [
+				{
+					"label": "Featured",
+					"slug": "palette-1",
+					"colors": {
+						"primary": "#C8133E",
+						"secondary": "#4E2F4B",
+						"foreground": "#1D1E1E",
+						"background": "#FFFFFF",
+						"selection": "#F9F9F9"
+					}
+				},
+				{
+					"label": "Featured",
+					"slug": "palette-2",
+					"colors": {
+						"primary": "#35845D",
+						"secondary": "#233252",
+						"foreground": "#242527",
+						"background": "#EEF4F7",
+						"selection": "#F9F9F9"
+					}
+				},
+				{
+					"label": "Featured",
+					"slug": "palette-3",
+					"colors": {
+						"primary": "#9FD3E8",
+						"secondary": "#FBE6AA",
+						"foreground": "#FFFFFF",
+						"background": "#1F2527",
+						"selection": "#364043"
+					}
+				}
+			],
 			"form": {
 				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
 				"border": {

mayland-blocks/theme.json

@@ -124,6 +124,41 @@
 				"secondary": "var(--wp--preset--color--secondary)",
 				"selection": "var(--wp--preset--color--selection)"
 			},
+			"colorPalettes": [
+				{
+					"label": "Featured",
+					"slug": "palette-1",
+					"colors": {
+						"primary": "#C8133E",
+						"secondary": "#4E2F4B",
+						"foreground": "#1D1E1E",
+						"background": "#FFFFFF",
+						"selection": "#F9F9F9"
+					}
+				},
+				{
+					"label": "Featured",
+					"slug": "palette-2",
+					"colors": {
+						"primary": "#35845D",
+						"secondary": "#233252",
+						"foreground": "#242527",
+						"background": "#EEF4F7",
+						"selection": "#F9F9F9"
+					}
+				},
+				{
+					"label": "Featured",
+					"slug": "palette-3",
+					"colors": {
+						"primary": "#9FD3E8",
+						"secondary": "#FBE6AA",
+						"foreground": "#FFFFFF",
+						"background": "#1F2527",
+						"selection": "#364043"
+					}
+				}
+			],
 			"form": {
 				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
 				"border": {

quadrat/assets/theme.css

@@ -446,9 +446,8 @@ ul ul {
 	padding: var(--wp--custom--margin--horizontal);
 }
 
-.has-pink-background-color,
-.has-white-background-color {
-	color: var(--wp--preset--color--blue);
+.has-primary-background-color {
+	color: var(--wp--preset--color--background);
 }
 
 .wp-block-post-content p a {

quadrat/child-theme.json

@@ -53,6 +53,62 @@
 				"secondary": "var(--wp--preset--color--secondary)",
 				"selection": "var(--wp--preset--color--secondary)"
 			},
+			"colorPalettes": [
+				{
+					"label": "Blue",
+					"slug": "blue",
+					"colors": {
+						"primary": "#FAF2EF",
+						"secondary": "#07233E",
+						"background": "#0E2F4F"
+					}
+				},
+				{
+					"label": "Bordeaux",
+					"slug": "bordeaux",
+					"colors": {
+						"primary": "#FFF8F8",
+						"secondary": "#491326",
+						"background": "#541C30"
+					}
+				},
+				{
+					"label": "Violet",
+					"slug": "violet",
+					"colors": {
+						"primary": "#F8F2EC",
+						"secondary": "#331A3F",
+						"background": "#3F254B"
+					}
+				},
+				{
+					"label": "Green",
+					"slug": "green",
+					"colors": {
+						"primary": "#0C1946",
+						"secondary": "#E2E7DF",
+						"background": "#ECF1EA"
+					}
+				},
+				{
+					"label": "White",
+					"slug": "white",
+					"colors": {
+						"primary": "#41161E",
+						"secondary": "#F8F6F4",
+						"background": "#FFFFFF"
+					}
+				},
+				{
+					"label": "Salmon",
+					"slug": "salmon",
+					"colors": {
+						"primary": "#212864",
+						"secondary": "#EEE1D6",
+						"background": "#F9EDE4"
+					}
+				}
+			],
 			"fontsToLoadFromGoogle": [
 				"family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700"
 			],

quadrat/theme.json

@@ -106,6 +106,62 @@
 				"secondary": "var(--wp--preset--color--secondary)",
 				"selection": "var(--wp--preset--color--secondary)"
 			},
+			"colorPalettes": [
+				{
+					"label": "Blue",
+					"slug": "blue",
+					"colors": {
+						"primary": "#FAF2EF",
+						"secondary": "#07233E",
+						"background": "#0E2F4F"
+					}
+				},
+				{
+					"label": "Bordeaux",
+					"slug": "bordeaux",
+					"colors": {
+						"primary": "#FFF8F8",
+						"secondary": "#491326",
+						"background": "#541C30"
+					}
+				},
+				{
+					"label": "Violet",
+					"slug": "violet",
+					"colors": {
+						"primary": "#F8F2EC",
+						"secondary": "#331A3F",
+						"background": "#3F254B"
+					}
+				},
+				{
+					"label": "Green",
+					"slug": "green",
+					"colors": {
+						"primary": "#0C1946",
+						"secondary": "#E2E7DF",
+						"background": "#ECF1EA"
+					}
+				},
+				{
+					"label": "White",
+					"slug": "white",
+					"colors": {
+						"primary": "#41161E",
+						"secondary": "#F8F6F4",
+						"background": "#FFFFFF"
+					}
+				},
+				{
+					"label": "Salmon",
+					"slug": "salmon",
+					"colors": {
+						"primary": "#212864",
+						"secondary": "#EEE1D6",
+						"background": "#F9EDE4"
+					}
+				}
+			],
 			"form": {
 				"padding": "20px",
 				"border": {

seedlet-blocks/theme.json

@@ -157,6 +157,41 @@
 				"secondary": "var(--wp--preset--color--secondary)",
 				"selection": "var(--wp--preset--color--selection)"
 			},
+			"colorPalettes": [
+				{
+					"label": "Featured",
+					"slug": "palette-1",
+					"colors": {
+						"primary": "#C8133E",
+						"secondary": "#4E2F4B",
+						"foreground": "#1D1E1E",
+						"background": "#FFFFFF",
+						"selection": "#F9F9F9"
+					}
+				},
+				{
+					"label": "Featured",
+					"slug": "palette-2",
+					"colors": {
+						"primary": "#35845D",
+						"secondary": "#233252",
+						"foreground": "#242527",
+						"background": "#EEF4F7",
+						"selection": "#F9F9F9"
+					}
+				},
+				{
+					"label": "Featured",
+					"slug": "palette-3",
+					"colors": {
+						"primary": "#9FD3E8",
+						"secondary": "#FBE6AA",
+						"foreground": "#FFFFFF",
+						"background": "#1F2527",
+						"selection": "#364043"
+					}
+				}
+			],
 			"form": {
 				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
 				"border": {