Skip to content

Commit

Permalink
Merge pull request #4060 from Codeinwp/feat/site-title-font-size
Browse files Browse the repository at this point in the history
Site title font size
  • Loading branch information
cristian-ungureanu authored Sep 15, 2023
2 parents 1243a00 + 9a4bfeb commit 4b74936
Show file tree
Hide file tree
Showing 5 changed files with 175 additions and 79 deletions.
2 changes: 1 addition & 1 deletion assets/scss/components/elements/navigation/_nav-brand.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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"
}
}
59 changes: 0 additions & 59 deletions e2e-tests/specs/customizer/hfg/hfg-alignment-control.spec.ts

This file was deleted.

96 changes: 96 additions & 0 deletions e2e-tests/specs/customizer/hfg/hfg-logo-component.spec.ts
Original file line number Diff line number Diff line change
@@ -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());
}
73 changes: 63 additions & 10 deletions header-footer-grid/Core/Components/Logo.php
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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" }',
],
],
];

Expand Down

0 comments on commit 4b74936

Please sign in to comment.