@wordpress/block-editor 15.10.1-next.v.0 → 15.11.1-next.v.0

package/src/components/list-view/utils.js

@@ -113,8 +113,10 @@ export function focusListItem( focusClientId, treeGridElement ) {
 			resolve( null );
 		}, 3000 );
 	} ).then( ( element ) => {
-		// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
-		focus.focusable.find( element )?.[ 0 ]?.focus();
+		if ( element && element.isConnected ) {
+			// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
+			focus.focusable.find( element )?.[ 0 ]?.focus();
+		}
 	} );
 }
 

package/src/components/media-replace-flow/test/index.js

@@ -8,7 +8,7 @@ import userEvent from '@testing-library/user-event';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-
+import { SlotFillProvider } from '@wordpress/components';
 /**
  * Internal dependencies
  */
@@ -19,16 +19,18 @@ const noop = () => {};
 function TestWrapper() {
 	const [ mediaURL, setMediaURL ] = useState( 'https://example.media' );
 	return (
-		<MediaReplaceFlow
-			mediaId={ 1 }
-			mediaURL={ mediaURL }
-			allowedTypes={ [ 'png' ] }
-			accept="image/*"
-			onSelect={ noop }
-			onSelectURL={ setMediaURL }
-			onError={ noop }
-			onCloseModal={ noop }
-		/>
+		<SlotFillProvider>
+			<MediaReplaceFlow
+				mediaId={ 1 }
+				mediaURL={ mediaURL }
+				allowedTypes={ [ 'png' ] }
+				accept="image/*"
+				onSelect={ noop }
+				onSelectURL={ setMediaURL }
+				onError={ noop }
+				onCloseModal={ noop }
+			/>
+		</SlotFillProvider>
 	);
 }
 

package/src/components/provider/index.js

@@ -71,18 +71,19 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 		const mediaUploadSettings = useMediaUploadSettings( _settings );
 
-		let settings = _settings;
-
-		if ( window.__experimentalMediaProcessing && _settings.mediaUpload ) {
-			// Create a new variable so that the original props.settings.mediaUpload is not modified.
-			settings = useMemo(
-				() => ( {
+		const settings = useMemo( () => {
+			if (
+				window.__experimentalMediaProcessing &&
+				_settings?.mediaUpload
+			) {
+				// Create a new object so that the original props.settings.mediaUpload is not modified.
+				return {
 					..._settings,
 					mediaUpload: mediaUpload.bind( null, registry ),
-				} ),
-				[ _settings, registry ]
-			);
-		}
+				};
+			}
+			return _settings;
+		}, [ _settings, registry ] );
 
 		const { __experimentalUpdateSettings } = unlock(
 			useDispatch( blockEditorStore )

package/src/components/provider/test/use-block-sync.js

@@ -39,6 +39,7 @@ const TestWrapper = withRegistryProvider( ( props ) => {
 describe( 'useBlockSync hook', () => {
 	beforeAll( () => {
 		registerBlockType( 'test/test-block', {
+			apiVersion: 3,
 			title: 'Test block',
 			attributes: {
 				foo: { type: 'number' },

package/src/components/provider/with-registry-provider.js

@@ -26,7 +26,7 @@ function getSubRegistry( subRegistries, registry, useSubRegistry ) {
 
 const withRegistryProvider = createHigherOrderComponent(
 	( WrappedComponent ) =>
-		( { useSubRegistry = true, ...props } ) => {
+		function WithRegistryProvider( { useSubRegistry = true, ...props } ) {
 			const registry = useRegistry();
 			const [ subRegistries ] = useState( () => new WeakMap() );
 			const subRegistry = getSubRegistry(

package/src/components/use-block-commands/index.js

@@ -16,8 +16,6 @@ import {
 	plus as add,
 	group,
 	ungroup,
-	seen,
-	unseen,
 } from '@wordpress/icons';
 
 /**
@@ -25,7 +23,6 @@ import {
  */
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
-import { cleanEmptyObject } from '../../hooks/utils';
 
 const getTransformCommands = () =>
 	function useTransformCommands() {
@@ -160,7 +157,6 @@ const getQuickActionsCommands = () =>
 			getBlockRootClientId,
 			getBlocksByClientId,
 			canRemoveBlocks,
-			getBlockName,
 		} = useSelect( blockEditorStore );
 		const { getDefaultBlockName, getGroupingBlockName } =
 			useSelect( blocksStore );
@@ -173,7 +169,6 @@ const getQuickActionsCommands = () =>
 			duplicateBlocks,
 			insertAfterBlock,
 			insertBeforeBlock,
-			updateBlockAttributes,
 		} = useDispatch( blockEditorStore );
 
 		const onGroup = () => {
@@ -223,11 +218,6 @@ const getQuickActionsCommands = () =>
 		} );
 		const canRemove = canRemoveBlocks( clientIds );
 
-		const canToggleBlockVisibility =
-			blocks.every( ( { clientId } ) =>
-				hasBlockSupport( getBlockName( clientId ), 'visibility', true )
-			) && ! window.__experimentalHideBlocksBasedOnScreenSize;
-
 		const commands = [];
 
 		if ( canDuplicate ) {
@@ -293,37 +283,6 @@ const getQuickActionsCommands = () =>
 			} );
 		}
 
-		if ( canToggleBlockVisibility ) {
-			const hasHiddenBlock = blocks.some(
-				( block ) =>
-					block.attributes.metadata?.blockVisibility === false
-			);
-
-			commands.push( {
-				name: 'core/toggle-block-visibility',
-				label: hasHiddenBlock ? __( 'Show' ) : __( 'Hide' ),
-				callback: () => {
-					const attributesByClientId = Object.fromEntries(
-						blocks?.map( ( { clientId, attributes } ) => [
-							clientId,
-							{
-								metadata: cleanEmptyObject( {
-									...attributes?.metadata,
-									blockVisibility: hasHiddenBlock
-										? undefined
-										: false,
-								} ),
-							},
-						] )
-					);
-					updateBlockAttributes( clientIds, attributesByClientId, {
-						uniqueByBlock: true,
-					} );
-				},
-				icon: hasHiddenBlock ? seen : unseen,
-			} );
-		}
-
 		return {
 			isLoading: false,
 			commands: commands.map( ( command ) => ( {

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

@@ -1,13 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { addFilter } from '@wordpress/hooks';
-import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
+import {
+	privateApis as blocksPrivateApis,
+	getBlockType,
+} from '@wordpress/blocks';
 import {
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 import { DataForm } from '@wordpress/dataviews';
 import { useContext, useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -15,6 +17,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import BlockIcon from '../../components/block-icon';
 import useBlockDisplayTitle from '../../components/block-title/use-block-display-title';
@@ -22,34 +25,23 @@ import useBlockDisplayInformation from '../../components/use-block-display-infor
 const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 import FieldsDropdownMenu from './fields-dropdown-menu';
 import { PrivateBlockContext } from '../../components/block-list/private-block-context';
-import { PrivateInspectorControlsFill } from '../../components/inspector-controls/fill';
+import InspectorControls from '../../components/inspector-controls/fill';
 
 // controls
 import RichText from './rich-text';
 import Media from './media';
 import Link from './link';
 
-const CONTROLS = {
-	richtext: RichText,
-	media: Media,
-	link: Link,
-};
-
 /**
  * Creates a configured control component that wraps a custom control
  * and passes configuration as props.
  *
  * @param {Component} ControlComponent The React component for the control.
- * @param {string}    type             The type of control.
  * @param {Object}    config           The control configuration passed as a prop.
  *
  * @return {Function} A wrapped control component
  */
-function createConfiguredControl( ControlComponent, type, config ) {
-	if ( ! ControlComponent ) {
-		throw new Error( `Control type "${ type }" not found` );
-	}
-
+function createConfiguredControl( ControlComponent, config = {} ) {
 	return function ConfiguredControl( props ) {
 		return <ControlComponent { ...props } config={ config } />;
 	};
@@ -60,7 +52,6 @@ function createConfiguredControl( ControlComponent, type, config ) {
  * @param {Object}   props
  * @param {string}   props.clientId      The clientId of the block.
  * @param {Object}   props.blockType     The blockType definition.
- * @param {Object}   props.attributes    The block's attribute values.
  * @param {Function} props.setAttributes Action to set the block's attributes.
  * @param {boolean}  props.isCollapsed   Whether the DataForm is rendered as 'collapsed' with only the first field
  *                                       displayed by default. When collapsed a dropdown is displayed to allow
@@ -70,7 +61,6 @@ function createConfiguredControl( ControlComponent, type, config ) {
 function BlockFields( {
 	clientId,
 	blockType,
-	attributes,
 	setAttributes,
 	isCollapsed = false,
 } ) {
@@ -82,6 +72,11 @@ function BlockFields( {
 
 	const blockTypeFields = blockType?.[ fieldsKey ];
 
+	const attributes = useSelect(
+		( select ) => select( blockEditorStore ).getBlockAttributes( clientId ),
+		[ clientId ]
+	);
+
 	const computedForm = useMemo( () => {
 		if ( ! isCollapsed ) {
 			return blockType?.[ formKey ];
@@ -104,51 +99,33 @@ function BlockFields( {
 
 		return blockTypeFields.map( ( fieldDef ) => {
 			const field = {
-				id: fieldDef.id,
-				label: fieldDef.label,
-				type: fieldDef.type, // Use the field's type; DataForm will use built-in or custom Edit
+				...fieldDef,
 			};
 
-			// If the field defines a `mapping`, then custom `getValue` and `setValue`
-			// implementations are provided.
-			// These functions map from the inconsistent attribute keys found on blocks
-			// to consistent keys that the field can use internally (and back again).
-			// When `mapping` isn't provided, we can use the field API's default
-			// implementation of these functions.
-			if ( fieldDef.mapping ) {
-				field.getValue = ( { item } ) => {
-					// Extract mapped properties from the block attributes
-					const mappedValue = {};
-					Object.entries( fieldDef.mapping ).forEach(
-						( [ key, attrKey ] ) => {
-							mappedValue[ key ] = item[ attrKey ];
-						}
-					);
-					return mappedValue;
-				};
-				field.setValue = ( { value } ) => {
-					const attributeUpdates = {};
-					Object.entries( fieldDef.mapping ).forEach(
-						( [ key, attrKey ] ) => {
-							attributeUpdates[ attrKey ] = value[ key ];
-						}
-					);
-					return attributeUpdates;
-				};
-			}
-
-			// Only add custom Edit component if one exists for this type
-			const ControlComponent = CONTROLS[ fieldDef.type ];
-			if ( ControlComponent ) {
-				// Use EditConfig pattern: Edit is an object with control type and config props
-				field.Edit = createConfiguredControl(
-					ControlComponent,
-					fieldDef.type,
-					{
-						clientId,
-						fieldDef,
-					}
-				);
+			// These should be custom Edit components, not replaced here.
+			//
+			// - rich-text control: it needs clientId
+			// - link control: does not need anything extra
+			// - media control: needs the Edit config
+			if (
+				'string' === typeof fieldDef.Edit &&
+				fieldDef.Edit === 'rich-text'
+			) {
+				field.Edit = createConfiguredControl( RichText, {
+					clientId,
+				} );
+			} else if (
+				'string' === typeof fieldDef.Edit &&
+				fieldDef.Edit === 'link'
+			) {
+				field.Edit = createConfiguredControl( Link );
+			} else if (
+				'object' === typeof fieldDef.Edit &&
+				fieldDef.Edit.control === 'media'
+			) {
+				field.Edit = createConfiguredControl( Media, {
+					...fieldDef.Edit,
+				} );
 			}
 
 			return field;
@@ -216,56 +193,34 @@ function BlockFields( {
 	);
 }
 
-const withBlockFields = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const {
-			blockType,
-			isSelectionWithinCurrentSection,
-			isSectionBlock,
-			blockEditingMode,
-			isSelected,
-		} = useContext( PrivateBlockContext );
-
-		const shouldShowBlockFields =
-			window?.__experimentalContentOnlyInspectorFields;
-		const blockTypeFields = blockType?.[ fieldsKey ];
+function hasBlockFieldsSupport( blockName ) {
+	return !! (
+		window?.__experimentalContentOnlyInspectorFields &&
+		getBlockType( blockName )?.[ fieldsKey ]
+	);
+}
 
-		if ( ! shouldShowBlockFields || ! blockTypeFields?.length ) {
-			return <BlockEdit key="edit" { ...props } />;
-		}
+export function BlockFieldsPanel( props ) {
+	const { blockType, isSelectionWithinCurrentSection } =
+		useContext( PrivateBlockContext );
 
-		return (
-			<>
-				<BlockEdit key="edit" { ...props } />
-				{
-					// Display the controls of all inner blocks for section/pattern editing.
-					isSelectionWithinCurrentSection &&
-						( isSectionBlock ||
-							blockEditingMode === 'contentOnly' ) && (
-							<PrivateInspectorControlsFill
-								group="content"
-								forceDisplayControls
-							>
-								<BlockFields
-									{ ...props }
-									blockType={ blockType }
-									isCollapsed
-								/>
-							</PrivateInspectorControlsFill>
-						)
-				}
-				{ ! isSelectionWithinCurrentSection && isSelected && (
-					<PrivateInspectorControlsFill group="content">
-						<BlockFields { ...props } blockType={ blockType } />
-					</PrivateInspectorControlsFill>
-				) }
-			</>
-		);
-	}
-);
+	return (
+		<InspectorControls group="content">
+			<BlockFields
+				{ ...props }
+				blockType={ blockType }
+				isCollapsed={ isSelectionWithinCurrentSection }
+			/>
+		</InspectorControls>
+	);
+}
 
-addFilter(
-	'editor.BlockEdit',
-	'core/content-only-controls/block-fields',
-	withBlockFields
-);
+/**
+ * Export block support definition.
+ */
+export default {
+	edit: BlockFieldsPanel,
+	hasSupport: hasBlockFieldsSupport,
+	attributeKeys: [],
+	supportsPatternEditing: true,
+};

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

@@ -67,12 +67,11 @@ export function getUpdatedLinkAttributes( {
 	};
 }
 
-export default function Link( { data, field, onChange, config = {} } ) {
+export default function Link( { data, field, onChange } ) {
 	const [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );
 	const { popoverProps } = useInspectorPopoverPlacement( {
 		isControl: true,
 	} );
-	const { fieldDef } = config;
 	const value = field.getValue( { item: data } );
 	const url = value?.url;
 	const rel = value?.rel || '';
@@ -148,21 +147,10 @@ export default function Link( { data, field, onChange, config = {} } ) {
 							);
 						} }
 						onRemove={ () => {
-							// Remove all link-related properties based on what's in the mapping
-							const removeValue = {};
-
-							if ( fieldDef?.mapping ) {
-								Object.keys( fieldDef.mapping ).forEach(
-									( key ) => {
-										removeValue[ key ] = undefined;
-									}
-								);
-							}
-
 							onChange(
 								field.setValue( {
 									item: data,
-									value: removeValue,
+									value: {},
 								} )
 							);
 						} }

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

@@ -25,8 +25,7 @@ import { getMediaSelectKey } from '../../../store/private-keys';
 import { store as blockEditorStore } from '../../../store';
 
 function MediaThumbnail( { data, field, attachment, config } ) {
-	const { fieldDef } = config;
-	const { allowedTypes = [], multiple = false } = fieldDef.args || {};
+	const { allowedTypes = [], multiple = false } = config || {};
 
 	if ( multiple ) {
 		return 'todo multiple';
@@ -85,12 +84,11 @@ export default function Media( { data, field, onChange, config = {} } ) {
 		isControl: true,
 	} );
 	const value = field.getValue( { item: data } );
-	const { fieldDef } = config;
-	const { allowedTypes = [], multiple = false } = fieldDef.args || {};
-
-	// Check if featured image is supported by checking if it's in the mapping
-	const hasFeaturedImageSupport =
-		fieldDef?.mapping && 'featuredImage' in fieldDef.mapping;
+	const {
+		allowedTypes = [],
+		multiple = false,
+		useFeaturedImage = false,
+	} = config;
 
 	const id = value?.id;
 	const url = value?.url;
@@ -140,23 +138,14 @@ export default function Media( { data, field, onChange, config = {} } ) {
 				multiple={ multiple }
 				popoverProps={ popoverProps }
 				onReset={ () => {
-					// Build reset value dynamically based on mapping
-					const resetValue = {};
-
-					if ( fieldDef?.mapping ) {
-						Object.keys( fieldDef.mapping ).forEach( ( key ) => {
-							resetValue[ key ] = undefined;
-						} );
-					}
-
 					onChange(
 						field.setValue( {
 							item: data,
-							value: resetValue,
+							value: {},
 						} )
 					);
 				} }
-				{ ...( hasFeaturedImageSupport && {
+				{ ...( useFeaturedImage && {
 					useFeaturedImage: !! value?.featuredImage,
 					onToggleFeaturedImage: () => {
 						onChange(
@@ -171,14 +160,13 @@ export default function Media( { data, field, onChange, config = {} } ) {
 				} ) }
 				onSelect={ ( selectedMedia ) => {
 					if ( selectedMedia.id && selectedMedia.url ) {
-						// Build new value dynamically based on what's in the mapping
 						const newValue = {
 							...selectedMedia,
 							mediaType: selectedMedia.media_type,
 						};
 
 						// Turn off featured image when manually selecting media
-						if ( hasFeaturedImageSupport ) {
+						if ( useFeaturedImage ) {
 							newValue.featuredImage = false;
 						}
 

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

@@ -113,25 +113,26 @@ if ( window.crossOriginIsolated ) {
 		'credentialless' in window.HTMLIFrameElement.prototype;
 
 	const disableEmbedPreviews = createHigherOrderComponent(
-		( BlockEdit ) => ( 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
+		( 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 } }
+					/>
 				);
-
-			return (
-				<BlockEdit
-					{ ...props }
-					attributes={ { ...props.attributes, previewable } }
-				/>
-			);
-		},
+			},
 		'withDisabledEmbedPreview'
 	);