@wordpress/block-editor 13.3.0 → 13.4.0

package/src/components/date-format-picker/index.js

@@ -10,18 +10,9 @@ import {
 	VisuallyHidden,
 	ToggleControl,
 	__experimentalVStack as VStack,
-	privateApis as componentsPrivateApis,
+	CustomSelectControl,
 } from '@wordpress/components';
 
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
-	componentsPrivateApis
-);
-
 // So that we illustrate the different formats in the dropdown properly, show a date that is
 // somwhat recent, has a day greater than 12, and a month with more than three letters.
 const exampleDate = new Date();
@@ -126,7 +117,7 @@ function NonDefaultControls( { format, onChange } ) {
 		name: __( 'Custom' ),
 		className:
 			'block-editor-date-format-picker__custom-format-select-control__custom-option',
-		__experimentalHint: __( 'Enter your own date format' ),
+		hint: __( 'Enter your own date format' ),
 	};
 
 	const [ isCustom, setIsCustom ] = useState(

package/src/components/default-block-appender/index.js

@@ -24,10 +24,14 @@ import { store as blockEditorStore } from '../../store';
 export const ZWNBSP = '\ufeff';
 
 export default function DefaultBlockAppender( { rootClientId } ) {
-	const { showPrompt, isLocked, placeholder } = useSelect(
+	const { showPrompt, isLocked, placeholder, isManualGrid } = useSelect(
 		( select ) => {
-			const { getBlockCount, getSettings, getTemplateLock } =
-				select( blockEditorStore );
+			const {
+				getBlockCount,
+				getSettings,
+				getTemplateLock,
+				getBlockAttributes,
+			} = select( blockEditorStore );
 
 			const isEmpty = ! getBlockCount( rootClientId );
 			const { bodyPlaceholder } = getSettings();
@@ -36,6 +40,9 @@ export default function DefaultBlockAppender( { rootClientId } ) {
 				showPrompt: isEmpty,
 				isLocked: !! getTemplateLock( rootClientId ),
 				placeholder: bodyPlaceholder,
+				isManualGrid:
+					getBlockAttributes( rootClientId )?.layout
+						?.isManualPlacement,
 			};
 		},
 		[ rootClientId ]
@@ -43,7 +50,7 @@ export default function DefaultBlockAppender( { rootClientId } ) {
 
 	const { insertDefaultBlock, startTyping } = useDispatch( blockEditorStore );
 
-	if ( isLocked ) {
+	if ( isLocked || isManualGrid ) {
 		return null;
 	}
 

package/src/components/font-appearance-control/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { CustomSelectControl } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -9,11 +9,7 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
-import { unlock } from '../../lock-unlock';
 
-const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
-	componentsPrivateApis
-);
 /**
  * Adjusts font appearance field label in case either font styles or weights
  * are disabled.

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

@@ -451,6 +451,9 @@ function BackgroundSizeControls( {
 	const positionValue =
 		style?.background?.backgroundPosition ||
 		inheritedValue?.background?.backgroundPosition;
+	const attachmentValue =
+		style?.background?.backgroundAttachment ||
+		inheritedValue?.background?.backgroundAttachment;
 
 	/*
 	 * An `undefined` value is replaced with any supplied
@@ -546,8 +549,17 @@ function BackgroundSizeControls( {
 			)
 		);
 
+	const toggleScrollWithPage = () =>
+		onChange(
+			setImmutably(
+				style,
+				[ 'background', 'backgroundAttachment' ],
+				attachmentValue === 'fixed' ? 'scroll' : 'fixed'
+			)
+		);
+
 	return (
-		<VStack spacing={ 3 } className="single-column">
+		<VStack spacing={ 4 } className="single-column">
 			<FocalPointPicker
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
@@ -556,6 +568,14 @@ function BackgroundSizeControls( {
 				value={ backgroundPositionToCoords( positionValue ) }
 				onChange={ updateBackgroundPosition }
 			/>
+			<ToggleControl
+				label={ __( 'Fixed background' ) }
+				checked={ attachmentValue === 'fixed' }
+				onChange={ toggleScrollWithPage }
+				help={ __(
+					'Whether your image should scroll with the page or stay fixed in place.'
+				) }
+			/>
 			<ToggleGroupControl
 				size="__unstable-large"
 				label={ __( 'Size' ) }

package/src/components/global-styles/hooks.js

@@ -85,7 +85,11 @@ const VALID_SETTINGS = [
 ];
 
 export const useGlobalStylesReset = () => {
-	const { user: config, setUserConfig } = useContext( GlobalStylesContext );
+	const { user, setUserConfig } = useContext( GlobalStylesContext );
+	const config = {
+		settings: user.settings,
+		styles: user.styles,
+	};
 	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
 	return [
 		canReset,

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

@@ -103,8 +103,13 @@
 .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;
+
+	// Ensure the dropzone is positioned to the size of the item.
+	position: relative;
+
 	// 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 {
@@ -192,15 +197,22 @@
 	.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;
 	}
+
+	// Override focal picker to avoid a double border.
+	.components-focal-point-picker::after {
+		content: none;
+	}
 }
 
 .block-editor-global-styles-background-panel__hidden-tools-panel-item {

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

@@ -6,6 +6,8 @@ import {
 	getFluidTypographyOptionsFromSettings,
 	getMergedFontFamiliesAndFontFamilyFaces,
 	findNearestFontWeight,
+	findNearestFontStyle,
+	findNearestStyleAndWeight,
 } from '../typography-utils';
 
 describe( 'typography utils', () => {
@@ -951,6 +953,329 @@ describe( 'typography utils', () => {
 		);
 	} );
 
+	describe( 'findNearestFontStyle', () => {
+		[
+			{
+				message:
+					'should return empty string when newFontStyleValue is `undefined`',
+				availableFontStyles: undefined,
+				newFontStyleValue: undefined,
+				expected: '',
+			},
+			{
+				message:
+					'should return newFontStyleValue value when availableFontStyles is empty',
+				availableFontStyles: [],
+				newFontStyleValue: 'italic',
+				expected: 'italic',
+			},
+			{
+				message:
+					'should return empty string if there is no new font style available',
+				availableFontStyles: [ { name: 'Normal', value: 'normal' } ],
+				newFontStyleValue: 'italic',
+				expected: '',
+			},
+			{
+				message:
+					'should return empty string if the new font style is invalid',
+				availableFontStyles: [
+					{ name: 'Regular', value: 'normal' },
+					{ name: 'Italic', value: 'italic' },
+				],
+				newFontStyleValue: 'not-valid',
+				expected: '',
+			},
+			{
+				message: 'should return italic if oblique is not available',
+				availableFontStyles: [
+					{ name: 'Regular', value: 'normal' },
+					{ name: 'Italic', value: 'italic' },
+				],
+				newFontStyleValue: 'oblique',
+				expected: 'italic',
+			},
+			{
+				message: 'should return normal if normal is available',
+				availableFontStyles: [
+					{ name: 'Regular', value: 'normal' },
+					{ name: 'Italic', value: 'italic' },
+				],
+				newFontStyleValue: 'normal',
+				expected: 'normal',
+			},
+		].forEach(
+			( {
+				message,
+				availableFontStyles,
+				newFontStyleValue,
+				expected,
+			} ) => {
+				it( `${ message }`, () => {
+					expect(
+						findNearestFontStyle(
+							availableFontStyles,
+							newFontStyleValue
+						)
+					).toEqual( expected );
+				} );
+			}
+		);
+	} );
+
+	describe( 'findNearestStyleAndWeight', () => {
+		[
+			{
+				message: 'should return empty object when all values are empty',
+				fontFamilyFaces: [],
+				fontStyle: undefined,
+				fontWeight: undefined,
+				expected: {},
+			},
+			{
+				message:
+					'should return original fontStyle and fontWeight when fontFamilyFaces is empty',
+				fontFamilyFaces: [],
+				fontStyle: 'italic',
+				fontWeight: '700',
+				expected: {
+					nearestFontStyle: 'italic',
+					nearestFontWeight: '700',
+				},
+			},
+			{
+				message:
+					'should return undefined values if both fontStyle and fontWeight are not available',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'ABeeZee',
+						fontStyle: 'italic',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2',
+						],
+					},
+				],
+				fontStyle: undefined,
+				fontWeight: undefined,
+				expected: {
+					nearestFontStyle: undefined,
+					nearestFontWeight: undefined,
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for normal/400',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'italic',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '700',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+						],
+					},
+				],
+				fontStyle: 'normal',
+				fontWeight: '400',
+				expected: {
+					nearestFontStyle: 'normal',
+					nearestFontWeight: '400',
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for normal/100',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'italic',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '700',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+						],
+					},
+				],
+				fontStyle: 'normal',
+				fontWeight: '100',
+				expected: {
+					nearestFontStyle: 'normal',
+					nearestFontWeight: '400',
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for italic/900',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'italic',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '700',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+						],
+					},
+				],
+				fontStyle: 'italic',
+				fontWeight: '900',
+				expected: {
+					nearestFontStyle: 'italic',
+					nearestFontWeight: '700',
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for oblique/600',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'italic',
+						fontWeight: '700',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+						],
+					},
+				],
+				fontStyle: 'oblique',
+				fontWeight: '600',
+				expected: {
+					nearestFontStyle: 'italic',
+					nearestFontWeight: '700',
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for 300 font weight and empty font style',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'italic',
+						fontWeight: '700',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+						],
+					},
+				],
+				fontStyle: undefined,
+				fontWeight: '300',
+				expected: {
+					nearestFontStyle: 'normal',
+					nearestFontWeight: '400',
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for oblique font style and empty font weight',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'italic',
+						fontWeight: '700',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+						],
+					},
+				],
+				fontStyle: 'oblique',
+				fontWeight: undefined,
+				expected: {
+					nearestFontStyle: 'italic',
+					nearestFontWeight: '400',
+				},
+			},
+		].forEach(
+			( {
+				message,
+				fontFamilyFaces,
+				fontStyle,
+				fontWeight,
+				expected,
+			} ) => {
+				it( `${ message }`, () => {
+					expect(
+						findNearestStyleAndWeight(
+							fontFamilyFaces,
+							fontStyle,
+							fontWeight
+						)
+					).toEqual( expected );
+				} );
+			}
+		);
+	} );
+
 	describe( 'typography utils', () => {
 		[
 			{

package/src/components/global-styles/test/use-global-styles-output.js

@@ -107,6 +107,7 @@ describe( 'global styles renderer', () => {
 						},
 					},
 					selector: ROOT_BLOCK_SELECTOR,
+					skipSelectorWrapper: true,
 				},
 				{
 					styles: {
@@ -128,6 +129,7 @@ describe( 'global styles renderer', () => {
 						},
 					},
 					selector: ELEMENTS.link,
+					skipSelectorWrapper: true,
 				},
 				{
 					styles: {
@@ -480,7 +482,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
-				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:root :where(body){background-color: red;margin: 10px;padding: 10px;}:root :where(a:where(:not(.wp-element-button))){color: blue;}a:where(:not(.wp-element-button)):hover{color: orange;}a:where(:not(.wp-element-button)):focus{color: orange;}:root :where(h1){font-size: 42px;}:root :where(.wp-block-group){margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}:root :where(h1,h2,h3,h4,h5,h6){color: orange;}:root :where(h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button))){color: hotpink;}h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover{color: red;}h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus{color: red;}:root :where(.wp-block-image img, .wp-block-image .wp-crop-area){border-radius: 9999px;}:root :where(.wp-block-image){color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
+				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }body{background-color: red;margin: 10px;padding: 10px;}a:where(:not(.wp-element-button)){color: blue;}:root :where(a:where(:not(.wp-element-button)):hover){color: orange;}:root :where(a:where(:not(.wp-element-button)):focus){color: orange;}h1{font-size: 42px;}:root :where(.wp-block-group){margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}:root :where(h1,h2,h3,h4,h5,h6){color: orange;}:root :where(h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button))){color: hotpink;}:root :where(h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover){color: red;}:root :where(h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus){color: red;}:root :where(.wp-block-image img, .wp-block-image .wp-crop-area){border-radius: 9999px;}:root :where(.wp-block-image){color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );
 

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

@@ -25,9 +25,8 @@ import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 import {
 	getMergedFontFamiliesAndFontFamilyFaces,
-	findNearestFontWeight,
+	findNearestStyleAndWeight,
 } from './typography-utils';
-import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
 
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
@@ -236,57 +235,50 @@ export default function TypographyPanel( {
 	const hasFontWeights = settings?.typography?.fontWeight;
 	const fontStyle = decodeValue( inheritedValue?.typography?.fontStyle );
 	const fontWeight = decodeValue( inheritedValue?.typography?.fontWeight );
-	const setFontAppearance = ( {
-		fontStyle: newFontStyle,
-		fontWeight: newFontWeight,
-	} ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				fontStyle: newFontStyle || undefined,
-				fontWeight: newFontWeight || undefined,
-			},
-		} );
-	};
+	const { nearestFontStyle, nearestFontWeight } = findNearestStyleAndWeight(
+		fontFamilyFaces,
+		fontStyle,
+		fontWeight
+	);
+	const setFontAppearance = useCallback(
+		( { fontStyle: newFontStyle, fontWeight: newFontWeight } ) => {
+			// Only update the font style and weight if they have changed.
+			if ( newFontStyle !== fontStyle || newFontWeight !== fontWeight ) {
+				onChange( {
+					...value,
+					typography: {
+						...value?.typography,
+						fontStyle: newFontStyle || undefined,
+						fontWeight: newFontWeight || undefined,
+					},
+				} );
+			}
+		},
+		[ fontStyle, fontWeight, onChange, value ]
+	);
 	const hasFontAppearance = () =>
 		!! value?.typography?.fontStyle || !! value?.typography?.fontWeight;
-	const resetFontAppearance = () => {
+	const resetFontAppearance = useCallback( () => {
 		setFontAppearance( {} );
-	};
+	}, [ setFontAppearance ] );
 
-	// Check if previous font style and weight values are available in the new font family
+	// 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 ) {
+		if ( nearestFontStyle && nearestFontWeight ) {
 			setFontAppearance( {
-				fontStyle,
-				fontWeight: findNearestFontWeight( fontWeights, fontWeight ),
+				fontStyle: nearestFontStyle,
+				fontWeight: nearestFontWeight,
 			} );
-		}
-
-		// 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 ) {
+		} else {
+			// Reset font appearance if there are no available styles or weights.
 			resetFontAppearance();
 		}
-	}, [ fontFamily ] );
+	}, [
+		nearestFontStyle,
+		nearestFontWeight,
+		resetFontAppearance,
+		setFontAppearance,
+	] );
 
 	// Line Height
 	const hasLineHeightEnabled = useHasLineHeightControl( settings );