@wordpress/editor 14.49.1 → 14.51.1-next.v.202607070741.0

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

@@ -22,10 +22,11 @@ import { privateApis as mediaEditorPrivateApis } from '@wordpress/media-editor';
 /**
  * Internal dependencies
  */
-import inserterMediaCategories from '../media-categories';
+import getInserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import mediaUploadOnSuccess from '../../utils/media-upload/on-success';
 import { default as mediaSideload } from '../../utils/media-sideload';
+import { default as mediaSideloadFromUrl } from '../../utils/media-sideload-from-url';
 import { default as mediaFinalize } from '../../utils/media-finalize';
 import { default as mediaDelete } from '../../utils/media-delete';
 import { store as editorStore } from '../../store';
@@ -114,10 +115,10 @@ const {
 	getMediaSelectKey,
 	isIsolatedEditorKey,
 	deviceTypeKey,
-	onViewportStateChangeKey,
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
+	mediaSideloadFromUrlKey,
 	openMediaEditorModalKey,
 } = unlock( privateApis );
 
@@ -153,6 +154,8 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		deviceType,
 		isNavigationOverlayContext,
 		isRevisionsMode,
+		viewablePostTypeLabel,
+		currentPostId,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -160,9 +163,12 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				getRawEntityRecord,
 				getEntityRecord,
 				getBlockPatternCategories,
+				getPostType,
 			} = select( coreStore );
 			const { get } = select( preferencesStore );
 			const { getBlockTypes } = select( blocksStore );
+			const { getCurrentPostId, getCurrentPostType } =
+				select( editorStore );
 			const { getDeviceType, isRevisionsMode: _isRevisionsMode } = unlock(
 				select( editorStore )
 			);
@@ -178,6 +184,19 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			// Fetch image sizes from REST API index for client-side media processing.
 			const baseData = getEntityRecord( 'root', '__unstableBase' );
 
+			// The attached-images category follows the post being edited, not the
+			// root-level entity in `postType`/`postId`. With "Show template" on,
+			// the root becomes the template (wp_template), but media still attaches
+			// to the page being edited.
+			//
+			// Guard on a truthy slug: `getPostType()` with no slug resolves the
+			// whole `/wp/v2/types` collection rather than the single, already
+			// fetched record for the current type.
+			const currentPostType = getCurrentPostType();
+			const postTypeObject = currentPostType
+				? getPostType( currentPostType )
+				: undefined;
+
 			function getSectionRootBlock() {
 				if ( renderingMode === 'template-locked' ) {
 					return getBlocksByName( 'core/post-content' )?.[ 0 ] ?? '';
@@ -221,6 +240,14 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				} ),
 				pageOnFront: siteSettings?.page_on_front,
 				pageForPosts: siteSettings?.page_for_posts,
+				// The post type's singular name, but only for real, front-end
+				// rendered content (`viewable`). Empty for synced patterns,
+				// navigation and templates, which gates the attached-images
+				// category off for them and words its copy for everything else.
+				viewablePostTypeLabel: postTypeObject?.viewable
+					? postTypeObject?.labels?.singular_name
+					: undefined,
+				currentPostId: getCurrentPostId(),
 				restBlockPatternCategories: getBlockPatternCategories(),
 				sectionRootClientId: getSectionRootBlock(),
 				deviceType: getDeviceType(),
@@ -276,9 +303,6 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 	);
 
 	const { undo, setIsInserterOpened } = useDispatch( editorStore );
-	const { updateDeviceTypeForViewportState } = unlock(
-		useDispatch( editorStore )
-	);
 	const { editMediaEntity } = unlock( useDispatch( coreStore ) );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { openMediaEditorModal } = useDispatch( mediaEditorStore );
@@ -325,6 +349,15 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 
 	const forceDisableFocusMode = settings.focusMode === false;
 
+	// The "Attachments" media category depends on the edited post and its post
+	// type label (which gates whether it's offered and words its copy), so the
+	// categories are derived rather than being a static list.
+	const inserterMediaCategories = useMemo(
+		() =>
+			getInserterMediaCategories( currentPostId, viewablePostTypeLabel ),
+		[ currentPostId, viewablePostTypeLabel ]
+	);
+
 	return useMemo( () => {
 		const blockEditorSettings = {
 			...Object.fromEntries(
@@ -359,6 +392,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				? mediaUploadOnSuccess
 				: undefined,
 			mediaSideload: hasUploadPermissions ? mediaSideload : undefined,
+			[ mediaSideloadFromUrlKey ]: hasUploadPermissions
+				? mediaSideloadFromUrl
+				: undefined,
 			mediaFinalize: hasUploadPermissions ? mediaFinalize : undefined,
 			mediaDelete: hasUploadPermissions ? mediaDelete : undefined,
 			__experimentalBlockPatterns: blockPatterns,
@@ -418,7 +454,6 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				renderingMode === 'template-locked' ||
 				settings.disableContentOnlyForTemplateParts,
 			...( deviceType ? { [ deviceTypeKey ]: deviceType } : {} ),
-			[ onViewportStateChangeKey ]: updateDeviceTypeForViewportState,
 			[ isNavigationOverlayContextKey ]: isNavigationOverlayContext,
 		};
 
@@ -440,6 +475,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		hasUploadPermissions,
 		blockPatterns,
 		blockPatternCategories,
+		inserterMediaCategories,
 		canUseUnfilteredHTML,
 		undo,
 		createPageEntity,
@@ -454,7 +490,6 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		renderingMode,
 		editMediaEntity,
 		openMediaEditorModal,
-		updateDeviceTypeForViewportState,
 		deviceType,
 		allImageSizes,
 		bigImageSizeThreshold,

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

@@ -6,13 +6,16 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useRef, useCallback, useState } from '@wordpress/element';
 import { ResizableBox } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import ResizeHandle from './resize-handle';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 // Removes the inline styles in the drag handles.
 const HANDLE_STYLES_OVERRIDE = {
@@ -27,28 +30,87 @@ const HANDLE_STYLES_OVERRIDE = {
 	left: undefined,
 };
 
+/**
+ * Checks if the current width is at the max width.
+ *
+ * @param {number} currentWidth   - The current width of the editor.
+ * @param {number} containerWidth - The width of the container.
+ * @param {number} tolerance      - The tolerance for the max width in pixels.
+ * @return {boolean} - True if the current width is at the max width, false otherwise.
+ */
+function isAtMaxWidth( currentWidth, containerWidth, tolerance = 0 ) {
+	return containerWidth > 0 && currentWidth >= containerWidth - tolerance;
+}
+
 function ResizableEditor( { className, enableResizing, height, children } ) {
-	const [ width, setWidth ] = useState( '100%' );
+	const [ isResizing, setIsResizing ] = useState( false );
+	const { setCanvasWidth } = unlock( useDispatch( editorStore ) );
+	const canvasWidth = useSelect(
+		( select ) => {
+			if ( ! enableResizing ) {
+				return undefined;
+			}
+			const { getCanvasWidth } = unlock( select( editorStore ) );
+			return getCanvasWidth();
+		},
+		[ enableResizing ]
+	);
+
 	const resizableRef = useRef();
-	const resizeWidthBy = useCallback( ( deltaPixels ) => {
-		if ( resizableRef.current ) {
-			setWidth( resizableRef.current.offsetWidth + deltaPixels );
-		}
-	}, [] );
+	const resizeWidthBy = useCallback(
+		( deltaPixels ) => {
+			if ( resizableRef.current ) {
+				const _isAtMaxWidth = isAtMaxWidth(
+					resizableRef.current.offsetWidth + deltaPixels,
+					resizableRef.current.parentElement?.offsetWidth ?? 0,
+					80
+				);
+				setCanvasWidth(
+					_isAtMaxWidth
+						? undefined
+						: resizableRef.current.offsetWidth + deltaPixels
+				);
+			}
+		},
+		[ setCanvasWidth ]
+	);
+
+	const updateCanvasWidth = useCallback(
+		( element ) => {
+			const currentWidth = element.offsetWidth;
+			const containerWidth = element.parentElement?.offsetWidth ?? 0;
+			setCanvasWidth(
+				isAtMaxWidth( currentWidth, containerWidth, 80 )
+					? undefined
+					: currentWidth
+			);
+		},
+		[ setCanvasWidth ]
+	);
+
 	return (
 		<ResizableBox
 			className={ clsx( 'editor-resizable-editor', className, {
 				'is-resizable': enableResizing,
+				'is-resizing': isResizing,
 			} ) }
 			ref={ ( api ) => {
 				resizableRef.current = api?.resizable;
 			} }
 			size={ {
-				width: enableResizing ? width : '100%',
+				width:
+					enableResizing && canvasWidth ? canvasWidth + 'px' : '100%',
 				height: enableResizing && height ? height : '100%',
 			} }
+			onResizeStart={ () => {
+				setIsResizing( true );
+			} }
+			onResize={ ( event, direction, element ) => {
+				updateCanvasWidth( element );
+			} }
 			onResizeStop={ ( event, direction, element ) => {
-				setWidth( element.style.width );
+				setIsResizing( false );
+				updateCanvasWidth( element );
 			} }
 			minWidth={ 300 }
 			maxWidth="100%"

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

@@ -2,6 +2,13 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
+// Don't apply transition when resized using the resizer handle.
+.editor-resizable-editor:not(.is-resizing) {
+	@media (prefers-reduced-motion: no-preference) {
+		transition: width 0.2s ease-out;
+	}
+}
+
 // To hide the horizontal scrollbar and show the drag handle on the
 // left and right of the container.
 .editor-resizable-editor.is-resizable {

package/src/components/sidebar/dataform-post-summary.js

@@ -13,6 +13,7 @@ import { useViewConfig } from '@wordpress/views';
  * Internal dependencies
  */
 import PostCardPanel from '../post-card-panel';
+import PluginPostStatusInfo from '../plugin-post-status-info';
 import PostPanelSection from '../post-panel-section';
 import { store as editorStore } from '../../store';
 import PostTrash from '../post-trash';
@@ -394,7 +395,18 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 					onChange={ onChange }
 				/>
 				{ ! isPostStatusRemoved && (
-					<PostTrash onActionPerformed={ onActionPerformed } />
+					<>
+						<PluginPostStatusInfo.Slot>
+							{ ( fills ) =>
+								fills.length > 0 && (
+									<Stack direction="column" gap="xs">
+										{ fills }
+									</Stack>
+								)
+							}
+						</PluginPostStatusInfo.Slot>
+						<PostTrash onActionPerformed={ onActionPerformed } />
+					</>
 				) }
 			</Stack>
 		</PostPanelSection>

package/src/components/sidebar/index.js

@@ -20,6 +20,7 @@ import PatternOverridesPanel from '../pattern-overrides-panel';
 import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
 import PluginSidebar from '../plugin-sidebar';
 import PostSummary from './post-summary';
+import DataFormPostSummary from './dataform-post-summary';
 import PostRevisionSummary from './post-revision-summary';
 import PostTaxonomiesPanel from '../post-taxonomies/panel';
 import PostTransformPanel from '../post-transform-panel';
@@ -32,11 +33,6 @@ import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-side
 import { sidebars } from './constants';
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
-import {
-	NAVIGATION_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-	TEMPLATE_POST_TYPE,
-} from '../../store/constants';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
@@ -47,7 +43,6 @@ const SidebarContent = ( {
 	keyboardShortcut,
 	onActionPerformed,
 	extraPanels,
-	postType,
 } ) => {
 	const tabListRef = useRef( null );
 	// Because `PluginSidebar` renders a `ComplementaryArea`, we
@@ -89,15 +84,20 @@ const SidebarContent = ( {
 	if ( isRevisionsMode ) {
 		tabContent = <PostRevisionSummary />;
 	} else {
+		const isDataFormInspectorEnabled =
+			window?.__experimentalDataFormInspector;
 		tabContent = (
 			<>
-				<PostSummary onActionPerformed={ onActionPerformed } />
+				{ isDataFormInspectorEnabled ? (
+					<DataFormPostSummary
+						onActionPerformed={ onActionPerformed }
+					/>
+				) : (
+					<PostSummary onActionPerformed={ onActionPerformed } />
+				) }
 				<PluginDocumentSettingPanel.Slot />
 				<TemplateContentPanel />
-				{ window?.__experimentalDataFormInspector &&
-					[ 'page', 'post' ].includes( postType ) && (
-						<TemplateActionsPanel />
-					) }
+				{ isDataFormInspectorEnabled && <TemplateActionsPanel /> }
 				<TemplatePartContentPanel />
 				<PostTransformPanel />
 				<PostTaxonomiesPanel />
@@ -144,42 +144,29 @@ const SidebarContent = ( {
 
 const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 	useAutoSwitchEditorSidebars();
-	const { tabName, keyboardShortcut, showSummary, postType } = useSelect(
-		( select ) => {
-			const shortcut = select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/editor/toggle-sidebar' );
-
-			const sidebar =
-				select( interfaceStore ).getActiveComplementaryArea( 'core' );
-			const _isEditorSidebarOpened = [
-				sidebars.block,
-				sidebars.document,
-			].includes( sidebar );
-			let _tabName = sidebar;
-			if ( ! _isEditorSidebarOpened ) {
-				_tabName = !! select(
-					blockEditorStore
-				).getBlockSelectionStart()
-					? sidebars.block
-					: sidebars.document;
-			}
+	const { tabName, keyboardShortcut } = useSelect( ( select ) => {
+		const shortcut = select(
+			keyboardShortcutsStore
+		).getShortcutRepresentation( 'core/editor/toggle-sidebar' );
 
-			const _postType = select( editorStore ).getCurrentPostType();
+		const sidebar =
+			select( interfaceStore ).getActiveComplementaryArea( 'core' );
+		const _isEditorSidebarOpened = [
+			sidebars.block,
+			sidebars.document,
+		].includes( sidebar );
+		let _tabName = sidebar;
+		if ( ! _isEditorSidebarOpened ) {
+			_tabName = !! select( blockEditorStore ).getBlockSelectionStart()
+				? sidebars.block
+				: sidebars.document;
+		}
 
-			return {
-				tabName: _tabName,
-				keyboardShortcut: shortcut,
-				showSummary: ! [
-					TEMPLATE_POST_TYPE,
-					TEMPLATE_PART_POST_TYPE,
-					NAVIGATION_POST_TYPE,
-				].includes( _postType ),
-				postType: _postType,
-			};
-		},
-		[]
-	);
+		return {
+			tabName: _tabName,
+			keyboardShortcut: shortcut,
+		};
+	}, [] );
 
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
@@ -201,10 +188,8 @@ const Sidebar = ( { extraPanels, onActionPerformed } ) => {
 			<SidebarContent
 				tabName={ tabName }
 				keyboardShortcut={ keyboardShortcut }
-				showSummary={ showSummary }
 				onActionPerformed={ onActionPerformed }
 				extraPanels={ extraPanels }
-				postType={ postType }
 			/>
 		</Tabs>
 	);

package/src/components/sidebar/post-summary.js

@@ -7,7 +7,6 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import DataFormPostSummary from './dataform-post-summary';
 import PluginPostStatusInfo from '../plugin-post-status-info';
 import PostAuthorPanel from '../post-author/panel';
 import PostCardPanel from '../post-card-panel';
@@ -37,22 +36,6 @@ import PostTrash from '../post-trash';
 const PANEL_NAME = 'post-status';
 
 export default function PostSummary( { onActionPerformed } ) {
-	const postType = useSelect(
-		( select ) => select( editorStore ).getCurrentPostType(),
-		[]
-	);
-	if (
-		window?.__experimentalDataFormInspector &&
-		[ 'page', 'post', 'wp_template', 'wp_template_part' ].includes(
-			postType
-		)
-	) {
-		return <DataFormPostSummary onActionPerformed={ onActionPerformed } />;
-	}
-	return <ClassicPostSummary onActionPerformed={ onActionPerformed } />;
-}
-
-function ClassicPostSummary( { onActionPerformed } ) {
 	const { isRemovedPostStatusPanel, postType, postId } = useSelect(
 		( select ) => {
 			// We use isEditorPanelRemoved to hide the panel if it was programmatically removed. We do

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

@@ -3,7 +3,7 @@
 
 .editor-styles-canvas {
 	height: 100%;
-	padding: $grid-unit-20;
+	padding: $grid-unit-30;
 
 	// This is the gray background color that's applied behind "isolation mode".
 	// The color normally comes from .editor-visual-editor, but that class is missing here.
@@ -19,7 +19,6 @@
 
 .editor-styles-canvas__section {
 	background: $white; // Fallback color, overridden by JavaScript.
-	border-radius: $radius-large;
 	bottom: 0;
 	left: 0;
 	overflow: hidden;

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

@@ -14,7 +14,6 @@ import {
 	useSettings,
 	RecursionProvider,
 	privateApis as blockEditorPrivateApis,
-	__experimentalUseResizeCanvas as useResizeCanvas,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -112,6 +111,7 @@ function VisualEditor( {
 		postType,
 		isPreview,
 		styles,
+		hasCanvasWidth,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostId,
@@ -120,6 +120,7 @@ function VisualEditor( {
 			getEditorSettings,
 			getRenderingMode,
 			getDeviceType,
+			getCanvasWidth,
 		} = unlock( select( editorStore ) );
 		const { getPostType, getEditedEntityRecord } = select( coreStore );
 		const postTypeSlug = getCurrentPostType();
@@ -161,6 +162,7 @@ function VisualEditor( {
 			postType: postTypeSlug,
 			isPreview: editorSettings.isPreviewMode,
 			styles: editorSettings.styles,
+			hasCanvasWidth: getCanvasWidth() !== undefined,
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -185,7 +187,6 @@ function VisualEditor( {
 	}, [] );
 
 	const localRef = useRef();
-	const deviceStyles = useResizeCanvas( deviceType );
 	const [ globalLayoutSettings ] = useSettings( 'layout' );
 
 	// fallbackLayout is used if there is no Post Content,
@@ -319,17 +320,19 @@ function VisualEditor( {
 		.is-root-container.alignfull:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: none;}`;
 
 	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 &&
-		// Disable resizing in zoomed-out mode.
-		! isZoomedOut;
+			// Disable in previews / view mode.
+			! isPreview &&
+			// Disable resizing in mobile viewport.
+			! isMobileViewport &&
+			// Disable resizing in zoomed-out mode.
+			! isZoomedOut ) ||
+		// When the canvas has an explicit width, always allow resizing.
+		hasCanvasWidth;
 
 	const isNavigationPreview = postType === NAVIGATION_POST_TYPE && isPreview;
 
@@ -394,8 +397,12 @@ function VisualEditor( {
 				'edit-post-visual-editor',
 				className,
 				{
-					'has-padding': isFocusedEntity || enableResizing,
-					'is-resizable': enableResizing,
+					// Vertical padding frames a width-constrained canvas
+					// (device preview or after a resize) as a centered preview.
+					'has-vertical-padding': isFocusedEntity || hasCanvasWidth,
+					// Horizontal padding leaves room for the resize handles
+					// that appear on the left/right of a resizable canvas.
+					'has-horizontal-padding': isFocusedEntity || enableResizing,
 					'is-iframed': ! disableIframe,
 				}
 			) }
@@ -409,10 +416,7 @@ function VisualEditor( {
 					height="100%"
 					iframeProps={ {
 						...iframeProps,
-						style: {
-							...iframeProps?.style,
-							...deviceStyles,
-						},
+						style: iframeProps?.style,
 					} }
 				>
 					{ themeSupportsLayout &&

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

@@ -3,6 +3,7 @@
 .editor-visual-editor {
 	position: relative;
 	display: flex;
+	max-height: 100%;
 
 	// This duplicates the iframe background but it's necessary in some situations
 	// when the iframe doesn't cover the whole canvas
@@ -19,12 +20,18 @@
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 
-	&.is-resizable {
-		max-height: 100%;
+	@media (prefers-reduced-motion: no-preference) {
+		transition: padding 0.2s ease-out;
 	}
 
-	&.has-padding {
-		padding: $grid-unit-30 $grid-unit-30 0;
+	&.has-vertical-padding {
+		padding-top: $grid-unit-30;
+		padding-bottom: $grid-unit-30;
+	}
+
+	&.has-horizontal-padding {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
 	}
 
 	// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the