@wordpress/block-editor 15.6.1-next.36001005c.0 → 15.7.0

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

@@ -12,6 +12,7 @@ import {
 	ToolbarButton,
 } from '@wordpress/components';
 import { useSelect, withDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { DOWN } from '@wordpress/keycodes';
 import {
 	postFeaturedImage,
@@ -26,6 +27,7 @@ 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';
@@ -33,6 +35,42 @@ 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,
@@ -157,7 +195,7 @@ const MediaReplaceFlow = ( {
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
 						<MediaUploadCheck>
-							<MediaUpload
+							<ConditionalMediaUpload
 								gallery={ gallery }
 								addToGallery={ addToGallery }
 								multiple={ multiple }

package/src/components/media-upload-modal/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { withFilters } from '@wordpress/components';
+
+/**
+ * This is a placeholder for the media upload modal component necessary to make it possible to provide
+ * an integration with the core blocks that handle media files. By default it renders nothing but
+ * it provides a way to have it overridden with the `editor.MediaUploadModal` filter.
+ *
+ * @return {Component} The component to be rendered.
+ */
+const MediaUploadModal = () => null;
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload-modal/README.md
+ */
+export default withFilters( 'editor.MediaUploadModal' )( MediaUploadModal );

package/src/components/rich-text/index.js

@@ -41,6 +41,7 @@ import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
 import BlockContext from '../block-context';
+import { PrivateBlockContext } from '../block-list/private-block-context';
 
 export const keyboardShortcutContext = createContext();
 keyboardShortcutContext.displayName = 'keyboardShortcutContext';
@@ -124,9 +125,10 @@ export function RichTextWrapper(
 	const instanceId = useInstanceId( RichTextWrapper );
 	const anchorRef = useRef();
 	const context = useBlockEditContext();
-	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
+	const { clientId, isSelected: isBlockSelected } = context;
 	const blockBindings = context[ blockBindingsKey ];
 	const blockContext = useContext( BlockContext );
+	const { bindableAttributes } = useContext( PrivateBlockContext );
 	const registry = useRegistry();
 	const selector = ( select ) => {
 		// Avoid subscribing to the block editor store if the block is not
@@ -171,15 +173,7 @@ export function RichTextWrapper(
 
 	const { disableBoundBlock, bindingsPlaceholder, bindingsLabel } = useSelect(
 		( select ) => {
-			const { __experimentalBlockBindingsSupportedAttributes } =
-				select( blockEditorStore ).getSettings();
-
-			if (
-				! blockBindings?.[ identifier ] ||
-				! (
-					blockName in __experimentalBlockBindingsSupportedAttributes
-				)
-			) {
+			if ( ! blockBindings?.[ identifier ] || ! bindableAttributes ) {
 				return {};
 			}
 
@@ -214,12 +208,12 @@ export function RichTextWrapper(
 			const { getBlockAttributes } = select( blockEditorStore );
 			const blockAttributes = getBlockAttributes( clientId );
 			let clientSideFieldLabel = null;
-			if ( blockBindingsSource?.editorUI ) {
-				const editorUIResult = blockBindingsSource.editorUI( {
+			if ( blockBindingsSource?.getFieldsList ) {
+				const fieldsItems = blockBindingsSource.getFieldsList( {
 					select,
 					context: blockBindingsContext,
 				} );
-				clientSideFieldLabel = editorUIResult.data?.find( ( item ) =>
+				clientSideFieldLabel = fieldsItems?.find( ( item ) =>
 					fastDeepEqual( item.args, relatedBinding?.args )
 				)?.label;
 			}
@@ -252,7 +246,7 @@ export function RichTextWrapper(
 		[
 			blockBindings,
 			identifier,
-			blockName,
+			bindableAttributes,
 			adjustedValue,
 			clientId,
 			blockContext,

package/src/hooks/allowed-blocks.js

@@ -3,25 +3,17 @@
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { store as blockEditorStore } from '../store';
 import { PrivateInspectorControlsAllowedBlocks } from '../components/inspector-controls/groups';
 import BlockAllowedBlocksControl from '../components/block-allowed-blocks/allowed-blocks-control';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 function BlockEditAllowedBlocksControlPure( { clientId } ) {
-	const isContentOnly = useSelect(
-		( select ) => {
-			return (
-				select( blockEditorStore ).getBlockEditingMode( clientId ) ===
-				'contentOnly'
-			);
-		},
-		[ clientId ]
-	);
+	const blockEditingMode = useBlockEditingMode();
+	const isContentOnly = blockEditingMode === 'contentOnly';
 
 	if ( isContentOnly ) {
 		return null;

package/src/hooks/block-bindings.js

@@ -15,11 +15,10 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalVStack as VStack,
-	Modal,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { useContext, useState } from '@wordpress/element';
+import { useContext } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -63,12 +62,7 @@ const useToolsPanelDropdownMenuProps = () => {
 		: {};
 };
 
-function BlockBindingsPanelMenuContent( {
-	attribute,
-	binding,
-	sources,
-	onOpenModal,
-} ) {
+function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
 	const { clientId } = useBlockEditContext();
 	const { updateBlockBindings } = useBlockBindingsUtils();
 	const isMobile = useViewportMatch( 'medium', '<' );
@@ -99,105 +93,85 @@ function BlockBindingsPanelMenuContent( {
 					return null;
 				}
 
-				if ( source.mode === 'dropdown' ) {
-					return (
-						<Menu
-							key={ sourceKey }
-							placement={
-								isMobile ? 'bottom-start' : 'left-start'
-							}
-						>
-							<Menu.SubmenuTriggerItem>
-								<Menu.ItemLabel>
-									{ source.label }
-								</Menu.ItemLabel>
-							</Menu.SubmenuTriggerItem>
-							<Menu.Popover gutter={ 8 }>
-								<Menu.Group>
-									{ sourceDataItems.map( ( item ) => {
-										const itemBindings = {
-											source: sourceKey,
-											args: item?.args || {
-												key: item.key,
-											},
-										};
-										const values = source.getValues( {
-											select,
-											context: blockContext,
-											bindings: {
-												[ attribute ]: itemBindings,
-											},
-										} );
-										return (
-											<Menu.CheckboxItem
-												key={
-													sourceKey +
-														JSON.stringify(
-															item.args
-														) || item.key
-												}
-												onChange={ () => {
-													const isCurrentlySelected =
-														fastDeepEqual(
-															binding?.args,
-															item.args
-														) ??
-														// Deprecate key dependency in 7.0.
-														item.key ===
-															binding?.args?.key;
-
-													if ( isCurrentlySelected ) {
-														// Unset if the same item is selected again.
-														updateBlockBindings( {
-															[ attribute ]:
-																undefined,
-														} );
-													} else {
-														updateBlockBindings( {
-															[ attribute ]:
-																itemBindings,
-														} );
-													}
-												} }
-												name={ attribute + '-binding' }
-												value={ values[ attribute ] }
-												checked={
+				return (
+					<Menu
+						key={ sourceKey }
+						placement={ isMobile ? 'bottom-start' : 'left-start' }
+					>
+						<Menu.SubmenuTriggerItem>
+							<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>
+						</Menu.SubmenuTriggerItem>
+						<Menu.Popover gutter={ 8 }>
+							<Menu.Group>
+								{ sourceDataItems.map( ( item ) => {
+									const itemBindings = {
+										source: sourceKey,
+										args: item?.args || {
+											key: item.key,
+										},
+									};
+									const values = source.getValues( {
+										select,
+										context: blockContext,
+										bindings: {
+											[ attribute ]: itemBindings,
+										},
+									} );
+									return (
+										<Menu.CheckboxItem
+											key={
+												sourceKey +
+													JSON.stringify(
+														item.args
+													) || item.key
+											}
+											onChange={ () => {
+												const isCurrentlySelected =
 													fastDeepEqual(
 														binding?.args,
 														item.args
 													) ??
 													// Deprecate key dependency in 7.0.
 													item.key ===
-														binding?.args?.key
+														binding?.args?.key;
+
+												if ( isCurrentlySelected ) {
+													// Unset if the same item is selected again.
+													updateBlockBindings( {
+														[ attribute ]:
+															undefined,
+													} );
+												} else {
+													updateBlockBindings( {
+														[ attribute ]:
+															itemBindings,
+													} );
 												}
-											>
-												<Menu.ItemLabel>
-													{ item?.label }
-												</Menu.ItemLabel>
-												<Menu.ItemHelpText>
-													{ values[ attribute ] }
-												</Menu.ItemHelpText>
-											</Menu.CheckboxItem>
-										);
-									} ) }
-								</Menu.Group>
-							</Menu.Popover>
-						</Menu>
-					);
-				}
-
-				if ( source.mode === 'modal' ) {
-					return (
-						<Menu.Item
-							key={ sourceKey }
-							onClick={ () => onOpenModal( { sourceKey } ) }
-						>
-							<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>
-						</Menu.Item>
-					);
-				}
-
-				return null;
+											} }
+											name={ attribute + '-binding' }
+											value={ values[ attribute ] }
+											checked={
+												fastDeepEqual(
+													binding?.args,
+													item.args
+												) ??
+												// Deprecate key dependency in 7.0.
+												item.key === binding?.args?.key
+											}
+										>
+											<Menu.ItemLabel>
+												{ item?.label }
+											</Menu.ItemLabel>
+											<Menu.ItemHelpText>
+												{ values[ attribute ] }
+											</Menu.ItemHelpText>
+										</Menu.CheckboxItem>
+									);
+								} ) }
+							</Menu.Group>
+						</Menu.Popover>
+					</Menu>
+				);
 			} ) }
 		</Menu>
 	);
@@ -282,16 +256,11 @@ function EditableBlockBindingsPanelItem( {
 	attribute,
 	binding,
 	sources,
-	setModalState,
 	blockName,
 } ) {
 	const { updateBlockBindings } = useBlockBindingsUtils();
 	const isMobile = useViewportMatch( 'medium', '<' );
 
-	const handleOpenModal = ( { sourceKey } ) => {
-		setModalState( { attribute, sourceKey } );
-	};
-
 	return (
 		<ToolsPanelItem
 			hasValue={ () => !! binding }
@@ -316,7 +285,6 @@ function EditableBlockBindingsPanelItem( {
 						attribute={ attribute }
 						binding={ binding }
 						sources={ sources }
-						onOpenModal={ handleOpenModal }
 					/>
 				</Menu.Popover>
 			</Menu>
@@ -328,11 +296,6 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	const blockContext = useContext( BlockContext );
 	const { removeAllBlockBindings } = useBlockBindingsUtils();
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-	const [ modalState, setModalState ] = useState( null );
-
-	const handleCloseModal = () => {
-		setModalState( null );
-	};
 
 	// Use useSelect to ensure sources are updated whenever there are updates in block context
 	// or when underlying data changes.
@@ -352,7 +315,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 			Object.entries( registeredSources ).forEach(
 				( [
 					sourceName,
-					{ editorUI, getFieldsList, usesContext, label, getValues },
+					{ getFieldsList, usesContext, label, getValues },
 				] ) => {
 					// Populate context.
 					const context = {};
@@ -361,44 +324,19 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 							context[ key ] = blockContext[ key ];
 						}
 					}
-
-					if ( editorUI ) {
-						const editorUIResult = editorUI( {
+					if ( getFieldsList ) {
+						const fieldsListResult = getFieldsList( {
 							select,
 							context,
 						} );
-
 						_sources[ sourceName ] = {
-							...editorUIResult,
+							data: fieldsListResult || [],
 							label,
 							getValues,
 						};
-					} else if ( getFieldsList ) {
-						// Backward compatibility: Convert getFieldsList to editorUI format.
-						const fieldsListResult = getFieldsList( {
-							select,
-							context,
-						} );
-
-						if ( fieldsListResult ) {
-							const data = Object.entries( fieldsListResult ).map(
-								( [ key, field ] ) => ( {
-									label: field.label || key,
-									type: field.type || 'string',
-									args: { key },
-								} )
-							);
-
-							_sources[ sourceName ] = {
-								mode: 'dropdown', // Default mode for backward compatibility.
-								data,
-								label,
-								getValues,
-							};
-						}
 					} else {
 						/*
-						 * Include sources without editorUI if they are already used in a binding.
+						 * Include sources without getFieldsList if they are already used in a binding.
 						 * This allows them to be displayed in read-only mode.
 						 */
 						_sources[ sourceName ] = {
@@ -438,9 +376,6 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	// Lock the UI when the user can't update bindings or there are no fields to connect to.
 	const readOnly = ! canUpdateBlockBindings || ! hasCompatibleData;
 
-	const RenderModalContent =
-		sources[ modalState?.sourceKey ]?.renderModalContent;
-
 	if ( bindings === undefined && ! hasCompatibleData ) {
 		return null;
 	}
@@ -490,7 +425,6 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 								attribute={ attribute }
 								binding={ binding }
 								sources={ sources }
-								setModalState={ setModalState }
 								blockName={ blockName }
 							/>
 						);
@@ -508,14 +442,6 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 					</p>
 				</Text>
 			</ToolsPanel>
-			{ RenderModalContent && (
-				<Modal onRequestClose={ handleCloseModal }>
-					<RenderModalContent
-						attribute={ modalState.attribute }
-						closeModal={ handleCloseModal }
-					/>
-				</Modal>
-			) }
 		</InspectorControls>
 	);
 };

package/src/hooks/block-style-variation.js

@@ -3,13 +3,12 @@
  */
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { useContext, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { toStyles, getBlockSelectors } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
-import { GlobalStylesContext } from '../components/global-styles';
 import { usePrivateStyleOverride } from './utils';
 import { getValueFromObjectPath } from '../utils/object';
 import { store as blockEditorStore } from '../store';
@@ -249,10 +248,6 @@ export function getVariationStylesWithRefValues(
 }
 
 function useBlockStyleVariation( name, variation, clientId ) {
-	// Prefer global styles data in GlobalStylesContext, which are available
-	// if in the site editor. Otherwise fall back to whatever is in the
-	// editor settings and available in the post editor.
-	const { merged: mergedConfig } = useContext( GlobalStylesContext );
 	const { globalSettings, globalStyles } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 		return {
@@ -264,15 +259,15 @@ function useBlockStyleVariation( name, variation, clientId ) {
 	return useMemo( () => {
 		const variationStyles = getVariationStylesWithRefValues(
 			{
-				settings: mergedConfig?.settings ?? globalSettings,
-				styles: mergedConfig?.styles ?? globalStyles,
+				settings: globalSettings,
+				styles: globalStyles,
 			},
 			name,
 			variation
 		);
 
 		return {
-			settings: mergedConfig?.settings ?? globalSettings,
+			settings: globalSettings,
 			// The variation style data is all that is needed to generate
 			// the styles for the current application to a block. The variation
 			// name is updated to match the instance specific class name.
@@ -286,14 +281,7 @@ function useBlockStyleVariation( name, variation, clientId ) {
 				},
 			},
 		};
-	}, [
-		mergedConfig,
-		globalSettings,
-		globalStyles,
-		variation,
-		clientId,
-		name,
-	] );
+	}, [ globalSettings, globalStyles, variation, clientId, name ] );
 }
 
 // Rather than leveraging `useInstanceId` here, the `clientId` is used.

package/src/hooks/custom-class-name.js

@@ -145,6 +145,6 @@ addFilter(
 
 addFilter(
 	'blocks.switchToBlockType.transformedBlock',
-	'core/color/addTransforms',
+	'core/customClassName/addTransforms',
 	addTransforms
 );