Nest props that are passed to block component

WordPress · Mar 2, 2020 · 5b0cdc0 · 5b0cdc0
1 parent bf12bf3
commit 5b0cdc0
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 27 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -30,8 +30,8 @@ function BlockList(
 		isDraggable,
 		renderAppender,
 		__experimentalUIParts = {},
-		tagName = 'div',
-		...props
+		__experimentalTagName = 'div',
+		__experimentalPassedProps = {},
 	},
 	ref
 ) {
@@ -67,7 +67,7 @@ function BlockList(
 		enableAnimation,
 	} = useSelect( selector, [ rootClientId ] );
 
-	const Container = rootClientId ? tagName : RootContainer;
+	const Container = rootClientId ? __experimentalTagName : RootContainer;
 	const targetClientId = useBlockDropZone( {
 		element: ref,
 		rootClientId,
@@ -84,7 +84,7 @@ function BlockList(
 				className
 			) }
 			{ ...__experimentalContainerProps }
-			{ ...props }
+			{ ...__experimentalPassedProps }
 		>
 			{ blockClientIds.map( ( clientId, index ) => {
 				const isBlockInSelection = hasMultiSelection

diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { pick, isEqual, omit } from 'lodash';
+import { pick, isEqual } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -150,7 +150,6 @@ class InnerBlocks extends Component {
 			hasOverlay,
 			__experimentalCaptureToolbars: captureToolbars,
 			forwardedRef,
-			className,
 			...props
 		} = this.props;
 		const { templateInProcess } = this.state;
@@ -159,34 +158,21 @@ class InnerBlocks extends Component {
 			return null;
 		}
 
-		const classes = classnames( className, {
+		const classes = classnames( {
 			'has-overlay': enableClickThrough && hasOverlay,
 			'is-capturing-toolbar': captureToolbars,
 		} );
 
 		const blockList = (
 			<BlockList
+				{ ...props }
 				ref={ forwardedRef }
 				rootClientId={ clientId }
 				className={ classes }
-				{ ...omit( props, [
-					'templateLock',
-					'isSmallScreen',
-					'block',
-					'blockListSettings',
-					'parentLock',
-					'isLastBlockChangePersistent',
-					'replaceInnerBlocks',
-					'__unstableMarkNextChangeAsNotPersistent',
-					'updateNestedSettings',
-					'__experimentalMoverDirection',
-					'allowedBlocks',
-					'template',
-				] ) }
 			/>
 		);
 
-		if ( props.tagName ) {
+		if ( props.__experimentalTagName ) {
 			return blockList;
 		}
 

diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
@@ -67,9 +67,11 @@ function ColumnEdit( {
 						? false
 						: () => <InnerBlocks.ButtonBlockAppender />
 				}
-				tagName={ Block.div }
-				className={ classes }
-				style={ hasWidth ? { flexBasis: width + '%' } : undefined }
+				__experimentalTagName={ Block.div }
+				__experimentalPassedProps={ {
+					className: classes,
+					style: hasWidth ? { flexBasis: width + '%' } : undefined,
+				} }
 			/>
 		</>
 	);

diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
@@ -107,9 +107,11 @@ function ColumnsEditContainer( {
 					<InnerBlocks
 						allowedBlocks={ ALLOWED_BLOCKS }
 						__experimentalMoverDirection="horizontal"
-						tagName={ Block.div }
-						className={ classes }
 						ref={ ref }
+						__experimentalTagName={ Block.div }
+						__experimentalPassedProps={ {
+							className: classes,
+						} }
 					/>
 				</TextColor>
 			</BackgroundColor>