@wordpress/edit-site 5.33.0 → 5.35.0

package/src/components/editor/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -22,7 +22,6 @@ import {
 	BlockBreadcrumb,
 	BlockToolbar,
 	store as blockEditorStore,
-	BlockInspector,
 } from '@wordpress/block-editor';
 import {
 	EditorKeyboardShortcutsRegister,
@@ -34,19 +33,17 @@ 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';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import {
-	SidebarComplementaryAreaFills,
-	SidebarInspectorFill,
-} 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';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import useTitle from '../routes/use-title';
@@ -58,6 +55,8 @@ import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 import SiteEditorCanvas from '../block-editor/site-editor-canvas';
 import TemplatePartConverter from '../template-part-converter';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
+import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
+import GlobalStylesSidebar from '../global-styles-sidebar';
 
 const {
 	ExperimentalEditorProvider: EditorProvider,
@@ -66,7 +65,11 @@ const {
 	InterfaceSkeleton,
 	ComplementaryArea,
 	interfaceStore,
+	SavePublishPanels,
+	Sidebar,
 } = unlock( editorPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
+const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
@@ -108,14 +111,16 @@ export default function Editor( { isLoading, onClick } ) {
 		showIconLabels,
 		showBlockBreadcrumbs,
 		postTypeLabel,
+		isEditingPage,
+		supportsGlobalStyles,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
-		const { getEditedPostContext, getCanvasMode } = unlock(
+		const { getEditedPostContext, getCanvasMode, isPage } = unlock(
 			select( editSiteStore )
 		);
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
-		const { getEntityRecord } = select( coreDataStore );
+		const { getEntityRecord, getCurrentTheme } = select( coreDataStore );
 		const {
 			isInserterOpened,
 			isListViewOpened,
@@ -145,6 +150,8 @@ export default function Editor( { isLoading, onClick } ) {
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			postTypeLabel: getPostTypeLabel(),
+			isEditingPage: isPage(),
+			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
 		};
 	}, [] );
 
@@ -187,6 +194,75 @@ 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 { createSuccessNotice } = useDispatch( noticesStore );
+	const history = useHistory();
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			switch ( actionId ) {
+				case 'move-to-trash':
+					{
+						history.push( {
+							path: '/' + items[ 0 ].type,
+							postId: undefined,
+							postType: undefined,
+							canvas: 'view',
+						} );
+					}
+					break;
+				case 'duplicate-post':
+					{
+						const newItem = items[ 0 ];
+						const _title =
+							typeof newItem.title === 'string'
+								? newItem.title
+								: newItem.title?.rendered;
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: Title of the created post e.g: "Post 1".
+								__( '"%s" successfully created.' ),
+								_title
+							),
+							{
+								type: 'snackbar',
+								id: 'duplicate-post-action',
+								actions: [
+									{
+										label: __( 'Edit' ),
+										onClick: () => {
+											history.push( {
+												path: undefined,
+												postId: newItem.id,
+												postType: newItem.type,
+												canvas: 'edit',
+											} );
+										},
+									},
+								],
+							}
+						);
+					}
+					break;
+			}
+		},
+		[ history, createSuccessNotice ]
+	);
+
 	const isReady =
 		! isLoading &&
 		( ( postWithTemplate && !! contextPost && !! editedPost ) ||
@@ -212,15 +288,15 @@ export default function Editor( { isLoading, onClick } ) {
 					settings={ settings }
 					useSubRegistry={ false }
 				>
-					<SidebarComplementaryAreaFills />
-					{ isEditMode && <StartTemplateOptions /> }
 					<InterfaceSkeleton
 						isDistractionFree={ isDistractionFree }
 						enableRegionNavigation={ false }
-						className={ classnames(
+						className={ clsx(
 							'edit-site-editor__interface-skeleton',
 							{
 								'show-icon-labels': showIconLabels,
+								'is-entity-save-view-open':
+									!! entitiesSavedStatesCallback,
 							}
 						) }
 						header={
@@ -247,11 +323,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={
 							<>
@@ -260,9 +353,6 @@ export default function Editor( { isLoading, onClick } ) {
 								{ showVisualEditor && (
 									<>
 										<TemplatePartConverter />
-										<SidebarInspectorFill>
-											<BlockInspector />
-										</SidebarInspectorFill>
 										{ ! isLargeViewport && (
 											<BlockToolbar hideDragHandle />
 										) }
@@ -275,9 +365,9 @@ export default function Editor( { isLoading, onClick } ) {
 								) }
 								{ isEditMode && (
 									<>
-										<KeyboardShortcutsEditMode />
 										<EditorKeyboardShortcutsRegister />
 										<EditorKeyboardShortcuts />
+										<BlockKeyboardShortcuts />
 									</>
 								) }
 							</>
@@ -310,6 +400,15 @@ export default function Editor( { isLoading, onClick } ) {
 							secondarySidebar: secondarySidebarLabel,
 						} }
 					/>
+					<Sidebar
+						onActionPerformed={ onActionPerformed }
+						extraPanels={
+							! isEditingPage && (
+								<PluginTemplateSettingPanel.Slot />
+							)
+						}
+					/>
+					{ supportsGlobalStyles && <GlobalStylesSidebar /> }
 				</EditorProvider>
 			) }
 		</>

package/src/components/editor/style.scss

@@ -6,10 +6,6 @@
 	&.is-loading {
 		opacity: 0;
 	}
-
-	.interface-interface-skeleton__header {
-		border: 0;
-	}
 }
 
 .edit-site-editor__toggle-save-panel {
@@ -22,11 +18,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/background-panel.js

@@ -20,6 +20,21 @@ const {
 	BackgroundPanel: StylesBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
+/**
+ * Checks if there is a current value in the background image block support
+ * attributes.
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean}     Whether the block has a background image value set.
+ */
+export function hasBackgroundImageValue( style ) {
+	return (
+		!! style?.background?.backgroundImage?.id ||
+		!! style?.background?.backgroundImage?.url ||
+		typeof style?.background?.backgroundImage === 'string'
+	);
+}
+
 export default function BackgroundPanel() {
 	const [ style ] = useGlobalStyle( '', undefined, 'user', {
 		shouldDecodeEncode: false,
@@ -32,8 +47,8 @@ export default function BackgroundPanel() {
 	const defaultControls = {
 		backgroundImage: true,
 		backgroundSize:
-			!! style?.background?.backgroundImage &&
-			!! inheritedStyle?.background?.backgroundImage,
+			hasBackgroundImageValue( style ) ||
+			hasBackgroundImageValue( inheritedStyle ),
 	};
 
 	return (

package/src/components/global-styles/color-indicator-wrapper.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { Flex } from '@wordpress/components';
 function ColorIndicatorWrapper( { className, ...props } ) {
 	return (
 		<Flex
-			className={ classnames(
+			className={ clsx(
 				'edit-site-global-styles__color-indicator-wrapper',
 				className
 			) }

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

@@ -13,6 +13,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import ColorVariations from './variations/variations-color';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
@@ -51,7 +52,7 @@ export default function ColorPalettePanel( { name } ) {
 	return (
 		<VStack
 			className="edit-site-global-styles-color-palette-panel"
-			spacing={ 10 }
+			spacing={ 8 }
 		>
 			{ !! themeColors && !! themeColors.length && (
 				<PaletteEdit
@@ -82,12 +83,10 @@ export default function ColorPalettePanel( { name } ) {
 				onChange={ setCustomColors }
 				paletteLabel={ __( 'Custom' ) }
 				paletteLabelHeadingLevel={ 3 }
-				emptyMessage={ __(
-					'Custom colors are empty! Add some colors to create your own color palette.'
-				) }
 				slugPrefix="custom-"
 				popoverProps={ popoverProps }
 			/>
+			<ColorVariations title={ __( 'Presets' ) } />
 		</VStack>
 	);
 }

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/gradients-palette-panel.js

@@ -71,7 +71,7 @@ export default function GradientPalettePanel( { name } ) {
 	return (
 		<VStack
 			className="edit-site-global-styles-gradient-palette-panel"
-			spacing={ 10 }
+			spacing={ 8 }
 		>
 			{ !! themeGradients && !! themeGradients.length && (
 				<PaletteEdit
@@ -102,9 +102,6 @@ export default function GradientPalettePanel( { name } ) {
 				onChange={ setCustomGradients }
 				paletteLabel={ __( 'Custom' ) }
 				paletteLabelLevel={ 3 }
-				emptyMessage={ __(
-					'Custom gradients are empty! Add some gradients to create your own palette.'
-				) }
 				slugPrefix="custom-"
 				popoverProps={ popoverProps }
 			/>

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

@@ -9,18 +9,19 @@ 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 { mergeBaseAndUserConfigs } from './global-styles-provider';
 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
 );