@wordpress/block-editor 15.8.1-next.16d95556a.0 → 15.8.1-next.dc3f6d3c1.0

package/src/components/inserter/media-tab/media-tab.js

@@ -4,8 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
-import { useCallback, useMemo, useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useCallback, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,55 +12,14 @@ import { useSelect } from '@wordpress/data';
 import { MediaCategoryPanel } from './media-panel';
 import MediaUploadCheck from '../../media-upload/check';
 import MediaUpload from '../../media-upload';
-import MediaUploadModal from '../../media-upload-modal';
 import { useMediaCategories } from './hooks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import MobileTabNavigation from '../mobile-tab-navigation';
 import CategoryTabs from '../category-tabs';
 import InserterNoResults from '../no-results';
-import { store as blockEditorStore } from '../../../store';
 
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];
 
-/**
- * Conditional Media component that uses MediaUploadModal when experiment is enabled,
- * otherwise falls back to MediaUpload.
- *
- * @param {Object}   root0        Component props.
- * @param {Function} root0.render Render prop function that receives { open } object.
- * @return {JSX.Element} The component.
- */
-function ConditionalMediaUpload( { render, ...props } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const mediaUpload = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().mediaUpload;
-	}, [] );
-
-	if ( window.__experimentalDataViewsMediaModal ) {
-		return (
-			<>
-				{ render && render( { open: () => setIsModalOpen( true ) } ) }
-				<MediaUploadModal
-					{ ...props }
-					isOpen={ isModalOpen }
-					onClose={ () => {
-						setIsModalOpen( false );
-						props.onClose?.();
-					} }
-					onSelect={ ( media ) => {
-						setIsModalOpen( false );
-						props.onSelect?.( media );
-					} }
-					onUpload={ mediaUpload }
-				/>
-			</>
-		);
-	}
-
-	return <MediaUpload { ...props } render={ render } />;
-}
-
 function MediaTab( {
 	rootClientId,
 	selectedCategory,
@@ -113,7 +71,7 @@ function MediaTab( {
 						{ children }
 					</CategoryTabs>
 					<MediaUploadCheck>
-						<ConditionalMediaUpload
+						<MediaUpload
 							multiple={ false }
 							onSelect={ onSelectMedia }
 							allowedTypes={ ALLOWED_MEDIA_TYPES }

package/src/components/inspector-controls-tabs/content-tab.js

@@ -8,16 +8,24 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BlockQuickNavigation from '../block-quick-navigation';
+import ContentOnlyControls from '../content-only-controls';
 
-const ContentTab = ( { contentClientIds } ) => {
+const ContentTab = ( { rootClientId, contentClientIds } ) => {
 	if ( ! contentClientIds || contentClientIds.length === 0 ) {
 		return null;
 	}
 
 	return (
-		<PanelBody title={ __( 'Content' ) }>
-			<BlockQuickNavigation clientIds={ contentClientIds } />
-		</PanelBody>
+		<>
+			{ ! window?.__experimentalContentOnlyPatternInsertion && (
+				<PanelBody title={ __( 'Content' ) }>
+					<BlockQuickNavigation clientIds={ contentClientIds } />
+				</PanelBody>
+			) }
+			{ window?.__experimentalContentOnlyPatternInsertion && (
+				<ContentOnlyControls rootClientId={ rootClientId } />
+			) }
+		</>
 	);
 };
 

package/src/components/inspector-controls-tabs/index.js

@@ -109,7 +109,10 @@ export default function InspectorControlsTabs( {
 					/>
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ TAB_CONTENT.name } focusable={ false }>
-					<ContentTab contentClientIds={ contentClientIds } />
+					<ContentTab
+						rootClientId={ clientId }
+						contentClientIds={ contentClientIds }
+					/>
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ TAB_LIST_VIEW.name } focusable={ false }>
 					<InspectorControls.Slot group="list" />

package/src/components/list-view/block-select-button.js

@@ -12,7 +12,13 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock, pinSmall, unseen } from '@wordpress/icons';
+import {
+	Icon,
+	lockSmall as lock,
+	pinSmall,
+	unseen,
+	symbol,
+} from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 import { hasBlockSupport } from '@wordpress/blocks';
@@ -55,28 +61,35 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
-	const { canToggleBlockVisibility, isBlockHidden, isContentOnly } =
-		useSelect(
-			( select ) => {
-				const { getBlockName } = select( blockEditorStore );
-				const { isBlockHidden: _isBlockHidden } = unlock(
-					select( blockEditorStore )
-				);
-				return {
-					canToggleBlockVisibility: hasBlockSupport(
-						getBlockName( clientId ),
-						'blockVisibility',
-						true
-					),
-					isBlockHidden: _isBlockHidden( clientId ),
-					isContentOnly:
-						select( blockEditorStore ).getBlockEditingMode(
-							clientId
-						) === 'contentOnly',
-				};
-			},
-			[ clientId ]
-		);
+	const {
+		canToggleBlockVisibility,
+		isBlockHidden,
+		isContentOnly,
+		hasPatternName,
+	} = useSelect(
+		( select ) => {
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
+			const { isBlockHidden: _isBlockHidden } = unlock(
+				select( blockEditorStore )
+			);
+			const blockAttributes = getBlockAttributes( clientId );
+			return {
+				canToggleBlockVisibility: hasBlockSupport(
+					getBlockName( clientId ),
+					'blockVisibility',
+					true
+				),
+				isBlockHidden: _isBlockHidden( clientId ),
+				isContentOnly:
+					select( blockEditorStore ).getBlockEditingMode(
+						clientId
+					) === 'contentOnly',
+				hasPatternName: !! blockAttributes?.metadata?.patternName,
+			};
+		},
+		[ clientId ]
+	);
 	const shouldShowLockIcon = isLocked && ! isContentOnly;
 	const shouldShowBlockVisibilityIcon =
 		canToggleBlockVisibility && isBlockHidden;
@@ -123,7 +136,7 @@ function ListViewBlockSelectButton(
 		>
 			<ListViewExpander onClick={ onToggleExpanded } />
 			<BlockIcon
-				icon={ blockInformation?.icon }
+				icon={ hasPatternName ? symbol : blockInformation?.icon }
 				showColors
 				context="list-view"
 			/>

package/src/components/media-placeholder/index.js

@@ -25,7 +25,6 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import MediaUpload from '../media-upload';
-import MediaUploadModal from '../media-upload-modal';
 import MediaUploadCheck from '../media-upload/check';
 import URLPopover from '../url-popover';
 import { store as blockEditorStore } from '../../store';
@@ -33,45 +32,6 @@ import { parseDropEvent } from '../use-on-block-drop';
 
 const noop = () => {};
 
-/**
- * Conditional Media component that uses MediaUploadModal when experiment is enabled,
- * otherwise falls back to MediaUpload.
- *
- * @param {Object}   root0        Component props.
- * @param {Function} root0.render Render prop function that receives { open } object.
- * @return {JSX.Element} The component.
- */
-function ConditionalMediaUpload( { render, ...props } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const mediaUpload = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().mediaUpload;
-	}, [] );
-
-	if ( window.__experimentalDataViewsMediaModal ) {
-		return (
-			<>
-				{ render && render( { open: () => setIsModalOpen( true ) } ) }
-				<MediaUploadModal
-					{ ...props }
-					isOpen={ isModalOpen }
-					onClose={ () => {
-						setIsModalOpen( false );
-						props.onClose?.();
-					} }
-					onSelect={ ( media ) => {
-						setIsModalOpen( false );
-						props.onSelect?.( media );
-					} }
-					onUpload={ mediaUpload }
-				/>
-			</>
-		);
-	}
-
-	return <MediaUpload { ...props } render={ render } />;
-}
-
 const InsertFromURLPopover = ( {
 	src,
 	onChange,
@@ -488,7 +448,7 @@ export function MediaPlaceholder( {
 		};
 		const libraryButton = mediaLibraryButton ?? defaultButton;
 		const uploadMediaLibraryButton = (
-			<ConditionalMediaUpload
+			<MediaUpload
 				addToGallery={ addToGallery }
 				gallery={ multiple && onlyAllowsImages() }
 				multiple={ multiple }

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

@@ -12,7 +12,6 @@ import {
 	ToolbarButton,
 } from '@wordpress/components';
 import { useSelect, withDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
 import { DOWN } from '@wordpress/keycodes';
 import {
 	postFeaturedImage,
@@ -27,7 +26,6 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import MediaUpload from '../media-upload';
-import MediaUploadModal from '../media-upload-modal';
 import MediaUploadCheck from '../media-upload/check';
 import LinkControl from '../link-control';
 import { store as blockEditorStore } from '../../store';
@@ -35,42 +33,6 @@ import { store as blockEditorStore } from '../../store';
 const noop = () => {};
 let uniqueId = 0;
 
-/**
- * Conditional Media component that uses MediaUploadModal when experiment is enabled,
- * otherwise falls back to MediaUpload.
- *
- * @param {Object}   root0        Component props.
- * @param {Function} root0.render Render prop function that receives { open } object.
- * @return {JSX.Element} The component.
- */
-function ConditionalMediaUpload( { render, ...props } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const { getSettings } = useSelect( blockEditorStore );
-
-	if ( window.__experimentalDataViewsMediaModal ) {
-		return (
-			<>
-				{ render && render( { open: () => setIsModalOpen( true ) } ) }
-				<MediaUploadModal
-					{ ...props }
-					isOpen={ isModalOpen }
-					onClose={ () => {
-						setIsModalOpen( false );
-						props.onClose?.();
-					} }
-					onSelect={ ( media ) => {
-						setIsModalOpen( false );
-						props.onSelect?.( media );
-					} }
-					onUpload={ getSettings().mediaUpload }
-				/>
-			</>
-		);
-	}
-
-	return <MediaUpload { ...props } render={ render } />;
-}
-
 const MediaReplaceFlow = ( {
 	mediaURL,
 	mediaId,
@@ -93,6 +55,7 @@ const MediaReplaceFlow = ( {
 	handleUpload = true,
 	popoverProps,
 	renderToggle,
+	className,
 } ) => {
 	const { getSettings } = useSelect( blockEditorStore );
 	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
@@ -169,6 +132,7 @@ const MediaReplaceFlow = ( {
 	return (
 		<Dropdown
 			popoverProps={ popoverProps }
+			className={ className }
 			contentClassName="block-editor-media-replace-flow__options"
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				if ( renderToggle ) {
@@ -195,7 +159,7 @@ const MediaReplaceFlow = ( {
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
 						<MediaUploadCheck>
-							<ConditionalMediaUpload
+							<MediaUpload
 								gallery={ gallery }
 								addToGallery={ addToGallery }
 								multiple={ multiple }

package/src/components/use-block-display-information/index.js

@@ -9,6 +9,7 @@ import {
 	__experimentalGetBlockLabel as getBlockLabel,
 } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import { symbol } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -71,8 +72,11 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! clientId ) {
 				return null;
 			}
-			const { getBlockName, getBlockAttributes } =
-				select( blockEditorStore );
+			const {
+				getBlockName,
+				getBlockAttributes,
+				__experimentalGetParsedPattern,
+			} = select( blockEditorStore );
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const blockName = getBlockName( clientId );
@@ -81,6 +85,30 @@ export default function useBlockDisplayInformation( clientId ) {
 				return null;
 			}
 			const attributes = getBlockAttributes( clientId );
+
+			// Check if this block is a pattern
+			const patternName = attributes?.metadata?.patternName;
+
+			if (
+				patternName &&
+				window?.__experimentalContentOnlyPatternInsertion
+			) {
+				const pattern = __experimentalGetParsedPattern( patternName );
+
+				const positionLabel = getPositionTypeLabel( attributes );
+				return {
+					isSynced: false,
+					title: __( 'Pattern' ),
+					icon: symbol,
+					description:
+						pattern?.description || __( 'A block pattern.' ),
+					anchor: attributes?.anchor,
+					positionLabel,
+					positionType: attributes?.style?.position?.type,
+					name: pattern?.title || attributes?.metadata?.name,
+				};
+			}
+
 			const match = getActiveBlockVariation( blockName, attributes );
 			const isSynced =
 				isReusableBlock( blockType ) || isTemplatePart( blockType );

package/src/hooks/block-bindings.js

@@ -7,7 +7,11 @@ import fastDeepEqual from 'fast-deep-equal/es6';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { getBlockBindingsSources, getBlockType } from '@wordpress/blocks';
+import {
+	getBlockBindingsSource,
+	getBlockType,
+	store as blockStore,
+} from '@wordpress/blocks';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
@@ -33,8 +37,6 @@ import { store as blockEditorStore } from '../store';
 
 const { Menu } = unlock( componentsPrivateApis );
 
-const EMPTY_OBJECT = {};
-
 /**
  * Get the normalized attribute type for block bindings.
  * Converts 'rich-text' to 'string' since rich-text is stored as string.
@@ -80,10 +82,10 @@ function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
 	);
 	return (
 		<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>
-			{ Object.entries( sources ).map( ( [ sourceKey, source ] ) => {
+			{ Object.entries( sources ).map( ( [ sourceKey, data ] ) => {
 				// Only show sources that have compatible data for this specific attribute.
-				const sourceDataItems = source.data?.filter(
-					( item ) => item?.type === attributeType
+				const sourceDataItems = data.filter(
+					( item ) => item.type === attributeType
 				);
 
 				const noItemsAvailable =
@@ -93,6 +95,8 @@ function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
 					return null;
 				}
 
+				const source = getBlockBindingsSource( sourceKey );
+
 				return (
 					<Menu
 						key={ sourceKey }
@@ -106,17 +110,21 @@ function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
 								{ sourceDataItems.map( ( item ) => {
 									const itemBindings = {
 										source: sourceKey,
-										args: item?.args || {
+										args: item.args || {
 											key: item.key,
 										},
 									};
-									const values = source.getValues( {
-										select,
-										context: blockContext,
-										bindings: {
-											[ attribute ]: itemBindings,
-										},
-									} );
+									let values = {};
+									try {
+										values = source.getValues( {
+											select,
+											context: blockContext,
+											bindings: {
+												[ attribute ]: itemBindings,
+											},
+										} );
+									} catch ( e ) {}
+
 									return (
 										<Menu.CheckboxItem
 											key={
@@ -160,7 +168,7 @@ function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
 											}
 										>
 											<Menu.ItemLabel>
-												{ item?.label }
+												{ item.label }
 											</Menu.ItemLabel>
 											<Menu.ItemHelpText>
 												{ values[ attribute ] }
@@ -179,7 +187,8 @@ function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
 
 function BlockBindingsAttribute( { attribute, binding, sources, blockName } ) {
 	const { source: sourceName, args } = binding || {};
-	const source = sources?.[ sourceName ];
+	const data = sources?.[ sourceName ];
+	const source = getBlockBindingsSource( sourceName );
 
 	let displayText;
 	let isValid = true;
@@ -189,8 +198,8 @@ function BlockBindingsAttribute( { attribute, binding, sources, blockName } ) {
 		// Check if there are any compatible sources for this attribute type.
 		const attributeType = getAttributeType( blockName, attribute );
 
-		const hasCompatibleSources = Object.values( sources ).some( ( src ) =>
-			src.data?.some( ( item ) => item?.type === attributeType )
+		const hasCompatibleSources = Object.values( sources ).some( ( items ) =>
+			items.some( ( item ) => item.type === attributeType )
 		);
 
 		if ( ! hasCompatibleSources ) {
@@ -203,14 +212,10 @@ function BlockBindingsAttribute( { attribute, binding, sources, blockName } ) {
 		// If there's a binding but the source is not found, it's invalid.
 		isValid = false;
 		displayText = __( 'Source not registered' );
-		if ( Object.keys( sources ).length === 0 ) {
-			displayText = __( 'No sources available' );
-		}
 	} else {
 		displayText =
-			source.data?.find( ( item ) => fastDeepEqual( item.args, args ) )
-				?.label ||
-			source.label ||
+			data?.find( ( item ) => fastDeepEqual( item.args, args ) )?.label ||
+			source?.label ||
 			sourceName;
 	}
 
@@ -299,68 +304,57 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 
 	// Use useSelect to ensure sources are updated whenever there are updates in block context
 	// or when underlying data changes.
-	// Still needs a fix regarding _sources scope.
-	const _sources = {};
-	const { sources, canUpdateBlockBindings, bindableAttributes } = useSelect(
+	const { canUpdateBlockBindings, bindableAttributes } = useSelect(
 		( select ) => {
 			const { __experimentalBlockBindingsSupportedAttributes } =
 				select( blockEditorStore ).getSettings();
-			const _bindableAttributes =
-				__experimentalBlockBindingsSupportedAttributes?.[ blockName ];
-			if ( ! _bindableAttributes || _bindableAttributes.length === 0 ) {
-				return EMPTY_OBJECT;
-			}
-
-			const registeredSources = getBlockBindingsSources();
-			Object.entries( registeredSources ).forEach(
-				( [
-					sourceName,
-					{ getFieldsList, usesContext, label, getValues },
-				] ) => {
-					// Populate context.
+
+			return {
+				canUpdateBlockBindings:
+					select( blockEditorStore ).getSettings()
+						.canUpdateBlockBindings,
+				bindableAttributes:
+					__experimentalBlockBindingsSupportedAttributes?.[
+						blockName
+					],
+			};
+		},
+		[ blockName ]
+	);
+
+	const sources = useSelect(
+		( select ) => {
+			const { getAllBlockBindingsSources } = unlock(
+				select( blockStore )
+			);
+			const data = {};
+			Object.entries( getAllBlockBindingsSources() ).forEach(
+				( [ sourceName, source ] ) => {
+					if ( ! source.getFieldsList ) {
+						return;
+					}
+
 					const context = {};
-					if ( usesContext?.length ) {
-						for ( const key of usesContext ) {
+					if ( source.usesContext?.length ) {
+						for ( const key of source.usesContext ) {
 							context[ key ] = blockContext[ key ];
 						}
 					}
-					if ( getFieldsList ) {
-						const fieldsListResult = getFieldsList( {
-							select,
-							context,
-						} );
-						_sources[ sourceName ] = {
-							data: fieldsListResult || [],
-							label,
-							getValues,
-						};
-					} else {
-						/*
-						 * Include sources without getFieldsList if they are already used in a binding.
-						 * This allows them to be displayed in read-only mode.
-						 */
-						_sources[ sourceName ] = {
-							data: [],
-							label,
-							getValues,
-						};
+
+					const items = source.getFieldsList( {
+						select,
+						context,
+					} );
+					if ( items?.length ) {
+						data[ sourceName ] = items;
 					}
 				}
 			);
-
-			return {
-				sources:
-					Object.values( _sources ).length > 0
-						? _sources
-						: EMPTY_OBJECT,
-				canUpdateBlockBindings:
-					select( blockEditorStore ).getSettings()
-						.canUpdateBlockBindings,
-				bindableAttributes: _bindableAttributes,
-			};
+			return data;
 		},
-		[ blockContext, blockName ]
+		[ blockContext ]
 	);
+
 	// Return early if there are no bindable attributes.
 	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
 		return null;
@@ -368,10 +362,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 
 	const { bindings } = metadata || {};
 
-	// Check if all sources have empty data arrays.
-	const hasCompatibleData = Object.values( sources ).some(
-		( source ) => source.data && source.data.length > 0
-	);
+	const hasCompatibleData = Object.keys( sources ).length > 0;
 
 	// Lock the UI when the user can't update bindings or there are no fields to connect to.
 	const readOnly = ! canUpdateBlockBindings || ! hasCompatibleData;
@@ -402,10 +393,8 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 
 						const hasCompatibleDataForAttribute = Object.values(
 							sources
-						).some( ( source ) =>
-							source.data?.some(
-								( item ) => item?.type === attributeType
-							)
+						).some( ( data ) =>
+							data.some( ( item ) => item.type === attributeType )
 						);
 
 						const isAttributeReadOnly =