Rename

packages/block-editor/README.md

@@ -558,7 +558,7 @@ _Related_
 
 Undocumented declaration.
 
-<a name="useBlockWrapperProps" href="#useBlockWrapperProps">#</a> **useBlockWrapperProps**
+<a name="useBlockProps" href="#useBlockProps">#</a> **useBlockProps**
 
 This hook is used to lighly mark an element as a block element. Call this
 hook and pass the returned props to the element to mark as a block. If you

packages/block-editor/src/components/block-list/block-wrapper.js

@@ -44,7 +44,7 @@ import ELEMENTS from './block-wrapper-elements';
  *
  * @return {Object} Props to pass to the element to mark as a block.
  */
-export function useBlockWrapperProps( props = {}, { __unstableIsHtml } = {} ) {
+export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	const fallbackRef = useRef();
 	const ref = props.ref || fallbackRef;
 	const onSelectionStart = useContext( Context );
@@ -289,10 +289,10 @@ export function useBlockWrapperProps( props = {}, { __unstableIsHtml } = {} ) {
 const BlockComponent = forwardRef(
 	( { children, tagName: TagName = 'div', ...props }, ref ) => {
 		deprecated( 'wp.blockEditor.__experimentalBlock', {
-			alternative: 'wp.blockEditor.useBlockWrapperProps',
+			alternative: 'wp.blockEditor.useBlockProps',
 		} );
-		const blockWrapperProps = useBlockWrapperProps( { ...props, ref } );
-		return <TagName { ...blockWrapperProps }>{ children }</TagName>;
+		const blockProps = useBlockProps( { ...props, ref } );
+		return <TagName { ...blockProps }>{ children }</TagName>;
 	}
 );
 

packages/block-editor/src/components/block-list/block-wrapper.native.js

@@ -3,7 +3,7 @@
  */
 import ELEMENTS from './block-wrapper-elements';
 
-export function useBlockWrapperProps( props = {} ) {
+export function useBlockProps( props = {} ) {
 	return props;
 }
 

packages/block-editor/src/components/block-list/block.js

@@ -40,7 +40,7 @@ import BlockInvalidWarning from './block-invalid-warning';
 import BlockCrashWarning from './block-crash-warning';
 import BlockCrashBoundary from './block-crash-boundary';
 import BlockHtml from './block-html';
-import { useBlockWrapperProps } from './block-wrapper';
+import { useBlockProps } from './block-wrapper';
 
 export const BlockListBlockContext = createContext();
 
@@ -70,7 +70,7 @@ function mergeWrapperProps( propsA, propsB ) {
 
 function Block( { children, isHtml, ...props } ) {
 	return (
-		<div { ...useBlockWrapperProps( props, { __unstableIsHtml: isHtml } ) }>
+		<div { ...useBlockProps( props, { __unstableIsHtml: isHtml } ) }>
 			{ children }
 		</div>
 	);

packages/block-editor/src/components/index.js

@@ -70,7 +70,7 @@ export { default as BlockInspector } from './block-inspector';
 export { default as BlockList } from './block-list';
 export {
 	Block as __experimentalBlock,
-	useBlockWrapperProps,
+	useBlockProps,
 } from './block-list/block-wrapper';
 export { default as BlockMover } from './block-mover';
 export { default as BlockPreview } from './block-preview';

packages/block-editor/src/components/index.native.js

@@ -59,7 +59,7 @@ export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export {
 	Block as __experimentalBlock,
-	useBlockWrapperProps,
+	useBlockProps,
 } from './block-list/block-wrapper';
 export { default as FloatingToolbar } from './floating-toolbar';
 

packages/block-library/src/audio/edit.js

@@ -16,7 +16,7 @@ import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	RichText,
-	useBlockWrapperProps,
+	useBlockProps,
 } 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 blockProps = useBlockProps();
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( 'core/block-editor' );
 		return getSettings().mediaUpload;
@@ -116,7 +116,7 @@ function AudioEdit( {
 	}
 	if ( ! src ) {
 		return (
-			<div { ...blockWrapperProps }>
+			<div { ...blockProps }>
 				<MediaPlaceholder
 					icon={ <BlockIcon icon={ icon } /> }
 					onSelect={ onSelectAudio }
@@ -175,7 +175,7 @@ function AudioEdit( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<figure { ...blockWrapperProps }>
+			<figure { ...blockProps }>
 				{ /*
 					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.

packages/block-library/src/button/edit.js

@@ -22,7 +22,7 @@ import {
 	BlockControls,
 	InspectorControls,
 	RichText,
-	useBlockWrapperProps,
+	useBlockProps,
 	__experimentalLinkControl as LinkControl,
 	__experimentalUseEditorFeature as useEditorFeature,
 } from '@wordpress/block-editor';
@@ -197,12 +197,12 @@ function ButtonEdit( props ) {
 	);
 
 	const colorProps = getColorAndStyleProps( attributes, colors, true );
-	const blockWrapperProps = useBlockWrapperProps();
+	const blockProps = useBlockProps();
 
 	return (
 		<>
 			<ColorEdit { ...props } />
-			<div { ...blockWrapperProps }>
+			<div { ...blockProps }>
 				<RichText
 					placeholder={ placeholder || __( 'Add text…' ) }
 					value={ text }

packages/block-library/src/buttons/edit.js

@@ -4,7 +4,7 @@
 import {
 	__experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider,
 	InnerBlocks,
-	useBlockWrapperProps,
+	useBlockProps,
 } from '@wordpress/block-editor';
 
 /**
@@ -21,12 +21,12 @@ const alignmentHooksSetting = {
 };
 
 function ButtonsEdit() {
-	const blockWrapperProps = useBlockWrapperProps();
+	const blockProps = useBlockProps();
 	return (
 		<AlignmentHookSettingsProvider value={ alignmentHooksSetting }>
 			<InnerBlocks
 				allowedBlocks={ ALLOWED_BLOCKS }
-				__experimentalPassedProps={ blockWrapperProps }
+				__experimentalPassedProps={ blockProps }
 				__experimentalTagName="div"
 				template={ BUTTONS_TEMPLATE }
 				orientation="horizontal"

packages/block-library/src/code/edit.js

@@ -2,12 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { RichText, useBlockWrapperProps } from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function CodeEdit( { attributes, setAttributes } ) {
-	const blockWrapperProps = useBlockWrapperProps();
+	const blockProps = useBlockProps();
 	return (
-		<pre { ...blockWrapperProps }>
+		<pre { ...blockProps }>
 			<RichText
 				tagName="code"
 				value={ attributes.content }

packages/block-library/src/column/edit.js

@@ -11,7 +11,7 @@ import {
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
 	InspectorControls,
-	useBlockWrapperProps,
+	useBlockProps,
 } from '@wordpress/block-editor';
 import { PanelBody, RangeControl } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -52,7 +52,7 @@ function ColumnEdit( {
 	};
 
 	const hasWidth = Number.isFinite( width );
-	const blockWrapperProps = useBlockWrapperProps( {
+	const blockProps = useBlockProps( {
 		className: classes,
 		style: hasWidth ? { flexBasis: width + '%' } : undefined,
 	} );
@@ -90,7 +90,7 @@ function ColumnEdit( {
 					hasChildBlocks ? undefined : InnerBlocks.ButtonBlockAppender
 				}
 				__experimentalTagName="div"
-				__experimentalPassedProps={ blockWrapperProps }
+				__experimentalPassedProps={ blockProps }
 			/>
 		</>
 	);

packages/block-library/src/columns/edit.js

@@ -16,7 +16,7 @@ import {
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
 	__experimentalBlockVariationPicker,
-	useBlockWrapperProps,
+	useBlockProps,
 } from '@wordpress/block-editor';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
@@ -63,7 +63,7 @@ function ColumnsEditContainer( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
-	const blockWrapperProps = useBlockWrapperProps( {
+	const blockProps = useBlockProps( {
 		className: classes,
 	} );
 
@@ -97,7 +97,7 @@ function ColumnsEditContainer( {
 				allowedBlocks={ ALLOWED_BLOCKS }
 				orientation="horizontal"
 				__experimentalTagName="div"
-				__experimentalPassedProps={ blockWrapperProps }
+				__experimentalPassedProps={ blockProps }
 				renderAppender={ false }
 			/>
 		</>
@@ -228,10 +228,10 @@ function Placeholder( { clientId, name, setAttributes } ) {
 		[ name ]
 	);
 	const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
-	const blockWrapperProps = useBlockWrapperProps();
+	const blockProps = useBlockProps();
 
 	return (
-		<div { ...blockWrapperProps }>
+		<div { ...blockProps }>
 			<__experimentalBlockVariationPicker
 				icon={ get( blockType, [ 'icon', 'src' ] ) }
 				label={ get( blockType, [ 'title' ] ) }

packages/block-library/src/cover/edit.js

@@ -31,7 +31,7 @@ import {
 	MediaReplaceFlow,
 	withColors,
 	ColorPalette,
-	useBlockWrapperProps,
+	useBlockProps,
 	__experimentalUseGradient,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
 	__experimentalUnitControl as UnitControl,
@@ -426,7 +426,7 @@ function CoverEdit( {
 		</>
 	);
 
-	const blockWrapperProps = useBlockWrapperProps();
+	const blockProps = useBlockProps();
 
 	if ( ! hasBackground ) {
 		const placeholderIcon = <BlockIcon icon={ icon } />;
@@ -436,10 +436,10 @@ function CoverEdit( {
 			<>
 				{ controls }
 				<div
-					{ ...blockWrapperProps }
+					{ ...blockProps }
 					className={ classnames(
 						'is-placeholder',
-						blockWrapperProps.className
+						blockProps.className
 					) }
 				>
 					<MediaPlaceholder
@@ -493,9 +493,9 @@ function CoverEdit( {
 		<>
 			{ controls }
 			<div
-				{ ...blockWrapperProps }
-				className={ classnames( classes, blockWrapperProps.className ) }
-				style={ { ...style, ...blockWrapperProps.style } }
+				{ ...blockProps }
+				className={ classnames( classes, blockProps.className ) }
+				style={ { ...style, ...blockProps.style } }
 				data-url={ url }
 			>
 				<BoxControlVisualizer

packages/block-library/src/group/edit.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { InnerBlocks, useBlockWrapperProps } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
 const { __Visualizer: BoxControlVisualizer } = BoxControl;
 
@@ -15,11 +15,11 @@ function GroupEdit( { attributes, clientId } ) {
 		},
 		[ clientId ]
 	);
-	const blockWrapperProps = useBlockWrapperProps();
+	const blockProps = useBlockProps();
 	const { tagName: TagName = 'div' } = attributes;
 
 	return (
-		<TagName { ...blockWrapperProps }>
+		<TagName { ...blockProps }>
 			<BoxControlVisualizer
 				values={ attributes.style?.spacing?.padding }
 				showValues={ attributes.style?.visualizers?.padding }

packages/block-library/src/heading/edit.js

@@ -12,7 +12,7 @@ import {
 	AlignmentToolbar,
 	BlockControls,
 	RichText,
-	useBlockWrapperProps,
+	useBlockProps,
 } from '@wordpress/block-editor';
 import { ToolbarGroup } from '@wordpress/components';
 
@@ -30,7 +30,7 @@ function HeadingEdit( {
 } ) {
 	const { align, content, level, placeholder } = attributes;
 	const tagName = 'h' + level;
-	const blockWrapperProps = useBlockWrapperProps( {
+	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ align }` ]: align,
 		} ),
@@ -75,7 +75,7 @@ function HeadingEdit( {
 				onRemove={ () => onReplace( [] ) }
 				placeholder={ placeholder || __( 'Write heading…' ) }
 				textAlign={ align }
-				{ ...blockWrapperProps }
+				{ ...blockProps }
 			/>
 		</>
 	);

packages/block-library/src/image/edit.js

@@ -15,7 +15,7 @@ import {
 	BlockControls,
 	BlockIcon,
 	MediaPlaceholder,
-	useBlockWrapperProps,
+	useBlockProps,
 } from '@wordpress/block-editor';
 import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -303,15 +303,15 @@ export function ImageEdit( {
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 	} );
 
-	const blockWrapperProps = useBlockWrapperProps( {
+	const blockProps = useBlockProps( {
 		ref,
 		className: classes,
 	} );
 
 	return (
 		<>
 			{ controls }
-			<figure { ...blockWrapperProps }>
+			<figure { ...blockProps }>
 				{ url && (
 					<Image
 						attributes={ attributes }

packages/block-library/src/list/edit.js

@@ -7,7 +7,7 @@ import {
 	RichText,
 	BlockControls,
 	RichTextShortcut,
-	useBlockWrapperProps,
+	useBlockProps,
 } from '@wordpress/block-editor';
 import { ToolbarGroup } from '@wordpress/components';
 import {
@@ -154,7 +154,7 @@ export default function ListEdit( {
 		</>
 	);
 
-	const blockWrapperProps = useBlockWrapperProps();
+	const blockProps = useBlockProps();
 
 	return (
 		<>
@@ -180,7 +180,7 @@ export default function ListEdit( {
 				start={ start }
 				reversed={ reversed }
 				type={ type }
-				{ ...blockWrapperProps }
+				{ ...blockProps }
 			>
 				{ controls }
 			</RichText>