@wordpress/block-editor 9.8.1-next.957ca95e4c.0 → 10.0.1

package/src/components/default-block-appender/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -9,42 +10,55 @@ import { shallow } from 'enzyme';
 import { DefaultBlockAppender, ZWNBSP } from '../';
 
 describe( 'DefaultBlockAppender', () => {
-	const expectOnAppendCalled = ( onAppend ) => {
-		expect( onAppend ).toHaveBeenCalledTimes( 1 );
-		expect( onAppend ).toHaveBeenCalledWith();
-	};
-
 	it( 'should match snapshot', () => {
 		const onAppend = jest.fn();
-		const wrapper = shallow(
+
+		const { container } = render(
 			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should append a default block when input focused', () => {
+	it( 'should append a default block when input focused', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onAppend = jest.fn();
-		const wrapper = shallow(
+
+		const { container } = render(
 			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
 		);
 
-		wrapper.find( 'p' ).simulate( 'click' );
+		await user.click(
+			screen.getByRole( 'button', { name: 'Add default block' } )
+		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 
-		expectOnAppendCalled( onAppend );
+		// Called once for focusing and once for clicking.
+		expect( onAppend ).toHaveBeenCalledTimes( 2 );
+		expect( onAppend ).toHaveBeenCalledWith();
 	} );
 
-	it( 'should optionally show without prompt', () => {
+	it( 'should optionally show without prompt', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onAppend = jest.fn();
-		const wrapper = shallow(
+
+		const { container } = render(
 			<DefaultBlockAppender onAppend={ onAppend } showPrompt={ false } />
 		);
-		const input = wrapper.find( 'p' );
 
-		expect( input.prop( 'children' ) ).toEqual( ZWNBSP );
+		const appender = screen.getByRole( 'button', {
+			name: 'Add default block',
+		} );
+
+		await user.click( appender );
+
+		expect( appender ).toContainHTML( ZWNBSP );
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/components/font-sizes/README.MD

@@ -31,6 +31,7 @@ const MyFontSizePicker = () => {
 
 	return (
 		<FontSizePicker
+			__nextHasNoMarginBottom
 			value={ fontSize }
 			fallbackFontSize={ fallbackFontSize }
 			onChange={ ( newFontSize ) => {
@@ -79,3 +80,11 @@ If `true`, the UI will contain a slider, instead of a numeric text input field.
 - Type: `Boolean`
 - Required: no
 - Default: `false`
+
+### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+
+-   Type: `Boolean`
+-   Required: no
+-   Default: `false`

package/src/components/iframe/index.js

@@ -14,7 +14,11 @@ import {
 	useReducer,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useMergeRefs, useRefEffect } from '@wordpress/compose';
+import {
+	useResizeObserver,
+	useMergeRefs,
+	useRefEffect,
+} from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 
 /**
@@ -184,7 +188,7 @@ async function loadScript( head, { id, src } ) {
 }
 
 function Iframe(
-	{ contentRef, children, head, tabIndex = 0, assets, ...props },
+	{ contentRef, children, head, tabIndex = 0, assets, isZoomedOut, ...props },
 	ref
 ) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
@@ -194,10 +198,18 @@ function Iframe(
 	const scripts = useParsedAssets( assets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
+	const [ contentResizeListener, { height: contentHeight } ] =
+		useResizeObserver();
 	const setRef = useRefEffect( ( node ) => {
+		let iFrameDocument;
+		// Prevent the default browser action for files dropped outside of dropzones.
+		function preventFileDropDefault( event ) {
+			event.preventDefault();
+		}
 		function setDocumentIfReady() {
 			const { contentDocument, ownerDocument } = node;
 			const { readyState, documentElement } = contentDocument;
+			iFrameDocument = contentDocument;
 
 			if ( readyState !== 'interactive' && readyState !== 'complete' ) {
 				return false;
@@ -223,14 +235,35 @@ function Iframe(
 			documentElement.removeChild( contentDocument.head );
 			documentElement.removeChild( contentDocument.body );
 
+			iFrameDocument.addEventListener(
+				'dragover',
+				preventFileDropDefault,
+				false
+			);
+			iFrameDocument.addEventListener(
+				'drop',
+				preventFileDropDefault,
+				false
+			);
 			return true;
 		}
 
 		// Document set with srcDoc is not immediately ready.
 		node.addEventListener( 'load', setDocumentIfReady );
 
-		return () => node.removeEventListener( 'load', setDocumentIfReady );
+		return () => {
+			node.removeEventListener( 'load', setDocumentIfReady );
+			iFrameDocument?.removeEventListener(
+				'dragover',
+				preventFileDropDefault
+			);
+			iFrameDocument?.removeEventListener(
+				'drop',
+				preventFileDropDefault
+			);
+		};
 	}, [] );
+
 	const headRef = useRefEffect( ( element ) => {
 		scripts
 			.reduce(
@@ -285,14 +318,40 @@ function Iframe(
 				{ iframeDocument &&
 					createPortal(
 						<>
-							<head ref={ headRef }>{ head }</head>
+							<head ref={ headRef }>
+								{ head }
+								<style>
+									{ `html { transition: background 5s; ${
+										isZoomedOut
+											? 'background: #2f2f2f; transition: background 0s;'
+											: ''
+									} }` }
+								</style>
+							</head>
 							<body
 								ref={ bodyRef }
 								className={ classnames(
+									'block-editor-iframe__body',
 									BODY_CLASS_NAME,
-									...bodyClasses
+									...bodyClasses,
+									{
+										'is-zoomed-out': isZoomedOut,
+									}
 								) }
+								style={
+									isZoomedOut
+										? {
+												// This is the remaining percentage from the scaling down
+												// of the iframe body(`scale(0.45)`). We also need to subtract
+												// the body's bottom margin.
+												marginBottom: `-${
+													contentHeight * 0.55 - 100
+												}px`,
+										  }
+										: {}
+								}
 							>
+								{ contentResizeListener }
 								{ /*
 								 * This is a wrapper for the extra styles and scripts
 								 * rendered imperatively by cloning the parent,

package/src/components/inner-blocks/README.md

@@ -125,11 +125,12 @@ Template locking of `InnerBlocks` is similar to [Custom Post Type templates lock
 Template locking allows locking the `InnerBlocks` area for the current template.
 _Options:_
 
+-   `contentOnly` — prevents all operations. Additionally, the block types that don't have content are hidden from the list view and can't gain focus within the block list. Unlike the other lock types, this is not overrideable by children.
 -   `'all'` — prevents all operations. It is not possible to insert new blocks. Move existing blocks or delete them.
 -   `'insert'` — prevents inserting or removing blocks, but allows moving existing ones.
 -   `false` — prevents locking from being applied to an `InnerBlocks` area even if a parent block contains locking. ( Boolean )
 
-If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used.
+If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used. Note that `contentOnly` can't be overriden: it's present, the `templateLock` value of any children is ignored.
 
 If the block is a top level block: the locking of the Custom Post Type is used.
 

package/src/components/inner-blocks/default-block-appender.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { last } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -28,7 +23,7 @@ export default compose( [
 		const blockClientIds = getBlockOrder( clientId );
 
 		return {
-			lastBlockClientId: last( blockClientIds ),
+			lastBlockClientId: blockClientIds[ blockClientIds.length - 1 ],
 		};
 	} ),
 ] )( DefaultBlockAppender );

package/src/components/inner-blocks/index.js

@@ -77,6 +77,13 @@ function UncontrolledInnerBlocks( props ) {
 	const context = useSelect(
 		( select ) => {
 			const block = select( blockEditorStore ).getBlock( clientId );
+
+			// This check is here to avoid the Redux zombie bug where a child subscription
+			// is called before a parent, causing potential JS errors when the child has been removed.
+			if ( ! block ) {
+				return;
+			}
+
 			const blockType = getBlockType( block.name );
 
 			if ( ! blockType || ! blockType.providesContext ) {
@@ -155,10 +162,11 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				getBlockName,
 				isBlockSelected,
 				hasSelectedInnerBlock,
-				isNavigationMode,
+				__unstableGetEditorMode,
 			} = select( blockEditorStore );
 			const blockName = getBlockName( clientId );
-			const enableClickThrough = isNavigationMode() || isSmallScreen;
+			const enableClickThrough =
+				__unstableGetEditorMode() === 'navigation' || isSmallScreen;
 			return {
 				__experimentalCaptureToolbars: select(
 					blocksStore

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -19,8 +19,8 @@ import { store as blockEditorStore } from '../../store';
  * This hook makes sure that a block's inner blocks stay in sync with the given
  * block "template". The template is a block hierarchy to which inner blocks must
  * conform. If the blocks get "out of sync" with the template and the template
- * is meant to be locked (e.g. templateLock = "all"), then we replace the inner
- * blocks with the correct value after synchronizing it with the template.
+ * is meant to be locked (e.g. templateLock = "all" or templateLock = "contentOnly"),
+ * then we replace the inner blocks with the correct value after synchronizing it with the template.
  *
  * @param {string}  clientId                       The block client ID.
  * @param {Object}  template                       The template to match.
@@ -47,38 +47,53 @@ export default function useInnerBlockTemplateSync(
 		( select ) => select( blockEditorStore ).getBlocks( clientId ),
 		[ clientId ]
 	);
+	const { getBlocks } = useSelect( blockEditorStore );
 
 	// Maintain a reference to the previous value so we can do a deep equality check.
 	const existingTemplate = useRef( null );
 	useLayoutEffect( () => {
-		// Only synchronize innerBlocks with template if innerBlocks are empty or
-		// a locking all exists directly on the block.
-		if ( innerBlocks.length === 0 || templateLock === 'all' ) {
+		// There's an implicit dependency between useInnerBlockTemplateSync and useNestedSettingsUpdate
+		// The former needs to happen after the latter and since the latter is using microtasks to batch updates (performance optimization),
+		// we need to schedule this one in a microtask as well.
+		// Exemple: If you remove queueMicrotask here, ctrl + click to insert quote block won't close the inserter.
+		window.queueMicrotask( () => {
+			// Only synchronize innerBlocks with template if innerBlocks are empty
+			// or a locking "all" or "contentOnly" exists directly on the block.
+			const currentInnerBlocks = getBlocks( clientId );
+			const shouldApplyTemplate =
+				currentInnerBlocks.length === 0 ||
+				templateLock === 'all' ||
+				templateLock === 'contentOnly';
+
 			const hasTemplateChanged = ! isEqual(
 				template,
 				existingTemplate.current
 			);
-			if ( hasTemplateChanged ) {
-				existingTemplate.current = template;
-				const nextBlocks = synchronizeBlocksWithTemplate(
-					innerBlocks,
-					template
+
+			if ( ! shouldApplyTemplate || ! hasTemplateChanged ) {
+				return;
+			}
+
+			existingTemplate.current = template;
+			const nextBlocks = synchronizeBlocksWithTemplate(
+				currentInnerBlocks,
+				template
+			);
+
+			if ( ! isEqual( nextBlocks, currentInnerBlocks ) ) {
+				replaceInnerBlocks(
+					clientId,
+					nextBlocks,
+					currentInnerBlocks.length === 0 &&
+						templateInsertUpdatesSelection &&
+						nextBlocks.length !== 0,
+					// This ensures the "initialPosition" doesn't change when applying the template
+					// If we're supposed to focus the block, we'll focus the first inner block
+					// otherwise, we won't apply any auto-focus.
+					// This ensures for instance that the focus stays in the inserter when inserting the "buttons" block.
+					getSelectedBlocksInitialCaretPosition()
 				);
-				if ( ! isEqual( nextBlocks, innerBlocks ) ) {
-					replaceInnerBlocks(
-						clientId,
-						nextBlocks,
-						innerBlocks.length === 0 &&
-							templateInsertUpdatesSelection &&
-							nextBlocks.length !== 0,
-						// This ensures the "initialPosition" doesn't change when applying the template
-						// If we're supposed to focus the block, we'll focus the first inner block
-						// otherwise, we won't apply any auto-focus.
-						// This ensures for instance that the focus stays in the inserter when inserting the "buttons" block.
-						getSelectedBlocksInitialCaretPosition()
-					);
-				}
 			}
-		}
+		} );
 	}, [ innerBlocks, template, templateLock, clientId ] );
 }

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useLayoutEffect, useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
@@ -13,6 +13,8 @@ import { getLayoutType } from '../../layouts';
 
 /** @typedef {import('../../selectors').WPDirectInsertBlock } WPDirectInsertBlock */
 
+const pendingSettingsUpdates = new WeakMap();
+
 /**
  * This hook is a side effect which updates the block-editor store when changes
  * happen to inner block settings. The given props are transformed into a
@@ -46,6 +48,7 @@ export default function useNestedSettingsUpdate(
 	layout
 ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
+	const registry = useRegistry();
 
 	const { blockListSettings, parentLock } = useSelect(
 		( select ) => {
@@ -69,7 +72,9 @@ export default function useNestedSettingsUpdate(
 		const newSettings = {
 			allowedBlocks: _allowedBlocks,
 			templateLock:
-				templateLock === undefined ? parentLock : templateLock,
+				templateLock === undefined || parentLock === 'contentOnly'
+					? parentLock
+					: templateLock,
 		};
 
 		// These values are not defined for RN, so only include them if they
@@ -96,7 +101,30 @@ export default function useNestedSettingsUpdate(
 		}
 
 		if ( ! isShallowEqual( blockListSettings, newSettings ) ) {
-			updateBlockListSettings( clientId, newSettings );
+			// Batch updates to block list settings to avoid triggering cascading renders
+			// for each container block included in a tree and optimize initial render.
+			// To avoid triggering updateBlockListSettings for each container block
+			// causing X re-renderings for X container blocks,
+			// we batch all the updatedBlockListSettings in a single "data" batch
+			// which results in a single re-render.
+			if ( ! pendingSettingsUpdates.get( registry ) ) {
+				pendingSettingsUpdates.set( registry, [] );
+			}
+			pendingSettingsUpdates
+				.get( registry )
+				.push( [ clientId, newSettings ] );
+			window.queueMicrotask( () => {
+				if ( pendingSettingsUpdates.get( registry )?.length ) {
+					registry.batch( () => {
+						pendingSettingsUpdates
+							.get( registry )
+							.forEach( ( args ) => {
+								updateBlockListSettings( ...args );
+							} );
+						pendingSettingsUpdates.set( registry, [] );
+					} );
+				}
+			} );
 		}
 	}, [
 		clientId,
@@ -110,5 +138,6 @@ export default function useNestedSettingsUpdate(
 		orientation,
 		updateBlockListSettings,
 		layout,
+		registry,
 	] );
 }

package/src/components/inserter/index.js

@@ -168,6 +168,7 @@ class Inserter extends Component {
 				clientId={ clientId }
 				isAppender={ isAppender }
 				showInserterHelpPanel={ showInserterHelpPanel }
+				prioritizePatterns={ prioritizePatterns }
 			/>
 		);
 	}
@@ -212,8 +213,6 @@ export default compose( [
 			hasInserterItems,
 			__experimentalGetAllowedBlocks,
 			__experimentalGetDirectInsertBlock,
-			getBlockIndex,
-			getBlockCount,
 			getSettings,
 		} = select( blockEditorStore );
 
@@ -227,8 +226,6 @@ export default compose( [
 		const directInsertBlock =
 			__experimentalGetDirectInsertBlock( rootClientId );
 
-		const index = getBlockIndex( clientId );
-		const blockCount = getBlockCount();
 		const settings = getSettings();
 
 		const hasSingleBlockType =
@@ -249,10 +246,7 @@ export default compose( [
 			directInsertBlock,
 			rootClientId,
 			prioritizePatterns:
-				settings.__experimentalPreferPatternsOnRoot &&
-				! rootClientId &&
-				index > 0 &&
-				( index < blockCount || blockCount === 0 ),
+				settings.__experimentalPreferPatternsOnRoot && ! rootClientId,
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps, { select } ) => {

package/src/components/inserter/library.js

@@ -26,13 +26,18 @@ function InserterLibrary(
 	},
 	ref
 ) {
-	const destinationRootClientId = useSelect(
+	const { destinationRootClientId, prioritizePatterns } = useSelect(
 		( select ) => {
-			const { getBlockRootClientId } = select( blockEditorStore );
+			const { getBlockRootClientId, getSettings } =
+				select( blockEditorStore );
 
-			return (
-				rootClientId || getBlockRootClientId( clientId ) || undefined
-			);
+			const _rootClientId =
+				rootClientId || getBlockRootClientId( clientId ) || undefined;
+			return {
+				destinationRootClientId: _rootClientId,
+				prioritizePatterns:
+					getSettings().__experimentalPreferPatternsOnRoot,
+			};
 		},
 		[ clientId, rootClientId ]
 	);
@@ -48,6 +53,7 @@ function InserterLibrary(
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
 			shouldFocusBlock={ shouldFocusBlock }
+			prioritizePatterns={ prioritizePatterns }
 			ref={ ref }
 		/>
 	);

package/src/components/inserter/menu.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -37,6 +42,7 @@ function InserterMenu(
 		showMostUsedBlocks,
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
+		prioritizePatterns,
 	},
 	ref
 ) {
@@ -180,23 +186,28 @@ function InserterMenu(
 		},
 	} ) );
 
+	const showAsTabs = ! filterValue && ( showPatterns || hasReusableBlocks );
+
 	return (
 		<div className="block-editor-inserter__menu">
-			<div className="block-editor-inserter__main-area">
-				{ /* The following div is necessary to fix the sticky position of the search form. */ }
-				<div className="block-editor-inserter__content">
-					<SearchControl
-						className="block-editor-inserter__search"
-						onChange={ ( value ) => {
-							if ( hoveredItem ) setHoveredItem( null );
-							setFilterValue( value );
-						} }
-						value={ filterValue }
-						label={ __( 'Search for blocks and patterns' ) }
-						placeholder={ __( 'Search' ) }
-						ref={ searchRef }
-					/>
-					{ !! filterValue && (
+			<div
+				className={ classnames( 'block-editor-inserter__main-area', {
+					'show-as-tabs': showAsTabs,
+				} ) }
+			>
+				<SearchControl
+					className="block-editor-inserter__search"
+					onChange={ ( value ) => {
+						if ( hoveredItem ) setHoveredItem( null );
+						setFilterValue( value );
+					} }
+					value={ filterValue }
+					label={ __( 'Search for blocks and patterns' ) }
+					placeholder={ __( 'Search' ) }
+					ref={ searchRef }
+				/>
+				{ !! filterValue && (
+					<div className="block-editor-inserter__no-tab-container">
 						<InserterSearchResults
 							filterValue={ filterValue }
 							onSelect={ onSelect }
@@ -210,20 +221,22 @@ function InserterMenu(
 							showBlockDirectory
 							shouldFocusBlock={ shouldFocusBlock }
 						/>
-					) }
-					{ ! filterValue && ( showPatterns || hasReusableBlocks ) && (
-						<InserterTabs
-							showPatterns={ showPatterns }
-							showReusableBlocks={ hasReusableBlocks }
-						>
-							{ getCurrentTab }
-						</InserterTabs>
-					) }
-					{ ! filterValue &&
-						! showPatterns &&
-						! hasReusableBlocks &&
-						blocksTab }
-				</div>
+					</div>
+				) }
+				{ showAsTabs && (
+					<InserterTabs
+						showPatterns={ showPatterns }
+						showReusableBlocks={ hasReusableBlocks }
+						prioritizePatterns={ prioritizePatterns }
+					>
+						{ getCurrentTab }
+					</InserterTabs>
+				) }
+				{ ! filterValue && ! showAsTabs && (
+					<div className="block-editor-inserter__no-tab-container">
+						{ blocksTab }
+					</div>
+				) }
 			</div>
 			{ showInserterHelpPanel && hoveredItem && (
 				<InserterPreviewPanel item={ hoveredItem } />

package/src/components/inserter/preview-panel.js

@@ -27,7 +27,7 @@ function InserterPreviewPanel( { item } ) {
 							viewportWidth={ example?.viewportWidth ?? 500 }
 							blocks={
 								example
-									? getBlockFromExample( item.name, {
+									? getBlockFromExample( name, {
 											attributes: {
 												...example.attributes,
 												...initialAttributes,

package/src/components/inserter/stories/fixtures.js

@@ -0,0 +1,44 @@
+export const patterns = [
+	{
+		categories: [ 'featured', 'text' ],
+		content:
+			'<!-- wp:heading {"align":"wide","style":{"typography":{"fontSize":"48px","lineHeight":"1.1"}}} -->\n<h2 class="alignwide" id="we-re-a-studio-in-berlin-with-an-international-practice-in-architecture-urban-planning-and-interior-design-we-believe-in-sharing-knowledge-and-promoting-dialogue-to-increase-the-creative-potential-of-collaboration" style="font-size:48px;line-height:1.1">We\'re a studio in Berlin with an international practice in architecture, urban planning and interior design. We believe in sharing knowledge and promoting dialogue to increase the creative potential of collaboration.</h2>\n<!-- /wp:heading -->',
+		description: 'Heading text',
+		keywords: [ 'large text', 'title' ],
+		name: 'heading',
+		title: 'Heading',
+	},
+];
+
+export const patternCategories = [
+	{
+		name: 'featured',
+		label: 'Featured',
+	},
+	{
+		name: 'text',
+		label: 'Text',
+	},
+];
+
+export const reusableBlocks = [
+	{
+		content: {
+			raw: '\x3C!-- wp:paragraph -->\n<p>This is reusable</p>\n\x3C!-- /wp:paragraph -->',
+			protected: false,
+			block_version: 1,
+		},
+		date: '2022-09-12T13:28:06',
+		date_gmt: '2022-09-12T13:28:06',
+		id: 70,
+		link: 'http://localhost:8888/?p=70',
+		modified: '2022-09-12T13:28:06',
+		modified_gmt: '2022-09-12T13:28:06',
+		password: '',
+		slug: 'simple-paragraph',
+		status: 'publish',
+		template: '',
+		title: { raw: 'Simple paragraph' },
+		type: 'wp_block',
+	},
+];