Export through useBlockWrapperProps

WordPress · Sep 25, 2020 · 84aeb9e · 84aeb9e
1 parent 3f6715a
commit 84aeb9e
Show file tree

Hide file tree

Showing 22 changed files with 119 additions and 56 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
@@ -19,6 +19,7 @@ import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
+import { getBlockProps } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -286,6 +287,13 @@ export function useBlockWrapperProps( props = {}, { __unstableIsHtml } = {} ) {
 	};
 }
 
+/**
+ * Call within a save function to get the props for the block wrapper.
+ *
+ * @param {Object} props Optional. Props to pass to the element.
+ */
+useBlockWrapperProps.save = getBlockProps;
+
 const BlockComponent = forwardRef(
 	( { children, tagName: TagName = 'div', ...props }, ref ) => {
 		deprecated( 'wp.blockEditor.__experimentalBlock', {

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
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockProps } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
@@ -7,6 +12,8 @@ export function useBlockWrapperProps( props = {} ) {
 	return props;
 }
 
+useBlockWrapperProps.save = getBlockProps;
+
 const ExtendedBlockComponent = ELEMENTS.reduce( ( acc, element ) => {
 	acc[ element ] = element;
 	return acc;

diff --git a/packages/block-library/src/audio/save.js b/packages/block-library/src/audio/save.js
@@ -1,15 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	RichText,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { autoplay, caption, loop, preload, src } = attributes;
 
 	return (
 		src && (
-			<figure { ...getBlockProps() }>
+			<figure { ...useBlockWrapperProps.save() }>
 				<audio
 					controls="controls"
 					src={ src }

diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
@@ -6,8 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	RichText,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -34,7 +36,7 @@ export default function save( { attributes } ) {
 	// A title will no longer be assigned for new or updated button block links.
 
 	return (
-		<div { ...getBlockProps() }>
+		<div { ...useBlockWrapperProps.save() }>
 			<RichText.Content
 				tagName="a"
 				className={ buttonClasses }

diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js
@@ -1,12 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	InnerBlocks,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 export default function save() {
 	return (
-		<div { ...getBlockProps() }>
+		<div { ...useBlockWrapperProps.save() }>
 			<InnerBlocks.Content />
 		</div>
 	);

diff --git a/packages/block-library/src/code/save.js b/packages/block-library/src/code/save.js
@@ -1,8 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	RichText,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -11,7 +13,7 @@ import { escape } from './utils';
 
 export default function save( { attributes } ) {
 	return (
-		<pre { ...getBlockProps() }>
+		<pre { ...useBlockWrapperProps.save() }>
 			<RichText.Content
 				tagName="code"
 				value={ escape( attributes.content ) }

diff --git a/packages/block-library/src/column/save.js b/packages/block-library/src/column/save.js
@@ -6,8 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	InnerBlocks,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { verticalAlignment, width } = attributes;
@@ -22,7 +24,12 @@ export default function save( { attributes } ) {
 	}
 
 	return (
-		<div { ...getBlockProps( { className: wrapperClasses, style } ) }>
+		<div
+			{ ...useBlockWrapperProps.save( {
+				className: wrapperClasses,
+				style,
+			} ) }
+		>
 			<InnerBlocks.Content />
 		</div>
 	);

diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
@@ -6,8 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	InnerBlocks,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { verticalAlignment } = attributes;
@@ -17,7 +19,7 @@ export default function save( { attributes } ) {
 	} );
 
 	return (
-		<div { ...getBlockProps( { className } ) }>
+		<div { ...useBlockWrapperProps.save( { className } ) }>
 			<InnerBlocks.Content />
 		</div>
 	);

diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
@@ -10,8 +10,8 @@ import {
 	InnerBlocks,
 	getColorClassName,
 	__experimentalGetGradientClass,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
 } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -96,7 +96,7 @@ export default function save( { attributes } ) {
 	);
 
 	return (
-		<div { ...getBlockProps( { className: classes, style } ) }>
+		<div { ...useBlockWrapperProps.save( { className: classes, style } ) }>
 			{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 				<span
 					aria-hidden="true"

diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js
@@ -1,14 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	InnerBlocks,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { tagName: Tag } = attributes;
 
 	return (
-		<Tag { ...getBlockProps() }>
+		<Tag { ...useBlockWrapperProps.save() }>
 			<div className="wp-block-group__inner-container">
 				<InnerBlocks.Content />
 			</div>

diff --git a/packages/block-library/src/heading/save.js b/packages/block-library/src/heading/save.js
@@ -6,8 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	RichText,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { align, content, level } = attributes;
@@ -18,7 +20,7 @@ export default function save( { attributes } ) {
 	} );
 
 	return (
-		<TagName { ...getBlockProps( { className } ) }>
+		<TagName { ...useBlockWrapperProps.save( { className } ) }>
 			<RichText.Content value={ content } />
 		</TagName>
 	);

diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
@@ -7,8 +7,10 @@ import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	RichText,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const {
@@ -68,14 +70,14 @@ export default function save( { attributes } ) {
 
 	if ( 'left' === align || 'right' === align || 'center' === align ) {
 		return (
-			<div { ...getBlockProps() }>
+			<div { ...useBlockWrapperProps.save() }>
 				<figure className={ classes }>{ figure }</figure>
 			</div>
 		);
 	}
 
 	return (
-		<figure { ...getBlockProps( { className: classes } ) }>
+		<figure { ...useBlockWrapperProps.save( { className: classes } ) }>
 			{ figure }
 		</figure>
 	);

diff --git a/packages/block-library/src/list/save.js b/packages/block-library/src/list/save.js
@@ -1,15 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	RichText,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { ordered, values, type, reversed, start } = attributes;
 	const TagName = ordered ? 'ol' : 'ul';
 
 	return (
-		<TagName { ...getBlockProps( { type, reversed, start } ) }>
+		<TagName { ...useBlockWrapperProps.save( { type, reversed, start } ) }>
 			<RichText.Content value={ values } multiline="li" />
 		</TagName>
 	);

diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js
@@ -7,8 +7,10 @@ import { noop, isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	InnerBlocks,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -89,7 +91,7 @@ export default function save( { attributes } ) {
 		gridTemplateColumns,
 	};
 	return (
-		<div { ...getBlockProps( { className, style } ) }>
+		<div { ...useBlockWrapperProps.save( { className, style } ) }>
 			<figure
 				className="wp-block-media-text__media"
 				style={ backgroundStyles }

diff --git a/packages/block-library/src/paragraph/save.js b/packages/block-library/src/paragraph/save.js
@@ -6,8 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	RichText,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { align, content, dropCap, direction } = attributes;
@@ -17,7 +19,7 @@ export default function save( { attributes } ) {
 	} );
 
 	return (
-		<p { ...getBlockProps( { className, dir: direction } ) }>
+		<p { ...useBlockWrapperProps.save( { className, dir: direction } ) }>
 			<RichText.Content value={ content } />
 		</p>
 	);

diff --git a/packages/block-library/src/preformatted/save.js b/packages/block-library/src/preformatted/save.js
@@ -1,14 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	RichText,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { content } = attributes;
 
 	return (
-		<pre { ...getBlockProps() }>
+		<pre { ...useBlockWrapperProps.save() }>
 			<RichText.Content value={ content } />
 		</pre>
 	);

diff --git a/packages/block-library/src/quote/save.js b/packages/block-library/src/quote/save.js
@@ -6,8 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	RichText,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { align, value, citation } = attributes;
@@ -17,7 +19,7 @@ export default function save( { attributes } ) {
 	} );
 
 	return (
-		<blockquote { ...getBlockProps( { className } ) }>
+		<blockquote { ...useBlockWrapperProps.save( { className } ) }>
 			<RichText.Content multiline value={ value } />
 			{ ! RichText.isEmpty( citation ) && (
 				<RichText.Content tagName="cite" value={ citation } />

diff --git a/packages/block-library/src/social-links/save.js b/packages/block-library/src/social-links/save.js
@@ -1,12 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
-import { getBlockProps } from '@wordpress/blocks';
+import {
+	InnerBlocks,
+	__experimentalUseBlockWrapperProps as useBlockWrapperProps,
+} from '@wordpress/block-editor';
 
 export default function save() {
 	return (
-		<ul { ...getBlockProps() }>
+		<ul { ...useBlockWrapperProps.save() }>
 			<InnerBlocks.Content />
 		</ul>
 	);