Light block: introduce useBlockWrapperProps (#23034)

* useBlockProps

* Restore delete behaviour

* Rename

* Address feedback

* Avoid inline hook calls

* Convert recently added blocks

* Rebase errors

Author: ellatrix

packages/block-editor/src/components/block-list/block-wrapper.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;

packages/block-editor/src/components/block-list/block-wrapper.native.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 ) );
 

packages/block-editor/src/components/block-list/block.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';

packages/block-editor/src/components/index.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

packages/block-editor/src/components/index.native.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
 								}

packages/block-editor/src/components/rich-text/index.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>
 		</>
 	);
 }

packages/block-library/src/audio/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 }

packages/block-library/src/button/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>
 	);
 }
 

packages/block-library/src/buttons/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>
 	);
 }