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

package/src/components/block-editor/editor-canvas.js

@@ -8,9 +8,7 @@ import classnames from 'classnames';
  */
 import {
 	__experimentalUseResizeCanvas as useResizeCanvas,
-	__unstableEditorStyles as EditorStyles,
-	__unstableIframe as Iframe,
-	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
+	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -24,7 +22,17 @@ import { __ } from '@wordpress/i18n';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
-function EditorCanvas( { enableResizing, settings, children, ...props } ) {
+const { ExperimentalBlockCanvas: BlockCanvas } = unlock(
+	blockEditorPrivateApis
+);
+
+function EditorCanvas( {
+	enableResizing,
+	settings,
+	children,
+	contentRef,
+	...props
+} ) {
 	const { canvasMode, deviceType, isZoomOutMode } = useSelect(
 		( select ) => ( {
 			deviceType:
@@ -38,7 +46,6 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 	);
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const deviceStyles = useResizeCanvas( deviceType );
-	const mouseMoveTypingRef = useMouseMoveTypingReset();
 	const [ isFocused, setIsFocused ] = useState( false );
 
 	useEffect( () => {
@@ -65,20 +72,25 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 	};
 
 	return (
-		<Iframe
-			expand={ isZoomOutMode }
-			scale={ ( isZoomOutMode && 0.45 ) || undefined }
-			frameSize={ isZoomOutMode ? 100 : undefined }
-			style={ enableResizing ? {} : deviceStyles }
-			ref={ mouseMoveTypingRef }
-			name="editor-canvas"
-			className={ classnames( 'edit-site-visual-editor__editor-canvas', {
-				'is-focused': isFocused && canvasMode === 'view',
-			} ) }
-			{ ...props }
-			{ ...( canvasMode === 'view' ? viewModeProps : {} ) }
+		<BlockCanvas
+			height="100%"
+			iframeProps={ {
+				expand: isZoomOutMode,
+				scale: isZoomOutMode ? 0.45 : undefined,
+				frameSize: isZoomOutMode ? 100 : undefined,
+				style: enableResizing ? {} : deviceStyles,
+				className: classnames(
+					'edit-site-visual-editor__editor-canvas',
+					{
+						'is-focused': isFocused && canvasMode === 'view',
+					}
+				),
+				...props,
+				...( canvasMode === 'view' ? viewModeProps : {} ),
+			} }
+			styles={ settings.styles }
+			contentRef={ contentRef }
 		>
-			<EditorStyles styles={ settings.styles } />
 			<style>{
 				// Forming a "block formatting context" to prevent margin collapsing.
 				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
@@ -93,7 +105,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 				}}}`
 			}</style>
 			{ children }
-		</Iframe>
+		</BlockCanvas>
 	);
 }
 

package/src/components/block-editor/index.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import { BlockInspector } from '@wordpress/block-editor';
 import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
 
@@ -10,31 +9,19 @@ import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
  */
 import TemplatePartConverter from '../template-part-converter';
 import { SidebarInspectorFill } from '../sidebar-edit-mode';
-import { store as editSiteStore } from '../../store';
 import SiteEditorCanvas from './site-editor-canvas';
-import getBlockEditorProvider from './get-block-editor-provider';
+import BlockEditorProvider from './block-editor-provider';
 
 import { unlock } from '../../lock-unlock';
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
 export default function BlockEditor() {
-	const entityType = useSelect(
-		( select ) => select( editSiteStore ).getEditedPostType(),
-		[]
-	);
-
-	// Choose the provider based on the entity type currently
-	// being edited.
-	const BlockEditorProvider = getBlockEditorProvider( entityType );
-
 	return (
 		<BlockEditorProvider>
 			<TemplatePartConverter />
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
-
 			<SiteEditorCanvas />
-
 			<PatternsMenuItems />
 		</BlockEditorProvider>
 	);

package/src/components/block-editor/site-editor-canvas.js

@@ -10,14 +10,9 @@ import { useRef } from '@wordpress/element';
 import {
 	BlockList,
 	BlockTools,
-	__unstableUseClipboardHandler as useClipboardHandler,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	useMergeRefs,
-	useViewportMatch,
-	useResizeObserver,
-} from '@wordpress/compose';
+import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -27,7 +22,10 @@ import EditorCanvas from './editor-canvas';
 import EditorCanvasContainer from '../editor-canvas-container';
 import useSiteEditorSettings from './use-site-editor-settings';
 import { store as editSiteStore } from '../../store';
-import { FOCUSABLE_ENTITIES } from '../../utils/constants';
+import {
+	FOCUSABLE_ENTITIES,
+	NAVIGATION_POST_TYPE,
+} from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import PageContentFocusManager from '../page-content-focus-manager';
 
@@ -76,9 +74,7 @@ export default function SiteEditorCanvas() {
 		! isMobileViewport;
 
 	const contentRef = useRef();
-	const mergedRefs = useMergeRefs( [ contentRef, useClipboardHandler() ] );
-
-	const isTemplateTypeNavigation = templateType === 'wp_navigation';
+	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
 
 	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
 
@@ -127,8 +123,7 @@ export default function SiteEditorCanvas() {
 								<EditorCanvas
 									enableResizing={ enableResizing }
 									settings={ settings }
-									contentRef={ mergedRefs }
-									readonly={ isViewMode }
+									contentRef={ contentRef }
 								>
 									{ resizeObserver }
 									<BlockList

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

@@ -31,6 +31,7 @@
 		display: block;
 		width: 100%;
 		height: 100%;
+		background: $white;
 	}
 
 	.edit-site-visual-editor__editor-canvas {
@@ -76,7 +77,7 @@
 			contextual toolbar has been redesigned.
 			See: https://github.com/WordPress/gutenberg/issues/40450
 		*/
-		.block-editor-block-contextual-toolbar {
+		.block-editor-block-contextual-toolbar.is-fixed {
 			display: none;
 		}
 	}
@@ -172,3 +173,89 @@
 	}
 }
 
+// Fixed contextual toolbar
+@include editor-left(".edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed");
+
+.edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+	position: sticky;
+	top: 0;
+	z-index: z-index(".block-editor-block-popover");
+	display: block;
+	width: 100%;
+
+	// on desktop and tablet viewports the toolbar is fixed
+	// on top of interface header
+	$toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
+
+	@include break-medium() {
+		// leave room for block inserter, undo and redo, list view
+		margin-left: $toolbar-margin;
+		// position on top of interface header
+		position: fixed;
+		top: $admin-bar-height;
+		// Don't fill up when empty
+		min-height: initial;
+		// has to be flex for collapse button to fit
+		display: flex;
+
+		// Mimic the height of the parent, vertically align center, and provide a max-height.
+		height: $header-height;
+		align-items: center;
+
+
+		// on tablet viewports the toolbar is fixed
+		// on top of interface header and covers the whole header
+		// except for the inserter on the left
+		width: calc(100% - #{$toolbar-margin});
+
+		&.is-collapsed {
+			width: initial;
+		}
+
+		&:empty {
+			width: initial;
+		}
+
+		.is-fullscreen-mode & {
+			// leave room for block inserter, undo and redo, list view
+			// and some margin left
+			margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
+
+			top: 0;
+
+			&.is-collapsed {
+				width: initial;
+			}
+
+			&:empty {
+				width: initial;
+			}
+		}
+
+		.show-icon-labels & {
+			margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin
+			width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
+
+			.is-fullscreen-mode & {
+				margin-left: $grid-unit * 18; // site hub, inserter and margin
+			}
+		}
+	}
+
+	// on desktop viewports the toolbar is fixed
+	// on top of interface header and leaves room
+	// for the block inserter the publish button
+	@include break-large() {
+		width: auto;
+		.show-icon-labels & {
+			width: auto; //there are no undo, redo and list view buttons
+		}
+
+		.is-fullscreen-mode & {
+			// in full screen mode we need to account for
+			// the combined with of the tools at the right of the header and the margin left
+			// of the toolbar which includes four buttons
+			width: calc(100% - 280px - #{4 * $grid-unit-80});
+		}
+	}
+}

package/src/components/block-editor/use-site-editor-settings.js

@@ -106,25 +106,30 @@ export default function useSiteEditorSettings() {
 		storedSettings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
 		storedSettings.__experimentalBlockPatternCategories; // WP 5.9
 
-	const { restBlockPatterns, restBlockPatternCategories, templateSlug } =
-		useSelect( ( select ) => {
-			const { getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const usedPostType = getEditedPostType();
-			const usedPostId = getEditedPostId();
-			const _record = getEditedEntityRecord(
-				'postType',
-				usedPostType,
-				usedPostId
-			);
-			return {
-				restBlockPatterns: select( coreStore ).getBlockPatterns(),
-				restBlockPatternCategories:
-					select( coreStore ).getBlockPatternCategories(),
-				templateSlug: _record.slug,
-			};
-		}, [] );
+	const {
+		restBlockPatterns,
+		restBlockPatternCategories,
+		templateSlug,
+		userPatternCategories,
+	} = useSelect( ( select ) => {
+		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
+		const { getEditedEntityRecord, getUserPatternCategories } =
+			select( coreStore );
+		const usedPostType = getEditedPostType();
+		const usedPostId = getEditedPostId();
+		const _record = getEditedEntityRecord(
+			'postType',
+			usedPostType,
+			usedPostId
+		);
+		return {
+			restBlockPatterns: select( coreStore ).getBlockPatterns(),
+			restBlockPatternCategories:
+				select( coreStore ).getBlockPatternCategories(),
+			templateSlug: _record.slug,
+			userPatternCategories: getUserPatternCategories(),
+		};
+	}, [] );
 	const archiveLabels = useArchiveLabel( templateSlug );
 
 	const blockPatterns = useMemo(
@@ -171,6 +176,7 @@ export default function useSiteEditorSettings() {
 			inserterMediaCategories,
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
+			__experimentalUserPatternCategories: userPatternCategories,
 			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
 			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
 			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
@@ -179,6 +185,7 @@ export default function useSiteEditorSettings() {
 		storedSettings,
 		blockPatterns,
 		blockPatternCategories,
+		userPatternCategories,
 		canvasMode,
 		archiveLabels.archiveTypeLabel,
 		archiveLabels.archiveNameLabel,

package/src/components/canvas-loader/index.js

@@ -3,6 +3,8 @@
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -19,11 +21,20 @@ export default function CanvasLoader( { id } ) {
 	const { highlightedColors } = useStylesPreviewColors();
 	const indicatorColor =
 		highlightedColors[ 0 ]?.color ?? fallbackIndicatorColor;
+	const { elapsed, total } = useSelect( ( select ) => {
+		const selectorsByStatus = select( coreStore ).countSelectorsByStatus();
+		const resolving = selectorsByStatus.resolving ?? 0;
+		const finished = selectorsByStatus.finished ?? 0;
+		return {
+			elapsed: finished,
+			total: finished + resolving,
+		};
+	}, [] );
 
 	return (
 		<div className="edit-site-canvas-loader">
 			<Theme accent={ indicatorColor } background={ backgroundColor }>
-				<ProgressBar id={ id } />
+				<ProgressBar id={ id } max={ total } value={ elapsed } />
 			</Theme>
 		</div>
 	);

package/src/components/canvas-loader/style.scss

@@ -9,7 +9,7 @@
 	align-items: center;
 	justify-content: center;
 
-	animation: 0.5s ease 1s edit-site-canvas-loader__fade-in-animation;
+	animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");
 

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

@@ -28,7 +28,10 @@ import { serialize } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import { TEMPLATE_PART_AREA_GENERAL } from '../../store/constants';
+import {
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
+} from '../../utils/constants';
 import {
 	useExistingTemplateParts,
 	getUniqueTemplatePartTitle,
@@ -46,7 +49,7 @@ export default function CreateTemplatePartModal( {
 	const existingTemplateParts = useExistingTemplateParts();
 
 	const [ title, setTitle ] = useState( '' );
-	const [ area, setArea ] = useState( TEMPLATE_PART_AREA_GENERAL );
+	const [ area, setArea ] = useState( TEMPLATE_PART_AREA_DEFAULT_CATEGORY );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
 	const instanceId = useInstanceId( CreateTemplatePartModal );
 
@@ -57,14 +60,12 @@ export default function CreateTemplatePartModal( {
 	);
 
 	async function createTemplatePart() {
-		if ( ! title ) {
-			createErrorNotice( __( 'Please enter a title.' ), {
-				type: 'snackbar',
-			} );
+		if ( ! title || isSubmitting ) {
 			return;
 		}
 
 		try {
+			setIsSubmitting( true );
 			const uniqueTitle = getUniqueTemplatePartTitle(
 				title,
 				existingTemplateParts
@@ -73,7 +74,7 @@ export default function CreateTemplatePartModal( {
 
 			const templatePart = await saveEntityRecord(
 				'postType',
-				'wp_template_part',
+				TEMPLATE_PART_POST_TYPE,
 				{
 					slug: cleanSlug,
 					title: uniqueTitle,
@@ -96,6 +97,8 @@ export default function CreateTemplatePartModal( {
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
 
 			onError?.();
+		} finally {
+			setIsSubmitting( false );
 		}
 	}
 
@@ -108,10 +111,6 @@ export default function CreateTemplatePartModal( {
 			<form
 				onSubmit={ async ( event ) => {
 					event.preventDefault();
-					if ( ! title ) {
-						return;
-					}
-					setIsSubmitting( true );
 					await createTemplatePart();
 				} }
 			>
@@ -179,7 +178,7 @@ export default function CreateTemplatePartModal( {
 						<Button
 							variant="primary"
 							type="submit"
-							disabled={ ! title }
+							aria-disabled={ ! title || isSubmitting }
 							isBusy={ isSubmitting }
 						>
 							{ __( 'Create' ) }

package/src/components/editor/index.js

@@ -44,6 +44,7 @@ import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import { SidebarFixedBottomSlot } from '../sidebar-edit-mode/sidebar-fixed-bottom';
+import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
 
@@ -58,13 +59,6 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-const typeLabels = {
-	wp_template: __( 'Template' ),
-	wp_template_part: __( 'Template Part' ),
-	wp_block: __( 'Pattern' ),
-	wp_navigation: __( 'Navigation' ),
-};
-
 // Prevent accidental removal of certain blocks, asking the user for
 // confirmation.
 const blockRemovalRules = {
@@ -77,7 +71,7 @@ const blockRemovalRules = {
 	),
 };
 
-export default function Editor( { isLoading } ) {
+export default function Editor( { listViewToggleElement, isLoading } ) {
 	const {
 		record: editedPost,
 		getTitle,
@@ -171,7 +165,8 @@ export default function Editor( { isLoading } ) {
 			// translators: A breadcrumb trail in browser tab. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
 			__( '%1$s ‹ %2$s ‹ Editor' ),
 			getTitle(),
-			typeLabels[ editedPostType ] ?? typeLabels.wp_template
+			POST_TYPE_LABELS[ editedPostType ] ??
+				POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]
 		);
 	}
 
@@ -252,7 +247,11 @@ export default function Editor( { isLoading } ) {
 									<InserterSidebar />
 								) ) ||
 									( shouldShowListView && (
-										<ListViewSidebar />
+										<ListViewSidebar
+											listViewToggleElement={
+												listViewToggleElement
+											}
+										/>
 									) ) )
 							}
 							sidebar={

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

@@ -33,6 +33,7 @@ export default function DimensionsPanel() {
 	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
+	const [ userSettings ] = useGlobalSetting( '', undefined, 'user' );
 	const [ rawSettings, setSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 
@@ -48,17 +49,20 @@ export default function DimensionsPanel() {
 	const styleWithLayout = useMemo( () => {
 		return {
 			...style,
-			layout: settings.layout,
+			layout: userSettings.layout,
 		};
-	}, [ style, settings.layout ] );
+	}, [ style, userSettings.layout ] );
 
 	const onChange = ( newStyle ) => {
 		const updatedStyle = { ...newStyle };
 		delete updatedStyle.layout;
 		setStyle( updatedStyle );
 
-		if ( newStyle.layout !== settings.layout ) {
-			const updatedSettings = { ...rawSettings, layout: newStyle.layout };
+		if ( newStyle.layout !== userSettings.layout ) {
+			const updatedSettings = {
+				...userSettings,
+				layout: newStyle.layout,
+			};
 
 			// Ensure any changes to layout definitions are not persisted.
 			if ( updatedSettings.layout?.definitions ) {

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

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	Button,
+	Tooltip,
+} from '@wordpress/components';
+import { typography } from '@wordpress/icons';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontLibraryProvider, {
+	FontLibraryContext,
+} from './font-library-modal/context';
+import FontLibraryModal from './font-library-modal';
+import FontFamilyItem from './font-family-item';
+import Subtitle from './subtitle';
+
+function FontFamilies() {
+	const { modalTabOpen, toggleModal, themeFonts, customFonts } =
+		useContext( FontLibraryContext );
+
+	return (
+		<>
+			{ !! modalTabOpen && (
+				<FontLibraryModal
+					onRequestClose={ () => toggleModal() }
+					initialTabName={ modalTabOpen }
+				/>
+			) }
+
+			<VStack spacing={ 3 }>
+				<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={ typography }
+								size={ 'small' }
+							/>
+						</Tooltip>
+					</HStack>
+				</HStack>
+				<ItemGroup isBordered isSeparated>
+					{ customFonts.map( ( font ) => (
+						<FontFamilyItem key={ font.slug } font={ font } />
+					) ) }
+					{ themeFonts.map( ( font ) => (
+						<FontFamilyItem key={ font.slug } font={ font } />
+					) ) }
+				</ItemGroup>
+			</VStack>
+		</>
+	);
+}
+
+export default ( { ...props } ) => (
+	<FontLibraryProvider>
+		<FontFamilies { ...props } />
+	</FontLibraryProvider>
+);

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

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { _n } from '@wordpress/i18n';
+import {
+	__experimentalHStack as HStack,
+	__experimentalItem as Item,
+	FlexItem,
+} from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './font-library-modal/context';
+import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
+
+function FontFamilyItem( { font } ) {
+	const { handleSetLibraryFontSelected, toggleModal } =
+		useContext( FontLibraryContext );
+
+	const variantsCount = font?.fontFace?.length || 1;
+
+	const handleClick = () => {
+		handleSetLibraryFontSelected( font );
+		toggleModal( 'installed-fonts' );
+	};
+
+	const previewStyle = getFamilyPreviewStyle( font );
+
+	return (
+		<Item onClick={ handleClick }>
+			<HStack justify="space-between">
+				<FlexItem style={ previewStyle }>{ font.name }</FlexItem>
+				<FlexItem style={ { color: '#9e9e9e' } }>
+					{ variantsCount }{ ' ' }
+					{ _n( 'variant', 'variants', variantsCount ) }
+				</FlexItem>
+			</HStack>
+		</Item>
+	);
+}
+
+export default FontFamilyItem;