diff --git a/README.md b/README.md index d1098ca..6661582 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ Perfect for designers, developers, and content creators who want to boost produc * Resizable sidebar width for a personalized layout * Dismissible notifications for a distraction-free interface * Scroll directly to selected elements in the Edit Form panel +* Add a first found element on Enter * Customizable settings page to adjust sidebar appearance and behavior: * Hide element descriptions in the Add Element panel * Reduce spacing between elements for a compact view diff --git a/assets/js/editor/index.js b/assets/js/editor/index.js index 304c28f..e94edd1 100644 --- a/assets/js/editor/index.js +++ b/assets/js/editor/index.js @@ -1,5 +1,5 @@ import '../../scss/editor/main.scss' -import { extendInlineShortcodeView } from './utils' +import { extendInlineShortcodeView, addSearchInputListener } from './utils' import { SidebarForWPBakery } from './sidebar' import { PageStructure } from './page-structure' import { Notifications } from './notifications' @@ -16,5 +16,7 @@ $(document).ready(() => { } new Notifications() new SidebarForWPBakery() + + addSearchInputListener() }) }) diff --git a/assets/js/editor/utils.js b/assets/js/editor/utils.js index 2b08e41..651e5e9 100644 --- a/assets/js/editor/utils.js +++ b/assets/js/editor/utils.js @@ -1,4 +1,5 @@ -const { vc } = window +const { vc, jQuery, _ } = window +const $ = jQuery /** * Extends the InlineShortcodeView class to trigger an event after removing a shortcode. @@ -11,3 +12,33 @@ export function extendInlineShortcodeView () { vc.events.trigger('afterRemoveShortcode') } } + +/** + * Adds event listener to Add Element's search input to trigger click on the first visible element when Enter key is pressed. + */ +export function addSearchInputListener () { + const $searchInput = $('#vc_elements_name_filter') + const keyupHandler = function (e) { + const filterValue = $(this).val().trim() + + if (filterValue.length) { + const $visibleElements = $('.wpb-layout-element-button.vc_visible:not(.vc_inappropriate)') + const $firstVisibleElement = $visibleElements.first().find('[data-vc-clickable]') + $firstVisibleElement.addClass('snfw-highlighted') + if (e.key === 'Tab' || e.keyCode === 9) { + e.preventDefault() + $visibleElements.find('.snfw-highlighted').removeClass('snfw-highlighted') + // next sibling + $($visibleElements[1]).find('[data-vc-clickable]').focus() + } + if (13 === (e.keyCode || e.which)) { + $visibleElements.find('.snfw-highlighted').removeClass('snfw-highlighted') + $firstVisibleElement.click() + } + } + } + + if ($searchInput) { + $searchInput.on('keydown', _.debounce(keyupHandler, 300)) + } +} diff --git a/assets/scss/editor/components/compact-view.scss b/assets/scss/editor/components/compact-view.scss index 3bd78ef..1a6de38 100644 --- a/assets/scss/editor/components/compact-view.scss +++ b/assets/scss/editor/components/compact-view.scss @@ -23,7 +23,7 @@ .wpb_element_label, .vc_css-editor .vc_settings label{ font-weight: 500; - font-size: 13px; + font-size: 12px; } .vc_description { @@ -36,12 +36,30 @@ } .vc_edit_form_elements input, - .vc_edit_form_elements select { + .vc_edit_form_elements select, + .wpb_button_group-buttons, + .wpb-form-select + .select2-container.select2-container--default .select2-selection--single, + .wpb-form-select-search + .select2-container.select2-container--default .select2-selection--single { height: 34px; font-size: 13px; line-height: 1; } + .wpb_button_group-buttons, + .wpb-form-select + .select2-container.select2-container--default .select2-selection--single, + .wpb-form-select-search + .select2-container.select2-container--default .select2-selection--single { + min-height: 34px; + } + + .wpb-form-select + .select2-container.select2-container--default .select2-selection--single, + .wpb-form-select-search + .select2-container.select2-container--default .select2-selection--single { + padding: 8px; + } + + .wpb_button_group-button { + height: 24px; + } + .vc_edit_form_elements input[type="checkbox"], .vc_edit_form_elements input[type="radio"], .vc_checkbox input[type="checkbox"]:checked::before { @@ -56,8 +74,8 @@ } .vc_css-editor input { - height: 20px; - width: 30px; + height: 30px; + width: 40px; font-size: 10px; line-height: 1; } @@ -91,9 +109,10 @@ font-size: 12px; } + .vc-iconpicker-wrapper .fip-vc-theme-grey.vc-icons-selector .selector, .vc-icons-selector .selector { width: 90px; - height: 30px; + height: 34px; } .vc-icons-selector .selected-icon { @@ -115,27 +134,27 @@ left: 38px; } - .vc_css-editor .vc_layout-onion .vc_border, - .vc_css-editor .vc_layout-onion .vc_padding, - .vc_css-editor .vc_layout-onion .vc_content { - margin: 36px; - } + // .vc_css-editor .vc_layout-onion .vc_border, + // .vc_css-editor .vc_layout-onion .vc_padding, + // .vc_css-editor .vc_layout-onion .vc_content { + // margin: 36px; + // } - .vc_css-editor .vc_layout-onion input.vc_bottom { - bottom: 3px - } + // .vc_css-editor .vc_layout-onion input.vc_bottom { + // bottom: 3px + // } - .vc_css-editor .vc_layout-onion input.vc_top { - top: 3px - } + // .vc_css-editor .vc_layout-onion input.vc_top { + // top: -10px + // } - .vc_css-editor .vc_layout-onion input.vc_left { - left: 3px - } + // .vc_css-editor .vc_layout-onion input.vc_left { + // left: 3px + // } - .vc_css-editor .vc_layout-onion input.vc_right { - right: 3px - } + // .vc_css-editor .vc_layout-onion input.vc_right { + // right: 3px + // } .pickr .pcr-button { height: 26px; diff --git a/assets/scss/editor/components/dark-mode/navbar.scss b/assets/scss/editor/components/dark-mode/navbar.scss index eb9e668..81898b0 100644 --- a/assets/scss/editor/components/dark-mode/navbar.scss +++ b/assets/scss/editor/components/dark-mode/navbar.scss @@ -1,10 +1,10 @@ @use "sass:color"; -$ui-background-color: #001424; - @mixin navbar { .vc_navbar, - .vc_ui-panel-header-container { + .vc_ui-panel-header-container, + .vc_navbar .vc_dropdown.open .vc_dropdown-toggle, + .vc_navbar .vc_dropdown .vc_dropdown-list { background-color: $ui-background-color; } @@ -12,7 +12,10 @@ $ui-background-color: #001424; border-color: $ui-background-color; } - .vc_navbar a.vc_icon-btn:not([disabled]):hover { + .vc_navbar a.vc_icon-btn:not([disabled]):hover, + #vc_navbar a.vc_icon-btn.vc_active, + .vc_navbar .vc_dropdown .vc_dropdown-list a.active, + .vc_navbar .vc_dropdown .vc_dropdown-list a:hover { background-color: color.adjust($ui-background-color, $lightness: 10%); } } diff --git a/assets/scss/editor/components/dark-mode/panels.scss b/assets/scss/editor/components/dark-mode/panels.scss index 2887fbf..991a583 100644 --- a/assets/scss/editor/components/dark-mode/panels.scss +++ b/assets/scss/editor/components/dark-mode/panels.scss @@ -73,8 +73,16 @@ } // Add element panel - .vc_add-element-container .wpb-content-layouts li:hover { - background-color: color.adjust($background-color, $lightness: -10%); + .vc_add-element-container .wpb-content-layouts li:hover, + .vc_add-element-container .wpb-content-layouts a.snfw-highlighted, + .vc_add-element-container .wpb-content-layouts a:focus, + .vc_ui-template-card::before { + background-color: color.adjust($background-color, $lightness: 10%); + } + + .vc_general.vc_ui-tabs-line .vc_ui-tabs-line-trigger:hover, + .vc_general.vc_ui-tabs-line .vc_ui-tabs-line-trigger:focus { + background-color: color.adjust($ui-background-color, $lightness: 10%); } .vc_add-element-container .wpb-content-layouts:not(.wpb-teasers-grid) a { @@ -87,10 +95,17 @@ #vc_elements_name_filter { &, &:focus { + background-color: color.adjust($background-color, $lightness: -5%); color: $color; + border: 1px solid color.adjust($background-color, $lightness: 10%); } } + .vc_add-element-container .wpb-content-layouts .wpb-element-title, + .vc_ui-template-card-name { + color: $color; + } + // Row layout editor .vc_layout-panel-switcher .vc_layout-btn { background-color: $background-color !important; @@ -123,7 +138,9 @@ // Template library panel #vc_templates_name_filter { &, &:focus { + background-color: color.adjust($background-color, $lightness: -5%); color: $color; + border: 1px solid color.adjust($background-color, $lightness: 10%); } } @@ -190,4 +207,14 @@ border-color: color.adjust($background-color, $lightness: 10%); color: $color; } + + // Settings panel + a.vc_post-custom-layout:hover, + a.vc_post-custom-layout.vc-active-post-custom-layout { + background-color: color.adjust($background-color, $lightness: 30%); + } + + .vc_layout-label { + color: $color; + } } diff --git a/assets/scss/editor/components/dark-mode/params.scss b/assets/scss/editor/components/dark-mode/params.scss index 9d1b3c0..a036742 100644 --- a/assets/scss/editor/components/dark-mode/params.scss +++ b/assets/scss/editor/components/dark-mode/params.scss @@ -19,12 +19,23 @@ .vc_cta3-colored-dropdown .classic, .vc_shortcode-param[data-param_type="dropdown"] select.wpb_vc_param_value, .vc_shortcode-param[data-param_type="dropdown"] select.wpb_vc_param_value option, + .wpb-form-select + .select2-container.select2-container--default .select2-selection--single, + .wpb-form-select-search + .select2-container.select2-container--default .select2-selection--single, .wpb_el_type_attach_images .gallery_widget_add_images, .wpb_el_type_attach_image .gallery_widget_add_images, .vc_css-editor .vc_settings .vc_background-image .vc_add-image { - background-color: color.adjust($background-color, $lightness: -5%); + background-color: color.adjust($background-color, $lightness: -5%) !important;; + color: $color !important;; + border: 1px solid color.adjust($background-color, $lightness: 10%) !important; + + &:focus { + border: 1px solid color.adjust(#005FB1, $lightness: 10%) !important; + } + } + + .wpb-form-select + .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered, + .wpb-form-select-search + .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered { color: $color; - border: 1px solid color.adjust($background-color, $lightness: 10%); } // Buttons @@ -40,6 +51,27 @@ background-color: color.adjust($background-color, $lightness: -10%); } + .vc_param_type_number_chevron, + .wpb_linked_fields_toggle, + .vc_wrapper-param-type-button_group.wpb_el_type_button_group .wpb_button_group-button--icon .wpb_button_group-icon { + color: $color; + } + + .vc_wrapper-param-type-button_group.wpb_el_type_button_group .wpb_button_group-buttons, + .wpb_button_group-buttons { + background-color: color.adjust($background-color, $lightness: -5%); + border: 1px solid color.adjust($background-color, $lightness: 10%); + } + + .vc_wrapper-param-type-button_group.wpb_el_type_button_group .wpb_button_group-button--text .wpb_button_group-text { + color: $color; + } + + // Colorpicker + .pcr-app.wpb-pickr { + background-color: color.adjust($background-color, $lightness: 5%); + } + // Design options .vc_css-editor .vc_layout-onion { label { @@ -53,6 +85,10 @@ .vc_margin .vc_border .vc_padding { background-color: color.adjust($background-color, $lightness: 10%); } + + .vc_margin .vc_border .vc_padding .vc_content { + background-color: color.adjust($background-color, $lightness: 15%); + } } // Iconpicker diff --git a/assets/scss/editor/components/dark-mode/variables.scss b/assets/scss/editor/components/dark-mode/variables.scss index 77acc18..9505baa 100644 --- a/assets/scss/editor/components/dark-mode/variables.scss +++ b/assets/scss/editor/components/dark-mode/variables.scss @@ -1,2 +1,3 @@ $background-color: #1e1e1e; $color: #eee; +$ui-background-color: #2e2e2e; \ No newline at end of file diff --git a/assets/scss/editor/components/navbar.scss b/assets/scss/editor/components/navbar.scss index 5a38aeb..2ee4de5 100644 --- a/assets/scss/editor/components/navbar.scss +++ b/assets/scss/editor/components/navbar.scss @@ -11,6 +11,7 @@ right: initial; bottom: 0; width: var(--vc-navbar-width); + height: 100%; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25); z-index: 99999; } diff --git a/assets/scss/editor/components/panels.scss b/assets/scss/editor/components/panels.scss index b4bce76..437ba29 100644 --- a/assets/scss/editor/components/panels.scss +++ b/assets/scss/editor/components/panels.scss @@ -46,3 +46,27 @@ .vc_ui-panel-content.vc_properties-list-init { margin: auto !important; } + +.snfw-highlighted { + background-color: #F0F0F1; +} + + +// after wpb 9.0 +.vc_ui-panel-header .vc_ui-panel-header-header { + .vc_ui-panel-header-actions { + width: 90%; + } + + .vc_ui-panel-header-actions .wpb-search-input { + width: 100% + } + + .vc_ui-panel-minimize-button { + display: none; + } + + .vc-c-icon-search { + font-size: 14px; + } +} \ No newline at end of file diff --git a/includes/settings.php b/includes/settings.php index d43cf89..23e0db4 100644 --- a/includes/settings.php +++ b/includes/settings.php @@ -130,7 +130,7 @@ function sidebar_nav_for_wpbakery_settings_init() { 'sidebar_nav_for_wpbakery_disable_description', '
' . esc_html__( 'Disable elements\' description', 'sidebar-navigation-for-wpbakery' ) . ' - ❔ + ❔
', 'sidebar_nav_for_wpbakery_disable_description_callback', 'sidebar-navigation-for-wpbakery', diff --git a/readme.txt b/readme.txt index ceeba9c..796e642 100644 --- a/readme.txt +++ b/readme.txt @@ -3,8 +3,8 @@ Contributors: nikitahl, mrdollar4444 Tags: wpbakery, wpbakery-extension, wpbakery-extensions, wpbakery-page-builder Requires at least: 6.4 -Tested up to: 6.9 -Stable tag: 2.4 +Tested up to: 7.0 +Stable tag: 2.5 Requires PHP: 7.0 License: GPLv3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html @@ -15,7 +15,9 @@ Enhance WPBakery Page Builder experience with user-friendly sidebar for navigati Take your WPBakery Page Builder workflow to the next level with a modern, customizable sidebar designed for faster navigation and smoother editing. -This lightweight plugin adds a persistent sidebar with navigation and panels, giving you instant access to WPBakery elements, settings, and page structure—without blocking your content or cluttering the editor. No more dragging, resizing, or hunting for options—everything you need stays neatly organized in one place. +This lightweight plugin adds a persistent sidebar with navigation and panels, giving you instant access to WPBakery elements, settings, and page structure—without blocking your content or cluttering the editor. + +No more dragging, resizing, or hunting for options—everything you need stays neatly organized in one place. With simple controls and flexible settings, you can tailor the sidebar to match your workflow. Whether you want a compact layout, resizable panels, or a cleaner editor interface, this plugin makes WPBakery easier and more efficient to use. @@ -28,6 +30,7 @@ Perfect for designers, developers, and content creators who want to boost produc * Resizable sidebar width for a personalized layout * Dismissible notifications for a distraction-free interface * Scroll directly to selected elements in the Edit Form panel +* Add a first found element on Enter * Customizable settings page to adjust sidebar appearance and behavior: * Hide element descriptions in the Add Element panel * Reduce spacing between elements for a compact view @@ -88,6 +91,11 @@ Deactivate the plugin via the WordPress **Plugins** page. == Changelog == += 2.5 = +* Fix: Fixed issue with sidebar styles not applying correctly after 9.0 update of WPBakery Page Builder. +* Update: Update dark theme styles for the Frontend editor interface. +* Update: Added ability to add first/selected element on Enter key press in Add Element panel. + = 2.4 = * Update: Added option to set theme for the Frontend editor interface (light/dark). diff --git a/sidebar-navigation-for-wpbakery.php b/sidebar-navigation-for-wpbakery.php index ac8408b..fe499e6 100644 --- a/sidebar-navigation-for-wpbakery.php +++ b/sidebar-navigation-for-wpbakery.php @@ -2,7 +2,7 @@ /** * Plugin Name: Sidebar for WPBakery Page Builder * Description: Customizable UI for WPBakery Page Builder with sidebar navigation and panels. - * Version: 2.4 + * Version: 2.5 * Author: Nikita Hlopov * Author URI: https://nikitahl.com * Requires PHP: 7.0 @@ -15,7 +15,7 @@ exit; } -define( 'SIDEBAR_NAVIGATION_FOR_WPBAKERY_VERSION', '2.4' ); +define( 'SIDEBAR_NAVIGATION_FOR_WPBAKERY_VERSION', '2.5' ); define( 'SIDEBAR_NAVIGATION_FOR_WPBAKERY_TD', 'sidebar-navigation-for-wpbakery' ); require_once plugin_dir_path( __FILE__ ) . 'includes/settings.php';