feat: global font pairs

Author: Arukuen

src/global-settings.php

@@ -282,6 +282,53 @@ public function register_global_settings() {
 				)
 			);
 
+			register_setting(
+				'stackable_global_settings',
+				'stackable_font_pair_name',
+				array(
+					'type' => 'string',
+					'description' => __( 'Stackable global font pair', STACKABLE_I18N ),
+					'sanitize_callback' => 'sanitize_text_field',
+					'show_in_rest' => true,
+					'default' => '',
+				)
+			);
+
+			register_setting(
+				'stackable_global_settings',
+				'stackable_custom_font_pairs',
+				array(
+					'type' => 'array',
+					'description' => __( 'Stackable added custom font pairs', STACKABLE_I18N ),
+					'sanitize_callback' => array( $this, 'sanitize_array_setting' ),
+					'show_in_rest' => array(
+						'schema' => array(
+							'items' => array(
+								'type' => 'object',
+								'properties' => array(
+									'name' => array(
+										'type' => 'string',
+									),
+									'value' => array(
+										'type' => 'array',
+										'items' => array(
+											'type' => 'object',
+											'properties' => array(
+												'selector' => array(
+													'type' => 'string',
+												),
+												'styles' => $stackable_global_typography_schema
+											),
+										),
+									),
+								)
+							)
+						)
+					),
+					'default' => '',
+				)
+			);
+
 			register_setting(
 				'stackable_global_settings',
 				'stackable_icon_library',

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

@@ -72,3 +72,57 @@
 	overflow: hidden;
 	white-space: nowrap;
 }
+
+.ugb-global-settings-font-pair__heading {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 4px;
+	h3 {
+		margin: 0;
+	}
+}
+
+.ugb-global-settings-font-pair-control {
+	.components-base-control__field {
+		border: 1px solid #ddd;
+		padding: 8px;
+		margin-bottom: 8px;
+		cursor: pointer;
+		.ugb-base-control-multi-label {
+			margin-bottom: 0px;
+		}
+	}
+}
+
+.ugb-global-settings-font-pair__container {
+	width: calc(100% - 32px);
+	margin: 0 16px;
+	max-height: 310px;
+	overflow: auto;
+	border: 1px solid #ddd;
+	padding: 8px;
+	.ugb-global-settings-font-pair__selected {
+		.components-base-control__field {
+			border: 2px solid #000;
+		}
+	}
+	.ugb-global-settings-font-pair__label {
+		font-size: 1.2rem;
+		display: block;
+		margin-bottom: 4px;
+		line-height: 1.2;
+	}
+	.ugb-global-settings-font-pair__sub-label {
+		font-size: 1rem;
+		display: block;
+		line-height: 1;
+	}
+}
+
+.ugb-global-typography__panel {
+	.stk-inspector-sub-header {
+		margin-bottom: 16px;
+	}
+}

src/plugins/global-settings/typography/font-pair-picker.js

@@ -0,0 +1,61 @@
+/**
+ * Internal dependencies
+ */
+import { BaseControl, Button } from '~stackable/components'
+
+/**
+ * External dependencies
+ */
+import { i18n } from 'stackable'
+import classnames from 'classnames'
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n'
+
+const FontPairPicker = props => {
+	const mainClasses = classnames( [
+		props.className,
+		'ugb-button-icon-control',
+		'ugb-global-settings-font-pair-control',
+	] )
+
+	return (
+		<div onClick={ props.onClick } ref={ props?.ref } role="button" tabIndex={ 0 } onKeyDown={ event => {
+			if ( event.key === 'Enter' || event.key === 'Space' ) {
+				props.onClick()
+				event.preventDefault()
+			}
+		} } >
+			<BaseControl
+				key={ props.key }
+				label={ props.label }
+				className={ mainClasses }
+			>
+				{ props?.isCustom &&
+					<div className="ugb-button-icon-control__wrapper">
+						<Button
+							className="ugb-button-icon-control__edit"
+							label={ __( 'Edit', i18n ) }
+							icon="edit"
+							onClick={ event => {
+								props.onEdit()
+								event.stopPropagation()
+							} }
+						/>
+					</div>
+				}
+			</BaseControl>
+		</div>
+	)
+}
+
+FontPairPicker.defaultProps = {
+	label: '',
+	classname: '',
+	onClick: () => {},
+	onEdit: () => {},
+}
+
+export default FontPairPicker