Branch 1.27.1 (#621)

* RC Branch

* relocate and clarify heading labels section (#620)

* add validation check for saved colors (#617)

* add validation check for saved colors

* refresh saved colors between panel loads

* add adjustment for neutral button color (#616)

* Resolves Issue - Advanced Controls panel show on Tutorial Videos when they should not (#615)

* Resolves #603

* update boldgrid-panel to fix travis build

* update dist on travis.yml

* change dist on travis

* change php version for travis

* update php on travis.yml

* hide footer button on panel

* update version for stable release

.travis.yml

@@ -23,14 +23,14 @@ deploy:
   skip_cleanup: true
   on:
     tags: true
-    php: '5.6'
+    php: '7.4'
 - provider: releases
   api_key: "${GITHUB_TOKEN}"
   file: post-and-page-builder.zip
   skip_cleanup: true
   on:
     tags: true
-    php: '5.6'
+    php: '7.4'
 env:
   global:
     secure: Nx5fCiB5e3mr+mCd6OEMEiIs2Mya8aJUI3SniBX1GwhEyjb+86ti2bC77m9mpmU7CiY84DifoX0i1toOkvT58d+zgHZuixWqO8J29KXxYao6N9tli0zbpEZQSw9rxm9/+YRjwwQLuMKTLIKE8nxoVFJuWmrWamG6hXtz+VMuIYg/EPBAJslvygWce68Otdes229bF65kfy04ONzFymP93czcNPktRuDJ+wj9ZTag2zGQ4vDekbm1IIMhlkqMLqfW3vmLVoyxu5aGi4Ap9vEBzNeBLI2S6wKVCu2XeSHbdvTMDp84JL/ujE9NjjQxXbcL1vzF1veQNNo0RRpQpTq81FNZzdII5Ri3w7bhAwe6b0/8TDTkoFWxbZwg0PaNu+p4Rgrn6KZmvihl+Jbmz3IfECRakNYg1XtY3ykDyJpHRwDrkBGjOwpkDfl7TWkk95bY/ghfAVd+G+HuZHiHaaGvG30d6NphdjeQsZ4Pys9wpxGC8N3uLnB4gtlsFq8Nl1biybGsT/nh2dzCQ2Sm28sNpKn0519zHJJaShfonl2eBM67w5WTmoSAWoSra80XX8lB0HI9Dj5pUTLomJ4VW3yJPAEKDKKqonQ5C7crmsPdf1eVLIR02EJaA7Aen4icDkYoWi0LSv2YF/OykLoUXoiWQTk0QPyKoNARIUrFbCM6eww=

assets/js/builder/component/button/control.js

@@ -221,7 +221,11 @@ BOLDGRID.EDITOR.CONTROLS = BOLDGRID.EDITOR.CONTROLS || {};
 					self.removeColorClasses();
 					$this.siblings().removeClass( 'selected' );
 					$this.addClass( 'selected' );
-					$target.addClass( 'btn-color-' + $this.attr( 'data-preset' ) );
+					if ( BoldgridEditor.is_crio && 'neutral' === $this.attr( 'data-preset' ) ) {
+						$target.addClass( 'btn-neutral-color' );
+					} else {
+						$target.addClass( 'btn-color-' + $this.attr( 'data-preset' ) );
+					}
 				}
 			);
 		},

assets/js/builder/controls/element/background.js

@@ -443,7 +443,7 @@ import { BoldgridPanel } from 'boldgrid-panel';
 				'color-neutral': 'var(--color-neutral )',
 			};
 
-			const savedColors = BoldgridEditor.saved_colors;
+			const savedColors = self.getSavedColors();
 
 			// This ensures that the background image panel shows if there is a background image set.
 			if ( self.$target.css( 'background-image' ).includes( 'url' ) ) {
@@ -478,6 +478,32 @@ import { BoldgridPanel } from 'boldgrid-panel';
 				<BoldgridPanel type="background" selectedComponent={selectedComponent} usedComponents={usedComponents} target={self.$target} />
 			);
 		},
+
+		/**
+		 * Get Saved Colors from settings
+		 * array or from input field.
+		 *
+		 * @since 1.27.1
+		 * @returns {Array<string>}
+		 */
+		getSavedColors: function() {
+			var customColorInputVal = $( '#custom-color-input' ).val(),
+				savedColors         = BoldgridEditor.saved_colors;
+
+			if ( customColorInputVal ) {
+				try {
+					savedColors = JSON.parse( customColorInputVal );
+					// remove any null values from array.
+					savedColors = savedColors.filter( function( el ) {
+						return el != null;
+					} );
+				} catch ( e ) {
+					// Do nothing.
+				}
+			}
+
+			return savedColors;
+		},
 	};
 
 	BOLDGRID.EDITOR.CONTROLS.Background.init();

assets/js/builder/controls/element/tables.js

@@ -405,8 +405,14 @@ BOLDGRID.EDITOR.CONTROLS = BOLDGRID.EDITOR.CONTROLS || {};
 
 			$headingLabelsSection.children().remove();
 
+			$headingLabelsSection.append(
+				`<p class="instructions"
+					style="margin-bottom: 10px;"
+				>Depending on your responsive settings above, these labels will be used to identify the columns on mobile devices.</p>`
+			);
+
 			$targetHeadings.each( function() {
-				var $heading = $( this ),
+				var $heading     = $( this ),
 					headingLabel = $heading.attr( 'data-label' ) ? $heading.attr( 'data-label' ) : '',
 					headingIndex = $heading.index();
 

assets/js/builder/notice/onb-videos/notice.js

@@ -39,6 +39,13 @@ export class Notice extends Base {
 		BG.Panel.currentControl = this;
 		// Remove all content from the panel.
 		BG.Panel.clear();
+
+		// Close the customizer in the event it is open.
+		BG.Panel.$element.removeClass( 'customize-open' );
+		BG.Panel.$element.find( '.panel-body .customize' ).hide();
+		BG.Service.customize.navigation.disable();
+		BG.Panel.hideFooter();
+
 		BG.Panel.setDimensions( this.panel.width, this.panel.height );
 		BG.Panel.setTitle( this.panel.title );
 		BG.Panel.setContent( this.getHTML() );

includes/class-boldgrid-editor-assets.php

@@ -304,6 +304,62 @@ public function enqueue_latest() {
 		}
 	}
 
+	/**
+	 * Validate the saved colors.
+	 *
+	 * Loop through the array of colors
+	 * and ensure none of them are a null value.
+	 * Each value should be a string.
+	 * If the value is not a string, remove it.
+	 * @since 1.6
+	 *
+	 * @param  array $colors Colors to validate.
+	 * @return array         Validated colors.
+	 */
+	public function validate_saved_colors( $colors ) {
+		$valid_colors = array();
+
+		foreach ( $colors as $color ) {
+			if ( is_string( $color ) && $this->is_valid_color( $color ) ) {
+				$valid_colors[] = $color;
+			}
+		}
+
+		return $valid_colors;
+	}
+
+	/**
+	 * Check if a color is valid.
+	 *
+	 * @since 1.6
+	 *
+	 * @param  string $color Color to check.
+	 * @return boolean       Is the color valid?
+	 */
+	private function is_valid_color( $color ) {
+		// Check for hex color with or without alpha (#RGB, #RRGGBB, #RGBA, #RRGGBBAA)
+		if ( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{4}|[a-fA-F0-9]{8})$/', $color ) ) {
+			return true;
+		}
+
+		// Check for rgb or rgba color
+		if ( preg_match( '/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(,\s*(0|1|0?\.\d+))?\s*\)$/', $color ) ) {
+			return true;
+		}
+
+		// Check for hsl or hsla color
+		if ( preg_match( '/^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*(,\s*(0|1|0?\.\d+))?\s*\)$/', $color ) ) {
+			return true;
+		}
+
+		// Check for CSS variable (var(--variable-name))
+		if ( preg_match( '/^var\(\s*--[\w-]+\s*\)$/', $color ) ) {
+			return true;
+		}
+
+		return false;
+	}
+
 	/**
 	 * Get the JS var's to be passed into the builder.
 	 *
@@ -365,6 +421,8 @@ public function get_js_vars() {
 			$shortcode_keys[] = 'weforms';
 		}
 
+		$saved_colors = $this->validate_saved_colors( Boldgrid_Editor_Option::get( 'custom_colors', array() ) );
+
 		$vars = array(
 			'is_boldgrid_theme'      => $is_bg_theme,
 			'crio_button_classes'    => apply_filters( 'bgtfw_button_classes', array() ),
@@ -388,7 +446,7 @@ public function get_js_vars() {
 			'icons'                  => json_decode( $fs->get_contents( BOLDGRID_EDITOR_PATH . '/assets/json/font-awesome.json' ), true ),
 			'images'                 => Boldgrid_Editor_Builder::get_post_images(),
 			'colors'                 => Boldgrid_Editor_Theme::get_color_palettes(),
-			'saved_colors'           => Boldgrid_Editor_Option::get( 'custom_colors', array() ),
+			'saved_colors'           => $saved_colors,
 			'block_default_industry' => Boldgrid_Editor_Option::get( 'block_default_industry' ),
 			'internalPageTemplates'  => Boldgrid_Editor_Service::get( 'templater' )->templates,
 			'sample_backgrounds'     => Boldgrid_Editor_Builder::get_background_data(),

includes/template/tables.php

@@ -8,9 +8,6 @@
                     <input type="number" name="tables-number-of-rows" id="tables-number-of-rows" value="4" min="1" max="100" step="1"></label>
             </p>
         </div>
-        <h4>Heading Labels</h4>
-        <div class="section section-heading-labels">
-        </div>
         <h4>General Options</h4>
         <div class="section section-general-options">
             <p class="hide-header">
@@ -36,6 +33,9 @@
                 <label for="hide-header-responsive">
                     <input type="checkbox" class="general-table-option" name="hide-header-responsive" id="hide-header-responsive" value="hide-header-responsive">Hide Header on Responsive Tables</label>
         </div>
+        <h4>Mobile Heading Labels</h4>
+        <div class="section section-heading-labels">
+        </div>
         <h4>Horizontal Text Alignment</h4>
         <div class="section section-text-alignment">
             <div class="buttonset bgc" >

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "boldgrid-editor",
-	"version": "1.27.0",
+	"version": "1.27.1",
 	"description": "Post and Page Builder is a standalone plugin which adds functionality to the existing TinyMCE Editor.",
 	"main": "assets/js/editor.js",
 	"scripts": {

post-and-page-builder.php

@@ -3,7 +3,7 @@
  * Plugin Name: Post and Page Builder
  * Plugin URI: https://www.boldgrid.com/boldgrid-editor/?utm_source=ppb-wp-repo&utm_medium=plugin-uri&utm_campaign=ppb
  * Description: Customized drag and drop editing for posts and pages. The Post and Page Builder adds functionality to the existing TinyMCE Editor to give you easier control over your content.
- * Version: 1.27.0
+ * Version: 1.27.1
  * Author: BoldGrid <[email protected]>
  * Author URI: https://www.boldgrid.com/?utm_source=ppb-wp-repo&utm_medium=author-uri&utm_campaign=ppb
  * Text Domain: boldgrid-editor

readme.txt

@@ -4,7 +4,7 @@ Tags: boldgrid, page builder, drag and drop, tinymce, editor, landing page
 Requires at least: 4.7
 Tested up to: 6.6
 Requires PHP: 5.4
-Stable tag: 1.27.0
+Stable tag: 1.27.1
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -134,6 +134,12 @@ WordPress Editor.
 
 == Changelog ==
 
+= 1.27.1 =
+* Bug Fix: New Background Control should not be able to save a null value as a color. [#601](https://github.com/BoldGrid/post-and-page-builder/issues/601)
+* Bug Fix: Cannot create a button with the neutral background color [#607](https://github.com/BoldGrid/post-and-page-builder/issues/607)
+* Bug Fix: Advanced Controls panel show on Tutorial Videos when they should not [#603](https://github.com/BoldGrid/post-and-page-builder/issues/603)
+* Improvement: Improve wording and clarity of table designer 'Heading Labels' section [#619](https://github.com/BoldGrid/post-and-page-builder/issues/619)
+
 = 1.27.0 =
 * New Feature: Added funcionality to support BoldGrid AI for internal testing