From c90b75bd4c37e8431d3f19ba6a091c7ad5b176d2 Mon Sep 17 00:00:00 2001 From: Bogdan Preda Date: Wed, 19 Jul 2023 13:52:24 +0300 Subject: [PATCH 01/17] feat: show visual cue for disabled title inside editor Codeinwp/neve-pro-addon#2550 --- .../src/components/MetaFieldsManager.js | 39 ++++++++++++++++--- inc/views/pluggable/metabox_settings.php | 22 ++++++++++- 2 files changed, 54 insertions(+), 7 deletions(-) diff --git a/assets/apps/metabox/src/components/MetaFieldsManager.js b/assets/apps/metabox/src/components/MetaFieldsManager.js index fded152371..6cb9187606 100644 --- a/assets/apps/metabox/src/components/MetaFieldsManager.js +++ b/assets/apps/metabox/src/components/MetaFieldsManager.js @@ -66,6 +66,7 @@ class MetaFieldsManager extends Component { this.updateValues = this.updateValues.bind(this); this.resetAll = this.resetAll.bind(this); this.updateBlockWidth = this.updateBlockWidth.bind(this); + this.updateTitleVisibility = this.updateTitleVisibility.bind(this); } componentDidUpdate() { @@ -91,6 +92,7 @@ class MetaFieldsManager extends Component { } this.updateBlockWidth(); + this.updateTitleVisibility(); } updateValues(id, value) { @@ -124,12 +126,41 @@ class MetaFieldsManager extends Component { }); } + addCSSToHead(css, styleID = 'neve-meta-editor-style') { + const head = document.head; + const hasStyle = document.getElementById(styleID); + if (hasStyle) { + hasStyle.innerHTML = css; + return false; + } + const style = document.createElement('style'); + style.setAttribute('id', styleID); + style.innerHTML = css; + head.appendChild(style); + } + + updateTitleVisibility() { + const title = this.props.metaValue('neve_meta_disable_title'); + let titleOpacity = 1; + if ('on' === title) { + // make title less visible + titleOpacity = 0.5; + } + + const css = 'h1.editor-post-title { opacity: ' + titleOpacity + '; }'; + + this.addCSSToHead(css, 'neve-meta-title-visibility-style'); + } updateBlockWidth() { const isCustomContentWidth = this.props.metaValue( 'neve_meta_enable_content_width' ); let containerType = this.props.metaValue('neve_meta_container'); - if ('default' === containerType || '' === containerType) { + if ( + 'default' === containerType || + '' === containerType || + undefined === containerType + ) { containerType = metaSidebar.actions.neve_meta_content_width.container; } @@ -162,11 +193,7 @@ class MetaFieldsManager extends Component { ('on' === isCustomContentWidth ? blocKWidth : blockWidthDefault) + '; }'; - const head = document.head; - const style = document.createElement('style'); - style.setAttribute('id', 'neve-meta-editor-style'); - style.innerHTML = css; - head.appendChild(style); + this.addCSSToHead(css); } renderPageLayoutGroup() { diff --git a/inc/views/pluggable/metabox_settings.php b/inc/views/pluggable/metabox_settings.php index 1419a0fcc3..d10f5c7431 100644 --- a/inc/views/pluggable/metabox_settings.php +++ b/inc/views/pluggable/metabox_settings.php @@ -207,6 +207,11 @@ public function editor_content_width() { $editor_width_normal = ( empty( $meta_value ) ? 100 : $meta_value ) . '%'; } + $editor_title_opacity = 1; + $tile_disabled = $this->get_title_disabled(); + if ( $tile_disabled ) { + $editor_title_opacity = 0.5; + } $style = sprintf( ' @@ -224,8 +229,10 @@ public function editor_content_width() { .wp-block[data-align="full"] { max-width: none; } + h1.editor-post-title { opacity: %s; } ', - $editor_width_normal + $editor_width_normal, + $editor_title_opacity ); $style = $this->add_button_shadow_styles( $style ); @@ -235,6 +242,19 @@ public function editor_content_width() { } + /** + * Get the disabled title status. + * + * @return false|mixed Status of the title. + */ + public function get_title_disabled() { + $post_id = $this->get_post_id(); + if ( $post_id === false ) { + return false; + } + return get_post_meta( $post_id, self::DISABLE_TITLE, true ); + } + /** * Get content width, if any. * From 2aac14c973a72fd923a2cfb22479421557629738 Mon Sep 17 00:00:00 2001 From: Bogdan Preda Date: Wed, 19 Jul 2023 14:17:46 +0300 Subject: [PATCH 02/17] chore: remove extra condition --- assets/apps/metabox/src/components/MetaFieldsManager.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/assets/apps/metabox/src/components/MetaFieldsManager.js b/assets/apps/metabox/src/components/MetaFieldsManager.js index 6cb9187606..1a0976ac78 100644 --- a/assets/apps/metabox/src/components/MetaFieldsManager.js +++ b/assets/apps/metabox/src/components/MetaFieldsManager.js @@ -183,11 +183,6 @@ class MetaFieldsManager extends Component { ) + 'px'; } - if ( - document.contains(document.getElementById('neve-meta-editor-style')) - ) { - document.getElementById('neve-meta-editor-style').remove(); - } const css = '.wp-block:not([data-align="full"]) { max-width: ' + ('on' === isCustomContentWidth ? blocKWidth : blockWidthDefault) + From 3ed89db73cae05a618970ebfd0c597011a7b93df Mon Sep 17 00:00:00 2001 From: Bogdan Preda Date: Wed, 19 Jul 2023 15:29:50 +0300 Subject: [PATCH 03/17] chore: added e2e test for title visibility in editor --- e2e-tests/specs/editor/page.spec.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 e2e-tests/specs/editor/page.spec.ts diff --git a/e2e-tests/specs/editor/page.spec.ts b/e2e-tests/specs/editor/page.spec.ts new file mode 100644 index 0000000000..1535de4b69 --- /dev/null +++ b/e2e-tests/specs/editor/page.spec.ts @@ -0,0 +1,19 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Page Neve Options / Title Visibility', () => { + test('Starter Sites Plugin install from Dashboard Notice', async ({ + page, + }) => { + await page.goto('wp-admin/post-new.php?post_type=page'); + + await page.getByRole('textbox', { name: 'Add title' }).click(); + await page + .getByRole('textbox', { name: 'Add title' }) + .fill('Test Title Visibility'); + await page.getByRole('button', { name: 'Neve Options' }).click(); + const titleLocator = page.locator('h1.editor-post-title'); + await expect(titleLocator).toHaveCSS('opacity', '1'); + await page.getByLabel('Disable Title').check(); + await expect(titleLocator).toHaveCSS('opacity', '0.5'); + }); +}); From a71d5c297e74653bc4397f091706afe346156f79 Mon Sep 17 00:00:00 2001 From: Bogdan Preda Date: Wed, 19 Jul 2023 15:51:22 +0300 Subject: [PATCH 04/17] feat: add mastodon icon Codeinwp/neve-pro-addon#2482 --- assets/apps/components/src/Common/icons.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/assets/apps/components/src/Common/icons.js b/assets/apps/components/src/Common/icons.js index d1fdb7aec1..d4df3e6d66 100644 --- a/assets/apps/components/src/Common/icons.js +++ b/assets/apps/components/src/Common/icons.js @@ -885,6 +885,19 @@ const getIcons = (size) => { ), + mastodon: ( + + + + ), }; }; From 7991f0a0b08639d34e0fc746a57c7e01588dd8be Mon Sep 17 00:00:00 2001 From: Bogdan Preda Date: Thu, 20 Jul 2023 11:06:35 +0300 Subject: [PATCH 05/17] chore: fix condition on default --- inc/views/pluggable/metabox_settings.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/inc/views/pluggable/metabox_settings.php b/inc/views/pluggable/metabox_settings.php index d10f5c7431..e970079bdf 100644 --- a/inc/views/pluggable/metabox_settings.php +++ b/inc/views/pluggable/metabox_settings.php @@ -209,7 +209,7 @@ public function editor_content_width() { $editor_title_opacity = 1; $tile_disabled = $this->get_title_disabled(); - if ( $tile_disabled ) { + if ( $tile_disabled === 'on' ) { $editor_title_opacity = 0.5; } From 36d56a15c8836e6e6a88ecbc9bbf79b8baecfa7c Mon Sep 17 00:00:00 2001 From: Bogdan Preda Date: Thu, 20 Jul 2023 16:47:52 +0300 Subject: [PATCH 06/17] feat: removed style and builder rollback #3952 --- .../HFGMigrationNotice.tsx | 211 ------------------ .../src/builder-instructions/Instructions.tsx | 7 - header-footer-grid/Core/Builder/Header.php | 1 - .../controls/react/instructions_section.php | 1 - inc/customizer/options/main.php | 53 ----- 5 files changed, 273 deletions(-) delete mode 100644 assets/apps/customizer-controls/src/builder-instructions/HFGMigrationNotice.tsx diff --git a/assets/apps/customizer-controls/src/builder-instructions/HFGMigrationNotice.tsx b/assets/apps/customizer-controls/src/builder-instructions/HFGMigrationNotice.tsx deleted file mode 100644 index 7c1ccf9d79..0000000000 --- a/assets/apps/customizer-controls/src/builder-instructions/HFGMigrationNotice.tsx +++ /dev/null @@ -1,211 +0,0 @@ -import React from 'react'; -import { __ } from '@wordpress/i18n'; -import apiFetch from '@wordpress/api-fetch'; -import { - cancelCircleFilled, - rotateRight, - starFilled, - undo, -} from '@wordpress/icons'; -import { Button } from '@wordpress/components'; -import { useState, useEffect } from '@wordpress/element'; -import { StringObjectKeys } from '../@types/utils'; - -interface MigrationResponse { - success: boolean; -} - -type Props = { - alreadyMigrated: boolean; - hadOldBuilder: boolean; -}; - -export const HFGMigrationNotice: React.FC = ({ - alreadyMigrated, - hadOldBuilder, -}) => { - const [error, setError] = useState(false); - const [isCustomizerSaved, setCustomizerSaved] = useState(true); - - useEffect(() => { - if (alreadyMigrated && !hadOldBuilder) { - return; - } - window.wp.customize.bind('ready', () => { - window.wp.customize.state('saved').bind((status: boolean) => { - setCustomizerSaved(status); - }); - }); - }, []); - - if (typeof window.NeveProReactCustomize !== 'undefined') { - const { whiteLabel } = window.NeveProReactCustomize; - - if (whiteLabel) { - return null; - } - } - - if (!hadOldBuilder) { - return null; - } - - const { nonce } = window.NeveReactCustomize; - - const getReloadUrl = () => { - const location = window.location.href; - const currentPanel = window.wp.customize.state('expandedPanel').get(); - - if (!currentPanel) return location; - - const panelId = currentPanel.id; - - if (!panelId) return location; - - const url = new URL(location); - - url.searchParams.set('autofocus[panel]', panelId); - - return url.href; - }; - - const runMigration = (rollback = false, dismiss = false) => { - let message = __('Migrating builder data', 'neve'); - - if (rollback) { - message = __('Rolling back builder', 'neve'); - } - - if (dismiss) { - message = __('Removing old data', 'neve'); - } - - window.wp.customize.notifications.add( - new window.wp.customize.OverlayNotification( - 'neve_migrating_builders', - { - message: message + '...', - type: 'success', - loading: true, - } - ) - ); - - const headers: StringObjectKeys = { 'X-WP-Nonce': nonce }; - if (rollback) { - headers.rollback = 'yes'; - } - - if (dismiss) { - headers.dismiss = 'yes'; - } - - apiFetch({ - path: '/nv/migration/new_header_builder', - method: 'GET', - headers, - }).then((response: unknown) => { - if (!(response as MigrationResponse).success) { - window.wp.customize.notifications.remove( - 'neve_migrating_builders' - ); - setError(true); - return false; - } - reloadPage(); - }); - }; - - const reloadPage = () => { - const url = getReloadUrl(); - if (window.location.href === url) { - window.location.reload(); - return false; - } - window.location.href = url; - }; - - const renderErrors = () => { - return ( - <> - {!isCustomizerSaved && !error && ( -

- {__( - 'You must save the current customizer values before running the migration.', - 'neve' - )} -

- )} - - {error && ( -

- {__( - 'Something went wrong. Please reload the page and try again.', - 'neve' - )} -

- )} - - ); - }; - - if (alreadyMigrated && hadOldBuilder) { - return ( - <> -
-

{__('Want to roll back to the old builder?', 'neve')}

- - - {renderErrors()} - - ); - } - - return ( - <> -
-

- {__( - "We've created a new Header/Footer Builder experience! You can always roll back to the old builder from right here.", - 'neve' - )} -

-

- - {__('Some manual adjustments may be required.', 'neve')} - -

- - {renderErrors()} - - ); -}; diff --git a/assets/apps/customizer-controls/src/builder-instructions/Instructions.tsx b/assets/apps/customizer-controls/src/builder-instructions/Instructions.tsx index 2202a19259..d52f3524c6 100644 --- a/assets/apps/customizer-controls/src/builder-instructions/Instructions.tsx +++ b/assets/apps/customizer-controls/src/builder-instructions/Instructions.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; import { WPCustomizeControl } from '../@types/customizer-control'; -import { HFGMigrationNotice } from './HFGMigrationNotice'; type Props = { control: WPCustomizeControl; @@ -72,12 +71,6 @@ const Instructions: React.FC = ({ control }) => { ); })} - {id === 'hfg_header_layout_section_quick_links' && ( - - )} )} diff --git a/header-footer-grid/Core/Builder/Header.php b/header-footer-grid/Core/Builder/Header.php index a68e93cbbd..fb26e2834c 100644 --- a/header-footer-grid/Core/Builder/Header.php +++ b/header-footer-grid/Core/Builder/Header.php @@ -94,7 +94,6 @@ public function init() { ), ), 'builderMigrated' => $migrated_hfg, - 'hadOldBuilder' => neve_had_old_hfb() && ( ! neve_is_new_skin() || neve_was_auto_migrated_to_new() ), ) ); diff --git a/inc/customizer/controls/react/instructions_section.php b/inc/customizer/controls/react/instructions_section.php index 04fc730488..81e1dd0099 100644 --- a/inc/customizer/controls/react/instructions_section.php +++ b/inc/customizer/controls/react/instructions_section.php @@ -31,7 +31,6 @@ class Instructions_Section extends \WP_Customize_Section { 'description' => '', 'image' => '', 'quickLinks' => [], - 'hadOldBuilder' => false, 'builderMigrated' => false, ]; /** diff --git a/inc/customizer/options/main.php b/inc/customizer/options/main.php index 2eb94b6e5f..4be557f39c 100644 --- a/inc/customizer/options/main.php +++ b/inc/customizer/options/main.php @@ -30,7 +30,6 @@ public function add_controls() { $this->register_types(); $this->add_main_panels(); $this->change_controls(); - $this->add_skin_switcher(); } /** @@ -125,56 +124,4 @@ protected function change_controls() { // Change default for shop columns WooCommerce option. $this->change_customizer_object( 'setting', 'woocommerce_catalog_columns', 'default', 3 ); } - - /** - * Add the skin switcher. - * - * @return void - * @since 3.0.0 - */ - private function add_skin_switcher() { - // If we started with the new skin this shouldn't show up at all. - if ( get_theme_mod( 'neve_had_old_skin' ) === false ) { - return; - } - - // If we're not using the new builder. We don't show the switch & section. - if ( ! neve_is_new_builder() ) { - return; - } - - // If the pro version exists but it's incompatible, we don't show the switch. - if ( defined( 'NEVE_PRO_VERSION' ) ) { - if ( ! neve_pro_has_support( 'skinv2' ) ) { - return; - } - } - - $section = 'neve_style_section'; - - $this->add_section( - new Section( - $section, - [ - 'priority' => 201, - 'title' => esc_html__( 'Style', 'neve' ), - ] - ) - ); - - $this->add_control( - new Control( - 'neve_new_skin', - [ - 'transport' => 'postMessage', - 'sanitize_callback' => 'sanitize_text_field', - 'default' => 'new', - ], - [ - 'type' => 'neve_skin_switcher', - 'section' => $section, - ] - ) - ); - } } From 7584c0096aaf50c7fb43a8a21dcd1f2c83e54a00 Mon Sep 17 00:00:00 2001 From: Bogdan Preda Date: Thu, 20 Jul 2023 16:51:04 +0300 Subject: [PATCH 07/17] chore: removed skin switcher control --- .../apps/customizer-controls/src/controls.js | 2 - .../src/skin-switcher/Control.js | 8 -- .../src/skin-switcher/SkinSwitcher.tsx | 101 ------------------ 3 files changed, 111 deletions(-) delete mode 100644 assets/apps/customizer-controls/src/skin-switcher/Control.js delete mode 100644 assets/apps/customizer-controls/src/skin-switcher/SkinSwitcher.tsx diff --git a/assets/apps/customizer-controls/src/controls.js b/assets/apps/customizer-controls/src/controls.js index 7f06cc3655..19632184f0 100644 --- a/assets/apps/customizer-controls/src/controls.js +++ b/assets/apps/customizer-controls/src/controls.js @@ -29,7 +29,6 @@ import { BuilderColumns } from './builder-columns/Control'; import { TextareaControl } from './textarea/Control'; import { InstructionsControl } from './builder-instructions/Control'; import { HeadingControl } from './heading/Control'; -import { SkinSwitcherControl } from './skin-switcher/Control'; import { LogoPaletteControl } from './logo-palette/Control'; import { RepeaterControl } from './repeater/Control'; import { RichTextControl } from './rich-text/Control'; @@ -77,7 +76,6 @@ controlConstructor.neve_builder_columns = BuilderColumns; controlConstructor.neve_textarea = TextareaControl; controlConstructor.hfg_instructions = InstructionsControl; controlConstructor.neve_customizer_heading = HeadingControl; -controlConstructor.neve_skin_switcher = SkinSwitcherControl; controlConstructor.neve_logo_palette_control = LogoPaletteControl; controlConstructor.neve_repeater_control = RepeaterControl; controlConstructor.neve_rich_text = RichTextControl; diff --git a/assets/apps/customizer-controls/src/skin-switcher/Control.js b/assets/apps/customizer-controls/src/skin-switcher/Control.js deleted file mode 100644 index a176277f15..0000000000 --- a/assets/apps/customizer-controls/src/skin-switcher/Control.js +++ /dev/null @@ -1,8 +0,0 @@ -import SkinSwitcher from './SkinSwitcher.tsx'; -import { render } from '@wordpress/element'; - -export const SkinSwitcherControl = wp.customize.Control.extend({ - renderContent: function renderContent() { - render(, this.container[0]); - }, -}); diff --git a/assets/apps/customizer-controls/src/skin-switcher/SkinSwitcher.tsx b/assets/apps/customizer-controls/src/skin-switcher/SkinSwitcher.tsx deleted file mode 100644 index 4452fd6928..0000000000 --- a/assets/apps/customizer-controls/src/skin-switcher/SkinSwitcher.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react'; -import { WPCustomizeControl } from '../@types/customizer-control'; -import { __ } from '@wordpress/i18n'; -import { useEffect, useState } from '@wordpress/element'; - -// @ts-ignore -import { InlineSelect } from '@neve-wp/components'; -import { Button } from '@wordpress/components'; - -type Props = { - control: WPCustomizeControl; -}; - -const SkinSwitcher: React.FC = ({ control }) => { - const [value, setValue] = useState(control.setting.get()); - const [changed, setChanged] = useState(false); - const [switching, setSwitching] = useState(false); - const [customizerSaved, setCustomizerSaved] = useState(true); - - useEffect(() => { - window.wp.customize.bind('ready', () => { - setCustomizerSaved(window.wp.customize.state('saved').get()); - - window.wp.customize.state('saved').bind((status: boolean) => { - setCustomizerSaved(status); - }); - }); - }, []); - - const options = [ - { - value: 'old', - label: __('Legacy Skin', 'neve'), - }, - { - value: 'new', - label: __('Neve 3.0', 'neve'), - }, - ]; - - const handleChange = (newVal: string) => { - setValue(newVal); - setChanged(true); - }; - - const handleSwitch = () => { - setSwitching(true); - - setVal(control, value).then(() => { - window.wp.customize.previewer.save().then(() => { - window.wp.customize.notifications.add( - new window.wp.customize.OverlayNotification( - 'neve_switching_skin', - { - message: __('Switching skin', 'neve') + '...', - type: 'success', - loading: true, - } - ) - ); - window.location.reload(); - }); - }); - }; - - return ( -
- - - {!customizerSaved && !switching && ( -

- {__( - 'Please save the current customizer settings before switching skins.' - )} -

- )} -
- ); -}; - -const setVal = async (control: WPCustomizeControl, newVal: string) => { - await control.setting.set(newVal); -}; - -export default SkinSwitcher; From 85240335bea55dc276a9b5ba8a97f33287d753a4 Mon Sep 17 00:00:00 2001 From: Bogdan Preda Date: Thu, 20 Jul 2023 17:14:49 +0300 Subject: [PATCH 08/17] chore: maintain translations --- inc/core/front_end.php | 54 ++++++++++++++++++++++++++---------------- 1 file changed, 34 insertions(+), 20 deletions(-) diff --git a/inc/core/front_end.php b/inc/core/front_end.php index d6a9fe00c2..af5fe01663 100644 --- a/inc/core/front_end.php +++ b/inc/core/front_end.php @@ -510,27 +510,41 @@ public function register_sidebars() { */ public function get_strings() { return [ - 'add_item' => __( 'Add item', 'neve' ), - 'add_items' => __( 'Add items by clicking the ones below.', 'neve' ), - 'all_selected' => __( 'All items are already selected.', 'neve' ), - 'page_layout' => __( 'Page Layout', 'neve' ), - 'page_title' => __( 'Page Title', 'neve' ), - 'upsell_components' => __( 'Upgrade to Neve Pro and unlock all components, including Wish List, Breadcrumbs, Custom Layouts and many more.', 'neve' ), - 'header_booster' => esc_html__( 'Header Booster', 'neve' ), - 'blog_booster' => esc_html__( 'Blog Booster', 'neve' ), - 'woo_booster' => esc_html__( 'WooCommerce Booster', 'neve' ), - 'custom_layouts' => esc_html__( 'Custom Layouts', 'neve' ), - 'white_label' => esc_html__( 'White Label module', 'neve' ), - 'scroll_to_top' => esc_html__( 'Scroll to Top module', 'neve' ), - 'elementor_booster' => esc_html__( 'Elementor Booster', 'neve' ), - 'ext_h_description' => esc_html__( 'Extend your header with more components and settings, build sticky/transparent headers or display them conditionally.', 'neve' ), - 'ctm_h_description' => esc_html__( 'Easily create custom headers and footers as well as adding your own custom code or content in any of the hooks locations.', 'neve' ), - 'elem_description' => esc_html__( 'Leverage the true flexibility of Elementor with powerful addons and templates that you can import with just one click.', 'neve' ), - 'get_pro_cta' => esc_html__( 'Get the PRO version!', 'neve' ), - 'opens_new_tab_des' => esc_html__( '(opens in a new tab)', 'neve' ), - 'filter' => __( 'Filter', 'neve' ), + 'add_item' => __( 'Add item', 'neve' ), + 'add_items' => __( 'Add items by clicking the ones below.', 'neve' ), + 'all_selected' => __( 'All items are already selected.', 'neve' ), + 'page_layout' => __( 'Page Layout', 'neve' ), + 'page_title' => __( 'Page Title', 'neve' ), + 'upsell_components' => __( 'Upgrade to Neve Pro and unlock all components, including Wish List, Breadcrumbs, Custom Layouts and many more.', 'neve' ), + 'header_booster' => esc_html__( 'Header Booster', 'neve' ), + 'blog_booster' => esc_html__( 'Blog Booster', 'neve' ), + 'woo_booster' => esc_html__( 'WooCommerce Booster', 'neve' ), + 'custom_layouts' => esc_html__( 'Custom Layouts', 'neve' ), + 'white_label' => esc_html__( 'White Label module', 'neve' ), + 'scroll_to_top' => esc_html__( 'Scroll to Top module', 'neve' ), + 'elementor_booster' => esc_html__( 'Elementor Booster', 'neve' ), + 'ext_h_description' => esc_html__( 'Extend your header with more components and settings, build sticky/transparent headers or display them conditionally.', 'neve' ), + 'ctm_h_description' => esc_html__( 'Easily create custom headers and footers as well as adding your own custom code or content in any of the hooks locations.', 'neve' ), + 'elem_description' => esc_html__( 'Leverage the true flexibility of Elementor with powerful addons and templates that you can import with just one click.', 'neve' ), + 'get_pro_cta' => esc_html__( 'Get the PRO version!', 'neve' ), + 'opens_new_tab_des' => esc_html__( '(opens in a new tab)', 'neve' ), + 'filter' => __( 'Filter', 'neve' ), /* translators: %s - Theme name */ - 'neve_options' => __( '%s Options', 'neve' ), + 'neve_options' => __( '%s Options', 'neve' ), + 'migrate_builder_d' => __( 'Migrating builder data', 'neve' ), + 'rollback_builder' => __( 'Rolling back builder', 'neve' ), + 'remove_old_data' => __( 'Removing old data', 'neve' ), + 'customizer_values_notice' => __( 'You must save the current customizer values before running the migration.', 'neve' ), + 'wrong_reload_notice' => __( 'Something went wrong. Please reload the page and try again.', 'neve' ), + 'rollback_to_old' => __( 'Want to roll back to the old builder?', 'neve' ), + 'new_hfg_experience' => __( "We've created a new Header/Footer Builder experience! You can always roll back to the old builder from right here.", 'neve' ), + 'manual_adjust' => __( 'Some manual adjustments may be required.', 'neve' ), + 'reload' => __( 'Reload', 'neve' ), + 'migrate' => __( 'Migrate Builders Data', 'neve' ), + 'legacy_skin' => __( 'Legacy Skin', 'neve' ), + 'neve_30' => __( 'Neve 3.0', 'neve' ), + 'switching_skin' => __( 'Switching skin', 'neve' ), + 'switch_skin' => __( 'Switch Skin', 'neve' ), ]; } From 1476dd9eebd6118761fb19eb5bceddecc47f76d7 Mon Sep 17 00:00:00 2001 From: Bogdan Preda Date: Thu, 20 Jul 2023 17:25:50 +0300 Subject: [PATCH 09/17] chore: added back missing strings --- inc/core/front_end.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/inc/core/front_end.php b/inc/core/front_end.php index af5fe01663..7329e49bfd 100644 --- a/inc/core/front_end.php +++ b/inc/core/front_end.php @@ -545,6 +545,8 @@ public function get_strings() { 'neve_30' => __( 'Neve 3.0', 'neve' ), 'switching_skin' => __( 'Switching skin', 'neve' ), 'switch_skin' => __( 'Switch Skin', 'neve' ), + 'dismiss' => __( 'Dismiss', 'neve' ), + 'rollback' => __( 'Roll Back', 'neve' ), ]; } From 7a4a630cf19ba15c0d5a66586f54d9a95b9a421c Mon Sep 17 00:00:00 2001 From: Bogdan Preda Date: Thu, 20 Jul 2023 17:55:24 +0300 Subject: [PATCH 10/17] chore: remove migrate endpoint --- inc/core/admin.php | 48 ---------------------------------------------- 1 file changed, 48 deletions(-) diff --git a/inc/core/admin.php b/inc/core/admin.php index 327cade76d..a8bf8cde2f 100644 --- a/inc/core/admin.php +++ b/inc/core/admin.php @@ -276,18 +276,6 @@ public function adapt_conditional_headers( $array ) { * Register Rest Routes. */ public function register_rest_routes() { - register_rest_route( - 'nv/migration', - '/new_header_builder', - array( - 'methods' => \WP_REST_Server::READABLE, - 'callback' => [ $this, 'migrate_builders_data' ], - 'permission_callback' => function () { - return current_user_can( 'manage_options' ); - }, - ) - ); - register_rest_route( 'nv/v1/dashboard', '/plugin-state/(?P[a-z0-9-]+)', @@ -306,42 +294,6 @@ public function register_rest_routes() { ); } - /** - * Migration routine request. - * - * @param \WP_REST_Request $request the received request. - * - * @return \WP_REST_Response - * - * @since 3.0.0 - */ - public function migrate_builders_data( \WP_REST_Request $request ) { - $is_rollback = $request->get_header( 'rollback' ); - $is_dismiss = $request->get_header( 'dismiss' ); - - if ( $is_dismiss === 'yes' ) { - remove_theme_mod( 'hfg_header_layout' ); - remove_theme_mod( 'hfg_footer_layout' ); - - return new \WP_REST_Response( [ 'success' => true ], 200 ); - } - - if ( $is_rollback === 'yes' ) { - set_theme_mod( 'neve_migrated_builders', false ); - - return new \WP_REST_Response( [ 'success' => true ], 200 ); - } - - $migrator = new Builder_Migrator(); - $response = $migrator->run(); - - if ( $response === true ) { - set_theme_mod( 'neve_migrated_builders', true ); - } - - return new \WP_REST_Response( [ 'success' => $response ], 200 ); - } - /** * Get any plugin's state. * From ca2e69c109f0314ba0696eef6c8b8e609f8a8d6b Mon Sep 17 00:00:00 2001 From: cristian-ungureanu Date: Thu, 3 Aug 2023 15:43:43 +0300 Subject: [PATCH 11/17] feat: add control for fontsize for site title and tagline [#3914] --- .../elements/navigation/_nav-brand.scss | 3 +- ...rol-setup.json => hfg-logo-component.json} | 24 ++-- .../hfg/hfg-alignment-control.spec.ts | 59 --------- .../customizer/hfg/hfg-logo-component.spec.ts | 123 ++++++++++++++++++ header-footer-grid/Core/Components/Logo.php | 102 +++++++++++++++ 5 files changed, 242 insertions(+), 69 deletions(-) rename e2e-tests/fixtures/customizer/hfg/{alignment-control-setup.json => hfg-logo-component.json} (58%) delete mode 100644 e2e-tests/specs/customizer/hfg/hfg-alignment-control.spec.ts create mode 100644 e2e-tests/specs/customizer/hfg/hfg-logo-component.spec.ts diff --git a/assets/scss/components/elements/navigation/_nav-brand.scss b/assets/scss/components/elements/navigation/_nav-brand.scss index e69b6fa689..6d40e64c31 100644 --- a/assets/scss/components/elements/navigation/_nav-brand.scss +++ b/assets/scss/components/elements/navigation/_nav-brand.scss @@ -26,7 +26,7 @@ h1, p { - font-size: 24px; + font-size: var(--titlefs); font-weight: var(--h1fontweight); line-height: var(--bodylineheight); letter-spacing: var(--bodyletterspacing); @@ -36,5 +36,6 @@ small { display: block; + font-size: var(--taglinefs, smaller); } } diff --git a/e2e-tests/fixtures/customizer/hfg/alignment-control-setup.json b/e2e-tests/fixtures/customizer/hfg/hfg-logo-component.json similarity index 58% rename from e2e-tests/fixtures/customizer/hfg/alignment-control-setup.json rename to e2e-tests/fixtures/customizer/hfg/hfg-logo-component.json index 2012958ef1..c56c30689f 100644 --- a/e2e-tests/fixtures/customizer/hfg/alignment-control-setup.json +++ b/e2e-tests/fixtures/customizer/hfg/hfg-logo-component.json @@ -11,15 +11,15 @@ } }, "right": { - "neve_ran_builder_migration": true, - "neve_migrated_builders": true, - "neve_migrated_hfg_colors": true, - "hfg_header_layout_v2": "{\"desktop\":{\"top\":{\"left\":[],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[]},\"main\":{\"left\":[{\"id\":\"logo\"}],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[{\"id\":\"primary-menu\"}]},\"bottom\":{\"left\":[],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[]}},\"mobile\":{\"top\":{\"left\":[],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[]},\"main\":{\"left\":[{\"id\":\"logo\"}],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[{\"id\":\"nav-icon\"}]},\"bottom\":{\"left\":[],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[]},\"sidebar\":[{\"id\":\"primary-menu\"}]}}", - "logo_component_align": { - "mobile": "left", - "tablet": "left", - "desktop": "right" - } + "neve_ran_builder_migration": true, + "neve_migrated_builders": true, + "neve_migrated_hfg_colors": true, + "hfg_header_layout_v2": "{\"desktop\":{\"top\":{\"left\":[],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[]},\"main\":{\"left\":[{\"id\":\"logo\"}],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[{\"id\":\"primary-menu\"}]},\"bottom\":{\"left\":[],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[]}},\"mobile\":{\"top\":{\"left\":[],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[]},\"main\":{\"left\":[{\"id\":\"logo\"}],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[{\"id\":\"nav-icon\"}]},\"bottom\":{\"left\":[],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[]},\"sidebar\":[{\"id\":\"primary-menu\"}]}}", + "logo_component_align": { + "mobile": "left", + "tablet": "left", + "desktop": "right" + } }, "left": { "neve_ran_builder_migration": true, @@ -31,5 +31,11 @@ "tablet": "left", "desktop": "left" } + }, + "style": { + "blogdescription" : "Testing tagline", + "logo_title_font_size" : "{\"mobile\":65,\"tablet\":4.1,\"desktop\":3.5,\"suffix\":{\"mobile\":\"px\",\"desktop\":\"em\",\"tablet\":\"rem\"}}", + "logo_tagline_font_size" : "{\"mobile\":2.9,\"tablet\":0.9,\"desktop\":30,\"suffix\":{\"mobile\":\"rem\",\"desktop\":\"px\",\"tablet\":\"em\"}}", + "logo_color" : "#ff0000" } } diff --git a/e2e-tests/specs/customizer/hfg/hfg-alignment-control.spec.ts b/e2e-tests/specs/customizer/hfg/hfg-alignment-control.spec.ts deleted file mode 100644 index b93ec1e198..0000000000 --- a/e2e-tests/specs/customizer/hfg/hfg-alignment-control.spec.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { test, expect } from '@playwright/test'; -import { setCustomizeSettings } from '../../../utils'; -import data from '../../../fixtures/customizer/hfg/alignment-control-setup.json'; - -test.describe('Header Builder Alignment Control', function () { - test('Checks alignment for the Logo to Center', async ({ - page, - request, - baseURL, - }) => { - await setCustomizeSettings('hfgLogoCenter', data.center, { - request, - baseURL, - }); - - await page.goto('/?test_name=hfgLogoCenter'); - const siteLogo = await page.locator( - '.nv-navbar.hide-on-mobile .site-logo' - ); - await expect(siteLogo).toBeVisible(); - await expect(siteLogo).toHaveCSS('text-align', 'center'); - }); - - test('Checks alignment for the Logo to Right', async ({ - page, - request, - baseURL, - }) => { - await setCustomizeSettings('hfgLogoRight', data.right, { - request, - baseURL, - }); - - await page.goto('/?test_name=hfgLogoRight'); - const siteLogo = await page.locator( - '.nv-navbar.hide-on-mobile .site-logo' - ); - await expect(siteLogo).toBeVisible(); - await expect(siteLogo).toHaveCSS('text-align', 'right'); - }); - - test('Checks alignment for the Logo to Left', async ({ - page, - request, - baseURL, - }) => { - await setCustomizeSettings('hfgLogoLeft', data.left, { - request, - baseURL, - }); - - await page.goto('/?test_name=hfgLogoLeft'); - const siteLogo = await page.locator( - '.nv-navbar.hide-on-mobile .site-logo' - ); - await expect(siteLogo).toBeVisible(); - await expect(siteLogo).toHaveCSS('text-align', 'left'); - }); -}); diff --git a/e2e-tests/specs/customizer/hfg/hfg-logo-component.spec.ts b/e2e-tests/specs/customizer/hfg/hfg-logo-component.spec.ts new file mode 100644 index 0000000000..a79c930640 --- /dev/null +++ b/e2e-tests/specs/customizer/hfg/hfg-logo-component.spec.ts @@ -0,0 +1,123 @@ +import { test, expect, APIRequestContext, Page } from '@playwright/test'; +import { setCustomizeSettings, testForViewport } from '../../../utils'; +import data from '../../../fixtures/customizer/hfg/hfg-logo-component.json'; + +interface TestOptions { + page: Page; + request: APIRequestContext; + baseURL?: string; +} + +interface LogoComponentData { + center: { + // Define the shape of 'center' data + }; + right: { + // Define the shape of 'right' data + }; + left: { + // Define the shape of 'left' data + }; + style: { + // Define the shape of 'style' data + }; + // Add more properties as needed +} + +test.describe('Header Builder - Logo Component', function () { + test('Checks alignment for the Logo', async ({ + page, + request, + baseURL, + }) => { + await testAlignment('Center', data, { page, request, baseURL }); + await testAlignment('Right', data, { page, request, baseURL }); + await testAlignment('Left', data, { page, request, baseURL }); + }); + + test('Checks the style of the Logo', async ({ page, request, baseURL }) => { + await setCustomizeSettings('logoStyle', data.style, { + request, + baseURL, + }); + + await page.goto('/?test_name=logoStyle'); + + await testForViewport( + page, + '.site-title', + { width: 1536, height: 960 }, + { + cssProperties: [ + { property: 'font-size', value: '56px' }, + { property: 'color', value: 'rgb(255, 0, 0)' }, + ], + } + ); + + await testForViewport( + page, + '.site-title', + { width: 768, height: 1024 }, + { + cssProperties: [{ property: 'font-size', value: '65.6px' }], + } + ); + + await testForViewport( + page, + '.site-title', + { width: 375, height: 812 }, + { + cssProperties: [{ property: 'font-size', value: '65px' }], + } + ); + + await testForViewport( + page, + '.nv-title-tagline-wrap small', + { width: 1536, height: 960 }, + { + cssProperties: [{ property: 'font-size', value: '30px' }], + } + ); + + await testForViewport( + page, + '.nv-title-tagline-wrap small', + { width: 768, height: 1024 }, + { + cssProperties: [{ property: 'font-size', value: '14.4px' }], + } + ); + + await testForViewport( + page, + '.nv-title-tagline-wrap small', + { width: 375, height: 812 }, + { + cssProperties: [{ property: 'font-size', value: '46.4px' }], + } + ); + }); +}); + +async function testAlignment( + alignment: 'Center' | 'Right' | 'Left', + testData: LogoComponentData, + { page, request, baseURL }: TestOptions +) { + await setCustomizeSettings( + `hfgLogo${alignment}`, + testData[alignment.toLowerCase() as keyof LogoComponentData], + { + request, + baseURL, + } + ); + + await page.goto(`/?test_name=hfgLogo${alignment}`); + const siteLogo = await page.locator('.nv-navbar.hide-on-mobile .site-logo'); + await expect(siteLogo).toBeVisible(); + await expect(siteLogo).toHaveCSS('text-align', alignment.toLowerCase()); +} diff --git a/header-footer-grid/Core/Components/Logo.php b/header-footer-grid/Core/Components/Logo.php index 2e36cb6540..bd4d2f6c65 100644 --- a/header-footer-grid/Core/Components/Logo.php +++ b/header-footer-grid/Core/Components/Logo.php @@ -38,6 +38,8 @@ class Logo extends Abstract_Component { const SHOW_TAGLINE = 'show_tagline'; const DISABLE_LINK = 'disable_link'; const COLOR_ID = 'color'; + const TITLE_FONT_SIZE = 'title_font_size'; + const TAGLINE_FONT_SIZE = 'tagline_font_size'; /** * Default spacing value @@ -469,6 +471,95 @@ public function add_settings() { 'conditional_header' => true, ] ); + + SettingsManager::get_instance()->add( + [ + 'id' => self::TITLE_FONT_SIZE, + 'group' => $this->get_class_const( 'COMPONENT_ID' ), + 'tab' => SettingsManager::TAB_STYLE, + 'transport' => 'post' . $this->get_class_const( 'COMPONENT_ID' ), + 'sanitize_callback' => 'neve_sanitize_range_value', + 'default' => '{ "mobile": "24", "tablet": "24", "desktop": "24" }', + 'label' => __( 'Site Title', 'neve' ) . ' ' . __( 'Font Size', 'neve' ), + 'type' => '\Neve\Customizer\Controls\React\Responsive_Range', + 'live_refresh_selector' => true, + 'live_refresh_css_prop' => [ + 'cssVar' => [ + 'vars' => '--titlefs', + 'selector' => $this->default_selector . ' .brand .nv-title-tagline-wrap', + 'responsive' => true, + 'suffix' => 'px', + ], + ], + 'options' => [ + 'hide_responsive_switches' => true, + 'media_query' => true, + 'step' => 1, + 'input_attrs' => [ + 'min' => 0, + 'max' => 100, + 'units' => [ 'px', 'em', 'rem' ], + 'defaultVal' => [ + 'mobile' => 24, + 'tablet' => 24, + 'desktop' => 24, + 'suffix' => [ + 'mobile' => 'px', + 'tablet' => 'px', + 'desktop' => 'px', + ], + ], + ], + ], + 'section' => $this->section, + 'conditional_header' => true, + ] + ); + + SettingsManager::get_instance()->add( + [ + 'id' => self::TAGLINE_FONT_SIZE, + 'group' => $this->get_class_const( 'COMPONENT_ID' ), + 'tab' => SettingsManager::TAB_STYLE, + 'transport' => 'post' . $this->get_class_const( 'COMPONENT_ID' ), + 'sanitize_callback' => 'neve_sanitize_range_value', + 'default' => '{ "mobile": "", "tablet": "", "desktop": "" }', + 'label' => __( 'Site Tagline', 'neve' ) . ' ' . __( 'Font Size', 'neve' ), + 'type' => '\Neve\Customizer\Controls\React\Responsive_Range', + 'live_refresh_selector' => true, + 'live_refresh_css_prop' => [ + 'cssVar' => [ + 'vars' => '--taglinefs', + 'selector' => $this->default_selector . ' .brand .nv-title-tagline-wrap', + 'responsive' => true, + 'suffix' => 'px', + ], + ], + 'options' => [ + 'hide_responsive_switches' => true, + 'media_query' => true, + 'step' => 1, + 'input_attrs' => [ + 'min' => 0, + 'max' => 100, + 'units' => [ 'px', 'em', 'rem' ], + 'defaultVal' => [ + 'mobile' => '', + 'tablet' => '', + 'desktop' => '', + 'suffix' => [ + 'mobile' => 'px', + 'tablet' => 'px', + 'desktop' => 'px', + ], + ], + ], + ], + 'section' => $this->section, + 'conditional_header' => true, + ] + ); + SettingsManager::get_instance()->add( [ 'id' => self::COLOR_ID, @@ -526,6 +617,17 @@ public function add_style( array $css_array = array() ) { '--color' => [ Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::COLOR_ID, ], + '--titlefs' => [ + Dynamic_Selector::META_IS_RESPONSIVE => true, + Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::TITLE_FONT_SIZE, + Dynamic_Selector::META_SUFFIX => 'responsive_suffix', + Dynamic_Selector::META_DEFAULT => '{ "mobile": "24", "tablet": "24", "desktop": "24" }', + ], + '--taglinefs' => [ + Dynamic_Selector::META_IS_RESPONSIVE => true, + Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::TAGLINE_FONT_SIZE, + Dynamic_Selector::META_SUFFIX => 'responsive_suffix', + ] ], ]; From fb597bc116e799663170ea98d8564c493554a701 Mon Sep 17 00:00:00 2001 From: cristian-ungureanu Date: Thu, 3 Aug 2023 16:03:41 +0300 Subject: [PATCH 12/17] chore: fix phpcs --- header-footer-grid/Core/Components/Logo.php | 74 ++++++++++----------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/header-footer-grid/Core/Components/Logo.php b/header-footer-grid/Core/Components/Logo.php index bd4d2f6c65..62eae7e2e5 100644 --- a/header-footer-grid/Core/Components/Logo.php +++ b/header-footer-grid/Core/Components/Logo.php @@ -28,17 +28,17 @@ class Logo extends Abstract_Component { - const COMPONENT_ID = 'logo'; - const LOGO = 'logo'; - const CUSTOM_LOGO = 'custom_logo'; - const USE_SAME = 'same_logo'; - const DISPLAY = 'display'; - const MAX_WIDTH = 'max_width'; - const SHOW_TITLE = 'show_title'; - const SHOW_TAGLINE = 'show_tagline'; - const DISABLE_LINK = 'disable_link'; - const COLOR_ID = 'color'; - const TITLE_FONT_SIZE = 'title_font_size'; + const COMPONENT_ID = 'logo'; + const LOGO = 'logo'; + const CUSTOM_LOGO = 'custom_logo'; + const USE_SAME = 'same_logo'; + const DISPLAY = 'display'; + const MAX_WIDTH = 'max_width'; + const SHOW_TITLE = 'show_title'; + const SHOW_TAGLINE = 'show_tagline'; + const DISABLE_LINK = 'disable_link'; + const COLOR_ID = 'color'; + const TITLE_FONT_SIZE = 'title_font_size'; const TAGLINE_FONT_SIZE = 'tagline_font_size'; /** @@ -474,14 +474,14 @@ public function add_settings() { SettingsManager::get_instance()->add( [ - 'id' => self::TITLE_FONT_SIZE, - 'group' => $this->get_class_const( 'COMPONENT_ID' ), - 'tab' => SettingsManager::TAB_STYLE, - 'transport' => 'post' . $this->get_class_const( 'COMPONENT_ID' ), - 'sanitize_callback' => 'neve_sanitize_range_value', - 'default' => '{ "mobile": "24", "tablet": "24", "desktop": "24" }', - 'label' => __( 'Site Title', 'neve' ) . ' ' . __( 'Font Size', 'neve' ), - 'type' => '\Neve\Customizer\Controls\React\Responsive_Range', + 'id' => self::TITLE_FONT_SIZE, + 'group' => $this->get_class_const( 'COMPONENT_ID' ), + 'tab' => SettingsManager::TAB_STYLE, + 'transport' => 'post' . $this->get_class_const( 'COMPONENT_ID' ), + 'sanitize_callback' => 'neve_sanitize_range_value', + 'default' => '{ "mobile": "24", "tablet": "24", "desktop": "24" }', + 'label' => __( 'Site Title', 'neve' ) . ' ' . __( 'Font Size', 'neve' ), + 'type' => '\Neve\Customizer\Controls\React\Responsive_Range', 'live_refresh_selector' => true, 'live_refresh_css_prop' => [ 'cssVar' => [ @@ -491,7 +491,7 @@ public function add_settings() { 'suffix' => 'px', ], ], - 'options' => [ + 'options' => [ 'hide_responsive_switches' => true, 'media_query' => true, 'step' => 1, @@ -511,21 +511,21 @@ public function add_settings() { ], ], ], - 'section' => $this->section, - 'conditional_header' => true, + 'section' => $this->section, + 'conditional_header' => true, ] ); SettingsManager::get_instance()->add( [ - 'id' => self::TAGLINE_FONT_SIZE, - 'group' => $this->get_class_const( 'COMPONENT_ID' ), - 'tab' => SettingsManager::TAB_STYLE, - 'transport' => 'post' . $this->get_class_const( 'COMPONENT_ID' ), - 'sanitize_callback' => 'neve_sanitize_range_value', - 'default' => '{ "mobile": "", "tablet": "", "desktop": "" }', - 'label' => __( 'Site Tagline', 'neve' ) . ' ' . __( 'Font Size', 'neve' ), - 'type' => '\Neve\Customizer\Controls\React\Responsive_Range', + 'id' => self::TAGLINE_FONT_SIZE, + 'group' => $this->get_class_const( 'COMPONENT_ID' ), + 'tab' => SettingsManager::TAB_STYLE, + 'transport' => 'post' . $this->get_class_const( 'COMPONENT_ID' ), + 'sanitize_callback' => 'neve_sanitize_range_value', + 'default' => '{ "mobile": "", "tablet": "", "desktop": "" }', + 'label' => __( 'Site Tagline', 'neve' ) . ' ' . __( 'Font Size', 'neve' ), + 'type' => '\Neve\Customizer\Controls\React\Responsive_Range', 'live_refresh_selector' => true, 'live_refresh_css_prop' => [ 'cssVar' => [ @@ -535,7 +535,7 @@ public function add_settings() { 'suffix' => 'px', ], ], - 'options' => [ + 'options' => [ 'hide_responsive_switches' => true, 'media_query' => true, 'step' => 1, @@ -555,8 +555,8 @@ public function add_settings() { ], ], ], - 'section' => $this->section, - 'conditional_header' => true, + 'section' => $this->section, + 'conditional_header' => true, ] ); @@ -608,16 +608,16 @@ public function add_style( array $css_array = array() ) { $css_array[] = [ Dynamic_Selector::KEY_SELECTOR => '.builder-item--' . $this->get_id(), Dynamic_Selector::KEY_RULES => [ - '--maxwidth' => [ + '--maxwidth' => [ Dynamic_Selector::META_IS_RESPONSIVE => true, Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::MAX_WIDTH, Dynamic_Selector::META_SUFFIX => 'responsive_suffix', Dynamic_Selector::META_DEFAULT => '{ "mobile": "120", "tablet": "120", "desktop": "120" }', ], - '--color' => [ + '--color' => [ Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::COLOR_ID, ], - '--titlefs' => [ + '--titlefs' => [ Dynamic_Selector::META_IS_RESPONSIVE => true, Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::TITLE_FONT_SIZE, Dynamic_Selector::META_SUFFIX => 'responsive_suffix', @@ -627,7 +627,7 @@ public function add_style( array $css_array = array() ) { Dynamic_Selector::META_IS_RESPONSIVE => true, Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::TAGLINE_FONT_SIZE, Dynamic_Selector::META_SUFFIX => 'responsive_suffix', - ] + ], ], ]; From 9a4bfebd3cd03544b512abfaaeb1590a63e07c09 Mon Sep 17 00:00:00 2001 From: cristian-ungureanu Date: Thu, 3 Aug 2023 16:50:36 +0300 Subject: [PATCH 13/17] chore: remove font size for the tagline --- .../elements/navigation/_nav-brand.scss | 3 +- .../customizer/hfg/hfg-logo-component.spec.ts | 27 --------- header-footer-grid/Core/Components/Logo.php | 57 ++----------------- 3 files changed, 5 insertions(+), 82 deletions(-) diff --git a/assets/scss/components/elements/navigation/_nav-brand.scss b/assets/scss/components/elements/navigation/_nav-brand.scss index 6d40e64c31..b64920c713 100644 --- a/assets/scss/components/elements/navigation/_nav-brand.scss +++ b/assets/scss/components/elements/navigation/_nav-brand.scss @@ -26,7 +26,7 @@ h1, p { - font-size: var(--titlefs); + font-size: var(--fs); font-weight: var(--h1fontweight); line-height: var(--bodylineheight); letter-spacing: var(--bodyletterspacing); @@ -36,6 +36,5 @@ small { display: block; - font-size: var(--taglinefs, smaller); } } diff --git a/e2e-tests/specs/customizer/hfg/hfg-logo-component.spec.ts b/e2e-tests/specs/customizer/hfg/hfg-logo-component.spec.ts index a79c930640..50966160b1 100644 --- a/e2e-tests/specs/customizer/hfg/hfg-logo-component.spec.ts +++ b/e2e-tests/specs/customizer/hfg/hfg-logo-component.spec.ts @@ -72,33 +72,6 @@ test.describe('Header Builder - Logo Component', function () { cssProperties: [{ property: 'font-size', value: '65px' }], } ); - - await testForViewport( - page, - '.nv-title-tagline-wrap small', - { width: 1536, height: 960 }, - { - cssProperties: [{ property: 'font-size', value: '30px' }], - } - ); - - await testForViewport( - page, - '.nv-title-tagline-wrap small', - { width: 768, height: 1024 }, - { - cssProperties: [{ property: 'font-size', value: '14.4px' }], - } - ); - - await testForViewport( - page, - '.nv-title-tagline-wrap small', - { width: 375, height: 812 }, - { - cssProperties: [{ property: 'font-size', value: '46.4px' }], - } - ); }); }); diff --git a/header-footer-grid/Core/Components/Logo.php b/header-footer-grid/Core/Components/Logo.php index 62eae7e2e5..0132501238 100644 --- a/header-footer-grid/Core/Components/Logo.php +++ b/header-footer-grid/Core/Components/Logo.php @@ -485,7 +485,7 @@ public function add_settings() { 'live_refresh_selector' => true, 'live_refresh_css_prop' => [ 'cssVar' => [ - 'vars' => '--titlefs', + 'vars' => '--fs', 'selector' => $this->default_selector . ' .brand .nv-title-tagline-wrap', 'responsive' => true, 'suffix' => 'px', @@ -516,50 +516,6 @@ public function add_settings() { ] ); - SettingsManager::get_instance()->add( - [ - 'id' => self::TAGLINE_FONT_SIZE, - 'group' => $this->get_class_const( 'COMPONENT_ID' ), - 'tab' => SettingsManager::TAB_STYLE, - 'transport' => 'post' . $this->get_class_const( 'COMPONENT_ID' ), - 'sanitize_callback' => 'neve_sanitize_range_value', - 'default' => '{ "mobile": "", "tablet": "", "desktop": "" }', - 'label' => __( 'Site Tagline', 'neve' ) . ' ' . __( 'Font Size', 'neve' ), - 'type' => '\Neve\Customizer\Controls\React\Responsive_Range', - 'live_refresh_selector' => true, - 'live_refresh_css_prop' => [ - 'cssVar' => [ - 'vars' => '--taglinefs', - 'selector' => $this->default_selector . ' .brand .nv-title-tagline-wrap', - 'responsive' => true, - 'suffix' => 'px', - ], - ], - 'options' => [ - 'hide_responsive_switches' => true, - 'media_query' => true, - 'step' => 1, - 'input_attrs' => [ - 'min' => 0, - 'max' => 100, - 'units' => [ 'px', 'em', 'rem' ], - 'defaultVal' => [ - 'mobile' => '', - 'tablet' => '', - 'desktop' => '', - 'suffix' => [ - 'mobile' => 'px', - 'tablet' => 'px', - 'desktop' => 'px', - ], - ], - ], - ], - 'section' => $this->section, - 'conditional_header' => true, - ] - ); - SettingsManager::get_instance()->add( [ 'id' => self::COLOR_ID, @@ -608,26 +564,21 @@ public function add_style( array $css_array = array() ) { $css_array[] = [ Dynamic_Selector::KEY_SELECTOR => '.builder-item--' . $this->get_id(), Dynamic_Selector::KEY_RULES => [ - '--maxwidth' => [ + '--maxwidth' => [ Dynamic_Selector::META_IS_RESPONSIVE => true, Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::MAX_WIDTH, Dynamic_Selector::META_SUFFIX => 'responsive_suffix', Dynamic_Selector::META_DEFAULT => '{ "mobile": "120", "tablet": "120", "desktop": "120" }', ], - '--color' => [ + '--color' => [ Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::COLOR_ID, ], - '--titlefs' => [ + '--fs' => [ Dynamic_Selector::META_IS_RESPONSIVE => true, Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::TITLE_FONT_SIZE, Dynamic_Selector::META_SUFFIX => 'responsive_suffix', Dynamic_Selector::META_DEFAULT => '{ "mobile": "24", "tablet": "24", "desktop": "24" }', ], - '--taglinefs' => [ - Dynamic_Selector::META_IS_RESPONSIVE => true, - Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::TAGLINE_FONT_SIZE, - Dynamic_Selector::META_SUFFIX => 'responsive_suffix', - ], ], ]; From 42508bf9e4f4bd4990aaeeef2c281358c8b2dc4f Mon Sep 17 00:00:00 2001 From: cristian-ungureanu Date: Fri, 15 Sep 2023 18:50:21 +0300 Subject: [PATCH 14/17] chore: small change to trigger processes --- inc/core/admin.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/inc/core/admin.php b/inc/core/admin.php index 39f3d009f5..fcb65272ac 100644 --- a/inc/core/admin.php +++ b/inc/core/admin.php @@ -162,7 +162,7 @@ private function maybe_register_notice_script_starter_sites() { } /** - * Register script for react components. + * Register the script for react components. */ public function register_react_components() { $this->maybe_register_notice_script_starter_sites(); From 26debd616e69429686de263f2860a08100d09638 Mon Sep 17 00:00:00 2001 From: cristian-ungureanu Date: Mon, 18 Sep 2023 18:51:50 +0300 Subject: [PATCH 15/17] chore: update themeisle-sdk --- composer-dev.lock | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/composer-dev.lock b/composer-dev.lock index 68ab18c5fe..fba12fbe27 100644 --- a/composer-dev.lock +++ b/composer-dev.lock @@ -8,16 +8,16 @@ "packages": [ { "name": "codeinwp/themeisle-sdk", - "version": "3.3.3", + "version": "3.3.4", "source": { "type": "git", "url": "https://github.com/Codeinwp/themeisle-sdk.git", - "reference": "4f7e367b6a33b41ced763e261e7a3dc3342f6330" + "reference": "871adb3e4617c408bb6a48f6cb8156b99c8de98a" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/Codeinwp/themeisle-sdk/zipball/4f7e367b6a33b41ced763e261e7a3dc3342f6330", - "reference": "4f7e367b6a33b41ced763e261e7a3dc3342f6330", + "url": "https://api.github.com/repos/Codeinwp/themeisle-sdk/zipball/871adb3e4617c408bb6a48f6cb8156b99c8de98a", + "reference": "871adb3e4617c408bb6a48f6cb8156b99c8de98a", "shasum": "" }, "require-dev": { @@ -42,9 +42,9 @@ ], "support": { "issues": "https://github.com/Codeinwp/themeisle-sdk/issues", - "source": "https://github.com/Codeinwp/themeisle-sdk/tree/v3.3.3" + "source": "https://github.com/Codeinwp/themeisle-sdk/tree/v3.3.4" }, - "time": "2023-08-22T07:22:05+00:00" + "time": "2023-09-18T15:48:59+00:00" }, { "name": "wptt/webfont-loader", From a0a736c0da1876c4fbb15924419c45070d507eca Mon Sep 17 00:00:00 2001 From: cristian-ungureanu Date: Mon, 18 Sep 2023 18:54:40 +0300 Subject: [PATCH 16/17] chore: update themeisle-sdk --- composer.lock | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/composer.lock b/composer.lock index ee9fc4d5a9..9a05fe45df 100644 --- a/composer.lock +++ b/composer.lock @@ -8,16 +8,16 @@ "packages": [ { "name": "codeinwp/themeisle-sdk", - "version": "3.3.3", + "version": "3.3.4", "source": { "type": "git", "url": "https://github.com/Codeinwp/themeisle-sdk.git", - "reference": "4f7e367b6a33b41ced763e261e7a3dc3342f6330" + "reference": "871adb3e4617c408bb6a48f6cb8156b99c8de98a" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/Codeinwp/themeisle-sdk/zipball/4f7e367b6a33b41ced763e261e7a3dc3342f6330", - "reference": "4f7e367b6a33b41ced763e261e7a3dc3342f6330", + "url": "https://api.github.com/repos/Codeinwp/themeisle-sdk/zipball/871adb3e4617c408bb6a48f6cb8156b99c8de98a", + "reference": "871adb3e4617c408bb6a48f6cb8156b99c8de98a", "shasum": "" }, "require-dev": { @@ -42,9 +42,9 @@ ], "support": { "issues": "https://github.com/Codeinwp/themeisle-sdk/issues", - "source": "https://github.com/Codeinwp/themeisle-sdk/tree/v3.3.3" + "source": "https://github.com/Codeinwp/themeisle-sdk/tree/v3.3.4" }, - "time": "2023-08-22T07:22:05+00:00" + "time": "2023-09-18T15:48:59+00:00" }, { "name": "wptt/webfont-loader", From cff784e5f2366c0b4cf59886ab7e19904d9dcf2f Mon Sep 17 00:00:00 2001 From: cristian-ungureanu Date: Mon, 25 Sep 2023 11:03:53 +0300 Subject: [PATCH 17/17] chore: update compatibility version --- functions.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/functions.php b/functions.php index 953ef3ec36..21b19d2992 100644 --- a/functions.php +++ b/functions.php @@ -113,7 +113,7 @@ function ( $compatibilities ) { $compatibilities['NevePro'] = [ 'basefile' => defined( 'NEVE_PRO_BASEFILE' ) ? NEVE_PRO_BASEFILE : '', 'required' => '2.3', - 'tested_up' => '2.6', + 'tested_up' => '2.7', ]; return $compatibilities;