Blockbase: Use the Global Styles rest API in the customizer (#5492)

* Blockbase: Use the Global Styles rest API in the customizer

* Color and Fonts customizer: changing implementation

* Color and Fonts customizer: changing implementation

* unlinting

* unlinting

* Customizer:  handling when settings or styles are not arrays

* Revert "Skatepark: dynamic duotone support (#4740)"

This reverts commit f1a3133076e478decfcb97e2efb9f47198d015c4.

* Blockbase: Use the Global Styles rest API in the customizer

* Color and Fonts customizer: changing implementation

* unlinting

* unlinting

* Customizer:  handling when settings or styles are not arrays

* Revert "Skatepark: dynamic duotone support (#4740)"

This reverts commit f1a3133076e478decfcb97e2efb9f47198d015c4.

* remove unused function

* move settings to the theme key

* revert skatepark changes

* revert skatepark changes

* Renaming variables

* Reverting https://github.com/Automattic/themes/commit/dded23b133a2602386638e5f9a83a9979cc312c2

* re-adding delete_transient

* Remonving condition to unset fonts when default is selected

Co-authored-by: Ben Dwyer <ben@scruffian.com>

archeo/inc/block-patterns.php

@@ -14,7 +14,7 @@
  */
 function archeo_register_block_patterns() {
 	$block_pattern_categories = array(
-		'pages'    => array( 'label' => __( 'Pages', 'archeo' ) ),
+		'pages' => array( 'label' => __( 'Pages', 'archeo' ) ),
 	);
 
 	/**

archeo/inc/patterns/layout-with-two-images-and-text.php

@@ -36,4 +36,4 @@ return array(
 	<!-- /wp:column --></div>
 	<!-- /wp:columns --></div></div>
 	<!-- /wp:media-text -->',
-);
+);

blockbase/inc/customizer/wp-customize-colors-preview.js

@@ -24,51 +24,4 @@ function blockBaseUpdateColorsPreview( palette ) {
 		'global-styles-colors-customizations-inline-css'
 	);
 	styleElement.innerHTML = innerHTML;
-
-	if ( window.userColorDuotone ) {
-		const colors = palette.map( ( paletteItem ) => paletteItem.color );
-		//we are inverting the order when we have a darker background so that duotone looks good.
-		colors.sort( ( first, second ) => {
-			if (
-				colord( first ).brightness() > colord( second ).brightness()
-			) {
-				return 1;
-			}
-
-			return -1;
-		} );
-
-		const colorValues = getValuesFromColors( colors );
-
-		updateDuotoneFilter( '#wp-duotone-default-filter', colorValues );
-		updateDuotoneFilter( '#wp-duotone-custom-filter', colorValues );
-	}
-}
-
-function updateDuotoneFilter( filterID, colors ) {
-	if ( document.querySelector( filterID ) ) {
-		document
-			.querySelector( filterID + ' feFuncR' )
-			.setAttribute( 'tableValues', colors.r.join( ' ' ) );
-		document
-			.querySelector( filterID + ' feFuncG' )
-			.setAttribute( 'tableValues', colors.g.join( ' ' ) );
-		document
-			.querySelector( filterID + ' feFuncB' )
-			.setAttribute( 'tableValues', colors.b.join( ' ' ) );
-	}
-}
-
-// This function is from Gutenberg.
-function getValuesFromColors( colors = [] ) {
-	const values = { r: [], g: [], b: [] };
-
-	colors.forEach( ( color ) => {
-		const rgbColor = colord( color ).toRgb();
-		values.r.push( rgbColor.r / 255 );
-		values.g.push( rgbColor.g / 255 );
-		values.b.push( rgbColor.b / 255 );
-	} );
-
-	return values;
 }

blockbase/inc/customizer/wp-customize-colors.php

@@ -1,7 +1,7 @@
 <?php
 
-require_once ( __DIR__ . '/wp-customize-global-styles-setting.php' );
-require_once ( __DIR__ . '/wp-customize-utils.php' );
+require_once( __DIR__ . '/wp-customize-global-styles-setting.php' );
+require_once( __DIR__ . '/wp-customize-utils.php' );
 
 class GlobalStylesColorCustomizer {
 
@@ -20,10 +20,6 @@ class GlobalStylesColorCustomizer {
 		wp_enqueue_script( 'customizer-preview-color', get_template_directory_uri() . '/inc/customizer/wp-customize-colors-preview.js', array( 'customize-preview' ) );
 		wp_add_inline_script( 'customizer-preview-color', 'var userColorSectionKey="' . $this->section_key . '";', 'before' );
 		wp_localize_script( 'customizer-preview-color', 'userColorPalette', $this->user_color_palette );
-		if ( $this->theme_duotone_settings ) {
-			wp_enqueue_script( 'colord', get_template_directory_uri() . '/inc/customizer/vendors/colord.min.js' );
-			wp_localize_script( 'customizer-preview-color', 'userColorDuotone', $this->theme_duotone_settings );
-		}
 	}
 
 	function update_user_color_palette( $wp_customize ) {
@@ -52,21 +48,9 @@ class GlobalStylesColorCustomizer {
 
 	function initialize( $wp_customize ) {
 		$this->user_color_palette = $this->build_user_color_palette();
-		$this->theme_duotone_settings = $this->get_theme_duotone_settings();
 		$this->register_color_controls( $wp_customize, $this->user_color_palette );
 	}
 
-	function get_theme_duotone_settings() {
-		// Get the merged theme.json.
-		$theme_json = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_raw_data();
-
-		if ( array_key_exists( 'settings', $theme_json ) && array_key_exists( 'color', $theme_json['settings'] ) && array_key_exists( 'duotone', $theme_json['settings']['color'] ) && array_key_exists( 'theme', $theme_json['settings']['color']['duotone'] ) ) {
-			return $theme_json['settings']['color']['duotone']['theme'];
-		}
-
-		return false;
-	}
-
 	function build_user_color_palette() {
 		// Get the merged theme.json.
 		$theme_json = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_raw_data();
@@ -78,7 +62,7 @@ class GlobalStylesColorCustomizer {
 		}
 
 		// NOTE: This should be removed once Gutenberg 12.1 lands stably in all environments
-		else if ( isset( $theme_json['settings']['color']['palette']['user'] ) ) {
+		elseif ( isset( $theme_json['settings']['color']['palette']['user'] ) ) {
 			$user_color_palette = $theme_json['settings']['color']['palette']['user'];
 		}
 		// End Gutenberg < 12.1 compatibility patch
@@ -134,14 +118,14 @@ class GlobalStylesColorCustomizer {
 			$wp_customize,
 			$setting_key,
 			array(
-				'default'           => $palette_item['default'],
-				'user_value'        => $palette_item['color'],
+				'default'    => $palette_item['default'],
+				'user_value' => $palette_item['color'],
 			)
 		);
 		$wp_customize->add_setting(
 			$global_styles_setting,
 			array(
-				'sanitize_callback' => 'sanitize_hex_color'
+				'sanitize_callback' => 'sanitize_hex_color',
 			)
 		);
 
@@ -162,85 +146,34 @@ class GlobalStylesColorCustomizer {
 		$this->update_user_color_palette( $wp_customize );
 
 		// Get the user's theme.json from the CPT.
-		if ( method_exists( 'WP_Theme_JSON_Resolver_Gutenberg', 'get_user_global_styles_post_id' ) ) { // This is the new name.
-			$user_custom_post_type_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
-		} else if ( method_exists( 'WP_Theme_JSON_Resolver_Gutenberg', 'get_user_custom_post_type_id' ) ) { // This is the old name.
-			$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 );
-
-		// Set meta settings.
-		$user_theme_json_post_content->version                     = 1;
-		$user_theme_json_post_content->isGlobalStylesUserThemeJSON = true;
+		$user_custom_post_type_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
+		$global_styles_controller = new Gutenberg_REST_Global_Styles_Controller();
+		$get_request              = new WP_REST_Request( 'GET', '/wp/v2/global-styles/' );
 
-		// Only reset the palette if the setting exists, otherwise the whole settings array gets destroyed.
-		if ( property_exists( $user_theme_json_post_content, 'settings' ) && property_exists( $user_theme_json_post_content->settings, 'color' ) && property_exists( $user_theme_json_post_content->settings->color, 'palette' ) ) {
-			// Start with reset palette settings.
-			unset( $user_theme_json_post_content->settings->color->palette );
-		}
-
-		$user_theme_json_post_content = set_settings_array(
-			$user_theme_json_post_content,
-			array( 'settings', 'color', 'palette', 'custom' ),
-			$this->user_color_palette
-		);
+		$get_request->set_param( 'id', $user_custom_post_type_id );
+		$global_styles = $global_styles_controller->get_item( $get_request );
 
-		$primary_key = array_search('primary', array_column($this->user_color_palette, 'slug'));
-		$background_key = array_search('background', array_column($this->user_color_palette, 'slug'));
+		// converts data to array (in some cases settings and styles are objects insted of arrays)
+		$new_settings = (array) $global_styles->data['settings'];
+		$new_styles   = (array) $global_styles->data['styles'];
 
-		if (  $this->theme_duotone_settings && $primary_key !== null && $background_key !== null ) {
+		// Set the new color settings
+		$new_settings['color']['palette']['custom'] = $this->user_color_palette;
 
-			$primary = $this->user_color_palette[$primary_key];
-			$background = $this->user_color_palette[$background_key];
-
-			//we invert the colors when the background is darker than the primary color
-			if( colorLuminescence($primary['color']) > colorLuminescence($background['color']) ) {
-				$primary = $this->user_color_palette[$background_key];
-				$background = $this->user_color_palette[$primary_key];
-			}
-
-			$custom_duotone_filter = array(
-				array(
-					"colors" => array( $primary['color'], $background['color'] ),
-					"slug" => "custom-filter",
-					"name" => "Custom filter"
-				)
-			);
-
-			$custom_duotone_filter_variable = "var(--wp--preset--duotone--custom-filter)";
-			$user_theme_json_post_content = set_settings_array(
-				$user_theme_json_post_content,
-				array( 'settings', 'color', 'duotone', 'custom' ),
-				array_merge( $custom_duotone_filter, $this->theme_duotone_settings )
-			);
-
-			//replace the new filter in all blocks using duotone
-			$theme_json = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_raw_data();
-			if ( $theme_json['styles'] && $theme_json['styles']['blocks'] ) {
-				foreach ( $theme_json['styles']['blocks'] as $key => $block ) {
-					if( $block['filter'] ) {
-						$user_theme_json_post_content = set_settings_array(
-							$user_theme_json_post_content,
-							array( 'styles', 'blocks', $key, 'filter', 'duotone', 'custom' ),
-							$custom_duotone_filter_variable
-						);
-					}
-				}
-			}
-		}
+		// Add the updated global styles to the update request
+		$update_request = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' );
+		$update_request->set_param( 'id', $user_custom_post_type_id );
+		$update_request->set_param( 'settings', $new_settings );
+		$update_request->set_param( 'styles', $new_styles );
 
 		// Update the theme.json with the new settings.
-		$user_theme_json_post->post_content = json_encode( $user_theme_json_post_content );
-		wp_update_post( $user_theme_json_post );
+		$updated_global_styles = $global_styles_controller->update_item( $update_request );
 		delete_transient( 'global_styles' );
 		delete_transient( 'global_styles_' . get_stylesheet() );
 		delete_transient( 'gutenberg_global_styles' );
 		delete_transient( 'gutenberg_global_styles_' . get_stylesheet() );
 	}
 
-
 	function check_if_colors_are_default() {
 		foreach ( $this->user_color_palette as $palette_color ) {
 			if ( strtoupper( $palette_color['color'] ) !== strtoupper( $palette_color['default'] ) ) {

blockbase/inc/customizer/wp-customize-fonts.php

@@ -1,7 +1,7 @@
 <?php
 
-require_once ( __DIR__ . '/wp-customize-global-styles-setting.php' );
-require_once ( __DIR__ . '/wp-customize-utils.php' );
+require_once( __DIR__ . '/wp-customize-global-styles-setting.php' );
+require_once( __DIR__ . '/wp-customize-utils.php' );
 
 class GlobalStylesFontsCustomizer {
 
@@ -74,7 +74,7 @@ class GlobalStylesFontsCustomizer {
 			'name'       => 'Fira Sans',
 			'google'     => 'family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900',
 		),
-		'ibm-plex-mono'  => array(
+		'ibm-plex-mono'     => array(
 			'fontFamily' => '"IBM Plex Mono", monospace',
 			'slug'       => 'ibm-plex-mono',
 			'name'       => 'IBM Plex Mono',
@@ -254,7 +254,7 @@ class GlobalStylesFontsCustomizer {
 	}
 
 	function update_font_settings( $wp_customize ) {
-		$body_setting = $wp_customize->get_setting( $this->section_key . 'body' );
+		$body_setting    = $wp_customize->get_setting( $this->section_key . 'body' );
 		$heading_setting = $wp_customize->get_setting( $this->section_key . 'heading' );
 		if ( $body_setting && $heading_setting ) {
 			$body_value = $body_setting->post_value();
@@ -285,7 +285,7 @@ class GlobalStylesFontsCustomizer {
 	}
 
 	function initialize( $wp_customize ) {
-		$theme       = wp_get_theme();
+		$theme = wp_get_theme();
 
 		//Add a Section to the Customizer for these bits
 		$wp_customize->add_section(
@@ -297,16 +297,22 @@ class GlobalStylesFontsCustomizer {
 			)
 		);
 
-		$merged_json = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_raw_data();
-		$theme_font_families = $merged_json['settings']['typography']['fontFamilies']['theme'];
-		$body_font_default_array = array_filter( $theme_font_families, function( $font_family ) {
-			return $font_family['slug'] === "body-font";
-		} );
-		$body_font_default = array_shift( $body_font_default_array );
-		$heading_font_default_array = array_filter( $theme_font_families, function( $font_family ) {
-			return $font_family['slug'] === "heading-font";
-		} );
-		$heading_font_default = array_shift( $heading_font_default_array );
+		$merged_json                = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_raw_data();
+		$theme_font_families        = $merged_json['settings']['typography']['fontFamilies']['theme'];
+		$body_font_default_array    = array_filter(
+			$theme_font_families,
+			function( $font_family ) {
+				return $font_family['slug'] === 'body-font';
+			}
+		);
+		$body_font_default          = array_shift( $body_font_default_array );
+		$heading_font_default_array = array_filter(
+			$theme_font_families,
+			function( $font_family ) {
+				return $font_family['slug'] === 'heading-font';
+			}
+		);
+		$heading_font_default       = array_shift( $heading_font_default_array );
 
 		// See if the child theme has been updated. If not then show a notice.
 		if ( ! $body_font_default && ! $heading_font_default ) {
@@ -315,7 +321,7 @@ class GlobalStylesFontsCustomizer {
 				array(
 					'type'        => 'hidden',
 					'description' => '<div class="notice notice-warning">
-					<p>' . __( "Your theme needs to be updated before you can customize fonts", 'blockbase' ) . '</p>
+					<p>' . __( 'Your theme needs to be updated before you can customize fonts', 'blockbase' ) . '</p>
 					</div>',
 					'settings'    => array(),
 					'section'     => $this->section_key,
@@ -326,48 +332,60 @@ class GlobalStylesFontsCustomizer {
 		}
 
 		if ( array_key_exists( 'custom', $merged_json['settings']['typography']['fontFamilies'] ) ) {
-			$merged_font_families = $merged_json['settings']['typography']['fontFamilies']['custom'];
-			$body_font_selected_array = array_filter( $merged_font_families, function( $font_family ) {
-				return $font_family['slug'] === "body-font";
-			} );
-			$body_font_selected = array_shift( $body_font_selected_array );
-
-			$heading_font_selected_array = array_filter( $merged_font_families, function( $font_family ) {
-				return $font_family['slug'] === "heading-font";
-			} );
-			$heading_font_selected = array_shift( $heading_font_selected_array );
-
-		// NOTE: This should be removed once Gutenberg 12.1 lands stably in all environments
-		} else if ( array_key_exists( 'user', $merged_json['settings']['typography']['fontFamilies'] ) ) {
+			$merged_font_families     = $merged_json['settings']['typography']['fontFamilies']['custom'];
+			$body_font_selected_array = array_filter(
+				$merged_font_families,
+				function( $font_family ) {
+					return $font_family['slug'] === 'body-font';
+				}
+			);
+			$body_font_selected       = array_shift( $body_font_selected_array );
+
+			$heading_font_selected_array = array_filter(
+				$merged_font_families,
+				function( $font_family ) {
+					return $font_family['slug'] === 'heading-font';
+				}
+			);
+			$heading_font_selected       = array_shift( $heading_font_selected_array );
+
+			// NOTE: This should be removed once Gutenberg 12.1 lands stably in all environments
+		} elseif ( array_key_exists( 'user', $merged_json['settings']['typography']['fontFamilies'] ) ) {
 			$merged_font_families = $merged_json['settings']['typography']['fontFamilies']['user'];
 
-			$body_font_selected_array = array_filter( $merged_font_families, function( $font_family ) {
-				return $font_family['slug'] === "body-font";
-			} );
-			$body_font_selected = array_shift( $body_font_selected_array );
+			$body_font_selected_array = array_filter(
+				$merged_font_families,
+				function( $font_family ) {
+					return $font_family['slug'] === 'body-font';
+				}
+			);
+			$body_font_selected       = array_shift( $body_font_selected_array );
 
-			$heading_font_selected_array = array_filter( $merged_font_families, function( $font_family ) {
-				return $font_family['slug'] === "heading-font";
-			} );
-			$heading_font_selected = array_shift( $heading_font_selected_array );
-		// End Gutenberg < 12.1 compatibility patch
+			$heading_font_selected_array = array_filter(
+				$merged_font_families,
+				function( $font_family ) {
+					return $font_family['slug'] === 'heading-font';
+				}
+			);
+			$heading_font_selected       = array_shift( $heading_font_selected_array );
+			// End Gutenberg < 12.1 compatibility patch
 
 		} else {
-			$body_font_selected = $body_font_default;
+			$body_font_selected    = $body_font_default;
 			$heading_font_selected = $heading_font_default;
 		}
 
 		// If there's no selected font then the user is probably using the old format for font customization
 		if ( $body_font_selected && $heading_font_selected ) {
-			$body_font_selected_font_family = $body_font_selected['fontFamily'];
-			$body_font_selected_font_slug = $body_font_selected['fontSlug'];
+			$body_font_selected_font_family    = $body_font_selected['fontFamily'];
+			$body_font_selected_font_slug      = $body_font_selected['fontSlug'];
 			$heading_font_selected_font_family = $heading_font_selected['fontFamily'];
-			$heading_font_selected_font_slug = $heading_font_selected['fontSlug'];
+			$heading_font_selected_font_slug   = $heading_font_selected['fontSlug'];
 		} else {
-			$body_font_selected_font_family = null;
-			$body_font_selected_font_slug = null;
+			$body_font_selected_font_family    = null;
+			$body_font_selected_font_slug      = null;
 			$heading_font_selected_font_family = null;
-			$heading_font_selected_font_slug = null;
+			$heading_font_selected_font_slug   = null;
 		}
 
 		$this->font_settings = array(
@@ -426,13 +444,14 @@ class GlobalStylesFontsCustomizer {
 			$wp_customize,
 			$setting_name,
 			array(
-				'default'           => $default,
-				'user_value'        => $user_value
+				'default'    => $default,
+				'user_value' => $user_value,
 			)
 		);
-		$wp_customize->add_setting( $global_styles_setting,
+		$wp_customize->add_setting(
+			$global_styles_setting,
 			array(
-				'sanitize_callback' => $sanitize_callback
+				'sanitize_callback' => $sanitize_callback,
 			)
 		);
 
@@ -459,13 +478,6 @@ class GlobalStylesFontsCustomizer {
 		}
 	}
 
-	function unset_property_if_it_exists( $object, $property ) {
-		if ( isset( $object->{$property} ) ) {
-			unset( $object->{$property} );
-		}
-
-	}
-
 	function handle_customize_save_after( $wp_customize ) {
 		$body_value    = $wp_customize->get_setting( $this->section_key . 'body' )->value();
 		$heading_value = $wp_customize->get_setting( $this->section_key . 'heading' )->value();
@@ -485,15 +497,15 @@ class GlobalStylesFontsCustomizer {
 			$heading_value = $heading_default;
 		}
 
-		$body_setting = $this->fonts[ $body_value ];
-		$body_setting['name'] = "Body (" . $body_setting['name'] . ")";
+		$body_setting             = $this->fonts[ $body_value ];
+		$body_setting['name']     = 'Body (' . $body_setting['name'] . ')';
 		$body_setting['fontSlug'] = $body_setting['slug'];
-		$body_setting['slug'] = "body-font";
+		$body_setting['slug']     = 'body-font';
 
-		$heading_setting = $this->fonts[ $heading_value ];
-		$heading_setting['name'] = "Heading (" . $heading_setting['name'] . ")";
+		$heading_setting             = $this->fonts[ $heading_value ];
+		$heading_setting['name']     = 'Heading (' . $heading_setting['name'] . ')';
 		$heading_setting['fontSlug'] = $heading_setting['slug'];
-		$heading_setting['slug'] = "heading-font";
+		$heading_setting['slug']     = 'heading-font';
 
 		// Set up variables for the theme.json.
 		$font_families = array(
@@ -504,47 +516,33 @@ class GlobalStylesFontsCustomizer {
 		$body_font_family_variable    = 'var(--wp--preset--font-family--' . $body_setting['slug'] . ')';
 		$heading_font_family_variable = 'var(--wp--preset--font-family--' . $heading_setting['slug'] . ')';
 
-		// Get the user's theme.json from the CPT.
-		if ( method_exists( 'WP_Theme_JSON_Resolver_Gutenberg', 'get_user_global_styles_post_id' ) ) { // This is the new name.
-			$user_custom_post_type_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
-		} else if ( method_exists( 'WP_Theme_JSON_Resolver_Gutenberg', 'get_user_custom_post_type_id' ) ) { // This is the old name.
-			$user_custom_post_type_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_custom_post_type_id();
-		}
+		// Get the user's global styles CPT id
+		$user_custom_post_type_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_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 );
+		// API request to get global styles
+		$get_request = new WP_REST_Request( 'GET', '/wp/v2/global-styles/' );
+		$get_request->set_param( 'id', $user_custom_post_type_id );
 
-		// Set meta settings.
-		$user_theme_json_post_content->version                     = 1;
-		$user_theme_json_post_content->isGlobalStylesUserThemeJSON = true;
+		$global_styles_controller = new Gutenberg_REST_Global_Styles_Controller();
+		$global_styles            = $global_styles_controller->get_item( $get_request );
 
-		$this->unset_property_if_it_exists( $user_theme_json_post_content->settings->typography, 'fontFamilies' );
+		// converts data to array (in some cases settings and styles are objects insted of arrays)
+		$new_settings = (array) $global_styles->data['settings'];
+		$new_styles   = (array) $global_styles->data['styles'];
 
-		// Set the typography settings.
-		$user_theme_json_post_content = set_settings_array(
-			$user_theme_json_post_content,
-			array( 'settings', 'typography', 'fontFamilies', 'custom' ),
-			$font_families
-		);
-
-		//If the typeface choices === the default then we remove it instead
-		if ( $body_value === $body_default && $heading_value === $heading_default ) {
-			// These lines need to stay for backwards compatibility.
-			$this->unset_property_if_it_exists( $user_theme_json_post_content->styles->typography, 'fontFamily' );
-			$this->unset_property_if_it_exists( $user_theme_json_post_content->styles->elements->h1->typography, 'fontFamily' );
-			$this->unset_property_if_it_exists( $user_theme_json_post_content->styles->elements->h2->typography, 'fontFamily' );
-			$this->unset_property_if_it_exists( $user_theme_json_post_content->styles->elements->h3->typography, 'fontFamily' );
-			$this->unset_property_if_it_exists( $user_theme_json_post_content->styles->elements->h4->typography, 'fontFamily' );
-			$this->unset_property_if_it_exists( $user_theme_json_post_content->styles->elements->h5->typography, 'fontFamily' );
-			$this->unset_property_if_it_exists( $user_theme_json_post_content->styles->elements->h6->typography, 'fontFamily' );
-			$this->unset_property_if_it_exists( $user_theme_json_post_content->styles->blocks->{'core/button'}->typography, 'fontFamily' );
-			$this->unset_property_if_it_exists( $user_theme_json_post_content->styles->blocks->{'core/post-title'}->typography, 'fontFamily' );
-			$this->unset_property_if_it_exists( $user_theme_json_post_content->styles->blocks->{'core/pullquote'}->typography, 'fontFamily' );
+		// Set new typography settings
+		if ( $font_families ) {
+			$new_settings['typography']['fontFamilies']['custom'] = $font_families;
 		}
 
+		// Add the updated global styles to the update request
+		$update_request = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' );
+		$update_request->set_param( 'id', $user_custom_post_type_id );
+		$update_request->set_param( 'settings', $new_settings );
+		$update_request->set_param( 'styles', $new_styles );
+
 		// Update the theme.json with the new settings.
-		$user_theme_json_post->post_content = json_encode( $user_theme_json_post_content );
-		wp_update_post( $user_theme_json_post );
+		$updated_global_styles = $global_styles_controller->update_item( $update_request );
 		delete_transient( 'global_styles' );
 		delete_transient( 'global_styles_' . get_stylesheet() );
 		delete_transient( 'gutenberg_global_styles' );

blockbase/inc/customizer/wp-customize-utils.php

@@ -1,33 +1,5 @@
 <?php
 
-/**
- *
- * Assign a value to an object at the given location.  Create the nested objects if they aren't already available.
- *
- * @param   object  $target The object to assign the value to
- * @param   array   $array  The array describing the location of the property to update
- * @param   object  $value  The value to assign
- * @return  object          The modified $target object with $value assigned where $array describes
- *
- */
-function set_settings_array( $target, $array, $value ) {
-	$key     = array_shift( $array );
-	$current =& $target;
-	while ( 0 < sizeof( $array ) ) {
-		if ( ! property_exists( $current, $key ) ) {
-			$current->{ $key } = (object) array();
-		}
-		$current =& $current->{ $key };
-
-		// Cast to an object in the case where it's been set as an array.
-		$current = (object) $current;
-
-		$key     = array_shift( $array );
-	}
-	$current->{ $key } = $value;
-	return $target;
-}
-
 /**
  *
  * Get a value from an object at the given location.
@@ -38,56 +10,9 @@ function set_settings_array( $target, $array, $value ) {
  *
  */
 function get_settings_array( $array, $object ) {
-	foreach( $array as $property ) {
+	foreach ( $array as $property ) {
 		$object = $object[ $property ];
 	}
 
 	return $object;
 }
-
-// These functions are borrowed from the colorline lib
-function hex_to_rgb( $hex ) {
-	return sscanf( str_replace( '#', '', $hex), '%02X%02X%02X' );
-}
-
-// RGB values: 0-255
-// LUM values: 0-1
-function rgb_to_lum( $rgb ) {
-	list( $r, $g, $b ) = $rgb;
-	return sqrt( 0.241 * $r * $r + 0.691 * $g * $g + 0.068 * $b * $b ) / 255;
-}
-
-// RGB values:    0-255, 0-255, 0-255
-// HSV values:    0-360, 0-100, 0-100, 0-100
-function rgb_to_hsvl( $rgb ) {
-	$l                 = rgb_to_lum( $rgb );
-	list( $r, $g, $b ) = $rgb;
-	$r                 = $r / 255;
-	$g                 = $g / 255;
-	$b                 = $b / 255;
-	$max_rgb           = max( $r, $g, $b );
-	$min_rgb           = min( $r, $g, $b );
-	$chroma            = $max_rgb - $min_rgb;
-	$v                 = 100 * $max_rgb;
-	if ( $chroma > 0 ) {
-		$s = 100 * ( $chroma / $max_rgb );
-		if ( $r === $min_rgb ) {
-			$h = 3 - ( ( $g - $b ) / $chroma );
-		} elseif ( $b === $min_rgb ) {
-			$h = 1 - ( ( $r - $g ) / $chroma );
-		} else { // $g === $min_rgb
-			$h = 5 - ( ( $b - $r ) / $chroma );
-		}
-		$h = 60 * $h;
-		return array( $h, $s, $v, $l );
-	} else {
-		return array( 0, 0, $v, $l );
-	}
-}
-
-function colorLuminescence( $hex ) {
-	$rgb = hex_to_rgb( $hex );
-	$hsvl = rgb_to_hsvl( $rgb );
-
-	return $hsvl[3];
-}

blockbase/readme.txt

@@ -137,7 +137,3 @@ The Water Fan, by Winslow Homer
 License: CC0
 Source: https://www.artic.edu/artworks/38666/the-water-fan
 Included in theme screenshot.
-
-Colord library
-License: MIT
-Source: https://github.com/omgovich/colord

remote/functions.php

@@ -140,7 +140,7 @@ if ( ! function_exists( 'remote_preload_webfonts' ) ) :
 	/**
 	 * Preloads the main web font to improve performance.
 	 *
-	 * Only the main web font (font-weight: 100,400, font-style: normal) is preloaded here since that font is always relevant. 
+	 * Only the main web font (font-weight: 100,400, font-style: normal) is preloaded here since that font is always relevant.
 	 * The other fonts are only needed if the user changed style or weight of the fonts,
 	 * and therefore preloading it would in most cases regress performance when that font would otherwise not be loaded
 	 * at all.

remote/inc/block-patterns.php

@@ -14,7 +14,7 @@
  */
 function remote_register_block_patterns() {
 	$block_pattern_categories = array(
-		'pages'    => array( 'label' => __( 'Pages', 'remote' ) ),
+		'pages' => array( 'label' => __( 'Pages', 'remote' ) ),
 	);
 
 	/**
@@ -40,9 +40,7 @@ function remote_register_block_patterns() {
 		}
 	}
 
-	$block_patterns = array(
-
-	);
+	$block_patterns = array();
 
 	/**
 	 * Filters the theme block patterns.

skatepark/block-templates/page.html

@@ -8,7 +8,8 @@
 <main class="wp-block-group" style="padding-bottom:5em">
 
 <!-- wp:group {"align":"full"} -->
-<div class="wp-block-group alignfull"><!-- wp:post-featured-image {"align":"full"} /--></div>
+<div class="wp-block-group">
+<!-- wp:post-featured-image {"align":"full","style":{"color":{"duotone":["#000","#B9FB9C"]}}} /--></div>
 <!-- /wp:group -->
 
 <!-- wp:post-content {"layout":{"inherit":true}} /-->

skatepark/inc/patterns/blog-posts.php

@@ -15,7 +15,7 @@ return array(
 	<hr class="wp-block-separator is-style-wide"/>
 	<!-- /wp:separator -->
 
-	<!-- wp:post-featured-image {"isLink":true} /-->
+	<!-- wp:post-featured-image {"isLink":true,"style":{"color":{"duotone":["#000","#B9FB9C"]}}} /-->
 
 	<!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--normal)"},"spacing":{"margin":{"bottom":"calc( 0.5 * var(--wp--custom--gap--vertical) )"}}}} /-->
 

skatepark/inc/patterns/columns-in-container.php

@@ -39,8 +39,8 @@ return array(
 	<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
 	<!-- /wp:spacer -->
 
-	<!-- wp:image {"align":"wide","sizeSlug":"large","linkDestination":"none"} -->
-	<figure class="wp-block-image alignwide size-large"><img src="' . get_stylesheet_directory_uri() . '/assets/images/riding-skateboard.jpeg" alt="' . esc_html__( 'Close-up of a person riding a skateboard, focusing on their feet and the board. One foot is on the board, while the other foot is up, in motion. A skatepark is blurred in the background.', 'skatepark' ) . '"/></figure>
+	<!-- wp:image {"align":"wide","id":26,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":["#000","#B9FB9C"]}}} -->
+	<figure class="wp-block-image alignwide size-large"><img src="' . get_stylesheet_directory_uri() . '/assets/images/riding-skateboard.jpeg" alt="' . esc_html__( 'Close-up of a person riding a skateboard, focusing on their feet and the board. One foot is on the board, while the other foot is up, in motion. A skatepark is blurred in the background.', 'skatepark' ) . '" class="wp-image-26"/></figure>
 	<!-- /wp:image -->
 
 	<!-- wp:spacer {"height":5} -->

skatepark/inc/patterns/full-width-image-with-aside-caption.php

@@ -9,7 +9,7 @@ return array(
 	'title'      => __( 'Full width image with aside caption', 'skatepark' ),
 	'categories' => array( 'skatepark' ),
 	'content'    => '<!-- wp:image {"align":"full","className":"alignfull size-large is-style-skatepark-aside-caption"} -->
-	<figure class="wp-block-image alignfull size-large is-style-skatepark-aside-caption"><img src="' . get_stylesheet_directory_uri() . '/assets/images/skatepark.jpg" alt="' . esc_attr__( "A skateboarder does a grab trick in a bowl-shaped skate park. In the background is a watching crowd, palm trees, and the ocean.", 'skatepark' ) . '"/></figure>
+	<figure class="wp-block-image alignfull size-large is-style-skatepark-aside-caption"><img src="' . get_stylesheet_directory_uri() . '/assets/images/skatepark.jpg" alt="' . esc_attr__( 'A skateboarder does a grab trick in a bowl-shaped skate park. In the background is a watching crowd, palm trees, and the ocean.', 'skatepark' ) . '"/></figure>
 	<!-- /wp:image -->
 	<!-- wp:columns {"align":"wide"} -->
 	<div class="wp-block-columns alignwide"><!-- wp:column -->
@@ -22,7 +22,7 @@ return array(
 	<!-- /wp:separator -->
 
 	<!-- wp:paragraph {"fontSize":"small"} -->
-	<p class="has-small-font-size">' . esc_html__( "Learn the basics of skating along with a group of your peers. More advanced at skating? Our skateboarding coaches will work with you 1:1 to advance your technique.", 'skatepark' ) . '</p>
+	<p class="has-small-font-size">' . esc_html__( 'Learn the basics of skating along with a group of your peers. More advanced at skating? Our skateboarding coaches will work with you 1:1 to advance your technique.', 'skatepark' ) . '</p>
 	<!-- /wp:paragraph --></div>
 	<!-- /wp:column --></div>
 	<!-- /wp:columns -->',

skatepark/inc/patterns/home-patterns.php

@@ -4,7 +4,7 @@
  *
  * @package Skatepark
  * @since 1.0.0
- * 
+ *
  */
 
 return array(
@@ -16,7 +16,7 @@ return array(
 	<!-- /wp:heading -->
 
 	<!-- wp:image {"align":"full","className":"alignfull size-large"} -->
-	<figure class="wp-block-image alignfull size-large"><img src="' . get_stylesheet_directory_uri() . '/assets/images/skatepark.jpg" alt="' . esc_attr__( "A skateboarder does a grab trick in a bowl-shaped skate park. In the background is a watching crowd, palm trees, and the ocean.", 'skatepark' ) . '"/></figure>
+	<figure class="wp-block-image alignfull size-large"><img src="' . get_stylesheet_directory_uri() . '/assets/images/skatepark.jpg" alt="' . esc_attr__( 'A skateboarder does a grab trick in a bowl-shaped skate park. In the background is a watching crowd, palm trees, and the ocean.', 'skatepark' ) . '"/></figure>
 	<!-- /wp:image -->
 	
 	<!-- wp:heading {"level":5,"align":"wide","style":{"spacing":{"margin":{"top":"calc(var(--wp--custom--gap--vertical) * 3)","bottom":"var(--wp--custom--gap--vertical)"}}}} -->
@@ -44,5 +44,5 @@ return array(
 	<!-- wp:query-pagination-previous /-->
 	<!-- wp:query-pagination-next /-->
 	<!-- /wp:query-pagination --></div>
-	<!-- /wp:query -->'
+	<!-- /wp:query -->',
 );

skatepark/inc/patterns/mixed-media-in-container.php

@@ -29,7 +29,7 @@ return array(
 	<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
 	<!-- /wp:spacer -->
 
-	<!-- wp:image {"sizeSlug":"large"} -->
+	<!-- wp:image {"sizeSlug":"large","style":{"color":{"duotone":["#000","#BFF5A5"]}}} -->
 	<figure class="wp-block-image size-large"><img src="' . get_stylesheet_directory_uri() . '/assets/images/skateboard-sideways.jpg" " alt="' . esc_attr__( 'A skateboard laying on its side on top of concrete.', 'skatepark' ) . '"/></figure>
 	<!-- /wp:image -->
 

skatepark/inc/patterns/testimonial.php

@@ -29,4 +29,4 @@ return array(
     
     
     ',
-);
+);

skatepark/inc/patterns/text-list-with-button.php

@@ -4,7 +4,7 @@
  *
  * @package Skatepark
  * @since 1.0.0
- * 
+ *
  */
 
 return array(
@@ -35,5 +35,5 @@ return array(
 		<!-- wp:column {"width":"25%"} -->
 		<div class="wp-block-column" style="flex-basis:25%"></div>
 		<!-- /wp:column --></div>
-		<!-- /wp:columns -->'
+		<!-- /wp:columns -->',
 );