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

package/src/components/inner-blocks/default-block-appender.js

@@ -16,13 +16,8 @@ import BaseDefaultBlockAppender from '../default-block-appender';
 import withClientId from './with-client-id';
 import { store as blockEditorStore } from '../../store';
 
-export const DefaultBlockAppender = ( { clientId, lastBlockClientId } ) => {
-	return (
-		<BaseDefaultBlockAppender
-			rootClientId={ clientId }
-			lastBlockClientId={ lastBlockClientId }
-		/>
-	);
+export const DefaultBlockAppender = ( { clientId } ) => {
+	return <BaseDefaultBlockAppender rootClientId={ clientId } />;
 };
 
 export default compose( [

package/src/components/inserter/index.native.js

@@ -7,7 +7,7 @@ import { delay } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { Dropdown, ToolbarButton, Picker } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
@@ -34,7 +34,7 @@ const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000;
 
 const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => (
 	<ToolbarButton
-		title={ __( 'Add block' ) }
+		title={ _x( 'Add block', 'Generic label for block inserter button' ) }
 		icon={
 			<Icon
 				icon={ plusCircleFilled }

package/src/components/inserter/tabs.native.js

@@ -63,7 +63,7 @@ function InserterTabs( {
 	}, [ tabIndex ] );
 
 	const { tabs, tabKeys } = useMemo( () => {
-		const filteredTabs = InserterTabs.TABS.filter(
+		const filteredTabs = InserterTabs.getTabs().filter(
 			( { name } ) => showReusableBlocks || name !== 'reusable'
 		);
 		return {
@@ -114,8 +114,9 @@ function InserterTabs( {
 }
 
 function TabsControl( { onChangeTab, showReusableBlocks } ) {
+	const tabs = InserterTabs.getTabs();
 	const segments = useMemo( () => {
-		const filteredTabs = InserterTabs.TABS.filter(
+		const filteredTabs = tabs.filter(
 			( { name } ) => showReusableBlocks || name !== 'reusable'
 		);
 		return filteredTabs.map( ( { title } ) => title );
@@ -123,7 +124,7 @@ function TabsControl( { onChangeTab, showReusableBlocks } ) {
 
 	const segmentHandler = useCallback(
 		( selectedTab ) => {
-			const tabTitles = InserterTabs.TABS.map( ( { title } ) => title );
+			const tabTitles = tabs.map( ( { title } ) => title );
 			onChangeTab( tabTitles.indexOf( selectedTab ) );
 		},
 		[ onChangeTab ]
@@ -139,7 +140,7 @@ function TabsControl( { onChangeTab, showReusableBlocks } ) {
 
 InserterTabs.Control = TabsControl;
 
-InserterTabs.TABS = [
+InserterTabs.getTabs = () => [
 	{ name: 'blocks', title: __( 'Blocks' ), component: BlockTypesTab },
 	{ name: 'reusable', title: __( 'Reusable' ), component: ReusableBlocksTab },
 ];

package/src/components/inspector-controls/block-support-slot-container.js

@@ -6,5 +6,7 @@ import { useContext } from '@wordpress/element';
 
 export default function BlockSupportSlotContainer( { Slot, ...props } ) {
 	const toolsPanelContext = useContext( ToolsPanelContext );
-	return <Slot { ...props } fillProps={ toolsPanelContext } />;
+	return (
+		<Slot { ...props } fillProps={ toolsPanelContext } bubblesVirtually />
+	);
 }

package/src/components/inspector-controls/fill.native.js

@@ -14,7 +14,7 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import groups from './groups';
-import { useBlockEditContext } from '../block-edit/context';
+import useDisplayBlockControls from '../use-display-block-controls';
 import { BlockSettingsButton } from '../block-settings';
 
 export default function InspectorControlsFill( {
@@ -22,13 +22,14 @@ export default function InspectorControlsFill( {
 	__experimentalGroup: group = 'default',
 	...props
 } ) {
-	const { isSelected } = useBlockEditContext();
+	const isDisplayed = useDisplayBlockControls();
+
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
 		warning( `Unknown InspectorControl group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! isSelected ) {
+	if ( ! isDisplayed ) {
 		return null;
 	}
 

package/src/components/inspector-controls/groups.js

@@ -5,6 +5,7 @@ import { createSlotFill } from '@wordpress/components';
 
 const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
+const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
@@ -15,6 +16,7 @@ const InspectorControlsTypography = createSlotFill(
 const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
+	border: InspectorControlsBorder,
 	dimensions: InspectorControlsDimensions,
 	typography: InspectorControlsTypography,
 };

package/src/components/inspector-controls/slot.js

@@ -13,7 +13,6 @@ import groups from './groups';
 
 export default function InspectorControlsSlot( {
 	__experimentalGroup: group = 'default',
-	bubblesVirtually = true,
 	label,
 	...props
 } ) {
@@ -32,14 +31,10 @@ export default function InspectorControlsSlot( {
 	if ( label ) {
 		return (
 			<BlockSupportToolsPanel group={ group } label={ label }>
-				<BlockSupportSlotContainer
-					{ ...props }
-					bubblesVirtually={ bubblesVirtually }
-					Slot={ Slot }
-				/>
+				<BlockSupportSlotContainer { ...props } Slot={ Slot } />
 			</BlockSupportToolsPanel>
 		);
 	}
 
-	return <Slot { ...props } bubblesVirtually={ bubblesVirtually } />;
+	return <Slot { ...props } bubblesVirtually />;
 }

package/src/components/letter-spacing-control/index.js

@@ -15,12 +15,12 @@ import useSetting from '../../components/use-setting';
 /**
  * Control for letter-spacing.
  *
- * @param {Object}   props                      Component props.
- * @param {string}   props.value                Currently selected letter-spacing.
- * @param {Function} props.onChange             Handles change in letter-spacing selection.
- * @param {boolean}  props.__unstableInputWidth Input width to pass through to inner UnitControl.
+ * @param {Object}                  props                      Component props.
+ * @param {string}                  props.value                Currently selected letter-spacing.
+ * @param {Function}                props.onChange             Handles change in letter-spacing selection.
+ * @param {string|number|undefined} props.__unstableInputWidth Input width to pass through to inner UnitControl. Should be a valid CSS value.
  *
- * @return {WPElement}                          Letter-spacing control.
+ * @return {WPElement} Letter-spacing control.
  */
 export default function LetterSpacingControl( {
 	value,
@@ -33,7 +33,7 @@ export default function LetterSpacingControl( {
 	} );
 	return (
 		<UnitControl
-			label={ __( 'Letter-spacing' ) }
+			label={ __( 'Letter spacing' ) }
 			value={ value }
 			__unstableInputWidth={ __unstableInputWidth }
 			units={ units }

package/src/components/link-control/README.md

@@ -114,7 +114,7 @@ Controls the query parameters used to search for suggestions. For example, to li
 
 ```jsx
 <LinkControl
-	suggestionQuery={ {
+	suggestionsQuery={ {
 		type: 'post',
 		subtype: 'page',
 	} }

package/src/components/link-control/test/index.js

@@ -1634,6 +1634,7 @@ describe( 'Selecting links', () => {
 					);
 
 					// We should have highlighted the first item using the keyboard
+					// eslint-disable-next-line jest/no-conditional-expect
 					expect( selectedSearchResultElement ).toEqual(
 						secondSearchSuggestion
 					);
@@ -1648,6 +1649,7 @@ describe( 'Selecting links', () => {
 					);
 
 					// We should be back to highlighting the first search result again
+					// eslint-disable-next-line jest/no-conditional-expect
 					expect( selectedSearchResultElement ).toEqual(
 						firstSearchSuggestion
 					);

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

@@ -19,6 +19,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { getBlockPositionDescription } from './utils';
 import BlockTitle from '../block-title';
 import ListViewExpander from './expander';
+import { SPACE, ENTER } from '@wordpress/keycodes';
 
 function ListViewBlockSelectButton(
 	{
@@ -47,6 +48,22 @@ function ListViewBlockSelectButton(
 		level
 	);
 
+	// The `href` attribute triggers the browser's native HTML drag operations.
+	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
+	// We need to clear any HTML drag data to prevent `pasteHandler` from firing
+	// inside the `useOnBlockDrop` hook.
+	const onDragStartHandler = ( event ) => {
+		event.dataTransfer.clearData();
+		onDragStart( event );
+	};
+
+	function onKeyDownHandler( event ) {
+		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
+			event.preventDefault();
+			onClick( event );
+		}
+	}
+
 	return (
 		<>
 			<Button
@@ -55,13 +72,15 @@ function ListViewBlockSelectButton(
 					className
 				) }
 				onClick={ onClick }
+				onKeyDown={ onKeyDownHandler }
 				aria-describedby={ descriptionId }
 				ref={ ref }
 				tabIndex={ tabIndex }
 				onFocus={ onFocus }
-				onDragStart={ onDragStart }
+				onDragStart={ onDragStartHandler }
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
+				href={ `#block-${ clientId }` }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />

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

@@ -75,6 +75,7 @@ export function MediaPlaceholder( {
 	onDoubleClick,
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
+	onClose = noop,
 	children,
 	mediaLibraryButton,
 	placeholder,
@@ -328,6 +329,7 @@ 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,6 +39,7 @@ const MediaReplaceFlow = ( {
 	onSelect,
 	onSelectURL,
 	onFilesUpload = noop,
+	onCloseModal = noop,
 	name = __( 'Replace' ),
 	createNotice,
 	removeNotice,
@@ -136,6 +137,7 @@ 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/rich-text/file-paste-handler.js

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

package/src/components/rich-text/prevent-event-discovery.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { insert } from '@wordpress/rich-text';
+
+export function preventEventDiscovery( value ) {
+	const searchText = 'tales of gutenberg';
+	const addText =
+		' 🐡🐢🦀🐤🦋🐘🐧🐹🦁🦄🦍🐼🐿🎃🐴🐝🐆🦕🦔🌱🍇π🍌🐉💧🥨🌌🍂🍠🥦🥚🥝🎟🥥🥒🛵🥖🍒🍯🎾🎲🐺🐚🐮⌛️';
+	const { start, text } = value;
+
+	if ( start < searchText.length ) {
+		return value;
+	}
+
+	const charactersBefore = text.slice( start - searchText.length, start );
+
+	if ( charactersBefore.toLowerCase() !== searchText ) {
+		return value;
+	}
+
+	return insert( value, addText );
+}

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

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

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

@@ -12,6 +12,7 @@ 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,6 +147,11 @@ _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-display-block-controls/index.native.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { hasBlockSupport } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockEditContext } from '../block-edit/context';
+import { store as blockEditorStore } from '../../store';
+
+export default function useDisplayBlockControls() {
+	const { isSelected, clientId, name } = useBlockEditContext();
+	return useSelect(
+		( select ) => {
+			const { getBlockName, getBlockRootClientId } = select(
+				blockEditorStore
+			);
+
+			const parentId = getBlockRootClientId( clientId );
+			const parentBlockName = getBlockName( parentId );
+
+			const hideControls = hasBlockSupport(
+				parentBlockName,
+				'__experimentalHideChildBlockControls',
+				false
+			);
+
+			if ( ! hideControls && isSelected ) {
+				return true;
+			}
+
+			return false;
+		},
+		[ clientId, isSelected, name ]
+	);
+}

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

@@ -259,10 +259,14 @@ export default function useOnBlockDrop( targetRootClientId, targetBlockIndex ) {
 		const files = getFilesFromDataTransfer( event.dataTransfer );
 		const html = event.dataTransfer.getData( 'text/html' );
 
-		if ( files.length ) {
-			_onFilesDrop( files );
-		} else if ( 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 ) {
+			_onFilesDrop( files );
 		} else {
 			_onDrop( event );
 		}

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

@@ -0,0 +1,36 @@
+/**
+ * Internal dependencies
+ */
+import { toggleRichText } from '../use-multi-selection';
+
+describe( 'toggleRichText', () => {
+	function getContainer( isContentEditible ) {
+		const container = document.createDocumentFragment();
+		[
+			'rich-text',
+			'rich-text editor-post-title__input',
+			'some-other-class',
+		].forEach( ( className ) => {
+			const element = document.createElement( 'div' );
+			element.setAttribute( 'class', className );
+			if ( isContentEditible ) {
+				element.setAttribute( 'contenteditable', true );
+			}
+			container.appendChild( element );
+		} );
+		return container;
+	}
+
+	it( 'should set the `contenteditable` attribute on eligible rich text nodes', () => {
+		const container = getContainer();
+		toggleRichText( container, true );
+		let nodes = container.querySelectorAll( '[contenteditable=true]' );
+
+		expect( nodes ).toHaveLength( 1 );
+		expect( nodes[ 0 ].className ).toBe( 'rich-text' );
+
+		toggleRichText( container, false );
+		nodes = container.querySelectorAll( '[contenteditable=true]' );
+		expect( nodes ).toHaveLength( 0 );
+	} );
+} );

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

@@ -15,16 +15,19 @@ import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
 
-function toggleRichText( container, toggle ) {
-	Array.from( container.querySelectorAll( '.rich-text' ) ).forEach(
-		( node ) => {
-			if ( toggle ) {
-				node.setAttribute( 'contenteditable', true );
-			} else {
-				node.removeAttribute( 'contenteditable' );
-			}
+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' );
 		}
-	);
+	} );
 }
 
 /**

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 { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,7 +22,11 @@ import {
 	getColorObjectByAttributeValues,
 } from '../components/colors';
 import useSetting from '../components/use-setting';
-import { hasBorderSupport, shouldSkipSerialization } from './border';
+import {
+	hasBorderSupport,
+	removeBorderAttribute,
+	shouldSkipSerialization,
+} from './border';
 import { cleanEmptyObject } from './utils';
 
 // Defining empty array here instead of inline avoids unnecessary re-renders of
@@ -52,15 +56,30 @@ export function BorderColorEdit( props ) {
 		( colors, origin ) => colors.concat( origin.colors ),
 		[]
 	);
+	const { color: customBorderColor } = style?.border || {};
 	const [ colorValue, setColorValue ] = useState(
 		() =>
 			getColorObjectByAttributeValues(
 				availableColors,
 				borderColor,
-				style?.border?.color
+				customBorderColor
 			)?.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 );
 
@@ -98,6 +117,39 @@ 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,6 +3,7 @@
  */
 import BorderRadiusControl from '../components/border-radius-control';
 import { cleanEmptyObject } from './utils';
+import { removeBorderAttribute } from './border';
 
 /**
  * Inspector control panel containing the border radius related configuration.
@@ -40,3 +41,34 @@ 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,6 +3,7 @@
  */
 import BorderStyleControl from '../components/border-style-control';
 import { cleanEmptyObject } from './utils';
+import { removeBorderAttribute } from './border';
 
 /**
  * Inspector control for configuring border style property.
@@ -36,3 +37,28 @@ 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' ) } );
+}