@wordpress/edit-site 5.18.1-next.5a1d1283.0 → 5.19.1

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

@@ -71,7 +71,6 @@ function ScreenRevisions() {
 		setUserConfig( () => ( {
 			styles: revision?.styles,
 			settings: revision?.settings,
-			behaviors: revision?.behaviors,
 		} ) );
 		setIsLoadingRevisionWithUnsavedChanges( false );
 		onCloseRevisions();
@@ -81,7 +80,6 @@ function ScreenRevisions() {
 		setGlobalStylesRevision( {
 			styles: revision?.styles || {},
 			settings: revision?.settings || {},
-			behaviors: revision?.behaviors || {},
 			id: revision?.id,
 		} );
 		setSelectedRevisionId( revision?.id );

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

@@ -89,7 +89,6 @@ export default function useGlobalStylesRevisions() {
 					id: 'unsaved',
 					styles: userConfig?.styles,
 					settings: userConfig?.settings,
-					behaviors: userConfig?.behaviors,
 					author: {
 						name: currentUser?.name,
 						avatar_urls: currentUser?.avatar_urls,

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

@@ -1,79 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
-	FlexItem,
-} from '@wordpress/components';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { __experimentalVStack as VStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import TypographyElements from './typogrphy-elements';
+import FontFamilies from './font-families';
 import ScreenHeader from './header';
-import { NavigationButtonAsItem } from './navigation-button';
-import Subtitle from './subtitle';
-import { unlock } from '../../lock-unlock';
-
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-function Item( { parentMenu, element, label } ) {
-	const prefix =
-		element === 'text' || ! element ? '' : `elements.${ element }.`;
-	const extraStyles =
-		element === 'link'
-			? {
-					textDecoration: 'underline',
-			  }
-			: {};
-	const [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' );
-	const [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );
-	const [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );
-	const [ letterSpacing ] = useGlobalStyle(
-		prefix + 'typography.letterSpacing'
-	);
-	const [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );
-	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
-	const [ color ] = useGlobalStyle( prefix + 'color.text' );
-
-	const navigationButtonLabel = sprintf(
-		// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
-		__( 'Typography %s styles' ),
-		label
-	);
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + '/typography/' + element }
-			aria-label={ navigationButtonLabel }
-		>
-			<HStack justify="flex-start">
-				<FlexItem
-					className="edit-site-global-styles-screen-typography__indicator"
-					style={ {
-						fontFamily: fontFamily ?? 'serif',
-						background: gradientValue ?? backgroundColor,
-						color,
-						fontStyle,
-						fontWeight,
-						letterSpacing,
-						...extraStyles,
-					} }
-				>
-					{ __( 'Aa' ) }
-				</FlexItem>
-				<FlexItem>{ label }</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
 
 function ScreenTypography() {
-	const parentMenu = '';
-
 	return (
 		<>
 			<ScreenHeader
@@ -83,35 +21,11 @@ function ScreenTypography() {
 				) }
 			/>
 			<div className="edit-site-global-styles-screen-typography">
-				<VStack spacing={ 3 }>
-					<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
-					<ItemGroup isBordered isSeparated>
-						<Item
-							parentMenu={ parentMenu }
-							element="text"
-							label={ __( 'Text' ) }
-						/>
-						<Item
-							parentMenu={ parentMenu }
-							element="link"
-							label={ __( 'Links' ) }
-						/>
-						<Item
-							parentMenu={ parentMenu }
-							element="heading"
-							label={ __( 'Headings' ) }
-						/>
-						<Item
-							parentMenu={ parentMenu }
-							element="caption"
-							label={ __( 'Captions' ) }
-						/>
-						<Item
-							parentMenu={ parentMenu }
-							element="button"
-							label={ __( 'Buttons' ) }
-						/>
-					</ItemGroup>
+				<VStack spacing={ 6 }>
+					{ ! window.__experimentalDisableFontLibrary && (
+						<FontFamilies />
+					) }
+					<TypographyElements />
 				</VStack>
 			</div>
 		</>

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

@@ -113,13 +113,11 @@ export default function StyleVariationsContainer() {
 				title: __( 'Default' ),
 				settings: {},
 				styles: {},
-				behaviors: {},
 			},
 			...( variations ?? [] ).map( ( variation ) => ( {
 				...variation,
 				settings: variation.settings ?? {},
 				styles: variation.styles ?? {},
-				behaviors: variation.behaviors ?? {},
 			} ) ),
 		];
 	}, [ variations ] );

package/src/components/global-styles/typogrphy-elements.js

@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+} from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { NavigationButtonAsItem } from './navigation-button';
+import Subtitle from './subtitle';
+
+import { unlock } from '../../lock-unlock';
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+function ElementItem( { parentMenu, element, label } ) {
+	const prefix =
+		element === 'text' || ! element ? '' : `elements.${ element }.`;
+	const extraStyles =
+		element === 'link'
+			? {
+					textDecoration: 'underline',
+			  }
+			: {};
+	const [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' );
+	const [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );
+	const [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );
+	const [ letterSpacing ] = useGlobalStyle(
+		prefix + 'typography.letterSpacing'
+	);
+	const [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );
+	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
+	const [ color ] = useGlobalStyle( prefix + 'color.text' );
+
+	const navigationButtonLabel = sprintf(
+		// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
+		__( 'Typography %s styles' ),
+		label
+	);
+
+	return (
+		<NavigationButtonAsItem
+			path={ parentMenu + '/typography/' + element }
+			aria-label={ navigationButtonLabel }
+		>
+			<HStack justify="flex-start">
+				<FlexItem
+					className="edit-site-global-styles-screen-typography__indicator"
+					style={ {
+						fontFamily: fontFamily ?? 'serif',
+						background: gradientValue ?? backgroundColor,
+						color,
+						fontStyle,
+						fontWeight,
+						letterSpacing,
+						...extraStyles,
+					} }
+				>
+					{ __( 'Aa' ) }
+				</FlexItem>
+				<FlexItem>{ label }</FlexItem>
+			</HStack>
+		</NavigationButtonAsItem>
+	);
+}
+
+function TypographyElements() {
+	const parentMenu = '';
+
+	return (
+		<VStack spacing={ 3 }>
+			<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
+			<ItemGroup isBordered isSeparated>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="text"
+					label={ __( 'Text' ) }
+				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="link"
+					label={ __( 'Links' ) }
+				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="heading"
+					label={ __( 'Headings' ) }
+				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="caption"
+					label={ __( 'Captions' ) }
+				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="button"
+					label={ __( 'Buttons' ) }
+				/>
+			</ItemGroup>
+		</VStack>
+	);
+}
+
+export default TypographyElements;

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

@@ -32,12 +32,19 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import useEditedEntityRecord from '../../use-edited-entity-record';
 import { store as editSiteStore } from '../../../store';
+import {
+	TEMPLATE_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_TYPES,
+	PATTERN_SYNC_TYPES,
+} from '../../../utils/constants';
 
 const typeLabels = {
-	wp_block: __( 'Editing pattern:' ),
-	wp_navigation: __( 'Editing navigation menu:' ),
-	wp_template: __( 'Editing template:' ),
-	wp_template_part: __( 'Editing template part:' ),
+	[ PATTERN_TYPES.user ]: __( 'Editing pattern:' ),
+	[ NAVIGATION_POST_TYPE ]: __( 'Editing navigation menu:' ),
+	[ TEMPLATE_POST_TYPE ]: __( 'Editing template:' ),
+	[ TEMPLATE_PART_POST_TYPE ]: __( 'Editing template part:' ),
 };
 
 export default function DocumentActions() {
@@ -129,9 +136,9 @@ function TemplateDocumentActions( { className, onBack } ) {
 	}
 
 	let typeIcon = icon;
-	if ( record.type === 'wp_navigation' ) {
+	if ( record.type === NAVIGATION_POST_TYPE ) {
 		typeIcon = navigationIcon;
-	} else if ( record.type === 'wp_block' ) {
+	} else if ( record.type === PATTERN_TYPES.user ) {
 		typeIcon = symbol;
 	}
 
@@ -139,13 +146,15 @@ function TemplateDocumentActions( { className, onBack } ) {
 		<BaseDocumentActions
 			className={ classnames( className, {
 				'is-synced-entity':
-					record.wp_pattern_sync_status !== 'unsynced',
+					record.wp_pattern_sync_status !==
+					PATTERN_SYNC_TYPES.unsynced,
 			} ) }
 			icon={ typeIcon }
 			onBack={ onBack }
 		>
 			<VisuallyHidden as="span">
-				{ typeLabels[ record.type ] ?? typeLabels.wp_template }
+				{ typeLabels[ record.type ] ??
+					typeLabels[ TEMPLATE_POST_TYPE ] }
 			</VisuallyHidden>
 			{ getTitle() }
 		</BaseDocumentActions>

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

@@ -53,7 +53,7 @@ const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-export default function HeaderEditMode() {
+export default function HeaderEditMode( { setListViewToggleElement } ) {
 	const inserterButton = useRef();
 	const {
 		deviceType,
@@ -259,6 +259,7 @@ export default function HeaderEditMode() {
 										/* translators: button label text should, if possible, be under 16 characters. */
 										label={ __( 'List View' ) }
 										onClick={ toggleListView }
+										ref={ setListViewToggleElement }
 										shortcut={ listViewShortcut }
 										showTooltip={ ! showIconLabels }
 										variant={

package/src/components/layout/index.js

@@ -127,6 +127,8 @@ export default function Layout() {
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
+	const [ listViewToggleElement, setListViewToggleElement ] =
+		useState( null );
 
 	// This determines which animation variant should apply to the header.
 	// There is also a `isDistractionFreeHovering` state that gets priority
@@ -256,7 +258,11 @@ export default function Layout() {
 									ease: 'easeOut',
 								} }
 							>
-								<Header />
+								<Header
+									setListViewToggleElement={
+										setListViewToggleElement
+									}
+								/>
 							</NavigableRegion>
 						) }
 					</AnimatePresence>
@@ -369,6 +375,9 @@ export default function Layout() {
 													} }
 												>
 													<Editor
+														listViewToggleElement={
+															listViewToggleElement
+														}
 														isLoading={
 															isEditorLoading
 														}

package/src/components/list/added-by.js

@@ -19,10 +19,22 @@ import {
 } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_ORIGINS,
+} from '../../utils/constants';
+
 /** @typedef {'wp_template'|'wp_template_part'} TemplateType */
 
 /** @type {TemplateType} */
-const TEMPLATE_POST_TYPE_NAMES = [ 'wp_template', 'wp_template_part' ];
+const TEMPLATE_POST_TYPE_NAMES = [
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+];
 
 /**
  * @typedef {'theme'|'plugin'|'site'|'user'} AddedByType
@@ -64,11 +76,12 @@ export function useAddedBy( postType, postId ) {
 				// or 'custom' source.
 				if (
 					template.has_theme_file &&
-					( template.origin === 'theme' ||
+					( template.origin === TEMPLATE_ORIGINS.theme ||
 						( ! template.origin &&
-							[ 'theme', 'custom' ].includes(
-								template.source
-							) ) )
+							[
+								TEMPLATE_ORIGINS.theme,
+								TEMPLATE_ORIGINS.custom,
+							].includes( template.source ) ) )
 				) {
 					return {
 						type: 'theme',
@@ -76,18 +89,23 @@ export function useAddedBy( postType, postId ) {
 						text:
 							getTheme( template.theme )?.name?.rendered ||
 							template.theme,
-						isCustomized: template.source === 'custom',
+						isCustomized:
+							template.source === TEMPLATE_ORIGINS.custom,
 					};
 				}
 
 				// Added by plugin.
-				if ( template.has_theme_file && template.origin === 'plugin' ) {
+				if (
+					template.has_theme_file &&
+					template.origin === TEMPLATE_ORIGINS.plugin
+				) {
 					return {
-						type: 'plugin',
+						type: TEMPLATE_ORIGINS.plugin,
 						icon: pluginIcon,
 						text:
 							getPlugin( template.theme )?.name || template.theme,
-						isCustomized: template.source === 'custom',
+						isCustomized:
+							template.source === TEMPLATE_ORIGINS.custom,
 					};
 				}
 
@@ -97,7 +115,7 @@ export function useAddedBy( postType, postId ) {
 				// site logo and title.
 				if (
 					! template.has_theme_file &&
-					template.source === 'custom' &&
+					template.source === TEMPLATE_ORIGINS.custom &&
 					! template.author
 				) {
 					const siteData = getEntityRecord(
@@ -176,7 +194,7 @@ export default function AddedBy( { postType, postId } ) {
 				{ text }
 				{ isCustomized && (
 					<span className="edit-site-list-added-by__customized-info">
-						{ postType === 'wp_template'
+						{ postType === TEMPLATE_POST_TYPE
 							? _x( 'Customized', 'template' )
 							: _x( 'Customized', 'template part' ) }
 					</span>

package/src/components/list/index.js

@@ -17,6 +17,10 @@ import Header from './header';
 import Table from './table';
 import useTitle from '../routes/use-title';
 import { unlock } from '../../lock-unlock';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../utils/constants';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -25,7 +29,9 @@ export default function List() {
 		params: { path },
 	} = useLocation();
 	const templateType =
-		path === '/wp_template/all' ? 'wp_template' : 'wp_template_part';
+		path === '/wp_template/all'
+			? TEMPLATE_POST_TYPE
+			: TEMPLATE_PART_POST_TYPE;
 
 	useRegisterShortcuts();
 

package/src/components/list/style.scss

@@ -130,6 +130,8 @@
 }
 
 .edit-site-list__rename-modal {
+	// The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher.
+	z-index: z-index(".edit-site-list__rename-modal");
 	.components-base-control {
 		@include break-medium() {
 			width: $grid-unit * 40;

package/src/components/page-content-focus-manager/disable-non-page-content-blocks.js

@@ -9,12 +9,7 @@ import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-
-const PAGE_CONTENT_BLOCK_TYPES = [
-	'core/post-title',
-	'core/post-featured-image',
-	'core/post-content',
-];
+import { PAGE_CONTENT_BLOCK_TYPES } from '../../utils/constants';
 
 /**
  * Component that when rendered, makes it so that the site editor allows only
@@ -48,8 +43,7 @@ const withDisableNonPageContentBlocks = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const isDescendentOfQueryLoop = props.context.queryId !== undefined;
 		const isPageContent =
-			PAGE_CONTENT_BLOCK_TYPES.includes( props.name ) &&
-			! isDescendentOfQueryLoop;
+			PAGE_CONTENT_BLOCK_TYPES[ props.name ] && ! isDescendentOfQueryLoop;
 		const mode = isPageContent ? 'contentOnly' : undefined;
 		useBlockEditingMode( mode );
 		return <BlockEdit { ...props } />;