@wordpress/block-editor 15.6.3 → 15.7.1-next.2f1c7c01b.0

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

@@ -13,8 +13,6 @@ export default function ListViewExpander( { onClick } ) {
 		//
 		// We've mimicked this by adding an icon with aria-hidden set to true to hide this from the accessibility tree.
 		// For the current tree grid implementation, please do not try to make this a button.
-		//
-		// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
 		<span
 			className="block-editor-list-view__expander"
 			onClick={ ( event ) => onClick( event, { forceToggle: true } ) }

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

@@ -25,6 +25,7 @@ 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';
@@ -32,6 +33,45 @@ 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,
@@ -448,7 +488,7 @@ export function MediaPlaceholder( {
 		};
 		const libraryButton = mediaLibraryButton ?? defaultButton;
 		const uploadMediaLibraryButton = (
-			<MediaUpload
+			<ConditionalMediaUpload
 				addToGallery={ addToGallery }
 				gallery={ multiple && onlyAllowsImages() }
 				multiple={ multiple }

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 }
@@ -219,7 +257,6 @@ const MediaReplaceFlow = ( {
 							: children }
 					</NavigableMenu>
 					{ onSelectURL && (
-						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
 						<form className="block-editor-media-flow__url-input">
 							<span className="block-editor-media-replace-flow__image-url-label">
 								{ __( 'Current media URL:' ) }

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/multi-selection-inspector/style.scss

@@ -5,7 +5,7 @@
 }
 
 .block-editor-multi-selection-inspector__card-title {
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 }
 
 .block-editor-multi-selection-inspector__card .block-editor-block-icon {

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

@@ -414,8 +414,6 @@ export function RichTextWrapper(
 					preserveWhiteSpace,
 				} );
 
-				// Allows us to ask for this information when we get a report.
-				// eslint-disable-next-line no-console
 				window.console.log( 'Received items:\n\n', files );
 
 				if ( onReplace && isEmpty( value ) ) {

package/src/hooks/allowed-blocks.js

@@ -3,25 +3,17 @@
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport, getBlockType } 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-style-variation.js

@@ -3,16 +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,
-	toStyles,
-	getBlockSelectors,
-} from '../components/global-styles';
 import { usePrivateStyleOverride } from './utils';
 import { getValueFromObjectPath } from '../utils/object';
 import { store as blockEditorStore } from '../store';
@@ -127,7 +123,6 @@ export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {
 					};
 					const blockSelectors = getBlockSelectors(
 						getBlockTypes(),
-						getBlockStyles,
 						override.clientId
 					);
 					const hasBlockGapSupport = false;
@@ -253,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 {
@@ -268,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.
@@ -290,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.
@@ -322,11 +306,7 @@ function useBlockProps( { name, className, clientId } ) {
 		}
 
 		const variationConfig = { settings, styles };
-		const blockSelectors = getBlockSelectors(
-			getBlockTypes(),
-			getBlockStyles,
-			clientId
-		);
+		const blockSelectors = getBlockSelectors( getBlockTypes(), clientId );
 		const hasBlockGapSupport = false;
 		const hasFallbackGapSupport = true;
 		const disableLayoutStyles = true;
@@ -349,7 +329,7 @@ function useBlockProps( { name, className, clientId } ) {
 				variationStyles: true,
 			}
 		);
-	}, [ variation, settings, styles, getBlockStyles, clientId ] );
+	}, [ variation, settings, styles, clientId ] );
 
 	usePrivateStyleOverride( {
 		id: `variation-${ clientId }`,

package/src/hooks/content-lock-ui.js

@@ -14,44 +14,48 @@ import { BlockControls } from '../components';
 import { unlock } from '../lock-unlock';
 
 // The implementation of content locking is mainly in this file, although the mechanism
-// to stop temporarily editing as blocks when an outside block is selected is on component StopEditingAsBlocksOnOutsideSelect
-// at block-editor/src/components/block-list/index.js.
+// to stop editing a content only section when an outside block is selected is in the component
+// `StopEditingContentOnlySectionOnOutsideSelect` at block-editor/src/components/block-list/index.js.
 // Besides the components on this file and the file referenced above the implementation
 // also includes artifacts on the store (actions, reducers, and selector).
 
 function ContentLockControlsPure( { clientId } ) {
-	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
-		( select ) => {
-			const {
-				getContentLockingParent,
-				getTemplateLock,
-				getTemporarilyEditingAsBlocks,
-			} = unlock( select( blockEditorStore ) );
-			return {
-				templateLock: getTemplateLock( clientId ),
-				isLockedByParent: !! getContentLockingParent( clientId ),
-				isEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId,
-			};
-		},
-		[ clientId ]
-	);
+	const { templateLock, isLockedByParent, isEditingContentOnlySection } =
+		useSelect(
+			( select ) => {
+				const {
+					getContentLockingParent,
+					getTemplateLock,
+					getEditedContentOnlySection,
+				} = unlock( select( blockEditorStore ) );
+				return {
+					templateLock: getTemplateLock( clientId ),
+					isLockedByParent: !! getContentLockingParent( clientId ),
+					isEditingContentOnlySection:
+						getEditedContentOnlySection() === clientId,
+				};
+			},
+			[ clientId ]
+		);
 
-	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
+	const { stopEditingContentOnlySection } = unlock(
+		useDispatch( blockEditorStore )
+	);
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
 
 	const stopEditingAsBlockCallback = useCallback( () => {
-		stopEditingAsBlocks( clientId );
-	}, [ clientId, stopEditingAsBlocks ] );
+		stopEditingContentOnlySection( clientId );
+	}, [ clientId, stopEditingContentOnlySection ] );
 
-	if ( ! isContentLocked && ! isEditingAsBlocks ) {
+	if ( ! isContentLocked && ! isEditingContentOnlySection ) {
 		return null;
 	}
 
-	const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked;
+	const showDoneButton = isEditingContentOnlySection && ! isContentLocked;
 
 	return (
-		showStopEditingAsBlocks && (
+		showDoneButton && (
 			<BlockControls group="other">
 				<ToolbarButton onClick={ stopEditingAsBlockCallback }>
 					{ __( 'Done' ) }

package/src/hooks/duotone.js

@@ -15,6 +15,7 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useEffect } from '@wordpress/element';
+import { getBlockSelector } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -30,7 +31,6 @@ import {
 	getDuotoneStylesheet,
 	getDuotoneUnsetStylesheet,
 } from '../components/duotone/utils';
-import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
 import {
 	cleanEmptyObject,
@@ -354,14 +354,14 @@ function useBlockProps( { clientId, name, style } ) {
 				false
 			);
 			if ( experimentalDuotone ) {
-				const rootSelector = getBlockCSSSelector( blockType );
+				const rootSelector = getBlockSelector( blockType );
 				return typeof experimentalDuotone === 'string'
 					? scopeSelector( rootSelector, experimentalDuotone )
 					: rootSelector;
 			}
 
 			// Regular filter.duotone support uses filter.duotone selectors with fallbacks.
-			return getBlockCSSSelector( blockType, 'filter.duotone', {
+			return getBlockSelector( blockType, 'filter.duotone', {
 				fallback: true,
 			} );
 		}

package/src/hooks/fit-text.js

@@ -90,11 +90,15 @@ function useFitText( { fitText, name, clientId } ) {
 
 		const blockSelector = `#block-${ clientId }`;
 
-		const applyStylesFn = ( css ) => {
-			styleElement.textContent = css;
+		const applyFontSize = ( fontSize ) => {
+			if ( fontSize === 0 ) {
+				styleElement.textContent = '';
+			} else {
+				styleElement.textContent = `${ blockSelector } { font-size: ${ fontSize }px !important; }`;
+			}
 		};
 
-		optimizeFitText( blockElement, blockSelector, applyStylesFn );
+		optimizeFitText( blockElement, applyFontSize );
 	}, [ blockElement, clientId, hasFitTextSupport, fitText ] );
 
 	useEffect( () => {

package/src/hooks/font-size.js

@@ -4,6 +4,7 @@
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
+import { getTypographyFontSizeValue } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -21,7 +22,6 @@ import {
 	shouldSkipSerialization,
 } from './utils';
 import { useSettings } from '../components/use-settings';
-import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 

package/src/hooks/use-typography-props.js

@@ -7,13 +7,13 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { getTypographyFontSizeValue } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
 import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
-import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 import { unlock } from '../lock-unlock';
 
 const { kebabCase } = unlock( componentsPrivateApis );

package/src/layouts/grid.js

@@ -181,8 +181,6 @@ export default {
 		}
 
 		if ( rules.length ) {
-			// Reason to disable: the extra line breaks added by prettier mess with the unit tests.
-			// eslint-disable-next-line prettier/prettier
 			output = `${ appendSelectors( selector ) } { ${ rules.join(
 				'; '
 			) }; }`;

package/src/private-apis.js

@@ -57,6 +57,7 @@ import {
 	useBlockElementRef,
 	useBlockElement,
 } from './components/block-list/use-block-props/use-block-refs';
+import { default as MediaUploadModal } from './components/media-upload-modal';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -110,4 +111,5 @@ lock( privateApis, {
 	essentialFormatKey,
 	useBlockElement,
 	useBlockElementRef,
+	MediaUploadModal,
 } );

package/src/store/actions.js

@@ -34,6 +34,7 @@ import {
 import {
 	__experimentalUpdateSettings,
 	privateRemoveBlocks,
+	editContentOnlySection,
 } from './private-actions';
 
 /** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
@@ -104,7 +105,6 @@ export const validateBlocksToTemplate =
  * @property {WPBlockSelection} end   The selection end.
  */
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * Returns an action object used in signalling that selection state should be
  * reset to the specified selection.
@@ -120,7 +120,6 @@ export function resetSelection(
 	selectionEnd,
 	initialPosition
 ) {
-	/* eslint-enable jsdoc/valid-types */
 	return {
 		type: 'RESET_SELECTION',
 		selectionStart,
@@ -194,7 +193,6 @@ export function updateBlock( clientId, updates ) {
 	};
 }
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * Returns an action object used in signalling that the block with the
  * specified client ID has been selected, optionally accepting a position
@@ -208,7 +206,6 @@ export function updateBlock( clientId, updates ) {
  * @return {Object} Action object.
  */
 export function selectBlock( clientId, initialPosition = 0 ) {
-	/* eslint-enable jsdoc/valid-types */
 	return {
 		type: 'SELECT_BLOCK',
 		initialPosition,
@@ -355,7 +352,6 @@ export function toggleSelection( isSelectionEnabled = true ) {
 	};
 }
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * Action that replaces given blocks with one or more replacement blocks.
  *
@@ -370,7 +366,6 @@ export function toggleSelection( isSelectionEnabled = true ) {
 export const replaceBlocks =
 	( clientIds, blocks, indexToSelect, initialPosition = 0, meta ) =>
 	( { select, dispatch, registry } ) => {
-		/* eslint-enable jsdoc/valid-types */
 		clientIds = castArray( clientIds );
 		blocks = castArray( blocks );
 		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
@@ -540,7 +535,6 @@ export function insertBlock(
 	);
 }
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * Action that inserts an array of blocks, optionally at a specific index respective a root block list.
  *
@@ -566,7 +560,6 @@ export const insertBlocks =
 		meta
 	) =>
 	( { select, dispatch } ) => {
-		/* eslint-enable jsdoc/valid-types */
 		if ( initialPosition !== null && typeof initialPosition === 'object' ) {
 			meta = initialPosition;
 			initialPosition = 0;
@@ -1400,7 +1393,6 @@ export function removeBlock( clientId, selectPrevious ) {
 	return removeBlocks( [ clientId ], selectPrevious );
 }
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * Returns an action object used in signalling that the inner blocks with the
  * specified client ID should be replaced.
@@ -1417,7 +1409,6 @@ export function replaceInnerBlocks(
 	updateSelection = false,
 	initialPosition = 0
 ) {
-	/* eslint-enable jsdoc/valid-types */
 	return {
 		type: 'REPLACE_INNER_BLOCKS',
 		rootClientId,
@@ -1909,18 +1900,16 @@ export function setBlockVisibility( updates ) {
  * This action is created for internal/experimental only usage and may be
  * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
  *
- * @param {?string} temporarilyEditingAsBlocks The block's clientId being temporarily edited as blocks.
- * @param {?string} focusModeToRevert          The focus mode to revert after temporarily edit as blocks finishes.
+ * @param {?string} clientId The clientId of the block being temporarily edited.
  */
-export function __unstableSetTemporarilyEditingAsBlocks(
-	temporarilyEditingAsBlocks,
-	focusModeToRevert
-) {
-	return {
-		type: 'SET_TEMPORARILY_EDITING_AS_BLOCKS',
-		temporarilyEditingAsBlocks,
-		focusModeToRevert,
-	};
+export function __unstableSetTemporarilyEditingAsBlocks( clientId ) {
+	deprecated(
+		"wp.data.dispatch( 'core/block-editor' ).__unstableSetTemporarilyEditingAsBlocks",
+		{
+			since: '7.0',
+		}
+	);
+	return editContentOnlySection( clientId );
 }
 
 /**