@wordpress/block-editor 15.13.2-next.v.202602241322.0 → 15.13.2

package/src/components/block-variation-transforms/index.js

@@ -146,41 +146,46 @@ function VariationsToggleGroupControl( {
 
 function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { activeBlockVariation, variations, isContentOnly, isSection } =
-		useSelect(
-			( select ) => {
-				const { getActiveBlockVariation, getBlockVariations } =
-					select( blocksStore );
-
-				const {
-					getBlockName,
-					getBlockAttributes,
-					getBlockEditingMode,
-					isSectionBlock,
-				} = unlock( select( blockEditorStore ) );
-
-				const name = blockClientId && getBlockName( blockClientId );
-
-				const { hasContentRoleAttribute } = unlock(
-					select( blocksStore )
-				);
-				const isContentBlock = hasContentRoleAttribute( name );
-
-				return {
-					activeBlockVariation: getActiveBlockVariation(
-						name,
-						getBlockAttributes( blockClientId ),
-						'transform'
-					),
-					variations: name && getBlockVariations( name, 'transform' ),
-					isContentOnly:
-						getBlockEditingMode( blockClientId ) ===
-							'contentOnly' && ! isContentBlock,
-					isSection: isSectionBlock( blockClientId ),
-				};
-			},
-			[ blockClientId ]
-		);
+	const {
+		activeBlockVariation,
+		variations,
+		canEdit,
+		isContentOnly,
+		isSection,
+	} = useSelect(
+		( select ) => {
+			const { getActiveBlockVariation, getBlockVariations } =
+				select( blocksStore );
+
+			const {
+				getBlockName,
+				getBlockAttributes,
+				getBlockEditingMode,
+				isSectionBlock,
+			} = unlock( select( blockEditorStore ) );
+			const { canEditBlock } = select( blockEditorStore );
+
+			const name = blockClientId && getBlockName( blockClientId );
+
+			const { hasContentRoleAttribute } = unlock( select( blocksStore ) );
+			const isContentBlock = hasContentRoleAttribute( name );
+
+			return {
+				activeBlockVariation: getActiveBlockVariation(
+					name,
+					getBlockAttributes( blockClientId ),
+					'transform'
+				),
+				variations: name && getBlockVariations( name, 'transform' ),
+				canEdit: canEditBlock( blockClientId ),
+				isContentOnly:
+					getBlockEditingMode( blockClientId ) === 'contentOnly' &&
+					! isContentBlock,
+				isSection: isSectionBlock( blockClientId ),
+			};
+		},
+		[ blockClientId ]
+	);
 
 	const selectedValue = activeBlockVariation?.name;
 
@@ -205,7 +210,7 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 		} );
 	};
 
-	if ( ! variations?.length || isContentOnly || isSection ) {
+	if ( ! variations?.length || ! canEdit || isContentOnly || isSection ) {
 		return null;
 	}
 

package/src/components/block-visibility/use-block-visibility.js

@@ -14,16 +14,18 @@ import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
  * @param {Object}         options                 Parameters to avoid extra store subscriptions.
  * @param {Object|boolean} options.blockVisibility Block visibility metadata.
  * @param {string}         options.deviceType      Current device type ('desktop', 'tablet', 'mobile').
+ * @param {Window?}        options.view            Window instance in which to perform viewport matching
  * @return {Object} Object with `isBlockCurrentlyHidden` (boolean) and `currentViewport` (string) properties.
  */
 export default function useBlockVisibility( options = {} ) {
 	const {
 		blockVisibility = undefined,
 		deviceType = BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
+		view = window,
 	} = options;
 
-	const isLargerThanMobile = useViewportMatch( 'mobile', '>=' ); // >= 480px
-	const isLargerThanTablet = useViewportMatch( 'medium', '>=' ); // >= 782px
+	const isLargerThanMobile = useViewportMatch( 'mobile', '>=', view ); // >= 480px
+	const isLargerThanTablet = useViewportMatch( 'medium', '>=', view ); // >= 782px
 
 	/*
 	 * Priority:

package/src/components/block-visibility/viewport-visibility-info.js

@@ -17,6 +17,7 @@ import { unseen } from '@wordpress/icons';
 import { unlock } from '../../lock-unlock';
 import { store as blockEditorStore } from '../../store';
 import useBlockVisibility from './use-block-visibility';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import { deviceTypeKey } from '../../store/private-keys';
 import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
 
@@ -56,10 +57,16 @@ export default function ViewportVisibilityInfo( { clientId } ) {
 		[ clientId ]
 	);
 
-	// Use hook to get current viewport and if block is currently hidden (accurate viewport detection)
+	// Get the block's DOM element to derive the canvas iframe window,
+	// so viewport detection matches the actual block rendering context.
+	const blockElement = useBlockElement( clientId );
+	const rawCanvasView = blockElement?.ownerDocument?.defaultView;
+	const canvasView = rawCanvasView === null ? undefined : rawCanvasView;
+
 	const { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {
 		blockVisibility: currentBlockVisibility,
 		deviceType: selectedDeviceType,
+		view: canvasView,
 	} );
 
 	/*

package/src/components/dimensions-tool/scale-tool.js

@@ -98,14 +98,14 @@ export default function ScaleTool( {
 
 	return (
 		<ToolsPanelItem
-			label={ __( 'Scale' ) }
+			label={ _x( 'Scale', 'Image scaling options' ) }
 			isShownByDefault={ isShownByDefault }
 			hasValue={ () => displayValue !== defaultValue }
 			onDeselect={ () => onChange( defaultValue ) }
 			panelId={ panelId }
 		>
 			<ToggleGroupControl
-				label={ __( 'Scale' ) }
+				label={ _x( 'Scale', 'Image scaling options' ) }
 				isBlock
 				help={ scaleHelp[ displayValue ] }
 				value={ displayValue }

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 = {};
 
@@ -274,7 +267,6 @@ function Iframe( {
 	const {
 		contentResizeListener,
 		containerResizeListener,
-		containerWidth,
 		isZoomedOut,
 		scaleContainerWidth,
 	} = useScaleCanvas( {
@@ -355,9 +347,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/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -111,14 +111,18 @@ export default function useInspectorControlsTabs(
 		tabs.push( TAB_SETTINGS );
 	}
 
-	if ( hasBlockStyles || hasStyleFills ) {
+	const { tabSettings, isPreviewMode } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return {
+			tabSettings: settings.blockInspectorTabs,
+			isPreviewMode: settings.isPreviewMode,
+		};
+	}, [] );
+
+	if ( ! isPreviewMode && ( hasBlockStyles || hasStyleFills ) ) {
 		tabs.push( TAB_STYLES );
 	}
 
-	const tabSettings = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings().blockInspectorTabs;
-	}, [] );
-
 	const showTabs = getShowTabs( blockName, tabSettings );
 	return showTabs ? tabs : EMPTY_ARRAY;
 }

package/src/components/link-picker/link-preview.js

@@ -9,6 +9,7 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { Icon, chevronDown } from '@wordpress/icons';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -50,7 +51,7 @@ export function LinkPreview( { title, url, image, badges } ) {
 							numberOfLines={ 1 }
 							className="link-preview-button__title"
 						>
-							{ title }
+							{ stripHTML( title ) }
 						</Truncate>
 						{ url && (
 							<Truncate

package/src/components/provider/index.js

@@ -20,6 +20,7 @@ import { BlockRefsProvider } from './block-refs-provider';
 import { unlock } from '../../lock-unlock';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import useMediaUploadSettings from './use-media-upload-settings';
+import { mediaUploadOnSuccessKey } from '../../store/private-keys';
 import { SelectionContext } from './selection-context';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
@@ -89,6 +90,7 @@ function shouldEnableClientSideMediaProcessing() {
  * or when adding a file to the editor via drag & drop.
  *
  * @param {WPDataRegistry} registry
+ * @param {Object}         settings          Block editor settings.
  * @param {Object}         $3                Parameters object passed to the function.
  * @param {Array}          $3.allowedTypes   Array with the types of media that can be uploaded, if unset all types are allowed.
  * @param {Object}         $3.additionalData Additional data to include in the request.
@@ -100,6 +102,7 @@ function shouldEnableClientSideMediaProcessing() {
  */
 function mediaUpload(
 	registry,
+	settings,
 	{
 		allowedTypes,
 		additionalData = {},
@@ -113,9 +116,13 @@ function mediaUpload(
 	void registry.dispatch( uploadStore ).addItems( {
 		files: Array.from( filesList ),
 		onChange: onFileChange,
-		onSuccess,
+		onSuccess: ( attachments ) => {
+			settings?.[ mediaUploadOnSuccessKey ]?.( attachments );
+			onSuccess?.( attachments );
+		},
 		onBatchSuccess,
-		onError: ( { message } ) => onError( message ),
+		onError: ( error ) =>
+			onError( typeof error === 'string' ? error : error?.message ?? '' ),
 		additionalData,
 		allowedTypes,
 	} );
@@ -146,16 +153,38 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		const isClientSideMediaEnabled =
 			shouldEnableClientSideMediaProcessing();
 
+		// Nested providers (e.g. from useBlockPreview) inherit settings
+		// where mediaUpload has already been replaced with the
+		// interceptor.  Detect this so we skip the replacement and
+		// MediaUploadProvider for them — see the longer comment below.
+		const isMediaUploadIntercepted =
+			!! _settings?.mediaUpload?.__isMediaUploadInterceptor;
+
 		const settings = useMemo( () => {
-			if ( isClientSideMediaEnabled && _settings?.mediaUpload ) {
+			if (
+				isClientSideMediaEnabled &&
+				_settings?.mediaUpload &&
+				! isMediaUploadIntercepted
+			) {
 				// Create a new object so that the original props.settings.mediaUpload is not modified.
+				const interceptor = mediaUpload.bind(
+					null,
+					registry,
+					_settings
+				);
+				interceptor.__isMediaUploadInterceptor = true;
 				return {
 					..._settings,
-					mediaUpload: mediaUpload.bind( null, registry ),
+					mediaUpload: interceptor,
 				};
 			}
 			return _settings;
-		}, [ _settings, registry, isClientSideMediaEnabled ] );
+		}, [
+			_settings,
+			registry,
+			isClientSideMediaEnabled,
+			isMediaUploadIntercepted,
+		] );
 
 		const { __experimentalUpdateSettings } = unlock(
 			useDispatch( blockEditorStore )
@@ -215,7 +244,21 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 			</SelectionContext.Provider>
 		);
 
-		if ( isClientSideMediaEnabled ) {
+		// MediaUploadProvider writes the mediaUpload function from
+		// _settings into the shared upload-media store so the store can
+		// hand files off to the server. useMediaUploadSettings extracts
+		// mediaUpload from the original _settings prop — *before* the
+		// interceptor replacement above — so the store receives the
+		// real server-side upload function.
+		//
+		// Only the first (outermost) provider should do this.
+		// Nested providers (e.g. from useBlockPreview in
+		// core/post-template) inherit settings that already contain
+		// the interceptor, so their MediaUploadProvider would
+		// overwrite the store's server-side function with the
+		// interceptor, causing uploads to loop instead of reaching
+		// the server.
+		if ( isClientSideMediaEnabled && ! isMediaUploadIntercepted ) {
 			return (
 				<MediaUploadProvider
 					settings={ mediaUploadSettings }

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/writing-flow/use-arrow-nav.js

@@ -115,9 +115,16 @@ export function getClosestTabbable(
 	}
 
 	function isTabCandidate( node ) {
-		// If it's a block and there are nested focusable nodes, skip because
-		// there are better candidates.
+		// If it's a block wrapper (not itself a contenteditable editing surface)
+		// and there are nested focusable nodes, skip because there are better
+		// candidates. We must not skip contenteditable nodes that happen to
+		// contain links or other focusable inline elements, since those are the
+		// correct navigation targets.
+		//
+		// See https://github.com/WordPress/gutenberg/pull/77474
+		// TODO: Consider fixing focus.tabbable
 		if (
+			node.contentEditable !== 'true' &&
 			getBlockClientId( node ) &&
 			focus.focusable
 				.find( node )

package/src/hooks/auto-inspector-controls.js

@@ -1,11 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
+import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { DataForm } from '@wordpress/dataviews';
-import { useMemo } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -14,6 +14,8 @@ import { __ } from '@wordpress/i18n';
 import InspectorControls from '../components/inspector-controls';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
+import BlockContext from '../components/block-context';
 import { generateFieldsFromAttributes } from './generate-fields-from-attributes';
 
 /**
@@ -45,9 +47,34 @@ function hasAutoGenerateControl( blockTypeAttributes ) {
 function AutoRegisterControls( { name, clientId, setAttributes } ) {
 	const blockEditingMode = useBlockEditingMode();
 
+	const blockContext = useContext( BlockContext );
+
 	const attributes = useSelect(
-		( select ) => select( blockEditorStore ).getBlockAttributes( clientId ),
-		[ clientId ]
+		( select ) => {
+			const _attributes =
+				select( blockEditorStore ).getBlockAttributes( clientId );
+			if ( ! _attributes?.metadata?.bindings ) {
+				return _attributes;
+			}
+
+			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
+			return Object.entries( _attributes.metadata.bindings ).reduce(
+				( acc, [ attribute, binding ] ) => {
+					const source = getBlockBindingsSource( binding.source );
+					if ( ! source ) {
+						return acc;
+					}
+					const values = source.getValues( {
+						select,
+						context: blockContext,
+						bindings: { [ attribute ]: binding },
+					} );
+					return { ...acc, ...values };
+				},
+				_attributes
+			);
+		},
+		[ blockContext, clientId ]
 	);
 
 	const blockType = getBlockType( name );

package/src/hooks/cross-origin-isolation.js

@@ -1,34 +1,12 @@
 /**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-import { createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Adds crossorigin and credentialless attributes to elements as needed.
+ * Adds crossorigin="anonymous" to an element if missing.
  *
  * @param {Element} el The element to modify.
  */
-function addCrossOriginAttributes( el ) {
-	// Add the crossorigin attribute if missing.
+function addCrossOriginAttribute( el ) {
 	if ( ! el.hasAttribute( 'crossorigin' ) ) {
 		el.setAttribute( 'crossorigin', 'anonymous' );
 	}
-
-	// For iframes, add the credentialless attribute.
-	if ( el.nodeName === 'IFRAME' && ! el.hasAttribute( 'credentialless' ) ) {
-		// Do not modify the iframed editor canvas.
-		if ( el.getAttribute( 'src' )?.startsWith( 'blob:' ) ) {
-			return;
-		}
-
-		el.setAttribute( 'credentialless', '' );
-
-		// Reload the iframe to ensure the new attribute is taken into account.
-		const origSrc = el.getAttribute( 'src' ) || '';
-		el.setAttribute( 'src', '' );
-		el.setAttribute( 'src', origSrc );
-	}
 }
 
 // Only add the mutation observer if the site is cross-origin isolated.
@@ -49,59 +27,18 @@ if ( window.crossOriginIsolated ) {
 						return;
 					}
 
-					el.querySelectorAll(
-						'img,source,script,video,link,iframe'
-					).forEach( ( v ) => {
-						addCrossOriginAttributes( v );
-					} );
-
-					if ( el.nodeName === 'IFRAME' ) {
-						const iframeNode = el;
-
-						/*
-						 * Sandboxed iframes should not get modified. For example embedding a tweet served in a sandboxed
-						 * iframe, the tweet itself would not be modified.
-						 */
-						const isEmbedSandboxIframe =
-							iframeNode.classList.contains(
-								'components-sandbox'
-							);
-
-						if ( ! isEmbedSandboxIframe ) {
-							iframeNode.addEventListener( 'load', () => {
-								try {
-									if (
-										iframeNode.contentDocument &&
-										iframeNode.contentDocument.body
-									) {
-										observer.observe(
-											iframeNode.contentDocument,
-											{
-												childList: true,
-												attributes: true,
-												subtree: true,
-											}
-										);
-									}
-								} catch ( e ) {
-									// Iframe may be cross-origin or otherwise inaccessible.
-									// Silently ignore these cases.
-								}
-							} );
+					el.querySelectorAll( 'source,script,video,link' ).forEach(
+						( v ) => {
+							addCrossOriginAttribute( v );
 						}
-					}
+					);
 
 					if (
-						[
-							'IMG',
-							'SOURCE',
-							'SCRIPT',
-							'VIDEO',
-							'LINK',
-							'IFRAME',
-						].includes( el.nodeName )
+						[ 'SOURCE', 'SCRIPT', 'VIDEO', 'LINK' ].includes(
+							el.nodeName
+						)
 					) {
-						addCrossOriginAttributes( el );
+						addCrossOriginAttribute( el );
 					}
 				} );
 			} );
@@ -134,39 +71,3 @@ if ( window.crossOriginIsolated ) {
 
 	startObservingBody();
 }
-
-// Only apply the embed preview filter when cross-origin isolated.
-if ( window.crossOriginIsolated ) {
-	const supportsCredentialless =
-		'credentialless' in window.HTMLIFrameElement.prototype;
-
-	const disableEmbedPreviews = createHigherOrderComponent(
-		( BlockEdit ) =>
-			function DisableEmbedPreviews( props ) {
-				if ( 'core/embed' !== props.name ) {
-					return <BlockEdit { ...props } />;
-				}
-
-				// List of embeds that do not support a preview is from packages/block-library/src/embed/variations.js.
-				const previewable =
-					supportsCredentialless &&
-					! [ 'facebook', 'smugmug' ].includes(
-						props.attributes.providerNameSlug
-					);
-
-				return (
-					<BlockEdit
-						{ ...props }
-						attributes={ { ...props.attributes, previewable } }
-					/>
-				);
-			},
-		'withDisabledEmbedPreview'
-	);
-
-	addFilter(
-		'editor.BlockEdit',
-		'media-experiments/disable-embed-previews',
-		disableEmbedPreviews
-	);
-}

package/src/hooks/custom-css.js

@@ -1,12 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useEffect, useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
 import { __, sprintf } from '@wordpress/i18n';
 import { processCSSNesting } from '@wordpress/global-styles-engine';
+import { useBlockEditingMode } from '../components/block-editing-mode';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -33,6 +35,11 @@ const EMPTY_STYLE = {};
  * @param {Object}   props.style         Block style attribute.
  */
 function CustomCSSControl( { blockName, setAttributes, style } ) {
+	const blockEditingMode = useBlockEditingMode();
+
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
 	const blockType = getBlockType( blockName );
 
 	function onChange( newStyle ) {
@@ -63,6 +70,8 @@ function CustomCSSControl( { blockName, setAttributes, style } ) {
 	);
 }
 
+const CUSTOM_CSS_WARNING_NOTICE_ID = 'custom-css-edit-warning';
+
 function CustomCSSEdit( { clientId, name, setAttributes } ) {
 	const { style, canEditCSS } = useSelect(
 		( select ) => {
@@ -107,6 +116,31 @@ function useBlockProps( { style } ) {
 		customCSS.trim().length > 0 &&
 		validateCSS( customCSS );
 
+	const canEditCSS = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().canEditCSS,
+		[]
+	);
+
+	const { createWarningNotice } = useDispatch( noticesStore );
+
+	// Show a warning notice when the user lacks edit_css and a block has
+	// custom CSS. The fixed notice ID ensures only one notice is shown
+	// regardless of how many blocks have CSS.
+	const hasCustomCSS = !! customCSS?.trim();
+	useEffect( () => {
+		if ( ! canEditCSS && hasCustomCSS ) {
+			createWarningNotice(
+				__(
+					'This post contains blocks with custom CSS. You do not have permission to edit CSS. If you save this post, the custom CSS will be removed.'
+				),
+				{
+					id: CUSTOM_CSS_WARNING_NOTICE_ID,
+					isDismissible: true,
+				}
+			);
+		}
+	}, [ canEditCSS, hasCustomCSS, createWarningNotice ] );
+
 	const customCSSIdentifier = useInstanceId(
 		CUSTOM_CSS_INSTANCE_REFERENCE,
 		'wp-custom-css'