@wordpress/editor 13.34.0 → 13.35.0

package/src/components/post-sticky/panel.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+import PostStickyForm from './';
+import PostStickyCheck from './check';
+
+export function PostStickyPanel() {
+	return (
+		<PostStickyCheck>
+			<PostPanelRow>
+				<PostStickyForm />
+			</PostPanelRow>
+		</PostStickyCheck>
+	);
+}
+
+export default PostStickyPanel;

package/src/components/post-title/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -185,7 +185,7 @@ function PostTitle( _, forwardedRef ) {
 
 	// The wp-block className is important for editor styles.
 	// This same block is used in both the visual and the code editor.
-	const className = classnames( DEFAULT_CLASSNAMES, {
+	const className = clsx( DEFAULT_CLASSNAMES, {
 		'is-selected': isSelected,
 		'has-fixed-toolbar': hasFixedToolbar,
 	} );

package/src/components/post-title/post-title-raw.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -51,7 +51,7 @@ function PostTitleRaw( _, forwardedRef ) {
 
 	// The wp-block className is important for editor styles.
 	// This same block is used in both the visual and the code editor.
-	const className = classnames( DEFAULT_CLASSNAMES, {
+	const className = clsx( DEFAULT_CLASSNAMES, {
 		'is-selected': isSelected,
 		'has-fixed-toolbar': hasFixedToolbar,
 		'is-raw-text': true,

package/src/components/post-transform-panel/hooks.js

@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { parse } from '@wordpress/blocks';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { EXCLUDED_PATTERN_SOURCES, PATTERN_TYPES } =
+	unlock( patternsPrivateApis );
+
+function injectThemeAttributeInBlockTemplateContent(
+	block,
+	currentThemeStylesheet
+) {
+	block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
+		return injectThemeAttributeInBlockTemplateContent(
+			innerBlock,
+			currentThemeStylesheet
+		);
+	} );
+
+	if (
+		block.name === 'core/template-part' &&
+		block.attributes.theme === undefined
+	) {
+		block.attributes.theme = currentThemeStylesheet;
+	}
+	return block;
+}
+
+/**
+ * Filter all patterns and return only the ones that are compatible with the current template.
+ *
+ * @param {Array}  patterns An array of patterns.
+ * @param {Object} template The current template.
+ * @return {Array} Array of patterns that are compatible with the current template.
+ */
+function filterPatterns( patterns, template ) {
+	// Filter out duplicates.
+	const filterOutDuplicatesByName = ( currentItem, index, items ) =>
+		index === items.findIndex( ( item ) => currentItem.name === item.name );
+
+	// Filter out core/directory patterns not included in theme.json.
+	const filterOutExcludedPatternSources = ( pattern ) =>
+		! EXCLUDED_PATTERN_SOURCES.includes( pattern.source );
+
+	// Looks for patterns that have the same template type as the current template,
+	// or have a block type that matches the current template area.
+	const filterCompatiblePatterns = ( pattern ) =>
+		pattern.templateTypes?.includes( template.slug ) ||
+		pattern.blockTypes?.includes( 'core/template-part/' + template.area );
+
+	return patterns.filter( ( pattern, index, items ) => {
+		return (
+			filterOutDuplicatesByName( pattern, index, items ) &&
+			filterOutExcludedPatternSources( pattern ) &&
+			filterCompatiblePatterns( pattern )
+		);
+	} );
+}
+
+function preparePatterns( patterns, currentThemeStylesheet ) {
+	return patterns.map( ( pattern ) => ( {
+		...pattern,
+		keywords: pattern.keywords || [],
+		type: PATTERN_TYPES.theme,
+		blocks: parse( pattern.content, {
+			__unstableSkipMigrationLogs: true,
+		} ).map( ( block ) =>
+			injectThemeAttributeInBlockTemplateContent(
+				block,
+				currentThemeStylesheet
+			)
+		),
+	} ) );
+}
+
+export function useAvailablePatterns( template ) {
+	const { blockPatterns, restBlockPatterns, currentThemeStylesheet } =
+		useSelect( ( select ) => {
+			const { getEditorSettings } = select( editorStore );
+			const settings = getEditorSettings();
+
+			return {
+				blockPatterns:
+					settings.__experimentalAdditionalBlockPatterns ??
+					settings.__experimentalBlockPatterns,
+				restBlockPatterns: select( coreStore ).getBlockPatterns(),
+				currentThemeStylesheet:
+					select( coreStore ).getCurrentTheme().stylesheet,
+			};
+		}, [] );
+
+	return useMemo( () => {
+		const mergedPatterns = [
+			...( blockPatterns || [] ),
+			...( restBlockPatterns || [] ),
+		];
+		const filteredPatterns = filterPatterns( mergedPatterns, template );
+		return preparePatterns(
+			filteredPatterns,
+			template,
+			currentThemeStylesheet
+		);
+	}, [ blockPatterns, restBlockPatterns, template, currentThemeStylesheet ] );
+}

package/src/components/post-transform-panel/index.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { PanelBody, PanelRow } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useAsyncList } from '@wordpress/compose';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { serialize } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { useAvailablePatterns } from './hooks';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../store/constants';
+
+function TemplatesList( { availableTemplates, onSelect } ) {
+	const shownTemplates = useAsyncList( availableTemplates );
+	if ( ! availableTemplates || availableTemplates?.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<BlockPatternsList
+			label={ __( 'Templates' ) }
+			blockPatterns={ availableTemplates }
+			shownPatterns={ shownTemplates }
+			onClickPattern={ onSelect }
+			showTitlesAsTooltip
+		/>
+	);
+}
+
+function PostTransform() {
+	const { record, postType, postId } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const type = getCurrentPostType();
+		const id = getCurrentPostId();
+		return {
+			postType: type,
+			postId: id,
+			record: getEditedEntityRecord( 'postType', type, id ),
+		};
+	}, [] );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const availablePatterns = useAvailablePatterns( record );
+	const onTemplateSelect = async ( selectedTemplate ) => {
+		await editEntityRecord( 'postType', postType, postId, {
+			blocks: selectedTemplate.blocks,
+			content: serialize( selectedTemplate.blocks ),
+		} );
+	};
+	if ( ! availablePatterns?.length ) {
+		return null;
+	}
+
+	return (
+		<PanelBody
+			title={ __( 'Transform into:' ) }
+			initialOpen={ record.type === TEMPLATE_PART_POST_TYPE }
+		>
+			<PanelRow>
+				<p>
+					{ __(
+						'Choose a predefined pattern to switch up the look of your template.' // TODO - make this dynamic?
+					) }
+				</p>
+			</PanelRow>
+
+			<TemplatesList
+				availableTemplates={ availablePatterns }
+				onSelect={ onTemplateSelect }
+			/>
+		</PanelBody>
+	);
+}
+
+export default function PostTransformPanel() {
+	const { postType } = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		return {
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+
+	if (
+		! [ TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE ].includes( postType )
+	) {
+		return null;
+	}
+
+	return <PostTransform />;
+}

package/src/components/post-trash/panel.js

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import PostTrashCheck from './check';
+import PostTrashLink from './';
+
+export default function PostTrashPanel() {
+	return (
+		<PostTrashCheck>
+			<PostTrashLink />
+		</PostTrashCheck>
+	);
+}

package/src/components/post-type-support-check/index.js

@@ -27,7 +27,7 @@ function PostTypeSupportCheck( { children, supportKeys } ) {
 		const { getPostType } = select( coreStore );
 		return getPostType( getEditedPostAttribute( 'type' ) );
 	}, [] );
-	let isSupported = true;
+	let isSupported = !! postType;
 	if ( postType ) {
 		isSupported = (
 			Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ]

package/src/components/post-type-support-check/test/index.js

@@ -29,7 +29,7 @@ function setupUseSelectMock( postType ) {
 }
 
 describe( 'PostTypeSupportCheck', () => {
-	it( 'renders its children when post type is not known', () => {
+	it( 'does not render its children when post type is not known', () => {
 		setupUseSelectMock( undefined );
 
 		const { container } = render(
@@ -38,7 +38,7 @@ describe( 'PostTypeSupportCheck', () => {
 			</PostTypeSupportCheck>
 		);
 
-		expect( container ).toHaveTextContent( 'Supported' );
+		expect( container ).not.toHaveTextContent( 'Supported' );
 	} );
 
 	it( 'does not render its children when post type is known and not supports', () => {

package/src/components/preferences-modal/index.js

@@ -70,9 +70,9 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 								scope="core"
 								featureName="showListViewByDefault"
 								help={ __(
-									'Opens the block list view sidebar by default.'
+									'Opens the List View sidebar by default.'
 								) }
-								label={ __( 'Always open list view' ) }
+								label={ __( 'Always open List View' ) }
 							/>
 							{ showBlockBreadcrumbsOption && (
 								<PreferenceToggleControl
@@ -88,7 +88,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 								scope="core"
 								featureName="allowRightClickOverrides"
 								help={ __(
-									'Allows contextual list view menus via right-click, overriding browser defaults.'
+									'Allows contextual List View menus via right-click, overriding browser defaults.'
 								) }
 								label={ __(
 									'Allow right-click contextual menus'

package/src/components/provider/index.js

@@ -28,6 +28,8 @@ import useCommands from '../commands';
 import BlockRemovalWarnings from '../block-removal-warnings';
 import StartPageOptions from '../start-page-options';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
+import ContentOnlySettingsMenu from '../block-settings-menu/content-only-settings-menu';
+import StartTemplateOptions from '../start-template-options';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -264,6 +266,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							{ ! settings.__unstableIsPreviewMode && (
 								<>
 									<PatternsMenuItems />
+									<ContentOnlySettingsMenu />
 									{ mode === 'template-locked' && (
 										<DisableNonPageContentBlocks />
 									) }
@@ -273,6 +276,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 									<KeyboardShortcutHelpModal />
 									<BlockRemovalWarnings />
 									<StartPageOptions />
+									<StartTemplateOptions />
 								</>
 							) }
 						</BlockEditorProviderComponent>

package/src/components/provider/use-block-editor-settings.js

@@ -24,8 +24,10 @@ import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import { store as editorStore } from '../../store';
 import { lock, unlock } from '../../lock-unlock';
+import { useGlobalStylesContext } from '../global-styles-provider';
 
 const EMPTY_BLOCKS_LIST = [];
+const DEFAULT_STYLES = {};
 
 function __experimentalReusableBlocksSelect( select ) {
 	return (
@@ -173,6 +175,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		[ postType, postId, isLargeViewport, renderingMode ]
 	);
 
+	const { merged: mergedGlobalStyles } = useGlobalStylesContext();
+	const globalStylesData = mergedGlobalStyles.styles ?? DEFAULT_STYLES;
+
 	const settingsBlockPatterns =
 		settings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
 		settings.__experimentalBlockPatterns; // WP 5.9
@@ -251,6 +256,8 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 	}, [ settings.allowedBlockTypes, hiddenBlockTypes, blockTypes ] );
 
 	const forceDisableFocusMode = settings.focusMode === false;
+	const { globalStylesDataKey, selectBlockPatternsKey } =
+		unlock( privateApis );
 
 	return useMemo( () => {
 		const blockEditorSettings = {
@@ -259,6 +266,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 					BLOCK_EDITOR_SETTINGS.includes( key )
 				)
 			),
+			[ globalStylesDataKey ]: globalStylesData,
 			allowedBlockTypes,
 			allowRightClickOverrides,
 			focusMode: focusMode && ! forceDisableFocusMode,
@@ -267,10 +275,14 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			keepCaretInsideBlock,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			__experimentalBlockPatterns: blockPatterns,
-			[ unlock( privateApis ).selectBlockPatternsKey ]: ( select ) =>
-				unlock( select( coreStore ) ).getBlockPatternsForPostType(
-					postType
-				),
+			[ selectBlockPatternsKey ]: ( select ) => {
+				const { hasFinishedResolution, getBlockPatternsForPostType } =
+					unlock( select( coreStore ) );
+				const patterns = getBlockPatternsForPostType( postType );
+				return hasFinishedResolution( 'getBlockPatterns' )
+					? patterns
+					: undefined;
+			},
 			[ unlock( privateApis ).reusableBlocksSelectKey ]:
 				__experimentalReusableBlocksSelect,
 			__experimentalBlockPatternCategories: blockPatternCategories,
@@ -327,6 +339,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		postType,
 		setIsInserterOpened,
 		sectionRootClientId,
+		globalStylesData,
+		globalStylesDataKey,
+		selectBlockPatternsKey,
 	] );
 }
 

package/src/components/sidebar/constants.js

@@ -0,0 +1,4 @@
+export const sidebars = {
+	document: 'edit-post/document',
+	block: 'edit-post/block',
+};

package/src/components/sidebar/header.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { sidebars } from './constants';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+const SidebarHeader = ( _, ref ) => {
+	const { documentLabel } = useSelect( ( select ) => {
+		const { getPostTypeLabel } = select( editorStore );
+
+		return {
+			// translators: Default label for the Document sidebar tab, not selected.
+			documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ),
+		};
+	}, [] );
+
+	return (
+		<Tabs.TabList ref={ ref }>
+			<Tabs.Tab
+				tabId={ sidebars.document }
+				// Used for focus management in the SettingsSidebar component.
+				data-tab-id={ sidebars.document }
+			>
+				{ documentLabel }
+			</Tabs.Tab>
+			<Tabs.Tab
+				tabId={ sidebars.block }
+				// Used for focus management in the SettingsSidebar component.
+				data-tab-id={ sidebars.block }
+			>
+				{ /* translators: Text label for the Block Settings Sidebar tab. */ }
+				{ __( 'Block' ) }
+			</Tabs.Tab>
+		</Tabs.TabList>
+	);
+};
+
+export default forwardRef( SidebarHeader );

package/src/components/sidebar/index.js

@@ -0,0 +1,200 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockInspector,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Platform,
+	useCallback,
+	useContext,
+	useEffect,
+	useRef,
+} from '@wordpress/element';
+import { isRTL, __ } from '@wordpress/i18n';
+import { drawerLeft, drawerRight } from '@wordpress/icons';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import PageAttributesPanel from '../page-attributes/panel';
+import PatternOverridesPanel from '../pattern-overrides-panel';
+import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
+import PluginSidebar from '../plugin-sidebar';
+import PostLastRevisionPanel from '../post-last-revision/panel';
+import PostSummary from './post-summary';
+import PostTaxonomiesPanel from '../post-taxonomies/panel';
+import PostTransformPanel from '../post-transform-panel';
+import SidebarHeader from './header';
+import TemplateContentPanel from '../template-content-panel';
+import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-sidebars';
+import { sidebars } from './constants';
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import {
+	NAVIGATION_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../store/constants';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
+	web: true,
+	native: false,
+} );
+
+const SidebarContent = ( {
+	tabName,
+	keyboardShortcut,
+	renderingMode,
+	onActionPerformed,
+	extraPanels,
+} ) => {
+	const tabListRef = useRef( null );
+	// Because `PluginSidebar` renders a `ComplementaryArea`, we
+	// need to forward the `Tabs` context so it can be passed through the
+	// underlying slot/fill.
+	const tabsContextValue = useContext( Tabs.Context );
+
+	// This effect addresses a race condition caused by tabbing from the last
+	// block in the editor into the settings sidebar. Without this effect, the
+	// selected tab and browser focus can become separated in an unexpected way
+	// (e.g the "block" tab is focused, but the "post" tab is selected).
+	useEffect( () => {
+		const tabsElements = Array.from(
+			tabListRef.current?.querySelectorAll( '[role="tab"]' ) || []
+		);
+		const selectedTabElement = tabsElements.find(
+			// We are purposefully using a custom `data-tab-id` attribute here
+			// because we don't want rely on any assumptions about `Tabs`
+			// component internals.
+			( element ) => element.getAttribute( 'data-tab-id' ) === tabName
+		);
+		const activeElement = selectedTabElement?.ownerDocument.activeElement;
+		const tabsHasFocus = tabsElements.some( ( element ) => {
+			return activeElement && activeElement.id === element.id;
+		} );
+		if (
+			tabsHasFocus &&
+			selectedTabElement &&
+			selectedTabElement.id !== activeElement?.id
+		) {
+			selectedTabElement?.focus();
+		}
+	}, [ tabName ] );
+
+	return (
+		<PluginSidebar
+			identifier={ tabName }
+			header={
+				<Tabs.Context.Provider value={ tabsContextValue }>
+					<SidebarHeader ref={ tabListRef } />
+				</Tabs.Context.Provider>
+			}
+			closeLabel={ __( 'Close Settings' ) }
+			// This classname is added so we can apply a corrective negative
+			// margin to the panel.
+			// see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049
+			className="editor-sidebar__panel"
+			headerClassName="editor-sidebar__panel-tabs"
+			/* translators: button label text should, if possible, be under 16 characters. */
+			title={ __( 'Settings' ) }
+			toggleShortcut={ keyboardShortcut }
+			icon={ isRTL() ? drawerLeft : drawerRight }
+			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
+		>
+			<Tabs.Context.Provider value={ tabsContextValue }>
+				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
+					<PostSummary onActionPerformed={ onActionPerformed } />
+					<PluginDocumentSettingPanel.Slot />
+					{ renderingMode !== 'post-only' && (
+						<TemplateContentPanel />
+					) }
+					<PostTransformPanel />
+					<PostLastRevisionPanel />
+					<PostTaxonomiesPanel />
+					<PageAttributesPanel />
+					<PatternOverridesPanel />
+					{ extraPanels }
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
+					<BlockInspector />
+				</Tabs.TabPanel>
+			</Tabs.Context.Provider>
+		</PluginSidebar>
+	);
+};
+
+const Sidebar = ( { extraPanels, onActionPerformed } ) => {
+	useAutoSwitchEditorSidebars();
+	const { tabName, keyboardShortcut, showSummary, renderingMode } = useSelect(
+		( select ) => {
+			const shortcut = select(
+				keyboardShortcutsStore
+			).getShortcutRepresentation( 'core/editor/toggle-sidebar' );
+
+			const sidebar =
+				select( interfaceStore ).getActiveComplementaryArea( 'core' );
+			const _isEditorSidebarOpened = [
+				sidebars.block,
+				sidebars.document,
+			].includes( sidebar );
+			let _tabName = sidebar;
+			if ( ! _isEditorSidebarOpened ) {
+				_tabName = !! select(
+					blockEditorStore
+				).getBlockSelectionStart()
+					? sidebars.block
+					: sidebars.document;
+			}
+
+			return {
+				tabName: _tabName,
+				keyboardShortcut: shortcut,
+				showSummary: ! [
+					TEMPLATE_POST_TYPE,
+					TEMPLATE_PART_POST_TYPE,
+					NAVIGATION_POST_TYPE,
+				].includes( select( editorStore ).getCurrentPostType() ),
+				renderingMode: select( editorStore ).getRenderingMode(),
+			};
+		},
+		[]
+	);
+
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+
+	const onTabSelect = useCallback(
+		( newSelectedTabId ) => {
+			if ( !! newSelectedTabId ) {
+				enableComplementaryArea( 'core', newSelectedTabId );
+			}
+		},
+		[ enableComplementaryArea ]
+	);
+
+	return (
+		<Tabs
+			selectedTabId={ tabName }
+			onSelect={ onTabSelect }
+			selectOnMove={ false }
+		>
+			<SidebarContent
+				tabName={ tabName }
+				keyboardShortcut={ keyboardShortcut }
+				showSummary={ showSummary }
+				renderingMode={ renderingMode }
+				onActionPerformed={ onActionPerformed }
+				extraPanels={ extraPanels }
+			/>
+		</Tabs>
+	);
+};
+
+export default Sidebar;