Add: Font Family picking mechanism

lib/global-styles.php

@@ -395,6 +395,8 @@ function gutenberg_experimental_global_styles_get_css_property( $style_property
 			return 'font-size';
 		case 'lineHeight':
 			return 'line-height';
+		case 'fontFamily':
+			return 'font-family';
 		default:
 			return $style_property;
 	}
@@ -412,6 +414,7 @@ function gutenberg_experimental_global_styles_get_style_property() {
 		'backgroundColor'          => array( 'color', 'background' ),
 		'color'                    => array( 'color', 'text' ),
 		'fontSize'                 => array( 'typography', 'fontSize' ),
+		'fontFamily'               => array( 'typography', 'fontFamily' ),
 		'lineHeight'               => array( 'typography', 'lineHeight' ),
 	);
 }
@@ -429,6 +432,7 @@ function gutenberg_experimental_global_styles_get_support_keys() {
 		'color'                    => array( 'color' ),
 		'fontSize'                 => array( 'fontSize' ),
 		'lineHeight'               => array( 'lineHeight' ),
+		'fontFamily'               => array( '__experimentalFontFamily' ),
 	);
 }
 
@@ -439,18 +443,22 @@ function gutenberg_experimental_global_styles_get_support_keys() {
  */
 function gutenberg_experimental_global_styles_get_presets_structure() {
 	return array(
-		'color'    => array(
+		'color'      => array(
 			'path' => array( 'color', 'palette' ),
 			'key'  => 'color',
 		),
-		'gradient' => array(
+		'gradient'   => array(
 			'path' => array( 'color', 'gradients' ),
 			'key'  => 'gradient',
 		),
-		'fontSize' => array(
+		'fontSize'   => array(
 			'path' => array( 'typography', 'fontSizes' ),
 			'key'  => 'size',
 		),
+		'fontFamily' => array(
+			'path' => array( 'typography', 'fontFamilies' ),
+			'key'  => 'fontFamily',
+		),
 	);
 }
 
@@ -489,9 +497,10 @@ function gutenberg_experimental_global_styles_get_block_data() {
 				'global',
 				array(
 					'supports' => array(
-						'__experimentalSelector' => ':root',
-						'fontSize'               => true,
-						'color'                  => array(
+						'__experimentalSelector'   => ':root',
+						'__experimentalFontFamily' => true,
+						'fontSize'                 => true,
+						'color'                    => array(
 							'linkColor' => true,
 							'gradients' => true,
 						),

packages/block-editor/src/components/font-family/index.js

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useEditorFeature from '../use-editor-feature';
+
+export default function FontFamilyControl( {
+	value = '',
+	onChange,
+	...props
+} ) {
+	const fontFamilies = useEditorFeature( 'typography.fontFamilies' );
+
+	if ( isEmpty( fontFamilies ) ) {
+		return null;
+	}
+
+	const options = [
+		{ value: '', label: __( 'Default' ) },
+		...fontFamilies.map( ( { fontFamily, name } ) => {
+			return {
+				value: fontFamily,
+				label: name || fontFamily,
+			};
+		} ),
+	];
+	return (
+		<SelectControl
+			label={ __( 'Font family' ) }
+			options={ options }
+			value={ value }
+			onChange={ onChange }
+			labelPosition="top"
+			{ ...props }
+		/>
+	);
+}

packages/block-editor/src/components/index.js

@@ -29,6 +29,7 @@ export { default as ContrastChecker } from './contrast-checker';
 export { default as __experimentalGradientPicker } from './gradient-picker';
 export { default as __experimentalGradientPickerControl } from './gradient-picker/control';
 export { default as __experimentalGradientPickerPanel } from './gradient-picker/panel';
+export { default as __experimentalFontFamilyControl } from './font-family';
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as __experimentalImageSizeControl } from './image-size-control';

packages/block-editor/src/hooks/font-family.js

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import { find } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { hasBlockSupport } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { cleanEmptyObject } from './utils';
+import useEditorFeature from '../components/use-editor-feature';
+import FontFamilyControl from '../components/font-family';
+
+export const FONT_FAMILY_SUPPORT_KEY = '__experimentalFontFamily';
+
+const getFontFamilyFromAttributeValue = ( fontFamilies, value ) => {
+	const attributeParsed = /var:preset\|font-family\|(.+)/.exec( value );
+	if ( attributeParsed && attributeParsed[ 1 ] ) {
+		return find( fontFamilies, ( { slug } ) => {
+			return slug === attributeParsed[ 1 ];
+		} ).fontFamily;
+	}
+	return value;
+};
+
+export function FontFamilyEdit( {
+	name,
+	setAttributes,
+	attributes: { style = {} },
+} ) {
+	const fontFamilies = useEditorFeature( 'typography.fontFamilies' );
+	const isDisable = useIsFontFamilyDisabled( { name } );
+
+	if ( isDisable ) {
+		return null;
+	}
+
+	const value = getFontFamilyFromAttributeValue(
+		fontFamilies,
+		style.typography?.fontFamily
+	);
+
+	function onChange( newValue ) {
+		const predefinedFontFamily = find(
+			fontFamilies,
+			( { fontFamily } ) => fontFamily === newValue
+		);
+		setAttributes( {
+			style: cleanEmptyObject( {
+				...style,
+				typography: {
+					...( style.typography || {} ),
+					fontFamily: predefinedFontFamily
+						? `var:preset|font-family|${ predefinedFontFamily.slug }`
+						: newValue || undefined,
+				},
+			} ),
+		} );
+	}
+
+	return (
+		<FontFamilyControl
+			className="block-editor-hooks-font-family-control"
+			fontFamilies={ fontFamilies }
+			value={ value }
+			onChange={ onChange }
+		/>
+	);
+}
+
+/**
+ * Custom hook that checks if font-family functionality is disabled.
+ *
+ * @param {string} name The name of the block.
+ * @return {boolean} Whether setting is disabled.
+ */
+export function useIsFontFamilyDisabled( { name } ) {
+	const fontFamilies = useEditorFeature( 'typography.fontFamilies' );
+	return (
+		! fontFamilies ||
+		fontFamilies.length === 0 ||
+		! hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY )
+	);
+}

packages/block-editor/src/hooks/typography.js

@@ -16,6 +16,11 @@ import {
 	LineHeightEdit,
 	useIsLineHeightDisabled,
 } from './line-height';
+import {
+	FONT_FAMILY_SUPPORT_KEY,
+	FontFamilyEdit,
+	useIsFontFamilyDisabled,
+} from './font-family';
 import {
 	FONT_SIZE_SUPPORT_KEY,
 	FontSizeEdit,
@@ -25,6 +30,7 @@ import {
 export const TYPOGRAPHY_SUPPORT_KEYS = [
 	LINE_HEIGHT_SUPPORT_KEY,
 	FONT_SIZE_SUPPORT_KEY,
+	FONT_FAMILY_SUPPORT_KEY,
 ];
 
 export function TypographyPanel( props ) {
@@ -36,6 +42,7 @@ export function TypographyPanel( props ) {
 	return (
 		<InspectorControls>
 			<PanelBody title={ __( 'Typography' ) }>
+				<FontFamilyEdit { ...props } />
 				<FontSizeEdit { ...props } />
 				<LineHeightEdit { ...props } />
 			</PanelBody>
@@ -56,6 +63,7 @@ function useIsTypographyDisabled( props = {} ) {
 	const configs = [
 		useIsFontSizeDisabled( props ),
 		useIsLineHeightDisabled( props ),
+		useIsFontFamilyDisabled( props ),
 	];
 
 	return configs.filter( Boolean ).length === configs.length;

packages/block-library/src/heading/block.json

@@ -29,6 +29,7 @@
 		},
 		"fontSize": true,
 		"lineHeight": true,
+		"__experimentalFontFamily": true,
 		"__experimentalSelector": {
 			"core/heading/h1": "h1",
 			"core/heading/h2": "h2",

packages/block-library/src/paragraph/block.json

@@ -35,6 +35,7 @@
 		},
 		"fontSize": true,
 		"lineHeight": true,
+		"__experimentalFontFamily": true,
 		"__experimentalSelector": "p",
 		"__unstablePasteTextInline": true
 	}

packages/block-library/src/post-title/block.json

@@ -35,6 +35,7 @@
 		},
 		"fontSize": true,
 		"lineHeight": true,
+		"__experimentalFontFamily": true,
 		"__experimentalSelector": {
 			"core/post-title/h1": "h1",
 			"core/post-title/h2": "h2",

packages/block-library/src/site-tagline/block.json

@@ -13,6 +13,7 @@
 			"gradients": true
 		},
 		"fontSize": true,
-		"lineHeight": true
+		"lineHeight": true,
+		"__experimentalFontFamily": true
 	}
 }

packages/block-library/src/site-title/block.json

@@ -17,6 +17,7 @@
 			"gradients": true
 		},
 		"fontSize": true,
-		"lineHeight": true
+		"lineHeight": true,
+		"__experimentalFontFamily": true
 	}
 }

packages/blocks/src/api/constants.js

@@ -23,4 +23,5 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	paddingLeft: [ 'spacing', 'padding', 'left' ],
 	paddingRight: [ 'spacing', 'padding', 'right' ],
 	paddingTop: [ 'spacing', 'padding', 'top' ],
+	fontFamily: [ 'typography', 'fontFamily' ],
 };

packages/edit-site/src/components/editor/utils.js

@@ -13,6 +13,7 @@ export const PRESET_CATEGORIES = {
 	color: { path: [ 'color', 'palette' ], key: 'color' },
 	gradient: { path: [ 'color', 'gradients' ], key: 'gradient' },
 	fontSize: { path: [ 'typography', 'fontSizes' ], key: 'size' },
+	fontFamily: { path: [ 'typography', 'fontFamilies' ], key: 'fontFamily' },
 };
 export const LINK_COLOR = '--wp--style--color--link';
 export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`;

packages/edit-site/src/components/sidebar/typography-panel.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { LineHeightControl } from '@wordpress/block-editor';
+import {
+	LineHeightControl,
+	__experimentalFontFamilyControl as FontFamilyControl,
+} from '@wordpress/block-editor';
 import { PanelBody, FontSizePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -30,6 +33,14 @@ export default ( {
 
 	return (
 		<PanelBody title={ __( 'Typography' ) } initialOpen={ true }>
+			{ supports.includes( 'fontFamily' ) && (
+				<FontFamilyControl
+					value={ getStyleProperty( name, 'fontFamily' ) }
+					onChange={ ( value ) =>
+						setStyleProperty( name, 'fontFamily', value )
+					}
+				/>
+			) }
 			{ supports.includes( 'fontSize' ) && (
 				<FontSizePicker
 					value={ fromPx( getStyleProperty( name, 'fontSize' ) ) }