Light block: introduce useBlockWrapperProps (#23034)

* useBlockProps * Restore delete behaviour * Rename * Address feedback * Avoid inline hook calls * Convert recently added blocks * Rebase errors
WordPress · Sep 21, 2020 · aa0abb9 · aa0abb9
1 parent 7491f3c
commit aa0abb9
Show file tree

Hide file tree

Showing 34 changed files with 472 additions and 338 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js
diff --git a/packages/block-editor/src/components/block-list/block-wrapper.native.js b/packages/block-editor/src/components/block-list/block-wrapper.native.js
@@ -3,6 +3,10 @@
  */
 import ELEMENTS from './block-wrapper-elements';
 
+export function useBlockWrapperProps( props = {} ) {
+	return props;
+}
+
 const ExtendedBlockComponent = ELEMENTS.reduce( ( acc, element ) => {
 	acc[ element ] = element;
 	return acc;

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -210,7 +211,7 @@ function BlockListBlock( {
 		name,
 		mode,
 		blockTitle: blockType.title,
-		wrapperProps,
+		wrapperProps: omit( wrapperProps, [ 'data-align' ] ),
 	};
 	const memoizedValue = useMemo( () => value, Object.values( value ) );
 

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -68,7 +68,10 @@ export { default as __experimentalPreviewOptions } from './preview-options';
 export { default as __experimentalUseResizeCanvas } from './use-resize-canvas';
 export { default as BlockInspector } from './block-inspector';
 export { default as BlockList } from './block-list';
-export { Block as __experimentalBlock } from './block-list/block-wrapper';
+export {
+	Block as __experimentalBlock,
+	useBlockWrapperProps as __experimentalUseBlockWrapperProps,
+} from './block-list/block-wrapper';
 export { default as BlockMover } from './block-mover';
 export { default as BlockPreview } from './block-preview';
 export { default as BlockSelectionClearer } from './block-selection-clearer';

diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
@@ -55,7 +55,10 @@ export { default as BlockStyles } from './block-styles';
 export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
-export { Block as __experimentalBlock } from './block-list/block-wrapper';
+export {
+	Block as __experimentalBlock,
+	useBlockWrapperProps as __experimentalUseBlockWrapperProps,
+} from './block-list/block-wrapper';
 export { default as FloatingToolbar } from './floating-toolbar';
 
 // State Related Components

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -128,6 +128,22 @@ function RichTextWrapper(
 		__unstableEmbedURLOnPaste,
 		__unstableDisableFormats: disableFormats,
 		disableLineBreaks,
+		unstableOnFocus,
+		__unstableAllowPrefixTransformations,
+		__unstableMultilineRootTag,
+		// Native props.
+		__unstableMobileNoFocusOnMount,
+		deleteEnter,
+		placeholderTextColor,
+		textAlign,
+		selectionColor,
+		tagsToEliminate,
+		rootTagsToEliminate,
+		disableEditingMenu,
+		fontSize,
+		fontFamily,
+		fontWeight,
+		fontStyle,
 		...props
 	},
 	forwardedRef
@@ -528,7 +544,6 @@ function RichTextWrapper(
 
 	const content = (
 		<RichText
-			{ ...props }
 			clientId={ clientId }
 			identifier={ identifier }
 			ref={ ref }
@@ -563,6 +578,11 @@ function RichTextWrapper(
 			disabled={ disabled }
 			start={ startAttr }
 			reversed={ reversed }
+			unstableOnFocus={ unstableOnFocus }
+			__unstableAllowPrefixTransformations={
+				__unstableAllowPrefixTransformations
+			}
+			__unstableMultilineRootTag={ __unstableMultilineRootTag }
 			// Native props.
 			onCaretVerticalPositionChange={ onCaretVerticalPositionChange }
 			blockIsSelected={
@@ -571,6 +591,18 @@ function RichTextWrapper(
 					: blockIsSelected
 			}
 			shouldBlurOnUnmount={ shouldBlurOnUnmount }
+			__unstableMobileNoFocusOnMount={ __unstableMobileNoFocusOnMount }
+			deleteEnter={ deleteEnter }
+			placeholderTextColor={ placeholderTextColor }
+			textAlign={ textAlign }
+			selectionColor={ selectionColor }
+			tagsToEliminate={ tagsToEliminate }
+			rootTagsToEliminate={ rootTagsToEliminate }
+			disableEditingMenu={ disableEditingMenu }
+			fontSize={ fontSize }
+			fontFamily={ fontFamily }
+			fontWeight={ fontWeight }
+			fontStyle={ fontStyle }
 		>
 			{ ( {
 				isSelected: nestedIsSelected,
@@ -599,6 +631,7 @@ function RichTextWrapper(
 						{ ( { listBoxId, activeId, onKeyDown } ) => (
 							<TagName
 								{ ...editableProps }
+								{ ...props }
 								aria-autocomplete={
 									listBoxId ? 'list' : undefined
 								}

diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -16,7 +16,7 @@ import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	RichText,
-	__experimentalBlock as Block,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -41,7 +41,7 @@ function AudioEdit( {
 	insertBlocksAfter,
 } ) {
 	const { id, autoplay, caption, loop, preload, src } = attributes;
-
+	const blockWrapperProps = useBlockWrapperProps();
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( 'core/block-editor' );
 		return getSettings().mediaUpload;
@@ -116,7 +116,7 @@ function AudioEdit( {
 	}
 	if ( ! src ) {
 		return (
-			<Block.div>
+			<div { ...blockWrapperProps }>
 				<MediaPlaceholder
 					icon={ <BlockIcon icon={ icon } /> }
 					onSelect={ onSelectAudio }
@@ -127,7 +127,7 @@ function AudioEdit( {
 					notices={ noticeUI }
 					onError={ onUploadError }
 				/>
-			</Block.div>
+			</div>
 		);
 	}
 
@@ -175,7 +175,7 @@ function AudioEdit( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<Block.figure>
+			<figure { ...blockWrapperProps }>
 				{ /*
 					Disable the audio tag so the user clicking on it won't play the
 					file or change the position slider when the controls are enabled.
@@ -197,7 +197,7 @@ function AudioEdit( {
 						}
 					/>
 				) }
-			</Block.figure>
+			</figure>
 		</>
 	);
 }

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -22,7 +22,7 @@ import {
 	BlockControls,
 	InspectorControls,
 	RichText,
-	__experimentalBlock as Block,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
 	__experimentalLinkControl as LinkControl,
 	__experimentalUseEditorFeature as useEditorFeature,
 } from '@wordpress/block-editor';
@@ -197,11 +197,12 @@ function ButtonEdit( props ) {
 	);
 
 	const colorProps = getColorAndStyleProps( attributes, colors, true );
+	const blockWrapperProps = useBlockWrapperProps();
 
 	return (
 		<>
 			<ColorEdit { ...props } />
-			<Block.div>
+			<div { ...blockWrapperProps }>
 				<RichText
 					placeholder={ placeholder || __( 'Add text…' ) }
 					value={ text }
@@ -231,7 +232,7 @@ function ButtonEdit( props ) {
 					onMerge={ mergeBlocks }
 					identifier="text"
 				/>
-			</Block.div>
+			</div>
 			<URLPicker
 				url={ url }
 				setAttributes={ setAttributes }

diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
@@ -4,7 +4,7 @@
 import {
 	__experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider,
 	InnerBlocks,
-	__experimentalBlock as Block,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
 } from '@wordpress/block-editor';
 
 /**
@@ -21,16 +21,17 @@ const alignmentHooksSetting = {
 };
 
 function ButtonsEdit() {
+	const blockWrapperProps = useBlockWrapperProps();
 	return (
-		<Block.div>
+		<div { ...blockWrapperProps }>
 			<AlignmentHookSettingsProvider value={ alignmentHooksSetting }>
 				<InnerBlocks
 					allowedBlocks={ ALLOWED_BLOCKS }
 					template={ BUTTONS_TEMPLATE }
 					orientation="horizontal"
 				/>
 			</AlignmentHookSettingsProvider>
-		</Block.div>
+		</div>
 	);
 }
 

diff --git a/packages/block-library/src/code/edit.js b/packages/block-library/src/code/edit.js
@@ -8,12 +8,13 @@ import { __ } from '@wordpress/i18n';
  */
 import {
 	PlainText,
-	__experimentalBlock as Block,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
 } from '@wordpress/block-editor';
 
 export default function CodeEdit( { attributes, setAttributes } ) {
+	const blockWrapperProps = useBlockWrapperProps();
 	return (
-		<Block.pre>
+		<pre { ...blockWrapperProps }>
 			<PlainText
 				__experimentalVersion={ 2 }
 				tagName="code"
@@ -22,6 +23,6 @@ export default function CodeEdit( { attributes, setAttributes } ) {
 				placeholder={ __( 'Write code…' ) }
 				aria-label={ __( 'Code' ) }
 			/>
-		</Block.pre>
+		</pre>
 	);
 }
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -31,7 +31,7 @@ import {
 	MediaReplaceFlow,
 	withColors,
 	ColorPalette,
-	__experimentalBlock as Block,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
 	__experimentalUseGradient,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
 	__experimentalUnitControl as UnitControl,
@@ -426,14 +426,22 @@ function CoverEdit( {
 		</>
 	);
 
+	const blockWrapperProps = useBlockWrapperProps();
+
 	if ( ! hasBackground ) {
 		const placeholderIcon = <BlockIcon icon={ icon } />;
 		const label = __( 'Cover' );
 
 		return (
 			<>
 				{ controls }
-				<Block.div className="is-placeholder">
+				<div
+					{ ...blockWrapperProps }
+					className={ classnames(
+						'is-placeholder',
+						blockWrapperProps.className
+					) }
+				>
 					<MediaPlaceholder
 						icon={ placeholderIcon }
 						labels={ {
@@ -460,7 +468,7 @@ function CoverEdit( {
 							/>
 						</div>
 					</MediaPlaceholder>
-				</Block.div>
+				</div>
 			</>
 		);
 	}
@@ -484,7 +492,12 @@ function CoverEdit( {
 	return (
 		<>
 			{ controls }
-			<Block.div className={ classes } data-url={ url } style={ style }>
+			<div
+				{ ...blockWrapperProps }
+				className={ classnames( classes, blockWrapperProps.className ) }
+				style={ { ...style, ...blockWrapperProps.style } }
+				data-url={ url }
+			>
 				<BoxControlVisualizer
 					values={ styleAttribute?.spacing?.padding }
 					showValues={ styleAttribute?.visualizers?.padding }
@@ -543,7 +556,7 @@ function CoverEdit( {
 					} }
 					template={ INNER_BLOCKS_TEMPLATE }
 				/>
-			</Block.div>
+			</div>
 		</>
 	);
 }

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -15,7 +15,7 @@ import {
 	BlockControls,
 	BlockIcon,
 	MediaPlaceholder,
-	__experimentalBlock as Block,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
 } from '@wordpress/block-editor';
 import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -272,10 +272,15 @@ export function ImageEdit( {
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 	} );
 
+	const blockWrapperProps = useBlockWrapperProps( {
+		ref,
+		className: classes,
+	} );
+
 	return (
 		<>
 			{ controls }
-			<Block.figure ref={ ref } className={ classes }>
+			<figure { ...blockWrapperProps }>
 				{ url && (
 					<Image
 						attributes={ attributes }
@@ -290,7 +295,7 @@ export function ImageEdit( {
 					/>
 				) }
 				{ mediaPlaceholder }
-			</Block.figure>
+			</figure>
 		</>
 	);
 }

diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
@@ -7,7 +7,7 @@ import {
 	RichText,
 	BlockControls,
 	RichTextShortcut,
-	__experimentalBlock as Block,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
 } from '@wordpress/block-editor';
 import { ToolbarGroup } from '@wordpress/components';
 import {
@@ -154,13 +154,15 @@ export default function ListEdit( {
 		</>
 	);
 
+	const blockWrapperProps = useBlockWrapperProps();
+
 	return (
 		<>
 			<RichText
 				identifier="values"
 				multiline="li"
 				__unstableMultilineRootTag={ tagName }
-				tagName={ Block[ tagName ] }
+				tagName={ tagName }
 				onChange={ ( nextValues ) =>
 					setAttributes( { values: nextValues } )
 				}
@@ -178,6 +180,7 @@ export default function ListEdit( {
 				start={ start }
 				reversed={ reversed }
 				type={ type }
+				{ ...blockWrapperProps }
 			>
 				{ controls }
 			</RichText>