diff --git a/assets/scss/components/elements/navigation/_nav-brand.scss b/assets/scss/components/elements/navigation/_nav-brand.scss index e69b6fa689..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: 24px; + font-size: var(--fs); font-weight: var(--h1fontweight); line-height: var(--bodylineheight); letter-spacing: var(--bodyletterspacing); 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..50966160b1 --- /dev/null +++ b/e2e-tests/specs/customizer/hfg/hfg-logo-component.spec.ts @@ -0,0 +1,96 @@ +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' }], + } + ); + }); +}); + +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..0132501238 100644 --- a/header-footer-grid/Core/Components/Logo.php +++ b/header-footer-grid/Core/Components/Logo.php @@ -28,16 +28,18 @@ 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 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'; /** * Default spacing value @@ -469,6 +471,51 @@ 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' => '--fs', + '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::COLOR_ID, @@ -526,6 +573,12 @@ public function add_style( array $css_array = array() ) { '--color' => [ Dynamic_Selector::META_KEY => $this->get_id() . '_' . self::COLOR_ID, ], + '--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" }', + ], ], ];