@wordpress/edit-site 5.34.0 → 5.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.34.0",
+	"version": "5.35.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,53 +28,51 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.57.0",
-		"@wordpress/api-fetch": "^6.54.0",
-		"@wordpress/blob": "^3.57.0",
-		"@wordpress/block-editor": "^12.25.0",
-		"@wordpress/block-library": "^8.34.0",
-		"@wordpress/blocks": "^12.34.0",
-		"@wordpress/commands": "^0.28.0",
-		"@wordpress/components": "^27.5.0",
-		"@wordpress/compose": "^6.34.0",
-		"@wordpress/core-commands": "^0.26.0",
-		"@wordpress/core-data": "^6.34.0",
-		"@wordpress/data": "^9.27.0",
-		"@wordpress/dataviews": "^1.1.0",
-		"@wordpress/date": "^4.57.0",
-		"@wordpress/deprecated": "^3.57.0",
-		"@wordpress/dom": "^3.57.0",
-		"@wordpress/editor": "^13.34.0",
-		"@wordpress/element": "^5.34.0",
-		"@wordpress/escape-html": "^2.57.0",
-		"@wordpress/hooks": "^3.57.0",
-		"@wordpress/html-entities": "^3.57.0",
-		"@wordpress/i18n": "^4.57.0",
-		"@wordpress/icons": "^9.48.0",
-		"@wordpress/keyboard-shortcuts": "^4.34.0",
-		"@wordpress/keycodes": "^3.57.0",
-		"@wordpress/media-utils": "^4.48.0",
-		"@wordpress/notices": "^4.25.0",
-		"@wordpress/patterns": "^1.18.0",
-		"@wordpress/plugins": "^6.25.0",
-		"@wordpress/preferences": "^3.34.0",
-		"@wordpress/primitives": "^3.55.0",
-		"@wordpress/priority-queue": "^2.57.0",
-		"@wordpress/private-apis": "^0.39.0",
-		"@wordpress/reusable-blocks": "^4.34.0",
-		"@wordpress/router": "^0.26.0",
-		"@wordpress/style-engine": "^1.40.0",
-		"@wordpress/url": "^3.58.0",
-		"@wordpress/viewport": "^5.34.0",
-		"@wordpress/widgets": "^3.34.0",
-		"@wordpress/wordcount": "^3.57.0",
+		"@wordpress/a11y": "^3.58.0",
+		"@wordpress/api-fetch": "^6.55.0",
+		"@wordpress/blob": "^3.58.0",
+		"@wordpress/block-editor": "^12.26.0",
+		"@wordpress/block-library": "^8.35.0",
+		"@wordpress/blocks": "^12.35.0",
+		"@wordpress/commands": "^0.29.0",
+		"@wordpress/components": "^27.6.0",
+		"@wordpress/compose": "^6.35.0",
+		"@wordpress/core-commands": "^0.27.0",
+		"@wordpress/core-data": "^6.35.0",
+		"@wordpress/data": "^9.28.0",
+		"@wordpress/dataviews": "^1.2.0",
+		"@wordpress/date": "^4.58.0",
+		"@wordpress/deprecated": "^3.58.0",
+		"@wordpress/dom": "^3.58.0",
+		"@wordpress/editor": "^13.35.0",
+		"@wordpress/element": "^5.35.0",
+		"@wordpress/escape-html": "^2.58.0",
+		"@wordpress/hooks": "^3.58.0",
+		"@wordpress/html-entities": "^3.58.0",
+		"@wordpress/i18n": "^4.58.0",
+		"@wordpress/icons": "^9.49.0",
+		"@wordpress/keyboard-shortcuts": "^4.35.0",
+		"@wordpress/keycodes": "^3.58.0",
+		"@wordpress/media-utils": "^4.49.0",
+		"@wordpress/notices": "^4.26.0",
+		"@wordpress/patterns": "^1.19.0",
+		"@wordpress/plugins": "^6.26.0",
+		"@wordpress/preferences": "^3.35.0",
+		"@wordpress/primitives": "^3.56.0",
+		"@wordpress/priority-queue": "^2.58.0",
+		"@wordpress/private-apis": "^0.40.0",
+		"@wordpress/reusable-blocks": "^4.35.0",
+		"@wordpress/router": "^0.27.0",
+		"@wordpress/style-engine": "^1.41.0",
+		"@wordpress/url": "^3.59.0",
+		"@wordpress/viewport": "^5.35.0",
+		"@wordpress/widgets": "^3.35.0",
+		"@wordpress/wordcount": "^3.58.0",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
 		"client-zip": "^2.4.4",
+		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
-		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",
-		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0"
 	},
@@ -85,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
+	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
 }

package/src/components/add-new-template/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -250,7 +250,7 @@ function NewTemplateModal( { onClose } ) {
 	return (
 		<Modal
 			title={ modalTitle }
-			className={ classnames( 'edit-site-add-new-template__modal', {
+			className={ clsx( 'edit-site-add-new-template__modal', {
 				'edit-site-add-new-template__modal_template_list':
 					modalContent === modalContentMap.templatesList,
 				'edit-site-custom-template-modal':

package/src/components/app/index.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { SlotFillProvider } from '@wordpress/components';
-import { UnsavedChangesWarning } from '@wordpress/editor';
+import {
+	UnsavedChangesWarning,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -13,10 +16,10 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import Layout from '../layout';
-import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import { unlock } from '../../lock-unlock';
 
 const { RouterProvider } = unlock( routerPrivateApis );
+const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
 export default function App() {
 	const { createErrorNotice } = useDispatch( noticesStore );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,6 @@ import {
 	FOCUSABLE_ENTITIES,
 	NAVIGATION_POST_TYPE,
 } from '../../utils/constants';
-import { computeIFrameScale } from '../../utils/math';
 
 const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
@@ -41,11 +40,9 @@ function EditorCanvas( {
 		isFocusMode,
 		templateType,
 		canvasMode,
-		isZoomOutMode,
 		currentPostIsTrashed,
 	} = useSelect( ( select ) => {
-		const { getBlockCount, __unstableGetEditorMode } =
-			select( blockEditorStore );
+		const { getBlockCount } = select( blockEditorStore );
 		const { getEditedPostType, getCanvasMode } = unlock(
 			select( editSiteStore )
 		);
@@ -54,7 +51,6 @@ function EditorCanvas( {
 		return {
 			templateType: _templateType,
 			isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 			canvasMode: getCanvasMode(),
 			hasBlocks: !! getBlockCount(),
 			currentPostIsTrashed:
@@ -139,33 +135,17 @@ function EditorCanvas( {
 		[ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ]
 	);
 
-	const frameSize = isZoomOutMode ? 20 : undefined;
-
-	const scale = isZoomOutMode
-		? ( contentWidth ) =>
-				computeIFrameScale(
-					{ width: 1000, scale: 0.55 },
-					{ width: 400, scale: 0.9 },
-					contentWidth
-				)
-		: undefined;
-
 	return (
 		<EditorCanvasRoot
-			className={ classnames( 'edit-site-editor-canvas__block-list', {
+			className={ clsx( 'edit-site-editor-canvas__block-list', {
 				'is-navigation-block': isTemplateTypeNavigation,
 			} ) }
 			renderAppender={ showBlockAppender }
 			styles={ styles }
 			iframeProps={ {
-				scale,
-				frameSize,
-				className: classnames(
-					'edit-site-visual-editor__editor-canvas',
-					{
-						'is-focused': isFocused && canvasMode === 'view',
-					}
-				),
+				className: clsx( 'edit-site-visual-editor__editor-canvas', {
+					'is-focused': isFocused && canvasMode === 'view',
+				} ),
 				...props,
 				...( canvasMode === 'view' ? viewModeIframeProps : {} ),
 			} }

package/src/components/block-editor/site-editor-canvas.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -73,7 +73,7 @@ export default function SiteEditorCanvas( { onClick } ) {
 					</div>
 				) : (
 					<div
-						className={ classnames( 'edit-site-visual-editor', {
+						className={ clsx( 'edit-site-visual-editor', {
 							'is-focus-mode': isFocusMode || !! editorCanvasView,
 							'is-view-mode': isViewMode,
 						} ) }

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

@@ -21,6 +21,7 @@
 .edit-site-visual-editor {
 	position: relative;
 	height: 100%;
+	overflow: hidden;
 	display: block;
 	background-color: $gray-300;
 	// Centralize the editor horizontally (flex-direction is column).
@@ -47,7 +48,6 @@
 		}
 
 		.edit-site-visual-editor__editor-canvas {
-			border-radius: $radius-block-ui;
 			max-height: 100%;
 		}
 
@@ -58,7 +58,7 @@
 		}
 	}
 
-	.components-resizable-box__container {
+	& > .components-resizable-box__container {
 		margin: 0 auto;
 	}
 

package/src/components/dataviews-actions/index.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { edit } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export const useEditPostAction = () => {
+	const history = useHistory();
+	return useMemo(
+		() => ( {
+			id: 'edit-post',
+			label: __( 'Edit' ),
+			isPrimary: true,
+			icon: edit,
+			isEligible( { status } ) {
+				return status !== 'trash';
+			},
+			callback( items ) {
+				const post = items[ 0 ];
+				history.push( {
+					postId: post.id,
+					postType: post.type,
+					canvas: 'edit',
+				} );
+			},
+		} ),
+		[ history ]
+	);
+};

package/src/components/editor/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -22,7 +22,6 @@ import {
 	BlockBreadcrumb,
 	BlockToolbar,
 	store as blockEditorStore,
-	BlockInspector,
 } from '@wordpress/block-editor';
 import {
 	EditorKeyboardShortcutsRegister,
@@ -36,18 +35,15 @@ import { __, sprintf } from '@wordpress/i18n';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
 import { useState, useCallback } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import {
-	SidebarComplementaryAreaFills,
-	SidebarInspectorFill,
-} from '../sidebar-edit-mode';
 import CodeEditor from '../code-editor';
 import Header from '../header-edit-mode';
 import WelcomeGuide from '../welcome-guide';
-import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import useTitle from '../routes/use-title';
@@ -59,6 +55,8 @@ import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 import SiteEditorCanvas from '../block-editor/site-editor-canvas';
 import TemplatePartConverter from '../template-part-converter';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
+import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
+import GlobalStylesSidebar from '../global-styles-sidebar';
 
 const {
 	ExperimentalEditorProvider: EditorProvider,
@@ -68,8 +66,9 @@ const {
 	ComplementaryArea,
 	interfaceStore,
 	SavePublishPanels,
+	Sidebar,
 } = unlock( editorPrivateApis );
-
+const { useHistory } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
 const interfaceLabels = {
@@ -112,14 +111,16 @@ export default function Editor( { isLoading, onClick } ) {
 		showIconLabels,
 		showBlockBreadcrumbs,
 		postTypeLabel,
+		isEditingPage,
+		supportsGlobalStyles,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
-		const { getEditedPostContext, getCanvasMode } = unlock(
+		const { getEditedPostContext, getCanvasMode, isPage } = unlock(
 			select( editSiteStore )
 		);
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
-		const { getEntityRecord } = select( coreDataStore );
+		const { getEntityRecord, getCurrentTheme } = select( coreDataStore );
 		const {
 			isInserterOpened,
 			isListViewOpened,
@@ -149,6 +150,8 @@ export default function Editor( { isLoading, onClick } ) {
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			postTypeLabel: getPostTypeLabel(),
+			isEditingPage: isPage(),
+			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
 		};
 	}, [] );
 
@@ -207,6 +210,59 @@ export default function Editor( { isLoading, onClick } ) {
 		[ entitiesSavedStatesCallback ]
 	);
 
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const history = useHistory();
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			switch ( actionId ) {
+				case 'move-to-trash':
+					{
+						history.push( {
+							path: '/' + items[ 0 ].type,
+							postId: undefined,
+							postType: undefined,
+							canvas: 'view',
+						} );
+					}
+					break;
+				case 'duplicate-post':
+					{
+						const newItem = items[ 0 ];
+						const _title =
+							typeof newItem.title === 'string'
+								? newItem.title
+								: newItem.title?.rendered;
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: Title of the created post e.g: "Post 1".
+								__( '"%s" successfully created.' ),
+								_title
+							),
+							{
+								type: 'snackbar',
+								id: 'duplicate-post-action',
+								actions: [
+									{
+										label: __( 'Edit' ),
+										onClick: () => {
+											history.push( {
+												path: undefined,
+												postId: newItem.id,
+												postType: newItem.type,
+												canvas: 'edit',
+											} );
+										},
+									},
+								],
+							}
+						);
+					}
+					break;
+			}
+		},
+		[ history, createSuccessNotice ]
+	);
+
 	const isReady =
 		! isLoading &&
 		( ( postWithTemplate && !! contextPost && !! editedPost ) ||
@@ -232,12 +288,10 @@ export default function Editor( { isLoading, onClick } ) {
 					settings={ settings }
 					useSubRegistry={ false }
 				>
-					<SidebarComplementaryAreaFills />
-					{ isEditMode && <StartTemplateOptions /> }
 					<InterfaceSkeleton
 						isDistractionFree={ isDistractionFree }
 						enableRegionNavigation={ false }
-						className={ classnames(
+						className={ clsx(
 							'edit-site-editor__interface-skeleton',
 							{
 								'show-icon-labels': showIconLabels,
@@ -299,9 +353,6 @@ export default function Editor( { isLoading, onClick } ) {
 								{ showVisualEditor && (
 									<>
 										<TemplatePartConverter />
-										<SidebarInspectorFill>
-											<BlockInspector />
-										</SidebarInspectorFill>
 										{ ! isLargeViewport && (
 											<BlockToolbar hideDragHandle />
 										) }
@@ -349,6 +400,15 @@ export default function Editor( { isLoading, onClick } ) {
 							secondarySidebar: secondarySidebarLabel,
 						} }
 					/>
+					<Sidebar
+						onActionPerformed={ onActionPerformed }
+						extraPanels={
+							! isEditingPage && (
+								<PluginTemplateSettingPanel.Slot />
+							)
+						}
+					/>
+					{ supportsGlobalStyles && <GlobalStylesSidebar /> }
 				</EditorProvider>
 			) }
 		</>

package/src/components/editor/style.scss

@@ -6,10 +6,6 @@
 	&.is-loading {
 		opacity: 0;
 	}
-
-	.interface-interface-skeleton__header {
-		border: 0;
-	}
 }
 
 .edit-site-editor__toggle-save-panel {

package/src/components/global-styles/background-panel.js

@@ -20,6 +20,21 @@ const {
 	BackgroundPanel: StylesBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
+/**
+ * Checks if there is a current value in the background image block support
+ * attributes.
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean}     Whether the block has a background image value set.
+ */
+export function hasBackgroundImageValue( style ) {
+	return (
+		!! style?.background?.backgroundImage?.id ||
+		!! style?.background?.backgroundImage?.url ||
+		typeof style?.background?.backgroundImage === 'string'
+	);
+}
+
 export default function BackgroundPanel() {
 	const [ style ] = useGlobalStyle( '', undefined, 'user', {
 		shouldDecodeEncode: false,
@@ -32,8 +47,8 @@ export default function BackgroundPanel() {
 	const defaultControls = {
 		backgroundImage: true,
 		backgroundSize:
-			!! style?.background?.backgroundImage &&
-			!! inheritedStyle?.background?.backgroundImage,
+			hasBackgroundImageValue( style ) ||
+			hasBackgroundImageValue( inheritedStyle ),
 	};
 
 	return (

package/src/components/global-styles/color-indicator-wrapper.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { Flex } from '@wordpress/components';
 function ColorIndicatorWrapper( { className, ...props } ) {
 	return (
 		<Flex
-			className={ classnames(
+			className={ clsx(
 				'edit-site-global-styles__color-indicator-wrapper',
 				className
 			) }

package/src/components/global-styles/color-palette-panel.js

@@ -13,6 +13,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import ColorVariations from './variations/variations-color';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
@@ -51,7 +52,7 @@ export default function ColorPalettePanel( { name } ) {
 	return (
 		<VStack
 			className="edit-site-global-styles-color-palette-panel"
-			spacing={ 10 }
+			spacing={ 8 }
 		>
 			{ !! themeColors && !! themeColors.length && (
 				<PaletteEdit
@@ -82,12 +83,10 @@ export default function ColorPalettePanel( { name } ) {
 				onChange={ setCustomColors }
 				paletteLabel={ __( 'Custom' ) }
 				paletteLabelHeadingLevel={ 3 }
-				emptyMessage={ __(
-					'Custom colors are empty! Add some colors to create your own color palette.'
-				) }
 				slugPrefix="custom-"
 				popoverProps={ popoverProps }
 			/>
+			<ColorVariations title={ __( 'Presets' ) } />
 		</VStack>
 	);
 }

package/src/components/global-styles/gradients-palette-panel.js

@@ -71,7 +71,7 @@ export default function GradientPalettePanel( { name } ) {
 	return (
 		<VStack
 			className="edit-site-global-styles-gradient-palette-panel"
-			spacing={ 10 }
+			spacing={ 8 }
 		>
 			{ !! themeGradients && !! themeGradients.length && (
 				<PaletteEdit
@@ -102,9 +102,6 @@ export default function GradientPalettePanel( { name } ) {
 				onChange={ setCustomGradients }
 				paletteLabel={ __( 'Custom' ) }
 				paletteLabelLevel={ 3 }
-				emptyMessage={ __(
-					'Custom gradients are empty! Add some gradients to create your own palette.'
-				) }
 				slugPrefix="custom-"
 				popoverProps={ popoverProps }
 			/>

package/src/components/global-styles/hooks.js

@@ -9,18 +9,19 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useContext } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { getFontFamilies } from './utils';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 const { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(
 	blockEditorPrivateApis
 );

package/src/components/global-styles/icon-with-current-color.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { Icon } from '@wordpress/components';
 export function IconWithCurrentColor( { className, ...props } ) {
 	return (
 		<Icon
-			className={ classnames(
+			className={ clsx(
 				className,
 				'edit-site-global-styles-icon-with-current-color'
 			) }

package/src/components/global-styles/preset-colors.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { useStylesPreviewColors } from './hooks';
+
+export default function PresetColors() {
+	const { paletteColors } = useStylesPreviewColors();
+	return paletteColors.slice( 0, 5 ).map( ( { slug, color }, index ) => (
+		<div
+			key={ `${ slug }-${ index }` }
+			style={ {
+				flexGrow: 1,
+				height: '100%',
+				background: color,
+			} }
+		/>
+	) );
+}