@wordpress/edit-site 5.28.5 → 5.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.28.5",
+	"version": "5.30.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,48 +27,49 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.51.1",
-		"@wordpress/api-fetch": "^6.48.1",
-		"@wordpress/blob": "^3.51.1",
-		"@wordpress/block-editor": "^12.19.5",
-		"@wordpress/block-library": "^8.28.5",
-		"@wordpress/blocks": "^12.28.5",
-		"@wordpress/commands": "^0.22.4",
-		"@wordpress/components": "^26.0.4",
-		"@wordpress/compose": "^6.28.1",
-		"@wordpress/core-commands": "^0.20.5",
-		"@wordpress/core-data": "^6.28.5",
-		"@wordpress/data": "^9.21.1",
-		"@wordpress/dataviews": "^0.5.5",
-		"@wordpress/date": "^4.51.1",
-		"@wordpress/deprecated": "^3.51.1",
-		"@wordpress/dom": "^3.51.1",
-		"@wordpress/editor": "^13.28.5",
-		"@wordpress/element": "^5.28.1",
-		"@wordpress/escape-html": "^2.51.1",
-		"@wordpress/hooks": "^3.51.1",
-		"@wordpress/html-entities": "^3.51.1",
-		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.3",
-		"@wordpress/interface": "^5.28.4",
-		"@wordpress/keyboard-shortcuts": "^4.28.1",
-		"@wordpress/keycodes": "^3.51.1",
-		"@wordpress/media-utils": "^4.42.1",
-		"@wordpress/notices": "^4.19.1",
-		"@wordpress/patterns": "^1.12.5",
-		"@wordpress/plugins": "^6.19.4",
-		"@wordpress/preferences": "^3.28.4",
-		"@wordpress/primitives": "^3.49.1",
-		"@wordpress/private-apis": "^0.33.1",
-		"@wordpress/reusable-blocks": "^4.28.5",
-		"@wordpress/router": "^0.20.1",
-		"@wordpress/style-engine": "^1.34.1",
-		"@wordpress/url": "^3.52.1",
-		"@wordpress/viewport": "^5.28.1",
-		"@wordpress/widgets": "^3.28.5",
-		"@wordpress/wordcount": "^3.51.1",
+		"@wordpress/a11y": "^3.53.0",
+		"@wordpress/api-fetch": "^6.50.0",
+		"@wordpress/blob": "^3.53.0",
+		"@wordpress/block-editor": "^12.21.0",
+		"@wordpress/block-library": "^8.30.0",
+		"@wordpress/blocks": "^12.30.0",
+		"@wordpress/commands": "^0.24.0",
+		"@wordpress/components": "^27.1.0",
+		"@wordpress/compose": "^6.30.0",
+		"@wordpress/core-commands": "^0.22.0",
+		"@wordpress/core-data": "^6.30.0",
+		"@wordpress/data": "^9.23.0",
+		"@wordpress/dataviews": "^0.7.0",
+		"@wordpress/date": "^4.53.0",
+		"@wordpress/deprecated": "^3.53.0",
+		"@wordpress/dom": "^3.53.0",
+		"@wordpress/editor": "^13.30.0",
+		"@wordpress/element": "^5.30.0",
+		"@wordpress/escape-html": "^2.53.0",
+		"@wordpress/hooks": "^3.53.0",
+		"@wordpress/html-entities": "^3.53.0",
+		"@wordpress/i18n": "^4.53.0",
+		"@wordpress/icons": "^9.44.0",
+		"@wordpress/interface": "^5.30.0",
+		"@wordpress/keyboard-shortcuts": "^4.30.0",
+		"@wordpress/keycodes": "^3.53.0",
+		"@wordpress/media-utils": "^4.44.0",
+		"@wordpress/notices": "^4.21.0",
+		"@wordpress/patterns": "^1.14.0",
+		"@wordpress/plugins": "^6.21.0",
+		"@wordpress/preferences": "^3.30.0",
+		"@wordpress/primitives": "^3.51.0",
+		"@wordpress/private-apis": "^0.35.0",
+		"@wordpress/reusable-blocks": "^4.30.0",
+		"@wordpress/router": "^0.22.0",
+		"@wordpress/style-engine": "^1.36.0",
+		"@wordpress/url": "^3.54.0",
+		"@wordpress/viewport": "^5.30.0",
+		"@wordpress/widgets": "^3.30.0",
+		"@wordpress/wordcount": "^3.53.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
+		"client-zip": "^2.4.4",
 		"colord": "^2.9.2",
 		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",
@@ -85,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4927ea437069f9aed12f696df294a79bd8e12fd5"
+	"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
 }

package/src/components/actions/index.js

@@ -362,7 +362,7 @@ export const viewPostAction = {
 	},
 	callback( posts ) {
 		const post = posts[ 0 ];
-		document.location.href = post.link;
+		window.open( post.link, '_blank' );
 	},
 };
 

package/src/components/block-editor/editor-canvas.js

@@ -26,10 +26,9 @@ import {
 const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
 function EditorCanvas( { enableResizing, settings, children, ...props } ) {
-	const { hasBlocks, isFocusMode, templateType, canvasMode, isZoomOutMode } =
-		useSelect( ( select ) => {
-			const { getBlockCount, __unstableGetEditorMode } =
-				select( blockEditorStore );
+	const { hasBlocks, isFocusMode, templateType, canvasMode } = useSelect(
+		( select ) => {
+			const { getBlockCount } = select( blockEditorStore );
 			const { getEditedPostType, getCanvasMode } = unlock(
 				select( editSiteStore )
 			);
@@ -38,11 +37,12 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			return {
 				templateType: _templateType,
 				isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
-				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 				canvasMode: getCanvasMode(),
 				hasBlocks: !! getBlockCount(),
 			};
-		}, [] );
+		},
+		[]
+	);
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const [ isFocused, setIsFocused ] = useState( false );
 
@@ -52,8 +52,11 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 		}
 	}, [ canvasMode ] );
 
-	const viewModeProps = {
-		'aria-label': __( 'Editor Canvas' ),
+	// In view mode, make the canvas iframe be perceived and behave as a button
+	// to switch to edit mode, with a meaningful label and no title attribute.
+	const viewModeIframeProps = {
+		'aria-label': __( 'Edit' ),
+		title: null,
 		role: 'button',
 		tabIndex: 0,
 		onFocus: () => setIsFocused( true ),
@@ -107,9 +110,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			renderAppender={ showBlockAppender }
 			styles={ styles }
 			iframeProps={ {
-				expand: isZoomOutMode,
-				scale: isZoomOutMode ? 0.45 : undefined,
-				frameSize: isZoomOutMode ? 100 : undefined,
+				shouldZoom: true,
 				className: classnames(
 					'edit-site-visual-editor__editor-canvas',
 					{
@@ -117,7 +118,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 					}
 				),
 				...props,
-				...( canvasMode === 'view' ? viewModeProps : {} ),
+				...( canvasMode === 'view' ? viewModeIframeProps : {} ),
 			} }
 		>
 			{ children }

package/src/components/block-editor/style.scss

@@ -22,7 +22,6 @@
 	position: relative;
 	height: 100%;
 	display: block;
-	overflow: hidden;
 	background-color: $gray-300;
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
@@ -62,8 +61,6 @@
 
 	.components-resizable-box__container {
 		margin: 0 auto;
-		// Removing this will cancel the bottom margins in the iframe.
-		overflow: auto;
 	}
 
 	&.is-view-mode {

package/src/components/block-editor/use-site-editor-settings.js

@@ -162,6 +162,7 @@ export function useSpecificEditorSettings() {
 			// I wonder if they should be set in the post editor too
 			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
 			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
+			__unstableIsPreviewMode: canvasMode === 'view',
 		};
 	}, [
 		settings,

package/src/components/code-editor/index.js

@@ -14,6 +14,7 @@ import { __ } from '@wordpress/i18n';
 import { Button, VisuallyHidden } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -31,7 +32,7 @@ export default function CodeEditor() {
 		const editedRecord = getEditedEntityRecord( 'postType', _type, _id );
 
 		return {
-			shortcut: getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
+			shortcut: getShortcutRepresentation( 'core/editor/toggle-mode' ),
 			content: editedRecord?.content,
 			blocks: editedRecord?.blocks,
 			type: _type,
@@ -52,7 +53,7 @@ export default function CodeEditor() {
 		return content;
 	}, [ content, blocks ] );
 
-	const { switchEditorMode } = useDispatch( editSiteStore );
+	const { switchEditorMode } = useDispatch( editorStore );
 	return (
 		<div className="edit-site-code-editor">
 			<div className="edit-site-code-editor__toolbar">

package/src/components/editor/index.js

@@ -14,7 +14,6 @@ import {
 	BlockBreadcrumb,
 	BlockToolbar,
 	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
 	BlockInspector,
 } from '@wordpress/block-editor';
 import {
@@ -56,7 +55,6 @@ import SiteEditorCanvas from '../block-editor/site-editor-canvas';
 import TemplatePartConverter from '../template-part-converter';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
 
-const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
 const {
 	ExperimentalEditorProvider: EditorProvider,
 	InserterSidebar,
@@ -74,21 +72,6 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-// Prevent accidental removal of certain blocks, asking the user for
-// confirmation.
-const blockRemovalRules = {
-	'core/query': __( 'Query Loop displays a list of posts or pages.' ),
-	'core/post-content': __(
-		'Post Content displays the content of a post or page.'
-	),
-	'core/post-template': __(
-		'Post Template displays each post or page in a Query Loop.'
-	),
-	'bindings/core/pattern-overrides': __(
-		'Blocks from synced patterns that can have overriden content.'
-	),
-};
-
 export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
@@ -115,14 +98,18 @@ export default function Editor( { isLoading } ) {
 		postTypeLabel,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
-		const { getEditedPostContext, getEditorMode, getCanvasMode } = unlock(
+		const { getEditedPostContext, getCanvasMode } = unlock(
 			select( editSiteStore )
 		);
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
 		const { getEntityRecord } = select( coreDataStore );
-		const { isInserterOpened, isListViewOpened, getPostTypeLabel } =
-			select( editorStore );
+		const {
+			isInserterOpened,
+			isListViewOpened,
+			getPostTypeLabel,
+			getEditorMode,
+		} = select( editorStore );
 		const _context = getEditedPostContext();
 
 		// The currently selected entity to display.
@@ -239,9 +226,6 @@ export default function Editor( { isLoading } ) {
 											<BlockToolbar hideDragHandle />
 										) }
 										<SiteEditorCanvas />
-										<BlockRemovalWarningModal
-											rules={ blockRemovalRules }
-										/>
 										<PatternModal />
 									</>
 								) }
@@ -265,10 +249,9 @@ export default function Editor( { isLoading } ) {
 						sidebar={
 							! isDistractionFree &&
 							isEditMode &&
-							isRightSidebarOpen && (
-								<>
-									<ComplementaryArea.Slot scope="core/edit-site" />
-								</>
+							isRightSidebarOpen &&
+							! isDistractionFree && (
+								<ComplementaryArea.Slot scope="core/edit-site" />
 							)
 						}
 						footer={

package/src/components/editor-canvas-container/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Children, cloneElement, useState, useMemo } from '@wordpress/element';
+import { Children, cloneElement, useState } from '@wordpress/element';
 import {
 	Button,
 	privateApis as componentsPrivateApis,
@@ -82,10 +82,6 @@ function EditorCanvasContainer( {
 
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 	const sectionFocusReturnRef = useFocusReturn();
-	const title = useMemo(
-		() => getEditorCanvasContainerTitle( editorCanvasContainerView ),
-		[ editorCanvasContainerView ]
-	);
 
 	function onCloseContainer() {
 		setIsListViewOpened( showListViewByDefault );
@@ -119,6 +115,7 @@ function EditorCanvasContainer( {
 		return null;
 	}
 
+	const title = getEditorCanvasContainerTitle( editorCanvasContainerView );
 	const shouldShowCloseButton = onClose || closeButtonLabel;
 
 	return (

package/src/components/{test → error-boundary/test}/error-boundary.js

@@ -1,15 +1,17 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
 /**
  * WordPress dependencies
  */
 import * as wpHooks from '@wordpress/hooks';
+
 /**
  * Internal dependencies
  */
-import ErrorBoundary from '../error-boundary';
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
+import ErrorBoundary from '../index';
 
 const theError = new Error( 'Kaboom' );
 

package/src/components/global-styles/color-palette-panel.js

@@ -13,6 +13,8 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import ColorVariations from './variations/variations-color';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
@@ -45,7 +47,12 @@ export default function ColorPalettePanel( { name } ) {
 		'color.defaultPalette',
 		name
 	);
-
+	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
+		property: 'color',
+		filter: ( variation ) =>
+			variation?.settings?.color &&
+			Object.keys( variation?.settings?.color ).length,
+	} );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
 
@@ -78,6 +85,9 @@ export default function ColorPalettePanel( { name } ) {
 						popoverProps={ popoverProps }
 					/>
 				) }
+			{ !! colorVariations.length && (
+				<ColorVariations variations={ colorVariations } />
+			) }
 			<PaletteEdit
 				colors={ customColors }
 				onChange={ setCustomColors }

package/src/components/global-styles/font-families.js

@@ -33,7 +33,7 @@ function FontFamilies() {
 			{ !! modalTabOpen && (
 				<FontLibraryModal
 					onRequestClose={ () => toggleModal() }
-					initialTabId={ modalTabOpen }
+					defaultTabId={ modalTabOpen }
 				/>
 			) }
 

package/src/components/global-styles/font-library-modal/collection-font-variant.js

@@ -40,7 +40,7 @@ function CollectionFontVariant( {
 				<CheckboxControl
 					checked={ selected }
 					onChange={ handleToggleActivation }
-					__nextHasNoMarginBottom={ true }
+					__nextHasNoMarginBottom
 					id={ checkboxId }
 				/>
 				<label htmlFor={ checkboxId }>

package/src/components/global-styles/font-library-modal/context.js

@@ -27,6 +27,7 @@ import {
 	setUIValuesNeeded,
 	mergeFontFamilies,
 	loadFontFaceInBrowser,
+	unloadFontFaceInBrowser,
 	getDisplaySrcFromFontFace,
 	makeFontFacesFormData,
 	makeFontFamilyFormData,
@@ -363,6 +364,12 @@ function FontLibraryProvider( { children } ) {
 			...fontFamilies,
 			[ font.source ]: newCustomFonts,
 		} );
+
+		if ( font.fontFace ) {
+			font.fontFace.forEach( ( face ) => {
+				unloadFontFaceInBrowser( face, 'all' );
+			} );
+		}
 	};
 
 	const activateCustomFontFamilies = ( fontsToAdd ) => {
@@ -398,6 +405,23 @@ function FontLibraryProvider( { children } ) {
 			...fontFamilies,
 			[ font.source ]: newFonts,
 		} );
+
+		const isFaceActivated = isFontActivated(
+			font.slug,
+			face.fontStyle,
+			face.fontWeight,
+			font.source
+		);
+
+		if ( isFaceActivated ) {
+			loadFontFaceInBrowser(
+				face,
+				getDisplaySrcFromFontFace( face.src ),
+				'all'
+			);
+		} else {
+			unloadFontFaceInBrowser( face, 'all' );
+		}
 	};
 
 	const loadFontFaceAsset = async ( fontFace ) => {

package/src/components/global-styles/font-library-modal/font-collection.js

@@ -10,7 +10,6 @@ import {
 } from '@wordpress/element';
 import {
 	__experimentalSpacer as Spacer,
-	__experimentalInputControl as InputControl,
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -21,20 +20,15 @@ import {
 	Notice,
 	SelectControl,
 	Spinner,
-	Icon,
 	FlexItem,
 	Flex,
 	Button,
 	DropdownMenu,
+	SearchControl,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import {
-	search,
-	closeSmall,
-	moreVertical,
-	chevronLeft,
-} from '@wordpress/icons';
+import { moreVertical, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -168,11 +162,6 @@ function FontCollection( { slug } ) {
 		setPage( 1 );
 	};
 
-	const resetSearch = () => {
-		setFilters( { ...filters, search: '' } );
-		setPage( 1 );
-	};
-
 	const handleToggleVariant = ( font, face ) => {
 		const newFontsToInstall = toggleFont( font, face, fontsToInstall );
 		setFontsToInstall( newFontsToInstall );
@@ -288,20 +277,14 @@ function FontCollection( { slug } ) {
 					<Spacer margin={ 4 } />
 					<Flex>
 						<FlexItem>
-							<InputControl
+							<SearchControl
+								className="font-library-modal__search"
 								value={ filters.search }
 								placeholder={ __( 'Font name…' ) }
 								label={ __( 'Search' ) }
 								onChange={ debouncedUpdateSearchInput }
-								prefix={ <Icon icon={ search } /> }
-								suffix={
-									filters?.search ? (
-										<Icon
-											icon={ closeSmall }
-											onClick={ resetSearch }
-										/>
-									) : null
-								}
+								__nextHasNoMarginBottom
+								hideLabelFromVision={ false }
 							/>
 						</FlexItem>
 						<FlexItem>
@@ -358,7 +341,7 @@ function FontCollection( { slug } ) {
 					<Flex justify="flex-start">
 						<NavigatorToParentButton
 							icon={ chevronLeft }
-							isSmall
+							size="small"
 							onClick={ () => {
 								setSelectedFont( null );
 							} }

package/src/components/global-styles/font-library-modal/index.js

@@ -42,7 +42,7 @@ const tabsFromCollections = ( collections ) =>
 
 function FontLibraryModal( {
 	onRequestClose,
-	initialTabId = 'installed-fonts',
+	defaultTabId = 'installed-fonts',
 } ) {
 	const { collections, setNotice } = useContext( FontLibraryContext );
 	const canUserCreate = useSelect( ( select ) => {
@@ -70,7 +70,7 @@ function FontLibraryModal( {
 			className="font-library-modal"
 		>
 			<div className="font-library-modal__tabs">
-				<Tabs initialTabId={ initialTabId } onSelect={ onSelect }>
+				<Tabs defaultTabId={ defaultTabId } onSelect={ onSelect }>
 					<Tabs.TabList>
 						{ tabs.map( ( { id, title } ) => (
 							<Tabs.Tab key={ id } tabId={ id }>

package/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -198,7 +198,7 @@ function InstalledFonts() {
 					<Flex justify="flex-start">
 						<NavigatorToParentButton
 							icon={ chevronLeft }
-							isSmall
+							size="small"
 							onClick={ () => {
 								handleSetLibraryFontSelected( null );
 							} }

package/src/components/global-styles/font-library-modal/library-font-variant.js

@@ -50,7 +50,7 @@ function LibraryFontVariant( { face, font } ) {
 				<CheckboxControl
 					checked={ isInstalled }
 					onChange={ handleToggleActivation }
-					__nextHasNoMarginBottom={ true }
+					__nextHasNoMarginBottom
 					id={ checkboxId }
 				/>
 				<label htmlFor={ checkboxId }>

package/src/components/global-styles/font-library-modal/upload-fonts.js

@@ -184,7 +184,7 @@ function UploadFonts() {
 						accept={ ALLOWED_FILE_EXTENSIONS.map(
 							( ext ) => `.${ ext }`
 						).join( ',' ) }
-						multiple={ true }
+						multiple
 						onChange={ onFilesUpload }
 						render={ ( { openFileDialog } ) => (
 							<Button

package/src/components/global-styles/font-library-modal/utils/index.js

@@ -121,6 +121,40 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 	}
 }
 
+/*
+ * Unloads the font face and remove it from the browser.
+ * It also removes it from the iframe document.
+ *
+ * Note that Font faces that were added to the set using the CSS @font-face rule
+ * remain connected to the corresponding CSS, and cannot be deleted.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/delete.
+ */
+export function unloadFontFaceInBrowser( fontFace, removeFrom = 'all' ) {
+	const unloadFontFace = ( fonts ) => {
+		fonts.forEach( ( f ) => {
+			if (
+				f.family === formatFontFaceName( fontFace.fontFamily ) &&
+				f.weight === fontFace.fontWeight &&
+				f.style === fontFace.fontStyle
+			) {
+				fonts.delete( f );
+			}
+		} );
+	};
+
+	if ( removeFrom === 'document' || removeFrom === 'all' ) {
+		unloadFontFace( document.fonts );
+	}
+
+	if ( removeFrom === 'iframe' || removeFrom === 'all' ) {
+		const iframeDocument = document.querySelector(
+			'iframe[name="editor-canvas"]'
+		).contentDocument;
+		unloadFontFace( iframeDocument.fonts );
+	}
+}
+
 /**
  * Retrieves the display source from a font face src.
  *

package/src/components/global-styles/font-library-modal/utils/preview-styles.js

@@ -117,7 +117,8 @@ export function getFamilyPreviewStyle( family ) {
 	if ( family.fontFace ) {
 		//get all the font faces with normal style
 		const normalFaces = family.fontFace.filter(
-			( face ) => face.fontStyle.toLowerCase() === 'normal'
+			( face ) =>
+				face?.fontStyle && face.fontStyle.toLowerCase() === 'normal'
 		);
 		if ( normalFaces.length > 0 ) {
 			style.fontStyle = 'normal';

package/src/components/global-styles/gradients-palette-panel.js

@@ -114,8 +114,8 @@ export default function GradientPalettePanel( { name } ) {
 					<Spacer margin={ 3 } />
 					<DuotonePicker
 						duotonePalette={ duotonePalette }
-						disableCustomDuotone={ true }
-						disableCustomColors={ true }
+						disableCustomDuotone
+						disableCustomColors
 						clearable={ false }
 						onChange={ noop }
 					/>

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

@@ -25,7 +25,7 @@ function ScreenHeader( { title, description, onBack } ) {
 								{ minWidth: 24, padding: 0 }
 							}
 							icon={ isRTL() ? chevronRight : chevronLeft }
-							isSmall
+							size="small"
 							aria-label={ __( 'Navigate to the previous view' ) }
 							onClick={ onBack }
 						/>