@wordpress/block-editor 12.26.0 → 13.0.1

package/src/components/inserter/style.scss

@@ -115,12 +115,25 @@ $block-inserter-tabs-height: 44px;
 	flex-direction: column;
 	overflow: hidden;
 
+	.block-editor-inserter__tablist-and-close-button {
+		border-bottom: $border-width solid $gray-300;
+		padding-right: $grid-unit-15;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.block-editor-inserter__close-button {
+		/* stylelint-disable-next-line property-disallowed-list -- This should be refactored to avoid order if possible */
+		order: 1;
+		align-self: center;
+	}
+
 	.block-editor-inserter__tablist {
 		width: 100%;
+		margin-bottom: -$border-width;
 
 		button[role="tab"] {
 			flex-grow: 1;
-			margin-bottom: -$border-width;
 			&[id$="reusable"] {
 				flex-grow: inherit;
 				// These are to align the `reusable` icon with the search icon.
@@ -240,6 +253,10 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+.block-editor-inserter__insertable-blocks-at-selection {
+	border-bottom: $border-width solid $gray-200;
+}
+
 .block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
 	padding: $grid-unit-20;
@@ -316,27 +333,35 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__category-panel {
 	background: $gray-100;
-	border-left: $border-width solid $gray-200;
-	border-right: $border-width solid $gray-200;
+	border-top: $border-width solid $gray-200;
+	box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 	position: absolute;
-	top: 0;
+	top: -$border-width;
 	left: 0;
-	height: 100%;
+	height: calc(100% + #{$border-width});
 	width: 100%;
 	padding: 0 $grid-unit-20;
 	display: flex;
 	flex-direction: column;
 
 	@include break-medium {
+		border-left: $border-width solid $gray-200;
 		padding: 0;
 		left: 100%;
 		width: 300px;
 	}
+
+	.block-editor-inserter__media-list,
+	.block-editor-block-patterns-list {
+		padding: 0 $grid-unit-30 $grid-unit-20;
+	}
 }
 
 .block-editor-inserter__patterns-category-panel-header {
-	padding: 16px $grid-unit-30;
+	padding: $grid-unit-10 $grid-unit-30;
 }
+
 .block-editor-inserter__patterns-category-no-results {
 	margin-top: $grid-unit-30;
 }
@@ -346,7 +371,6 @@ $block-inserter-tabs-height: 44px;
 	overflow-y: auto;
 	flex-grow: 1;
 	height: 100%;
-	padding: $grid-unit-20 $grid-unit-30;
 }
 
 .block-editor-inserter__preview-content {
@@ -507,8 +531,8 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__patterns-category-panel-title {
-	font-size: calc(1.25 * 13px);
+.components-heading.block-editor-inserter__patterns-category-panel-title {
+	font-weight: 500;
 }
 
 .block-editor-inserter__patterns-explore-button,
@@ -540,7 +564,7 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	.block-editor-inserter__media-panel-search {
-		padding: $grid-unit-20 $grid-unit-30 0;
+		padding: $grid-unit-20 $grid-unit-30 $grid-unit-10;
 		// TODO: Consider using the Theme component to automatically adapt to a gray background.
 		&:not(:focus-within) {
 			--wp-components-color-background: #{$white};
@@ -552,7 +576,6 @@ $block-inserter-tabs-height: 44px;
 	position: relative;
 	cursor: pointer;
 	margin-bottom: $grid-unit-30;
-	box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
 
 	&.is-placeholder {
 		min-height: 100px;
@@ -563,8 +586,8 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	&.is-hovered {
-		.block-editor-inserter__media-list__item-preview {
-			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
+		.block-editor-inserter__media-list__item-preview > * {
+			outline-color: rgba($black, 0.3);
 		}
 
 		.block-editor-inserter__media-list__item-preview-options > button {
@@ -611,6 +634,9 @@ $block-inserter-tabs-height: 44px;
 		> * {
 			margin: 0 auto;
 			max-width: 100%;
+			outline: $border-width solid rgba($black, 0.1);
+			outline-offset: -$border-width;
+			border-radius: $radius-block-ui;
 		}
 
 		.block-editor-inserter__media-list__item-preview-spinner {
@@ -625,11 +651,12 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 
-	&:focus .block-editor-inserter__media-list__item-preview {
-		box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent;
+	&:focus .block-editor-inserter__media-list__item-preview > * {
+		outline-color: var(--wp-admin-theme-color);
+		outline-width: var(--wp-admin-border-width-focus);
+		outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
+		transition: outline 0.1s linear;
+		@include reduce-motion("transition");
 	}
 }
 

package/src/components/inserter/tabs.js

@@ -39,9 +39,9 @@ function InserterTabs( { onSelect, children, onClose, selectedTab }, ref ) {
 	return (
 		<div className="block-editor-inserter__tabs" ref={ ref }>
 			<Tabs onSelect={ onSelect } selectedTabId={ selectedTab }>
-				<div className="block-editor-inserter-sidebar__header">
+				<div className="block-editor-inserter__tablist-and-close-button">
 					<Button
-						className="block-editor-inserter-sidebar__close-button"
+						className="block-editor-inserter__close-button"
 						icon={ closeSmall }
 						label={ __( 'Close block inserter' ) }
 						onClick={ () => onClose() }

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

@@ -52,11 +52,9 @@ export default function InspectorControlsFill( {
 	return (
 		<>
 			<Fill { ...props }>
-				{
-					<BottomSheetConsumer>
-						{ () => <View>{ children }</View> }
-					</BottomSheetConsumer>
-				}
+				<BottomSheetConsumer>
+					{ () => <View>{ children }</View> }
+				</BottomSheetConsumer>
 			</Fill>
 			{ Children.count( children ) > 0 && <BlockSettingsButton /> }
 		</>

package/src/components/inspector-controls-tabs/index.js

@@ -5,6 +5,8 @@ import {
 	Button,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -24,6 +26,10 @@ export default function InspectorControlsTabs( {
 	hasBlockStyles,
 	tabs,
 } ) {
+	const showIconLabels = useSelect( ( select ) => {
+		return select( preferencesStore ).get( 'core', 'showIconLabels' );
+	}, [] );
+
 	// The tabs panel will mount before fills are rendered to the list view
 	// slot. This means the list view tab isn't initially included in the
 	// available tabs so the panel defaults selection to the settings tab
@@ -43,10 +49,16 @@ export default function InspectorControlsTabs( {
 							tabId={ tab.name }
 							render={
 								<Button
-									icon={ tab.icon }
-									label={ tab.title }
+									icon={
+										! showIconLabels ? tab.icon : undefined
+									}
+									label={
+										! showIconLabels ? tab.title : undefined
+									}
 									className={ tab.className }
-								/>
+								>
+									{ showIconLabels && tab.title }
+								</Button>
 							}
 						/>
 					) ) }

package/src/components/inspector-controls-tabs/style.scss

@@ -1,15 +1,7 @@
 .show-icon-labels {
 	.block-editor-block-inspector__tabs [role="tablist"] {
-		.components-button.has-icon {
-			// Hide the button icons when labels are set to display...
-			svg {
-				display: none;
-			}
-			// ... and display labels.
-			// Uses ::before as ::after is already used for active tab styling.
-			&::before {
-				content: attr(aria-label);
-			}
+		.components-button {
+			justify-content: center;
 		}
 	}
 }

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

@@ -220,7 +220,6 @@ function LinkControl( {
 		// because otherwise using the keyboard to select text
 		// *within* the link format is not possible.
 		if ( isMounting.current ) {
-			isMounting.current = false;
 			return;
 		}
 
@@ -238,6 +237,16 @@ function LinkControl( {
 		isEndingEditWithFocus.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
+	// The component mounting reference is maintained separately
+	// to correctly reset values in `StrictMode`.
+	useEffect( () => {
+		isMounting.current = false;
+
+		return () => {
+			isMounting.current = true;
+		};
+	}, [] );
+
 	const hasLinkValue = value?.url?.trim()?.length > 0;
 
 	/**

package/src/components/link-control/link-preview.js

@@ -149,6 +149,7 @@ export default function LinkPreview( {
 						isEmptyURL || showIconLabels ? '' : ': ' + value.url
 					) }
 					ref={ ref }
+					__experimentalIsFocusable
 					disabled={ isEmptyURL }
 					size="compact"
 				/>

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

@@ -125,7 +125,7 @@ const LinkControlSearchInput = forwardRef(
 					className={ className }
 					value={ value }
 					onChange={ onInputChange }
-					placeholder={ placeholder ?? __( 'Search or type url' ) }
+					placeholder={ placeholder ?? __( 'Search or type URL' ) }
 					__experimentalRenderSuggestions={
 						showSuggestions ? handleRenderSuggestions : null
 					}

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

@@ -36,13 +36,19 @@ $block-editor-link-control-number-of-actions: 1;
 		}
 
 		.block-editor-link-control__search-item-top {
-			gap: $grid-unit-10;
+			gap: $grid-unit-05;
+			flex-wrap: wrap;
 
 			.components-button.has-icon {
-				min-width: inherit;
-				width: min-content;
+				width: auto;
+				padding: $grid-unit-05;
 			}
 		}
+
+		.is-preview .block-editor-link-control__search-item-header {
+			min-width: 100%;
+			margin-right: 0;
+		}
 	}
 }
 

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

@@ -77,7 +77,7 @@ const ListViewBlockContents = forwardRef(
 				<BlockDraggable
 					appendToOwnerDocument
 					clientIds={ draggableClientIds }
-					cloneClassname={ 'block-editor-list-view-draggable-chip' }
+					cloneClassname="block-editor-list-view-draggable-chip"
 				>
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton

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

@@ -452,7 +452,7 @@ export function MediaPlaceholder( {
 				multiple={ multiple }
 				onSelect={ onSelect }
 				allowedTypes={ allowedTypes }
-				mode={ 'browse' }
+				mode="browse"
 				value={
 					Array.isArray( value )
 						? value.map( ( { id } ) => id )

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

@@ -164,7 +164,7 @@ function MediaPlaceholder( props ) {
 						activeOpacity={ 0.5 }
 						accessibilityLabel={ accessibilityLabel }
 						style={ buttonStyles }
-						accessibilityRole={ 'button' }
+						accessibilityRole="button"
 						accessibilityHint={ accessibilityHint }
 						hitSlop={ hitSlop }
 						onPress={ onButtonPress( open ) }
@@ -181,7 +181,7 @@ function MediaPlaceholder( props ) {
 					activeOpacity={ 0.5 }
 					accessibilityLabel={ accessibilityLabel }
 					style={ styles[ 'media-placeholder__appender' ] }
-					accessibilityRole={ 'button' }
+					accessibilityRole="button"
 					accessibilityHint={ accessibilityHint }
 					hitSlop={ hitSlop }
 					onPress={ onButtonPress( open ) }

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

@@ -9,7 +9,10 @@ import { View } from 'react-native';
 import { Component } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { subscribeMediaUpload } from '@wordpress/react-native-bridge';
+import {
+	subscribeMediaUpload,
+	requestImageUploadCancel,
+} from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -44,12 +47,17 @@ export class MediaUploadProgress extends Component {
 	}
 
 	componentWillUnmount() {
+		const { isUploadInProgress, isUploadFailed } = this.state;
+		const { mediaId } = this.props;
+
+		if ( isUploadInProgress || isUploadFailed ) {
+			requestImageUploadCancel( mediaId );
+		}
 		this.removeMediaUploadListener();
 	}
 
 	mediaUpload( payload ) {
 		const { mediaId } = this.props;
-
 		if (
 			payload.mediaId !== mediaId ||
 			( payload.state === this.state.uploadState &&
@@ -58,6 +66,11 @@ export class MediaUploadProgress extends Component {
 			return;
 		}
 
+		if ( payload?.mediaUrl && ! payload.state ) {
+			this.updateMediaThumbnail( payload );
+			return;
+		}
+
 		switch ( payload.state ) {
 			case MEDIA_UPLOAD_STATE_UPLOADING:
 				this.updateMediaProgress( payload );
@@ -89,6 +102,13 @@ export class MediaUploadProgress extends Component {
 		}
 	}
 
+	updateMediaThumbnail( payload ) {
+		const { onUpdateMediaProgress } = this.props;
+		if ( onUpdateMediaProgress ) {
+			onUpdateMediaProgress( payload );
+		}
+	}
+
 	finishMediaUploadWithSuccess( payload ) {
 		this.setState( {
 			uploadState: payload.state,

package/src/components/provider/with-registry-provider.js

@@ -1,12 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
-import {
-	withRegistry,
-	createRegistry,
-	RegistryProvider,
-} from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -15,41 +11,40 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import { storeConfig } from '../../store';
 import { STORE_NAME as blockEditorStoreName } from '../../store/constants';
 
-const withRegistryProvider = createHigherOrderComponent(
-	( WrappedComponent ) => {
-		return withRegistry(
-			( { useSubRegistry = true, registry, ...props } ) => {
-				if ( ! useSubRegistry ) {
-					return (
-						<WrappedComponent registry={ registry } { ...props } />
-					);
-				}
-
-				const [ subRegistry, setSubRegistry ] = useState( null );
-				useEffect( () => {
-					const newRegistry = createRegistry( {}, registry );
-					newRegistry.registerStore(
-						blockEditorStoreName,
-						storeConfig
-					);
-					setSubRegistry( newRegistry );
-				}, [ registry ] );
+function getSubRegistry( subRegistries, registry, useSubRegistry ) {
+	if ( ! useSubRegistry ) {
+		return registry;
+	}
+	let subRegistry = subRegistries.get( registry );
+	if ( ! subRegistry ) {
+		subRegistry = createRegistry( {}, registry );
+		subRegistry.registerStore( blockEditorStoreName, storeConfig );
+		subRegistries.set( registry, subRegistry );
+	}
+	return subRegistry;
+}
 
-				if ( ! subRegistry ) {
-					return null;
-				}
+const withRegistryProvider = createHigherOrderComponent(
+	( WrappedComponent ) =>
+		( { useSubRegistry = true, ...props } ) => {
+			const registry = useRegistry();
+			const [ subRegistries ] = useState( () => new WeakMap() );
+			const subRegistry = getSubRegistry(
+				subRegistries,
+				registry,
+				useSubRegistry
+			);
 
-				return (
-					<RegistryProvider value={ subRegistry }>
-						<WrappedComponent
-							registry={ subRegistry }
-							{ ...props }
-						/>
-					</RegistryProvider>
-				);
+			if ( subRegistry === registry ) {
+				return <WrappedComponent registry={ registry } { ...props } />;
 			}
-		);
-	},
+
+			return (
+				<RegistryProvider value={ subRegistry }>
+					<WrappedComponent registry={ subRegistry } { ...props } />
+				</RegistryProvider>
+			);
+		},
 	'withRegistryProvider'
 );
 

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { DateTimePicker } from '@wordpress/components';
+import { DateTimePicker, TimePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
 import { getSettings } from '@wordpress/date';
@@ -11,29 +11,57 @@ import { getSettings } from '@wordpress/date';
  */
 import InspectorPopoverHeader from '../inspector-popover-header';
 
-function PublishDateTimePicker(
-	{ onClose, onChange, ...additionalProps },
+export function PublishDateTimePicker(
+	{
+		onClose,
+		onChange,
+		showPopoverHeaderActions,
+		isCompact,
+		currentDate,
+		...additionalProps
+	},
 	ref
 ) {
+	const datePickerProps = {
+		startOfWeek: getSettings().l10n.startOfWeek,
+		onChange,
+		currentDate: isCompact ? undefined : currentDate,
+		currentTime: isCompact ? currentDate : undefined,
+		...additionalProps,
+	};
+	const DatePickerComponent = isCompact ? TimePicker : DateTimePicker;
 	return (
 		<div ref={ ref } className="block-editor-publish-date-time-picker">
 			<InspectorPopoverHeader
 				title={ __( 'Publish' ) }
-				actions={ [
-					{
-						label: __( 'Now' ),
-						onClick: () => onChange?.( null ),
-					},
-				] }
+				actions={
+					showPopoverHeaderActions
+						? [
+								{
+									label: __( 'Now' ),
+									onClick: () => onChange?.( null ),
+								},
+						  ]
+						: undefined
+				}
 				onClose={ onClose }
 			/>
-			<DateTimePicker
-				startOfWeek={ getSettings().l10n.startOfWeek }
-				onChange={ onChange }
-				{ ...additionalProps }
-			/>
+			<DatePickerComponent { ...datePickerProps } />
 		</div>
 	);
 }
 
-export default forwardRef( PublishDateTimePicker );
+export const PrivatePublishDateTimePicker = forwardRef( PublishDateTimePicker );
+
+function PublicPublishDateTimePicker( props, ref ) {
+	return (
+		<PrivatePublishDateTimePicker
+			{ ...props }
+			showPopoverHeaderActions
+			isCompact={ false }
+			ref={ ref }
+		/>
+	);
+}
+
+export default forwardRef( PublicPublishDateTimePicker );

package/src/components/resolution-tool/index.js

@@ -49,7 +49,7 @@ export default function ResolutionTool( {
 				options={ options }
 				onChange={ onChange }
 				help={ __( 'Select the size of the source image.' ) }
-				size={ '__unstable-large' }
+				size="__unstable-large"
 			/>
 		</ToolsPanelItem>
 	);

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

@@ -11,6 +11,7 @@ import {
 	useCallback,
 	forwardRef,
 	createContext,
+	useContext,
 } from '@wordpress/element';
 import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useMergeRefs, useInstanceId } from '@wordpress/compose';
@@ -39,6 +40,7 @@ import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
 import { unlock } from '../../lock-unlock';
 import { canBindBlock } from '../../hooks/use-bindings-attributes';
+import BlockContext from '../block-context';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -121,6 +123,7 @@ export function RichTextWrapper(
 	const context = useBlockEditContext();
 	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
 	const blockBindings = context[ blockBindingsKey ];
+	const blockContext = useContext( BlockContext );
 	const selector = ( select ) => {
 		// Avoid subscribing to the block editor store if the block is not
 		// selected.
@@ -170,7 +173,7 @@ export function RichTextWrapper(
 				const { getBlockBindingsSource } = unlock(
 					select( blocksStore )
 				);
-				for ( const [ attribute, args ] of Object.entries(
+				for ( const [ attribute, binding ] of Object.entries(
 					blockBindings
 				) ) {
 					if (
@@ -180,13 +183,16 @@ export function RichTextWrapper(
 						break;
 					}
 
-					// If the source is not defined, or if its value of `lockAttributesEditing` is `true`, disable it.
+					// If the source is not defined, or if its value of `canUserEditValue` is `false`, disable it.
 					const blockBindingsSource = getBlockBindingsSource(
-						args.source
+						binding.source
 					);
 					if (
-						! blockBindingsSource ||
-						blockBindingsSource.lockAttributesEditing
+						! blockBindingsSource?.canUserEditValue( {
+							select,
+							context: blockContext,
+							args: binding.args,
+						} )
 					) {
 						_disableBoundBlocks = true;
 						break;

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

@@ -402,7 +402,8 @@ export class RichText extends Component {
 		this.comesFromAztec = true;
 		this.firedAfterTextChanged = event.nativeEvent.firedAfterTextChanged;
 		const value = this.createRecord();
-		const { start, end, text } = value;
+		const { start, end, text, activeFormats } = value;
+		const hasActiveFormats = activeFormats && !! activeFormats.length;
 		let newValue;
 
 		// Always handle full content deletion ourselves.
@@ -415,8 +416,8 @@ export class RichText extends Component {
 
 		// Only process delete if the key press occurs at an uncollapsed edge.
 		if (
-			! onDelete ||
 			! isCollapsed( value ) ||
+			hasActiveFormats ||
 			( isReverse && start !== 0 ) ||
 			( ! isReverse && end !== text.length )
 		) {