Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

blockbase checkbox for duotone #4948

Closed
wants to merge 9 commits into from
Closed

blockbase checkbox for duotone #4948

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f2eea61
add a checkbox to disable duotone for blocks
MaggieCabrera Oct 29, 2021
cac1f74
remove filter on preview
MaggieCabrera Oct 29, 2021
9fcfa64
fix undefined selector error
MaggieCabrera Oct 29, 2021
39f10ab
save duotone control and toggle function for the preview
MaggieCabrera Nov 3, 2021
8067475
fix preview when changing color palettes after having disabled the fi…
MaggieCabrera Nov 3, 2021
c3476f6
fix condition to apply duotone
MaggieCabrera Nov 4, 2021
7851148
Apply suggestions from code review
scruffian Nov 4, 2021
3864d86
text change, used wp sanitize callback
MaggieCabrera Nov 5, 2021
813d146
fixed error when no duotone is defined
MaggieCabrera Dec 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 58 additions & 1 deletion blockbase/inc/customizer/wp-customize-colors-preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
var enabledDuotone = false;

if ( window.duotoneVars ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this need to be window.duotoneVars? Couldn't it just be duotoneVars?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it didn't work that way!

Uncaught ReferenceError: duotoneVars is not defined

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you need to check the type of duotoneVars:

if ( typeof duotoneVars !== 'undefined' ) {

but I suppose your way works too

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 ) => {
Expand Down Expand Up @@ -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 ) => {
Expand All @@ -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( ' ' ) );
Expand All @@ -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: [] };
Expand Down
100 changes: 80 additions & 20 deletions blockbase/inc/customizer/wp-customize-colors.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
)
);
}
}

Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -127,21 +137,45 @@ 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'];

$global_styles_setting = new WP_Customize_Global_Styles_Setting(
$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',
)
);

Expand All @@ -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.
Expand All @@ -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 );
}
Expand All @@ -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 )
Expand All @@ -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 );
}
}

Expand All @@ -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 ) {
Expand All @@ -252,6 +311,7 @@ function check_if_colors_are_default() {
}
return true;
}

}

new GlobalStylesColorCustomizer;