Branch 2.16.1 (#716)

* resolves 711 (#712)

* Issue 706 (#707)

* fix show / hide logic for headers

* add filters to Crio Premium URLs

* filter premium urls

* update version

* fix submenu background colors

* adjust menu color previews

* resolves #713

* update readmes

* more fixes for dropdown menus

* Change applying palette changes to opacity

* fix syntax error

* fix border

* hamburger menu use color var

* fix read-more control selector

* fix colorVar

* fix css color variable hamburger menus

* fix link color hover

* fix whitespace

* fix invalid color class

README.md

@@ -36,6 +36,12 @@ user guide for more information.
 
 ## Changelog ##
 
+### 2.16.1 ###
+* Bug Fix: Hover Underline Reveal effect for Menus is broken [#711](https://github.com/BoldGrid/boldgrid-theme-framework/issues/711)
+* Bug Fix: Allow filtering of Premium URL's in theme [#706](https://github.com/BoldGrid/boldgrid-theme-framework/issues/706)
+* Bug Fix: Fix submenu background colors not changing with palette
+* Bug Fix: Hover Effect for Links does not respect Customizer setting [#713](https://github.com/BoldGrid/boldgrid-theme-framework/issues/713)
+
 ### 2.16.0 ###
 * New Feature: Change translucent overlays with palette changes [#554](https://github.com/BoldGrid/boldgrid-theme-framework/issues/554)
 * New Feature: Make menu underlines and menu hovers match styles [#586](https://github.com/BoldGrid/boldgrid-theme-framework/issues/586)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "boldgrid-theme-framework",
-	"version": "2.16.0",
+	"version": "2.16.1",
 	"description": "BoldGrid Theme Framework",
 	"main": "index.js",
 	"engines": {

src/assets/js/customizer/color/preview.js

@@ -436,8 +436,8 @@ export class Preview  {
 
 		css += '@media (min-width: 768px) {';
 		css += `#${location}-menu.sm-clean ul {background-color: ${subcolorVariable};}`;
-		css += `#${location}-menu.sm-clean ul a, #${location}-menu.sm-clean ul a:hover, #${location}-menu.sm-clean ul a:focus, #${location}-menu.sm-clean ul a:active, #${location}-menu.sm-clean ul a.highlighted, #${location}-menu.sm-clean span.scroll-up, #${location}-menu.sm-clean span.scroll-down, #${location}-menu.sm-clean span.scroll-up:hover, #${location}-menu.sm-clean span.scroll-down:hover {background-color: ${subalpha};}`;
-		css += `#${location}-menu.sm-clean ul { border: 1px solid ${subalpha};}`;
+		css += `#${location}-menu.sm-clean ul a, #${location}-menu.sm-clean ul a:hover, #${location}-menu.sm-clean ul a:focus, #${location}-menu.sm-clean ul a:active, #${location}-menu.sm-clean ul a.highlighted, #${location}-menu.sm-clean span.scroll-up, #${location}-menu.sm-clean span.scroll-down, #${location}-menu.sm-clean span.scroll-up:hover, #${location}-menu.sm-clean span.scroll-down:hover {background-color: ${subcolorVariable};}`;
+		css += `#${location}-menu.sm-clean ul { border: 1px solid ${subcolorVariable};}`;
 		css += `#${location}-menu.sm-clean > li > ul:before, #${location}-menu.sm-clean > li > ul:after { border-color: transparent transparent ${subcolorVariable} transparent;}`;
 		css += '}';
 

src/assets/scss/boldgrid/navigation/_base.scss

@@ -729,7 +729,7 @@
 	}
 }
 
-li[class*="hvr-underline"] a:not( .button-primary):not(.button-secondary ) {
+li[class*="hvr-underline"]:not(.hvr-underline-reveal) a:not( .button-primary):not(.button-secondary ) {
 	transform: unset;
 	overflow: unset;
 	&:before {

src/boldgrid-theme-framework.php

@@ -3,7 +3,7 @@
  * Plugin Name: BoldGrid Theme Framework
  * Plugin URI: https://www.boldgrid.com/docs/configuration-file
  * Description: BoldGrid Theme Framework is a library that allows you to easily make BoldGrid themes. Please see our reference guide for more information: https://www.boldgrid.com/docs/configuration-file
- * Version: 2.16.0
+ * Version: 2.16.1
  * Author: BoldGrid.com <[email protected]>
  * Author URI: https://www.boldgrid.com/
  * Text Domain: bgtfw

src/includes/class-boldgrid-framework-api.php

@@ -397,6 +397,35 @@ public static function get_color_classes( $color, $properties ) {
 		return $classes;
 	}
 
+	/**
+	 * Get the rgb color from the palette.
+	 *
+	 * @since 2.16.1
+	 *
+	 * @param string $color_class Color class string ( e.g. 'color2' ).
+	 *
+	 * @return string $color_rgb RGB color string.
+	 */
+	public static function color_from_class( $color_class ) {
+		$palette_position = str_replace( 'color', '', $color_class );
+		$palette_position = str_replace( '-', '', $palette_position );
+
+		$color_palette = get_theme_mod( 'boldgrid_color_palette', array() );
+		if ( empty( $color_palette ) ) {
+			return;
+		}
+
+		$color_palette = json_decode( $color_palette, true );
+		$color_palette = $color_palette['state']['palettes'][ $color_palette['state']['active-palette'] ];
+
+		if ( 'neutral' === $palette_position ) {
+			return $color_palette['neutral-color'];
+		} else {
+			// If for some reason an invalid color class is passed, return the neutral color instead of an error.
+			return isset( $color_palette['colors'][ (int) $palette_position - 1 ] ) ? $color_palette['colors'][ (int) $palette_position - 1 ] : $color_palette['neutral-color'];
+		}
+	}
+
 	/**
 	 * Get background colors.
 	 *

src/includes/class-boldgrid-framework-links.php

@@ -135,13 +135,13 @@ public function get_styles( $prefix ) {
 
 			// Apply color as CSS variable.
 			list( $color_variable ) = explode( ':', $color );
+			$color = BoldGrid::color_from_class( $color_variable );
 			$color_variable = "var(--${color_variable})";
 
 			if ( empty( $color ) ) {
 				return $css;
 			}
 
-			$color = explode( ':', $color )[1];
 			$ari_color = ariColor::newColor( $color );
 			$lightness = min( $ari_color->lightness + $color_hover, 100 );
 			$lightness = max( $lightness, 0 );

src/includes/class-boldgrid-framework-sticky-header.php

@@ -82,7 +82,7 @@ public function get_styles() {
 						foreach ( $section['items'] as $k => $item ) {
 							if ( ! empty( $item['display'] ) ) {
 								foreach ( $item['display'] as $display ) {
-									if ( 'show' !== $display['display'] ) {
+									if ( 'hide' === $display['display'] ) {
 										$selectors[] = '.' . $item['uid'] . ' ' . $display['selector'];
 									}
 								}

src/includes/class-boldgrid-framework-styles.php

@@ -373,9 +373,10 @@ public function hamburgers_css( $css = '' ) {
 		foreach ( $menus as $location => $description ) {
 			$color = get_theme_mod( "bgtfw_menu_hamburger_{$location}_color" );
 			$color = explode( ':', $color );
+			$color_var = $color[0];
 			$color = array_pop( $color );
 			$location = str_replace( '_', '-', $location );
-			$css .= ".{$location}-menu-btn .hamburger-inner,.{$location}-menu-btn .hamburger-inner:before,.{$location}-menu-btn .hamburger-inner:after {background-color: {$color};}";
+			$css .= ".{$location}-menu-btn .hamburger-inner,.{$location}-menu-btn .hamburger-inner:before,.{$location}-menu-btn .hamburger-inner:after {background-color: var(--{$color_var});}";
 		}
 
 		return $css;
@@ -517,6 +518,7 @@ public function menu_css( $location ) {
 		$background_color = array_pop( $background_color );
 
 		$submenu_background_color = explode( ':', $submenu_background_color );
+		$submenu_background_class = $submenu_background_color[0];
 		$submenu_background_color = array_pop( $submenu_background_color );
 
 		$color_obj    = ariColor::newColor( $background_color );
@@ -536,10 +538,10 @@ public function menu_css( $location ) {
 
 		$subcolor_obj->alpha = 0.4;
 
-		$css .= "#{$location}-menu.sm-clean ul {background-color: {$submenu_background_color};}";
-		$css .= "#{$location}-menu.sm-clean ul a:not(.btn), #{$location}-menu.sm-clean ul a:not(.btn):hover, #{$location}-menu.sm-clean ul a:not(.btn):focus, #{$location}-menu.sm-clean ul a:not(.btn):active, #{$location}-menu.sm-clean ul a:not(.btn).highlighted, #{$location}-menu.sm-clean span.scroll-up, #{$location}-menu.sm-clean span.scroll-down, #{$location}-menu.sm-clean span.scroll-up:hover, #{$location}-menu.sm-clean span.scroll-down:hover { background-color:" . $subcolor_obj->toCSS( 'rgba' ) . ';}';
-		$css .= "#{$location}-menu.sm-clean ul { border: 1px solid " . $subcolor_obj->toCSS( 'rgba' ) . ';}';
-		$css .= "#{$location}-menu.sm-clean > li > ul:before, #{$location}-menu.sm-clean > li > ul:after { border-color: transparent transparent {$submenu_background_color} transparent;}";
+		$css .= "#{$location}-menu.sm-clean ul {background-color: var(--{$submenu_background_class});}";
+		$css .= "#{$location}-menu.sm-clean ul a:not(.btn), #{$location}-menu.sm-clean ul a:not(.btn):hover, #{$location}-menu.sm-clean ul a:not(.btn):focus, #{$location}-menu.sm-clean ul a:not(.btn):active, #{$location}-menu.sm-clean ul a:not(.btn).highlighted, #{$location}-menu.sm-clean span.scroll-up, #{$location}-menu.sm-clean span.scroll-down, #{$location}-menu.sm-clean span.scroll-up:hover, #{$location}-menu.sm-clean span.scroll-down:hover { background-color: var(--{$submenu_background_class});}";
+		$css .= "#{$location}-menu.sm-clean ul { border: 1px solid var(--{$submenu_background_class});}";
+		$css .= "#{$location}-menu.sm-clean > li > ul:before, #{$location}-menu.sm-clean > li > ul:after { border-color: transparent transparent var(--{$submenu_background_class}) transparent;}";
 		$css .= '}';
 
 		return $css;
@@ -697,9 +699,6 @@ public function boldgrid_enqueue_styles() {
 
 		$this->hover_css();
 
-		$links = new Boldgrid_Framework_Links( $this->configs );
-		$links->add_styles_frontend();
-
 		/* Component Styles */
 		wp_enqueue_style(
 			'boldgrid-components',

src/includes/class-boldgrid-framework.php

@@ -574,7 +574,7 @@ private function define_admin_hooks() {
 		$boldgrid_ppb      = new Boldgrid_Framework_PPB( $this->configs );
 		$pro_feature_cards = new BoldGrid_Framework_Pro_Feature_Cards( $this->configs );
 
-		$this->loader->add_filter( 'bgtfw_upgrade_url_pro_features', $pro_feature_cards, 'get_upgrade_url', 10, 0 );
+		$this->loader->add_filter( 'bgtfw_upgrade_url_pro_features', $pro_feature_cards, 'get_upgrade_url', 0 );
 
 		// This adds Pro Feature notice counts to the admin menu.
 		$this->loader->add_action( 'admin_menu', $pro_feature_cards, 'show_notice_counts' );
@@ -830,6 +830,7 @@ private function customizer_colors() {
 		$this->loader->add_action( 'customize_preview_init', $colors, 'enqueue_preview_color_palette' );
 		$this->loader->add_filter( 'customize_changeset_save_data', $colors, 'changeset_data' );
 		$this->loader->add_action( 'customize_save_after', $colors, 'update_theme_mods' );
+		$this->loader->add_action( 'customize_save_after', $colors, 'adjust_background_colors' );
 		$this->loader->add_action( 'customize_register', $colors, 'customize_register_action' );
 		$this->loader->add_action( 'admin_enqueue_scripts', $colors, 'enqueue_styles' );
 		$this->loader->add_action( 'admin_enqueue_scripts', $colors, 'enqueue_scripts' );

src/includes/configs/customizer/controls/blog-page.controls.php

@@ -913,7 +913,7 @@
 		'section'           => 'bgtfw_pages_blog_blog_page_read_more',
 		'default'           => 'color-1',
 		'choices'           => array(
-			'selectors' => array( '.read-more .link' ),
+			'selectors' => array( '.read-more a.link:not(.btn)' ),
 			'colors'    => $bgtfw_formatted_palette,
 			'size'      => $bgtfw_palette->get_palette_size( $bgtfw_formatted_palette ),
 		),

src/includes/configs/customizer/panels.config.php

@@ -72,7 +72,7 @@
 			'templateId'         => 'bgtfw-notification',
 			'featureCount'       => 1,
 			'featureDescription' => esc_html__( '1 premium feature available!', 'bgtfw' ),
-			'url'                => esc_url( 'https://www.boldgrid.com/get-pro-crio/?source=customize-header' ),
+			'url'                => esc_url( apply_filters( 'bgtfw_premium_url', 'https://www.boldgrid.com/get-pro-crio/?source=customize-header' ) ),
 			'buttonText'         => esc_html__( 'Learn More', 'bgtfw' ),
 		),
 		'icon'        => 'dashicons-schedule',
@@ -89,7 +89,7 @@
 			'templateId'         => 'bgtfw-notification',
 			'featureCount'       => 36,
 			'featureDescription' => esc_html__( '36 premium features available!', 'bgtfw' ),
-			'url'                => esc_url( 'https://www.boldgrid.com/get-pro-crio/?source=customize-menu' ),
+			'url'                => esc_url( apply_filters( 'bgtfw_premium_url', 'https://www.boldgrid.com/get-pro-crio/?source=customize-menu' ) ),
 			'buttonText'         => esc_html__( 'Learn More', 'bgtfw' ),
 		),
 		'icon'        => 'dashicons-menu',
@@ -105,7 +105,7 @@
 			'templateId'         => 'bgtfw-notification',
 			'featureCount'       => 15,
 			'featureDescription' => esc_html__( '15 premium features available!', 'bgtfw' ),
-			'url'                => esc_url( 'https://www.boldgrid.com/get-pro-crio/?source=customize-blog' ),
+			'url'                => esc_url( apply_filters( 'bgtfw_premium_url', 'https://www.boldgrid.com/get-pro-crio/?source=customize-blog' ) ),
 			'buttonText'         => esc_html__( 'Learn More', 'bgtfw' ),
 		),
 		'icon'        => 'dashicons-admin-post',

src/includes/configs/customizer/sections.config.php

@@ -101,7 +101,7 @@
 			'templateId'         => 'bgtfw-notification',
 			'featureCount'       => 1,
 			'featureDescription' => esc_html__( '1 premium feature available!', 'bgtfw' ),
-			'url'                => esc_url( 'https://www.boldgrid.com/get-pro-crio/?source=customize-header' ),
+			'url'                => esc_url( apply_filters( 'bgtfw_premium_url', 'https://www.boldgrid.com/get-pro-crio/?source=customize-header' ) ),
 			'buttonText'         => esc_html__( 'Learn More', 'bgtfw' ),
 		),
 		'icon'            => 'dashicons-admin-generic',
@@ -123,7 +123,8 @@
 			'templateId'         => 'bgtfw-notification',
 			'featureCount'       => 1,
 			'featureDescription' => esc_html__( '1 premium feature available!', 'bgtfw' ),
-			'url'                => esc_url( 'https://www.boldgrid.com/get-pro-crio/?source=customize-header' ),
+			'url'                => esc_url( apply_filters( 'bgtfw_premium_url', 'https://www.boldgrid.com/get-pro-crio/?source=customize-header' ) ),
+
 			'buttonText'         => esc_html__( 'Learn More', 'bgtfw' ),
 		),
 	),

src/includes/customizer/class-boldgrid-framework-customizer-colors.php

@@ -312,6 +312,121 @@ public function update_theme_mods() {
 		}
 	}
 
+	/**
+	 * Adjust Background Colors.
+	 *
+	 * @param WP_Customize_Manager $wp_customize Customizer object.
+	 */
+	public function adjust_background_colors( $wp_customize ) {
+		$changeset_data = $wp_customize->changeset_data();
+		$slug           = get_template();
+		if ( array_key_exists( $slug . '::boldgrid_color_palette', $changeset_data ) ) {
+			$palette_configs      = json_decode( $changeset_data[ $slug . '::boldgrid_color_palette' ]['value'], true );
+			$active_palette_class = $palette_configs['state']['active-palette'];
+			$colors               = $palette_configs['state']['palettes'][ $active_palette_class ]['colors'];
+			$neutral              = $palette_configs['state']['palettes'][ $active_palette_class ]['neutral-color'];
+
+			$posts = get_posts();
+			$pages = get_pages();
+			$cphs  = get_posts(
+				array(
+					'post_type' => array(
+						'post',
+						'page',
+						'crio_page_header',
+					),
+				)
+			);
+
+			$posts = array_merge( $posts, $pages, $cphs );
+
+			foreach ( $posts as $post ) {
+				$this->update_post_background_colors( $post, $colors, $neutral );
+			}
+		}
+	}
+
+	/**
+	 * Update Post Background Colors
+	 *
+	 * @param WP_Post $post    Post object.
+	 * @param array   $colors  Palette colors.
+	 * @param string  $neutral Neutral color.
+	 */
+	public function update_post_background_colors( $post, $colors, $neutral ) {
+		$post_id      = $post->ID;
+		$post_title   = $post->post_title;
+		$post_content = get_post_field( 'post_content', $post_id );
+
+		// If a post doesn't contain a 'boldgrid-section' it is not a PPB post/page.
+		if ( false === strpos( $post_content, 'boldgrid-section' ) ) {
+			return;
+		}
+
+		// Create an instance of DOMDocument
+		$dom = new \DOMDocument();
+
+		// Handle UTF-8, otherwise problems will occur with UTF-8 characters.
+		$dom->loadHTML( mb_convert_encoding( $post_content, 'HTML-ENTITIES', 'UTF-8' ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );
+
+		$elements = $dom->getElementsByTagName( '*' );
+
+		$elements_with_overlays = array();
+		$changed_elements       = 0;
+
+		// Loop through all elements.
+		foreach ( $elements as $element ) {
+			$has_overlay = $element->hasAttribute( 'data-bg-overlaycolor' );
+			if ( $has_overlay ) {
+				$elements_with_overlays[] = $element;
+			}
+		}
+
+		// If the post doesn't contain any translucent overlays, we don't need to update the content.
+		if ( 0 === count( $elements_with_overlays ) ) {
+			return;
+		}
+
+		foreach ( $elements_with_overlays as $element_with_overlay ) {
+			if ( ! $element_with_overlay->hasAttribute( 'data-bg-overlaycolor-class' ) ) {
+				continue;
+			}
+
+			$overlay_alpha  = $element_with_overlay->getAttribute( 'data-bg-overlaycolor-alpha' );
+			$overlay_class  = $element_with_overlay->getAttribute( 'data-bg-overlaycolor-class' );
+			$overlay_color  = str_replace( ' ', '', $element_with_overlay->getAttribute( 'data-bg-overlaycolor' ) );
+			$style          = $element_with_overlay->getAttribute( 'style' );
+			$new_color      = 'neutral' === $overlay_class ? $neutral : $colors[ (int) $overlay_class - 1 ];
+			$new_color_rgba = str_replace( ')', ', ' . $overlay_alpha . ')', $new_color );
+			$new_color_rgba = str_replace( ' ', '', $new_color_rgba );
+
+			if ( $overlay_color === $new_color_rgba ) {
+				continue;
+			}
+
+			$style = preg_replace( '/rgba?(\(\s*\d+\s*,\s*\d+\s*,\s*\d+)(?:\s*,.+?)?\)/', $new_color_rgba, $style );
+
+			$element_with_overlay->setAttribute( 'style', $style );
+			$element_with_overlay->setAttribute( 'data-bg-overlaycolor', $new_color_rgba );
+			$changed_elements++;
+		}
+
+		// If no elements were changed, we don't need to update the content.
+		if ( 0 === $changed_elements ) {
+			return;
+		}
+
+		$new_content = $dom->saveHTML();
+
+		// Update the post content.
+		wp_update_post(
+			array(
+				'ID'           => $post_id,
+				'post_content' => $new_content,
+			)
+		);
+	}
+
 	/**
 	 * Initialize the WP_Filesystem
 	 *

src/includes/customizer/class-boldgrid-framework-customizer.php

@@ -973,7 +973,7 @@ public function add_panels( $wp_customize ) {
 					'title'        => esc_html__( 'Get More Features', 'bgtfw' ),
 					'upsell_text'  => esc_html__( 'Upgrade Crio', 'bgtfw' ),
 					'upsell_title' => esc_html__( 'Upgrade Crio', 'bgtfw' ),
-					'upsell_url'   => 'https://boldgrid.com/wordpress-themes/crio/?source=customize-main',
+					'upsell_url'   => esc_url( apply_filters( 'bgtfw_premium_url', 'https://boldgrid.com/wordpress-themes/crio/?source=customize-main' ) ),
 					'priority'     => 0,
 				)
 			)

src/includes/pro-feature-cards/class-boldgrid-framework-pro-feature-cards.php

@@ -59,7 +59,7 @@ public function __construct( $configs ) {
 	 *
 	 * @return string upgrade url.
 	 */
-	public function get_upgrade_url() {
+	public function get_upgrade_url( $url ) {
 		return $this->upgrade_url;
 	}