@wordpress/block-editor 12.14.0 → 12.16.0

package/src/components/inserter-draggable-blocks/index.js

@@ -2,19 +2,24 @@
  * WordPress dependencies
  */
 import { Draggable } from '@wordpress/components';
-import { serialize, store as blocksStore } from '@wordpress/blocks';
+import {
+	createBlock,
+	serialize,
+	store as blocksStore,
+} from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
 import BlockDraggableChip from '../block-draggable/draggable-chip';
+import { PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
 const InserterDraggableBlocks = ( {
 	isEnabled,
 	blocks,
 	icon,
 	children,
-	isPattern,
+	pattern,
 } ) => {
 	const transferData = {
 		type: 'inserter',
@@ -36,13 +41,21 @@ const InserterDraggableBlocks = ( {
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			onDragStart={ ( event ) => {
-				event.dataTransfer.setData( 'text/html', serialize( blocks ) );
+				const parsedBlocks =
+					pattern?.type === PATTERN_TYPES.user &&
+					pattern?.syncStatus !== 'unsynced'
+						? [ createBlock( 'core/block', { ref: pattern.id } ) ]
+						: blocks;
+				event.dataTransfer.setData(
+					'text/html',
+					serialize( parsedBlocks )
+				);
 			} }
 			__experimentalDragComponent={
 				<BlockDraggableChip
 					count={ blocks.length }
-					icon={ icon || ( ! isPattern && blockTypeIcon ) }
-					isPattern={ isPattern }
+					icon={ icon || ( ! pattern && blockTypeIcon ) }
+					isPattern={ !! pattern }
 				/>
 			}
 		>

package/src/components/inserter-listbox/index.js

@@ -1,26 +1,30 @@
 /**
  * WordPress dependencies
  */
-import { __unstableUseCompositeState as useCompositeState } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
 
 export { default as InserterListboxGroup } from './group';
 export { default as InserterListboxRow } from './row';
 export { default as InserterListboxItem } from './item';
 
+const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
+	unlock( componentsPrivateApis );
+
 function InserterListbox( { children } ) {
-	const compositeState = useCompositeState( {
-		shift: true,
-		wrap: 'horizontal',
+	const store = useCompositeStore( {
+		focusShift: true,
+		focusWrap: 'horizontal',
 	} );
+
 	return (
-		<InserterListboxContext.Provider value={ compositeState }>
+		<Composite store={ store } render={ <></> }>
 			{ children }
-		</InserterListboxContext.Provider>
+		</Composite>
 	);
 }
 

package/src/components/inserter-listbox/item.js

@@ -3,32 +3,31 @@
  */
 import {
 	Button,
-	__unstableCompositeItem as CompositeItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { forwardRef, useContext } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
+
+const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
 
 function InserterListboxItem(
 	{ isFirst, as: Component, children, ...props },
 	ref
 ) {
-	const state = useContext( InserterListboxContext );
 	return (
 		<CompositeItem
 			ref={ ref }
-			state={ state }
 			role="option"
-			// Use the CompositeItem `focusable` prop over Button's
-			// isFocusable. The latter was shown to cause an issue
-			// with tab order in the inserter list.
-			focusable
+			// Use the CompositeItem `accessibleWhenDisabled` prop
+			// over Button's `isFocusable`. The latter was shown to
+			// cause an issue with tab order in the inserter list.
+			accessibleWhenDisabled
 			{ ...props }
-		>
-			{ ( htmlProps ) => {
+			render={ ( htmlProps ) => {
 				const propsWithTabIndex = {
 					...htmlProps,
 					tabIndex: isFirst ? 0 : htmlProps.tabIndex,
@@ -45,7 +44,7 @@ function InserterListboxItem(
 				}
 				return <Button { ...propsWithTabIndex }>{ children }</Button>;
 			} }
-		</CompositeItem>
+		/>
 	);
 }
 

package/src/components/inserter-listbox/row.js

@@ -1,24 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef, useContext } from '@wordpress/element';
-import { __unstableCompositeGroup as CompositeGroup } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
+
+const { CompositeGroupV2: CompositeGroup } = unlock( componentsPrivateApis );
 
 function InserterListboxRow( props, ref ) {
-	const state = useContext( InserterListboxContext );
-	return (
-		<CompositeGroup
-			state={ state }
-			role="presentation"
-			ref={ ref }
-			{ ...props }
-		/>
-	);
+	return <CompositeGroup role="presentation" ref={ ref } { ...props } />;
 }
 
 export default forwardRef( InserterListboxRow );

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

@@ -12,7 +12,10 @@ import { useEffect, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useDisplayBlockControls from '../use-display-block-controls';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
 import groups from './groups';
 
 export default function InspectorControlsFill( {
@@ -33,13 +36,13 @@ export default function InspectorControlsFill( {
 		group = __experimentalGroup;
 	}
 
-	const isDisplayed = useDisplayBlockControls();
+	const context = useBlockEditContext();
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! isDisplayed ) {
+	if ( ! context[ mayDisplayControlsKey ] ) {
 		return null;
 	}
 

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

@@ -15,7 +15,10 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import groups from './groups';
-import useDisplayBlockControls from '../use-display-block-controls';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
 import { BlockSettingsButton } from '../block-settings';
 
 export default function InspectorControlsFill( {
@@ -35,14 +38,14 @@ export default function InspectorControlsFill( {
 		);
 		group = __experimentalGroup;
 	}
-	const isDisplayed = useDisplayBlockControls();
+	const context = useBlockEditContext();
 
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! isDisplayed ) {
+	if ( ! context[ mayDisplayControlsKey ] ) {
 		return null;
 	}
 

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

@@ -74,7 +74,7 @@ $preview-image-height: 140px;
 		border-radius: $radius-block-ui;
 		height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
 		margin: 0;
-		padding: $grid-unit-10 $grid-unit-20;
+		padding: $grid-unit-10 $button-size-next-default-40px $grid-unit-10 $grid-unit-20;
 		position: relative;
 		width: 100%;
 	}

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

@@ -2140,7 +2140,7 @@ describe( 'Post types', () => {
 describe( 'Rich link previews', () => {
 	const selectedLink = {
 		id: '1',
-		title: 'Wordpress.org', // Customize this for differentiation in assertions.
+		title: 'WordPress.org', // Customize this for differentiation in assertions.
 		url: 'https://www.wordpress.org',
 		type: 'URL',
 	};

package/src/components/list-view/use-list-view-expand-selected-item.js

@@ -27,12 +27,6 @@ export default function useListViewExpandSelectedItem( {
 		[ firstSelectedBlockClientId ]
 	);
 
-	const parentClientIds =
-		Array.isArray( selectedBlockParentClientIds ) &&
-		selectedBlockParentClientIds.length
-			? selectedBlockParentClientIds
-			: null;
-
 	// Expand tree when a block is selected.
 	useEffect( () => {
 		// If the selectedTreeId is the same as the selected block,
@@ -42,7 +36,7 @@ export default function useListViewExpandSelectedItem( {
 		}
 
 		// If the selected block has parents, get the top-level parent.
-		if ( parentClientIds ) {
+		if ( selectedBlockParentClientIds?.length ) {
 			// If the selected block has parents,
 			// expand the tree branch.
 			setExpandedState( {
@@ -50,7 +44,12 @@ export default function useListViewExpandSelectedItem( {
 				clientIds: selectedBlockParentClientIds,
 			} );
 		}
-	}, [ firstSelectedBlockClientId ] );
+	}, [
+		firstSelectedBlockClientId,
+		selectedBlockParentClientIds,
+		selectedTreeId,
+		setExpandedState,
+	] );
 
 	return {
 		setSelectedTreeId,

package/src/components/navigable-toolbar/README.md

@@ -8,6 +8,8 @@ The component accepts the following props. Props not included in this set will b
 
 ## `focusOnMount`
 
+_Note: this prop is deprecated._
+
 Whether to immediately focus when the component mounts.
 
 - Type: `Boolean`

package/src/components/navigable-toolbar/index.js

@@ -162,7 +162,7 @@ function useToolbarFocus( {
 			const index = items.findIndex( ( item ) => item.tabIndex === 0 );
 			onIndexChange( index );
 		};
-	}, [ initialIndex, initialFocusOnMount, toolbarRef ] );
+	}, [ initialIndex, initialFocusOnMount, onIndexChange, toolbarRef ] );
 
 	const { lastFocus } = useSelect( ( select ) => {
 		const { getLastFocus } = select( blockEditorStore );
@@ -210,9 +210,9 @@ export default function NavigableToolbar( {
 	useToolbarFocus( {
 		toolbarRef,
 		focusOnMount,
-		isAccessibleToolbar,
 		defaultIndex: initialIndex,
 		onIndexChange,
+		isAccessibleToolbar,
 		shouldUseKeyboardFocusShortcut,
 		focusEditorOnEscape,
 	} );

package/src/components/plain-text/README.md

@@ -20,33 +20,6 @@ _Optional._ The component forwards the `ref` property to the `TextareaAutosize`
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		content: {
-			type: 'string',
-		},
-	},
-
-	edit: function( props ) {
-		return React.createElement( wp.blockEditor.PlainText, {
-			className: props.className,
-			value: props.attributes.content,
-			onChange: function( content ) {
-				props.setAttributes( { content: content } );
-			},
-		} );
-	},
-} );
-```
-
-{% ESNext %}
-
 ```js
 import { registerBlockType } from '@wordpress/blocks';
 import { PlainText } from '@wordpress/block-editor';
@@ -72,4 +45,3 @@ registerBlockType( /* ... */, {
 } );
 ```
 
-{% end %}

package/src/components/preview-options/index.js

@@ -1,89 +1,11 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { useViewportMatch } from '@wordpress/compose';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { check, desktop, mobile, tablet } from '@wordpress/icons';
-
-export default function PreviewOptions( {
-	children,
-	viewLabel,
-	className,
-	isEnabled = true,
-	deviceType,
-	setDeviceType,
-	label,
-} ) {
-	const isMobile = useViewportMatch( 'small', '<' );
-	if ( isMobile ) return null;
-
-	const popoverProps = {
-		className: classnames(
-			className,
-			'block-editor-post-preview__dropdown-content'
-		),
-		placement: 'bottom-end',
-	};
-	const toggleProps = {
-		className: 'block-editor-post-preview__button-toggle',
-		disabled: ! isEnabled,
-		__experimentalIsFocusable: ! isEnabled,
-		children: viewLabel,
-	};
-	const menuProps = {
-		'aria-label': __( 'View options' ),
-	};
-
-	const deviceIcons = {
-		mobile,
-		tablet,
-		desktop,
-	};
+import deprecated from '@wordpress/deprecated';
 
-	return (
-		<DropdownMenu
-			className="block-editor-post-preview__dropdown"
-			popoverProps={ popoverProps }
-			toggleProps={ toggleProps }
-			menuProps={ menuProps }
-			icon={ deviceIcons[ deviceType.toLowerCase() ] }
-			label={ label || __( 'Preview' ) }
-			disableOpenOnArrowDown={ ! isEnabled }
-		>
-			{ ( renderProps ) => (
-				<>
-					<MenuGroup>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Desktop' ) }
-							icon={ deviceType === 'Desktop' && check }
-						>
-							{ __( 'Desktop' ) }
-						</MenuItem>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Tablet' ) }
-							icon={ deviceType === 'Tablet' && check }
-						>
-							{ __( 'Tablet' ) }
-						</MenuItem>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Mobile' ) }
-							icon={ deviceType === 'Mobile' && check }
-						>
-							{ __( 'Mobile' ) }
-						</MenuItem>
-					</MenuGroup>
-					{ children?.( renderProps ) }
-				</>
-			) }
-		</DropdownMenu>
-	);
+export default function PreviewOptions() {
+	deprecated( 'wp.blockEditor.PreviewOptions', {
+		version: '6.5',
+	} );
+	return null;
 }

package/src/components/rich-text/README.md

@@ -80,41 +80,6 @@ trimmed.
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		content: {
-			source: 'html',
-			selector: 'h2',
-		},
-	},
-
-	edit: function( props ) {
-		return React.createElement( wp.blockEditor.RichText, {
-			tagName: 'h2',
-			className: props.className,
-			value: props.attributes.content,
-			onChange: function( content ) {
-				props.setAttributes( { content: content } );
-			}
-		} );
-	},
-
-	save: function( props ) {
-		return React.createElement( wp.blockEditor.RichText.Content, {
-			tagName: 'h2', value: props.attributes.content
-		} );
-	}
-} );
-```
-
-{% ESNext %}
-
 ```js
 import { registerBlockType } from '@wordpress/blocks';
 import { RichText } from '@wordpress/block-editor';
@@ -146,7 +111,6 @@ registerBlockType( /* ... */, {
 } );
 ```
 
-{% end %}
 
 ## RichTextToolbarButton
 
@@ -154,26 +118,6 @@ Slot to extend the format toolbar. Use it in the edit function of a `registerFor
 
 ### Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.richText.registerFormatType( /* ... */, {
-	/* ... */
-	edit: function( props ) {
-		return React.createElement(
-			wp.blockEditor.RichTextToolbarButton, {
-				icon: 'editor-code',
-				title: 'My formatting button',
-				onClick: function() { /* ... */ }
-				isActive: props.isActive,
-			} );
-	},
-	/* ... */
-} );
-```
-
-{% ESNext %}
 
 ```js
 import { registerFormatType } from '@wordpress/rich-text';
@@ -194,5 +138,3 @@ registerFormatType( /* ... */, {
 	/* ... */
 } );
 ```
-
-{% end %}

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

@@ -5,36 +5,43 @@ import { RawHTML } from '@wordpress/element';
 import { children as childrenSource } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
 
+/**
+ * Internal dependencies
+ */
+import RichText from './';
+
 /**
  * Internal dependencies
  */
 import { getMultilineTag } from './utils';
 
-export const Content = ( { value, tagName: Tag, multiline, ...props } ) => {
-	// Handle deprecated `children` and `node` sources.
-	if ( Array.isArray( value ) ) {
+export function Content( {
+	value,
+	tagName: Tag,
+	multiline,
+	format,
+	...props
+} ) {
+	if ( RichText.isEmpty( value ) ) {
+		const MultilineTag = getMultilineTag( multiline );
+		value = MultilineTag ? <MultilineTag /> : null;
+	} else if ( Array.isArray( value ) ) {
 		deprecated( 'wp.blockEditor.RichText value prop as children type', {
 			since: '6.1',
 			version: '6.3',
 			alternative: 'value prop as string',
 			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
 		} );
-
-		value = childrenSource.toHTML( value );
-	}
-
-	const MultilineTag = getMultilineTag( multiline );
-
-	if ( ! value && MultilineTag ) {
-		value = `<${ MultilineTag }></${ MultilineTag }>`;
-	}
-
-	const content = <RawHTML>{ value }</RawHTML>;
-
-	if ( Tag ) {
-		const { format, ...restProps } = props;
-		return <Tag { ...restProps }>{ content }</Tag>;
+		value = <RawHTML>{ childrenSource.toHTML( value ) }</RawHTML>;
+	} else if ( typeof value === 'string' ) {
+		// To do: deprecate.
+		value = <RawHTML>{ value }</RawHTML>;
+	} else {
+		// To do: create a toReactComponent method on RichTextData, which we
+		// might in the future also use for the editable tree. See
+		// https://github.com/WordPress/gutenberg/pull/41655.
+		value = <RawHTML>{ value.toHTMLString() }</RawHTML>;
 	}
 
-	return content;
-};
+	return Tag ? <Tag { ...props }>{ value }</Tag> : value;
+}

package/src/components/rich-text/get-rich-text-values.js

@@ -6,6 +6,7 @@ import {
 	getSaveElement,
 	__unstableGetBlockProps as getBlockProps,
 } from '@wordpress/blocks';
+import { RichTextData } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -95,5 +96,9 @@ export function getRichTextValues( blocks = [] ) {
 	const values = [];
 	addValuesForBlocks( values, blocks );
 	getBlockProps.skipFilters = false;
-	return values;
+	return values.map( ( value ) =>
+		value instanceof RichTextData
+			? value
+			: RichTextData.fromHTMLString( value )
+	);
 }