Add font weight picking mechanism

lib/experimental-default-theme.json

@@ -181,7 +181,8 @@
 		},
 		"features": {
 			"typography": {
-				"dropCap": true
+				"dropCap": true,
+				"fontWeight": true
 			},
 			"color": {
 				"custom": true

lib/global-styles.php

@@ -277,6 +277,7 @@ function gutenberg_experimental_global_styles_get_supported_styles( $supports )
 		'font-size'                => array( '__experimentalFontSize' ),
 		'line-height'              => array( '__experimentalLineHeight' ),
 		'font-family'              => array( '__experimentalFontFamily' ),
+		'font-weight'              => array( '__experimentalFontWeight' ),
 	);
 
 	$supported_features = array();
@@ -387,6 +388,7 @@ function gutenberg_experimental_global_styles_flatten_styles_tree( $styles ) {
 		'line-height'              => array( 'typography', 'lineHeight' ),
 		'font-size'                => array( 'typography', 'fontSize' ),
 		'font-family'              => array( 'typography', 'fontFamily' ),
+		'font-weight'              => array( 'typography', 'fontWeight' ),
 		'background'               => array( 'color', 'gradient' ),
 		'background-color'         => array( 'color', 'background' ),
 		'color'                    => array( 'color', 'text' ),

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

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { hasBlockSupport } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { SelectControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { cleanEmptyObject } from './utils';
+
+export const FONT_WEIGHT_SUPPORT_KEY = '__experimentalFontWeight';
+
+const FONT_WEIGHT_OPTIONS = [
+	{ value: '', label: __( 'Default' ) },
+	{ value: 'normal', label: __( 'Normal' ) },
+	{ value: 'bold', label: __( 'Bold' ) },
+	{ value: 'lighter', label: __( 'Lighter' ) },
+	{ value: 'bolder', label: __( 'Bolder' ) },
+	...[ ...Array( 9 ).keys() ]
+		.map( ( i ) => ( i + 1 ) * 100 )
+		.map( ( weight ) => ( { value: weight, label: weight } ) ),
+	{ value: 'initial', label: __( 'Initial' ) },
+	{ value: 'inherit', label: __( 'Inherit' ) },
+];
+
+function FontWeightControl( { value = '', onChange, ...props } ) {
+	return (
+		<SelectControl
+			label={ __( 'Font weight' ) }
+			options={ FONT_WEIGHT_OPTIONS }
+			value={ value }
+			onChange={ onChange }
+			{ ...props }
+		/>
+	);
+}
+
+export function FontWeightEdit( {
+	name,
+	setAttributes,
+	attributes: { style = {} },
+} ) {
+	const isDisable = useIsFontWeightDisabled( { name } );
+
+	if ( isDisable ) {
+		return null;
+	}
+
+	const fontWeight = style.typography?.fontWeight || '';
+
+	function onChange( newValue ) {
+		setAttributes( {
+			style: cleanEmptyObject( {
+				...style,
+				typography: {
+					...( style.typography || {} ),
+					fontWeight: newValue || undefined,
+				},
+			} ),
+		} );
+	}
+
+	return (
+		<FontWeightControl
+			className="block-editor-hooks-font-weight-control"
+			value={ fontWeight }
+			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 useIsFontWeightDisabled( { name } ) {
+	return (
+		useSelect( ( select ) => {
+			const editorSettings = select( 'core/block-editor' ).getSettings();
+			return !! editorSettings.__experimentalGlobalStylesBase?.global
+				.features?.typography?.fontWeight;
+		} ) || ! hasBlockSupport( name, FONT_WEIGHT_SUPPORT_KEY )
+	);
+}

packages/block-editor/src/hooks/font-weight.scss

@@ -0,0 +1,3 @@
+.block-editor-hooks-font-weight-control.components-select-control {
+	display: block;
+}

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

@@ -57,6 +57,7 @@ export function getInlineStyles( styles = {} ) {
 		lineHeight: [ 'typography', 'lineHeight' ],
 		fontSize: [ 'typography', 'fontSize' ],
 		fontFamily: [ 'typography', 'fontFamily' ],
+		fontWeight: [ 'typography', 'fontWeight' ],
 		background: [ 'color', 'gradient' ],
 		backgroundColor: [ 'color', 'background' ],
 		color: [ 'color', 'text' ],

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

@@ -26,11 +26,17 @@ import {
 	FontSizeEdit,
 	useIsFontSizeDisabled,
 } from './font-size';
+import {
+	FONT_WEIGHT_SUPPORT_KEY,
+	FontWeightEdit,
+	useIsFontWeightDisabled,
+} from './font-weight';
 
 export const TYPOGRAPHY_SUPPORT_KEYS = [
 	LINE_HEIGHT_SUPPORT_KEY,
 	FONT_SIZE_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
+	FONT_WEIGHT_SUPPORT_KEY,
 ];
 
 export function TypographyPanel( props ) {
@@ -43,6 +49,7 @@ export function TypographyPanel( props ) {
 		<InspectorControls>
 			<PanelBody title={ __( 'Typography' ) }>
 				<FontFamilyEdit { ...props } />
+				<FontWeightEdit { ...props } />
 				<FontSizeEdit { ...props } />
 				<LineHeightEdit { ...props } />
 			</PanelBody>
@@ -64,6 +71,7 @@ function useIsTypographyDisabled( props = {} ) {
 		useIsFontSizeDisabled( props ),
 		useIsLineHeightDisabled( props ),
 		useIsFontFamilyDisabled( props ),
+		useIsFontWeightDisabled( props ),
 	];
 
 	return configs.filter( Boolean ).length === configs.length;

packages/block-editor/src/style.scss

@@ -50,6 +50,7 @@
 @import "./components/writing-flow/style.scss";
 @import "./hooks/anchor.scss";
 @import "./hooks/font-family.scss";
+@import "./hooks/font-weight.scss";
 
 // This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
 #end-resizable-editor-section {

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

@@ -35,6 +35,7 @@
 		},
 		"__experimentalFontSize": true,
 		"__experimentalFontFamily": true,
+		"__experimentalFontWeight": true,
 		"__experimentalLineHeight": true,
 		"__experimentalSelector": "p",
 		"__unstablePasteTextInline": true