@wordpress/block-editor 13.2.0 → 13.3.0

package/src/components/global-styles/image-settings-panel.js

@@ -11,7 +11,7 @@ import { __, _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
+import { useToolsPanelDropdownMenuProps } from './utils';
 
 export function useHasImageSettingsPanel( name, value, inheritedValue ) {
 	// Note: If lightbox `value` exists, that means it was
@@ -30,6 +30,7 @@ export default function ImageSettingsPanel( {
 	inheritedValue,
 	panelId,
 } ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const resetLightbox = () => {
 		onChange( undefined );
 	};
@@ -52,7 +53,7 @@ export default function ImageSettingsPanel( {
 				label={ _x( 'Settings', 'Image settings' ) }
 				resetAll={ resetLightbox }
 				panelId={ panelId }
-				dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+				dropdownMenuProps={ dropdownMenuProps }
 			>
 				<ToolsPanelItem
 					// We use the `userSettings` prop instead of `settings`, because `settings`

package/src/components/global-styles/style.scss

@@ -71,20 +71,55 @@
 	direction: ltr;
 }
 
+
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
-	position: relative;
+	border: 1px solid $gray-300;
+	border-radius: 2px;
+	// Full width. ToolsPanel lays out children in a grid.
+	grid-column: 1 / -1;
+
+	&.is-open {
+		background-color: $gray-100;
+	}
+
+	.block-editor-global-styles-background-panel__image-tools-panel-item {
+		flex-grow: 1;
+		border: 0;
+		.components-dropdown {
+			display: block;
+		}
+	}
+
+	.block-editor-global-styles-background-panel__inspector-preview-inner {
+		height: 100%;
+	}
+
+	.components-dropdown {
+		display: block;
+		height: 36px;
+	}
+}
+
+.block-editor-global-styles-background-panel__image-tools-panel-item {
+	border: 1px solid $gray-300;
+	border-radius: 2px;
+	// Full width. ToolsPanel lays out children in a grid.
+	grid-column: 1 / -1;
 	// Since there is no option to skip rendering the drag'n'drop icon in drop
 	// zone, we hide it for now.
 	.components-drop-zone__content-icon {
 		display: none;
 	}
 
+	.components-dropdown {
+		display: block;
+		height: 36px;
+	}
+
 	button.components-button {
 		color: $gray-900;
-		box-shadow: inset 0 0 0 $border-width $gray-400;
 		width: 100%;
 		display: block;
-		height: $grid-unit-50;
 
 		&:hover {
 			color: var(--wp-admin-theme-color);
@@ -94,28 +129,37 @@
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
+}
 
-	.block-editor-global-styles-background-panel__inspector-media-replace-title {
-		word-break: break-all;
-		// The Button component is white-space: nowrap, and that won't work with line-clamp.
-		white-space: normal;
+.block-editor-global-styles-background-panel__image-preview-content,
+.block-editor-global-styles-background-panel__dropdown-toggle {
+	height: 100%;
+	width: 100%;
+	padding-left: $grid-unit-15;
+}
 
-		// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
-		text-align: start;
-		text-align-last: center;
-	}
+.block-editor-global-styles-background-panel__dropdown-toggle {
+	cursor: pointer;
+	background: transparent;
+	border: none;
+}
 
-	.components-dropdown {
-		display: block;
-	}
+.block-editor-global-styles-background-panel__inspector-media-replace-title {
+	word-break: break-all;
+	// The Button component is white-space: nowrap, and that won't work with line-clamp.
+	white-space: normal;
+
+	// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
+	text-align: start;
+	text-align-last: center;
 }
 
-.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
-	display: block;
-	width: 20px;
-	height: 20px;
-	flex: none;
-	background: #fff;
+.block-editor-global-styles-background-panel__inspector-preview-inner {
+	.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
+		width: 20px;
+		height: 20px;
+		min-width: auto;
+	}
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator {
@@ -141,3 +185,44 @@
 	box-sizing: inherit;
 }
 
+.block-editor-global-styles-background-panel__dropdown-content-wrapper {
+	min-width: 260px;
+	overflow-x: hidden;
+	.components-base-control__help,
+	.components-toggle-control {
+		margin-bottom: 0;
+	}
+	.components-focal-point-picker-wrapper {
+		background-color: $gray-100;
+		width: 100%;
+		border-radius: $radius-block-ui;
+		border: $border-width solid $gray-300;
+	}
+	.components-focal-point-picker__media--image {
+		max-height: 180px;
+	}
+}
+
+.block-editor-global-styles-background-panel__hidden-tools-panel-item {
+	height: 0;
+	width: 0;
+	position: absolute;
+}
+
+// Push control panel into the background when the media modal is open.
+.modal-open .block-editor-global-styles-background-panel__popover {
+	z-index: z-index(".block-editor-global-styles-background-panel__popover");
+}
+
+.block-editor-global-styles-background-panel__media-replace-popover {
+	.components-popover__content {
+		// width of block-editor-global-styles-background-panel__dropdown-content-wrapper minus padding.
+		width: 226px;
+	}
+	.components-button {
+		padding: 0 $grid-unit-10;
+	}
+	.components-button .components-menu-items__item-icon.has-icon-right {
+		margin-left: $grid-unit-30 - $grid-unit-10;
+	}
+}

package/src/components/global-styles/test/typography-utils.js

@@ -4,6 +4,8 @@
 import {
 	getTypographyFontSizeValue,
 	getFluidTypographyOptionsFromSettings,
+	getMergedFontFamiliesAndFontFamilyFaces,
+	findNearestFontWeight,
 } from '../typography-utils';
 
 describe( 'typography utils', () => {
@@ -682,6 +684,273 @@ describe( 'typography utils', () => {
 		} );
 	} );
 
+	describe( 'getMergedFontFamiliesAndFontFamilyFaces', () => {
+		[
+			{
+				message:
+					'should return empty arrays when settings and fontFamily are empty',
+				settings: {},
+				fontFamily: '',
+				expected: {
+					fontFamilies: [],
+					fontFamilyFaces: [],
+				},
+			},
+
+			{
+				message:
+					'should return empty arrays when only settings is `undefined`',
+				settings: undefined,
+				fontFamily: 'ABeeZee, sans-serif',
+				expected: {
+					fontFamilies: [],
+					fontFamilyFaces: [],
+				},
+			},
+
+			{
+				message:
+					'should return fontFamilies array and an empty fontFamilyFaces array when fontfamily is empty',
+				settings: {
+					typography: {
+						fontFamilies: {
+							custom: [
+								{
+									name: 'ABeeZee',
+									slug: 'abeezee',
+									fontFamily: 'ABeeZee, sans-serif',
+									fontFace: [
+										{
+											src: 'http://www.wordpress.org/wp-content/uploads/fonts/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2',
+											fontWeight: '400',
+											fontStyle: 'italic',
+											fontFamily: 'ABeeZee',
+										},
+									],
+								},
+							],
+						},
+					},
+				},
+				fontFamily: '',
+				expected: {
+					fontFamilies: [
+						{
+							fontFace: [
+								{
+									fontFamily: 'ABeeZee',
+									fontStyle: 'italic',
+									fontWeight: '400',
+									src: 'http://www.wordpress.org/wp-content/uploads/fonts/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2',
+								},
+							],
+							fontFamily: 'ABeeZee, sans-serif',
+							name: 'ABeeZee',
+							slug: 'abeezee',
+						},
+					],
+					fontFamilyFaces: [],
+				},
+			},
+
+			{
+				message:
+					'should return font families and font faces when both settings and fontFamily are defined',
+				settings: {
+					typography: {
+						fontFamilies: {
+							theme: [
+								{
+									fontFace: [
+										{
+											fontFamily: 'PT Sans',
+											fontStyle: 'normal',
+											fontWeight: '400',
+											src: [
+												'file:./assets/fonts/pt-sans_normal_400.ttf',
+											],
+										},
+										{
+											fontFamily: 'PT Sans',
+											fontStyle: 'normal',
+											fontWeight: '700',
+											src: [
+												'file:./assets/fonts/pt-sans_normal_700.ttf',
+											],
+										},
+										{
+											fontFamily: 'PT Sans',
+											fontStyle: 'italic',
+											fontWeight: '400',
+											src: [
+												'file:./assets/fonts/pt-sans_italic_400.ttf',
+											],
+										},
+										{
+											fontFamily: 'PT Sans',
+											fontStyle: 'italic',
+											fontWeight: '700',
+											src: [
+												'file:./assets/fonts/pt-sans_italic_700.ttf',
+											],
+										},
+									],
+									fontFamily: 'PT Sans',
+									name: 'PT Sans',
+									slug: 'pt-sans',
+								},
+							],
+							custom: [
+								{
+									name: 'ABeeZee',
+									slug: 'abeezee',
+									fontFamily: 'ABeeZee, sans-serif',
+									fontFace: [
+										{
+											src: 'http://www.wordpress.org/wp-content/uploads/fonts/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2',
+											fontWeight: '400',
+											fontStyle: 'italic',
+											fontFamily: 'ABeeZee',
+										},
+									],
+								},
+							],
+						},
+					},
+				},
+				fontFamily: 'ABeeZee, sans-serif',
+				expected: {
+					fontFamilyFaces: [
+						{
+							fontFamily: 'ABeeZee',
+							fontStyle: 'italic',
+							fontWeight: '400',
+							src: 'http://www.wordpress.org/wp-content/uploads/fonts/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2',
+						},
+					],
+					fontFamilies: [
+						{
+							fontFace: [
+								{
+									fontFamily: 'PT Sans',
+									fontStyle: 'normal',
+									fontWeight: '400',
+									src: [
+										'file:./assets/fonts/pt-sans_normal_400.ttf',
+									],
+								},
+								{
+									fontFamily: 'PT Sans',
+									fontStyle: 'normal',
+									fontWeight: '700',
+									src: [
+										'file:./assets/fonts/pt-sans_normal_700.ttf',
+									],
+								},
+								{
+									fontFamily: 'PT Sans',
+									fontStyle: 'italic',
+									fontWeight: '400',
+									src: [
+										'file:./assets/fonts/pt-sans_italic_400.ttf',
+									],
+								},
+								{
+									fontFamily: 'PT Sans',
+									fontStyle: 'italic',
+									fontWeight: '700',
+									src: [
+										'file:./assets/fonts/pt-sans_italic_700.ttf',
+									],
+								},
+							],
+							fontFamily: 'PT Sans',
+							name: 'PT Sans',
+							slug: 'pt-sans',
+						},
+						{
+							fontFace: [
+								{
+									fontFamily: 'ABeeZee',
+									fontStyle: 'italic',
+									fontWeight: '400',
+									src: 'http://www.wordpress.org/wp-content/uploads/fonts/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2',
+								},
+							],
+							fontFamily: 'ABeeZee, sans-serif',
+							name: 'ABeeZee',
+							slug: 'abeezee',
+						},
+					],
+				},
+			},
+		].forEach( ( { message, settings, fontFamily, expected } ) => {
+			it( `${ message }`, () => {
+				expect(
+					getMergedFontFamiliesAndFontFamilyFaces(
+						settings,
+						fontFamily
+					)
+				).toEqual( expected );
+			} );
+		} );
+	} );
+
+	describe( 'findNearestFontWeight', () => {
+		[
+			{
+				message:
+					'should return empty string when newFontWeightValue is `undefined`',
+				availableFontWeights: undefined,
+				newFontWeightValue: undefined,
+				expected: '',
+			},
+			{
+				message:
+					'should return newFontWeightValue value when availableFontWeights is empty',
+				availableFontWeights: [],
+				newFontWeightValue: '300',
+				expected: '300',
+			},
+			{
+				message: 'should return correct nearest higher font weight',
+				availableFontWeights: [
+					{ name: 'Regular', value: '400' },
+					{ name: 'Bold', value: '700' },
+					{ name: 'Black', value: '900' },
+				],
+				newFontWeightValue: '300',
+				expected: '400',
+			},
+			{
+				message: 'should return correct nearest lower font weight',
+				availableFontWeights: [
+					{ name: 'Thin', value: '100' },
+					{ name: 'Light', value: '300' },
+					{ name: 'Regular', value: '400' },
+				],
+				newFontWeightValue: '900',
+				expected: '400',
+			},
+		].forEach(
+			( {
+				message,
+				availableFontWeights,
+				newFontWeightValue,
+				expected,
+			} ) => {
+				it( `${ message }`, () => {
+					expect(
+						findNearestFontWeight(
+							availableFontWeights,
+							newFontWeightValue
+						)
+					).toEqual( expected );
+				} );
+			}
+		);
+	} );
+
 	describe( 'typography utils', () => {
 		[
 			{

package/src/components/global-styles/typography-panel.js

@@ -8,7 +8,7 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useMemo, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -21,8 +21,13 @@ import TextAlignmentControl from '../text-alignment-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import WritingModeControl from '../writing-mode-control';
-import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
+import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
+import {
+	getMergedFontFamiliesAndFontFamilyFaces,
+	findNearestFontWeight,
+} from './typography-utils';
+import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
 
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
@@ -135,6 +140,7 @@ function TypographyToolsPanel( {
 	panelId,
 	children,
 } ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const resetAll = () => {
 		const updatedValue = resetAllFilter( value );
 		onChange( updatedValue );
@@ -145,7 +151,7 @@ function TypographyToolsPanel( {
 			label={ __( 'Typography' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
-			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+			dropdownMenuProps={ dropdownMenuProps }
 		>
 			{ children }
 		</ToolsPanel>
@@ -179,15 +185,13 @@ export default function TypographyPanel( {
 
 	// Font Family
 	const hasFontFamilyEnabled = useHasFontFamilyControl( settings );
-	const fontFamilies = settings?.typography?.fontFamilies;
-	const mergedFontFamilies = useMemo( () => {
-		return [ 'default', 'theme', 'custom' ].flatMap(
-			( key ) => fontFamilies?.[ key ] ?? []
-		);
-	}, [ fontFamilies ] );
 	const fontFamily = decodeValue( inheritedValue?.typography?.fontFamily );
+	const { fontFamilies, fontFamilyFaces } = useMemo( () => {
+		return getMergedFontFamiliesAndFontFamilyFaces( settings, fontFamily );
+	}, [ settings, fontFamily ] );
+
 	const setFontFamily = ( newValue ) => {
-		const slug = mergedFontFamilies?.find(
+		const slug = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
 		onChange(
@@ -251,6 +255,39 @@ export default function TypographyPanel( {
 		setFontAppearance( {} );
 	};
 
+	// Check if previous font style and weight values are available in the new font family
+	useEffect( () => {
+		const { fontStyles, fontWeights, isSystemFont } =
+			getFontStylesAndWeights( fontFamilyFaces );
+		const hasFontStyle = fontStyles?.some(
+			( { value: fs } ) => fs === fontStyle
+		);
+		const hasFontWeight = fontWeights?.some(
+			( { value: fw } ) => fw === fontWeight
+		);
+
+		// Try to set nearest available font weight
+		if ( ! hasFontWeight && fontWeight ) {
+			setFontAppearance( {
+				fontStyle,
+				fontWeight: findNearestFontWeight( fontWeights, fontWeight ),
+			} );
+		}
+
+		// Set the same weight and style values if the font family is a system font or if both are the same
+		if ( isSystemFont || ( hasFontStyle && hasFontWeight ) ) {
+			setFontAppearance( {
+				fontStyle,
+				fontWeight,
+			} );
+		}
+
+		// Reset font appearance if the font family does not have the selected font style
+		if ( ! hasFontStyle ) {
+			resetFontAppearance();
+		}
+	}, [ fontFamily ] );
+
 	// Line Height
 	const hasLineHeightEnabled = useHasLineHeightControl( settings );
 	const lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );
@@ -386,7 +423,7 @@ export default function TypographyPanel( {
 					panelId={ panelId }
 				>
 					<FontFamilyControl
-						fontFamilies={ mergedFontFamilies }
+						fontFamilies={ fontFamilies }
 						value={ fontFamily }
 						onChange={ setFontFamily }
 						size="__unstable-large"
@@ -430,8 +467,8 @@ export default function TypographyPanel( {
 						onChange={ setFontAppearance }
 						hasFontStyles={ hasFontStyles }
 						hasFontWeights={ hasFontWeights }
+						fontFamilyFaces={ fontFamilyFaces }
 						size="__unstable-large"
-						__nextHasNoMarginBottom
 					/>
 				</ToolsPanelItem>
 			) }

package/src/components/global-styles/typography-utils.js

@@ -122,3 +122,66 @@ export function getFluidTypographyOptionsFromSettings( settings ) {
 				fluid: typographySettings?.fluid,
 		  };
 }
+
+/**
+ * Returns an object of merged font families and the font faces from the selected font family
+ * based on the theme.json settings object and the currently selected font family.
+ *
+ * @param {Object} settings           Theme.json settings
+ * @param {string} selectedFontFamily Decoded font family string
+ * @return {Object} Merged font families and font faces from the selected font family
+ */
+export function getMergedFontFamiliesAndFontFamilyFaces(
+	settings,
+	selectedFontFamily
+) {
+	const fontFamiliesFromSettings = settings?.typography?.fontFamilies;
+
+	const fontFamilies = [ 'default', 'theme', 'custom' ].flatMap(
+		( key ) => fontFamiliesFromSettings?.[ key ] ?? []
+	);
+
+	const fontFamilyFaces =
+		fontFamilies.find(
+			( family ) => family.fontFamily === selectedFontFamily
+		)?.fontFace ?? [];
+
+	return { fontFamilies, fontFamilyFaces };
+}
+
+/**
+ * Returns the nearest font weight value from the available font weight list based on the new font weight.
+ * The nearest font weight is the one with the smallest difference from the new font weight.
+ *
+ * @param {Array}  availableFontWeights Array of available font weights
+ * @param {string} newFontWeightValue   New font weight value
+ * @return {string} Nearest font weight
+ */
+
+export function findNearestFontWeight(
+	availableFontWeights,
+	newFontWeightValue
+) {
+	if ( ! newFontWeightValue || typeof newFontWeightValue !== 'string' ) {
+		return '';
+	}
+
+	if ( ! availableFontWeights || availableFontWeights.length === 0 ) {
+		return newFontWeightValue;
+	}
+
+	const nearestFontWeight = availableFontWeights?.reduce(
+		( nearest, { value: fw } ) => {
+			const currentDiff = Math.abs(
+				parseInt( fw ) - parseInt( newFontWeightValue )
+			);
+			const nearestDiff = Math.abs(
+				parseInt( nearest ) - parseInt( newFontWeightValue )
+			);
+			return currentDiff < nearestDiff ? fw : nearest;
+		},
+		availableFontWeights[ 0 ]?.value
+	);
+
+	return nearestFontWeight;
+}