Skip to content

Commit ee0acca

Browse files
Arukuenbfintal
Arukuen
and
bfintal
authored
feat: global font pairs (#3449)
* feat: inspector-sub-header for new global settings * fix: use onClick properly * feat: global font pairs * fix: use new scraped font pairs; adjust code to simpler json structure * fix: make scrolling to current font pair independent from current view * fix: rename stackable_font_pair_name to stackable_selected_font_pair * fix: rename stackable_font_pair_name to stackable_selected_font_pair, reset previous commit * fix: move bulk of code to FontPairPicker, restructure with consistent naming * feat: separate pro features * fix: proper resetting in editingMode and in not * feat: add confirmation when changing font pair while dirty * styling tweaks * fix: make typography settings headings consistent * fix: error when no previously selected font pair * fix: pro notice update, translation, renaming default theme * fix: move editingMode to pro code * fix: error when resetting * fix: reset display bug * feat: inspector-sub-header for new global settings * fix: use onClick properly * feat: global font pairs * fix: use new scraped font pairs; adjust code to simpler json structure * fix: make scrolling to current font pair independent from current view * fix: rename stackable_font_pair_name to stackable_selected_font_pair * fix: rename stackable_font_pair_name to stackable_selected_font_pair, reset previous commit * fix: move bulk of code to FontPairPicker, restructure with consistent naming * feat: separate pro features * styling tweaks * fix: proper resetting in editingMode and in not * feat: add confirmation when changing font pair while dirty * fix: make typography settings headings consistent * fix: error when no previously selected font pair * fix: pro notice update, translation, renaming default theme * fix: move editingMode to pro code * fix: error when resetting * fix: reset display bug * Revert "Merge branch 'feat/3448-global-font-pairs' of https://github.com/gambitph/Stackable into feat/3448-global-font-pairs" This reverts commit 52ca1c1, reversing changes made to 889ed65. * fix: pro notice button * undo change [skip ci] * fixed scrolling the selected font since it only works for the first time * changed notice text * fix: override allowReset instead * fix: set the font family of current font pair as default --------- Co-authored-by: [email protected] <> Co-authored-by: Benjamin Intal <[email protected]>
1 parent de88498 commit ee0acca

File tree

12 files changed

+3403
-78
lines changed

12 files changed

+3403
-78
lines changed

‎src/components/advanced-autosuggest-control/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -223,9 +223,10 @@ class AdvancedAutosuggestControl extends Component {
223223
label={ this.props.label }
224224
screens={ this.props.screens }
225225
value={ this.props.value }
226+
defaultValue={ this.props?.defaultValue ?? '' }
226227
onChange={ value => { // Will be used to reset.
227-
if ( value === '' ) {
228-
this.onChange( null, { newValue: '' } )
228+
if ( value === '' || this.props?.defaultValue ) {
229+
this.onChange( null, { newValue: value } )
229230
}
230231
} }
231232
allowReset={ this.props.allowReset }

‎src/components/font-pair-picker/index.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/**
2+
* Internal dependencies
3+
*/
4+
import { BaseControl, Button } from '~stackable/components'
5+
6+
/**
7+
* External dependencies
8+
*/
9+
import { i18n } from 'stackable'
10+
import classNames from 'classnames'
11+
import { loadGoogleFont } from '~stackable/util'
12+
import { omit } from 'lodash'
13+
14+
/**
15+
* WordPress dependencies
16+
*/
17+
import { __ } from '@wordpress/i18n'
18+
19+
const FontPairPicker = props => {
20+
const headingStyles = props.fontPair?.typography?.h1 || {}
21+
const paragraphStyles = props.fontPair?.typography?.p || {}
22+
if ( headingStyles.fontFamily ) {
23+
loadGoogleFont( headingStyles.fontFamily )
24+
}
25+
if ( paragraphStyles?.fontFamily ) {
26+
loadGoogleFont( paragraphStyles.fontFamily )
27+
}
28+
29+
const label = (
30+
<div>
31+
<span
32+
style={ omit( { ...headingStyles }, [ 'fontSize', 'lineHeight' ] ) }
33+
className="ugb-global-settings-font-pair__label"
34+
>
35+
{ headingStyles?.fontFamily ? headingStyles.fontFamily : __( 'Default Heading', i18n ) }
36+
</span>
37+
<span
38+
style={ omit( { ...paragraphStyles }, [ 'fontSize', 'lineHeight' ] ) }
39+
className="ugb-global-settings-font-pair__sub-label"
40+
>
41+
{ paragraphStyles?.fontFamily ? paragraphStyles?.fontFamily : __( 'Default Body', i18n ) }
42+
</span>
43+
</div>
44+
)
45+
46+
const classes = classNames( [
47+
'ugb-button-icon-control',
48+
'ugb-global-settings-font-pair-control',
49+
{ 'ugb-global-settings-font-pair__selected': props?.isSelected },
50+
] )
51+
52+
return (
53+
<div onClick={ props.onClick } ref={ props?.ref } role="button" tabIndex={ 0 } onKeyDown={ event => {
54+
if ( event.key === 'Enter' || event.key === 'Space' ) {
55+
props.onClick()
56+
event.preventDefault()
57+
}
58+
} } >
59+
<BaseControl
60+
key={ props.key }
61+
label={ label }
62+
className={ classes }
63+
>
64+
{ props?.isCustom &&
65+
<div className="ugb-button-icon-control__wrapper">
66+
<Button
67+
className="ugb-button-icon-control__edit"
68+
label={ __( 'Edit', i18n ) }
69+
icon="edit"
70+
isSmall
71+
onClick={ event => {
72+
props.onEdit()
73+
event.stopPropagation()
74+
} }
75+
/>
76+
</div>
77+
}
78+
</BaseControl>
79+
</div>
80+
)
81+
}
82+
83+
FontPairPicker.defaultProps = {
84+
key: '',
85+
fontPair: {},
86+
isSelected: false,
87+
onClick: () => {},
88+
onEdit: () => {},
89+
}
90+
91+
export default FontPairPicker

‎src/components/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,3 +116,5 @@ export { default as Popover } from './popover'
116116
export { default as HelpTooltip } from './help-tooltip'
117117
export { default as RichText } from './rich-text'
118118
export { default as SortablePicker } from './sortable-picker'
119+
export { default as InspectorSubHeader } from './inspector-sub-header'
120+
export { default as FontPairPicker } from './font-pair-picker'

‎src/components/inspector-sub-header/editor.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.stk-inspector-sub-header {
2+
display: flex;
3+
justify-content: space-between;
4+
align-items: center;
5+
gap: 8px;
6+
.components-base-control__label {
7+
flex: 1;
8+
margin: 0;
9+
}
10+
.stk-inspector-sub-header__trash {
11+
color: var(--stk-skin-error);
12+
}
13+
.stk-inspector-sub-header__reset {
14+
color: var(--stk-skin-error);
15+
.dashicon {
16+
font-size: 12px;
17+
}
18+
}
19+
}

‎src/components/inspector-sub-header/index.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { i18n } from 'stackable'
2+
import { Button } from '@wordpress/components'
3+
import { __ } from '@wordpress/i18n'
4+
5+
const NOOP = () => {}
6+
7+
const InspectorSubHeader = props => {
8+
const {
9+
onBack = NOOP,
10+
onTrash = NOOP,
11+
onReset = NOOP,
12+
title = '',
13+
showTrash = true,
14+
showReset = false,
15+
} = props
16+
return (
17+
<div className="stk-inspector-sub-header">
18+
<Button
19+
icon="arrow-left-alt2"
20+
alt={ __( 'Back', i18n ) }
21+
onClick={ onBack }
22+
/>
23+
<h2 className="components-base-control__label">{ title }</h2>
24+
{ showTrash && (
25+
<Button
26+
className="stk-inspector-sub-header__trash"
27+
size="small"
28+
icon="trash"
29+
alt={ __( 'Delete', i18n ) }
30+
onClick={ onTrash }
31+
/>
32+
) }
33+
{ showReset && (
34+
<Button
35+
className="stk-inspector-sub-header__reset"
36+
size="small"
37+
icon="image-rotate"
38+
alt={ __( 'Reset', i18n ) }
39+
onClick={ onReset }
40+
/>
41+
) }
42+
</div>
43+
)
44+
}
45+
46+
export default InspectorSubHeader

‎src/components/pro-control/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,13 @@ const LABELS = {
117117
<li>{ __( 'Organize your custom icons in your library', i18n ) }</li>
118118
</ul>,
119119
},
120+
'font-pairs': {
121+
title: __( 'Add Your Own Font Pairs', i18n ),
122+
description: <ul>
123+
<li>{ __( 'Add your own custom Font Pairs', i18n ) }</li>
124+
<li>{ __( 'Manage your custom Font Pairs', i18n ) }</li>
125+
</ul>,
126+
},
120127
}
121128

122129
const ProControl = props => {

‎src/components/typography-control/index.js‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ import { Fragment, useMemo } from '@wordpress/element'
1919
import { i18n } from 'stackable'
2020

2121
const TypographyControl = props => {
22+
const {
23+
isAllowReset = undefined, // Optional prop
24+
} = props
25+
2226
// Compute the font size placeholder value.
2327
const placeholder = useMemo( () => {
2428
if ( typeof props.placeholder === 'function' ) {
@@ -29,20 +33,23 @@ const TypographyControl = props => {
2933
return props.fontSize || props.placeholder || getDefaultFontSize( props.htmlTag, true )
3034
}, [ props.htmlTag, props.fontSize ] )
3135

36+
// Allow overriding, or use our original condition
37+
const _allowReset = typeof isAllowReset !== undefined ? isAllowReset : (
38+
props.fontFamily ||
39+
props.fontSize || props.tabletFontSize || props.mobileFontSize ||
40+
props.fontWeight ||
41+
props.textTransform ||
42+
props.lineHeight || props.tabletLineHeight || props.mobileLineHeight ||
43+
props.letterSpacing || props.tabletLetterSpacing || props.mobileLetterSpacing
44+
)
45+
3246
return (
3347
<Fragment>
3448
<ButtonIconPopoverControl
3549
label={ props.label }
3650
popoverLabel={ props.popoverLabel }
3751
onReset={ props.onReset }
38-
allowReset={
39-
props.fontFamily ||
40-
props.fontSize || props.tabletFontSize || props.mobileFontSize ||
41-
props.fontWeight ||
42-
props.textTransform ||
43-
props.lineHeight || props.tabletLineHeight || props.mobileLineHeight ||
44-
props.letterSpacing || props.tabletLetterSpacing || props.mobileLetterSpacing
45-
}
52+
allowReset={ _allowReset }
4653
resetPopoverTitle={ props.resetPopoverTitle }
4754
resetPopoverDescription={ props.resetPopoverDescription }
4855
className={ props.className }
@@ -53,7 +60,8 @@ const TypographyControl = props => {
5360
label={ __( 'Font Family', i18n ) }
5461
onChange={ props.onChangeFontFamily }
5562
value={ props.fontFamily }
56-
placeholder={ __( 'Theme Default', i18n ) }
63+
defaultValue={ props?.defaultFontFamily }
64+
placeholder={ __( 'Default', i18n ) }
5765
helpTooltip={ {
5866
video: 'typography-family',
5967
description: __( 'Sets the font set to be used for the element', i18n ),

‎src/global-settings.php‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,55 @@ public function register_global_settings() {
282282
)
283283
);
284284

285+
register_setting(
286+
'stackable_global_settings',
287+
'stackable_selected_font_pair',
288+
array(
289+
'type' => 'string',
290+
'description' => __( 'Stackable currently selected global font pair', STACKABLE_I18N ),
291+
'sanitize_callback' => 'sanitize_text_field',
292+
'show_in_rest' => true,
293+
'default' => '',
294+
)
295+
);
296+
297+
register_setting(
298+
'stackable_global_settings',
299+
'stackable_custom_font_pairs',
300+
array(
301+
'type' => 'array',
302+
'description' => __( 'Stackable added custom font pairs', STACKABLE_I18N ),
303+
'sanitize_callback' => array( $this, 'sanitize_array_setting' ),
304+
'show_in_rest' => array(
305+
'schema' => array(
306+
'items' => array(
307+
'type' => 'object',
308+
'properties' => array(
309+
'name' => array(
310+
'type' => 'string',
311+
),
312+
'typography' => array(
313+
'type' => 'object',
314+
'properties' => array(
315+
'h1' => $stackable_global_typography_schema,
316+
'h2' => $stackable_global_typography_schema,
317+
'h2' => $stackable_global_typography_schema,
318+
'h3' => $stackable_global_typography_schema,
319+
'h4' => $stackable_global_typography_schema,
320+
'h5' => $stackable_global_typography_schema,
321+
'h6' => $stackable_global_typography_schema,
322+
'p' => $stackable_global_typography_schema,
323+
'.stk-subtitle' => $stackable_global_typography_schema,
324+
)
325+
),
326+
)
327+
)
328+
)
329+
),
330+
'default' => '',
331+
)
332+
);
333+
285334
register_setting(
286335
'stackable_global_settings',
287336
'stackable_icon_library',

‎src/plugins/global-settings/typography/editor.scss‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,16 @@
99

1010
.components-base-control__label {
1111
overflow: hidden;
12+
h1,
13+
h2,
14+
h3,
15+
h4,
16+
h5,
17+
h6 {
18+
font-size: revert;
19+
text-transform: unset;
20+
font-weight: unset;
21+
}
1222
}
1323
}
1424
> .components-base-control__field {
@@ -71,3 +81,60 @@
7181
overflow: hidden;
7282
white-space: nowrap;
7383
}
84+
85+
.ugb-global-settings-font-pair__heading {
86+
display: flex;
87+
flex-direction: row;
88+
justify-content: space-between;
89+
align-items: center;
90+
margin-bottom: 4px;
91+
h3 {
92+
margin: 0;
93+
}
94+
}
95+
96+
.ugb-global-settings-font-pair-control {
97+
.components-base-control__field {
98+
border: 1px solid #ddd;
99+
padding: 8px;
100+
margin-bottom: 8px;
101+
gap: 8px;
102+
cursor: pointer;
103+
.ugb-base-control-multi-label {
104+
margin-bottom: 0px;
105+
}
106+
}
107+
}
108+
109+
.ugb-global-settings-font-pair__container {
110+
max-height: 250px;
111+
overflow: auto;
112+
border: 1px solid #ddd;
113+
border: none;
114+
padding: 0;
115+
width: calc(100% - 16px);
116+
margin: 0;
117+
margin-bottom: 24px;
118+
.ugb-global-settings-font-pair__selected {
119+
.components-base-control__field {
120+
border: 2px solid #000;
121+
}
122+
}
123+
.ugb-global-settings-font-pair__label {
124+
font-size: 1.2rem;
125+
display: block;
126+
margin-bottom: 4px;
127+
line-height: 1.2;
128+
}
129+
.ugb-global-settings-font-pair__sub-label {
130+
font-size: 1rem;
131+
display: block;
132+
line-height: 1;
133+
}
134+
}
135+
136+
.ugb-global-typography__panel {
137+
.stk-inspector-sub-header {
138+
margin-bottom: 16px;
139+
}
140+
}

0 commit comments

Comments
 (0)