@wordpress/editor 13.34.0 → 14.0.0

package/src/components/{editor-canvas → visual-editor}/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,11 @@ import { useEffect, useRef, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { parse } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
-import { useMergeRefs } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	useViewportMatch,
+	useResizeObserver,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -29,7 +33,14 @@ import PostTitle from '../post-title';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import EditTemplateBlocksNotification from './edit-template-blocks-notification';
+import ResizableEditor from '../resizable-editor';
 import useSelectNearestEditableBlock from '../../hooks/use-select-nearest-editable-block';
+import {
+	NAVIGATION_POST_TYPE,
+	PATTERN_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../store/constants';
 
 const {
 	LayoutStyle,
@@ -44,10 +55,10 @@ const {
  * and they don't apply the layout styles.
  */
 const DESIGN_POST_TYPES = [
-	'wp_block',
-	'wp_template',
-	'wp_navigation',
-	'wp_template_part',
+	PATTERN_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
 ];
 
 /**
@@ -85,17 +96,17 @@ function checkForPostContentAtRootLevel( blocks ) {
 	return false;
 }
 
-function EditorCanvas( {
+function VisualEditor( {
 	// Ideally as we unify post and site editors, we won't need these props.
 	autoFocus,
-	className,
-	renderAppender,
 	styles,
 	disableIframe = false,
 	iframeProps,
 	contentRef,
-	children,
+	className,
 } ) {
+	const [ resizeObserver, sizes ] = useResizeObserver();
+	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const {
 		renderingMode,
 		postContentAttributes,
@@ -103,8 +114,10 @@ function EditorCanvas( {
 		wrapperBlockName,
 		wrapperUniqueId,
 		deviceType,
-		showEditorPadding,
+		isFocusedEntity,
 		isDesignPostType,
+		postType,
+		isPreview,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostId,
@@ -120,7 +133,7 @@ function EditorCanvas( {
 		const _renderingMode = getRenderingMode();
 		let _wrapperBlockName;
 
-		if ( postTypeSlug === 'wp_block' ) {
+		if ( postTypeSlug === PATTERN_POST_TYPE ) {
 			_wrapperBlockName = 'core/block';
 		} else if ( _renderingMode === 'post-only' ) {
 			_wrapperBlockName = 'core/post-content';
@@ -128,13 +141,13 @@ function EditorCanvas( {
 
 		const editorSettings = getEditorSettings();
 		const supportsTemplateMode = editorSettings.supportsTemplateMode;
-		const postType = getPostType( postTypeSlug );
+		const postTypeObject = getPostType( postTypeSlug );
 		const canEditTemplate = canUser( 'create', 'templates' );
 		const currentTemplateId = getCurrentTemplateId();
 		const template = currentTemplateId
 			? getEditedEntityRecord(
 					'postType',
-					'wp_template',
+					TEMPLATE_POST_TYPE,
 					currentTemplateId
 			  )
 			: undefined;
@@ -146,14 +159,17 @@ function EditorCanvas( {
 			// Post template fetch returns a 404 on classic themes, which
 			// messes with e2e tests, so check it's a block theme first.
 			editedPostTemplate:
-				postType?.viewable && supportsTemplateMode && canEditTemplate
+				postTypeObject?.viewable &&
+				supportsTemplateMode &&
+				canEditTemplate
 					? template
 					: undefined,
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
 			deviceType: getDeviceType(),
-			showEditorPadding:
-				!! editorSettings.onNavigateToPreviousEntityRecord,
+			isFocusedEntity: !! editorSettings.onNavigateToPreviousEntityRecord,
+			postType: postTypeSlug,
+			isPreview: editorSettings.__unstableIsPreviewMode,
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -161,13 +177,17 @@ function EditorCanvas( {
 		hasRootPaddingAwareAlignments,
 		themeHasDisabledLayoutStyles,
 		themeSupportsLayout,
+		isZoomOutMode,
 	} = useSelect( ( select ) => {
-		const _settings = select( blockEditorStore ).getSettings();
+		const { getSettings, __unstableGetEditorMode } =
+			select( blockEditorStore );
+		const _settings = getSettings();
 		return {
 			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
 			themeSupportsLayout: _settings.supportsLayout,
 			hasRootPaddingAwareAlignments:
 				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
@@ -248,7 +268,7 @@ function EditorCanvas( {
 		'core/post-content'
 	);
 
-	const blockListLayoutClass = classnames(
+	const blockListLayoutClass = clsx(
 		{
 			'is-layout-flow': ! themeSupportsLayout,
 		},
@@ -289,7 +309,6 @@ function EditorCanvas( {
 		blockListLayout?.type === 'default' && ! hasPostContentAtRootLevel
 			? fallbackLayout
 			: blockListLayout;
-
 	const observeTypingRef = useTypingObserver();
 	const titleRef = useRef();
 	useEffect( () => {
@@ -319,102 +338,164 @@ function EditorCanvas( {
 		} ),
 	] );
 
+	const zoomOutProps = isZoomOutMode
+		? {
+				scale: 'default',
+				frameSize: '20px',
+		  }
+		: {};
+
+	const forceFullHeight = postType === NAVIGATION_POST_TYPE;
+	const enableResizing =
+		[
+			NAVIGATION_POST_TYPE,
+			TEMPLATE_PART_POST_TYPE,
+			PATTERN_POST_TYPE,
+		].includes( postType ) &&
+		// Disable in previews / view mode.
+		! isPreview &&
+		// Disable resizing in mobile viewport.
+		! isMobileViewport &&
+		// Dsiable resizing in zoomed-out mode.
+		! isZoomOutMode;
+	const shouldIframe =
+		! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType );
+
+	const iframeStyles = useMemo( () => {
+		return [
+			...( styles ?? [] ),
+			{
+				css: `.is-root-container{display:flow-root;${
+					// Some themes will have `min-height: 100vh` for the root container,
+					// which isn't a requirement in auto resize mode.
+					enableResizing ? 'min-height:0!important;' : ''
+				}}`,
+			},
+		];
+	}, [ styles, enableResizing ] );
+
 	return (
-		<BlockCanvas
-			shouldIframe={
-				! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType )
-			}
-			contentRef={ contentRef }
-			styles={ styles }
-			height="100%"
-			iframeProps={ {
-				className: classnames( 'editor-canvas__iframe', {
-					'has-editor-padding': showEditorPadding,
-				} ),
-				...iframeProps,
-				style: {
-					...iframeProps?.style,
-					...deviceStyles,
-				},
-			} }
+		<div
+			className={ clsx(
+				'editor-visual-editor',
+				// this class is here for backward compatibility reasons.
+				'edit-post-visual-editor',
+				className,
+				{
+					'has-padding': isFocusedEntity || enableResizing,
+					'is-resizable': enableResizing,
+					'is-iframed': shouldIframe,
+				}
+			) }
 		>
-			{ themeSupportsLayout &&
-				! themeHasDisabledLayoutStyles &&
-				renderingMode === 'post-only' &&
-				! isDesignPostType && (
-					<>
-						<LayoutStyle
-							selector=".editor-editor-canvas__post-title-wrapper"
-							layout={ fallbackLayout }
-						/>
-						<LayoutStyle
-							selector=".block-editor-block-list__layout.is-root-container"
-							layout={ postEditorLayout }
-						/>
-						{ align && <LayoutStyle css={ alignCSS } /> }
-						{ postContentLayoutStyles && (
-							<LayoutStyle
-								layout={ postContentLayout }
-								css={ postContentLayoutStyles }
-							/>
-						) }
-					</>
-				) }
-			{ renderingMode === 'post-only' && ! isDesignPostType && (
-				<div
-					className={ classnames(
-						'editor-editor-canvas__post-title-wrapper',
-						// The following class is only here for backward comapatibility
-						// some themes might be using it to style the post title.
-						'edit-post-visual-editor__post-title-wrapper',
-						{
-							'has-global-padding': hasRootPaddingAwareAlignments,
-						}
-					) }
-					contentEditable={ false }
-					ref={ observeTypingRef }
-					style={ {
-						// This is using inline styles
-						// so it's applied for both iframed and non iframed editors.
-						marginTop: '4rem',
+			<ResizableEditor
+				enableResizing={ enableResizing }
+				height={
+					sizes.height && ! forceFullHeight ? sizes.height : '100%'
+				}
+			>
+				<BlockCanvas
+					shouldIframe={ shouldIframe }
+					contentRef={ contentRef }
+					styles={ iframeStyles }
+					height="100%"
+					iframeProps={ {
+						...iframeProps,
+						...zoomOutProps,
+						style: {
+							...iframeProps?.style,
+							...deviceStyles,
+						},
 					} }
 				>
-					<PostTitle ref={ titleRef } />
-				</div>
-			) }
-			<RecursionProvider
-				blockName={ wrapperBlockName }
-				uniqueId={ wrapperUniqueId }
-			>
-				<BlockList
-					className={ classnames(
-						className,
-						'is-' + deviceType.toLowerCase() + '-preview',
-						renderingMode !== 'post-only' || isDesignPostType
-							? 'wp-site-blocks'
-							: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
+					{ themeSupportsLayout &&
+						! themeHasDisabledLayoutStyles &&
+						renderingMode === 'post-only' &&
+						! isDesignPostType && (
+							<>
+								<LayoutStyle
+									selector=".editor-visual-editor__post-title-wrapper"
+									layout={ fallbackLayout }
+								/>
+								<LayoutStyle
+									selector=".block-editor-block-list__layout.is-root-container"
+									layout={ postEditorLayout }
+								/>
+								{ align && <LayoutStyle css={ alignCSS } /> }
+								{ postContentLayoutStyles && (
+									<LayoutStyle
+										layout={ postContentLayout }
+										css={ postContentLayoutStyles }
+									/>
+								) }
+							</>
+						) }
+					{ renderingMode === 'post-only' && ! isDesignPostType && (
+						<div
+							className={ clsx(
+								'editor-visual-editor__post-title-wrapper',
+								// The following class is only here for backward comapatibility
+								// some themes might be using it to style the post title.
+								'edit-post-visual-editor__post-title-wrapper',
+								{
+									'has-global-padding':
+										hasRootPaddingAwareAlignments,
+								}
+							) }
+							contentEditable={ false }
+							ref={ observeTypingRef }
+							style={ {
+								// This is using inline styles
+								// so it's applied for both iframed and non iframed editors.
+								marginTop: '4rem',
+							} }
+						>
+							<PostTitle ref={ titleRef } />
+						</div>
 					) }
-					layout={ blockListLayout }
-					dropZoneElement={
-						// When iframed, pass in the html element of the iframe to
-						// ensure the drop zone extends to the edges of the iframe.
-						disableIframe
-							? localRef.current
-							: localRef.current?.parentNode
-					}
-					renderAppender={ renderAppender }
-					__unstableDisableDropZone={
-						// In template preview mode, disable drop zones at the root of the template.
-						renderingMode === 'template-locked' ? true : false
+					<RecursionProvider
+						blockName={ wrapperBlockName }
+						uniqueId={ wrapperUniqueId }
+					>
+						<BlockList
+							className={ clsx(
+								'is-' + deviceType.toLowerCase() + '-preview',
+								renderingMode !== 'post-only' ||
+									isDesignPostType
+									? 'wp-site-blocks'
+									: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
+							) }
+							layout={ blockListLayout }
+							dropZoneElement={
+								// When iframed, pass in the html element of the iframe to
+								// ensure the drop zone extends to the edges of the iframe.
+								disableIframe
+									? localRef.current
+									: localRef.current?.parentNode
+							}
+							__unstableDisableDropZone={
+								// In template preview mode, disable drop zones at the root of the template.
+								renderingMode === 'template-locked'
+									? true
+									: false
+							}
+						/>
+						{ renderingMode === 'template-locked' && (
+							<EditTemplateBlocksNotification
+								contentRef={ localRef }
+							/>
+						) }
+					</RecursionProvider>
+					{
+						// Avoid resize listeners when not needed,
+						// these will trigger unnecessary re-renders
+						// when animating the iframe width.
+						enableResizing && resizeObserver
 					}
-				/>
-				{ renderingMode === 'template-locked' && (
-					<EditTemplateBlocksNotification contentRef={ localRef } />
-				) }
-			</RecursionProvider>
-			{ children }
-		</BlockCanvas>
+				</BlockCanvas>
+			</ResizableEditor>
+		</div>
 	);
 }
 
-export default EditorCanvas;
+export default VisualEditor;

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

@@ -0,0 +1,37 @@
+.editor-visual-editor {
+	position: relative;
+	height: 100%;
+	display: block;
+	background-color: $gray-300;
+
+	// Centralize the editor horizontally (flex-direction is column).
+	align-items: center;
+
+	&.is-resizable {
+		max-height: 100%;
+	}
+
+	&.has-padding {
+		padding: $grid-unit-30 $grid-unit-30 0;
+	}
+
+	// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the
+	// legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning.
+	.is-iframed {
+		overflow: hidden;
+	}
+
+	// The button element easily inherits styles that are meant for the editor style.
+	// These rules enhance the specificity to reduce that inheritance.
+	// This is duplicated in edit-site.
+	& .components-button {
+		font-family: $default-font;
+		font-size: $default-font-size;
+		padding: 6px 12px;
+
+		&.is-tertiary,
+		&.has-icon {
+			padding: 6px;
+		}
+	}
+}

package/src/hooks/index.js

@@ -3,4 +3,5 @@
  */
 import './custom-sources-backwards-compatibility';
 import './default-autocompleters';
+import './media-upload';
 import './pattern-overrides';

package/src/hooks/media-upload.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { MediaUpload } from '@wordpress/media-utils';
+
+addFilter(
+	'editor.MediaUpload',
+	'core/editor/components/media-upload',
+	() => MediaUpload
+);

package/src/hooks/pattern-overrides.js

@@ -19,6 +19,7 @@ const {
 	ResetOverridesControl,
 	PATTERN_TYPES,
 	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
+	PATTERN_SYNC_TYPES,
 } = unlock( patternsPrivateApis );
 
 /**
@@ -51,18 +52,23 @@ const withPatternOverrideControls = createHigherOrderComponent(
 // on every block.
 function ControlsWithStoreSubscription( props ) {
 	const blockEditingMode = useBlockEditingMode();
-	const { hasPatternOverridesSource, isEditingPattern } = useSelect(
+	const { hasPatternOverridesSource, isEditingSyncedPattern } = useSelect(
 		( select ) => {
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
+			const { getCurrentPostType, getEditedPostAttribute } =
+				select( editorStore );
 
 			return {
 				// For editing link to the site editor if the theme and user permissions support it.
 				hasPatternOverridesSource: !! getBlockBindingsSource(
 					'core/pattern-overrides'
 				),
-				isEditingPattern:
-					select( editorStore ).getCurrentPostType() ===
-					PATTERN_TYPES.user,
+				isEditingSyncedPattern:
+					getCurrentPostType() === PATTERN_TYPES.user &&
+					getEditedPostAttribute( 'meta' )?.wp_pattern_sync_status !==
+						PATTERN_SYNC_TYPES.unsynced &&
+					getEditedPostAttribute( 'wp_pattern_sync_status' ) !==
+						PATTERN_SYNC_TYPES.unsynced,
 			};
 		},
 		[]
@@ -76,9 +82,9 @@ function ControlsWithStoreSubscription( props ) {
 		);
 
 	const shouldShowPatternOverridesControls =
-		isEditingPattern && blockEditingMode === 'default';
+		isEditingSyncedPattern && blockEditingMode === 'default';
 	const shouldShowResetOverridesControl =
-		! isEditingPattern &&
+		! isEditingSyncedPattern &&
 		!! props.attributes.metadata?.name &&
 		blockEditingMode !== 'disabled' &&
 		hasPatternBindings;

package/src/private-apis.js

@@ -6,67 +6,47 @@ import * as interfaceApis from '@wordpress/interface';
 /**
  * Internal dependencies
  */
-import CollapsableBlockToolbar from './components/collapsible-block-toolbar';
-import EditorCanvas from './components/editor-canvas';
 import { ExperimentalEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
-import useAutoSwitchEditorSidebars from './components/provider/use-auto-switch-editor-sidebars';
+import EditorContentSlotFill from './components/editor-interface/content-slot-fill';
 import useBlockEditorSettings from './components/provider/use-block-editor-settings';
-import DocumentTools from './components/document-tools';
-import InserterSidebar from './components/inserter-sidebar';
-import ListViewSidebar from './components/list-view-sidebar';
-import MoreMenu from './components/more-menu';
-import PatternOverridesPanel from './components/pattern-overrides-panel';
+import BackButton from './components/header/back-button';
+import EditorInterface from './components/editor-interface';
+import CreateTemplatePartModal from './components/create-template-part-modal';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
-import PostPanelRow from './components/post-panel-row';
-import PostViewLink from './components/post-view-link';
-import PreviewDropdown from './components/preview-dropdown';
 import PreferencesModal from './components/preferences-modal';
-import PostActions from './components/post-actions';
 import { usePostActions } from './components/post-actions/actions';
-import PostCardPanel from './components/post-card-panel';
-import PostStatus from './components/post-status';
 import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
 import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
-import { PrivatePostExcerptPanel } from './components/post-excerpt/panel';
-import PostPublishButtonOrToggle from './components/post-publish-button/post-publish-button-or-toggle';
-import SavePublishPanels from './components/save-publish-panels';
-import PostContentInformation from './components/post-content-information';
-import PostLastEditedPanel from './components/post-last-edited-panel';
+import ResizableEditor from './components/resizable-editor';
+import Sidebar from './components/sidebar';
+import {
+	mergeBaseAndUserConfigs,
+	GlobalStylesProvider,
+} from './components/global-styles-provider';
 
 const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
 export const privateApis = {};
 lock( privateApis, {
-	CollapsableBlockToolbar,
-	DocumentTools,
-	EditorCanvas,
+	CreateTemplatePartModal,
+	BackButton,
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
-	InserterSidebar,
-	ListViewSidebar,
-	MoreMenu,
-	PatternOverridesPanel,
+	EditorInterface,
+	EditorContentSlotFill,
+	GlobalStylesProvider,
+	mergeBaseAndUserConfigs,
 	PluginPostExcerpt,
-	PostActions,
-	PostPanelRow,
-	PostViewLink,
-	PreviewDropdown,
 	PreferencesModal,
 	usePostActions,
-	PostCardPanel,
-	PostStatus,
 	ToolsMoreMenuGroup,
 	ViewMoreMenuGroup,
-	PrivatePostExcerptPanel,
-	PostPublishButtonOrToggle,
-	SavePublishPanels,
-	PostContentInformation,
-	PostLastEditedPanel,
+	ResizableEditor,
+	Sidebar,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
-	useAutoSwitchEditorSidebars,
 	useBlockEditorSettings,
 	interfaceStore,
 	...remainingInterfaceApis,

package/src/private-apis.native.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import * as interfaceApis from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import VisualEditor from './components/visual-editor';
+import { ExperimentalEditorProvider } from './components/provider';
+import { lock } from './lock-unlock';
+import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
+import useBlockEditorSettings from './components/provider/use-block-editor-settings';
+import PluginPostExcerpt from './components/post-excerpt/plugin';
+import PreferencesModal from './components/preferences-modal';
+import { usePostActions } from './components/post-actions/actions';
+import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
+import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
+
+const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
+
+export const privateApis = {};
+lock( privateApis, {
+	VisualEditor,
+	ExperimentalEditorProvider,
+	EntitiesSavedStatesExtensible,
+	PluginPostExcerpt,
+	PreferencesModal,
+	usePostActions,
+	ToolsMoreMenuGroup,
+	ViewMoreMenuGroup,
+
+	// This is a temporary private API while we're updating the site editor to use EditorProvider.
+	useBlockEditorSettings,
+	interfaceStore,
+	...remainingInterfaceApis,
+} );

package/src/store/constants.js

@@ -18,6 +18,7 @@ export const TRASH_POST_NOTICE_ID = 'TRASH_POST_NOTICE_ID';
 export const PERMALINK_POSTNAME_REGEX = /%(?:postname|pagename)%/;
 export const ONE_MINUTE_IN_MS = 60 * 1000;
 export const AUTOSAVE_PROPERTIES = [ 'title', 'excerpt', 'content' ];
+export const TEMPLATE_PART_AREA_DEFAULT_CATEGORY = 'uncategorized';
 export const TEMPLATE_POST_TYPE = 'wp_template';
 export const TEMPLATE_PART_POST_TYPE = 'wp_template_part';
 export const PATTERN_POST_TYPE = 'wp_block';
@@ -27,3 +28,9 @@ export const TEMPLATE_ORIGINS = {
 	theme: 'theme',
 	plugin: 'plugin',
 };
+export const TEMPLATE_POST_TYPES = [ 'wp_template', 'wp_template_part' ];
+export const GLOBAL_POST_TYPES = [
+	...TEMPLATE_POST_TYPES,
+	'wp_block',
+	'wp_navigation',
+];