@wordpress/block-library 10.1.1-next.v.202607070741.0 → 10.3.0

package/src/heading/edit.js

@@ -94,7 +94,7 @@ function HeadingEdit( props ) {
 			onChange={ onContentChange }
 			onMerge={ mergeBlocks }
 			onReplace={ onReplace }
-			onRemove={ () => onReplace( [] ) }
+			onRemove={ onReplace ? () => onReplace( [] ) : undefined }
 			placeholder={ placeholder || __( 'Heading' ) }
 			{ ...blockProps }
 		/>

package/src/html/modal.js

@@ -13,7 +13,11 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { PlainText, store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	PlainText,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { fullscreen, square } from '@wordpress/icons';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -25,6 +29,7 @@ import Preview from './preview';
 import { parseContent, serializeContent } from './utils';
 
 const { Tabs } = unlock( componentsPrivateApis );
+const { useNativeUndo } = unlock( blockEditorPrivateApis );
 
 export default function HTMLEditModal( { onRequestClose, content, onUpdate } ) {
 	// Parse content into separate sections and use as initial state
@@ -33,6 +38,9 @@ export default function HTMLEditModal( { onRequestClose, content, onUpdate } ) {
 	const [ editedCss, setEditedCss ] = useState( css );
 	const [ editedJs, setEditedJs ] = useState( js );
 	const [ isFullscreen, setIsFullscreen ] = useState( false );
+	// The fields hold local state that is only committed when the dialog is
+	// saved, so undo and redo within them must remain the browser's own.
+	const nativeUndoRef = useNativeUndo();
 
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 
@@ -132,7 +140,10 @@ export default function HTMLEditModal( { onRequestClose, content, onUpdate } ) {
 							align="stretch"
 							gap={ 8 }
 						>
-							<div className="block-library-html__modal-content">
+							<div
+								ref={ nativeUndoRef }
+								className="block-library-html__modal-content"
+							>
 								<Tabs.TabPanel
 									tabId="html"
 									focusable={ false }

package/src/icon/README.md

@@ -28,9 +28,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`ariaLabel`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#arialabel): `true`
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"left"`, `"center"`, `"right"`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
-- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
-  - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
-  - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):

package/src/icon/block.json

@@ -33,9 +33,11 @@
 		"align": [ "left", "center", "right" ],
 		"html": false,
 		"color": {
-			"background": true,
-			"text": true,
-			"__experimentalSkipSerialization": true
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"interactivity": {
 			"clientNavigation": true

package/src/icon/components/custom-inserter/icon-grid.js

@@ -3,13 +3,44 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
+import { useAsyncList } from '@wordpress/compose';
+import { useRef, useLayoutEffect } from '@wordpress/element';
+import { getScrollContainer } from '@wordpress/dom';
 
 /**
  * Internal dependencies
  */
 import HtmlRenderer from '../../../utils/html-renderer';
 
-export default function IconGrid( { icons, onChange, attributes } ) {
+const BATCH_SIZE = 20;
+
+export default function IconGrid( { icons, onChange, value } ) {
+	const shownIcons = useAsyncList( icons, {
+		step: BATCH_SIZE,
+	} );
+
+	// Scroll the selected icon into view, but wait until enough icons render
+	// below it so it can be centered rather than stuck at the bottom. Skip it
+	// if the user has already scrolled the list.
+	const selectedIconRef = useRef();
+	const selectedIndex =
+		icons?.findIndex( ( icon ) => icon.name === value ) ?? -1;
+	const isReadyToScroll =
+		selectedIndex >= 0 &&
+		( shownIcons.length >= selectedIndex + BATCH_SIZE ||
+			shownIcons.length === icons.length );
+
+	useLayoutEffect( () => {
+		const node = selectedIconRef.current;
+		if ( ! isReadyToScroll || ! node ) {
+			return;
+		}
+		if ( getScrollContainer( node )?.scrollTop ) {
+			return;
+		}
+		node.scrollIntoView( { block: 'center' } );
+	}, [ isReadyToScroll ] );
+
 	return (
 		<div className="wp-block-icon__inserter-grid">
 			{ ! icons?.length ? (
@@ -21,26 +52,24 @@ export default function IconGrid( { icons, onChange, attributes } ) {
 					className="wp-block-icon__inserter-grid-icons-list"
 					aria-label={ __( 'Icon library' ) }
 				>
-					{ icons.map( ( icon ) => {
+					{ shownIcons.map( ( icon ) => {
 						return (
 							<Button
 								key={ icon.name }
+								ref={
+									icon.name === value
+										? selectedIconRef
+										: undefined
+								}
 								className="wp-block-icon__inserter-grid-icons-list-item"
 								onClick={ () => onChange( icon.name ) }
 								variant={
-									icon.name === attributes?.icon
-										? 'primary'
-										: undefined
+									icon.name === value ? 'primary' : undefined
 								}
 								__next40pxDefaultSize
 							>
 								<span className="wp-block-icon__inserter-grid-icons-list-item-icon">
-									<HtmlRenderer
-										html={ icon.content }
-										wrapperProps={ {
-											style: { width: '24px' },
-										} }
-									/>
+									<HtmlRenderer html={ icon.content } />
 								</span>
 								<span className="wp-block-icon__inserter-grid-icons-list-item-title">
 									{ icon.label }

package/src/icon/components/custom-inserter/index.js

@@ -2,9 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Modal, SearchControl } from '@wordpress/components';
-import { useState, useMemo, useCallback } from '@wordpress/element';
+import { Modal, SearchControl, Spinner } from '@wordpress/components';
+import { Stack, Tabs } from '@wordpress/ui';
+import { useState, useMemo } from '@wordpress/element';
 import { useDebounce } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -12,27 +15,56 @@ import { useDebounce } from '@wordpress/compose';
 import IconGrid from './icon-grid';
 import { normalizeSearchInput } from '../../../utils/search-patterns';
 
-export default function CustomInserterModal( {
-	icons = [],
-	setInserterOpen,
-	attributes,
-	setAttributes,
-} ) {
+export default function CustomInserterModal( { onClose, value, onChange } ) {
 	const [ searchInput, setSearchInput ] = useState( '' );
+	const [ currentCollection, setCurrentCollection ] = useState( null );
 
 	const debouncedSetSearchInput = useDebounce( setSearchInput, 300 );
 
-	const setIcon = useCallback(
-		( name ) => {
-			setAttributes( {
-				icon: name,
-			} );
-			setInserterOpen( false );
+	const collections = useSelect(
+		( select ) =>
+			select( coreDataStore ).getEntityRecords(
+				'root',
+				'iconCollection'
+			),
+		[]
+	);
+
+	// Default to the collection the selected icon belongs to, otherwise the
+	// first collection.
+	const selectedCollection = value?.split( '/' )[ 0 ];
+	const collectionSlug =
+		currentCollection ??
+		( collections?.some( ( { slug } ) => slug === selectedCollection )
+			? selectedCollection
+			: collections?.[ 0 ]?.slug ) ??
+		null;
+
+	const { icons, hasResolvedIcons } = useSelect(
+		( select ) => {
+			if ( collectionSlug === null ) {
+				return { icons: null, hasResolvedIcons: false };
+			}
+			const query =
+				collectionSlug === '' ? {} : { collection: collectionSlug };
+			const { getEntityRecords, hasFinishedResolution } =
+				select( coreDataStore );
+			return {
+				icons: getEntityRecords( 'root', 'icon', query ),
+				hasResolvedIcons: hasFinishedResolution( 'getEntityRecords', [
+					'root',
+					'icon',
+					query,
+				] ),
+			};
 		},
-		[ setAttributes, setInserterOpen ]
+		[ collectionSlug ]
 	);
 
 	const filteredIcons = useMemo( () => {
+		if ( ! icons ) {
+			return [];
+		}
 		if ( searchInput ) {
 			const input = normalizeSearchInput( searchInput );
 			return icons.filter( ( icon ) => {
@@ -52,22 +84,63 @@ export default function CustomInserterModal( {
 		<Modal
 			className="wp-block-icon__inserter-modal"
 			title={ __( 'Icon library' ) }
-			onRequestClose={ () => setInserterOpen( false ) }
+			onRequestClose={ onClose }
 			isFullScreen
 		>
-			<div className="wp-block-icon__inserter">
-				<div className="wp-block-icon__inserter-header">
+			<Tabs.Root
+				className="wp-block-icon__inserter"
+				orientation="vertical"
+				value={ collectionSlug }
+				onValueChange={ setCurrentCollection }
+			>
+				<Stack
+					direction="column"
+					gap="lg"
+					className="wp-block-icon__inserter-sidebar"
+				>
 					<SearchControl
 						value={ searchInput }
 						onChange={ debouncedSetSearchInput }
 					/>
-				</div>
-				<IconGrid
-					icons={ filteredIcons }
-					onChange={ setIcon }
-					attributes={ attributes }
-				/>
-			</div>
+					<Tabs.List>
+						<Tabs.Tab value="">{ __( 'All' ) }</Tabs.Tab>
+						{ collections?.map( ( collection ) => (
+							<Tabs.Tab
+								key={ collection.slug }
+								value={ collection.slug }
+							>
+								{ collection.label }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.List>
+				</Stack>
+				{ [ { slug: '' }, ...( collections ?? [] ) ].map(
+					( collection ) => (
+						<Tabs.Panel
+							tabIndex={ -1 }
+							key={ collection.slug }
+							value={ collection.slug }
+							className="wp-block-icon__inserter-panel"
+						>
+							{ ! hasResolvedIcons ? (
+								<div
+									className="wp-block-icon__inserter-loading"
+									role="status"
+									aria-label={ __( 'Loading…' ) }
+								>
+									<Spinner />
+								</div>
+							) : (
+								<IconGrid
+									icons={ filteredIcons }
+									onChange={ onChange }
+									value={ value }
+								/>
+							) }
+						</Tabs.Panel>
+					)
+				) }
+			</Tabs.Root>
 		</Modal>
 	);
 }

package/src/icon/edit.js

@@ -74,20 +74,12 @@ export function Edit( { attributes, setAttributes } ) {
 	const borderProps = useBorderProps( attributes );
 	const dimensionsProps = useDimensionsProps( attributes );
 
-	const { selectedIcon, allIcons = [] } = useSelect(
+	const selectedIcon = useSelect(
 		( select ) => {
-			const { getEntityRecord, getEntityRecords } =
-				select( coreDataStore );
-			return {
-				selectedIcon: icon
-					? getEntityRecord( 'root', 'icon', icon )
-					: null,
-				allIcons: isInserterOpen
-					? getEntityRecords( 'root', 'icon' )
-					: undefined,
-			};
+			const { getEntityRecord } = select( coreDataStore );
+			return icon ? getEntityRecord( 'root', 'icon', icon ) : null;
 		},
-		[ isInserterOpen, icon ]
+		[ icon ]
 	);
 
 	const iconToDisplay = selectedIcon?.content || '';
@@ -218,7 +210,7 @@ export function Edit( { attributes, setAttributes } ) {
 			{ blockControls }
 			{ inspectorControls }
 			<div { ...useBlockProps() }>
-				{ icon ? (
+				{ iconToDisplay ? (
 					<HtmlRenderer
 						html={ iconToDisplay }
 						wrapperProps={ {
@@ -258,10 +250,12 @@ export function Edit( { attributes, setAttributes } ) {
 			</div>
 			{ isInserterOpen && (
 				<CustomInserterModal
-					icons={ allIcons }
-					setInserterOpen={ setInserterOpen }
-					attributes={ attributes }
-					setAttributes={ setAttributes }
+					onClose={ () => setInserterOpen( false ) }
+					value={ attributes.icon }
+					onChange={ ( name ) => {
+						setAttributes( { icon: name } );
+						setInserterOpen( false );
+					} }
 				/>
 			) }
 		</>

package/src/icon/editor.scss

@@ -1,22 +1,38 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
 
 .wp-block[data-align="center"] > .wp-block-icon {
 	display: flex;
 	justify-content: center;
 }
 
-// Style for the icon library modal.
-.wp-block-icon__inserter {
-	padding: 0 $grid-unit-30;
-	margin: 0 (-1 * $grid-unit-30);
+.wp-block-icon__inserter-sidebar {
+	padding-bottom: $grid-unit-30;
+
+	@include break-medium() {
+		overflow-x: visible;
+		overflow-y: auto;
+		position: absolute;
+		top: $header-height + $grid-unit-10;
+		left: 0;
+		bottom: 0;
+		width: $sidebar-width;
+		padding-top: $grid-unit-30;
+		padding-inline: $grid-unit-30;
+	}
+}
+
+.wp-block-icon__inserter-panel {
+	@include break-medium() {
+		margin-inline-start: $sidebar-width;
+	}
 }
 
-.wp-block-icon__inserter-header {
-	align-items: center;
+.wp-block-icon__inserter-loading {
 	display: flex;
-	justify-content: space-between;
-	margin-bottom: $grid-unit-20;
+	justify-content: center;
+	padding: $grid-unit-30;
 }
 
 .wp-block-icon__inserter-grid-icons-list {
@@ -37,14 +53,20 @@
 
 .wp-block-icon__inserter-grid-icons-list-item-icon {
 	padding: $grid-unit-15;
+
+	// Fit any icon within 24x24. The viewBox preserves the aspect ratio, so
+	// non-square icons are scaled and centered without distortion.
+	svg {
+		display: block;
+		width: $icon-size;
+		height: $icon-size;
+	}
 }
 
 .wp-block-icon__inserter-grid-icons-list-item-title {
 	font-size: $font-size-small;
 	padding: $grid-unit-05 $grid-unit-05 $grid-unit-10;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	overflow-wrap: break-word;
 }
 
 .wp-block-icon__toolbar-content {

package/src/image/README.md

@@ -79,7 +79,7 @@ _Defined via the [`styles`](https://developer.wordpress.org/block-editor/referen
 
 _Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
 
-- **dimensions**: `.wp-block-image img`
+- **dimensions**: `.wp-block-image img, .wp-block-image .components-placeholder`
 - **border**: `.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder`
 - **shadow**: `.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder`
 - **filter**:

package/src/image/block.json

@@ -141,7 +141,7 @@
 		}
 	},
 	"selectors": {
-		"dimensions": ".wp-block-image img",
+		"dimensions": ".wp-block-image img, .wp-block-image .components-placeholder",
 		"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
 		"shadow": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
 		"filter": {

package/src/image/edit.js

@@ -31,7 +31,6 @@ import { store as uploadStore } from '@wordpress/upload-media';
  * Internal dependencies
  */
 import { useUploadMediaFromBlobURL } from '../utils/hooks';
-import { getCarriedGifConversionAttributes } from '../utils/gif-conversion-attributes';
 import Image from './image';
 import { isValidFileType } from './utils';
 import { useMaxWidthObserver } from './use-max-width-observer';
@@ -238,57 +237,6 @@ export function ImageEdit( {
 			return;
 		}
 
-		// Switch to a converted GIF video block when the selected media is
-		// an animated GIF whose sideloaded video companion is available.
-		// Triggering off the upload's onChange (rather than watching the
-		// attachment record) means already-saved image blocks are left
-		// alone on page load - the explicit "Display as video" toolbar
-		// button is the path for converting those. `animated_video` is
-		// only ever set on GIF image attachments, so its presence is a
-		// sufficient signal that this swap applies.
-		//
-		// A gallery only accepts `core/image` children, so the swap is
-		// skipped there; the converted video is still sideloaded and
-		// stored for use elsewhere.
-		const rootClientId = getBlockRootClientId( clientId );
-		const isInGallery =
-			!! rootClientId && getBlockName( rootClientId ) === 'core/gallery';
-		if (
-			! isInGallery &&
-			media.media_details?.animated_video &&
-			media.url
-		) {
-			const dir = media.url.slice( 0, media.url.lastIndexOf( '/' ) + 1 );
-			const poster = media.media_details.animated_video_poster;
-			__unstableMarkNextChangeAsNotPersistent();
-			replaceBlock(
-				clientId,
-				createBlock( 'core/video', {
-					...getCarriedGifConversionAttributes( attributes ),
-					id: media.id,
-					src: dir + media.media_details.animated_video,
-					poster: poster ? dir + poster : undefined,
-					caption: media.caption?.raw ?? media.caption,
-					controls: false,
-					loop: true,
-					autoplay: true,
-					muted: true,
-					playsInline: true,
-					/*
-					 * Carry the GIF's intrinsic dimensions so the <video> keeps
-					 * its aspect ratio from the first paint. Without them the
-					 * element collapses to the browser-default size and then
-					 * jumps once the poster/metadata load, which shows up as a
-					 * brief duplicated image during the swap.
-					 */
-					width: media.media_details.width,
-					height: media.media_details.height,
-				} )
-			);
-			setTemporaryURL();
-			return;
-		}
-
 		const { imageDefaultSize } = getSettings();
 
 		// Try to use the previous selected image size if its available
@@ -405,11 +353,7 @@ export function ImageEdit( {
 
 	const isSideloading = useSelect(
 		( select ) => {
-			if (
-				( ! window.__clientSideMediaProcessing &&
-					! window.__heicUploadSupport ) ||
-				! id
-			) {
+			if ( ! window.__clientSideMediaProcessing || ! id ) {
 				return false;
 			}
 			return select( uploadStore ).isUploadingById( id );

package/src/image/editor.scss

@@ -22,12 +22,16 @@ figure.wp-block-image:not(.wp-block) {
 	// width (e.g. a small animated GIF being transcoded to a video) otherwise
 	// leaves the spinner off to one side. Wide and full alignments keep their
 	// own width.
-	&.is-transient:not(.alignwide):not(.alignfull) {
+	// The media editor swap state marks the img rather than the figure (its
+	// state lives alongside the img's load handlers), hence the :has() variant.
+	&.is-transient:not(.alignwide):not(.alignfull),
+	&:has(img.is-swapping-media):not(.alignwide):not(.alignfull) {
 		width: fit-content;
 	}
 
 	.is-applying img,
-	&.is-transient img {
+	&.is-transient img,
+	img.is-swapping-media {
 		opacity: 0.3;
 	}
 
@@ -123,47 +127,6 @@ figure.wp-block-image:not(.wp-block) {
 	position: relative;
 }
 
-.wp-block-image__crop-area {
-	position: relative;
-	max-width: 100%;
-	width: 100%;
-	overflow: hidden;
-
-	.reactEasyCrop_Container {
-		// The linked Image block has `pointer-events: none` applied. Override it
-		// here to enable the crop action.
-		pointer-events: auto;
-
-		// This removes the border from the img within the image cropper so it
-		// can be applied to the cropper itself. This then allows the image to be
-		// cropped within the visual border providing more accurate editing and
-		// smoother UX.
-		.reactEasyCrop_Image {
-			border: none;
-			border-radius: 0; // Prevent's theme.json radius bleeding into cropper.
-		}
-	}
-}
-
-.wp-block-image__crop-icon {
-	padding: 0 8px;
-	min-width: 48px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	svg {
-		fill: currentColor;
-	}
-}
-
-.wp-block-image__zoom {
-	.components-popover__content {
-		min-width: 260px;
-		overflow: visible !important;
-	}
-}
-
 .wp-block-image__toolbar_content_textarea__container {
 	padding: $grid-unit;
 }
@@ -172,4 +135,3 @@ figure.wp-block-image:not(.wp-block) {
 	// Corresponds to the size of the textarea in the block inspector.
 	width: 250px;
 }
-