@wordpress/block-library 10.1.0 → 10.2.0

package/src/html/save.js

@@ -1,8 +1,5 @@
-/**
- * WordPress dependencies
- */
-import { RawHTML } from '@wordpress/element';
-
-export default function save( { attributes } ) {
-	return <RawHTML>{ attributes.content }</RawHTML>;
+// The block's markup is serialized from its `innerContent` (static HTML
+// fragments interleaved with inner blocks), not from a save implementation.
+export default function save() {
+	return null;
 }

package/src/html/test/index.js

@@ -0,0 +1,143 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	registerBlockType,
+	serialize,
+	switchToBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+import { create, toHTMLString } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import * as html from '../';
+
+describe( 'core/html', () => {
+	beforeAll( () => {
+		registerBlockType(
+			{ name: html.name, ...html.metadata },
+			html.settings
+		);
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( html.name );
+	} );
+
+	describe( 'deprecated content attribute', () => {
+		it( 'preserves content passed to createBlock', () => {
+			const block = createBlock( 'core/html', {
+				content: '<marquee>Hello</marquee>',
+			} );
+
+			// The attribute is kept so it can be migrated rather than dropped.
+			expect( block.attributes.content ).toBe(
+				'<marquee>Hello</marquee>'
+			);
+		} );
+
+		it( 'keeps the content attribute out of the block delimiter', () => {
+			const block = createBlock( 'core/html', {
+				content: '<marquee>Hello</marquee>',
+			} );
+
+			// `role: 'local'` prevents the attribute from being written into
+			// the comment delimiter as JSON.
+			expect( serialize( block ) ).not.toContain( '{"content"' );
+		} );
+	} );
+
+	describe( 'inner content', () => {
+		it( 'serializes from inner content interleaved with inner blocks', () => {
+			registerBlockType( 'core/paragraph', {
+				apiVersion: 3,
+				category: 'text',
+				title: 'Paragraph',
+				attributes: {
+					content: { type: 'string', source: 'html' },
+				},
+				save: ( { attributes } ) => attributes.content || null,
+			} );
+
+			const block = createBlock(
+				'core/html',
+				{},
+				[ createBlock( 'core/paragraph', { content: 'Editable' } ) ],
+				[ '<div>', null, '</div>' ]
+			);
+
+			expect( serialize( block ) ).toBe(
+				'<!-- wp:html -->\n' +
+					'<div><!-- wp:paragraph -->\n' +
+					'Editable\n' +
+					'<!-- /wp:paragraph --></div>\n' +
+					'<!-- /wp:html -->'
+			);
+
+			unregisterBlockType( 'core/paragraph' );
+		} );
+	} );
+
+	describe( 'transform from core/code', () => {
+		beforeEach( () => {
+			registerBlockType( 'core/paragraph', {
+				apiVersion: 3,
+				category: 'text',
+				title: 'Paragraph',
+				attributes: {
+					content: { type: 'string', source: 'html' },
+				},
+				save: ( { attributes } ) => attributes.content || null,
+			} );
+			// A minimal stand-in: the transform only reads `attributes.content`.
+			registerBlockType( 'core/code', {
+				apiVersion: 3,
+				category: 'text',
+				title: 'Code',
+				attributes: {
+					content: { type: 'string', source: 'html' },
+				},
+				save: ( { attributes } ) => attributes.content || null,
+			} );
+		} );
+
+		afterEach( () => {
+			unregisterBlockType( 'core/code' );
+			unregisterBlockType( 'core/paragraph' );
+		} );
+
+		// Mirrors how the code block stores HTML-block source: as escaped,
+		// plain-text rich text.
+		const asCodeContent = ( source ) =>
+			toHTMLString( { value: create( { text: source } ) } );
+
+		it( 'restores block delimiters as editable inner blocks', () => {
+			const codeBlock = createBlock( 'core/code', {
+				content: asCodeContent(
+					'<div><!-- wp:paragraph -->\nEditable\n<!-- /wp:paragraph --></div>'
+				),
+			} );
+
+			const [ htmlBlock ] = switchToBlockType( codeBlock, 'core/html' );
+
+			expect( htmlBlock.name ).toBe( 'core/html' );
+			expect( htmlBlock.innerBlocks ).toHaveLength( 1 );
+			expect( htmlBlock.innerBlocks[ 0 ].name ).toBe( 'core/paragraph' );
+			expect( htmlBlock.innerContent ).toContain( null );
+		} );
+
+		it( 'keeps plain code (no delimiters) as a single static fragment', () => {
+			const codeBlock = createBlock( 'core/code', {
+				content: asCodeContent( '<div>Just static HTML</div>' ),
+			} );
+
+			const [ htmlBlock ] = switchToBlockType( codeBlock, 'core/html' );
+
+			expect( htmlBlock.innerBlocks ).toHaveLength( 0 );
+			expect( htmlBlock.innerContent ).not.toContain( null );
+		} );
+	} );
+} );

package/src/html/transforms.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, parse } from '@wordpress/blocks';
 import { create } from '@wordpress/rich-text';
 
 const transforms = {
@@ -10,11 +10,16 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/code' ],
 			transform: ( { content: html } ) => {
-				return createBlock( 'core/html', {
-					// The code block may output HTML formatting, so convert it
-					// to plain text.
-					content: create( { html } ).text,
-				} );
+				// The code block may output HTML formatting, so convert it
+				// to plain text, then parse it so any block delimiters become
+				// editable inner blocks at their positions within the static
+				// HTML, rather than inert comment text.
+				const text = create( { html } ).text;
+				const [ block ] = parse(
+					`<!-- wp:html -->\n${ text }\n<!-- /wp:html -->`
+				);
+
+				return block ?? createBlock( 'core/html', {}, [], [ text ] );
 			},
 		},
 	],

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,6 +53,14 @@
 
 .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 {
@@ -45,6 +69,7 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	width: 100%;
 }
 
 .wp-block-icon__toolbar-content {

package/src/icon/index.php

@@ -19,13 +19,6 @@ function render_block_core_icon( $attributes ) {
 		return;
 	}
 
-	$registry = WP_Icons_Registry::get_instance();
-	$icon     = $registry->get_registered_icon( $attributes['icon'] );
-
-	if ( is_null( $icon ) ) {
-		return;
-	}
-
 	// Text color and background color.
 	$color_styles = array();
 
@@ -86,54 +79,54 @@ function render_block_core_icon( $attributes ) {
 		),
 	);
 
-	$processor = new WP_HTML_Tag_Processor( $icon['content'] );
-	$processor->next_tag( 'svg' );
+	$svg = wp_get_icon(
+		$attributes['icon'],
+		array(
+			// Width is applied via the dimensions block support styles below.
+			'size'  => null,
+			'class' => $styles['classnames'] ?? '',
+			'label' => $attributes['ariaLabel'] ?? '',
+		)
+	);
 
-	if ( ! empty( $styles['css'] ) ) {
-		$processor->set_attribute( 'style', $styles['css'] );
-	}
-	if ( ! empty( $styles['classnames'] ) ) {
-		$processor->add_class( $styles['classnames'] );
+	if ( '' === $svg ) {
+		return;
 	}
 
-	// Apply flip classes to the SVG.
-	$flip_horizontal = $attributes['flipHorizontal'] ?? false;
-	$flip_vertical   = $attributes['flipVertical'] ?? false;
-
-	if ( $flip_horizontal ) {
-		$processor->add_class( 'is-flip-horizontal' );
-	}
-	if ( $flip_vertical ) {
-		$processor->add_class( 'is-flip-vertical' );
-	}
+	$processor = new WP_HTML_Tag_Processor( $svg );
+	if ( $processor->next_tag( 'svg' ) ) {
+		if ( ! empty( $styles['css'] ) ) {
+			$processor->set_attribute( 'style', $styles['css'] );
+		}
 
-	$rotation = isset( $attributes['rotation'] ) ? (int) $attributes['rotation'] : 0;
+		// Apply flip classes to the SVG.
+		$flip_horizontal = $attributes['flipHorizontal'] ?? false;
+		$flip_vertical   = $attributes['flipVertical'] ?? false;
 
-	if ( $rotation ) {
-		$current_style = $processor->get_attribute( 'style' ) ?? '';
-		$rotation_css  = 'rotate: ' . $rotation . 'deg;';
-		if ( $current_style ) {
-			$processor->set_attribute( 'style', $current_style . ' ' . $rotation_css );
-		} else {
-			$processor->set_attribute( 'style', $rotation_css );
+		if ( $flip_horizontal ) {
+			$processor->add_class( 'is-flip-horizontal' );
+		}
+		if ( $flip_vertical ) {
+			$processor->add_class( 'is-flip-vertical' );
 		}
-	}
 
-	$aria_label = ! empty( $attributes['ariaLabel'] ) ? $attributes['ariaLabel'] : '';
+		$rotation = isset( $attributes['rotation'] ) ? (int) $attributes['rotation'] : 0;
+
+		if ( $rotation ) {
+			$current_style = $processor->get_attribute( 'style' ) ?? '';
+			$rotation_css  = 'rotate: ' . $rotation . 'deg;';
+			if ( $current_style ) {
+				$processor->set_attribute( 'style', $current_style . ' ' . $rotation_css );
+			} else {
+				$processor->set_attribute( 'style', $rotation_css );
+			}
+		}
 
-	if ( ! $aria_label ) {
-		// Icon is decorative, hide it from screen readers.
-		$processor->set_attribute( 'aria-hidden', 'true' );
-		$processor->set_attribute( 'focusable', 'false' );
-	} else {
-		$processor->set_attribute( 'role', 'img' );
-		$processor->set_attribute( 'aria-label', $aria_label );
+		$svg = $processor->get_updated_html();
 	}
 
-	// Return the updated SVG markup.
-	$svg        = $processor->get_updated_html();
-	$attributes = get_block_wrapper_attributes();
-	return sprintf( '<div %s>%s</div>', $attributes, $svg );
+	$wrapper_attributes = get_block_wrapper_attributes();
+	return sprintf( '<div %s>%s</div>', $wrapper_attributes, $svg );
 }
 
 

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": {