@wordpress/editor 13.35.0 → 14.0.1

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

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PostTextEditor from '../post-text-editor';
+import PostTitleRaw from '../post-title/post-title-raw';
+
+export default function TextEditor( { autoFocus = false } ) {
+	const { switchEditorMode } = useDispatch( editorStore );
+	const { shortcut, isRichEditingEnabled } = useSelect( ( select ) => {
+		const { getEditorSettings } = select( editorStore );
+		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+
+		return {
+			shortcut: getShortcutRepresentation( 'core/editor/toggle-mode' ),
+			isRichEditingEnabled: getEditorSettings().richEditingEnabled,
+		};
+	}, [] );
+
+	const titleRef = useRef();
+	useEffect( () => {
+		if ( autoFocus ) {
+			return;
+		}
+		titleRef?.current?.focus();
+	}, [ autoFocus ] );
+
+	return (
+		<div className="editor-text-editor">
+			{ isRichEditingEnabled && (
+				<div className="editor-text-editor__toolbar">
+					<h2>{ __( 'Editing code' ) }</h2>
+					<Button
+						variant="tertiary"
+						onClick={ () => switchEditorMode( 'visual' ) }
+						shortcut={ shortcut }
+					>
+						{ __( 'Exit code editor' ) }
+					</Button>
+				</div>
+			) }
+			<div className="editor-text-editor__body">
+				<PostTitleRaw ref={ titleRef } />
+				<PostTextEditor />
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,71 @@
+.editor-text-editor {
+	position: relative;
+	width: 100%;
+	background-color: $white;
+	flex-grow: 1;
+
+	// Post title.
+	.editor-post-title:not(.is-raw-text),
+	.editor-post-title.is-raw-text textarea {
+		max-width: none;
+		line-height: $default-line-height;
+
+		font-family: $editor-html-font;
+		font-size: 2.5em;
+		font-weight: normal;
+
+		border: $border-width solid $gray-600;
+		border-radius: 0;
+
+		// Same padding as body.
+		padding: $grid-unit-20;
+
+		@include break-small() {
+			padding: $grid-unit-30;
+		}
+
+		&:focus {
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.editor-text-editor__body {
+	width: 100%;
+	padding: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
+	max-width: $break-xlarge;
+	margin-left: auto;
+	margin-right: auto;
+
+	@include break-large() {
+		padding: 0 $grid-unit-30 $grid-unit-30 $grid-unit-30;
+	}
+}
+
+// Exit code editor toolbar.
+.editor-text-editor__toolbar {
+	position: sticky;
+	z-index: z-index(".editor-text-editor__toolbar");
+	top: 0;
+	left: 0;
+	right: 0;
+	display: flex;
+	background: rgba($white, 0.8);
+	padding: $grid-unit-05 $grid-unit-15;
+
+	@include break-small() {
+		padding: $grid-unit-15;
+	}
+
+	@include break-large() {
+		padding: $grid-unit-15 $grid-unit-30;
+	}
+
+	h2 {
+		line-height: $button-size;
+		margin: 0 auto 0 0;
+		font-size: $default-font-size;
+		color: $gray-900;
+	}
+}

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

@@ -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 );
@@ -293,7 +309,6 @@ function EditorCanvas( {
 		blockListLayout?.type === 'default' && ! hasPostContentAtRootLevel
 			? fallbackLayout
 			: blockListLayout;
-
 	const observeTypingRef = useTypingObserver();
 	const titleRef = useRef();
 	useEffect( () => {
@@ -330,103 +345,157 @@ function EditorCanvas( {
 		  }
 		: {};
 
+	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: clsx( 'editor-canvas__iframe', {
-					'has-editor-padding': showEditorPadding,
-				} ),
-				...iframeProps,
-				...zoomOutProps,
-				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={ clsx(
-						'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={ clsx(
-						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/private-apis.js

@@ -6,29 +6,21 @@ import * as interfaceApis from '@wordpress/interface';
 /**
  * Internal dependencies
  */
-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 Header from './components/header';
-import InserterSidebar from './components/inserter-sidebar';
-import ListViewSidebar from './components/list-view-sidebar';
-import PatternOverridesPanel from './components/pattern-overrides-panel';
+import BackButton from './components/header/back-button';
+import CreateTemplatePartModal from './components/create-template-part-modal';
+import Editor from './components/editor';
+import EditorInterface from './components/editor-interface';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
-import PostPanelRow from './components/post-panel-row';
 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 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,
@@ -39,32 +31,24 @@ const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
 export const privateApis = {};
 lock( privateApis, {
-	EditorCanvas,
+	CreateTemplatePartModal,
+	BackButton,
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
+	Editor,
+	EditorInterface,
+	EditorContentSlotFill,
 	GlobalStylesProvider,
-	Header,
-	InserterSidebar,
-	ListViewSidebar,
 	mergeBaseAndUserConfigs,
-	PatternOverridesPanel,
 	PluginPostExcerpt,
-	PostActions,
-	PostPanelRow,
 	PreferencesModal,
 	usePostActions,
-	PostCardPanel,
-	PostStatus,
 	ToolsMoreMenuGroup,
 	ViewMoreMenuGroup,
-	PrivatePostExcerptPanel,
-	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,