@wordpress/block-library 10.1.0 → 10.2.0

package/src/latest-posts/test/deprecated.js

@@ -0,0 +1,153 @@
+/**
+ * WordPress dependencies
+ */
+// Load block support registration filters.
+import '@wordpress/block-editor';
+import {
+	getBlockType,
+	parse,
+	registerBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import deprecated from '../deprecated';
+import metadata from '../block.json';
+
+describe( 'Latest Posts deprecations', () => {
+	beforeAll( () => {
+		if ( getBlockType( metadata.name ) ) {
+			unregisterBlockType( metadata.name );
+		}
+		registerBlockType( metadata, {
+			deprecated,
+			save: () => null,
+		} );
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( metadata.name );
+	} );
+
+	it( 'migrates legacy grid layout attributes to layout support attributes', () => {
+		const migratedAttributes = deprecated[ 0 ].migrate( {
+			postLayout: 'grid',
+			columns: 4,
+			postsToShow: 3,
+		} );
+
+		expect( migratedAttributes ).toEqual( {
+			layout: {
+				type: 'grid',
+				columnCount: 4,
+			},
+			postsToShow: 3,
+		} );
+	} );
+
+	it( 'migrates legacy grid layout attributes using the legacy columns default', () => {
+		const migratedAttributes = deprecated[ 0 ].migrate( {
+			postLayout: 'grid',
+			columns: deprecated[ 0 ].attributes.columns.default,
+			postsToShow: 3,
+		} );
+
+		expect( migratedAttributes ).toEqual( {
+			layout: {
+				type: 'grid',
+				columnCount: 3,
+			},
+			postsToShow: 3,
+		} );
+	} );
+
+	it( 'parses legacy grid layout attributes to layout support attributes when columns are omitted', () => {
+		const [ parsedBlock ] = parse(
+			'<!-- wp:latest-posts {"postLayout":"grid","postsToShow":3} /-->'
+		);
+
+		expect( parsedBlock.attributes ).toEqual(
+			expect.objectContaining( {
+				layout: {
+					type: 'grid',
+					columnCount: 3,
+				},
+				postsToShow: 3,
+			} )
+		);
+		expect( parsedBlock.attributes.postLayout ).toBeUndefined();
+		expect( parsedBlock.attributes.columns ).toBeUndefined();
+	} );
+
+	it( 'preserves block support attributes while migrating legacy grid layout attributes', () => {
+		const legacyAttributes = {
+			postLayout: 'grid',
+			postsToShow: 3,
+			textColor: 'contrast',
+			backgroundColor: 'base',
+			fontSize: 'large',
+			fontFamily: 'system-sans',
+			style: {
+				elements: {
+					link: {
+						color: {
+							text: 'var:preset|color|primary',
+						},
+					},
+				},
+				typography: {
+					lineHeight: '1.6',
+				},
+			},
+		};
+		const [ parsedBlock ] = parse(
+			`<!-- wp:latest-posts ${ JSON.stringify( legacyAttributes ) } /-->`
+		);
+
+		expect( parsedBlock.attributes ).toEqual(
+			expect.objectContaining( {
+				layout: {
+					type: 'grid',
+					columnCount: 3,
+				},
+				postsToShow: 3,
+				textColor: 'contrast',
+				backgroundColor: 'base',
+				fontSize: 'large',
+				fontFamily: 'system-sans',
+				style: {
+					elements: {
+						link: {
+							color: {
+								text: 'var:preset|color|primary',
+							},
+						},
+					},
+					typography: {
+						lineHeight: '1.6',
+					},
+				},
+			} )
+		);
+		expect( parsedBlock.attributes.postLayout ).toBeUndefined();
+		expect( parsedBlock.attributes.columns ).toBeUndefined();
+	} );
+
+	it( 'preserves the legacy categories migration while migrating layout', () => {
+		const migratedAttributes = deprecated[ 0 ].migrate( {
+			categories: '7',
+			postLayout: 'grid',
+			columns: 2,
+		} );
+
+		expect( migratedAttributes ).toEqual( {
+			categories: [ { id: 7 } ],
+			layout: {
+				type: 'grid',
+				columnCount: 2,
+			},
+		} );
+	} );
+} );

package/src/list/ordered-list-settings.js

@@ -66,7 +66,6 @@ const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => {
 					}
 				>
 					<SelectControl
-						__next40pxDefaultSize
 						label={ __( 'List style' ) }
 						options={ LIST_STYLE_OPTIONS }
 						value={ type || 'decimal' }

package/src/list-item/edit.js

@@ -83,7 +83,7 @@ export default function ListItemEdit( {
 		renderAppender: false,
 		__unstableDisableDropZone: true,
 	} );
-	const useEnterRef = useEnter( { content, clientId } );
+	const useEnterRef = useEnter( clientId );
 	const useSpaceRef = useSpace( clientId );
 	const onMerge = useMerge( clientId, mergeBlocks );
 	return (

package/src/list-item/hooks/use-enter.js

@@ -6,11 +6,8 @@ import {
 	getDefaultBlockName,
 	cloneBlock,
 } from '@wordpress/blocks';
-import { useRef } from '@wordpress/element';
-import {
-	useRefEffect,
-	privateApis as composePrivateApis,
-} from '@wordpress/compose';
+import { useRefEffect } from '@wordpress/compose';
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -21,30 +18,31 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import useOutdentListItem from './use-outdent-list-item';
 import { unlock } from '../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
-export default function useEnter( props ) {
+export default function useEnter( clientId ) {
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
-	const { getBlock, getBlockRootClientId, getBlockIndex, getBlockName } =
-		useSelect( blockEditorStore );
-	const propsRef = useRef( props );
-	propsRef.current = props;
+	const {
+		getBlock,
+		getBlockAttributes,
+		getBlockRootClientId,
+		getBlockIndex,
+		getBlockName,
+	} = useSelect( blockEditorStore );
 	const outdentListItem = useOutdentListItem();
 	return useRefEffect( ( element ) => {
 		function onKeyDown( event ) {
 			if ( event.defaultPrevented || event.keyCode !== ENTER ) {
 				return;
 			}
-			const { content, clientId } = propsRef.current;
-			if ( content.length ) {
+			const { content } = getBlockAttributes( clientId ) ?? {};
+			if ( content?.length ) {
 				return;
 			}
 			event.preventDefault();
 			const canOutdent =
 				getBlockName(
-					getBlockRootClientId(
-						getBlockRootClientId( propsRef.current.clientId )
-					)
+					getBlockRootClientId( getBlockRootClientId( clientId ) )
 				) === 'core/list-item';
 			if ( canOutdent ) {
 				outdentListItem();
@@ -90,11 +88,6 @@ export default function useEnter( props ) {
 
 		// Capture phase so we run before writing-flow's ancestor-bubble
 		// keydown handlers that gate on `event.defaultPrevented`.
-		return subscribeDelegatedListener(
-			element,
-			'keydown',
-			onKeyDown,
-			true
-		);
+		return subscribeOwnedListener( element, 'keydown', onKeyDown, true );
 	}, [] );
 }

package/src/list-item/hooks/use-space.js

@@ -1,10 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	useRefEffect,
-	privateApis as composePrivateApis,
-} from '@wordpress/compose';
+import { useRefEffect } from '@wordpress/compose';
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { SPACE, TAB } from '@wordpress/keycodes';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -16,7 +14,7 @@ import useIndentListItem from './use-indent-list-item';
 import useOutdentListItem from './use-outdent-list-item';
 import { unlock } from '../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default function useSpace( clientId ) {
 	const { getSelectionStart, getSelectionEnd, getBlockIndex } =
@@ -63,7 +61,7 @@ export default function useSpace( clientId ) {
 
 			// Capture phase so we run before writing-flow's ancestor-bubble
 			// keydown handlers that gate on `event.defaultPrevented`.
-			return subscribeDelegatedListener(
+			return subscribeOwnedListener(
 				element,
 				'keydown',
 				onKeyDown,

package/src/media-text/edit.js

@@ -366,7 +366,6 @@ function MediaTextEdit( {
 				onDeselect={ () => setAttributes( { mediaWidth: 50 } ) }
 			>
 				<RangeControl
-					__next40pxDefaultSize
 					label={ __( 'Media width' ) }
 					value={ temporaryMediaWidth || mediaWidth }
 					onChange={ commitWidthChange }

package/src/media-text/editor.scss

@@ -15,6 +15,7 @@
 	}
 }
 
+// stylelint-disable-next-line selector-class-pattern -- re-resizable library class name.
 .wp-block-media-text .__resizable_base__ {
 	grid-column: 1 / span 2;
 	grid-row: 2;

package/src/missing/edit.js

@@ -39,9 +39,7 @@ export default function MissingEdit( { attributes, clientId } ) {
 	function convertToHTML() {
 		replaceBlock(
 			clientId,
-			createBlock( 'core/html', {
-				content: originalUndelimitedContent,
-			} )
+			createBlock( 'core/html', {}, [], [ originalUndelimitedContent ] )
 		);
 	}
 

package/src/more/editor.scss

@@ -18,7 +18,7 @@
 		position: relative;
 		font-size: $default-font-size;
 		text-transform: uppercase;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		font-family: $default-font;
 		color: $gray-700;
 		display: inline-flex;

package/src/navigation/edit/index.js

@@ -820,7 +820,6 @@ function Navigation( {
 									isShownByDefault
 								>
 									<ToggleGroupControl
-										__next40pxDefaultSize
 										label={ __( 'Submenu Visibility' ) }
 										value={ submenuVisibility }
 										onChange={ ( value ) => {

package/src/navigation/edit/overlay-menu-preview-controls.js

@@ -40,7 +40,6 @@ export default function OverlayMenuPreviewControls( {
 				checked={ hasIcon }
 			/>
 			<ToggleGroupControl
-				__next40pxDefaultSize
 				className="wp-block-navigation__overlay-menu-icon-toggle-group"
 				label={ __( 'Icon' ) }
 				value={ icon }

package/src/navigation/edit/overlay-menu-preview.js

@@ -42,7 +42,6 @@ export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 				onDeselect={ () => setAttributes( { icon: 'handle' } ) }
 			>
 				<ToggleGroupControl
-					__next40pxDefaultSize
 					className="wp-block-navigation__overlay-menu-icon-toggle-group"
 					label={ __( 'Icon' ) }
 					value={ icon }

package/src/navigation/edit/overlay-template-part-selector.js

@@ -309,7 +309,6 @@ export default function OverlayTemplatePartSelector( {
 					>
 						<FlexBlock>
 							<SelectControl
-								__next40pxDefaultSize
 								label={ __( 'Overlay template' ) }
 								hideLabelFromVision
 								aria-labelledby={ headingId }

package/src/navigation/edit/overlay-visibility-control.js

@@ -21,7 +21,6 @@ export default function OverlayVisibilityControl( {
 } ) {
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ __( 'Overlay Visibility' ) }
 			aria-label={ __( 'Configure overlay visibility' ) }
 			value={ overlayMenu }

package/src/navigation/editor.scss

@@ -576,8 +576,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	grid-column: span 2;
 
 	&.open {
-		box-shadow: inset 0 0 0 $border-width $gray-200;
-		outline: 1px solid transparent; // Box shadow is removed in high contrast mode, a transparent outline is made opaque.
+		border-color: $gray-200;
 		background-color: $white;
 	}
 }

package/src/navigation-link/editor.scss

@@ -110,7 +110,7 @@
 .link-control-transform__subheading {
 	font-size: 11px;
 	text-transform: uppercase;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	color: $gray-900;
 	margin-bottom: 1.5em;
 }

package/src/navigation-link/index.php

@@ -127,9 +127,12 @@ function block_core_navigation_link_maybe_urldecode( $url ) {
 function render_block_core_navigation_link( $attributes, $content, $block ) {
 	// Check if this navigation item should render based on post status.
 	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-		if ( ! gutenberg_block_core_shared_navigation_item_should_render( $attributes, $block ) ) {
-			return '';
-		}
+		$should_render = gutenberg_block_core_shared_navigation_item_should_render( $attributes, $block );
+	} else {
+		$should_render = block_core_shared_navigation_item_should_render( $attributes, $block );
+	}
+	if ( ! $should_render ) {
+		return '';
 	}
 
 	// Don't render the block's subtree if it has no label.

package/src/navigation-link/shared/test/controls.js

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 /**
  * External dependencies
  */

package/src/navigation-link/shared/test/use-entity-binding.js

@@ -1,11 +1,16 @@
 /**
- * @jest-environment jsdom
+ * External dependencies
  */
+import { renderHook, act } from '@testing-library/react';
 
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { renderHook, act } from '@testing-library/react';
+import {
+	useBlockBindingsUtils,
+	useBlockEditingMode,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -27,15 +32,6 @@ jest.mock( '@wordpress/data/src/components/use-select', () => {
 	return mock;
 } );
 
-/**
- * WordPress dependencies
- */
-import {
-	useBlockBindingsUtils,
-	useBlockEditingMode,
-} from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-
 describe( 'useEntityBinding', () => {
 	const mockUpdateBlockBindings = jest.fn();
 

package/src/navigation-link/shared/test/use-handle-link-change.test.js

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 /**
  * External dependencies
  */

package/src/navigation-link/shared/test/use-link-preview.test.js

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 /**
  * External dependencies
  */
@@ -500,6 +496,23 @@ describe( 'useLinkPreview', () => {
 			expect( result.current.title ).toBe( 'Test Category' );
 		} );
 
+		it( 'should show "(no title)" for an untitled entity, not the title object', () => {
+			const { result } = renderHook( () =>
+				useLinkPreview( {
+					url: 'https://example.com/page',
+					// Untitled page: an empty `title.rendered` object.
+					entityRecord: { title: { raw: '', rendered: '' } },
+					type: 'page',
+					hasBinding: false,
+					isEntityAvailable: true,
+				} )
+			);
+
+			expect( result.current.title ).toBe( '(no title)' );
+			// Truthy title, so no rich URL fetch.
+			expect( mockUseRemoteUrlData ).toHaveBeenCalledWith( null );
+		} );
+
 		it( 'should use entityRecord.name for taxonomy terms', () => {
 			const { result } = renderHook( () =>
 				useLinkPreview( {

package/src/navigation-link/shared/use-link-preview.js

@@ -194,6 +194,29 @@ export function computeBadges( {
 	return badges;
 }
 
+/**
+ * Returns an entity record's display title: the rendered title, "(no title)"
+ * for an untitled entity, or the record's name.
+ *
+ * @param {Object} entityRecord The entity record.
+ * @return {string|undefined} The display title.
+ */
+function getEntityTitle( entityRecord ) {
+	const title = entityRecord?.title;
+
+	// Some entity types use a plain string for the title.
+	if ( typeof title === 'string' ) {
+		return title;
+	}
+
+	// Posts and pages expose `title` as a { raw, rendered } object.
+	if ( title && 'rendered' in title ) {
+		return title.rendered || __( '(no title)' );
+	}
+
+	return entityRecord?.name;
+}
+
 /**
  * Hook to compute link preview data for display.
  *
@@ -223,10 +246,7 @@ export function useLinkPreview( {
 		)?.home;
 	}, [] );
 
-	const title =
-		entityRecord?.title?.rendered ||
-		entityRecord?.title ||
-		entityRecord?.name;
+	const title = getEntityTitle( entityRecord );
 
 	// Fetch rich URL data if we don't have a title. Internal links should have passed a title.
 	const { richData } = useRemoteUrlData( title ? null : url );

package/src/navigation-overlay-close/edit.js

@@ -60,7 +60,6 @@ export default function NavigationOverlayCloseEdit( {
 								setAttributes( { displayMode: value } )
 							}
 							isBlock
-							__next40pxDefaultSize
 						>
 							<ToggleGroupControlOption
 								value="icon"

package/src/navigation-submenu/index.php

@@ -76,9 +76,12 @@ function block_core_navigation_submenu_get_submenu_visibility( $context ) {
 function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	// Check if this navigation item should render based on post status.
 	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-		if ( ! gutenberg_block_core_shared_navigation_item_should_render( $attributes, $block ) ) {
-			return '';
-		}
+		$should_render = gutenberg_block_core_shared_navigation_item_should_render( $attributes, $block );
+	} else {
+		$should_render = block_core_shared_navigation_item_should_render( $attributes, $block );
+	}
+	if ( ! $should_render ) {
+		return '';
 	}
 
 	// Don't render the block's subtree if it has no label.

package/src/nextpage/editor.scss

@@ -18,7 +18,7 @@
 		font-size: $default-font-size;
 		position: relative;
 		text-transform: uppercase;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		font-family: $default-font;
 		color: $gray-700;
 		border-radius: 4px;

package/src/page-list/edit.js

@@ -332,7 +332,6 @@ export default function PageListEdit( {
 								isShownByDefault
 							>
 								<ComboboxControl
-									__next40pxDefaultSize
 									className="editor-page-attributes__parent"
 									label={ __( 'Parent' ) }
 									value={ parentPageID }

package/src/page-list/index.php

@@ -309,7 +309,7 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 		$colors['css_classes']
 	);
 
-	$style_attribute = ( $colors['inline_styles'] );
+	$style_attribute = $colors['inline_styles'];
 	$css_classes     = trim( implode( ' ', $classes ) );
 
 	$nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );

package/src/paragraph/README.md

@@ -26,6 +26,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"`
 - [`splitting`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#splitting): `true`
+- [`editableRoot`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#editableroot): `true`
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`className`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#classname): `false`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):

package/src/paragraph/block.json

@@ -29,6 +29,7 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"splitting": true,
+		"editableRoot": true,
 		"anchor": true,
 		"className": false,
 		"__experimentalBorder": {

package/src/paragraph/use-enter.js

@@ -2,10 +2,8 @@
  * WordPress dependencies
  */
 import { useRef } from '@wordpress/element';
-import {
-	useRefEffect,
-	privateApis as composePrivateApis,
-} from '@wordpress/compose';
+import { useRefEffect } from '@wordpress/compose';
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -21,7 +19,7 @@ import {
  */
 import { unlock } from '../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export function useOnEnter( props ) {
 	const { batch } = useRegistry();
@@ -131,11 +129,6 @@ export function useOnEnter( props ) {
 
 		// Capture phase so we run before writing-flow's ancestor-bubble
 		// keydown handlers that gate on `event.defaultPrevented`.
-		return subscribeDelegatedListener(
-			element,
-			'keydown',
-			onKeyDown,
-			true
-		);
+		return subscribeOwnedListener( element, 'keydown', onKeyDown, true );
 	}, [] );
 }