@wordpress/edit-site 5.35.0 → 6.0.0

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

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -17,6 +16,7 @@ const BACKGROUND_DEFAULT_VALUES = {
 const {
 	useGlobalStyle,
 	useGlobalSetting,
+	useGlobalStyleLinks,
 	BackgroundPanel: StylesBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
@@ -42,6 +42,7 @@ export default function BackgroundPanel() {
 	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
+	const _links = useGlobalStyleLinks();
 	const [ settings ] = useGlobalSetting( '' );
 
 	const defaultControls = {
@@ -57,9 +58,9 @@ export default function BackgroundPanel() {
 			value={ style }
 			onChange={ setStyle }
 			settings={ settings }
-			headerLabel={ __( 'Image' ) }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 			defaultControls={ defaultControls }
+			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);
 }

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

@@ -86,7 +86,7 @@ export default function ColorPalettePanel( { name } ) {
 				slugPrefix="custom-"
 				popoverProps={ popoverProps }
 			/>
-			<ColorVariations title={ __( 'Presets' ) } />
+			<ColorVariations title={ __( 'Palettes' ) } />
 		</VStack>
 	);
 }

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

@@ -7,8 +7,8 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 	Button,
-	Tooltip,
 } from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { settings } from '@wordpress/icons';
 import { useContext } from '@wordpress/element';
 
@@ -21,18 +21,31 @@ import FontLibraryProvider, {
 import FontLibraryModal from './font-library-modal';
 import FontFamilyItem from './font-family-item';
 import Subtitle from './subtitle';
+import { setUIValuesNeeded } from './font-library-modal/utils';
+import { unlock } from '../../lock-unlock';
 
-function FontFamilies() {
-	const { modalTabOpen, toggleModal, themeFonts, customFonts } =
-		useContext( FontLibraryContext );
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
+function FontFamilies() {
+	const { modalTabOpen, setModalTabOpen } = useContext( FontLibraryContext );
+	const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' );
+	const themeFonts = fontFamilies?.theme
+		? fontFamilies.theme
+				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
+				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		: [];
+	const customFonts = fontFamilies?.custom
+		? fontFamilies.custom
+				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
+				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		: [];
 	const hasFonts = 0 < customFonts.length || 0 < themeFonts.length;
 
 	return (
 		<>
 			{ !! modalTabOpen && (
 				<FontLibraryModal
-					onRequestClose={ () => toggleModal() }
+					onRequestClose={ () => setModalTabOpen( null ) }
 					defaultTabId={ modalTabOpen }
 				/>
 			) }
@@ -40,18 +53,12 @@ function FontFamilies() {
 			<VStack spacing={ 2 }>
 				<HStack justify="space-between">
 					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
-					<HStack justify="flex-end">
-						<Tooltip text={ __( 'Manage fonts' ) }>
-							<Button
-								onClick={ () =>
-									toggleModal( 'installed-fonts' )
-								}
-								aria-label={ __( 'Manage fonts' ) }
-								icon={ settings }
-								size={ 'small' }
-							/>
-						</Tooltip>
-					</HStack>
+					<Button
+						onClick={ () => setModalTabOpen( 'installed-fonts' ) }
+						label={ __( 'Manage fonts' ) }
+						icon={ settings }
+						size="small"
+					/>
 				</HStack>
 				{ hasFonts ? (
 					<ItemGroup isBordered isSeparated>
@@ -68,7 +75,7 @@ function FontFamilies() {
 						<Button
 							className="edit-site-global-styles-font-families__add-fonts"
 							variant="secondary"
-							onClick={ () => toggleModal( 'upload-fonts' ) }
+							onClick={ () => setModalTabOpen( 'upload-fonts' ) }
 						>
 							{ __( 'Add fonts' ) }
 						</Button>

package/src/components/global-styles/font-family-item.js

@@ -16,14 +16,14 @@ import { FontLibraryContext } from './font-library-modal/context';
 import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
 
 function FontFamilyItem( { font } ) {
-	const { handleSetLibraryFontSelected, toggleModal } =
+	const { handleSetLibraryFontSelected, setModalTabOpen } =
 		useContext( FontLibraryContext );
 
 	const variantsCount = font?.fontFace?.length || 1;
 
 	const handleClick = () => {
 		handleSetLibraryFontSelected( font );
-		toggleModal( 'installed-fonts' );
+		setModalTabOpen( 'installed-fonts' );
 	};
 
 	const previewStyle = getFamilyPreviewStyle( font );

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

@@ -14,6 +14,8 @@ import { getFontFaceVariantName } from './utils';
 import FontDemo from './font-demo';
 import { unlock } from '../../../lock-unlock';
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 function CollectionFontVariant( {
 	face,
 	font,
@@ -29,7 +31,6 @@ function CollectionFontVariant( {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const checkboxId = kebabCase(
 		`${ font.slug }-${ getFontFaceVariantName( face ) }`
 	);

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

@@ -51,8 +51,6 @@ function FontLibraryProvider( { children } ) {
 		'globalStyles',
 		globalStylesId
 	);
-	const fontFamiliesHasChanges =
-		!! globalStyles?.edits?.settings?.typography?.fontFamilies;
 
 	const [ isInstalling, setIsInstalling ] = useState( false );
 	const [ refreshKey, setRefreshKey ] = useState( 0 );
@@ -62,14 +60,11 @@ function FontLibraryProvider( { children } ) {
 		setRefreshKey( Date.now() );
 	};
 
-	const {
-		records: libraryPosts = [],
-		isResolving: isResolvingLibrary,
-		hasResolved: hasResolvedLibrary,
-	} = useEntityRecords( 'postType', 'wp_font_family', {
-		refreshKey,
-		_embed: true,
-	} );
+	const { records: libraryPosts = [], isResolving: isResolvingLibrary } =
+		useEntityRecords( 'postType', 'wp_font_family', {
+			refreshKey,
+			_embed: true,
+		} );
 
 	const libraryFonts =
 		( libraryPosts || [] ).map( ( fontFamilyPost ) => {
@@ -87,12 +82,6 @@ function FontLibraryProvider( { children } ) {
 	const [ fontFamilies, setFontFamilies ] = useGlobalSetting(
 		'typography.fontFamilies'
 	);
-	// theme.json file font families
-	const [ baseFontFamilies ] = useGlobalSetting(
-		'typography.fontFamilies',
-		undefined,
-		'base'
-	);
 
 	/*
 	 * Save the font families to the database.
@@ -131,24 +120,6 @@ function FontLibraryProvider( { children } ) {
 				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
 		: [];
 
-	const themeFontsSlugs = new Set( themeFonts.map( ( f ) => f.slug ) );
-
-	/*
-	 * Base Theme Fonts are the fonts defined in the theme.json *file*.
-	 *
-	 * Uses the fonts from global styles + the ones from the theme.json file that hasn't repeated slugs.
-	 * Avoids inconsistencies with the fonts listed in the font library modal as base (inactivated).
-	 * These inconsistencies can happen when the active theme fonts in global styles aren't defined in theme.json file as when a theme style variation is applied.
-	 */
-	const baseThemeFonts = baseFontFamilies?.theme
-		? themeFonts.concat(
-				baseFontFamilies.theme
-					.filter( ( f ) => ! themeFontsSlugs.has( f.slug ) )
-					.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
-					.sort( ( a, b ) => a.name.localeCompare( b.name ) )
-		  )
-		: [];
-
 	const customFonts = fontFamilies?.custom
 		? fontFamilies.custom
 				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
@@ -187,10 +158,6 @@ function FontLibraryProvider( { children } ) {
 		} );
 	};
 
-	const toggleModal = ( tabName ) => {
-		setModalTabOpen( tabName || null );
-	};
-
 	// Demo
 	const [ loadedFontUrls ] = useState( new Set() );
 
@@ -549,9 +516,6 @@ function FontLibraryProvider( { children } ) {
 				libraryFontSelected,
 				handleSetLibraryFontSelected,
 				fontFamilies,
-				themeFonts,
-				baseThemeFonts,
-				customFonts,
 				baseCustomFonts,
 				isFontActivated,
 				getFontFacesActivated,
@@ -561,14 +525,12 @@ function FontLibraryProvider( { children } ) {
 				toggleActivateFont,
 				getAvailableFontsOutline,
 				modalTabOpen,
-				toggleModal,
+				setModalTabOpen,
 				refreshLibrary,
 				notice,
 				setNotice,
 				saveFontFamilies,
-				fontFamiliesHasChanges,
 				isResolvingLibrary,
-				hasResolvedLibrary,
 				isInstalling,
 				collections,
 				getFontCollection,

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

@@ -24,7 +24,7 @@ import {
 	Button,
 	DropdownMenu,
 	SearchControl,
-	privateApis as componentsPrivateApis,
+	ProgressBar,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
@@ -45,8 +45,6 @@ import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
 import { downloadFontFaceAssets } from './utils';
 import { sortFontFaces } from './utils/sort-font-faces';
 import CollectionFontVariant from './collection-font-variant';
-import { unlock } from '../../../lock-unlock';
-const { ProgressBar } = unlock( componentsPrivateApis );
 
 const DEFAULT_CATEGORY = {
 	slug: 'all',
@@ -352,7 +350,7 @@ function FontCollection( { slug } ) {
 												font={
 													font.font_family_settings
 												}
-												navigatorPath={ '/fontFamily' }
+												navigatorPath="/fontFamily"
 												onClick={ () => {
 													setSelectedFont(
 														font.font_family_settings
@@ -504,7 +502,7 @@ function FontCollection( { slug } ) {
 														parseInt( newPage )
 													)
 												}
-												size={ 'compact' }
+												size="compact"
 												__nextHasNoMarginBottom
 											/>
 										),

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

@@ -15,29 +15,31 @@ import {
 	__experimentalVStack as VStack,
 	Flex,
 	Notice,
-	privateApis as componentsPrivateApis,
+	ProgressBar,
 } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
+import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useContext, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { chevronLeft } from '@wordpress/icons';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../../lock-unlock';
 import { FontLibraryContext } from './context';
 import FontCard from './font-card';
 import LibraryFontVariant from './library-font-variant';
 import { sortFontFaces } from './utils/sort-font-faces';
-const { ProgressBar } = unlock( componentsPrivateApis );
+import { setUIValuesNeeded } from './utils';
+import { unlock } from '../../../lock-unlock';
+
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 function InstalledFonts() {
 	const {
 		baseCustomFonts,
 		libraryFontSelected,
-		baseThemeFonts,
 		handleSetLibraryFontSelected,
 		refreshLibrary,
 		uninstallFontFamily,
@@ -45,12 +47,44 @@ function InstalledFonts() {
 		isInstalling,
 		saveFontFamilies,
 		getFontFacesActivated,
-		fontFamiliesHasChanges,
 		notice,
 		setNotice,
 		fontFamilies,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+	const [ baseFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies',
+		undefined,
+		'base'
+	);
+	const globalStylesId = useSelect( ( select ) => {
+		const { __experimentalGetCurrentGlobalStylesId } = select( coreStore );
+		return __experimentalGetCurrentGlobalStylesId();
+	} );
+
+	const globalStyles = useEntityRecord(
+		'root',
+		'globalStyles',
+		globalStylesId
+	);
+	const fontFamiliesHasChanges =
+		!! globalStyles?.edits?.settings?.typography?.fontFamilies;
+
+	const themeFonts = fontFamilies?.theme
+		? fontFamilies.theme
+				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
+				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		: [];
+	const themeFontsSlugs = new Set( themeFonts.map( ( f ) => f.slug ) );
+	const baseThemeFonts = baseFontFamilies?.theme
+		? themeFonts.concat(
+				baseFontFamilies.theme
+					.filter( ( f ) => ! themeFontsSlugs.has( f.slug ) )
+					.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
+					.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		  )
+		: [];
+
 	const customFontFamilyId =
 		libraryFontSelected?.source === 'custom' && libraryFontSelected?.id;
 
@@ -156,9 +190,7 @@ function InstalledFonts() {
 												>
 													<FontCard
 														font={ font }
-														navigatorPath={
-															'/fontFamily'
-														}
+														navigatorPath="/fontFamily"
 														variantsText={ getFontCardVariantsText(
 															font
 														) }
@@ -195,9 +227,7 @@ function InstalledFonts() {
 												>
 													<FontCard
 														font={ font }
-														navigatorPath={
-															'/fontFamily'
-														}
+														navigatorPath="/fontFamily"
 														variantsText={ getFontCardVariantsText(
 															font
 														) }

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

@@ -16,6 +16,8 @@ import { FontLibraryContext } from './context';
 import FontDemo from './font-demo';
 import { unlock } from '../../../lock-unlock';
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
 		useContext( FontLibraryContext );
@@ -39,7 +41,6 @@ function LibraryFontVariant( { face, font } ) {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const { kebabCase } = unlock( componentsPrivateApis );
 	const checkboxId = kebabCase(
 		`${ font.slug }-${ getFontFaceVariantName( face ) }`
 	);

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

@@ -11,7 +11,7 @@ import {
 	Notice,
 	FormFileUpload,
 	FlexItem,
-	privateApis as componentsPrivateApis,
+	ProgressBar,
 } from '@wordpress/components';
 import { useContext, useState } from '@wordpress/element';
 
@@ -23,9 +23,6 @@ import { FontLibraryContext } from './context';
 import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
-import { unlock } from '../../../lock-unlock';
-
-const { ProgressBar } = unlock( componentsPrivateApis );
 
 function UploadFonts() {
 	const { installFonts, notice, setNotice } =

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

@@ -15,6 +15,7 @@ import { formatFontFaceName } from './preview-styles';
  * Browser dependencies
  */
 const { File } = window;
+const { kebabCase } = unlock( componentsPrivateApis );
 
 export function setUIValuesNeeded( font, extraValues = {} ) {
 	if ( ! font.name && ( font.fontFamily || font.slug ) ) {
@@ -184,7 +185,6 @@ export function getDisplaySrcFromFontFace( input ) {
 
 export function makeFontFamilyFormData( fontFamily ) {
 	const formData = new FormData();
-	const { kebabCase } = unlock( componentsPrivateApis );
 
 	const { fontFace, category, ...familyWithValidParameters } = fontFamily;
 	const fontFamilySettings = {

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

@@ -9,22 +9,16 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { useContext } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import { getFontFamilies } from './utils';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
-const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
-const { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(
-	blockEditorPrivateApis
-);
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
@@ -142,38 +136,17 @@ export function useTypographyVariations() {
 		useCurrentMergeThemeStyleVariationsWithUserConfig( {
 			property: 'typography',
 		} );
-
-	const { base } = useContext( GlobalStylesContext );
 	/*
-	 * Filter duplicate variations based on whether the variaitons
-	 * have different heading and body font families.
+	 * Filter out variations with no settings or styles.
 	 */
 	return typographyVariations?.length
-		? Object.values(
-				typographyVariations.reduce( ( acc, variation ) => {
-					const [ bodyFontFamily, headingFontFamily ] =
-						getFontFamilies(
-							mergeBaseAndUserConfigs( base, variation )
-						);
-
-					// Always preseve the default variation.
-					if ( variation?.title === 'Default' ) {
-						acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						] = variation;
-					} else if (
-						headingFontFamily?.name &&
-						bodyFontFamily?.name &&
-						! acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						]
-					) {
-						acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						] = variation;
-					}
-					return acc;
-				}, {} )
-		  )
+		? typographyVariations.filter( ( variation ) => {
+				const { settings, styles, title } = variation;
+				return (
+					title === __( 'Default' ) || // Always preseve the default variation.
+					Object.keys( settings ).length > 0 ||
+					Object.keys( styles ).length > 0
+				);
+		  } )
 		: [];
 }

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

@@ -10,8 +10,8 @@ import {
 	ColorIndicator,
 	Button,
 } from '@wordpress/components';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { shuffle } from '@wordpress/icons';
+import { isRTL, __ } from '@wordpress/i18n';
+import { Icon, shuffle, chevronLeft, chevronRight } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -55,13 +55,7 @@ function Palette( { name } ) {
 		? '/colors/palette'
 		: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';
 	const paletteButtonText =
-		colors.length > 0
-			? sprintf(
-					// Translators: %d: Number of palette colors.
-					_n( '%d color', '%d colors', colors.length ),
-					colors.length
-			  )
-			: __( 'Add custom colors' );
+		colors.length > 0 ? __( 'Edit palette' ) : __( 'Add colors' );
 
 	return (
 		<VStack spacing={ 3 }>
@@ -69,13 +63,12 @@ function Palette( { name } ) {
 			<ItemGroup isBordered isSeparated>
 				<NavigationButtonAsItem
 					path={ screenPath }
-					aria-label={ __( 'Color palettes' ) }
+					aria-label={ paletteButtonText }
 				>
-					<HStack
-						direction={
-							colors.length === 0 ? 'row-reverse' : 'row'
-						}
-					>
+					<HStack direction="row">
+						{ colors.length <= 0 && (
+							<FlexItem>{ __( 'Add colors' ) }</FlexItem>
+						) }
 						<ZStack isLayered={ false } offset={ -8 }>
 							{ colors
 								.slice( 0, 5 )
@@ -87,9 +80,7 @@ function Palette( { name } ) {
 									</ColorIndicatorWrapper>
 								) ) }
 						</ZStack>
-						<FlexItem className="edit-site-global-styles-screen-colors__palette-count">
-							{ paletteButtonText }
-						</FlexItem>
+						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>

package/src/components/global-styles/root-menu.js

@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, color, layout, image } from '@wordpress/icons';
+import {
+	typography,
+	color,
+	layout,
+	shadow as shadowIcon,
+} from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -18,7 +23,6 @@ const {
 	useHasColorPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
-	useHasBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
 function RootMenu() {
@@ -26,9 +30,9 @@ function RootMenu() {
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
+	const hasShadowPanel = true; // useHasShadowPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
-	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 
 	return (
 		<>
@@ -51,6 +55,15 @@ function RootMenu() {
 						{ __( 'Colors' ) }
 					</NavigationButtonAsItem>
 				) }
+				{ hasShadowPanel && (
+					<NavigationButtonAsItem
+						icon={ shadowIcon }
+						path="/shadows"
+						aria-label={ __( 'Shadow styles' ) }
+					>
+						{ __( 'Shadows' ) }
+					</NavigationButtonAsItem>
+				) }
 				{ hasLayoutPanel && (
 					<NavigationButtonAsItem
 						icon={ layout }
@@ -60,15 +73,6 @@ function RootMenu() {
 						{ __( 'Layout' ) }
 					</NavigationButtonAsItem>
 				) }
-				{ hasBackgroundPanel && (
-					<NavigationButtonAsItem
-						icon={ image }
-						path="/background"
-						aria-label={ __( 'Background image styles' ) }
-					>
-						{ __( 'Background image' ) }
-					</NavigationButtonAsItem>
-				) }
 			</ItemGroup>
 		</>
 	);

package/src/components/global-styles/screen-block.js

@@ -235,7 +235,7 @@ function ScreenBlock( { name, variation } ) {
 	return (
 		<>
 			<ScreenHeader
-				title={ variation ? currentBlockStyle.label : blockType.title }
+				title={ variation ? currentBlockStyle?.label : blockType.title }
 			/>
 			<BlockPreviewPanel name={ name } variation={ variation } />
 			{ hasVariationsPanel && (