@wordpress/edit-site 5.32.0 → 5.33.0

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

@@ -15,7 +15,6 @@ import {
 	__experimentalVStack as VStack,
 	Flex,
 	Notice,
-	Spinner,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
@@ -49,6 +48,7 @@ function InstalledFonts() {
 		fontFamiliesHasChanges,
 		notice,
 		setNotice,
+		fontFamilies,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
 	const customFontFamilyId =
@@ -113,162 +113,171 @@ function InstalledFonts() {
 	return (
 		<div className="font-library-modal__tabpanel-layout">
 			{ isResolvingLibrary && (
-				<HStack align="center">
-					<Spacer />
-					<Spinner />
-					<Spacer />
-				</HStack>
+				<div className="font-library-modal__loading">
+					<ProgressBar />
+				</div>
 			) }
 
-			<NavigatorProvider
-				initialPath={ libraryFontSelected ? '/fontFamily' : '/' }
-			>
-				<NavigatorScreen path="/">
-					{ notice && (
-						<>
-							<Spacer margin={ 1 } />
-							<Notice
-								status={ notice.type }
-								onRemove={ () => setNotice( null ) }
-							>
-								{ notice.message }
-							</Notice>
-							<Spacer margin={ 1 } />
-						</>
-					) }
-					{ baseCustomFonts.length > 0 && (
-						<>
-							<Text className="font-library-modal__subtitle">
-								{ __( 'Installed Fonts' ) }
-							</Text>
-							<Spacer margin={ 2 } />
-							{ baseCustomFonts.map( ( font ) => (
-								<FontCard
-									font={ font }
-									key={ font.slug }
-									navigatorPath={ '/fontFamily' }
-									variantsText={ getFontCardVariantsText(
-										font
-									) }
-									onClick={ () => {
-										handleSetLibraryFontSelected( font );
-									} }
-								/>
-							) ) }
-							<Spacer margin={ 8 } />
-						</>
-					) }
+			{ ! isResolvingLibrary && (
+				<>
+					<NavigatorProvider
+						initialPath={
+							libraryFontSelected ? '/fontFamily' : '/'
+						}
+					>
+						<NavigatorScreen path="/">
+							{ notice && (
+								<>
+									<Spacer margin={ 1 } />
+									<Notice
+										status={ notice.type }
+										onRemove={ () => setNotice( null ) }
+									>
+										{ notice.message }
+									</Notice>
+									<Spacer margin={ 1 } />
+								</>
+							) }
+							{ baseCustomFonts.length > 0 && (
+								<>
+									<Text className="font-library-modal__subtitle">
+										{ __( 'Installed Fonts' ) }
+									</Text>
+									<Spacer margin={ 2 } />
+									{ baseCustomFonts.map( ( font ) => (
+										<FontCard
+											font={ font }
+											key={ font.slug }
+											navigatorPath={ '/fontFamily' }
+											variantsText={ getFontCardVariantsText(
+												font
+											) }
+											onClick={ () => {
+												handleSetLibraryFontSelected(
+													font
+												);
+											} }
+										/>
+									) ) }
+									<Spacer margin={ 8 } />
+								</>
+							) }
 
-					{ baseThemeFonts.length > 0 && (
-						<>
-							<Text className="font-library-modal__subtitle">
-								{ __( 'Theme Fonts' ) }
-							</Text>
-							<Spacer margin={ 2 } />
-							{ baseThemeFonts.map( ( font ) => (
-								<FontCard
-									font={ font }
-									key={ font.slug }
-									navigatorPath={ '/fontFamily' }
-									variantsText={ getFontCardVariantsText(
-										font
-									) }
+							{ baseThemeFonts.length > 0 && (
+								<>
+									<Text className="font-library-modal__subtitle">
+										{ __( 'Theme Fonts' ) }
+									</Text>
+									<Spacer margin={ 2 } />
+									{ baseThemeFonts.map( ( font ) => (
+										<FontCard
+											font={ font }
+											key={ font.slug }
+											navigatorPath={ '/fontFamily' }
+											variantsText={ getFontCardVariantsText(
+												font
+											) }
+											onClick={ () => {
+												handleSetLibraryFontSelected(
+													font
+												);
+											} }
+										/>
+									) ) }
+								</>
+							) }
+						</NavigatorScreen>
+
+						<NavigatorScreen path="/fontFamily">
+							<ConfirmDeleteDialog
+								font={ libraryFontSelected }
+								isOpen={ isConfirmDeleteOpen }
+								setIsOpen={ setIsConfirmDeleteOpen }
+								setNotice={ setNotice }
+								uninstallFontFamily={ uninstallFontFamily }
+								handleSetLibraryFontSelected={
+									handleSetLibraryFontSelected
+								}
+							/>
+
+							<Flex justify="flex-start">
+								<NavigatorToParentButton
+									icon={ chevronLeft }
+									size="small"
 									onClick={ () => {
-										handleSetLibraryFontSelected( font );
+										handleSetLibraryFontSelected( null );
 									} }
+									label={ __( 'Back' ) }
 								/>
-							) ) }
-						</>
-					) }
-					<Spacer margin={ 16 } />
-				</NavigatorScreen>
-
-				<NavigatorScreen path="/fontFamily">
-					<ConfirmDeleteDialog
-						font={ libraryFontSelected }
-						isOpen={ isConfirmDeleteOpen }
-						setIsOpen={ setIsConfirmDeleteOpen }
-						setNotice={ setNotice }
-						uninstallFontFamily={ uninstallFontFamily }
-						handleSetLibraryFontSelected={
-							handleSetLibraryFontSelected
-						}
-					/>
+								<Heading
+									level={ 2 }
+									size={ 13 }
+									className="edit-site-global-styles-header"
+								>
+									{ libraryFontSelected?.name }
+								</Heading>
+							</Flex>
+							{ notice && (
+								<>
+									<Spacer margin={ 1 } />
+									<Notice
+										status={ notice.type }
+										onRemove={ () => setNotice( null ) }
+									>
+										{ notice.message }
+									</Notice>
+									<Spacer margin={ 1 } />
+								</>
+							) }
+							<Spacer margin={ 4 } />
+							<Text>
+								{ __(
+									'Choose font variants. Keep in mind that too many variants could make your site slower.'
+								) }
+							</Text>
+							<Spacer margin={ 4 } />
+							<VStack spacing={ 0 }>
+								<Spacer margin={ 8 } />
+								{ getFontFacesToDisplay(
+									libraryFontSelected
+								).map( ( face, i ) => (
+									<LibraryFontVariant
+										font={ libraryFontSelected }
+										face={ face }
+										key={ `face${ i }` }
+									/>
+								) ) }
+							</VStack>
+						</NavigatorScreen>
+					</NavigatorProvider>
 
-					<Flex justify="flex-start">
-						<NavigatorToParentButton
-							icon={ chevronLeft }
-							size="small"
+					<HStack
+						justify="flex-end"
+						className="font-library-modal__tabpanel-layout__footer"
+					>
+						{ isInstalling && <ProgressBar /> }
+						{ shouldDisplayDeleteButton && (
+							<Button
+								isDestructive
+								variant="tertiary"
+								onClick={ handleUninstallClick }
+							>
+								{ __( 'Delete' ) }
+							</Button>
+						) }
+						<Button
+							variant="primary"
 							onClick={ () => {
-								handleSetLibraryFontSelected( null );
+								saveFontFamilies( fontFamilies );
 							} }
-							label={ __( 'Back' ) }
-						/>
-						<Heading
-							level={ 2 }
-							size={ 13 }
-							className="edit-site-global-styles-header"
+							disabled={ ! fontFamiliesHasChanges }
+							__experimentalIsFocusable
 						>
-							{ libraryFontSelected?.name }
-						</Heading>
-					</Flex>
-					{ notice && (
-						<>
-							<Spacer margin={ 1 } />
-							<Notice
-								status={ notice.type }
-								onRemove={ () => setNotice( null ) }
-							>
-								{ notice.message }
-							</Notice>
-							<Spacer margin={ 1 } />
-						</>
-					) }
-					<Spacer margin={ 4 } />
-					<Text>
-						{ __(
-							'Choose font variants. Keep in mind that too many variants could make your site slower.'
-						) }
-					</Text>
-					<Spacer margin={ 4 } />
-					<VStack spacing={ 0 }>
-						<Spacer margin={ 8 } />
-						{ getFontFacesToDisplay( libraryFontSelected ).map(
-							( face, i ) => (
-								<LibraryFontVariant
-									font={ libraryFontSelected }
-									face={ face }
-									key={ `face${ i }` }
-								/>
-							)
-						) }
-					</VStack>
-				</NavigatorScreen>
-			</NavigatorProvider>
-
-			<HStack
-				justify="flex-end"
-				className="font-library-modal__tabpanel-layout__footer"
-			>
-				{ isInstalling && <ProgressBar /> }
-				{ shouldDisplayDeleteButton && (
-					<Button
-						isDestructive
-						variant="tertiary"
-						onClick={ handleUninstallClick }
-					>
-						{ __( 'Delete' ) }
-					</Button>
-				) }
-				<Button
-					variant="primary"
-					onClick={ saveFontFamilies }
-					disabled={ ! fontFamiliesHasChanges }
-					__experimentalIsFocusable
-				>
-					{ __( 'Update' ) }
-				</Button>
-			</HStack>
+							{ __( 'Update' ) }
+						</Button>
+					</HStack>
+				</>
+			) }
 		</div>
 	);
 }

package/src/components/global-styles/font-library-modal/style.scss

@@ -1,9 +1,12 @@
+// Fixed height for the modal footer.
+// Ensures that the footer is always visible when the modal content is scrollable.
+$footer-height: 70px;
+
 .font-library-modal {
 	// @todo If a new prop is added to the Modal component that constrains
 	// the content width, we should use that prop instead of this style.
 	// see https://github.com/WordPress/gutenberg/issues/54471.
 	&.font-library-modal {
-
 		@include break-medium() {
 			width: 65vw;
 		}
@@ -15,6 +18,7 @@
 
 	.components-modal__content {
 		padding-top: 0;
+		margin-bottom: $footer-height;
 	}
 
 	.font-library-modal__subtitle {
@@ -30,9 +34,22 @@
 }
 
 .font-library-modal__tabpanel-layout {
-
 	margin-top: $grid-unit-40;
 
+	.font-library-modal__loading {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		position: absolute;
+		left: 0;
+		top: 0;
+		align-items: center;
+		justify-content: center;
+		// Push down so that the progress bar is centered vertically.
+		// It should be 120px (72px modal header height + 48px tab height)
+		padding-top: $header-height + $grid-unit-15 + $grid-unit-60;
+	}
+
 	.font-library-modal__tabpanel-layout__footer {
 		border-top: 1px solid $gray-300;
 		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
@@ -40,6 +57,7 @@
 		position: absolute;
 		bottom: $grid-unit-40;
 		width: 100%;
+		height: $footer-height;
 		background-color: $white;
 	}
 }
@@ -66,19 +84,19 @@
 	.font-library-modal__font-card__count {
 		color: $gray-700;
 	}
-}
 
-.font-library-modal__font-variant_demo-image {
-	display: block;
-	height: $grid-unit-30;
-	width: auto;
-}
+	.font-library-modal__font-variant_demo-image {
+		display: block;
+		height: $grid-unit-30;
+		width: auto;
+	}
 
-.font-library-modal__font-variant_demo-text {
-	white-space: nowrap;
-	flex-shrink: 0;
-	transition: opacity 0.3s ease-in-out;
-	@include reduce-motion("transition");
+	.font-library-modal__font-variant_demo-text {
+		white-space: nowrap;
+		flex-shrink: 0;
+		transition: opacity 0.3s ease-in-out;
+		@include reduce-motion("transition");
+	}
 }
 
 .font-library-modal__font-variant {

package/src/components/global-styles/highlighted-colors.js

@@ -16,7 +16,7 @@ export default function HighlightedColors( {
 	const scaledSwatchSize = normalizedColorSwatchSize * ratio;
 	return highlightedColors.map( ( { slug, color }, index ) => (
 		<motion.div
-			key={ slug }
+			key={ `${ slug }-${ index }` }
 			style={ {
 				height: scaledSwatchSize,
 				width: scaledSwatchSize,

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

@@ -65,6 +65,13 @@ export function useStylesPreviewColors() {
 	const [ headingColor = textColor ] = useGlobalStyle(
 		'elements.h1.color.text'
 	);
+	const [ linkColor = headingColor ] = useGlobalStyle(
+		'elements.link.color.text'
+	);
+
+	const [ buttonBackgroundColor = linkColor ] = useGlobalStyle(
+		'elements.button.color.background'
+	);
 	const [ coreColors ] = useGlobalSetting( 'color.palette.core' );
 	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
 	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
@@ -72,10 +79,20 @@ export function useStylesPreviewColors() {
 	const paletteColors = ( themeColors ?? [] )
 		.concat( customColors ?? [] )
 		.concat( coreColors ?? [] );
-	const highlightedColors = paletteColors
+
+	const textColorObject = paletteColors.filter(
+		( { color } ) => color === textColor
+	);
+	const buttonBackgroundColorObject = paletteColors.filter(
+		( { color } ) => color === buttonBackgroundColor
+	);
+
+	const highlightedColors = textColorObject
+		.concat( buttonBackgroundColorObject )
+		.concat( paletteColors )
 		.filter(
-			// we exclude these two colors because they are already visible in the preview.
-			( { color } ) => color !== backgroundColor && color !== headingColor
+			// we exclude these background color because it is already visible in the preview.
+			( { color } ) => color !== backgroundColor
 		)
 		.slice( 0, 2 );
 

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

@@ -64,9 +64,9 @@ function RootMenu() {
 					<NavigationButtonAsItem
 						icon={ image }
 						path="/background"
-						aria-label={ __( 'Background styles' ) }
+						aria-label={ __( 'Background image styles' ) }
 					>
-						{ __( 'Background' ) }
+						{ __( 'Background image' ) }
 					</NavigationButtonAsItem>
 				) }
 			</ItemGroup>

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

@@ -20,7 +20,7 @@ function ScreenBackground() {
 	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Background' ) } />
+			<ScreenHeader title={ __( 'Background image' ) } />
 			{ hasBackgroundPanel && <BackgroundPanel /> }
 		</>
 	);

package/src/components/global-styles/screen-revisions/index.js

@@ -215,7 +215,7 @@ function ScreenRevisions() {
 					}
 				>
 					{ __(
-						'Any unsaved changes will be lost when you apply this revision.'
+						'Are you sure you want to apply this revision? Any unsaved changes will be lost.'
 					) }
 				</ConfirmDialog>
 			) }

package/src/components/header-edit-mode/index.js

@@ -14,7 +14,6 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useEffect, useRef, useState } from '@wordpress/element';
-import { PinnedItems } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
 import { next, previous } from '@wordpress/icons';
 import {
@@ -44,7 +43,8 @@ import { unlock } from '../../lock-unlock';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
 const { useShowBlockTools } = unlock( blockEditorPrivateApis );
-const { PostViewLink, PreviewDropdown } = unlock( editorPrivateApis );
+const { PostViewLink, PreviewDropdown, PinnedItems } =
+	unlock( editorPrivateApis );
 
 export default function HeaderEditMode() {
 	const {
@@ -201,9 +201,7 @@ export default function HeaderEditMode() {
 					) }
 					<PostViewLink />
 					<SaveButton size="compact" />
-					{ ! isDistractionFree && (
-						<PinnedItems.Slot scope="core/edit-site" />
-					) }
+					{ ! isDistractionFree && <PinnedItems.Slot scope="core" /> }
 					<MoreMenu showIconLabels={ showIconLabels } />
 				</motion.div>
 			</div>

package/src/components/header-edit-mode/more-menu/index.js

@@ -11,7 +11,6 @@ import {
 	VisuallyHidden,
 	DropdownMenu,
 } from '@wordpress/components';
-import { ActionItem, store as interfaceStore } from '@wordpress/interface';
 import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
@@ -25,21 +24,14 @@ import {
 /**
  * Internal dependencies
  */
-import {
-	KEYBOARD_SHORTCUT_HELP_MODAL_NAME,
-	default as KeyboardShortcutHelpModal,
-} from '../../keyboard-shortcut-help-modal';
-import {
-	PREFERENCES_MODAL_NAME,
-	default as EditSitePreferencesModal,
-} from '../../preferences-modal';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import CopyContentMenuItem from './copy-content-menu-item';
 import { unlock } from '../../../lock-unlock';
 
-const { ModeSwitcher } = unlock( editorPrivateApis );
+const { ModeSwitcher, ActionItem, interfaceStore, PreferencesModal } =
+	unlock( editorPrivateApis );
 
 export default function MoreMenu( { showIconLabels } ) {
 	const { openModal } = useDispatch( interfaceStore );
@@ -120,7 +112,7 @@ export default function MoreMenu( { showIconLabels } ) {
 						</MenuGroup>
 						<ModeSwitcher />
 						<ActionItem.Slot
-							name="core/edit-site/plugin-more-menu"
+							name="core/plugin-more-menu"
 							label={ __( 'Plugins' ) }
 							as={ MenuGroup }
 							fillProps={ { onClick: onClose } }
@@ -129,9 +121,7 @@ export default function MoreMenu( { showIconLabels } ) {
 							{ isBlockBasedTheme && <SiteExport /> }
 							<MenuItem
 								onClick={ () =>
-									openModal(
-										KEYBOARD_SHORTCUT_HELP_MODAL_NAME
-									)
+									openModal( 'editor/keyboard-shortcut-help' )
 								}
 								shortcut={ displayShortcut.access( 'h' ) }
 							>
@@ -163,7 +153,7 @@ export default function MoreMenu( { showIconLabels } ) {
 						<MenuGroup>
 							<MenuItem
 								onClick={ () =>
-									openModal( PREFERENCES_MODAL_NAME )
+									openModal( 'editor/preferences' )
 								}
 							>
 								{ __( 'Preferences' ) }
@@ -172,8 +162,7 @@ export default function MoreMenu( { showIconLabels } ) {
 					</>
 				) }
 			</DropdownMenu>
-			<KeyboardShortcutHelpModal />
-			<EditSitePreferencesModal />
+			<PreferencesModal />
 		</>
 	);
 }

package/src/components/header-edit-mode/style.scss

@@ -21,9 +21,9 @@
 		height: 100%;
 		// Allow focus ring to be fully visible on furthest right button.
 		@include break-medium() {
+			padding-right: var(--wp-admin-border-width-focus);
 			// Account for the site hub, which is 60x60px.
 			flex-basis: calc(37.5% - 60px);
-			padding-right: 2px;
 			// We need this to be overflow hidden so the block toolbar can
 			// overflow scroll. If the overflow is visible, flexbox allows
 			// the toolbar to grow outside of the allowed container space.

package/src/components/keyboard-shortcuts/edit-mode.js

@@ -4,26 +4,9 @@
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as interfaceStore } from '@wordpress/interface';
 import { createBlock } from '@wordpress/blocks';
 
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
-import { STORE_NAME } from '../../store/constants';
-
 function KeyboardShortcutsEditMode() {
-	const isBlockInspectorOpen = useSelect(
-		( select ) =>
-			select( interfaceStore ).getActiveComplementaryArea(
-				editSiteStore.name
-			) === SIDEBAR_BLOCK,
-		[]
-	);
-	const { enableComplementaryArea, disableComplementaryArea } =
-		useDispatch( interfaceStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
 		useSelect( blockEditorStore );
@@ -56,18 +39,6 @@ function KeyboardShortcutsEditMode() {
 		);
 	};
 
-	useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {
-		// This shortcut has no known clashes, but use preventDefault to prevent any
-		// obscure shortcuts from triggering.
-		event.preventDefault();
-
-		if ( isBlockInspectorOpen ) {
-			disableComplementaryArea( STORE_NAME );
-		} else {
-			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
-		}
-	} );
-
 	useShortcut( 'core/edit-site/transform-heading-to-paragraph', ( event ) =>
 		handleTextLevelShortcut( event, 0 )
 	);

package/src/components/keyboard-shortcuts/register.js

@@ -20,26 +20,6 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
-		registerShortcut( {
-			name: 'core/edit-site/toggle-block-settings-sidebar',
-			category: 'global',
-			description: __( 'Show or hide the Settings sidebar.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: ',',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/keyboard-shortcuts',
-			category: 'main',
-			description: __( 'Display these keyboard shortcuts.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'h',
-			},
-		} );
-
 		registerShortcut( {
 			name: 'core/edit-site/next-region',
 			category: 'global',