@wordpress/block-editor 8.0.16 → 8.1.0

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/link-preview.js

@@ -98,7 +98,7 @@ export default function LinkPreview( {
 							</>
 						) : (
 							<span className="block-editor-link-control__search-item-error-notice">
-								Link is empty
+								{ __( 'Link is empty' ) }
 							</span>
 						) }
 					</span>

package/src/components/link-control/search-item.js

@@ -36,6 +36,7 @@ export const LinkControlSearchItem = ( {
 					icon={ globe }
 				/>
 			) }
+
 			<span className="block-editor-link-control__search-item-header">
 				<span className="block-editor-link-control__search-item-title">
 					<TextHighlight
@@ -57,12 +58,20 @@ export const LinkControlSearchItem = ( {
 			</span>
 			{ shouldShowType && suggestion.type && (
 				<span className="block-editor-link-control__search-item-type">
-					{ /* Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label. */ }
-					{ suggestion.type === 'post_tag' ? 'tag' : suggestion.type }
+					{ getVisualTypeName( suggestion ) }
 				</span>
 			) }
 		</Button>
 	);
 };
 
+function getVisualTypeName( suggestion ) {
+	if ( suggestion.isFrontPage ) {
+		return 'front page';
+	}
+
+	// Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label.
+	return suggestion.type === 'post_tag' ? 'tag' : suggestion.type;
+}
+
 export default LinkControlSearchItem;

package/src/components/link-control/search-results.js

@@ -132,6 +132,7 @@ export default function LinkControlSearchResults( {
 							) }
 							searchTerm={ currentInputValue }
 							shouldShowType={ shouldShowSuggestionsTypes }
+							isFrontPage={ suggestion?.isFrontPage }
 						/>
 					);
 				} ) }

package/src/components/link-control/style.scss

@@ -61,7 +61,7 @@ $preview-image-height: 140px;
 	// Specificity overide of URLInput defaults.
 	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
 		@include input-control;
-		width: calc(100% - #{$grid-unit-20*2});
+		width: calc(100% - #{$grid-unit-20 * 2});
 		display: block;
 		padding: 11px $grid-unit-20;
 		padding-right: ( $button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons
@@ -287,6 +287,7 @@ $preview-image-height: 140px;
 		font-size: 0.9em;
 		background-color: $gray-100;
 		border-radius: 2px;
+		white-space: nowrap; // tags shouldn't go over two lines.
 	}
 
 	.block-editor-link-control__search-item-description {

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

@@ -51,6 +51,8 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
 	useDispatch: () => ( { saveEntityRecords: jest.fn() } ),
 } ) );
 
+jest.useRealTimers();
+
 /**
  * Wait for next tick of event loop. This is required
  * because the `fetchSearchSuggestions` Promise will
@@ -1634,6 +1636,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 +1651,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/link-control/use-search-handler.js

@@ -52,21 +52,39 @@ const handleEntitySearch = async (
 	fetchSearchSuggestions,
 	directEntryHandler,
 	withCreateSuggestion,
-	withURLSuggestion
+	withURLSuggestion,
+	pageOnFront
 ) => {
 	const { isInitialSuggestions } = suggestionsQuery;
+	let resultsIncludeFrontPage = false;
 
 	let results = await Promise.all( [
 		fetchSearchSuggestions( val, suggestionsQuery ),
 		directEntryHandler( val ),
 	] );
 
+	// Identify front page and update type to match.
+	results[ 0 ] = results[ 0 ].map( ( result ) => {
+		if ( Number( result.id ) === pageOnFront ) {
+			resultsIncludeFrontPage = true;
+			result.isFrontPage = true;
+			return result;
+		}
+
+		return result;
+	} );
+
 	const couldBeURL = ! val.includes( ' ' );
 
 	// If it's potentially a URL search then concat on a URL search suggestion
 	// just for good measure. That way once the actual results run out we always
 	// have a URL option to fallback on.
-	if ( couldBeURL && withURLSuggestion && ! isInitialSuggestions ) {
+	if (
+		! resultsIncludeFrontPage &&
+		couldBeURL &&
+		withURLSuggestion &&
+		! isInitialSuggestions
+	) {
 		results = results[ 0 ].concat( results[ 1 ] );
 	} else {
 		results = results[ 0 ];
@@ -109,9 +127,11 @@ export default function useSearchHandler(
 	withCreateSuggestion,
 	withURLSuggestion
 ) {
-	const { fetchSearchSuggestions } = useSelect( ( select ) => {
+	const { fetchSearchSuggestions, pageOnFront } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
+
 		return {
+			pageOnFront: getSettings().pageOnFront,
 			fetchSearchSuggestions: getSettings()
 				.__experimentalFetchLinkSuggestions,
 		};
@@ -131,7 +151,8 @@ export default function useSearchHandler(
 						fetchSearchSuggestions,
 						directEntryHandler,
 						withCreateSuggestion,
-						withURLSuggestion
+						withURLSuggestion,
+						pageOnFront
 				  );
 		},
 		[ directEntryHandler, fetchSearchSuggestions, withCreateSuggestion ]

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/list-view/block.js

@@ -19,6 +19,7 @@ import {
 	memo,
 } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { sprintf, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -32,6 +33,7 @@ import ListViewBlockContents from './block-contents';
 import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
 import { useListViewContext } from './context';
 import { store as blockEditorStore } from '../../store';
+import useBlockDisplayInformation from '../use-block-display-information';
 
 function ListViewBlock( {
 	block,
@@ -143,6 +145,13 @@ function ListViewBlock( {
 		'has-single-cell': hideBlockActions,
 	} );
 
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const settingsAriaLabel = sprintf(
+		// translators: %s: The title of the block.
+		__( 'Options for %s block' ),
+		blockInformation.title
+	);
+
 	return (
 		<ListViewLeaf
 			className={ classes }
@@ -218,6 +227,7 @@ function ListViewBlock( {
 						<BlockSettingsDropdown
 							clientIds={ [ clientId ] }
 							icon={ moreVertical }
+							label={ settingsAriaLabel }
 							toggleProps={ {
 								ref,
 								className: 'block-editor-list-view-block__menu',

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

@@ -34,15 +34,20 @@ import { store as blockEditorStore } from '../../store';
 const MediaReplaceFlow = ( {
 	mediaURL,
 	mediaId,
+	mediaIds,
 	allowedTypes,
 	accept,
 	onSelect,
 	onSelectURL,
 	onFilesUpload = noop,
+	onCloseModal = noop,
 	name = __( 'Replace' ),
 	createNotice,
 	removeNotice,
 	children,
+	multiple = false,
+	addToGallery,
+	handleUpload = true,
 } ) => {
 	const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL );
 	const mediaUpload = useSelect( ( select ) => {
@@ -77,7 +82,8 @@ const MediaReplaceFlow = ( {
 		}, 1000 );
 	};
 
-	const selectMedia = ( media ) => {
+	const selectMedia = ( media, closeMenu ) => {
+		closeMenu();
 		setMediaURLValue( media.url );
 		// Calling `onSelect` after the state update since it might unmount the component.
 		onSelect( media );
@@ -89,11 +95,15 @@ const MediaReplaceFlow = ( {
 		onSelectURL( newURL );
 	};
 
-	const uploadFiles = ( event ) => {
+	const uploadFiles = ( event, closeMenu ) => {
 		const files = event.target.files;
+		if ( ! handleUpload ) {
+			closeMenu();
+			return onSelect( files );
+		}
 		onFilesUpload( files );
 		const setMedia = ( [ media ] ) => {
-			selectMedia( media );
+			selectMedia( media, closeMenu );
 		};
 		mediaUpload( {
 			allowedTypes,
@@ -110,6 +120,19 @@ const MediaReplaceFlow = ( {
 		}
 	};
 
+	const onlyAllowsImages = () => {
+		if ( ! allowedTypes || allowedTypes.length === 0 ) {
+			return false;
+		}
+
+		return allowedTypes.every(
+			( allowedType ) =>
+				allowedType === 'image' || allowedType.startsWith( 'image/' )
+		);
+	};
+
+	const gallery = multiple && onlyAllowsImages();
+
 	const POPOVER_PROPS = {
 		isAlternate: true,
 	};
@@ -133,9 +156,15 @@ const MediaReplaceFlow = ( {
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
 						<MediaUpload
-							value={ mediaId }
-							onSelect={ ( media ) => selectMedia( media ) }
+							gallery={ gallery }
+							addToGallery={ addToGallery }
+							multiple={ multiple }
+							value={ multiple ? mediaIds : mediaId }
+							onSelect={ ( media ) =>
+								selectMedia( media, onClose )
+							}
 							allowedTypes={ allowedTypes }
+							onClose={ onCloseModal }
 							render={ ( { open } ) => (
 								<MenuItem icon={ mediaIcon } onClick={ open }>
 									{ __( 'Open Media Library' ) }
@@ -148,6 +177,7 @@ const MediaReplaceFlow = ( {
 									uploadFiles( event, onClose );
 								} }
 								accept={ accept }
+								multiple={ multiple }
 								render={ ( { openFileDialog } ) => {
 									return (
 										<MenuItem

package/src/components/media-upload/test/index.native.js

@@ -1,16 +1,13 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-import { TouchableWithoutFeedback } from 'react-native';
+import { render, fireEvent } from 'test/helpers';
+import { Text, TouchableWithoutFeedback } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import {
-	requestMediaPicker,
-	mediaSources,
-} from '@wordpress/react-native-bridge';
+import { requestMediaPicker } from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -30,48 +27,32 @@ const MEDIA_ID = 123;
 
 describe( 'MediaUpload component', () => {
 	it( 'renders without crashing', () => {
-		const wrapper = shallow(
-			<MediaUpload allowedTypes={ [] } render={ () => {} } />
+		const wrapper = render(
+			<MediaUpload allowedTypes={ [] } render={ () => null } />
 		);
 		expect( wrapper ).toBeTruthy();
 	} );
 
-	it( 'opens media options picker', () => {
-		const wrapper = shallow(
-			<MediaUpload
-				allowedTypes={ [] }
-				render={ ( { open, getMediaOptions } ) => {
-					return (
-						<TouchableWithoutFeedback onPress={ open }>
-							{ getMediaOptions() }
-						</TouchableWithoutFeedback>
-					);
-				} }
-			/>
-		);
-		expect( wrapper.find( 'Picker' ) ).toHaveLength( 1 );
-	} );
-
 	it( 'shows right media capture option for media type', () => {
 		const expectOptionForMediaType = ( mediaType, expectedOption ) => {
-			const wrapper = shallow(
+			const wrapper = render(
 				<MediaUpload
 					allowedTypes={ [ mediaType ] }
 					render={ ( { open, getMediaOptions } ) => {
 						return (
-							<TouchableWithoutFeedback onPress={ open }>
+							<>
+								<TouchableWithoutFeedback onPress={ open }>
+									<Text>Open Picker</Text>
+								</TouchableWithoutFeedback>
 								{ getMediaOptions() }
-							</TouchableWithoutFeedback>
+							</>
 						);
 					} }
 				/>
 			);
-			expect(
-				wrapper
-					.find( 'Picker' )
-					.props()
-					.options.filter( ( item ) => item.label === expectedOption )
-			).toHaveLength( 1 );
+			fireEvent.press( wrapper.getByText( 'Open Picker' ) );
+
+			wrapper.getByText( expectedOption );
 		};
 		expectOptionForMediaType( MEDIA_TYPE_IMAGE, OPTION_TAKE_PHOTO );
 		expectOptionForMediaType( MEDIA_TYPE_VIDEO, OPTION_TAKE_VIDEO );
@@ -96,21 +77,25 @@ describe( 'MediaUpload component', () => {
 
 		const onSelect = jest.fn();
 
-		const wrapper = shallow(
+		const wrapper = render(
 			<MediaUpload
 				allowedTypes={ [ MEDIA_TYPE_VIDEO ] }
 				onSelect={ onSelect }
 				multiple={ allowMultiple }
 				render={ ( { open, getMediaOptions } ) => {
 					return (
-						<TouchableWithoutFeedback onPress={ open }>
+						<>
+							<TouchableWithoutFeedback onPress={ open }>
+								<Text>Open Picker</Text>
+							</TouchableWithoutFeedback>
 							{ getMediaOptions() }
-						</TouchableWithoutFeedback>
+						</>
 					);
 				} }
 			/>
 		);
-		wrapper.find( 'Picker' ).simulate( 'change', option );
+		fireEvent.press( wrapper.getByText( 'Open Picker' ) );
+		fireEvent.press( wrapper.getByText( option ) );
 		const media = { id: MEDIA_ID, url: MEDIA_URL };
 
 		expect( requestFunction ).toHaveBeenCalledTimes( 1 );
@@ -123,7 +108,7 @@ describe( 'MediaUpload component', () => {
 
 	it( 'can select media from device library', () => {
 		expectMediaPickerForOption(
-			mediaSources.deviceLibrary,
+			'Choose from device',
 			false,
 			requestMediaPicker
 		);
@@ -131,23 +116,19 @@ describe( 'MediaUpload component', () => {
 
 	it( 'can select media from WP media library', () => {
 		expectMediaPickerForOption(
-			mediaSources.siteMediaLibrary,
+			'WordPress Media Library',
 			false,
 			requestMediaPicker
 		);
 	} );
 
-	it( 'can select media by capturig', () => {
-		expectMediaPickerForOption(
-			mediaSources.deviceCamera,
-			false,
-			requestMediaPicker
-		);
+	it( 'can select media by capturing', () => {
+		expectMediaPickerForOption( 'Take a Video', false, requestMediaPicker );
 	} );
 
 	it( 'can select multiple media from device library', () => {
 		expectMediaPickerForOption(
-			mediaSources.deviceLibrary,
+			'Choose from device',
 			true,
 			requestMediaPicker
 		);
@@ -155,7 +136,7 @@ describe( 'MediaUpload component', () => {
 
 	it( 'can select multiple media from WP media library', () => {
 		expectMediaPickerForOption(
-			mediaSources.siteMediaLibrary,
+			'WordPress Media Library',
 			true,
 			requestMediaPicker
 		);

package/src/components/media-upload-progress/index.native.js

@@ -144,6 +144,7 @@ export class MediaUploadProgress extends Component {
 						<Spinner
 							progress={ progress }
 							style={ this.props.spinnerStyle }
+							testID="spinner"
 						/>
 					) }
 				</View>