@wordpress/block-editor 15.0.0 → 15.1.0

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

@@ -6,7 +6,7 @@ import { View, TouchableHighlight, Text } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { Icon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
@@ -17,93 +17,82 @@ import { __, sprintf } from '@wordpress/i18n';
 import { BlockIcon } from '../block-icon';
 import styles from './style.scss';
 import sparkles from './sparkles';
-class MenuItem extends Component {
-	constructor() {
-		super( ...arguments );
 
-		this.onPress = this.onPress.bind( this );
-	}
-
-	onPress() {
-		const { onSelect, item } = this.props;
+function MenuItem( {
+	getStylesFromColorScheme,
+	item,
+	itemWidth,
+	maxWidth,
+	onSelect,
+} ) {
+	const onPress = useCallback( () => {
 		onSelect( item );
-	}
-
-	render() {
-		const { getStylesFromColorScheme, item, itemWidth, maxWidth } =
-			this.props;
+	}, [ onSelect, item ] );
 
-		const modalIconWrapperStyle = getStylesFromColorScheme(
-			styles.modalIconWrapper,
-			styles.modalIconWrapperDark
-		);
-		const modalIconStyle = styles.modalIcon;
-		const modalItemLabelStyle = getStylesFromColorScheme(
-			styles.modalItemLabel,
-			styles.modalItemLabelDark
-		);
+	const modalIconWrapperStyle = getStylesFromColorScheme(
+		styles.modalIconWrapper,
+		styles.modalIconWrapperDark
+	);
+	const modalIconStyle = styles.modalIcon;
+	const modalItemLabelStyle = getStylesFromColorScheme(
+		styles.modalItemLabel,
+		styles.modalItemLabelDark
+	);
 
-		const clipboardBlockStyles = getStylesFromColorScheme(
-			styles.clipboardBlock,
-			styles.clipboardBlockDark
-		);
+	const clipboardBlockStyles = getStylesFromColorScheme(
+		styles.clipboardBlock,
+		styles.clipboardBlockDark
+	);
 
-		const isClipboardBlock = item.id === 'clipboard';
-		const blockTitle = isClipboardBlock ? __( 'Copied block' ) : item.title;
-		const blockIsNew = item.isNew === true;
-		const accessibilityLabelFormat = blockIsNew
-			? // translators: Newly available block name. %s: The localized block name
-			  __( '%s block, newly available' )
-			: // translators: %s: Block name e.g. "Image block"
-			  __( '%s block' );
-		const accessibilityLabel = sprintf(
-			accessibilityLabelFormat,
-			item.title
-		);
+	const isClipboardBlock = item.id === 'clipboard';
+	const blockTitle = isClipboardBlock ? __( 'Copied block' ) : item.title;
+	const blockIsNew = item.isNew === true;
+	const accessibilityLabelFormat = blockIsNew
+		? // translators: Newly available block name. %s: The localized block name
+		  __( '%s block, newly available' )
+		: // translators: %s: Block name e.g. "Image block"
+		  __( '%s block' );
+	const accessibilityLabel = sprintf( accessibilityLabelFormat, item.title );
 
-		return (
-			<TouchableHighlight
-				style={ [
-					styles.touchableArea,
-					item.isDisabled ? styles.disabled : null,
-				] }
-				underlayColor="transparent"
-				activeOpacity={ 0.5 }
-				accessibilityRole="button"
-				accessibilityLabel={ accessibilityLabel }
-				onPress={ this.onPress }
-				disabled={ item.isDisabled }
-			>
-				<View style={ [ styles.modalItem, { width: maxWidth } ] }>
-					<View
-						style={ [
-							modalIconWrapperStyle,
-							itemWidth && {
-								width: itemWidth,
-							},
-							isClipboardBlock && clipboardBlockStyles,
-						] }
-					>
-						{ blockIsNew && (
-							<Icon
-								icon={ sparkles }
-								style={ styles.newIndicator }
-							/>
-						) }
-						<View style={ modalIconStyle }>
-							<BlockIcon
-								icon={ item.icon }
-								size={ modalIconStyle.width }
-							/>
-						</View>
+	return (
+		<TouchableHighlight
+			style={ [
+				styles.touchableArea,
+				item.isDisabled ? styles.disabled : null,
+			] }
+			underlayColor="transparent"
+			activeOpacity={ 0.5 }
+			accessibilityRole="button"
+			accessibilityLabel={ accessibilityLabel }
+			onPress={ onPress }
+			disabled={ item.isDisabled }
+		>
+			<View style={ [ styles.modalItem, { width: maxWidth } ] }>
+				<View
+					style={ [
+						modalIconWrapperStyle,
+						itemWidth && {
+							width: itemWidth,
+						},
+						isClipboardBlock && clipboardBlockStyles,
+					] }
+				>
+					{ blockIsNew && (
+						<Icon icon={ sparkles } style={ styles.newIndicator } />
+					) }
+					<View style={ modalIconStyle }>
+						<BlockIcon
+							icon={ item.icon }
+							size={ modalIconStyle.width }
+						/>
 					</View>
-					<Text numberOfLines={ 3 } style={ modalItemLabelStyle }>
-						{ blockTitle }
-					</Text>
 				</View>
-			</TouchableHighlight>
-		);
-	}
+				<Text numberOfLines={ 3 } style={ modalItemLabelStyle }>
+					{ blockTitle }
+				</Text>
+			</View>
+		</TouchableHighlight>
+	);
 }
 
 const InserterButton = withPreferredColorScheme( MenuItem );

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

@@ -641,6 +641,7 @@ function ListViewBlock( {
 								tabIndex,
 								onClick: clearSettingsAnchorRect,
 								onFocus,
+								size: 'small',
 							} }
 							disableOpenOnArrowDown
 							expand={ expand }

package/src/components/list-view/style.scss

@@ -78,10 +78,7 @@
 		}
 
 		&:focus::after {
-			box-shadow:
-				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus)
-				var(--wp-block-synced-color);
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
 		}
 	}
 	&.is-selected .block-editor-list-view-block-contents,
@@ -308,7 +305,7 @@
 	.block-editor-list-view-block__menu-cell,
 	.block-editor-list-view-block__mover-cell {
 		line-height: 0;
-		width: $button-size;
+		width: $button-size-small + $grid-unit-05;
 		vertical-align: middle;
 
 		> * {
@@ -323,21 +320,6 @@
 				opacity: 1;
 			}
 		}
-
-		&,
-		.components-button.has-icon {
-			width: $button-size-small;
-			min-width: $button-size-small;
-			padding: 0;
-		}
-	}
-
-	.block-editor-list-view-block__menu-cell {
-		padding-right: $grid-unit-05;
-
-		.components-button.has-icon {
-			height: 24px;
-		}
 	}
 
 	.block-editor-list-view-block__mover-cell-alignment-wrapper {

package/src/components/media-replace-flow/style.scss

@@ -34,12 +34,6 @@
 			margin: 0; // Reset default LinkControl margins.
 		}
 
-		.block-editor-link-control__search-item-title,
-		.block-editor-link-control__search-item-info {
-			max-width: 200px;
-			white-space: nowrap;
-		}
-
 		.block-editor-link-control__tools {
 			justify-content: flex-end;
 			padding: $grid-unit-20 var(--wp-admin-border-width-focus) var(--wp-admin-border-width-focus);

package/src/components/publish-date-time-picker/README.md

@@ -32,6 +32,7 @@ const MyDateTimePicker = () => {
 					currentDate={ date }
 					onChange={ ( newDate ) => setDate( newDate ) }
 					onClose={ onClose }
+					title={ __( 'Select post date' ) }
 				/>
 			) }
 		/>
@@ -44,6 +45,14 @@ const MyDateTimePicker = () => {
 `PublishDateTimePicker` supports all of the props that
 [`DateTimePicker`](/packages/components/src/date-time#Props) supports, plus:
 
+### title
+
+The title displayed in the header of the popover that contains the `DateTimePicker`.
+
+- Type: `String`
+- Required: No
+- Default: `Publish`
+
 ### onClose
 
 Called when the user presses the close button.

package/src/components/publish-date-time-picker/index.js

@@ -18,6 +18,7 @@ export function PublishDateTimePicker(
 		showPopoverHeaderActions,
 		isCompact,
 		currentDate,
+		title,
 		...additionalProps
 	},
 	ref
@@ -33,7 +34,7 @@ export function PublishDateTimePicker(
 	return (
 		<div ref={ ref } className="block-editor-publish-date-time-picker">
 			<InspectorPopoverHeader
-				title={ __( 'Publish' ) }
+				title={ title || __( 'Publish' ) }
 				actions={
 					showPopoverHeaderActions
 						? [

package/src/components/url-popover/image-url-input-ui.js

@@ -21,6 +21,7 @@ import {
 	fullscreen,
 	linkOff,
 } from '@wordpress/icons';
+import { prependHTTP } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -149,7 +150,7 @@ const ImageURLInputUI = ( {
 					)?.linkDestination || LINK_DESTINATION_CUSTOM;
 
 				onChangeUrl( {
-					href: urlInput,
+					href: prependHTTP( urlInput ),
 					linkDestination: selectedDestination,
 					lightbox: { enabled: false },
 				} );

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

@@ -27,7 +27,9 @@ export default function useClickSelection() {
 				const clickedClientId = getBlockClientId( event.target );
 
 				if ( event.shiftKey ) {
-					if ( startClientId !== clickedClientId ) {
+					// When selecting a single block in a document by holding the shift key,
+					// don't mark this action as multiselection.
+					if ( startClientId && startClientId !== clickedClientId ) {
 						node.contentEditable = true;
 						// Firefox doesn't automatically move focus.
 						node.focus();

package/src/private-apis.js

@@ -39,6 +39,7 @@ import {
 	globalStylesDataKey,
 	globalStylesLinksDataKey,
 	sectionRootClientIdKey,
+	mediaEditKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
@@ -99,4 +100,5 @@ lock( privateApis, {
 	sectionRootClientIdKey,
 	CommentIconSlotFill,
 	CommentIconToolbarSlotFill,
+	mediaEditKey,
 } );

package/src/store/actions.js

@@ -1255,7 +1255,14 @@ export const mergeBlocks =
 		}
 
 		if ( ! blockAType.merge ) {
-			dispatch.selectBlock( blockA.clientId );
+			if ( isUnmodifiedBlock( blockB, 'content' ) ) {
+				dispatch.removeBlock(
+					clientIdB,
+					select.isBlockSelected( clientIdB )
+				);
+			} else {
+				dispatch.selectBlock( blockA.clientId );
+			}
 			return;
 		}
 

package/src/store/private-keys.js

@@ -3,3 +3,4 @@ export const globalStylesLinksDataKey = Symbol( 'globalStylesLinks' );
 export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
 export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );
 export const sectionRootClientIdKey = Symbol( 'sectionRootClientIdKey' );
+export const mediaEditKey = Symbol( 'mediaEditKey' );

package/src/store/test/actions.js

@@ -808,8 +808,16 @@ describe( 'actions', () => {
 			} );
 		} );
 
-		it( 'should only focus the blockA if the blockA has no merge function', () => {
-			registerBlockType( 'core/test-block', defaultBlockSettings );
+		it( 'should only focus the blockA if the blockA has no merge function and the content of blockB is modified', () => {
+			registerBlockType( 'core/test-block', {
+				...defaultBlockSettings,
+				attributes: {
+					content: {
+						type: 'string',
+						role: 'content',
+					},
+				},
+			} );
 			const blockA = deepFreeze( {
 				clientId: 'chicken',
 				name: 'core/test-block',
@@ -817,15 +825,20 @@ describe( 'actions', () => {
 			const blockB = deepFreeze( {
 				clientId: 'ribs',
 				name: 'core/test-block',
+				attributes: {
+					content: 'Updated content',
+				},
 			} );
 
 			const select = {
 				getBlock: ( clientId ) =>
 					[ blockA, blockB ].find( ( b ) => b.clientId === clientId ),
 				getBlockEditingMode: () => 'default',
+				isBlockSelected: () => false,
 			};
 			const dispatch = Object.assign( jest.fn(), {
 				selectBlock: jest.fn(),
+				removeBlock: jest.fn(),
 			} );
 
 			mergeBlocks(

package/src/utils/block-bindings.js

@@ -16,6 +16,7 @@ const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
 	'core/heading': [ 'content' ],
 	'core/image': [ 'id', 'url', 'title', 'alt' ],
 	'core/button': [ 'url', 'text', 'linkTarget', 'rel' ],
+	'core/post-date': [ 'datetime' ],
 };
 
 /**