@wordpress/edit-site 5.11.0 → 5.12.1

package/src/components/save-panel/index.js

@@ -7,17 +7,75 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Button, Modal } from '@wordpress/components';
-import { EntitiesSavedStates } from '@wordpress/editor';
+import {
+	EntitiesSavedStates,
+	useEntitiesSavedStatesIsDirty,
+	privateApis,
+} from '@wordpress/editor';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { NavigableRegion } from '@wordpress/interface';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import { useActivateTheme } from '../../utils/use-activate-theme';
+import {
+	currentlyPreviewingTheme,
+	isPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+
+const { EntitiesSavedStatesExtensible } = unlock( privateApis );
+
+const EntitiesSavedStatesForPreview = ( { onClose } ) => {
+	const isDirtyProps = useEntitiesSavedStatesIsDirty();
+	let activateSaveLabel;
+	if ( isDirtyProps.isDirty ) {
+		activateSaveLabel = __( 'Activate & Save' );
+	} else {
+		activateSaveLabel = __( 'Activate' );
+	}
+
+	const { getTheme } = useSelect( coreStore );
+	const theme = getTheme( currentlyPreviewingTheme() );
+	const additionalPrompt = (
+		<p>
+			{ sprintf(
+				'Saving your changes will change your active theme to  %1$s.',
+				theme?.name?.rendered
+			) }
+		</p>
+	);
+
+	const activateTheme = useActivateTheme();
+	const onSave = async ( values ) => {
+		await activateTheme();
+		return values;
+	};
+
+	return (
+		<EntitiesSavedStatesExtensible
+			{ ...{
+				...isDirtyProps,
+				additionalPrompt,
+				close: onClose,
+				onSave,
+				saveEnabled: true,
+				saveLabel: activateSaveLabel,
+			} }
+		/>
+	);
+};
+
+const _EntitiesSavedStates = ( { onClose } ) => {
+	if ( isPreviewingTheme() ) {
+		return <EntitiesSavedStatesForPreview onClose={ onClose } />;
+	}
+	return <EntitiesSavedStates close={ onClose } />;
+};
 
 export default function SavePanel() {
 	const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {
@@ -33,18 +91,7 @@ export default function SavePanel() {
 		};
 	}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
-	const activateTheme = useActivateTheme();
 	const onClose = () => setIsSaveViewOpened( false );
-	const onSave = async ( values ) => {
-		await activateTheme();
-		return values;
-	};
-
-	const entitySavedStates = window?.__experimentalEnableThemePreviews ? (
-		<EntitiesSavedStates close={ onClose } onSave={ onSave } />
-	) : (
-		<EntitiesSavedStates close={ onClose } />
-	);
 
 	if ( canvasMode === 'view' ) {
 		return isSaveViewOpen ? (
@@ -56,7 +103,7 @@ export default function SavePanel() {
 					'Save site, content, and template changes'
 				) }
 			>
-				{ entitySavedStates }
+				<_EntitiesSavedStates onClose={ onClose } />
 			</Modal>
 		) : null;
 	}
@@ -69,7 +116,7 @@ export default function SavePanel() {
 			ariaLabel={ __( 'Save panel' ) }
 		>
 			{ isSaveViewOpen ? (
-				entitySavedStates
+				<_EntitiesSavedStates onClose={ onClose } />
 			) : (
 				<div className="edit-site-editor__toggle-save-panel">
 					<Button

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -9,35 +9,86 @@ import {
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
+import { useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { ESCAPE } from '@wordpress/keycodes';
+import { focus } from '@wordpress/dom';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { PrivateListView } = unlock( blockEditorPrivateApis );
 
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
 
+	// This hook handles focus when the sidebar first renders.
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	// The next 2 hooks handle focus for when the sidebar closes and returning focus to the element that had focus before sidebar opened.
 	const headerFocusReturnRef = useFocusReturn();
 	const contentFocusReturnRef = useFocusReturn();
+
 	function closeOnEscape( event ) {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
 			setIsListViewOpened( false );
 		}
 	}
 
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the dropZoneElement updates.
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
+
+	// This ref refers to the sidebar as a whole.
+	const sidebarRef = useRef();
+	// This ref refers to the close button.
+	const sidebarCloseButtonRef = useRef();
+	// This ref refers to the list view application area.
+	const listViewRef = useRef();
+
+	/*
+	 * Callback function to handle list view or close button focus.
+	 *
+	 * @return void
+	 */
+	function handleSidebarFocus() {
+		// Either focus the list view or the sidebar close button. Must have a fallback because the list view does not render when there are no blocks.
+		const listViewApplicationFocus = focus.tabbable.find(
+			listViewRef.current
+		)[ 0 ];
+		const listViewFocusArea = sidebarRef.current.contains(
+			listViewApplicationFocus
+		)
+			? listViewApplicationFocus
+			: sidebarCloseButtonRef.current;
+		listViewFocusArea.focus();
+	}
+
+	// This only fires when the sidebar is open because of the conditional rendering. It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
+	useShortcut( 'core/edit-site/toggle-list-view', () => {
+		// If the sidebar has focus, it is safe to close.
+		if (
+			sidebarRef.current.contains(
+				sidebarRef.current.ownerDocument.activeElement
+			)
+		) {
+			setIsListViewOpened( false );
+			// If the list view or close button does not have focus, focus should be moved to it.
+		} else {
+			handleSidebarFocus();
+		}
+	} );
+
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			className="edit-site-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
+			ref={ sidebarRef }
 		>
 			<div
 				className="edit-site-editor__list-view-panel-header"
@@ -48,6 +99,7 @@ export default function ListViewSidebar() {
 					icon={ closeSmall }
 					label={ __( 'Close' ) }
 					onClick={ () => setIsListViewOpened( false ) }
+					ref={ sidebarCloseButtonRef }
 				/>
 			</div>
 			<div
@@ -55,9 +107,11 @@ export default function ListViewSidebar() {
 				ref={ useMergeRefs( [
 					contentFocusReturnRef,
 					focusOnMountRef,
+					setDropZoneElement,
+					listViewRef,
 				] ) }
 			>
-				<PrivateListView />
+				<PrivateListView dropZoneElement={ dropZoneElement } />
 			</div>
 		</div>
 	);

package/src/components/sidebar/index.js

@@ -12,8 +12,10 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import SidebarNavigationScreenLibrary from '../sidebar-navigation-screen-library';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
+import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
 import useSyncPathWithURL, {
 	getPathFromURL,
 } from '../sync-state-with-url/use-sync-path-with-url';
@@ -22,7 +24,7 @@ import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SaveHub from '../save-hub';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
 import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
 
@@ -51,13 +53,19 @@ function SidebarScreens() {
 			<NavigatorScreen path="/page/:postId">
 				<SidebarNavigationScreenPage />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template|wp_template_part)">
+			<NavigatorScreen path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
+			<NavigatorScreen path="/library">
+				<SidebarNavigationScreenLibrary />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template_part|wp_block)/:postId">
+				<SidebarNavigationScreenPattern />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template)/all">
 				<SidebarNavigationScreenTemplatesBrowse />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/:postId">
+			<NavigatorScreen path="/:postType(wp_template)/:postId">
 				<SidebarNavigationScreenTemplate />
 			</NavigatorScreen>
 		</>
@@ -76,9 +84,7 @@ function Sidebar() {
 			>
 				<SidebarScreens />
 			</NavigatorProvider>
-			<div className="edit-site-sidebar__footer">
-				<SaveHub />
-			</div>
+			<SaveHub />
 		</>
 	);
 }

package/src/components/sidebar/style.scss

@@ -5,6 +5,9 @@
 	.components-navigator-screen {
 		@include custom-scrollbars-on-hover(transparent, $gray-700);
 		scrollbar-gutter: stable;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
 	}
 }
 
@@ -15,10 +18,6 @@
 	padding: $canvas-padding 0;
 }
 
-.edit-site-sidebar__content.edit-site-sidebar__content {
-	overflow-x: unset;
-}
-
 .edit-site-sidebar__content > div {
 	// This matches the logo padding
 	padding: 0 $grid-unit-15;

package/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -7,6 +7,7 @@ import { styles, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -15,31 +16,36 @@ import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI } from '../global-styles';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesMenuSlot } from '../global-styles/ui';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 export default function GlobalStylesSidebar() {
-	const { shouldClearCanvasContainerView, isStyleBookOpened } = useSelect(
-		( select ) => {
-			const { getActiveComplementaryArea } = select( interfaceStore );
-			const { getEditorCanvasContainerView, getCanvasMode } = unlock(
-				select( editSiteStore )
-			);
-			const _isVisualEditorMode =
-				'visual' === select( editSiteStore ).getEditorMode();
-			const _isEditCanvasMode = 'edit' === getCanvasMode();
+	const {
+		shouldClearCanvasContainerView,
+		isStyleBookOpened,
+		showListViewByDefault,
+	} = useSelect( ( select ) => {
+		const { getActiveComplementaryArea } = select( interfaceStore );
+		const { getEditorCanvasContainerView, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
+		const _isVisualEditorMode =
+			'visual' === select( editSiteStore ).getEditorMode();
+		const _isEditCanvasMode = 'edit' === getCanvasMode();
+		const _showListViewByDefault = select( preferencesStore ).get(
+			'core/edit-site',
+			'showListViewByDefault'
+		);
 
-			return {
-				isStyleBookOpened:
-					'style-book' === getEditorCanvasContainerView(),
-				shouldClearCanvasContainerView:
-					'edit-site/global-styles' !==
-						getActiveComplementaryArea( 'core/edit-site' ) ||
-					! _isVisualEditorMode ||
-					! _isEditCanvasMode,
-			};
-		},
-		[]
-	);
+		return {
+			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
+			shouldClearCanvasContainerView:
+				'edit-site/global-styles' !==
+					getActiveComplementaryArea( 'core/edit-site' ) ||
+				! _isVisualEditorMode ||
+				! _isEditCanvasMode,
+			showListViewByDefault: _showListViewByDefault,
+		};
+	}, [] );
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
@@ -50,6 +56,8 @@ export default function GlobalStylesSidebar() {
 		}
 	}, [ shouldClearCanvasContainerView ] );
 
+	const { setIsListViewOpened } = useDispatch( editSiteStore );
+
 	return (
 		<DefaultSidebar
 			className="edit-site-global-styles-sidebar"
@@ -59,7 +67,11 @@ export default function GlobalStylesSidebar() {
 			closeLabel={ __( 'Close Styles' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
-				<Flex className="edit-site-global-styles-sidebar__header">
+				<Flex
+					className="edit-site-global-styles-sidebar__header"
+					role="menubar"
+					aria-label={ __( 'Styles actions' ) }
+				>
 					<FlexBlock style={ { minWidth: 'min-content' } }>
 						<strong>{ __( 'Styles' ) }</strong>
 					</FlexBlock>
@@ -69,16 +81,17 @@ export default function GlobalStylesSidebar() {
 							label={ __( 'Style Book' ) }
 							isPressed={ isStyleBookOpened }
 							disabled={ shouldClearCanvasContainerView }
-							onClick={ () =>
+							onClick={ () => {
+								setIsListViewOpened(
+									isStyleBookOpened && showListViewByDefault
+								);
 								setEditorCanvasContainerView(
 									isStyleBookOpened ? undefined : 'style-book'
-								)
-							}
+								);
+							} }
 						/>
 					</FlexItem>
-					<FlexItem>
-						<GlobalStylesMenuSlot />
-					</FlexItem>
+					<GlobalStylesMenuSlot />
 				</Flex>
 			}
 		>

package/src/components/sidebar-edit-mode/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill, PanelBody, PanelRow } from '@wordpress/components';
+import { createSlotFill } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { useEffect } from '@wordpress/element';
@@ -16,8 +16,8 @@ import DefaultSidebar from './default-sidebar';
 import GlobalStylesSidebar from './global-styles-sidebar';
 import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
-import LastRevision from './template-revisions';
-import TemplateCard from './template-card';
+import PagePanels from './page-panels';
+import TemplatePanel from './template-panel';
 import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
 import { store as editSiteStore } from '../../store';
@@ -33,6 +33,7 @@ export function SidebarComplementaryAreaFills() {
 		isEditorSidebarOpened,
 		hasBlockSelection,
 		supportsGlobalStyles,
+		hasPageContentFocus,
 	} = useSelect( ( select ) => {
 		const _sidebar =
 			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
@@ -47,18 +48,23 @@ export function SidebarComplementaryAreaFills() {
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			supportsGlobalStyles: ! settings?.supportsTemplatePartsMode,
+			hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),
 		};
 	}, [] );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
 	useEffect( () => {
-		if ( ! isEditorSidebarOpened ) return;
+		// Don't automatically switch tab when the sidebar is closed or when we
+		// are focused on page content.
+		if ( ! isEditorSidebarOpened || hasPageContentFocus ) {
+			return;
+		}
 		if ( hasBlockSelection ) {
 			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
 		} else {
 			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
 		}
-	}, [ hasBlockSelection, isEditorSidebarOpened ] );
+	}, [ hasBlockSelection, isEditorSidebarOpened, hasPageContentFocus ] );
 
 	let sidebarName = sidebar;
 	if ( ! isEditorSidebarOpened ) {
@@ -77,15 +83,11 @@ export function SidebarComplementaryAreaFills() {
 			>
 				{ sidebarName === SIDEBAR_TEMPLATE && (
 					<>
-						<PanelBody>
-							<TemplateCard />
-							<PanelRow
-								header={ __( 'Editing history' ) }
-								className="edit-site-template-revisions"
-							>
-								<LastRevision />
-							</PanelRow>
-						</PanelBody>
+						{ hasPageContentFocus ? (
+							<PagePanels />
+						) : (
+							<TemplatePanel />
+						) }
 						<PluginTemplateSettingPanel.Slot />
 					</>
 				) }

package/src/components/sidebar-edit-mode/page-panels/edit-template.js

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { BlockContextProvider, BlockPreview } from '@wordpress/block-editor';
+import { Button, __experimentalVStack as VStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+
+export default function EditTemplate() {
+	const { context, hasResolved, title, blocks } = useSelect( ( select ) => {
+		const { getEditedPostContext, getEditedPostType, getEditedPostId } =
+			select( editSiteStore );
+		const { getEditedEntityRecord, hasFinishedResolution } =
+			select( coreStore );
+		const _context = getEditedPostContext();
+		const queryArgs = [
+			'postType',
+			getEditedPostType(),
+			getEditedPostId(),
+		];
+		const template = getEditedEntityRecord( ...queryArgs );
+		return {
+			context: _context,
+			hasResolved: hasFinishedResolution(
+				'getEditedEntityRecord',
+				queryArgs
+			),
+			title: template?.title,
+			blocks: template?.blocks,
+		};
+	}, [] );
+
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+
+	const blockContext = useMemo(
+		() => ( { ...context, postType: null, postId: null } ),
+		[ context ]
+	);
+
+	if ( ! hasResolved ) {
+		return null;
+	}
+
+	return (
+		<VStack>
+			<div>{ decodeEntities( title ) }</div>
+			<div className="edit-site-page-panels__edit-template-preview">
+				<BlockContextProvider value={ blockContext }>
+					<BlockPreview viewportWidth={ 1024 } blocks={ blocks } />
+				</BlockContextProvider>
+			</div>
+			<Button
+				className="edit-site-page-panels__edit-template-button"
+				variant="secondary"
+				onClick={ () => setHasPageContentFocus( false ) }
+			>
+				{ __( 'Edit template' ) }
+			</Button>
+		</VStack>
+	);
+}

package/src/components/sidebar-edit-mode/page-panels/index.js

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { page as pageIcon } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+import { humanTimeDiff } from '@wordpress/date';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import SidebarCard from '../sidebar-card';
+import PageContent from './page-content';
+import PageSummary from './page-summary';
+import EditTemplate from './edit-template';
+
+export default function PagePanels() {
+	const { id, type, hasResolved, status, date, password, title, modified } =
+		useSelect( ( select ) => {
+			const { getEditedPostContext } = select( editSiteStore );
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const context = getEditedPostContext();
+			const queryArgs = [ 'postType', context.postType, context.postId ];
+			const page = getEditedEntityRecord( ...queryArgs );
+			return {
+				hasResolved: hasFinishedResolution(
+					'getEditedEntityRecord',
+					queryArgs
+				),
+				title: page?.title,
+				id: page?.id,
+				type: page?.type,
+				status: page?.status,
+				date: page?.date,
+				password: page?.password,
+				modified: page?.modified,
+			};
+		}, [] );
+
+	if ( ! hasResolved ) {
+		return null;
+	}
+
+	return (
+		<>
+			<PanelBody>
+				<SidebarCard
+					title={ decodeEntities( title ) }
+					icon={ pageIcon }
+					description={
+						<VStack>
+							<Text>
+								{ sprintf(
+									// translators: %s: Human-readable time difference, e.g. "2 days ago".
+									__( 'Last edited %s' ),
+									humanTimeDiff( modified )
+								) }
+							</Text>
+						</VStack>
+					}
+				/>
+			</PanelBody>
+			<PanelBody title={ __( 'Summary' ) }>
+				<PageSummary
+					status={ status }
+					date={ date }
+					password={ password }
+					postId={ id }
+					postType={ type }
+				/>
+			</PanelBody>
+			<PanelBody title={ __( 'Content' ) }>
+				<PageContent />
+			</PanelBody>
+			<PanelBody title={ __( 'Template' ) }>
+				<EditTemplate />
+			</PanelBody>
+		</>
+	);
+}

package/src/components/sidebar-edit-mode/page-panels/page-content.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { PAGE_CONTENT_BLOCK_TYPES } from '../../page-content-focus-manager/constants';
+import { unlock } from '../../../lock-unlock';
+
+const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
+
+export default function PageContent() {
+	const clientIds = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__experimentalGetGlobalBlocksByName(
+				PAGE_CONTENT_BLOCK_TYPES
+			),
+		[]
+	);
+	return <BlockQuickNavigation clientIds={ clientIds } />;
+}