From d854e859b52a65e94068ffb01d0cf72c740383a5 Mon Sep 17 00:00:00 2001 From: James Rosado Date: Tue, 30 Jun 2020 14:05:14 -0400 Subject: [PATCH 1/5] Adjusted background controls --- src/includes/class-boldgrid-framework-api.php | 30 +++++++++---------- .../configs/customizer/controls.config.php | 2 +- ...ldgrid-framework-customizer-background.php | 30 +++++++++++++++---- 3 files changed, 41 insertions(+), 21 deletions(-) diff --git a/src/includes/class-boldgrid-framework-api.php b/src/includes/class-boldgrid-framework-api.php index be5276b1b..fbf77349b 100644 --- a/src/includes/class-boldgrid-framework-api.php +++ b/src/includes/class-boldgrid-framework-api.php @@ -552,13 +552,13 @@ public function body_classes( $classes ) { $classes[] = sanitize_html_class( $layout ); } + $background_theme_mod = 'boldgrid_background_color'; + $background_image = get_theme_mod( 'background_image' ); + // Add class for parallax background option. if ( 'parallax' === get_theme_mod( 'background_attachment' ) ) { $classes[] = 'boldgrid-customizer-parallax'; } else { - $background_theme_mod = 'boldgrid_background_color'; - $background_image = get_theme_mod( 'background_image' ); - if ( 'pattern' !== get_theme_mod( 'boldgrid_background_type' ) && ! empty( $background_image ) && @@ -566,19 +566,19 @@ public function body_classes( $classes ) { ) { $background_theme_mod = 'bgtfw_background_overlay_color'; } + } - $background_color = get_theme_mod( $background_theme_mod ); - $background_color = explode( ':', $background_color ); - $background_color = array_shift( $background_color ); - - if ( ! empty( $background_color ) ) { - if ( strpos( $background_color, 'neutral' ) !== false ) { - $classes[] = $background_color . '-background-color'; - $classes[] = $background_color . '-text-default'; - } else { - $classes[] = str_replace( '-', '', $background_color ) . '-background-color'; - $classes[] = str_replace( '-', '', $background_color ) . '-text-default'; - } + $background_color = get_theme_mod( $background_theme_mod ); + $background_color = explode( ':', $background_color ); + $background_color = array_shift( $background_color ); + + if ( ! empty( $background_color ) ) { + if ( strpos( $background_color, 'neutral' ) !== false ) { + $classes[] = $background_color . '-background-color'; + $classes[] = $background_color . '-text-default'; + } else { + $classes[] = str_replace( '-', '', $background_color ) . '-background-color'; + $classes[] = str_replace( '-', '', $background_color ) . '-text-default'; } } diff --git a/src/includes/configs/customizer/controls.config.php b/src/includes/configs/customizer/controls.config.php index 63466b418..188db7b71 100644 --- a/src/includes/configs/customizer/controls.config.php +++ b/src/includes/configs/customizer/controls.config.php @@ -57,7 +57,7 @@ 'label' => __( 'Background Image Size', 'bgtfw' ), 'section' => 'background_image', 'settings' => 'boldgrid_background_image_size', - 'transport' => 'postMessage', + 'transport' => 'refresh', 'default' => 'cover', 'priority' => 15, 'choices' => [ diff --git a/src/includes/customizer/class-boldgrid-framework-customizer-background.php b/src/includes/customizer/class-boldgrid-framework-customizer-background.php index d0c5b81b0..f52018894 100644 --- a/src/includes/customizer/class-boldgrid-framework-customizer-background.php +++ b/src/includes/customizer/class-boldgrid-framework-customizer-background.php @@ -240,14 +240,14 @@ public function add_patterns( $wp_customize ) { * @since 1.0.0 */ public function create_background_styles() { - $theme_mods = get_theme_mods(); + $theme_mods = get_theme_mods(); $background_options = $this->configs['customizer-options']['background']; - $bg_image = get_theme_mod( 'background_image', $background_options['defaults']['background_image'] ); - $bg_type = get_theme_mod( 'boldgrid_background_type' ); - $bg_size = get_theme_mod( 'boldgrid_background_image_size' ); + $bg_image = get_theme_mod( 'background_image', $background_options['defaults']['background_image'] ); + $bg_type = get_theme_mod( 'boldgrid_background_type' ); + $bg_size = get_theme_mod( 'boldgrid_background_image_size' ); $bg_attach = get_theme_mod( 'background_attachment', $background_options['defaults']['background_attachment'] ); - + $bg_repeat = get_theme_mod( 'background_repeat', $background_options['defaults']['background_repeat'] ); $css = ''; if ( 'pattern' === $bg_type ) { @@ -273,6 +273,22 @@ public function create_background_styles() { 'background-repeat: no-repeat;' . 'background-attachment: fixed;' . '}'; + } else if ( 'fixed' === $bg_attach ) { + $css = 'body.custom-background {' . + 'background-attachment: fixed;'; + + if ( $bg_image ) { + $css .= 'background-image: url("' . esc_attr( $bg_image ) . '");'; + } + + if ( $bg_size ) { + $css .= 'background-size: ' . esc_attr( $bg_size ) . ';'; + } + + if ( $bg_repeat ) { + $css .= 'background-repeat: ' . esc_attr( $bg_repeat ) . ';'; + } + } else { $css .= 'body.custom-background {'; @@ -284,6 +300,10 @@ public function create_background_styles() { $css .= 'background-size: ' . esc_attr( $bg_size ) . ';'; } + if ( $bg_repeat ) { + $css .= 'background-repeat: ' . esc_attr( $bg_repeat ) . ';'; + } + $css .= '}'; } From f54d3ea4e6cbef8e2cb704fd25a1621f4e9a0676 Mon Sep 17 00:00:00 2001 From: James Rosado Date: Tue, 30 Jun 2020 14:20:15 -0400 Subject: [PATCH 2/5] coding standards compliance adjustments --- ...ldgrid-framework-customizer-background.php | 103 +++++++++--------- 1 file changed, 54 insertions(+), 49 deletions(-) diff --git a/src/includes/customizer/class-boldgrid-framework-customizer-background.php b/src/includes/customizer/class-boldgrid-framework-customizer-background.php index f52018894..a4f1df283 100644 --- a/src/includes/customizer/class-boldgrid-framework-customizer-background.php +++ b/src/includes/customizer/class-boldgrid-framework-customizer-background.php @@ -1,8 +1,8 @@ configs['framework']['admin_asset_dir'] . 'json/patterns.json', [ 'sslverify' => false ] ); + $request = wp_remote_get( $this->configs['framework']['admin_asset_dir'] . 'json/patterns.json', array( 'sslverify' => false ) ); // Check for errors with $request. if ( is_wp_error( $request ) ) { @@ -81,7 +81,7 @@ public function get_pattern_files() { $contents = json_decode( wp_remote_retrieve_body( $request ) ); - $patterns = []; + $patterns = array(); foreach ( $contents->patterns as $pattern ) { $patterns[ $pattern->id ] = $pattern->formattedName; // @codingStandardsIgnoreLine } @@ -97,7 +97,7 @@ public function get_pattern_files() { * @since 1.3.1 */ public function pre_sanitize_attachment( $value ) { - if ( in_array( $value, array( 'scroll', 'fixed', 'parallax' ) ) ) { + if ( in_array( $value, array( 'scroll', 'fixed', 'parallax' ), true ) ) { $this->sanitized_attachment_value = $value; } } @@ -134,15 +134,15 @@ public function boldgrid_background_attachment( $wp_customize ) { $wp_customize->add_control( 'boldgrid_background_attachment', array( - 'label' => __( 'Background Effects', 'bgtfw' ), - 'section' => 'background_image', + 'label' => __( 'Background Effects', 'bgtfw' ), + 'section' => 'background_image', 'settings' => 'background_attachment', 'priority' => 14, - 'type' => 'radio', - 'choices' => array( + 'type' => 'radio', + 'choices' => array( 'parallax' => __( 'Parallax', 'bgtfw' ), - 'scroll' => __( 'Scroll', 'bgtfw' ), - 'fixed' => __( 'Fixed', 'bgtfw' ), + 'scroll' => __( 'Scroll', 'bgtfw' ), + 'fixed' => __( 'Fixed', 'bgtfw' ), ), ) ); @@ -155,14 +155,14 @@ public function boldgrid_background_attachment( $wp_customize ) { * @since 1.0.0 */ public function rearrange_menu( $wp_customize ) { - $bg_attachment = $wp_customize->get_control( 'background_attachment' ); - $bg_attachment->label = __( 'Background Effects', 'bgtfw' ); - $bg_attachment->choices = $bg_attachment->choices + [ 'parallax' => 'Parallax' ]; + $bg_attachment = $wp_customize->get_control( 'background_attachment' ); + $bg_attachment->label = __( 'Background Effects', 'bgtfw' ); + $bg_attachment->choices = $bg_attachment->choices + array( 'parallax' => 'Parallax' ); $bg_attachment->priority = 14; $wp_customize->get_control( 'boldgrid_background_image_size' )->priority = 15; - $wp_customize->get_control( 'background_repeat' )->priority = 18; - $wp_customize->get_section( 'background_image' )->title = __( 'Background', 'bgtfw' ); + $wp_customize->get_control( 'background_repeat' )->priority = 18; + $wp_customize->get_section( 'background_image' )->title = __( 'Background', 'bgtfw' ); $wp_customize->remove_control( 'background_color' ); return $wp_customize; @@ -186,7 +186,7 @@ public static function get_default_pattern_mod( $configs ) { } /** - * Add controls to handle the background pattern + * Add controls to handle the background pattern. * * @since 1.0.0 * @param array $wp_customize WordPress Customizer Object. @@ -197,10 +197,10 @@ public function add_patterns( $wp_customize ) { $wp_customize->add_setting( 'boldgrid_background_pattern', array( - 'default' => self::get_default_pattern_mod( $this->configs ), - 'type' => 'theme_mod', - 'capability' => 'edit_theme_options', - 'transport' => 'postMessage', + 'default' => self::get_default_pattern_mod( $this->configs ), + 'type' => 'theme_mod', + 'capability' => 'edit_theme_options', + 'transport' => 'postMessage', 'sanitize_callback' => function( $value ) { if ( empty( $value ) || ! is_string( $value ) ) { return ''; @@ -223,19 +223,19 @@ public function add_patterns( $wp_customize ) { new Boldgrid_Framework_Control_Pattern( $wp_customize, 'boldgrid_background_pattern', - [ - 'label' => __( 'Pattern', 'bgtfw' ), - 'section' => 'background_image', + array( + 'label' => __( 'Pattern', 'bgtfw' ), + 'section' => 'background_image', 'settings' => 'boldgrid_background_pattern', 'priority' => 3, - 'choices' => $patterns, - ] + 'choices' => $patterns, + ) ) ); } /** - * Add controls to hand the background pattern + * Add controls to hand the background pattern. * * @since 1.0.0 */ @@ -248,7 +248,7 @@ public function create_background_styles() { $bg_size = get_theme_mod( 'boldgrid_background_image_size' ); $bg_attach = get_theme_mod( 'background_attachment', $background_options['defaults']['background_attachment'] ); $bg_repeat = get_theme_mod( 'background_repeat', $background_options['defaults']['background_repeat'] ); - $css = ''; + $css = ''; if ( 'pattern' === $bg_type ) { $bg_pattern = ! empty( $theme_mods['boldgrid_background_pattern'] ) ? $theme_mods['boldgrid_background_pattern'] : 'none'; @@ -268,12 +268,12 @@ public function create_background_styles() { // Sets a "parallaxy" bg if JS doesn't load, and minimize flickers. $css = 'body.custom-background {' . - 'background-image:' . 'url("' . esc_attr( $bg_image ) . '");' . + 'background-image: url("' . esc_attr( $bg_image ) . '");' . 'background-size: cover;' . 'background-repeat: no-repeat;' . 'background-attachment: fixed;' . '}'; - } else if ( 'fixed' === $bg_attach ) { + } elseif ( 'fixed' === $bg_attach ) { $css = 'body.custom-background {' . 'background-attachment: fixed;'; @@ -288,7 +288,6 @@ public function create_background_styles() { if ( $bg_repeat ) { $css .= 'background-repeat: ' . esc_attr( $bg_repeat ) . ';'; } - } else { $css .= 'body.custom-background {'; @@ -311,10 +310,13 @@ public function create_background_styles() { } if ( ! empty( $css ) ) { - add_filter( 'body_class', function( $classes ) { - $classes[] = 'custom-background'; - return $classes; - } ); + add_filter( + 'body_class', + function( $classes ) { + $classes[] = 'custom-background'; + return $classes; + } + ); } return $css; @@ -333,22 +335,22 @@ public function create_overlay_css( $image ) { // Get the related theme mods. $enabled = get_theme_mod( 'bgtfw_background_overlay', $controls['bgtfw_background_overlay']['default'] ); - $color = get_theme_mod( 'bgtfw_background_overlay_color', $controls['bgtfw_background_overlay_color']['default'] ); - $alpha = get_theme_mod( 'bgtfw_background_overlay_alpha', $controls['bgtfw_background_overlay_alpha']['default'] ); - $type = get_theme_mod( 'bgtfw_background_overlay_type', $controls['bgtfw_background_overlay_type']['default'] ); + $color = get_theme_mod( 'bgtfw_background_overlay_color', $controls['bgtfw_background_overlay_color']['default'] ); + $alpha = get_theme_mod( 'bgtfw_background_overlay_alpha', $controls['bgtfw_background_overlay_alpha']['default'] ); + $type = get_theme_mod( 'bgtfw_background_overlay_type', $controls['bgtfw_background_overlay_type']['default'] ); $rule = ''; if ( $enabled && $color && $alpha && $type ) { // Create an rgba given palette color and alpha. - $color = explode( ':', $color ); - $color = array_pop( $color ); - $color_obj = ariColor::newColor( $color ); + $color = explode( ':', $color ); + $color = array_pop( $color ); + $color_obj = ariColor::newColor( $color ); $color_obj->alpha = $alpha; - $new_color = esc_attr( $color_obj->toCSS( 'rgba' ) ); + $new_color = esc_attr( $color_obj->toCSS( 'rgba' ) ); - $rule = "@supports(background-blend-mode: $type) { body.custom-background, body.custom-background > [id^=\"jarallax-container\"] > div { background-color: $new_color !important; background-blend-mode: $type; } }"; + $rule = "@supports(background-blend-mode: $type) { body.custom-background, body.custom-background > [id^=\"jarallax-container\"] > div { background-color: $new_color !important; background-blend-mode: $type; } }"; $rule .= "@supports not (background-blend-mode: $type) { body.custom-background, body.custom-background > [id^=\"jarallax-container\"] > div { background-color: $color !important; opacity: $alpha; } }"; } @@ -387,18 +389,21 @@ public function add_editor_styles( $css ) { /** * Replace the core background image control with one that supports cropping. * - * Functionality From: https://wordpress.org/plugins/background-image-cropper/ + * Functionality From: https://wordpress.org/plugins/background-image-cropper/ . * * @param WP_Customize_Manager $wp_customize Customizer manager object. * @since 1.0.0 */ public function add_background_crop( $wp_customize ) { // Include class for footer customization. - require_once( $this->configs['framework']['includes_dir'] . 'control/class-boldgrid-framework-control-background-crop.php' ); + require_once $this->configs['framework']['includes_dir'] . 'control/class-boldgrid-framework-control-background-crop.php'; - wp_register_script( 'boldgrid-background-image-cropper', + wp_register_script( + 'boldgrid-background-image-cropper', $this->configs['framework']['js_dir'] . 'customizer/background-crop.js', - array( 'jquery', 'customize-controls' ) + array( 'jquery', 'customize-controls' ), + $this->configs['version'], + true ); $wp_customize->register_control_type( 'Boldgrid_Framework_Background_Crop' ); From 0d9c9a391d47a54fff9c9fdf6d6506629a5729d1 Mon Sep 17 00:00:00 2001 From: James Rosado Date: Tue, 30 Jun 2020 14:20:37 -0400 Subject: [PATCH 3/5] coding standards compliance changes js --- .../controls/bgtfw-background-control.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/assets/js/customizer/controls/bgtfw-background-control.js b/src/assets/js/customizer/controls/bgtfw-background-control.js index 77e95507e..cb1f07793 100644 --- a/src/assets/js/customizer/controls/bgtfw-background-control.js +++ b/src/assets/js/customizer/controls/bgtfw-background-control.js @@ -7,16 +7,6 @@ export default function() { 'use strict'; - $( function() { - - /** - * @todo This needs to be refactored. All these events should not be each time - * preview iframe is refreshed. - */ - $( window ).on( 'boldgrid_customizer_refresh', init ); - loadSection(); - } ); - var init = function() { bindColors(); @@ -143,6 +133,7 @@ export default function() { }; var appendHeadStyles = function( to ) { + var style = ''; if ( ! to ) { to = api( 'boldgrid_background_color' )(); } @@ -150,7 +141,6 @@ export default function() { $( '#customizer_boldgrid_background_color' ).remove(); if ( to ) { - var style = ''; style += ''; @@ -276,4 +266,14 @@ export default function() { api( ...ids, ( ...controls ) => controls.map( control => control.bind( validateSelectionSet ) ) ); }; + + $( function() { + + /** + * @todo This needs to be refactored. All these events should not be each time + * preview iframe is refreshed. + */ + $( window ).on( 'boldgrid_customizer_refresh', init ); + loadSection(); + } ); } From 7edffd026e2431639c8afabca53f9e506347e3e6 Mon Sep 17 00:00:00 2001 From: James Rosado Date: Tue, 30 Jun 2020 14:43:42 -0400 Subject: [PATCH 4/5] add changes to readme --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 4a2ec2181..1cf46450d 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,10 @@ user guide for more information. ## Changelog ## +### 2.2.1 ### +* Bug fix: Fixed Background Image doesn't work [#193](https://github.com/BoldGrid/boldgrid-theme-framework/issues/193) +* Bug fix: Incorrect body text color when setting background image effect to "Parallax" [#220](https://github.com/BoldGrid/boldgrid-theme-framework/issues/220) + ### 2.2.0 ### * New Feature: Added Control to change the number of products shown per page on shop catalog [#210](https://github.com/BoldGrid/boldgrid-theme-framework/issues/210) * New Feature: Added Featured Image Control to single blog posts [#192](https://github.com/BoldGrid/boldgrid-theme-framework/issues/192) From fb235ed443ba5ed90fbaa3106fa271867c5d87e7 Mon Sep 17 00:00:00 2001 From: James Rosado Date: Tue, 30 Jun 2020 22:46:30 -0400 Subject: [PATCH 5/5] Fixes #89 --- src/assets/js/customizer/base-controls.js | 2 + .../controls/bgtfw-header-background.js | 138 ++++++++++++++++++ src/assets/js/customizer/customizer.js | 9 -- .../configs/customizer/controls.config.php | 32 ++-- 4 files changed, 156 insertions(+), 25 deletions(-) create mode 100644 src/assets/js/customizer/controls/bgtfw-header-background.js diff --git a/src/assets/js/customizer/base-controls.js b/src/assets/js/customizer/base-controls.js index 4621986fa..ae72254d6 100644 --- a/src/assets/js/customizer/base-controls.js +++ b/src/assets/js/customizer/base-controls.js @@ -23,6 +23,7 @@ import bgtfwSection from './controls/bgtfw-section'; import bgtfwNotifications from './controls/bgtfw-notifications'; import bgtfwBackgroundControls from './controls/bgtfw-background-control'; import bgtfwEditPane from './controls/edit/pane'; +import { HeaderBackground as BgtfwHeaderBackground } from './controls/bgtfw-header-background'; let devices = new Devices(); devices.init(); @@ -43,6 +44,7 @@ WidgetSectionUpdate(); new HamburgerControlToggle(); new HoverBackgroundToggle(); new MenuLocations(); + new BgtfwHeaderBackground(); bgtfwHeaderTabs.init(); wp.customize.bind( 'pane-contents-reflowed', bgtfwPaneReflow ); diff --git a/src/assets/js/customizer/controls/bgtfw-header-background.js b/src/assets/js/customizer/controls/bgtfw-header-background.js new file mode 100644 index 000000000..854675743 --- /dev/null +++ b/src/assets/js/customizer/controls/bgtfw-header-background.js @@ -0,0 +1,138 @@ +const api = wp.customize; + +/** + * HeaderBackground Class + * + * Helps with Header Background controls in customizer. + * + * @since 2.2.1 + */ +export class HeaderBackground { + + /** + * Constructor. + * + * @since 2.2.1 + */ + constructor() { + var self = this; + + self.imageVideoControls = [ + 'header_image', + 'header_video', + 'external_header_video' + ]; + self.headerOverlayControls = [ + 'bgtfw_header_overlay', + 'bgtfw_header_overlay_color', + 'bgtfw_header_overlay_alpha' + ]; + + api.bind( 'ready', () => this.ready( self ) ); + } + + /** + * Ready. + * + * This method fires when the wp.customize is ready. + * + * @since 2.2.1 + * + * @param {HeaderBackground} self This Object. + */ + ready( self ) { + var sectionId = api.control( 'bgtfw_header_overlay' ).section(); + + api.previewer.bind( 'ready', function() { + if ( self.hasHeaderImage() || self.hasHeaderVideo() ) { + self.activateOverlayControls(); + } else { + self.deactivateOverlayControls(); + } + } ); + api.section( sectionId, function( section ) { + section.expanded.bind( function() { + if ( self.hasHeaderImage() || self.hasHeaderVideo() ) { + self.activateOverlayControls(); + } else { + self.deactivateOverlayControls(); + } + } ); + } ); + + $.each( self.imageVideoControls, function() { + api( this, function( value ) { + value.bind( function() { + if ( self.hasHeaderImage() || self.hasHeaderVideo() ) { + self.activateOverlayControls(); + } else { + self.deactivateOverlayControls(); + } + } ); + } ); + } ); + } + + /** + * Has Header Image + * + * @since 2.2.1 + * + * @return {bool} Returns true if there is a header image set. + */ + hasHeaderImage() { + var headerImage = api( 'header_image' )(); + + if ( headerImage && 'remove-header' !== headerImage ) { + return true; + } + + return false; + } + + /** + * Has Header Video. + * + * @since 2.2.1 + * + * @return {bool} Returns true if there is a header video set. + */ + hasHeaderVideo() { + var headerVideo = api( 'header_video' )(), + externalVideo = api( 'external_header_video' )(); + + return headerVideo || externalVideo ? true : false; + } + + /** + * Activate Overlay Controls. + * + * Activates Header Overlay and related controls. + * + * @since 2.2.1 + * + */ + activateOverlayControls() { + api.control( 'bgtfw_header_overlay' ).activate(); + if ( api( 'bgtfw_header_overlay' )() ) { + api.control( 'bgtfw_header_overlay_color' ).activate(); + api.control( 'bgtfw_header_overlay_alpha' ).activate(); + } else { + api.control( 'bgtfw_header_overlay_color' ).deactivate(); + api.control( 'bgtfw_header_overlay_alpha' ).deactivate(); + } + } + + /** + * Deactivate Overlay Controls. + * + * Deactivates Header Overlay and related controls. + * + * @since 2.2.1 + */ + deactivateOverlayControls() { + api.control( 'bgtfw_header_overlay' ).deactivate(); + api.control( 'bgtfw_header_overlay_color' ).deactivate(); + api.control( 'bgtfw_header_overlay_alpha' ).deactivate(); + } +} diff --git a/src/assets/js/customizer/customizer.js b/src/assets/js/customizer/customizer.js index ad23e0e4d..d928df98a 100644 --- a/src/assets/js/customizer/customizer.js +++ b/src/assets/js/customizer/customizer.js @@ -464,15 +464,6 @@ BOLDGRID.Customizer.Util.getInitialPalettes = function( option ) { $( '.site-description' ).addClass( window._typographyClasses ); - /** - * There's a better way to do this, but I dunno what it is. This - * works for now. This will just trigger the preview pane to reload - * the same page after a user changes their header videos. - */ - api( 'external_header_video', 'header_video', function( ...args ) { - args.map( ( control ) => control.bind( () => api.preview.send( 'url', window.location.href ) ) ); - } ); - /** * Recalculate layouts on font changes. * diff --git a/src/includes/configs/customizer/controls.config.php b/src/includes/configs/customizer/controls.config.php index 188db7b71..a2225daaa 100644 --- a/src/includes/configs/customizer/controls.config.php +++ b/src/includes/configs/customizer/controls.config.php @@ -1675,28 +1675,28 @@ ), ), 'bgtfw_header_overlay_color' => array( - 'type' => 'bgtfw-palette-selector', - 'transport' => 'postMessage', - 'settings' => 'bgtfw_header_overlay_color', - 'label' => esc_attr__( 'Overlay Color', 'bgtfw' ), - 'section' => 'header_image', - 'priority' => 25, - 'default' => 'color-1', - 'choices' => array( + 'type' => 'bgtfw-palette-selector', + 'transport' => 'postMessage', + 'settings' => 'bgtfw_header_overlay_color', + 'label' => esc_attr__( 'Overlay Color', 'bgtfw' ), + 'section' => 'header_image', + 'priority' => 25, + 'default' => 'color-1', + 'choices' => array( 'colors' => $bgtfw_formatted_palette, 'size' => $bgtfw_palette->get_palette_size( $bgtfw_formatted_palette ), ), 'sanitize_callback' => array( $bgtfw_color_sanitize, 'sanitize_palette_selector' ), ), 'bgtfw_header_overlay_alpha' => array( - 'type' => 'slider', - 'transport' => 'postMessage', - 'settings' => 'bgtfw_header_overlay_alpha', - 'label' => esc_attr__( 'Overlay Opacity', 'bgtfw' ), - 'section' => 'header_image', - 'priority' => 30, - 'default' => '0.70', - 'choices' => array( + 'type' => 'slider', + 'transport' => 'postMessage', + 'settings' => 'bgtfw_header_overlay_alpha', + 'label' => esc_attr__( 'Overlay Opacity', 'bgtfw' ), + 'section' => 'header_image', + 'priority' => 30, + 'default' => '0.70', + 'choices' => array( 'min' => '0', 'max' => '1', 'step' => '.01',