@wordpress/block-editor 8.0.12-next.33ec3857e2.0 → 8.0.15

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

@@ -75,7 +75,6 @@ export function MediaPlaceholder( {
 	onDoubleClick,
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
-	onClose = noop,
 	children,
 	mediaLibraryButton,
 	placeholder,
@@ -329,7 +328,6 @@ export function MediaPlaceholder( {
 				gallery={ multiple && onlyAllowsImages() }
 				multiple={ multiple }
 				onSelect={ onSelect }
-				onClose={ onClose }
 				allowedTypes={ allowedTypes }
 				value={
 					Array.isArray( value )

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

@@ -39,7 +39,6 @@ const MediaReplaceFlow = ( {
 	onSelect,
 	onSelectURL,
 	onFilesUpload = noop,
-	onCloseModal = noop,
 	name = __( 'Replace' ),
 	createNotice,
 	removeNotice,
@@ -137,7 +136,6 @@ const MediaReplaceFlow = ( {
 							value={ mediaId }
 							onSelect={ ( media ) => selectMedia( media ) }
 							allowedTypes={ allowedTypes }
-							onClose={ onCloseModal }
 							render={ ( { open } ) => (
 								<MenuItem icon={ mediaIcon } onClick={ open }>
 									{ __( 'Open Media Library' ) }

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

@@ -7,7 +7,7 @@ import { last, noop } from 'lodash';
  * WordPress dependencies
  */
 import { useEffect, useRef } from '@wordpress/element';
-import { useRegistry } from '@wordpress/data';
+import { useRegistry, useSelect } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
 
 /**
@@ -83,6 +83,15 @@ export default function useBlockSync( {
 		__unstableMarkNextChangeAsNotPersistent,
 	} = registry.dispatch( blockEditorStore );
 	const { getBlockName, getBlocks } = registry.select( blockEditorStore );
+	const isControlled = useSelect(
+		( select ) => {
+			return (
+				! clientId ||
+				select( blockEditorStore ).areInnerBlocksControlled( clientId )
+			);
+		},
+		[ clientId ]
+	);
 
 	const pendingChanges = useRef( { incoming: null, outgoing: [] } );
 	const subscribed = useRef( false );
@@ -97,15 +106,21 @@ export default function useBlockSync( {
 		// and so it would already be persisted.
 		__unstableMarkNextChangeAsNotPersistent();
 		if ( clientId ) {
-			setHasControlledInnerBlocks( clientId, true );
-			__unstableMarkNextChangeAsNotPersistent();
-			const storeBlocks = controlledBlocks.map( ( block ) =>
-				cloneBlock( block )
-			);
-			if ( subscribed.current ) {
-				pendingChanges.current.incoming = storeBlocks;
-			}
-			replaceInnerBlocks( clientId, storeBlocks );
+			// It is important to batch here because otherwise,
+			// as soon as `setHasControlledInnerBlocks` is called
+			// the effect to restore might be triggered
+			// before the actual blocks get set properly in state.
+			registry.batch( () => {
+				setHasControlledInnerBlocks( clientId, true );
+				const storeBlocks = controlledBlocks.map( ( block ) =>
+					cloneBlock( block )
+				);
+				if ( subscribed.current ) {
+					pendingChanges.current.incoming = storeBlocks;
+				}
+				__unstableMarkNextChangeAsNotPersistent();
+				replaceInnerBlocks( clientId, storeBlocks );
+			} );
 		} else {
 			if ( subscribed.current ) {
 				pendingChanges.current.incoming = controlledBlocks;
@@ -157,6 +172,15 @@ export default function useBlockSync( {
 		}
 	}, [ controlledBlocks, clientId ] );
 
+	useEffect( () => {
+		// When the block becomes uncontrolled, it means its inner state has been reset
+		// we need to take the blocks again from the external value property.
+		if ( ! isControlled ) {
+			pendingChanges.current.outgoing = [];
+			setControlledBlocks();
+		}
+	}, [ isControlled ] );
+
 	useEffect( () => {
 		const {
 			getSelectionStart,
@@ -164,6 +188,7 @@ export default function useBlockSync( {
 			getSelectedBlocksInitialCaretPosition,
 			isLastBlockChangePersistent,
 			__unstableIsLastBlockChangeIgnored,
+			areInnerBlocksControlled,
 		} = registry.select( blockEditorStore );
 
 		let blocks = getBlocks( clientId );
@@ -182,8 +207,17 @@ export default function useBlockSync( {
 			if ( clientId !== null && getBlockName( clientId ) === null )
 				return;
 
-			const newIsPersistent = isLastBlockChangePersistent();
+			// When RESET_BLOCKS on parent blocks get called, the controlled blocks
+			// can reset to uncontrolled, in these situations, it means we need to populate
+			// the blocks again from the external blocks (the value property here)
+			// and we should stop triggering onChange
+			const isStillControlled =
+				! clientId || areInnerBlocksControlled( clientId );
+			if ( ! isStillControlled ) {
+				return;
+			}
 
+			const newIsPersistent = isLastBlockChangePersistent();
 			const newBlocks = getBlocks( clientId );
 			const areBlocksDifferent = newBlocks !== blocks;
 			blocks = newBlocks;

package/src/components/rich-text/file-paste-handler.js

@@ -5,9 +5,7 @@ import { createBlobURL } from '@wordpress/blob';
 
 export function filePasteHandler( files ) {
 	return files
-		.filter( ( { type } ) =>
-			/^image\/(?:jpe?g|png|gif|webp)$/.test( type )
-		)
+		.filter( ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) )
 		.map( ( file ) => `<img src="${ createBlobURL( file ) }">` )
 		.join( '' );
 }

package/src/components/rich-text/use-input-rules.js

@@ -11,7 +11,6 @@ import { useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { preventEventDiscovery } from './prevent-event-discovery';
 
 export function useInputRules( props ) {
 	const {
@@ -86,7 +85,7 @@ export function useInputRules( props ) {
 
 					return accumlator;
 				},
-				preventEventDiscovery( value )
+				value
 			);
 
 			if ( transformed !== value ) {

package/src/components/selection-scroll-into-view/index.js

@@ -12,7 +12,6 @@ import deprecated from '@wordpress/deprecated';
 export function MultiSelectScrollIntoView() {
 	deprecated( 'wp.blockEditor.MultiSelectScrollIntoView', {
 		hint: 'This behaviour is now built-in.',
-		since: '5.8',
 	} );
 	return null;
 }

package/src/components/url-input/README.md

@@ -147,11 +147,6 @@ _Optional._ If this property is added, a label will be generated using label pro
 
 _Optional._ Adds and optional class to the parent `div` that wraps the URLInput field and popover
 
-### `placeholder: String`
-
-_Optional._ Placeholder text to show when the field is empty, similar to the
-[`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
-
 ### `disableSuggestions: Boolean`
 
 _Optional._ Provides additional control over whether suggestions are disabled.

package/src/components/use-canvas-click-redirect/index.js

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { overEvery, findLast } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { focus, isTextField, placeCaretAtHorizontalEdge } from '@wordpress/dom';
+
+/**
+ * Given an element, returns true if the element is a tabbable text field, or
+ * false otherwise.
+ *
+ * @param {Element} element Element to test.
+ *
+ * @return {boolean} Whether element is a tabbable text field.
+ */
+const isTabbableTextField = overEvery( [
+	isTextField,
+	focus.tabbable.isTabbableIndex,
+] );
+
+export function useCanvasClickRedirect() {
+	return useRefEffect( ( node ) => {
+		function onMouseDown( event ) {
+			// Only handle clicks on the canvas, not the content.
+			if ( event.target !== node ) {
+				return;
+			}
+
+			const focusableNodes = focus.focusable.find( node );
+			const target = findLast( focusableNodes, isTabbableTextField );
+
+			if ( ! target ) {
+				return;
+			}
+
+			const { bottom } = target.getBoundingClientRect();
+
+			// Ensure the click is below the last block.
+			if ( event.clientY < bottom ) {
+				return;
+			}
+
+			placeCaretAtHorizontalEdge( target, true );
+			event.preventDefault();
+		}
+
+		node.addEventListener( 'mousedown', onMouseDown );
+
+		return () => {
+			node.addEventListener( 'mousedown', onMouseDown );
+		};
+	}, [] );
+}

package/src/components/use-on-block-drop/index.js

@@ -95,10 +95,7 @@ export function onBlockDrop(
 
 		// If the user is moving a block
 		if ( dropType === 'block' ) {
-			const sourceBlockIndex = getBlockIndex(
-				sourceClientIds[ 0 ],
-				sourceRootClientId
-			);
+			const sourceBlockIndex = getBlockIndex( sourceClientIds[ 0 ] );
 
 			// If the user is dropping to the same position, return early.
 			if (
@@ -259,14 +256,10 @@ export default function useOnBlockDrop( targetRootClientId, targetBlockIndex ) {
 		const files = getFilesFromDataTransfer( event.dataTransfer );
 		const html = event.dataTransfer.getData( 'text/html' );
 
-		/**
-		 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
-		 * The order of the checks is important to recognise the HTML drop.
-		 */
-		if ( html ) {
-			_onHTMLDrop( html );
-		} else if ( files.length ) {
+		if ( files.length ) {
 			_onFilesDrop( files );
+		} else if ( html ) {
+			_onHTMLDrop( html );
 		} else {
 			_onDrop( event );
 		}

package/src/components/use-setting/index.js

@@ -15,6 +15,8 @@ import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE } from '@wordpress/
 import { useBlockEditContext } from '../block-edit';
 import { store as blockEditorStore } from '../../store';
 
+const blockedPaths = [ 'color', 'border', 'typography', 'spacing' ];
+
 const deprecatedFlags = {
 	'color.palette': ( settings ) =>
 		settings.colors === undefined ? undefined : settings.colors,
@@ -104,6 +106,13 @@ export default function useSetting( path ) {
 
 	const setting = useSelect(
 		( select ) => {
+			if ( blockedPaths.includes( path ) ) {
+				// eslint-disable-next-line no-console
+				console.warn(
+					'Top level useSetting paths are disabled. Please use a subpath to query the information needed.'
+				);
+				return undefined;
+			}
 			const settings = select( blockEditorStore ).getSettings();
 
 			// 1 - Use __experimental features, if available.

package/src/components/writing-flow/use-multi-selection.js

@@ -15,19 +15,16 @@ import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
 
-export function toggleRichText( container, toggle ) {
-	Array.from(
-		container.querySelectorAll(
-			// Exclude the Post Title from multi-select disable.
-			'.rich-text:not( .editor-post-title__input )'
-		)
-	).forEach( ( node ) => {
-		if ( toggle ) {
-			node.setAttribute( 'contenteditable', true );
-		} else {
-			node.removeAttribute( 'contenteditable' );
+function toggleRichText( container, toggle ) {
+	Array.from( container.querySelectorAll( '.rich-text' ) ).forEach(
+		( node ) => {
+			if ( toggle ) {
+				node.setAttribute( 'contenteditable', true );
+			} else {
+				node.removeAttribute( 'contenteditable' );
+			}
 		}
-	} );
+	);
 }
 
 /**

package/src/hooks/border-color.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,11 +22,7 @@ import {
 	getColorObjectByAttributeValues,
 } from '../components/colors';
 import useSetting from '../components/use-setting';
-import {
-	hasBorderSupport,
-	removeBorderAttribute,
-	shouldSkipSerialization,
-} from './border';
+import { hasBorderSupport, shouldSkipSerialization } from './border';
 import { cleanEmptyObject } from './utils';
 
 // Defining empty array here instead of inline avoids unnecessary re-renders of
@@ -56,30 +52,15 @@ export function BorderColorEdit( props ) {
 		( colors, origin ) => colors.concat( origin.colors ),
 		[]
 	);
-	const { color: customBorderColor } = style?.border || {};
 	const [ colorValue, setColorValue ] = useState(
 		() =>
 			getColorObjectByAttributeValues(
 				availableColors,
 				borderColor,
-				customBorderColor
+				style?.border?.color
 			)?.color
 	);
 
-	// Detect changes in the color attributes and update the colorValue to keep the
-	// UI in sync. This is necessary for situations when border controls interact with
-	// eachother: eg, setting the border width to zero causes the color and style
-	// selections to be cleared.
-	useEffect( () => {
-		setColorValue(
-			getColorObjectByAttributeValues(
-				availableColors,
-				borderColor,
-				customBorderColor
-			)?.color
-		);
-	}, [ borderColor, customBorderColor, availableColors ] );
-
 	const onChangeColor = ( value ) => {
 		setColorValue( value );
 
@@ -117,39 +98,6 @@ export function BorderColorEdit( props ) {
 	);
 }
 
-/**
- * Checks if there is a current value in the border color block support
- * attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a border color value set.
- */
-export function hasBorderColorValue( props ) {
-	const {
-		attributes: { borderColor, style },
-	} = props;
-
-	return !! borderColor || !! style?.border?.color;
-}
-
-/**
- * Resets the border color block support attributes. This can be used when
- * disabling the border color support controls for a block via a progressive
- * discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetBorderColor( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		borderColor: undefined,
-		style: removeBorderAttribute( style, 'color' ),
-	} );
-}
-
 /**
  * Filters registered block settings, extending attributes to include
  * `borderColor` if needed.

package/src/hooks/border-radius.js

@@ -3,7 +3,6 @@
  */
 import BorderRadiusControl from '../components/border-radius-control';
 import { cleanEmptyObject } from './utils';
-import { removeBorderAttribute } from './border';
 
 /**
  * Inspector control panel containing the border radius related configuration.
@@ -41,34 +40,3 @@ export function BorderRadiusEdit( props ) {
 		/>
 	);
 }
-
-/**
- * Checks if there is a current value in the border radius block support
- * attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a border radius value set.
- */
-export function hasBorderRadiusValue( props ) {
-	const borderRadius = props.attributes.style?.border?.radius;
-
-	if ( typeof borderRadius === 'object' ) {
-		return Object.entries( borderRadius ).some( Boolean );
-	}
-
-	return !! borderRadius;
-}
-
-/**
- * Resets the border radius block support attributes. This can be used when
- * disabling the border radius support controls for a block via a progressive
- * discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetBorderRadius( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-	setAttributes( { style: removeBorderAttribute( style, 'radius' ) } );
-}

package/src/hooks/border-style.js

@@ -3,7 +3,6 @@
  */
 import BorderStyleControl from '../components/border-style-control';
 import { cleanEmptyObject } from './utils';
-import { removeBorderAttribute } from './border';
 
 /**
  * Inspector control for configuring border style property.
@@ -37,28 +36,3 @@ export const BorderStyleEdit = ( props ) => {
 		/>
 	);
 };
-
-/**
- * Checks if there is a current value in the border style block support
- * attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a border style value set.
- */
-export function hasBorderStyleValue( props ) {
-	return !! props.attributes.style?.border?.style;
-}
-
-/**
- * Resets the border style block support attribute. This can be used when
- * disabling the border style support control for a block via a progressive
- * discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetBorderStyle( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-	setAttributes( { style: removeBorderAttribute( style, 'style' ) } );
-}

package/src/hooks/border-width.js

@@ -5,14 +5,13 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { cleanEmptyObject } from './utils';
-import { removeBorderAttribute } from './border';
 import useSetting from '../components/use-setting';
 
 const MIN_BORDER_WIDTH = 0;
@@ -32,12 +31,25 @@ export const BorderWidthEdit = ( props ) => {
 
 	const { width, color: customBorderColor, style: borderStyle } =
 		style?.border || {};
-
-	// Used to temporarily track previous border color & style selections to be
-	// able to restore them when border width changes from zero value.
 	const [ styleSelection, setStyleSelection ] = useState();
 	const [ colorSelection, setColorSelection ] = useState();
-	const [ customColorSelection, setCustomColorSelection ] = useState();
+
+	// Temporarily track previous border color & style selections to be able to
+	// restore them when border width changes from zero value.
+	useEffect( () => {
+		if ( borderStyle !== 'none' ) {
+			setStyleSelection( borderStyle );
+		}
+	}, [ borderStyle ] );
+
+	useEffect( () => {
+		if ( borderColor || customBorderColor ) {
+			setColorSelection( {
+				name: !! borderColor ? borderColor : undefined,
+				color: !! customBorderColor ? customBorderColor : undefined,
+			} );
+		}
+	}, [ borderColor, customBorderColor ] );
 
 	const onChange = ( newWidth ) => {
 		let newStyle = {
@@ -52,39 +64,28 @@ export const BorderWidthEdit = ( props ) => {
 		let borderPaletteColor = borderColor;
 
 		const hasZeroWidth = parseFloat( newWidth ) === 0;
-		const hadPreviousZeroWidth = parseFloat( width ) === 0;
 
 		// Setting the border width explicitly to zero will also set the
 		// border style to `none` and clear border color attributes.
-		if ( hasZeroWidth && ! hadPreviousZeroWidth ) {
-			// Before clearing color and style selections, keep track of
-			// the current selections so they can be restored when the width
-			// changes to a non-zero value.
-			setColorSelection( borderColor );
-			setCustomColorSelection( customBorderColor );
-			setStyleSelection( borderStyle );
-
-			// Clear style and color attributes.
+		if ( hasZeroWidth ) {
 			borderPaletteColor = undefined;
 			newStyle.border.color = undefined;
 			newStyle.border.style = 'none';
 		}
 
-		if ( ! hasZeroWidth && hadPreviousZeroWidth ) {
-			// Restore previous border style selection if width is now not zero and
-			// border style was 'none'. This is to support changes to the UI which
-			// change the border style UI to a segmented control without a "none"
-			// option.
-			if ( borderStyle === 'none' ) {
-				newStyle.border.style = styleSelection;
-			}
-
-			// Restore previous border color selection if width is no longer zero
-			// and current border color is undefined.
-			if ( borderColor === undefined ) {
-				borderPaletteColor = colorSelection;
-				newStyle.border.color = customColorSelection;
-			}
+		// Restore previous border style selection if width is now not zero and
+		// border style was 'none'. This is to support changes to the UI which
+		// change the border style UI to a segmented control without a "none"
+		// option.
+		if ( ! hasZeroWidth && borderStyle === 'none' ) {
+			newStyle.border.style = styleSelection;
+		}
+
+		// Restore previous border color selection if width is no longer zero
+		// and current border color is undefined.
+		if ( ! hasZeroWidth && borderColor === undefined ) {
+			borderPaletteColor = colorSelection?.name;
+			newStyle.border.color = colorSelection?.color;
 		}
 
 		// If width was reset, clean out undefined styles.
@@ -112,28 +113,3 @@ export const BorderWidthEdit = ( props ) => {
 		/>
 	);
 };
-
-/**
- * Checks if there is a current value in the border width block support
- * attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a border width value set.
- */
-export function hasBorderWidthValue( props ) {
-	return !! props.attributes.style?.border?.width;
-}
-
-/**
- * Resets the border width block support attribute. This can be used when
- * disabling the border width support control for a block via a progressive
- * discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetBorderWidth( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-	setAttributes( { style: removeBorderAttribute( style, 'width' ) } );
-}