@wordpress/edit-site 5.33.0 → 5.34.0

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

@@ -31,7 +31,6 @@
 		display: block;
 		width: 100%;
 		height: 100%;
-		background: $white;
 	}
 
 	.edit-site-visual-editor__editor-canvas {
@@ -106,39 +105,35 @@
 
 	&::after {
 		position: absolute;
-		top: $grid-unit-30;
+		top: $grid-unit-20;
 		left: $grid-unit-05;
 		right: 0;
-		bottom: $grid-unit-30;
+		bottom: $grid-unit-20;
 		content: "";
 		width: $grid-unit-05;
-		background: $gray-600;
+		background-color: rgba($gray-700, 0.4);
 		border-radius: $radius-block-ui;
 	}
 
 	&.is-left {
-		left: -$grid-unit-20;
+		// Subtract half of the handle width to properly center.
+		left: -$grid-unit-20 - math.div($grid-unit-05, 2);
 	}
 
 	&.is-right {
-		right: -$grid-unit-20;
+		// Subtract half of the handle width to properly center.
+		right: -$grid-unit-20 - math.div($grid-unit-05, 2);
 	}
 
 	&:hover,
+	&:focus,
 	&:active {
 		opacity: 1;
-		&.is-variation-default::after {
-			background: $gray-400;
-		}
-		&.is-variation-separator::after {
-			background: var(--wp-admin-theme-color);
+		&::after {
+			background-color: var(--wp-admin-theme-color);
 		}
 	}
 
-	&:focus::after {
-		box-shadow: 0 0 0 1px $gray-800, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
-	}
-
 	&.is-variation-separator:focus::after {
 		border-radius: $radius-block-ui;
 		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);

package/src/components/create-template-part-modal/index.js

@@ -127,6 +127,7 @@ export function CreateTemplatePartModalContents( {
 		>
 			<VStack spacing="4">
 				<TextControl
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
@@ -174,6 +175,7 @@ export function CreateTemplatePartModalContents( {
 				</BaseControl>
 				<HStack justify="right">
 					<Button
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => {
 							closeModal();
@@ -182,6 +184,7 @@ export function CreateTemplatePartModalContents( {
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						type="submit"
 						aria-disabled={ ! title || isSubmitting }

package/src/components/editor/index.js

@@ -34,6 +34,8 @@ import {
 } from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreDataStore } from '@wordpress/core-data';
+import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
+import { useState, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -44,7 +46,6 @@ import {
 } from '../sidebar-edit-mode';
 import CodeEditor from '../code-editor';
 import Header from '../header-edit-mode';
-import KeyboardShortcutsEditMode from '../keyboard-shortcuts/edit-mode';
 import WelcomeGuide from '../welcome-guide';
 import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
@@ -66,8 +67,11 @@ const {
 	InterfaceSkeleton,
 	ComplementaryArea,
 	interfaceStore,
+	SavePublishPanels,
 } = unlock( editorPrivateApis );
 
+const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
+
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
 	body: __( 'Editor content' ),
@@ -187,6 +191,22 @@ export default function Editor( { isLoading, onClick } ) {
 	const { closeGeneralSidebar } = useDispatch( editSiteStore );
 
 	const settings = useSpecificEditorSettings();
+
+	// Local state for save panel.
+	// Note 'truthy' callback implies an open panel.
+	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
+		useState( false );
+
+	const closeEntitiesSavedStates = useCallback(
+		( arg ) => {
+			if ( typeof entitiesSavedStatesCallback === 'function' ) {
+				entitiesSavedStatesCallback( arg );
+			}
+			setEntitiesSavedStatesCallback( false );
+		},
+		[ entitiesSavedStatesCallback ]
+	);
+
 	const isReady =
 		! isLoading &&
 		( ( postWithTemplate && !! contextPost && !! editedPost ) ||
@@ -221,6 +241,8 @@ export default function Editor( { isLoading, onClick } ) {
 							'edit-site-editor__interface-skeleton',
 							{
 								'show-icon-labels': showIconLabels,
+								'is-entity-save-view-open':
+									!! entitiesSavedStatesCallback,
 							}
 						) }
 						header={
@@ -247,11 +269,28 @@ export default function Editor( { isLoading, onClick } ) {
 											ease: [ 0.6, 0, 0.4, 1 ],
 										} }
 									>
-										<Header />
+										<Header
+											setEntitiesSavedStatesCallback={
+												setEntitiesSavedStatesCallback
+											}
+										/>
 									</motion.div>
 								) }
 							</AnimatePresence>
 						}
+						actions={
+							<SavePublishPanels
+								closeEntitiesSavedStates={
+									closeEntitiesSavedStates
+								}
+								isEntitiesSavedStatesOpen={
+									entitiesSavedStatesCallback
+								}
+								setEntitiesSavedStatesCallback={
+									setEntitiesSavedStatesCallback
+								}
+							/>
+						}
 						notices={ <EditorSnackbars /> }
 						content={
 							<>
@@ -275,9 +314,9 @@ export default function Editor( { isLoading, onClick } ) {
 								) }
 								{ isEditMode && (
 									<>
-										<KeyboardShortcutsEditMode />
 										<EditorKeyboardShortcutsRegister />
 										<EditorKeyboardShortcuts />
+										<BlockKeyboardShortcuts />
 									</>
 								) }
 							</>

package/src/components/editor/style.scss

@@ -22,11 +22,16 @@
 	justify-content: center;
 }
 
+// Adjust the position of the notices when breadcrumbs are present
+.edit-site .has-block-breadcrumbs.is-full-canvas .components-editor-notices__snackbar {
+	bottom: 40px;
+}
+
 // Adjust the position of the notices
 .edit-site .components-editor-notices__snackbar {
 	position: absolute;
 	right: 0;
-	bottom: 40px;
+	bottom: 16px;
 	padding-left: 16px;
 	padding-right: 16px;
 }

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

@@ -496,11 +496,15 @@ function FontLibraryProvider( { children } ) {
 
 	const loadFontFaceAsset = async ( fontFace ) => {
 		// If the font doesn't have a src, don't load it.
-		if ( ! fontFace.src ) return;
+		if ( ! fontFace.src ) {
+			return;
+		}
 		// Get the src of the font.
 		const src = getDisplaySrcFromFontFace( fontFace.src );
 		// If the font is already loaded, don't load it again.
-		if ( ! src || loadedFontUrls.has( src ) ) return;
+		if ( ! src || loadedFontUrls.has( src ) ) {
+			return;
+		}
 		// Load the font in the browser.
 		loadFontFaceInBrowser( fontFace, src, 'document' );
 		// Add the font to the loaded fonts list.
@@ -518,7 +522,9 @@ function FontLibraryProvider( { children } ) {
 			const hasData = !! collections.find(
 				( collection ) => collection.slug === slug
 			)?.font_families;
-			if ( hasData ) return;
+			if ( hasData ) {
+				return;
+			}
 			const response = await fetchFontCollection( slug );
 			const updatedCollections = collections.map( ( collection ) =>
 				collection.slug === slug

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

@@ -332,18 +332,37 @@ function FontCollection( { slug } ) {
 								) }
 
 							<div className="font-library-modal__fonts-grid__main">
-								{ items.map( ( font ) => (
-									<FontCard
-										key={ font.font_family_settings.slug }
-										font={ font.font_family_settings }
-										navigatorPath={ '/fontFamily' }
-										onClick={ () => {
-											setSelectedFont(
-												font.font_family_settings
-											);
-										} }
-									/>
-								) ) }
+								{ /*
+								 * Disable reason: The `list` ARIA role is redundant but
+								 * Safari+VoiceOver won't announce the list otherwise.
+								 */
+								/* eslint-disable jsx-a11y/no-redundant-roles */ }
+								<ul
+									role="list"
+									className="font-library-modal__fonts-list"
+								>
+									{ items.map( ( font ) => (
+										<li
+											key={
+												font.font_family_settings.slug
+											}
+											className="font-library-modal__fonts-list-item"
+										>
+											<FontCard
+												font={
+													font.font_family_settings
+												}
+												navigatorPath={ '/fontFamily' }
+												onClick={ () => {
+													setSelectedFont(
+														font.font_family_settings
+													);
+												} }
+											/>
+										</li>
+									) ) }
+								</ul>
+								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }{ ' ' }
 							</div>
 						</NavigatorScreen>
 

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

@@ -126,66 +126,94 @@ function InstalledFonts() {
 						}
 					>
 						<NavigatorScreen path="/">
-							{ notice && (
-								<>
-									<Spacer margin={ 1 } />
+							<VStack spacing="8">
+								{ notice && (
 									<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
-											) }
-											onClick={ () => {
-												handleSetLibraryFontSelected(
-													font
-												);
-											} }
-										/>
-									) ) }
-								</>
-							) }
+								) }
+								{ baseCustomFonts.length > 0 && (
+									<VStack>
+										<h2 className="font-library-modal__fonts-title">
+											{ __( 'Installed Fonts' ) }
+										</h2>
+										{ /*
+										 * Disable reason: The `list` ARIA role is redundant but
+										 * Safari+VoiceOver won't announce the list otherwise.
+										 */
+										/* eslint-disable jsx-a11y/no-redundant-roles */ }
+										<ul
+											role="list"
+											className="font-library-modal__fonts-list"
+										>
+											{ baseCustomFonts.map( ( font ) => (
+												<li
+													key={ font.slug }
+													className="font-library-modal__fonts-list-item"
+												>
+													<FontCard
+														font={ font }
+														navigatorPath={
+															'/fontFamily'
+														}
+														variantsText={ getFontCardVariantsText(
+															font
+														) }
+														onClick={ () => {
+															handleSetLibraryFontSelected(
+																font
+															);
+														} }
+													/>
+												</li>
+											) ) }
+										</ul>
+										{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+									</VStack>
+								) }
+								{ baseThemeFonts.length > 0 && (
+									<VStack>
+										<h2 className="font-library-modal__fonts-title">
+											{ __( 'Theme Fonts' ) }
+										</h2>
+										{ /*
+										 * Disable reason: The `list` ARIA role is redundant but
+										 * Safari+VoiceOver won't announce the list otherwise.
+										 */
+										/* eslint-disable jsx-a11y/no-redundant-roles */ }
+										<ul
+											role="list"
+											className="font-library-modal__fonts-list"
+										>
+											{ baseThemeFonts.map( ( font ) => (
+												<li
+													key={ font.slug }
+													className="font-library-modal__fonts-list-item"
+												>
+													<FontCard
+														font={ font }
+														navigatorPath={
+															'/fontFamily'
+														}
+														variantsText={ getFontCardVariantsText(
+															font
+														) }
+														onClick={ () => {
+															handleSetLibraryFontSelected(
+																font
+															);
+														} }
+													/>
+												</li>
+											) ) }
+										</ul>
+										{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+									</VStack>
+								) }
+							</VStack>
 						</NavigatorScreen>
 
 						<NavigatorScreen path="/fontFamily">

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

@@ -66,6 +66,23 @@ $footer-height: 70px;
 	margin-bottom: 0;
 }
 
+.font-library-modal__fonts-title {
+	text-transform: uppercase;
+	font-size: 11px;
+	font-weight: 600;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.font-library-modal__fonts-list {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.font-library-modal__fonts-list-item {
+	margin-bottom: 0;
+}
+
 .font-library-modal__font-card {
 	border: 1px solid $gray-200;
 	width: 100%;

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

@@ -16,8 +16,12 @@ function getNumericFontWeight( value ) {
 export function sortFontFaces( faces ) {
 	return faces.sort( ( a, b ) => {
 		// Ensure 'normal' fontStyle is always first
-		if ( a.fontStyle === 'normal' && b.fontStyle !== 'normal' ) return -1;
-		if ( b.fontStyle === 'normal' && a.fontStyle !== 'normal' ) return 1;
+		if ( a.fontStyle === 'normal' && b.fontStyle !== 'normal' ) {
+			return -1;
+		}
+		if ( b.fontStyle === 'normal' && a.fontStyle !== 'normal' ) {
+			return 1;
+		}
 
 		// If both fontStyles are the same, sort by fontWeight
 		if ( a.fontStyle === b.fontStyle ) {

package/src/components/global-styles/style-variations-container.js

@@ -12,6 +12,7 @@ import { __ } from '@wordpress/i18n';
  */
 import PreviewStyles from './preview-styles';
 import Variation from './variations/variation';
+import { isVariationWithSingleProperty } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 export default function StyleVariationsContainer( { gap = 2 } ) {
 	const variations = useSelect( ( select ) => {
@@ -20,6 +21,14 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 		).__experimentalGetCurrentThemeGlobalStylesVariations();
 	}, [] );
 
+	// Filter out variations that are of single property type, i.e. color or typography variations.
+	const multiplePropertyVariations = variations?.filter( ( variation ) => {
+		return (
+			! isVariationWithSingleProperty( variation, 'color' ) &&
+			! isVariationWithSingleProperty( variation, 'typography' )
+		);
+	} );
+
 	const withEmptyVariation = useMemo( () => {
 		return [
 			{
@@ -27,13 +36,13 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 				settings: {},
 				styles: {},
 			},
-			...( variations ?? [] ).map( ( variation ) => ( {
+			...( multiplePropertyVariations ?? [] ).map( ( variation ) => ( {
 				...variation,
 				settings: variation.settings ?? {},
 				styles: variation.styles ?? {},
 			} ) ),
 		];
-	}, [ variations ] );
+	}, [ multiplePropertyVariations ] );
 
 	return (
 		<Grid