Blockbase: Fix color customizations (#4172)

* Blockbase: Fix color customizations

* remove unneeded changes

* remove unused variable

blockbase/inc/wp-customize-colors.php

@@ -21,9 +21,28 @@ class GlobalStylesColorCustomizer {
 		wp_localize_script( 'customizer-preview-color', 'userColorPalette', $this->user_color_palette );
 	}
 
-	function create_customization_style_element() {
+	function update_user_color_palette( $wp_customize ) {
+		foreach ( $this->user_color_palette as $key => $palette_item ) {
+			$setting = $wp_customize->get_setting( $this->section_key . $palette_item['slug'] );
+			if ( null !== $setting->post_value() ) {
+				$this->user_color_palette[ $key ]['color'] = $setting->post_value();
+			}
+		}
+	}
+
+	function create_customization_style_element( $wp_customize ) {
 		wp_enqueue_style( 'global-styles-colors-customizations', ' ', array( 'global-styles' ) ); // This needs to load after global_styles, hence the dependency
-		wp_add_inline_style( 'global-styles-colors-customizations', '{}' );
+
+		$this->update_user_color_palette( $wp_customize );
+
+		$css = ':root,body{';
+		foreach ( $this->user_color_palette as $key => $palette_item ) {
+			$setting = $wp_customize->get_setting( $this->section_key . $palette_item['slug'] );
+			$css .= '--wp--preset--color--' . $palette_item['slug'] . ':' . $palette_item['color'] .';';
+		}
+		$css .= '}';
+
+		wp_add_inline_style( 'global-styles-colors-customizations', $css );
 	}
 
 	function initialize( $wp_customize ) {
@@ -104,14 +123,9 @@ class GlobalStylesColorCustomizer {
 		);
 	}
 
-	function handle_customize_save_after( $manager ) {
+	function handle_customize_save_after( $wp_customize ) {
 		//update the palette based on the controls
-		foreach ( $this->user_color_palette as $key => $palette_item ) {
-			$setting = $manager->get_setting( $this->section_key . $palette_item['slug'] );
-			if ( null !== $setting->post_value() ) {
-				$this->user_color_palette[ $key ]['color'] = $setting->post_value();
-			}
-		}
+		$this->update_user_color_palette( $wp_customize );
 
 		// 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();

blockbase/inc/wp-customize-fonts.php

@@ -190,13 +190,18 @@ class GlobalStylesFontsCustomizer {
 
 	function __construct() {
 		add_action( 'customize_register', array( $this, 'initialize' ) );
-		add_action( 'customize_preview_init', array( $this, 'customize_preview_js' ) );
-		add_action( 'customize_preview_init', array( $this, 'create_customization_style_element' ) );
+		add_action( 'customize_preview_init', array( $this, 'handle_customize_preview_init' ) );
 		add_action( 'customize_register', array( $this, 'enqueue_google_fonts' ) );
 		add_action( 'customize_save_after', array( $this, 'handle_customize_save_after' ) );
 	}
 
-	function customize_preview_js() {
+	function handle_customize_preview_init( $wp_customize ) {
+		$this->update_font_settings( $wp_customize );
+		$this->customize_preview_js( $wp_customize );
+		$this->create_customization_style_element( $wp_customize );
+	}
+
+	function customize_preview_js( $wp_customize ) {
 		wp_enqueue_script( 'customizer-preview-fonts', get_template_directory_uri() . '/inc/wp-customize-fonts-preview.js', array( 'customize-preview' ) );
 		wp_localize_script( 'customizer-preview-fonts', 'googleFonts', $this->fonts );
 		wp_localize_script( 'customizer-preview-fonts', 'fontSettings', $this->fontSettings );
@@ -206,9 +211,27 @@ class GlobalStylesFontsCustomizer {
 		wp_enqueue_style( 'blockbase-google-fonts', $this->google_fonts_url(), array(), null );
 	}
 
-	function create_customization_style_element() {
+	function create_customization_style_element( $wp_customize ) {
 		wp_enqueue_style( 'global-styles-fonts-customizations', ' ', array( 'global-styles' ) ); // This needs to load after global_styles, hence the dependency
-		wp_add_inline_style( 'global-styles-fonts-customizations', '{}' );
+		$css = ':root,body{';
+		$css .= '--wp--custom--body--typography--font-family:' . $this->fontSettings['body'] . ';';
+		$css .= '--wp--custom--heading--typography--font-family: ' . $this->fontSettings['heading'] . '}';
+		$css .= '}';
+		wp_add_inline_style( 'global-styles-fonts-customizations', $css );
+	}
+
+	function update_font_settings( $wp_customize ) {
+		$body_value = $wp_customize->get_setting( $this->section_key . 'body' )->post_value();
+		if ( $body_value ) {
+			$body_font_setting = $this->fonts[ $body_value ];
+			$this->fontSettings['body'] = $body_font_setting['fontFamily'];
+		}
+
+		$heading_value = $wp_customize->get_setting( $this->section_key . 'heading' )->post_value();
+		if ( $heading_value ) {
+			$heading_font_setting = $this->fonts[ $heading_value ];
+			$this->fontSettings['heading'] = $heading_font_setting['fontFamily'];
+		}
 	}
 
 	function google_fonts_url() {
@@ -230,6 +253,7 @@ class GlobalStylesFontsCustomizer {
 		$heading_font_variable = $theme_json['settings']['custom']['heading']['typography']['fontFamily'];
 		$body_font_slug = preg_replace( '/var\(--wp--preset--font-family--(.*)\)/', '$1', $body_font_variable );
 		$heading_font_slug = preg_replace( '/var\(--wp--preset--font-family--(.*)\)/', '$1', $heading_font_variable );
+
 		$body_font_setting = $this->fonts[ $body_font_slug ];
 		$heading_font_setting = $this->fonts[ $heading_font_slug ];
 		$this->fontSettings = array(
@@ -249,11 +273,11 @@ class GlobalStylesFontsCustomizer {
 			)
 		);
 
-		$this->add_control( $wp_customize, 'body', __( 'Body font', 'blockbase' ), $body_font_slug );
-		$this->add_control( $wp_customize, 'heading', __( 'Heading font', 'blockbase' ), $heading_font_slug );
+		$this->add_setting_and_control( $wp_customize, 'body', __( 'Body font', 'blockbase' ), $body_font_slug );
+		$this->add_setting_and_control( $wp_customize, 'heading', __( 'Heading font', 'blockbase' ), $heading_font_slug );
 	}
 
-	function add_control( $wp_customize, $name, $label, $default ) {
+	function add_setting_and_control( $wp_customize, $name, $label, $default ) {
 		$setting_name = $this->section_key . $name;
 		$global_styles_setting = new WP_Customize_Global_Styles_Setting(
 			$wp_customize,
@@ -279,6 +303,13 @@ class GlobalStylesFontsCustomizer {
 				'choices' => $choices,
 			)
 		);
+
+		// Update the setting to the dirty value.
+		// This is needed to preserve the settings when other Customizer settings change.
+		$dirty_value = $wp_customize->get_setting( $setting_name )->post_value();
+		if ( ! empty( $dirty_value ) ) {
+			$wp_customize->get_setting( $setting_name )->user_value = $dirty_value;
+		}
 	}
 
 	function handle_customize_save_after( $wp_customize ) {
@@ -359,7 +390,6 @@ class GlobalStylesFontsCustomizer {
 			$user_theme_json_post_content->settings = (object) array( "custom" => (object) array( "heading" => (object) array( "typography" => (object) array( "fontFamily" => $heading_font_family_variable ) ) ) );
 		}
 
-
 		// Create the custom google fonts settings.
 		if ( property_exists( $user_theme_json_post_content, 'settings' ) ) {
 			if ( property_exists( $user_theme_json_post_content->settings, 'custom' ) ) {
@@ -371,138 +401,10 @@ class GlobalStylesFontsCustomizer {
 			$user_theme_json_post_content->settings = (object) array( "custom" => (object) array( "fontsToLoadFromGoogle" => $google_font_array ) );
 		}
 
-/*
-		"settings/custom/" "fontsToLoadFromGoogle": [
-			"family=Fira+Sans:ital,wght@0,400;0,500;1,400",
-			"family=Playfair+Display:ital,wght@0,400;0,700;1,400"
-		],*/
-
-		//var_dump( $user_theme_json_post_content );
 		// 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 );
 	}
-
-/*	function customize_preview_js() {
-		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 );
-	}
-
-	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';
-
-		$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' => sprintf( __( 'Color Customization for %1$s', 'blockbase' ), $theme->name ),
-				'title'       => __( 'Colors', 'blockbase' ),
-			)
-		);
-
-		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',
-				'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 ( null !== $setting->post_value() ) {
-				$this->user_color_palette[ $key ]['color'] = $setting->post_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 GlobalStylesFontsCustomizer;