Adjustments for tabs (#519)

* exclude nav-tabs & nav-links from content selector

* adjust version for beta

* add premium teaser for tabs

* exclude tabs from Mega Menu Items

* add a highlighting effect to menu items

* adjust currentColor exceptions

* remove outdated bootstrap-additions.scss

* update version for RC

* fix container widths on posts

* fix containers

* update version for rc2

* update readme and versions

assets/js/builder/component/add.js

@@ -19,7 +19,7 @@ export class Add {
 		this.selectors = [ 'html' ];
 
 		// Components to be excluded from mega menu items.
-		this.excludedComponents = [ 'slider', 'wp_nav_menu' ];
+		this.excludedComponents = [ 'slider', 'wp_nav_menu', 'tabs' ];
 
 		// Panel Configurations.
 		this.panel = {

assets/js/builder/component/add.scss

@@ -201,6 +201,7 @@
 	[data-name='premium-post-list'],
 	[data-name='premium-section-slider'],
 	[data-name='premium-content-slider'],
+	[data-name='premium-tabs'],
 	[data-name='premium'] {
 		background: #32373c !important;
 		color: white;

assets/js/builder/controls.js

@@ -196,6 +196,8 @@ BOLDGRID.EDITOR = BOLDGRID.EDITOR || {};
 			var self = this;
 
 			this.$container.on( 'click', function( e ) {
+				var $alreadyVisible = self.$menu.find( 'li[data-action]' ).filter( ':visible' );
+
 				self.$menu.find( 'li[data-action]' ).hide();
 
 				if ( ! self.$menu.items.length ) {
@@ -212,6 +214,13 @@ BOLDGRID.EDITOR = BOLDGRID.EDITOR || {};
 					BOLDGRID.EDITOR.Menu.reactivateMenu();
 				} );
 
+				// Highlight newly visible menu items.
+				self.$menu
+					.find( 'li[data-action]' )
+					.filter( ':visible' )
+					.not( $alreadyVisible )
+					.effect( 'highlight', { color: '#f95b26' }, 1000 );
+
 				self._closeOpenControl();
 
 				if ( ! e.boldgridRefreshPanel ) {

assets/js/builder/controls/element/span.js

@@ -20,7 +20,7 @@ import { Typography } from '@boldgrid/controls';
 		iconClasses: 'fa fa-arrows-h',
 
 		selectors: [
-			'p, h1, h2, h3, h4, h5, h6, a, table, section, ul, ol, dl, blockquote, .boldgrid-shortcode, .bgc-heading *, span'
+			'p, h1, h2, h3, h4, h5, h6, a, table, section, ul:not(.nav-tabs), ol, dl, blockquote, .boldgrid-shortcode, .bgc-heading *, span'
 		],
 
 		// Ignore images clicked in paragraphs.

assets/js/builder/drag.js

@@ -297,8 +297,8 @@ jQuery.fn.IMHWPB_Draggable = function( settings, $ ) {
 		'a:not(p a)',
 		'img:not(p img):not(a img)',
 		'p:not(blockquote p)',
-		'button:not(p button):not(a button)',
-		'ul',
+		'button:not(p button):not(a button):not(.nav-link)',
+		'ul:not(.nav-tabs)',
 		'pre',
 		'ol',
 		'dl',
@@ -347,10 +347,10 @@ jQuery.fn.IMHWPB_Draggable = function( settings, $ ) {
 		 ******************************************************************/
 		'img:not(.row .row img):not(p img):not(a img)',
 		'p:not(.row .row p):not(blockquote p)',
-		'button:not(.row .row button):not(p button):not(a button)',
+		'button:not(.row .row button):not(p button):not(a button):not(.nav-link)',
 
 		// Lists.
-		'ul:not(.row .row ul):not(.draggable-tools-imhwpb ul)',
+		'ul:not(.row .row ul):not(.draggable-tools-imhwpb ul):not(.nav-tabs)',
 		'ol:not(.row .row ol)',
 		'dl:not(.row .row dl)',
 
@@ -413,7 +413,7 @@ jQuery.fn.IMHWPB_Draggable = function( settings, $ ) {
 		'.row .row button:not(p button):not(a button)',
 
 		// Lists.
-		'.row .row ul',
+		'.row .row ul:not(.nav-tabs)',
 		'.row .row ol',
 		'.row .row dl',
 
@@ -450,8 +450,8 @@ jQuery.fn.IMHWPB_Draggable = function( settings, $ ) {
 		'> a',
 		'> img',
 		'> p',
-		'> button',
-		'> ul',
+		'> button:not(.nav-link)',
+		'> ul:not(.nav-tabs)',
 		'> ol',
 		'> dl',
 		'> form',

assets/js/builder/premium/component.js

@@ -46,6 +46,20 @@ export class Component {
 				)
 		};
 
+		this.tabs = {
+			name: 'premium-tabs',
+			title: 'tabs',
+			type: 'structure',
+			icon: '<span class="dashicons dashicons-block-default"></span>',
+			insertType: 'popup',
+			priority: 90,
+			onClick: () =>
+				window.open(
+					BoldgridEditor.plugin_configs.urls.premium_key + '?source=plugin-add-component-tabs',
+					'_blank'
+				)
+		};
+
 		this.postList = {
 			name: 'premium-post-list',
 			title: 'Post Snippet',
@@ -72,6 +86,7 @@ export class Component {
 			BG.Service.component.register( this.rowSlider );
 			BG.Service.component.register( this.sectionSlider );
 			BG.Service.component.register( this.postList );
+			BG.Service.component.register( this.tabs );
 		} );
 	}
 }

assets/js/builder/tinymce/width.js

@@ -99,9 +99,13 @@ export class Width {
 	 * @since 1.6
 	 */
 	updateIframeUrl( url ) {
+		var isResizable = ! BoldgridEditor.is_boldgrid_theme || 'post' === BoldgridEditor.post_type;
+
+		isResizable = BoldgridEditor.is_crio ? false : isResizable;
+
 		url = url || BoldgridEditor.site_url;
 
-		if ( ! BoldgridEditor.is_boldgrid_theme || 'post' === BoldgridEditor.post_type ) {
+		if ( isResizable ) {
 			if ( ! this.$resizeiframe ) {
 				this.$resizeiframe = this.createIframe();
 			}

assets/js/builder/tinymce/wp-mce-draggable.js

@@ -303,6 +303,19 @@ IMHWPB.WP_MCE_Draggable = function() {
 	};
 
 	this.updateResizingIframe = function() {
+		if ( BoldgridEditor.is_crio ) {
+			let style = BG.Controls.$container.$body.attr( 'style' );
+
+			// replace max-width: attribute with max-width:100%!important;
+			if ( style.includes( 'max-width:' ) ) {
+				style = style.replace( /max-width:.*?;/, 'max-width:100%!important;' );
+			} else {
+				style += 'max-width:100%!important;';
+			}
+
+			BG.Controls.$container.$body.attr( 'style', style );
+		}
+
 		if ( BG.Service.editorWidth.resizable ) {
 
 			/**

assets/js/builder/validation/section.js

@@ -50,8 +50,8 @@ BOLDGRID.EDITOR.VALIDATION = BOLDGRID.EDITOR.VALIDATION || {};
 				'a',
 				'img',
 				'p',
-				'button',
-				'ul',
+				'button:not(.nav-link)',
+				'ul:not(.nav-tabs)',
 				'ol',
 				'dl',
 				'form',

assets/scss/editor-fe.scss

@@ -6,7 +6,6 @@
 
 // Bootstrap Styles.
 @import './bootstrap/bootstrap';
-@import "node_modules/boldgrid-theme-framework/src/assets/scss/boldgrid/bootstrap-additions";
 @import './bootstrap/additions';
 
 #content .boldgrid-section {

includes/class-boldgrid-editor-assets.php

@@ -518,6 +518,8 @@ public function enqueue_drag_scripts() {
 			'jquery-ui-slider',
 			'jquery-ui-droppable',
 			'jquery-ui-selectmenu',
+			'jquery-effects-core',
+			'jquery-effects-highlight',
 			'wp-color-picker',
 			'jquery-masonry',
 			'wp-util',

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "boldgrid-editor",
-	"version": "1.22.2",
+	"version": "1.23.0",
 	"description": "Post and Page Builder is a standalone plugin which adds functionality to the existing TinyMCE Editor.",
 	"main": "assets/js/editor.js",
 	"scripts": {
@@ -71,7 +71,7 @@
 	},
 	"dependencies": {
 		"@boldgrid/controls": "https://github.com/BoldGrid/controls#outline-control",
-		"@boldgrid/components": "^2.16.22",
+		"@boldgrid/components": "^2.16.24",
 		"@boldgrid/fourpan": "^1.1.1",
 		"animate.css": "^3.7.0",
 		"babel-eslint": "^8.2.6",

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.22.2
+ * Version: 1.23.0
  * 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.1
 Requires PHP: 5.4
-Stable tag: 1.22.2
+Stable tag: 1.23.0
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -134,6 +134,11 @@ WordPress Editor.
 
 == Changelog ==
 
+= 1.23.0 =
+* New Feature: Added support for PPB Premium's new "Tabbed Content Block".
+* New Feature: Highlight effect added to floating menu when a control is added to the menu.
+* Bug Fix: Blog posts look full width in editor even when set to fixed [#518](https://github.com/BoldGrid/post-and-page-builder/issues/518)
+
 = 1.22.2 =
 * Bug Fix: Hover Boxes do not work with Column Shapes [#495](https://github.com/BoldGrid/post-and-page-builder/issues/495)
 * Bug Fix: Hover Boxes - mobile doesn't show the Hover Background when the option is checked [#499](https://github.com/BoldGrid/post-and-page-builder/issues/499)

yarn.lock

@@ -87,10 +87,10 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-"@boldgrid/components@^2.16.22", "@boldgrid/components@^2.16.8":
-  version "2.16.22"
-  resolved "https://registry.yarnpkg.com/@boldgrid/components/-/components-2.16.22.tgz#29e4d4477a9f104ea71626fa2a02b9ee5bcfefae"
-  integrity sha512-nsGLblUwVukOO0VOt9HeJws4bmyHVkASMAZKOkBdX+H26/dh65D1SA6UuSPOaVKzOdtT961VcC6LIEUF2NgFIA==
+"@boldgrid/components@^2.16.24", "@boldgrid/components@^2.16.8":
+  version "2.16.24"
+  resolved "https://registry.yarnpkg.com/@boldgrid/components/-/components-2.16.24.tgz#25ec13a5aebf0925b5dd922f25f1390d4fe8ba6c"
+  integrity sha512-w/hm1B3YKgO2k2/OH8bKTw5Gh/foS45izyR1mHAVpja81Q5KglVfy/Auevrj0xiZsdkHSWJXhAiE2PfcrPCyRQ==
 
 "@boldgrid/controls@https://github.com/BoldGrid/controls#outline-control":
   version "0.13.1"