@wordpress/block-editor 15.14.1-next.v.202603102151.0 → 15.15.0

package/src/components/iframe/index.js

@@ -8,12 +8,7 @@ import clsx from 'clsx';
  */
 import { useState, createPortal, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import {
-	useMergeRefs,
-	useRefEffect,
-	useDisabled,
-	useViewportMatch,
-} from '@wordpress/compose';
+import { useMergeRefs, useRefEffect, useDisabled } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
@@ -25,8 +20,6 @@ import { getCompatibilityStyles } from './get-compatibility-styles';
 import { useScaleCanvas } from './use-scale-canvas';
 import { store as blockEditorStore } from '../../store';
 
-const ViewportWidthProvider = useViewportMatch.__experimentalWidthProvider;
-
 function bubbleEvent( event, Constructor, frame ) {
 	const init = {};
 
@@ -271,7 +264,6 @@ function Iframe( {
 	const {
 		contentResizeListener,
 		containerResizeListener,
-		containerWidth,
 		isZoomedOut,
 		scaleContainerWidth,
 	} = useScaleCanvas( {
@@ -368,9 +360,7 @@ function Iframe( {
 						>
 							{ contentResizeListener }
 							<StyleProvider document={ iframeDocument }>
-								<ViewportWidthProvider value={ containerWidth }>
-									{ children }
-								</ViewportWidthProvider>
+								{ children }
 							</StyleProvider>
 						</body>,
 						iframeDocument.documentElement

package/src/components/iframe/use-scale-canvas.js

@@ -484,7 +484,6 @@ export function useScaleCanvas( {
 	return {
 		isZoomedOut,
 		scaleContainerWidth,
-		containerWidth,
 		contentResizeListener,
 		containerResizeListener,
 	};

package/src/components/link-control/style.scss

@@ -18,12 +18,14 @@ $block-editor-link-control-number-of-actions: 1;
 
 .block-editor-link-control {
 	position: relative;
-	min-width: $modal-min-width;
+	// TODO: Replace with a --wpds-dimension-surface-width-* token.
+	min-width: 350px;
 
 	.components-popover__content & {
 		min-width: auto;
 		width: 90vw;
-		max-width: $modal-min-width;
+		// TODO: Replace with a --wpds-dimension-surface-width-* token.
+		max-width: 350px;
 	}
 
 	.show-icon-labels & {

package/src/components/provider/index.js

@@ -121,7 +121,8 @@ function mediaUpload(
 			onSuccess?.( attachments );
 		},
 		onBatchSuccess,
-		onError: ( { message } ) => onError( message ),
+		onError: ( error ) =>
+			onError( typeof error === 'string' ? error : error?.message ?? '' ),
 		additionalData,
 		allowedTypes,
 	} );

package/src/components/provider/use-media-upload-settings.js

@@ -15,6 +15,7 @@ function useMediaUploadSettings( settings = {} ) {
 		() => ( {
 			mediaUpload: settings.mediaUpload,
 			mediaSideload: settings.mediaSideload,
+			mediaFinalize: settings.mediaFinalize,
 			maxUploadFileSize: settings.maxUploadFileSize,
 			allowedMimeTypes: settings.allowedMimeTypes,
 			allImageSizes: settings.allImageSizes,

package/src/components/url-popover/style.scss

@@ -65,7 +65,8 @@
 	min-width: 150px;
 	// Avoids the popover from growing too wide when the URL is long.
 	// See https://github.com/WordPress/gutenberg/issues/58599
-	max-width: $modal-min-width;
+	// TODO: Replace with a --wpds-dimension-surface-width-* token.
+	max-width: 350px;
 
 	&.has-invalid-link {
 		color: $alert-red;
@@ -75,7 +76,8 @@
 .block-editor-url-popover__expand-on-click {
 	display: flex;
 	align-items: center;
-	min-width: $modal-min-width;
+	// TODO: Replace with a --wpds-dimension-surface-width-* token.
+	min-width: 350px;
 	white-space: nowrap;
 
 	.text {

package/src/hooks/block-fields/media/index.js

@@ -7,12 +7,15 @@ import {
 	__experimentalGrid as Grid,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { focus } from '@wordpress/dom';
+import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	audio as audioIcon,
 	image as imageIcon,
 	media as mediaIcon,
 	video as videoIcon,
+	reset as resetIcon,
 } from '@wordpress/icons';
 
 /**
@@ -24,6 +27,23 @@ import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement
 import { getMediaSelectKey } from '../../../store/private-keys';
 import { store as blockEditorStore } from '../../../store';
 
+/**
+ * Focuses the toggle button.
+ *
+ * @param {Object} containerRef - ref object containing current element
+ */
+const focusToggleButton = ( containerRef ) => {
+	// Use requestAnimationFrame to ensure DOM updates are complete.
+	window.requestAnimationFrame( () => {
+		const [ toggleButton ] = focus.tabbable.find( containerRef?.current );
+		if ( ! toggleButton ) {
+			return;
+		}
+
+		toggleButton.focus();
+	} );
+};
+
 function MediaThumbnail( { data, field, attachment, config } ) {
 	const { allowedTypes = [], multiple = false } = config || {};
 
@@ -36,8 +56,8 @@ function MediaThumbnail( { data, field, attachment, config } ) {
 			<div className="block-editor-content-only-controls__media-thumbnail">
 				<img
 					alt=""
-					width={ 24 }
-					height={ 24 }
+					width={ 20 }
+					height={ 20 }
 					src={
 						attachment.media_type === 'image'
 							? attachment.source_url
@@ -55,7 +75,7 @@ function MediaThumbnail( { data, field, attachment, config } ) {
 		if ( allowedTypes[ 0 ] === 'image' && url ) {
 			return (
 				<div className="block-editor-content-only-controls__media-thumbnail">
-					<img alt="" width={ 24 } height={ 24 } src={ url } />
+					<img alt="" width={ 20 } height={ 20 } src={ url } />
 				</div>
 			);
 		}
@@ -72,11 +92,11 @@ function MediaThumbnail( { data, field, attachment, config } ) {
 		}
 
 		if ( icon ) {
-			return <Icon icon={ icon } size={ 24 } />;
+			return <Icon icon={ icon } size={ 20 } />;
 		}
 	}
 
-	return <Icon icon={ mediaIcon } size={ 24 } />;
+	return <Icon icon={ mediaIcon } size={ 20 } />;
 }
 
 export default function Media( { data, field, onChange, config = {} } ) {
@@ -116,117 +136,141 @@ export default function Media( { data, field, onChange, config = {} } ) {
 	if ( allowedTypes.length === 1 ) {
 		const allowedType = allowedTypes[ 0 ];
 		if ( allowedType === 'image' ) {
-			chooseItemLabel = __( 'Choose an image…' );
+			chooseItemLabel = __( 'Image' );
 		} else if ( allowedType === 'video' ) {
-			chooseItemLabel = __( 'Choose a video…' );
+			chooseItemLabel = __( 'Video' );
 		} else if ( allowedType === 'application' ) {
-			chooseItemLabel = __( 'Choose a file…' );
+			chooseItemLabel = __( 'File' );
 		} else {
-			chooseItemLabel = __( 'Choose a media item…' );
+			chooseItemLabel = __( 'Media' );
 		}
 	} else {
-		chooseItemLabel = __( 'Choose a media item…' );
+		chooseItemLabel = __( 'Media' );
 	}
+	const containerRef = useRef();
 
 	return (
 		<MediaUploadCheck>
-			<MediaReplaceFlow
-				className="block-editor-content-only-controls__media-replace-flow"
-				allowedTypes={ allowedTypes }
-				mediaId={ id }
-				mediaURL={ url }
-				multiple={ multiple }
-				popoverProps={ popoverProps }
-				onReset={ () => {
-					onChange(
-						field.setValue( {
-							item: data,
-							value: {},
-						} )
-					);
-				} }
-				{ ...( useFeaturedImage && {
-					useFeaturedImage: !! value?.featuredImage,
-					onToggleFeaturedImage: () => {
+			<div
+				ref={ containerRef }
+				className="block-editor-content-only-controls"
+			>
+				<MediaReplaceFlow
+					className="block-editor-content-only-controls__media-replace-flow"
+					allowedTypes={ allowedTypes }
+					mediaId={ id }
+					mediaURL={ url }
+					multiple={ multiple }
+					popoverProps={ popoverProps }
+					onReset={ () => {
 						onChange(
 							field.setValue( {
 								item: data,
-								value: {
-									featuredImage: ! value?.featuredImage,
-								},
+								value: {},
 							} )
 						);
-					},
-				} ) }
-				onSelect={ ( selectedMedia ) => {
-					if ( selectedMedia.id && selectedMedia.url ) {
-						const newValue = {
-							...selectedMedia,
-							mediaType: selectedMedia.media_type,
-						};
-
-						// Turn off featured image when manually selecting media
-						if ( useFeaturedImage ) {
-							newValue.featuredImage = false;
-						}
+					} }
+					{ ...( useFeaturedImage && {
+						useFeaturedImage: !! value?.featuredImage,
+						onToggleFeaturedImage: () => {
+							onChange(
+								field.setValue( {
+									item: data,
+									value: {
+										featuredImage: ! value?.featuredImage,
+									},
+								} )
+							);
+						},
+					} ) }
+					onSelect={ ( selectedMedia ) => {
+						if ( selectedMedia.id && selectedMedia.url ) {
+							const newValue = {
+								...selectedMedia,
+								mediaType: selectedMedia.media_type,
+							};
 
-						onChange(
-							field.setValue( {
-								item: data,
-								value: newValue,
-							} )
-						);
-					}
-				} }
-				renderToggle={ ( buttonProps ) => (
-					<Button
-						__next40pxDefaultSize
-						className="block-editor-content-only-controls__media"
-						{ ...buttonProps }
-					>
-						<Grid
-							rowGap={ 0 }
-							columnGap={ 8 }
-							templateColumns="24px 1fr"
-							className="block-editor-content-only-controls__media-row"
+							// Turn off featured image when manually selecting media
+							if ( useFeaturedImage ) {
+								newValue.featuredImage = false;
+							}
+
+							onChange(
+								field.setValue( {
+									item: data,
+									value: newValue,
+								} )
+							);
+						}
+					} }
+					renderToggle={ ( buttonProps ) => (
+						<Button
+							__next40pxDefaultSize
+							className="block-editor-content-only-controls__media"
+							{ ...buttonProps }
 						>
-							{ url && (
-								<>
-									<MediaThumbnail
-										attachment={ attachment }
-										field={ field }
-										data={ data }
-										config={ config }
-									/>
-									<span className="block-editor-content-only-controls__media-title">
-										{
-											// TODO - truncate long titles or url smartly (e.g. show filename).
-											attachment?.title?.raw &&
-											attachment?.title?.raw !== ''
-												? attachment?.title?.raw
-												: url
-										}
-									</span>
-								</>
-							) }
-							{ ! url && (
-								<>
-									<span
-										className="block-editor-content-only-controls__media-placeholder"
-										style={ {
-											width: '24px',
-											height: '24px',
-										} }
-									/>
-									<span className="block-editor-content-only-controls__media-title">
-										{ chooseItemLabel }
-									</span>
-								</>
-							) }
-						</Grid>
-					</Button>
+							<Grid
+								rowGap={ 0 }
+								columnGap={ 8 }
+								templateColumns="20px 1fr"
+								className="block-editor-content-only-controls__media-row"
+							>
+								{ url && (
+									<>
+										<MediaThumbnail
+											attachment={ attachment }
+											field={ field }
+											data={ data }
+											config={ config }
+										/>
+										<span className="block-editor-content-only-controls__media-title">
+											{
+												// TODO - truncate long titles or url smartly (e.g. show filename).
+												attachment?.title?.raw &&
+												attachment?.title?.raw !== ''
+													? attachment?.title?.raw
+													: url
+											}
+										</span>
+									</>
+								) }
+								{ ! url && (
+									<>
+										<span
+											className="block-editor-content-only-controls__media-placeholder"
+											style={ {
+												width: '20px',
+												height: '20px',
+											} }
+										/>
+										<span className="block-editor-content-only-controls__media-title">
+											{ chooseItemLabel }
+										</span>
+									</>
+								) }
+							</Grid>
+						</Button>
+					) }
+				/>
+				{ url && (
+					<Button
+						label={ __( 'Reset' ) }
+						className="block-editor-content-only-controls__media-reset"
+						size="small"
+						icon={ resetIcon }
+						onClick={ () => {
+							onChange(
+								field.setValue( {
+									item: data,
+									value: {},
+								} )
+							);
+
+							focusToggleButton( containerRef );
+						} }
+					/>
 				) }
-			/>
+			</div>
 		</MediaUploadCheck>
 	);
 }

package/src/hooks/block-fields/media/styles.scss

@@ -4,7 +4,7 @@
 .block-editor-content-only-controls__media {
 	width: 100%;
 	box-shadow: inset 0 0 0 $border-width $gray-400;
-	padding: $grid-unit-10;
+	padding-right: $grid-unit-40;
 
 	&:focus:not(:disabled) {
 		// Allow smooth transition between focused and unfocused box-shadow states.
@@ -41,10 +41,11 @@
 }
 
 .block-editor-content-only-controls__media-thumbnail {
-	width: 24px;
-	height: 24px;
+	width: 20px;
+	height: 20px;
 	border-radius: $radius-small;
 	align-self: center;
+	overflow: hidden;
 
 	img {
 		width: 100% !important;
@@ -52,3 +53,30 @@
 		object-fit: cover;
 	}
 }
+
+.block-editor-content-only-controls {
+	position: relative;
+}
+
+.block-editor-content-only-controls__media-reset {
+	position: absolute;
+	right: 0;
+	top: $grid-unit;
+	margin: auto $grid-unit auto;
+	opacity: 0;
+	border-radius: $radius-small;
+	@media not ( prefers-reduced-motion ) {
+		transition: opacity 0.1s ease-in-out;
+	}
+
+	.block-editor-content-only-controls:hover &,
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
+	}
+}

package/src/private-apis.js

@@ -48,6 +48,7 @@ import {
 	deviceTypeKey,
 	isIsolatedEditorKey,
 	isNavigationOverlayContextKey,
+	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
@@ -130,6 +131,7 @@ lock( privateApis, {
 	deviceTypeKey,
 	isIsolatedEditorKey,
 	isNavigationOverlayContextKey,
+	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
 	useBlockElement,
 	useBlockElementRef,

package/src/store/private-keys.js

@@ -10,4 +10,5 @@ export const deviceTypeKey = Symbol( 'deviceTypeKey' );
 export const isNavigationOverlayContextKey = Symbol(
 	'isNavigationOverlayContext'
 );
+export const isNavigationPostEditorKey = Symbol( 'isNavigationPostEditor' );
 export const mediaUploadOnSuccessKey = Symbol( 'mediaUploadOnSuccess' );

package/src/store/private-selectors.js

@@ -501,10 +501,13 @@ function isSectionBlockCandidate( state, clientId ) {
 	const disableContentOnlyForUnsyncedPatterns =
 		state.settings?.disableContentOnlyForUnsyncedPatterns;
 
+	const disableContentOnlyForTemplateParts =
+		state.settings?.disableContentOnlyForTemplateParts;
+
 	if (
 		( ( ! disableContentOnlyForUnsyncedPatterns &&
 			attributes?.metadata?.patternName ) ||
-			isTemplatePart ) &&
+			( isTemplatePart && ! disableContentOnlyForTemplateParts ) ) &&
 		! isIsolatedEditor
 	) {
 		return true;

package/src/store/reducer.js

@@ -2279,9 +2279,6 @@ function openedListViewPanels(
 			} );
 			return hasChanges ? { ...state, panels: newPanels } : state;
 		}
-		case 'RESET_BLOCKS':
-			// Clear all panel state when blocks are reset
-			return { allOpen: false, panels: {} };
 	}
 	return state;
 }
@@ -2550,10 +2547,15 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 						state.blocks.attributes.get( clientId )?.metadata
 							?.patternName
 			  );
+	const disableContentOnlyForTemplateParts =
+		state.settings?.disableContentOnlyForTemplateParts;
+
 	const contentOnlyParents = [
 		...contentOnlyTemplateLockedClientIds,
 		...unsyncedPatternClientIds,
-		...( isIsolatedEditor ? [] : templatePartClientIds ),
+		...( isIsolatedEditor || disableContentOnlyForTemplateParts
+			? []
+			: templatePartClientIds ),
 	];
 
 	traverseBlockTree( state, treeClientId, ( block ) => {
@@ -3072,7 +3074,8 @@ export function withDerivedBlockEditingModes( reducer ) {
 			case 'UPDATE_SETTINGS': {
 				// Recompute the entire tree if the section root,
 				// the effective disableContentOnlyForUnsyncedPatterns value,
-				// or the isIsolatedEditor value changes.
+				// the isIsolatedEditor value, or the
+				// disableContentOnlyForTemplateParts value changes.
 				// These are all values that affect the computation.
 				if (
 					state?.settings?.[ sectionRootClientIdKey ] !==
@@ -3082,7 +3085,10 @@ export function withDerivedBlockEditingModes( reducer ) {
 						!! nextState?.settings
 							?.disableContentOnlyForUnsyncedPatterns ||
 					!! state?.settings?.[ isIsolatedEditorKey ] !==
-						!! nextState?.settings?.[ isIsolatedEditorKey ]
+						!! nextState?.settings?.[ isIsolatedEditorKey ] ||
+					!! state?.settings?.disableContentOnlyForTemplateParts !==
+						!! nextState?.settings
+							?.disableContentOnlyForTemplateParts
 				) {
 					return {
 						...nextState,

package/src/store/selectors.js

@@ -1705,9 +1705,21 @@ const canInsertBlockTypeUnmemoized = (
 	}
 
 	const blockEditingMode = getBlockEditingMode( state, rootClientId ?? '' );
+
+	// Compute section context early so the disabled check below can use it.
+	const isParentSectionBlock = !! isSectionBlock( state, rootClientId );
+	const sectionClientId = isParentSectionBlock
+		? rootClientId
+		: getParentSectionBlock( state, rootClientId );
+	const isWithinSection = !! sectionClientId;
+
+	// Disabled containers reject all blocks, with one exception: within a
+	// section, the default block (paragraph) is allowed through so it can
+	// reach the content-insertion logic further down (lines 1748-1772)
+	// which conditionally permits it where a sibling paragraph exists.
 	if (
 		blockEditingMode === 'disabled' &&
-		blockName !== getDefaultBlockName()
+		( ! isWithinSection || blockName !== getDefaultBlockName() )
 	) {
 		return false;
 	}
@@ -1723,11 +1735,6 @@ const canInsertBlockTypeUnmemoized = (
 	// It shouldn't be possible to insert inside a section block unless in
 	// some cases when the block is a content block.
 	const isContentRoleBlock = isContentBlock( blockName );
-	const isParentSectionBlock = !! isSectionBlock( state, rootClientId );
-	const sectionClientId = isParentSectionBlock
-		? rootClientId
-		: getParentSectionBlock( state, rootClientId );
-	const isWithinSection = !! sectionClientId;
 	if ( isWithinSection && ! isContentRoleBlock ) {
 		return false;
 	}