From 9e49d27662e8451947cffb738dd9b9749ea43528 Mon Sep 17 00:00:00 2001 From: Maggie Date: Mon, 28 Jun 2021 15:39:57 +0200 Subject: [PATCH] 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 Co-authored-by: Jason Crist --- blockbase/functions.php | 3 +- blockbase/inc/color-customization.css | 48 +++++++++++ blockbase/inc/color-palettes-controls.js | 11 +++ ...preview.js => customize-colors-preview.js} | 0 blockbase/inc/wp-customize-color-palettes.php | 84 +++++++++++++++++++ ...ng.php => wp-customize-color-settings.php} | 0 ...tomization.php => wp-customize-colors.php} | 21 ++--- .../inc/wp-customize-palette-control.php | 44 ++++++++++ blockbase/rebuild-child-themes.sh | 2 +- blockbase/theme.json | 35 ++++++++ mayland-blocks/theme.json | 35 ++++++++ quadrat/assets/theme.css | 5 +- quadrat/child-theme.json | 56 +++++++++++++ quadrat/theme.json | 56 +++++++++++++ seedlet-blocks/theme.json | 35 ++++++++ 15 files changed, 420 insertions(+), 15 deletions(-) create mode 100644 blockbase/inc/color-customization.css create mode 100644 blockbase/inc/color-palettes-controls.js rename blockbase/inc/{customizer-preview.js => customize-colors-preview.js} (100%) create mode 100644 blockbase/inc/wp-customize-color-palettes.php rename blockbase/inc/{wp-customize-global-styles-setting.php => wp-customize-color-settings.php} (100%) rename blockbase/inc/{customization.php => wp-customize-colors.php} (88%) create mode 100644 blockbase/inc/wp-customize-palette-control.php diff --git a/blockbase/functions.php b/blockbase/functions.php index 1ace10fa0c..a4661b8155 100644 --- a/blockbase/functions.php +++ b/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'; diff --git a/blockbase/inc/color-customization.css b/blockbase/inc/color-customization.css new file mode 100644 index 0000000000..f7eeecad4f --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/blockbase/inc/color-palettes-controls.js b/blockbase/inc/color-palettes-controls.js new file mode 100644 index 0000000000..4c390464eb --- /dev/null +++ b/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 ); + } ); + } ); +} ); diff --git a/blockbase/inc/customizer-preview.js b/blockbase/inc/customize-colors-preview.js similarity index 100% rename from blockbase/inc/customizer-preview.js rename to blockbase/inc/customize-colors-preview.js diff --git a/blockbase/inc/wp-customize-color-palettes.php b/blockbase/inc/wp-customize-color-palettes.php new file mode 100644 index 0000000000..68fa9a224f --- /dev/null +++ b/blockbase/inc/wp-customize-color-palettes.php @@ -0,0 +1,84 @@ +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; diff --git a/blockbase/inc/wp-customize-global-styles-setting.php b/blockbase/inc/wp-customize-color-settings.php similarity index 100% rename from blockbase/inc/wp-customize-global-styles-setting.php rename to blockbase/inc/wp-customize-color-settings.php diff --git a/blockbase/inc/customization.php b/blockbase/inc/wp-customize-colors.php similarity index 88% rename from blockbase/inc/customization.php rename to blockbase/inc/wp-customize-colors.php index d75d42d4aa..af1d873679 100644 --- a/blockbase/inc/customization.php +++ b/blockbase/inc/wp-customize-colors.php @@ -1,8 +1,8 @@ user_color_palette ); } @@ -61,13 +61,15 @@ 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' => __( 'Color Customization for Quadrat' ), - 'title' => __( 'Colors' ), + 'description' => sprintf( __( 'Color Customization for %1$s', 'blockbase' ), $theme->name ), + 'title' => __( 'Colors', 'blockbase' ), ) ); @@ -85,7 +87,6 @@ function register_color_control( $wp_customize, $palette_item, $section_key ) { array( 'default' => $palette_item['default'], 'sanitize_callback' => 'sanitize_hex_color', - 'slug' => $palette_item['slug'], 'user_value' => $palette_item['color'], ) ); @@ -107,8 +108,8 @@ 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 ( 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 @@ function handle_customize_save_after( $manager ) { } // 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; diff --git a/blockbase/inc/wp-customize-palette-control.php b/blockbase/inc/wp-customize-palette-control.php new file mode 100644 index 0000000000..3afc3dc737 --- /dev/null +++ b/blockbase/inc/wp-customize-palette-control.php @@ -0,0 +1,44 @@ + + +