diff --git a/blockbase/inc/customizer/wp-customize-colors-preview.js b/blockbase/inc/customizer/wp-customize-colors-preview.js index 2b2ea652b6..f686990ecb 100644 --- a/blockbase/inc/customizer/wp-customize-colors-preview.js +++ b/blockbase/inc/customizer/wp-customize-colors-preview.js @@ -1,3 +1,17 @@ +var enabledDuotone = false; + +if ( window.duotoneVars ) { + enabledDuotone = duotoneVars[ 'duotoneControl' ] === '1' ? true : false; +} + +wp.customize( 'duotone_control', ( value ) => { + value.bind( ( newValue ) => { + enabledDuotone = newValue; + toggleDuotoneFilter( '#wp-duotone-default-filter', enabledDuotone ); + toggleDuotoneFilter( '#wp-duotone-custom-filter', enabledDuotone ); + } ); +} ); + if ( userColorPalette && userColorSectionKey ) { // For each of the palette items add a listener userColorPalette.forEach( ( paletteItem ) => { @@ -25,7 +39,7 @@ function blockBaseUpdateColorsPreview( palette ) { ); styleElement.innerHTML = innerHTML; - if ( window.userColorDuotone ) { + if ( duotoneVars[ '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 ) => { @@ -47,6 +61,7 @@ function blockBaseUpdateColorsPreview( palette ) { function updateDuotoneFilter( filterID, colors ) { if ( document.querySelector( filterID ) ) { + toggleDuotoneFilter( filterID, enabledDuotone ); document .querySelector( filterID + ' feFuncR' ) .setAttribute( 'tableValues', colors.r.join( ' ' ) ); @@ -59,6 +74,48 @@ function updateDuotoneFilter( filterID, colors ) { } } +function toggleDuotoneFilter( filterID, enable ) { + //This effectively disables the duotone filter + if ( document.querySelector( filterID ) ) { + let colorMatrix = document.querySelector( filterID + ' feColorMatrix' ); + let matrixValues = ''; + if ( enable ) { + matrixValues = colorMatrix.getAttribute( 'oldValues' ); + if ( + colorMatrix.hasAttribute( 'oldValues' ) && + matrixValues !== '' + ) { + colorMatrix.setAttribute( 'values', matrixValues ); + colorMatrix.setAttribute( 'oldValues', '' ); + } + document + .querySelector( filterID + ' feFuncR' ) + .setAttribute( 'type', 'table' ); + document + .querySelector( filterID + ' feFuncG' ) + .setAttribute( 'type', 'table' ); + document + .querySelector( filterID + ' feFuncB' ) + .setAttribute( 'type', 'table' ); + } else { + matrixValues = colorMatrix.getAttribute( 'values' ); + if ( colorMatrix.hasAttribute( 'values' ) && matrixValues !== '' ) { + colorMatrix.setAttribute( 'oldValues', matrixValues ); + colorMatrix.setAttribute( 'values', '' ); + } + document + .querySelector( filterID + ' feFuncR' ) + .setAttribute( 'type', 'identity' ); + document + .querySelector( filterID + ' feFuncG' ) + .setAttribute( 'type', 'identity' ); + document + .querySelector( filterID + ' feFuncB' ) + .setAttribute( 'type', 'identity' ); + } + } +} + // This function is from Gutenberg. function getValuesFromColors( colors = [] ) { const values = { r: [], g: [], b: [] }; diff --git a/blockbase/inc/customizer/wp-customize-colors.php b/blockbase/inc/customizer/wp-customize-colors.php index 69037c6136..bd0e83cc7b 100644 --- a/blockbase/inc/customizer/wp-customize-colors.php +++ b/blockbase/inc/customizer/wp-customize-colors.php @@ -22,7 +22,14 @@ function customize_preview_js() { 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 ); + wp_localize_script( + 'customizer-preview-color', + 'duotoneVars', + array( + 'userColorDuotone' => $this->theme_duotone_settings, + 'duotoneControl' => $this->enable_duotone, + ) + ); } } @@ -51,9 +58,12 @@ function create_customization_style_element( $wp_customize ) { } function initialize( $wp_customize ) { - $this->user_color_palette = $this->build_user_color_palette(); + $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 ); + if ( $this->theme_duotone_settings ) { + $this->register_duotone_controls( $wp_customize ); + } } function get_theme_duotone_settings() { @@ -127,6 +137,30 @@ function register_color_controls( $wp_customize, $palette ) { } } + function register_duotone_controls( $wp_customize ) { + $wp_customize->add_setting( + 'duotone_control', + array( + 'default' => true, + 'capability' => 'edit_theme_options', + 'sanitize_callback' => 'rest_sanitize_boolean', + 'transport' => 'postMessage', // We need this to stop the page refreshing. + ) + ); + + $wp_customize->add_control( + 'duotone_control', + array( + 'type' => 'checkbox', + 'section' => $this->section_key, + 'label' => __( 'Enable duotone', 'blockbase' ), + ) + ); + + $this->enable_duotone = $wp_customize->get_setting( 'duotone_control' )->value(); + + } + function register_color_control( $wp_customize, $palette_item ) { $setting_key = $this->section_key . $palette_item['slug']; @@ -134,14 +168,14 @@ function register_color_control( $wp_customize, $palette_item ) { $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', ) ); @@ -160,6 +194,8 @@ function register_color_control( $wp_customize, $palette_item ) { function handle_customize_save_after( $wp_customize ) { //update the palette based on the controls $this->update_user_color_palette( $wp_customize ); + //save the user selection for duotone control + $this->enable_duotone = $wp_customize->get_setting( 'duotone_control' )->value(); // 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. @@ -176,7 +212,7 @@ function handle_customize_save_after( $wp_customize ) { $user_theme_json_post_content->isGlobalStylesUserThemeJSON = true; // 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' ) ) { + if ( property_exists( $user_theme_json_post_content, 'settings' ) && is_object( $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 ); } @@ -189,30 +225,35 @@ function handle_customize_save_after( $wp_customize ) { $this->user_color_palette ); - $primary_key = array_search('primary', array_column($this->user_color_palette, 'slug')); - $background_key = array_search('background', array_column($this->user_color_palette, 'slug')); + $primary_key = array_search( 'primary', array_column( $this->user_color_palette, 'slug' ), true ); + $background_key = array_search( 'background', array_column( $this->user_color_palette, 'slug' ), true ); - if ( $this->theme_duotone_settings && $primary_key !== null && $background_key !== null ) { + //we set all blocks to use no duotone filter when the checkbox is unchecked + if ( ! $this->enable_duotone ) { + $this->update_blocks_duotone_filter( 'none', $user_theme_json_post_content ); + } + + if ( $this->theme_duotone_settings && -1 < $primary_key && -1 < $background_key && $this->enable_duotone ) { - $primary = $this->user_color_palette[$primary_key]; - $background = $this->user_color_palette[$background_key]; + $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]; + 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" - ) + '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( + $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 ) @@ -231,6 +272,7 @@ function handle_customize_save_after( $wp_customize ) { } } } + $this->update_blocks_duotone_filter( $custom_duotone_filter_variable, $user_theme_json_post_content ); } } @@ -243,6 +285,23 @@ function handle_customize_save_after( $wp_customize ) { delete_transient( 'gutenberg_global_styles_' . get_stylesheet() ); } + function update_blocks_duotone_filter( $filter, $user_theme_json_post_content ) { + + //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' ), + $filter + ); + } + } + } + + } function check_if_colors_are_default() { foreach ( $this->user_color_palette as $palette_color ) { @@ -252,6 +311,7 @@ function check_if_colors_are_default() { } return true; } + } new GlobalStylesColorCustomizer;