@wordpress/editor 13.24.1 → 13.26.0

package/src/components/editor-canvas/edit-template-blocks-notification.js

@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useState, useRef } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+/**
+ * Component that:
+ *
+ * - Displays a 'Edit your template to edit this block' notification when the
+ *   user is focusing on editing page content and clicks on a disabled template
+ *   block.
+ * - Displays a 'Edit your template to edit this block' dialog when the user
+ *   is focusing on editing page conetnt and double clicks on a disabled
+ *   template block.
+ *
+ * @param {Object}                                 props
+ * @param {import('react').RefObject<HTMLElement>} props.contentRef Ref to the block
+ *                                                                  editor iframe canvas.
+ */
+export default function EditTemplateBlocksNotification( { contentRef } ) {
+	const renderingMode = useSelect(
+		( select ) => select( editorStore ).getRenderingMode(),
+		[]
+	);
+	const { getNotices } = useSelect( noticesStore );
+
+	const { createInfoNotice, removeNotice } = useDispatch( noticesStore );
+	const { setRenderingMode } = useDispatch( editorStore );
+
+	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
+
+	const lastNoticeId = useRef( 0 );
+
+	useEffect( () => {
+		const handleClick = async ( event ) => {
+			if ( renderingMode !== 'template-locked' ) {
+				return;
+			}
+			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
+				return;
+			}
+			const isNoticeAlreadyShowing = getNotices().some(
+				( notice ) => notice.id === lastNoticeId.current
+			);
+			if ( isNoticeAlreadyShowing ) {
+				return;
+			}
+			const { notice } = await createInfoNotice(
+				__( 'Edit your template to edit this block.' ),
+				{
+					isDismissible: true,
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Edit template' ),
+							onClick: () => setRenderingMode( 'template-only' ),
+						},
+					],
+				}
+			);
+			lastNoticeId.current = notice.id;
+		};
+
+		const handleDblClick = ( event ) => {
+			if ( renderingMode !== 'template-locked' ) {
+				return;
+			}
+			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
+				return;
+			}
+			if ( lastNoticeId.current ) {
+				removeNotice( lastNoticeId.current );
+			}
+			setIsDialogOpen( true );
+		};
+
+		const canvas = contentRef.current;
+		canvas?.addEventListener( 'click', handleClick );
+		canvas?.addEventListener( 'dblclick', handleDblClick );
+		return () => {
+			canvas?.removeEventListener( 'click', handleClick );
+			canvas?.removeEventListener( 'dblclick', handleDblClick );
+		};
+	}, [ lastNoticeId, renderingMode, contentRef.current ] );
+
+	return (
+		<ConfirmDialog
+			isOpen={ isDialogOpen }
+			confirmButtonText={ __( 'Edit template' ) }
+			onConfirm={ () => {
+				setIsDialogOpen( false );
+				setRenderingMode( 'template-only' );
+			} }
+			onCancel={ () => setIsDialogOpen( false ) }
+		>
+			{ __( 'Edit your template to edit this block.' ) }
+		</ConfirmDialog>
+	);
+}

package/src/components/editor-canvas/index.js

@@ -0,0 +1,386 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockList,
+	store as blockEditorStore,
+	__unstableUseTypewriter as useTypewriter,
+	__unstableUseTypingObserver as useTypingObserver,
+	useSettings,
+	__experimentalRecursionProvider as RecursionProvider,
+	privateApis as blockEditorPrivateApis,
+	__experimentalUseResizeCanvas as useResizeCanvas,
+} from '@wordpress/block-editor';
+import { useEffect, useRef, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { parse } from '@wordpress/blocks';
+import { store as coreStore } from '@wordpress/core-data';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import PostTitle from '../post-title';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import EditTemplateBlocksNotification from './edit-template-blocks-notification';
+
+const {
+	LayoutStyle,
+	useLayoutClasses,
+	useLayoutStyles,
+	ExperimentalBlockCanvas: BlockCanvas,
+} = unlock( blockEditorPrivateApis );
+
+const noop = () => {};
+
+/**
+ * Given an array of nested blocks, find the first Post Content
+ * block inside it, recursing through any nesting levels,
+ * and return its attributes.
+ *
+ * @param {Array} blocks A list of blocks.
+ *
+ * @return {Object | undefined} The Post Content block.
+ */
+function getPostContentAttributes( blocks ) {
+	for ( let i = 0; i < blocks.length; i++ ) {
+		if ( blocks[ i ].name === 'core/post-content' ) {
+			return blocks[ i ].attributes;
+		}
+		if ( blocks[ i ].innerBlocks.length ) {
+			const nestedPostContent = getPostContentAttributes(
+				blocks[ i ].innerBlocks
+			);
+
+			if ( nestedPostContent ) {
+				return nestedPostContent;
+			}
+		}
+	}
+}
+
+function checkForPostContentAtRootLevel( blocks ) {
+	for ( let i = 0; i < blocks.length; i++ ) {
+		if ( blocks[ i ].name === 'core/post-content' ) {
+			return true;
+		}
+	}
+	return false;
+}
+
+function EditorCanvas( {
+	// Ideally as we unify post and site editors, we won't need these props.
+	autoFocus,
+	className,
+	renderAppender,
+	styles,
+	disableIframe = false,
+	iframeProps,
+	children,
+} ) {
+	const {
+		renderingMode,
+		postContentAttributes,
+		editedPostTemplate = {},
+		wrapperBlockName,
+		wrapperUniqueId,
+		deviceType,
+		hasHistory,
+	} = useSelect( ( select ) => {
+		const {
+			getCurrentPostId,
+			getCurrentPostType,
+			getCurrentTemplateId,
+			getEditorSettings,
+			getRenderingMode,
+			getDeviceType,
+		} = select( editorStore );
+		const { getPostType, canUser, getEditedEntityRecord } =
+			select( coreStore );
+		const postTypeSlug = getCurrentPostType();
+		const _renderingMode = getRenderingMode();
+		let _wrapperBlockName;
+
+		if ( postTypeSlug === 'wp_block' ) {
+			_wrapperBlockName = 'core/block';
+		} else if ( ! _renderingMode === 'post-only' ) {
+			_wrapperBlockName = 'core/post-content';
+		}
+
+		const editorSettings = getEditorSettings();
+		const supportsTemplateMode = editorSettings.supportsTemplateMode;
+		const postType = getPostType( postTypeSlug );
+		const canEditTemplate = canUser( 'create', 'templates' );
+		const currentTemplateId = getCurrentTemplateId();
+		const template = currentTemplateId
+			? getEditedEntityRecord(
+					'postType',
+					'wp_template',
+					currentTemplateId
+			  )
+			: undefined;
+
+		return {
+			renderingMode: _renderingMode,
+			postContentAttributes: editorSettings.postContentAttributes,
+			// Post template fetch returns a 404 on classic themes, which
+			// messes with e2e tests, so check it's a block theme first.
+			editedPostTemplate:
+				postType?.viewable && supportsTemplateMode && canEditTemplate
+					? template
+					: undefined,
+			wrapperBlockName: _wrapperBlockName,
+			wrapperUniqueId: getCurrentPostId(),
+			deviceType: getDeviceType(),
+			hasHistory: !! editorSettings.goBack,
+		};
+	}, [] );
+	const { isCleanNewPost } = useSelect( editorStore );
+	const {
+		hasRootPaddingAwareAlignments,
+		themeHasDisabledLayoutStyles,
+		themeSupportsLayout,
+	} = useSelect( ( select ) => {
+		const _settings = select( blockEditorStore ).getSettings();
+		return {
+			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
+			themeSupportsLayout: _settings.supportsLayout,
+			hasRootPaddingAwareAlignments:
+				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
+		};
+	}, [] );
+
+	const deviceStyles = useResizeCanvas( deviceType );
+	const [ globalLayoutSettings ] = useSettings( 'layout' );
+
+	// fallbackLayout is used if there is no Post Content,
+	// and for Post Title.
+	const fallbackLayout = useMemo( () => {
+		if ( renderingMode !== 'post-only' ) {
+			return { type: 'default' };
+		}
+
+		if ( themeSupportsLayout ) {
+			// We need to ensure support for wide and full alignments,
+			// so we add the constrained type.
+			return { ...globalLayoutSettings, type: 'constrained' };
+		}
+		// Set default layout for classic themes so all alignments are supported.
+		return { type: 'default' };
+	}, [ renderingMode, themeSupportsLayout, globalLayoutSettings ] );
+
+	const newestPostContentAttributes = useMemo( () => {
+		if (
+			! editedPostTemplate?.content &&
+			! editedPostTemplate?.blocks &&
+			postContentAttributes
+		) {
+			return postContentAttributes;
+		}
+		// When in template editing mode, we can access the blocks directly.
+		if ( editedPostTemplate?.blocks ) {
+			return getPostContentAttributes( editedPostTemplate?.blocks );
+		}
+		// If there are no blocks, we have to parse the content string.
+		// Best double-check it's a string otherwise the parse function gets unhappy.
+		const parseableContent =
+			typeof editedPostTemplate?.content === 'string'
+				? editedPostTemplate?.content
+				: '';
+
+		return getPostContentAttributes( parse( parseableContent ) ) || {};
+	}, [
+		editedPostTemplate?.content,
+		editedPostTemplate?.blocks,
+		postContentAttributes,
+	] );
+
+	const hasPostContentAtRootLevel = useMemo( () => {
+		if ( ! editedPostTemplate?.content && ! editedPostTemplate?.blocks ) {
+			return false;
+		}
+		// When in template editing mode, we can access the blocks directly.
+		if ( editedPostTemplate?.blocks ) {
+			return checkForPostContentAtRootLevel( editedPostTemplate?.blocks );
+		}
+		// If there are no blocks, we have to parse the content string.
+		// Best double-check it's a string otherwise the parse function gets unhappy.
+		const parseableContent =
+			typeof editedPostTemplate?.content === 'string'
+				? editedPostTemplate?.content
+				: '';
+
+		return (
+			checkForPostContentAtRootLevel( parse( parseableContent ) ) || false
+		);
+	}, [ editedPostTemplate?.content, editedPostTemplate?.blocks ] );
+
+	const { layout = {}, align = '' } = newestPostContentAttributes || {};
+
+	const postContentLayoutClasses = useLayoutClasses(
+		newestPostContentAttributes,
+		'core/post-content'
+	);
+
+	const blockListLayoutClass = classnames(
+		{
+			'is-layout-flow': ! themeSupportsLayout,
+		},
+		themeSupportsLayout && postContentLayoutClasses,
+		align && `align${ align }`
+	);
+
+	const postContentLayoutStyles = useLayoutStyles(
+		newestPostContentAttributes,
+		'core/post-content',
+		'.block-editor-block-list__layout.is-root-container'
+	);
+
+	// Update type for blocks using legacy layouts.
+	const postContentLayout = useMemo( () => {
+		return layout &&
+			( layout?.type === 'constrained' ||
+				layout?.inherit ||
+				layout?.contentSize ||
+				layout?.wideSize )
+			? { ...globalLayoutSettings, ...layout, type: 'constrained' }
+			: { ...globalLayoutSettings, ...layout, type: 'default' };
+	}, [
+		layout?.type,
+		layout?.inherit,
+		layout?.contentSize,
+		layout?.wideSize,
+		globalLayoutSettings,
+	] );
+
+	// If there is a Post Content block we use its layout for the block list;
+	// if not, this must be a classic theme, in which case we use the fallback layout.
+	const blockListLayout = postContentAttributes
+		? postContentLayout
+		: fallbackLayout;
+
+	const postEditorLayout =
+		blockListLayout?.type === 'default' && ! hasPostContentAtRootLevel
+			? fallbackLayout
+			: blockListLayout;
+
+	const observeTypingRef = useTypingObserver();
+	const titleRef = useRef();
+	useEffect( () => {
+		if ( ! autoFocus || ! isCleanNewPost() ) {
+			return;
+		}
+		titleRef?.current?.focus();
+	}, [ autoFocus, isCleanNewPost ] );
+
+	// Add some styles for alignwide/alignfull Post Content and its children.
+	const alignCSS = `.is-root-container.alignwide { max-width: var(--wp--style--global--wide-size); margin-left: auto; margin-right: auto;}
+		.is-root-container.alignwide:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: var(--wp--style--global--wide-size);}
+		.is-root-container.alignfull { max-width: none; margin-left: auto; margin-right: auto;}
+		.is-root-container.alignfull:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: none;}`;
+
+	const localRef = useRef();
+	const typewriterRef = useTypewriter();
+	const contentRef = useMergeRefs( [
+		localRef,
+		renderingMode === 'post-only' ? typewriterRef : noop,
+	] );
+
+	return (
+		<BlockCanvas
+			shouldIframe={
+				! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType )
+			}
+			contentRef={ contentRef }
+			styles={ styles }
+			height="100%"
+			iframeProps={ {
+				className: classnames( 'editor-canvas__iframe', {
+					'has-history': hasHistory,
+				} ),
+				...iframeProps,
+				style: {
+					...iframeProps?.style,
+					...deviceStyles,
+				},
+			} }
+		>
+			{ themeSupportsLayout &&
+				! themeHasDisabledLayoutStyles &&
+				renderingMode === 'post-only' && (
+					<>
+						<LayoutStyle
+							selector=".editor-editor-canvas__post-title-wrapper"
+							layout={ fallbackLayout }
+						/>
+						<LayoutStyle
+							selector=".block-editor-block-list__layout.is-root-container"
+							layout={ postEditorLayout }
+						/>
+						{ align && <LayoutStyle css={ alignCSS } /> }
+						{ postContentLayoutStyles && (
+							<LayoutStyle
+								layout={ postContentLayout }
+								css={ postContentLayoutStyles }
+							/>
+						) }
+					</>
+				) }
+			{ renderingMode === 'post-only' && (
+				<div
+					className={ classnames(
+						'editor-editor-canvas__post-title-wrapper',
+						// The following class is only here for backward comapatibility
+						// some themes might be using it to style the post title.
+						'edit-post-visual-editor__post-title-wrapper',
+						{
+							'has-global-padding': hasRootPaddingAwareAlignments,
+						}
+					) }
+					contentEditable={ false }
+					ref={ observeTypingRef }
+					style={ {
+						// This is using inline styles
+						// so it's applied for both iframed and non iframed editors.
+						marginTop: '4rem',
+					} }
+				>
+					<PostTitle ref={ titleRef } />
+				</div>
+			) }
+			<RecursionProvider
+				blockName={ wrapperBlockName }
+				uniqueId={ wrapperUniqueId }
+			>
+				<BlockList
+					className={ classnames(
+						className,
+						'is-' + deviceType.toLowerCase() + '-preview',
+						renderingMode !== 'post-only'
+							? 'wp-site-blocks'
+							: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
+					) }
+					layout={ blockListLayout }
+					dropZoneElement={
+						// When iframed, pass in the html element of the iframe to
+						// ensure the drop zone extends to the edges of the iframe.
+						disableIframe
+							? localRef.current
+							: localRef.current?.parentNode
+					}
+					renderAppender={ renderAppender }
+				/>
+				<EditTemplateBlocksNotification contentRef={ localRef } />
+			</RecursionProvider>
+			{ children }
+		</BlockCanvas>
+	);
+}
+
+export default EditorCanvas;

package/src/components/editor-canvas/style.scss

@@ -0,0 +1,5 @@
+.editor-canvas__iframe {
+	&.has-history {
+		padding: $grid-unit-60 $grid-unit-60 0;
+	}
+}

package/src/components/entities-saved-states/index.js

@@ -209,7 +209,9 @@ export function EntitiesSavedStatesExtensible( {
 			</Flex>
 
 			<div className="entities-saved-states__text-prompt">
-				<strong>{ __( 'Are you ready to save?' ) }</strong>
+				<strong className="entities-saved-states__text-prompt--header">
+					{ __( 'Are you ready to save?' ) }
+				</strong>
 				{ additionalPrompt }
 				{ isDirty && (
 					<p>

package/src/components/entities-saved-states/style.scss

@@ -10,4 +10,8 @@
 .entities-saved-states__text-prompt {
 	padding: $grid-unit-20;
 	padding-bottom: $grid-unit-05;
+	.entities-saved-states__text-prompt--header {
+		display: block;
+		margin-bottom: $grid-unit-15;
+	}
 }

package/src/components/global-keyboard-shortcuts/index.js

@@ -10,8 +10,10 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '../../store';
 
 export default function EditorKeyboardShortcuts() {
-	const { redo, undo, savePost } = useDispatch( editorStore );
-	const { isEditedPostDirty, isPostSavingLocked } = useSelect( editorStore );
+	const { redo, undo, savePost, setIsListViewOpened } =
+		useDispatch( editorStore );
+	const { isEditedPostDirty, isPostSavingLocked, isListViewOpened } =
+		useSelect( editorStore );
 
 	useShortcut( 'core/editor/undo', ( event ) => {
 		undo();
@@ -45,5 +47,13 @@ export default function EditorKeyboardShortcuts() {
 		savePost();
 	} );
 
+	// Only opens the list view. Other functionality for this shortcut happens in the rendered sidebar.
+	useShortcut( 'core/editor/toggle-list-view', ( event ) => {
+		if ( ! isListViewOpened() ) {
+			event.preventDefault();
+			setIsListViewOpened( true );
+		}
+	} );
+
 	return null;
 }

package/src/components/global-keyboard-shortcuts/register-shortcuts.js

@@ -53,6 +53,16 @@ function EditorKeyboardShortcutsRegister() {
 						},
 				  ],
 		} );
+
+		registerShortcut( {
+			name: 'core/editor/toggle-list-view',
+			category: 'global',
+			description: __( 'Open the block list view.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: 'o',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return <BlockEditorKeyboardShortcuts.Register />;

package/src/components/index.js

@@ -8,6 +8,7 @@ export * from './autocompleters';
 
 // Post Related Components.
 export { default as AutosaveMonitor } from './autosave-monitor';
+export { default as DocumentBar } from './document-bar';
 export { default as DocumentOutline } from './document-outline';
 export { default as DocumentOutlineCheck } from './document-outline/check';
 export { EditorKeyboardShortcuts };
@@ -22,20 +23,26 @@ export { default as ErrorBoundary } from './error-boundary';
 export { default as LocalAutosaveMonitor } from './local-autosave-monitor';
 export { default as PageAttributesCheck } from './page-attributes/check';
 export { default as PageAttributesOrder } from './page-attributes/order';
+export { default as PageAttributesPanel } from './page-attributes/panel';
 export { default as PageAttributesParent } from './page-attributes/parent';
-export { default as PageTemplate } from './post-template';
+export { default as PageTemplate } from './post-template/classic-theme';
+export { default as PostTemplatePanel } from './post-template/panel';
 export { default as PostAuthor } from './post-author';
 export { default as PostAuthorCheck } from './post-author/check';
 export { default as PostAuthorPanel } from './post-author/panel';
 export { default as PostComments } from './post-comments';
+export { default as PostDiscussionPanel } from './post-discussion/panel';
 export { default as PostExcerpt } from './post-excerpt';
 export { default as PostExcerptCheck } from './post-excerpt/check';
+export { default as PostExcerptPanel } from './post-excerpt/panel';
 export { default as PostFeaturedImage } from './post-featured-image';
 export { default as PostFeaturedImageCheck } from './post-featured-image/check';
+export { default as PostFeaturedImagePanel } from './post-featured-image/panel';
 export { default as PostFormat } from './post-format';
 export { default as PostFormatCheck } from './post-format/check';
 export { default as PostLastRevision } from './post-last-revision';
 export { default as PostLastRevisionCheck } from './post-last-revision/check';
+export { default as PostLastRevisionPanel } from './post-last-revision/panel';
 export { default as PostLockedModal } from './post-locked-modal';
 export { default as PostPendingStatus } from './post-pending-status';
 export { default as PostPendingStatusCheck } from './post-pending-status/check';
@@ -65,6 +72,7 @@ export { default as PostTaxonomies } from './post-taxonomies';
 export { FlatTermSelector as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector';
 export { HierarchicalTermSelector as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector';
 export { default as PostTaxonomiesCheck } from './post-taxonomies/check';
+export { default as PostTaxonomiesPanel } from './post-taxonomies/panel';
 export { default as PostTextEditor } from './post-text-editor';
 export { default as PostTitle } from './post-title';
 export { default as PostTitleRaw } from './post-title/post-title-raw';

package/src/components/index.native.js

@@ -9,5 +9,6 @@ export { default as EditorProvider } from './provider';
 
 // Other Components.
 export { default as EditorHelpTopics } from './editor-help';
+export { default as OfflineStatus } from './offline-status';
 
 export * from './deprecated';

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

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Button, VisuallyHidden } from '@wordpress/components';
+import { __experimentalLibrary as Library } from '@wordpress/block-editor';
+import { close } from '@wordpress/icons';
+import {
+	useViewportMatch,
+	__experimentalUseDialog as useDialog,
+} from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+export default function InserterSidebar() {
+	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
+		const { getInsertionPoint } = unlock( select( editorStore ) );
+		const { get } = select( preferencesStore );
+		return {
+			insertionPoint: getInsertionPoint(),
+			showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ),
+		};
+	}, [] );
+	const { setIsInserterOpened } = useDispatch( editorStore );
+
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
+	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
+		onClose: () => setIsInserterOpened( false ),
+		focusOnMount: null,
+	} );
+
+	const libraryRef = useRef();
+	useEffect( () => {
+		libraryRef.current.focusSearch();
+	}, [] );
+
+	return (
+		<div
+			ref={ inserterDialogRef }
+			{ ...inserterDialogProps }
+			className="editor-inserter-sidebar"
+		>
+			<TagName className="editor-inserter-sidebar__header">
+				<Button
+					icon={ close }
+					label={ __( 'Close block inserter' ) }
+					onClick={ () => setIsInserterOpened( false ) }
+				/>
+			</TagName>
+			<div className="editor-inserter-sidebar__content">
+				<Library
+					showMostUsedBlocks={ showMostUsedBlocks }
+					showInserterHelpPanel
+					shouldFocusBlock={ isMobileViewport }
+					rootClientId={ insertionPoint.rootClientId }
+					__experimentalInsertionIndex={
+						insertionPoint.insertionIndex
+					}
+					__experimentalFilterValue={ insertionPoint.filterValue }
+					ref={ libraryRef }
+				/>
+			</div>
+		</div>
+	);
+}