From 289a1b3bcee7fea096ee857307c9d3296af99683 Mon Sep 17 00:00:00 2001 From: jamesros Date: Tue, 14 Mar 2023 14:03:16 -0400 Subject: [PATCH] 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 | 2 +- assets/js/builder/component/add.scss | 1 + assets/js/builder/controls.js | 9 +++++++++ assets/js/builder/controls/element/span.js | 2 +- assets/js/builder/drag.js | 14 +++++++------- assets/js/builder/premium/component.js | 15 +++++++++++++++ assets/js/builder/tinymce/width.js | 6 +++++- assets/js/builder/tinymce/wp-mce-draggable.js | 13 +++++++++++++ assets/js/builder/validation/section.js | 4 ++-- assets/scss/editor-fe.scss | 1 - includes/class-boldgrid-editor-assets.php | 2 ++ package.json | 4 ++-- post-and-page-builder.php | 2 +- readme.txt | 7 ++++++- yarn.lock | 8 ++++---- 15 files changed, 69 insertions(+), 21 deletions(-) diff --git a/assets/js/builder/component/add.js b/assets/js/builder/component/add.js index 995656ca..7617185b 100644 --- a/assets/js/builder/component/add.js +++ b/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 = { diff --git a/assets/js/builder/component/add.scss b/assets/js/builder/component/add.scss index b881d05f..44a04650 100644 --- a/assets/js/builder/component/add.scss +++ b/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; diff --git a/assets/js/builder/controls.js b/assets/js/builder/controls.js index ccb8bae8..9552c915 100644 --- a/assets/js/builder/controls.js +++ b/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 ) { diff --git a/assets/js/builder/controls/element/span.js b/assets/js/builder/controls/element/span.js index 61e90f41..d3525871 100644 --- a/assets/js/builder/controls/element/span.js +++ b/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. diff --git a/assets/js/builder/drag.js b/assets/js/builder/drag.js index e2dc2d99..145c120e 100644 --- a/assets/js/builder/drag.js +++ b/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', diff --git a/assets/js/builder/premium/component.js b/assets/js/builder/premium/component.js index dc3f2301..b3c872f1 100644 --- a/assets/js/builder/premium/component.js +++ b/assets/js/builder/premium/component.js @@ -46,6 +46,20 @@ export class Component { ) }; + this.tabs = { + name: 'premium-tabs', + title: 'tabs', + type: 'structure', + icon: '', + 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 ); } ); } } diff --git a/assets/js/builder/tinymce/width.js b/assets/js/builder/tinymce/width.js index d9838118..a7ae32c2 100644 --- a/assets/js/builder/tinymce/width.js +++ b/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(); } diff --git a/assets/js/builder/tinymce/wp-mce-draggable.js b/assets/js/builder/tinymce/wp-mce-draggable.js index 8bf32932..78d1aefa 100644 --- a/assets/js/builder/tinymce/wp-mce-draggable.js +++ b/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 ) { /** diff --git a/assets/js/builder/validation/section.js b/assets/js/builder/validation/section.js index 42797e96..11da3337 100644 --- a/assets/js/builder/validation/section.js +++ b/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', diff --git a/assets/scss/editor-fe.scss b/assets/scss/editor-fe.scss index 0f241916..1b9c41e1 100644 --- a/assets/scss/editor-fe.scss +++ b/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 { diff --git a/includes/class-boldgrid-editor-assets.php b/includes/class-boldgrid-editor-assets.php index 4d2bde67..f1d5b47a 100644 --- a/includes/class-boldgrid-editor-assets.php +++ b/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', diff --git a/package.json b/package.json index 252b6400..31baa245 100644 --- a/package.json +++ b/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", diff --git a/post-and-page-builder.php b/post-and-page-builder.php index 6138f08a..6c9be8b9 100644 --- a/post-and-page-builder.php +++ b/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 * Author URI: https://www.boldgrid.com/?utm_source=ppb-wp-repo&utm_medium=author-uri&utm_campaign=ppb * Text Domain: boldgrid-editor diff --git a/readme.txt b/readme.txt index ebfc2227..20eba1ef 100644 --- a/readme.txt +++ b/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) diff --git a/yarn.lock b/yarn.lock index e6ce98d0..8ebaa45a 100644 --- a/yarn.lock +++ b/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"