From f27f81e6369bb0fcb5952db6044ba9f6f31cd0dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Fri, 25 Sep 2020 15:15:02 +0300
Subject: [PATCH 1/4] Block API: light block edit/save symmetry

---
 packages/block-library/src/audio/save.js        |  4 ++--
 packages/block-library/src/button/save.js       |  4 ++--
 packages/block-library/src/buttons/save.js      |  4 ++--
 packages/block-library/src/code/save.js         |  4 ++--
 packages/block-library/src/column/save.js       |  4 ++--
 packages/block-library/src/columns/save.js      |  4 ++--
 packages/block-library/src/cover/save.js        |  4 ++--
 packages/block-library/src/group/save.js        |  4 ++--
 packages/block-library/src/heading/save.js      | 12 +++++-------
 packages/block-library/src/image/save.js        | 10 +++++++---
 packages/block-library/src/list/save.js         | 15 +++++----------
 packages/block-library/src/media-text/save.js   |  4 ++--
 packages/block-library/src/paragraph/save.js    | 12 ++++--------
 packages/block-library/src/preformatted/save.js |  8 ++++++--
 packages/block-library/src/quote/save.js        |  4 ++--
 packages/block-library/src/social-links/save.js |  4 ++--
 packages/block-library/src/verse/save.js        | 10 ++++------
 packages/block-library/src/video/save.js        |  4 ++--
 packages/blocks/src/api/serializer.js           | 15 +++++++++++++--
 19 files changed, 68 insertions(+), 62 deletions(-)

diff --git a/packages/block-library/src/audio/save.js b/packages/block-library/src/audio/save.js
index f88eb0bba52e0c..c3e4f18b0667c4 100644
--- a/packages/block-library/src/audio/save.js
+++ b/packages/block-library/src/audio/save.js
@@ -3,12 +3,12 @@
  */
 import { RichText } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const { autoplay, caption, loop, preload, src } = attributes;
 
 	return (
 		src && (
-			<figure>
+			<figure { ...getBlockProps() }>
 				<audio
 					controls="controls"
 					src={ src }
diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
index 3fcf98e6edb129..d02efab66d8aeb 100644
--- a/packages/block-library/src/button/save.js
+++ b/packages/block-library/src/button/save.js
@@ -13,7 +13,7 @@ import { RichText } from '@wordpress/block-editor';
  */
 import getColorAndStyleProps from './color-props';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const { borderRadius, linkTarget, rel, text, title, url } = attributes;
 	const colorProps = getColorAndStyleProps( attributes );
 	const buttonClasses = classnames(
@@ -33,7 +33,7 @@ export default function save( { attributes } ) {
 	// A title will no longer be assigned for new or updated button block links.
 
 	return (
-		<div>
+		<div { ...getBlockProps() }>
 			<RichText.Content
 				tagName="a"
 				className={ buttonClasses }
diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js
index 91cb804231d058..19e54b50d37abb 100644
--- a/packages/block-library/src/buttons/save.js
+++ b/packages/block-library/src/buttons/save.js
@@ -3,9 +3,9 @@
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export default function save() {
+export default function save( { getBlockProps } ) {
 	return (
-		<div>
+		<div { ...getBlockProps() }>
 			<InnerBlocks.Content />
 		</div>
 	);
diff --git a/packages/block-library/src/code/save.js b/packages/block-library/src/code/save.js
index 22b5e17a2cd654..1dcb42a2fd2767 100644
--- a/packages/block-library/src/code/save.js
+++ b/packages/block-library/src/code/save.js
@@ -8,9 +8,9 @@ import { RichText } from '@wordpress/block-editor';
  */
 import { escape } from './utils';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	return (
-		<pre>
+		<pre { ...getBlockProps() }>
 			<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
index d0dda9de3174b3..ad79cc393c8877 100644
--- a/packages/block-library/src/column/save.js
+++ b/packages/block-library/src/column/save.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const { verticalAlignment, width } = attributes;
 
 	const wrapperClasses = classnames( {
@@ -21,7 +21,7 @@ export default function save( { attributes } ) {
 	}
 
 	return (
-		<div className={ wrapperClasses } style={ style }>
+		<div { ...getBlockProps( { className: wrapperClasses, style } ) }>
 			<InnerBlocks.Content />
 		</div>
 	);
diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
index 0d9a5305cbeaeb..395e3a9beea354 100644
--- a/packages/block-library/src/columns/save.js
+++ b/packages/block-library/src/columns/save.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const { verticalAlignment } = attributes;
 
 	const className = classnames( {
@@ -16,7 +16,7 @@ export default function save( { attributes } ) {
 	} );
 
 	return (
-		<div className={ className ? className : undefined }>
+		<div { ...getBlockProps( { className } ) }>
 			<InnerBlocks.Content />
 		</div>
 	);
diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
index 58374ce5ed8875..37e48a6d24e3dd 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -24,7 +24,7 @@ import {
 	getPositionClassName,
 } from './shared';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const {
 		backgroundType,
 		gradient,
@@ -95,7 +95,7 @@ export default function save( { attributes } ) {
 	);
 
 	return (
-		<div className={ classes } style={ style }>
+		<div { ...getBlockProps( { 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
index f24c9f37cdf409..4031b91da17033 100644
--- a/packages/block-library/src/group/save.js
+++ b/packages/block-library/src/group/save.js
@@ -3,11 +3,11 @@
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const { tagName: Tag } = attributes;
 
 	return (
-		<Tag>
+		<Tag { ...getBlockProps() }>
 			<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
index 00ecf40e1c27ce..b4162ff8449f4c 100644
--- a/packages/block-library/src/heading/save.js
+++ b/packages/block-library/src/heading/save.js
@@ -8,19 +8,17 @@ import classnames from 'classnames';
  */
 import { RichText } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const { align, content, level } = attributes;
-	const tagName = 'h' + level;
+	const TagName = 'h' + level;
 
 	const className = classnames( {
 		[ `has-text-align-${ align }` ]: align,
 	} );
 
 	return (
-		<RichText.Content
-			className={ className ? className : undefined }
-			tagName={ tagName }
-			value={ content }
-		/>
+		<TagName { ...getBlockProps( { className } ) }>
+			<RichText.Content value={ content } />
+		</TagName>
 	);
 }
diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
index 4124e9c951e382..749d632ea636e7 100644
--- a/packages/block-library/src/image/save.js
+++ b/packages/block-library/src/image/save.js
@@ -9,7 +9,7 @@ import { isEmpty } from 'lodash';
  */
 import { RichText } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const {
 		url,
 		alt,
@@ -67,11 +67,15 @@ export default function save( { attributes } ) {
 
 	if ( 'left' === align || 'right' === align || 'center' === align ) {
 		return (
-			<div>
+			<div { ...getBlockProps() }>
 				<figure className={ classes }>{ figure }</figure>
 			</div>
 		);
 	}
 
-	return <figure className={ classes }>{ figure }</figure>;
+	return (
+		<figure { ...getBlockProps( { className: classes } ) }>
+			{ figure }
+		</figure>
+	);
 }
diff --git a/packages/block-library/src/list/save.js b/packages/block-library/src/list/save.js
index 8cd1d3870148ba..8ce8fad474a06a 100644
--- a/packages/block-library/src/list/save.js
+++ b/packages/block-library/src/list/save.js
@@ -3,18 +3,13 @@
  */
 import { RichText } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const { ordered, values, type, reversed, start } = attributes;
-	const tagName = ordered ? 'ol' : 'ul';
+	const TagName = ordered ? 'ol' : 'ul';
 
 	return (
-		<RichText.Content
-			tagName={ tagName }
-			value={ values }
-			type={ type }
-			reversed={ reversed }
-			start={ start }
-			multiline="li"
-		/>
+		<TagName { ...getBlockProps( { 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
index 104f0ec099abd3..3392ed9c33aff2 100644
--- a/packages/block-library/src/media-text/save.js
+++ b/packages/block-library/src/media-text/save.js
@@ -17,7 +17,7 @@ import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
 
 const DEFAULT_MEDIA_WIDTH = 50;
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const {
 		isStackedOnMobile,
 		mediaAlt,
@@ -88,7 +88,7 @@ export default function save( { attributes } ) {
 		gridTemplateColumns,
 	};
 	return (
-		<div className={ className } style={ style }>
+		<div { ...getBlockProps( { 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
index 434cc022295588..757e0e5909722c 100644
--- a/packages/block-library/src/paragraph/save.js
+++ b/packages/block-library/src/paragraph/save.js
@@ -8,20 +8,16 @@ import classnames from 'classnames';
  */
 import { RichText } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const { align, content, dropCap, direction } = attributes;
-
 	const className = classnames( {
 		'has-drop-cap': dropCap,
 		[ `has-text-align-${ align }` ]: align,
 	} );
 
 	return (
-		<RichText.Content
-			tagName="p"
-			className={ className ? className : undefined }
-			value={ content }
-			dir={ direction }
-		/>
+		<p { ...getBlockProps( { 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
index f11dabb3f93e6f..4a56e78e671b6d 100644
--- a/packages/block-library/src/preformatted/save.js
+++ b/packages/block-library/src/preformatted/save.js
@@ -3,8 +3,12 @@
  */
 import { RichText } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const { content } = attributes;
 
-	return <RichText.Content tagName="pre" value={ content } />;
+	return (
+		<pre { ...getBlockProps() }>
+			<RichText.Content value={ content } />
+		</pre>
+	);
 }
diff --git a/packages/block-library/src/quote/save.js b/packages/block-library/src/quote/save.js
index 92374a593ba7fd..c3e01496e84557 100644
--- a/packages/block-library/src/quote/save.js
+++ b/packages/block-library/src/quote/save.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { RichText } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const { align, value, citation } = attributes;
 
 	const className = classnames( {
@@ -16,7 +16,7 @@ export default function save( { attributes } ) {
 	} );
 
 	return (
-		<blockquote className={ className }>
+		<blockquote { ...getBlockProps( { 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
index d21ee51216daa4..12fb74a90a4347 100644
--- a/packages/block-library/src/social-links/save.js
+++ b/packages/block-library/src/social-links/save.js
@@ -3,9 +3,9 @@
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export default function save( { className } ) {
+export default function save( { getBlockProps } ) {
 	return (
-		<ul className={ className }>
+		<ul { ...getBlockProps() }>
 			<InnerBlocks.Content />
 		</ul>
 	);
diff --git a/packages/block-library/src/verse/save.js b/packages/block-library/src/verse/save.js
index 59bb8557462699..ce3b548900c514 100644
--- a/packages/block-library/src/verse/save.js
+++ b/packages/block-library/src/verse/save.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { RichText } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const { textAlign, content } = attributes;
 
 	const className = classnames( {
@@ -16,10 +16,8 @@ export default function save( { attributes } ) {
 	} );
 
 	return (
-		<RichText.Content
-			tagName="pre"
-			className={ className }
-			value={ content }
-		/>
+		<pre { ...getBlockProps( { className } ) }>
+			<RichText.Content value={ content } />
+		</pre>
 	);
 }
diff --git a/packages/block-library/src/video/save.js b/packages/block-library/src/video/save.js
index a16c3b0fd387aa..ab3d517e747001 100644
--- a/packages/block-library/src/video/save.js
+++ b/packages/block-library/src/video/save.js
@@ -3,7 +3,7 @@
  */
 import { RichText } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save( { attributes, getBlockProps } ) {
 	const {
 		autoplay,
 		caption,
@@ -16,7 +16,7 @@ export default function save( { attributes } ) {
 		playsInline,
 	} = attributes;
 	return (
-		<figure>
+		<figure { ...getBlockProps() }>
 			{ src && (
 				<video
 					autoPlay={ autoplay }
diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js
index 886a1ad69b6138..c056de58d4874f 100644
--- a/packages/blocks/src/api/serializer.js
+++ b/packages/blocks/src/api/serializer.js
@@ -17,6 +17,7 @@ import {
 	getBlockType,
 	getFreeformContentHandlerName,
 	getUnregisteredTypeHandlerName,
+	hasBlockSupport,
 } from './registration';
 import { normalizeBlockType } from './utils';
 import BlockContentProvider from '../block-content-provider';
@@ -94,11 +95,21 @@ export function getSaveElement(
 		save = instance.render.bind( instance );
 	}
 
-	let element = save( { attributes, innerBlocks } );
+	function getBlockProps( props ) {
+		return applyFilters(
+			'blocks.getSaveContent.extraProps',
+			{ ...props },
+			blockType,
+			attributes
+		);
+	}
+
+	let element = save( { attributes, innerBlocks, getBlockProps } );
 
 	if (
 		isObject( element ) &&
-		hasFilter( 'blocks.getSaveContent.extraProps' )
+		hasFilter( 'blocks.getSaveContent.extraProps' ) &&
+		! hasBlockSupport( blockType, 'lightBlockWrapper', false )
 	) {
 		/**
 		 * Filters the props applied to the block save result element.

From 3f6715acac7c369e4ff5f0c440792e9aaf413234 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Fri, 25 Sep 2020 16:28:55 +0300
Subject: [PATCH 2/4] Pass block context differently

---
 packages/block-library/src/audio/save.js      |  3 ++-
 packages/block-library/src/button/save.js     |  3 ++-
 packages/block-library/src/buttons/save.js    |  3 ++-
 packages/block-library/src/code/save.js       |  3 ++-
 packages/block-library/src/column/save.js     |  3 ++-
 packages/block-library/src/columns/save.js    |  3 ++-
 packages/block-library/src/cover/save.js      |  3 ++-
 packages/block-library/src/group/save.js      |  3 ++-
 packages/block-library/src/heading/save.js    |  3 ++-
 packages/block-library/src/image/save.js      |  3 ++-
 packages/block-library/src/list/save.js       |  3 ++-
 packages/block-library/src/media-text/save.js |  3 ++-
 packages/block-library/src/paragraph/save.js  |  3 ++-
 .../block-library/src/preformatted/save.js    |  3 ++-
 packages/block-library/src/quote/save.js      |  3 ++-
 .../block-library/src/social-links/save.js    |  3 ++-
 packages/block-library/src/verse/save.js      |  3 ++-
 packages/block-library/src/video/save.js      |  3 ++-
 packages/blocks/README.md                     |  4 ++++
 packages/blocks/src/api/index.js              |  1 +
 packages/blocks/src/api/serializer.js         | 24 ++++++++++++-------
 21 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/packages/block-library/src/audio/save.js b/packages/block-library/src/audio/save.js
index c3e4f18b0667c4..44b9c76a5ebb64 100644
--- a/packages/block-library/src/audio/save.js
+++ b/packages/block-library/src/audio/save.js
@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const { autoplay, caption, loop, preload, src } = attributes;
 
 	return (
diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
index d02efab66d8aeb..ffdc34b9eb5478 100644
--- a/packages/block-library/src/button/save.js
+++ b/packages/block-library/src/button/save.js
@@ -7,13 +7,14 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import getColorAndStyleProps from './color-props';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const { borderRadius, linkTarget, rel, text, title, url } = attributes;
 	const colorProps = getColorAndStyleProps( attributes );
 	const buttonClasses = classnames(
diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js
index 19e54b50d37abb..0a4a99f29e6f09 100644
--- a/packages/block-library/src/buttons/save.js
+++ b/packages/block-library/src/buttons/save.js
@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import { InnerBlocks } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
-export default function save( { getBlockProps } ) {
+export default function save() {
 	return (
 		<div { ...getBlockProps() }>
 			<InnerBlocks.Content />
diff --git a/packages/block-library/src/code/save.js b/packages/block-library/src/code/save.js
index 1dcb42a2fd2767..2e9a008ff01c57 100644
--- a/packages/block-library/src/code/save.js
+++ b/packages/block-library/src/code/save.js
@@ -2,13 +2,14 @@
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { escape } from './utils';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	return (
 		<pre { ...getBlockProps() }>
 			<RichText.Content
diff --git a/packages/block-library/src/column/save.js b/packages/block-library/src/column/save.js
index ad79cc393c8877..bfd087add5c2a2 100644
--- a/packages/block-library/src/column/save.js
+++ b/packages/block-library/src/column/save.js
@@ -7,8 +7,9 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { InnerBlocks } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const { verticalAlignment, width } = attributes;
 
 	const wrapperClasses = classnames( {
diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
index 395e3a9beea354..bc71b0ffd8d8b4 100644
--- a/packages/block-library/src/columns/save.js
+++ b/packages/block-library/src/columns/save.js
@@ -7,8 +7,9 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { InnerBlocks } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const { verticalAlignment } = attributes;
 
 	const className = classnames( {
diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
index 37e48a6d24e3dd..4eba4aa0f23368 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -11,6 +11,7 @@ import {
 	getColorClassName,
 	__experimentalGetGradientClass,
 } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -24,7 +25,7 @@ import {
 	getPositionClassName,
 } from './shared';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const {
 		backgroundType,
 		gradient,
diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js
index 4031b91da17033..06efef17d3c7e3 100644
--- a/packages/block-library/src/group/save.js
+++ b/packages/block-library/src/group/save.js
@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import { InnerBlocks } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const { tagName: Tag } = attributes;
 
 	return (
diff --git a/packages/block-library/src/heading/save.js b/packages/block-library/src/heading/save.js
index b4162ff8449f4c..93b3093f95a619 100644
--- a/packages/block-library/src/heading/save.js
+++ b/packages/block-library/src/heading/save.js
@@ -7,8 +7,9 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const { align, content, level } = attributes;
 	const TagName = 'h' + level;
 
diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
index 749d632ea636e7..5ea7a57a3b90f6 100644
--- a/packages/block-library/src/image/save.js
+++ b/packages/block-library/src/image/save.js
@@ -8,8 +8,9 @@ import { isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const {
 		url,
 		alt,
diff --git a/packages/block-library/src/list/save.js b/packages/block-library/src/list/save.js
index 8ce8fad474a06a..95a860065c1ff3 100644
--- a/packages/block-library/src/list/save.js
+++ b/packages/block-library/src/list/save.js
@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const { ordered, values, type, reversed, start } = attributes;
 	const TagName = ordered ? 'ol' : 'ul';
 
diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js
index 3392ed9c33aff2..8dc8dffafc39de 100644
--- a/packages/block-library/src/media-text/save.js
+++ b/packages/block-library/src/media-text/save.js
@@ -8,6 +8,7 @@ import { noop, isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import { InnerBlocks } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -17,7 +18,7 @@ import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
 
 const DEFAULT_MEDIA_WIDTH = 50;
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const {
 		isStackedOnMobile,
 		mediaAlt,
diff --git a/packages/block-library/src/paragraph/save.js b/packages/block-library/src/paragraph/save.js
index 757e0e5909722c..ab840a59ced655 100644
--- a/packages/block-library/src/paragraph/save.js
+++ b/packages/block-library/src/paragraph/save.js
@@ -7,8 +7,9 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const { align, content, dropCap, direction } = attributes;
 	const className = classnames( {
 		'has-drop-cap': dropCap,
diff --git a/packages/block-library/src/preformatted/save.js b/packages/block-library/src/preformatted/save.js
index 4a56e78e671b6d..f562824df69bfa 100644
--- a/packages/block-library/src/preformatted/save.js
+++ b/packages/block-library/src/preformatted/save.js
@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const { content } = attributes;
 
 	return (
diff --git a/packages/block-library/src/quote/save.js b/packages/block-library/src/quote/save.js
index c3e01496e84557..2183d28e26f9f7 100644
--- a/packages/block-library/src/quote/save.js
+++ b/packages/block-library/src/quote/save.js
@@ -7,8 +7,9 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const { align, value, citation } = attributes;
 
 	const className = classnames( {
diff --git a/packages/block-library/src/social-links/save.js b/packages/block-library/src/social-links/save.js
index 12fb74a90a4347..af4c5392ab520e 100644
--- a/packages/block-library/src/social-links/save.js
+++ b/packages/block-library/src/social-links/save.js
@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import { InnerBlocks } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
-export default function save( { getBlockProps } ) {
+export default function save() {
 	return (
 		<ul { ...getBlockProps() }>
 			<InnerBlocks.Content />
diff --git a/packages/block-library/src/verse/save.js b/packages/block-library/src/verse/save.js
index ce3b548900c514..4a1455c0644974 100644
--- a/packages/block-library/src/verse/save.js
+++ b/packages/block-library/src/verse/save.js
@@ -7,8 +7,9 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const { textAlign, content } = attributes;
 
 	const className = classnames( {
diff --git a/packages/block-library/src/video/save.js b/packages/block-library/src/video/save.js
index ab3d517e747001..a78811bb8581b5 100644
--- a/packages/block-library/src/video/save.js
+++ b/packages/block-library/src/video/save.js
@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
+import { getBlockProps } from '@wordpress/blocks';
 
-export default function save( { attributes, getBlockProps } ) {
+export default function save( { attributes } ) {
 	const {
 		autoplay,
 		caption,
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index 1148b2f6028380..2ab7ca14be5646 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -298,6 +298,10 @@ _Returns_
 
 -   `string`: The block's default menu item class.
 
+<a name="getBlockProps" href="#getBlockProps">#</a> **getBlockProps**
+
+Undocumented declaration.
+
 <a name="getBlockSupport" href="#getBlockSupport">#</a> **getBlockSupport**
 
 Returns the block support value for a feature, if defined.
diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js
index 846a360e961996..0796853f04c976 100644
--- a/packages/blocks/src/api/index.js
+++ b/packages/blocks/src/api/index.js
@@ -24,6 +24,7 @@ export {
 	getBlockMenuDefaultClassName,
 	getSaveElement,
 	getSaveContent,
+	getBlockProps,
 } from './serializer';
 export { isValidBlockContent } from './validation';
 export { getCategories, setCategories, updateCategory } from './categories';
diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js
index c056de58d4874f..08869dc9407649 100644
--- a/packages/blocks/src/api/serializer.js
+++ b/packages/blocks/src/api/serializer.js
@@ -69,6 +69,18 @@ export function getBlockMenuDefaultClassName( blockName ) {
 	);
 }
 
+const blockPropsProvider = {};
+
+export function getBlockProps( props ) {
+	const { blockType, attributes } = blockPropsProvider;
+	return applyFilters(
+		'blocks.getSaveContent.extraProps',
+		{ ...props },
+		blockType,
+		attributes
+	);
+}
+
 /**
  * Given a block type containing a save render implementation and attributes, returns the
  * enhanced element to be saved or string when raw HTML expected.
@@ -95,16 +107,10 @@ export function getSaveElement(
 		save = instance.render.bind( instance );
 	}
 
-	function getBlockProps( props ) {
-		return applyFilters(
-			'blocks.getSaveContent.extraProps',
-			{ ...props },
-			blockType,
-			attributes
-		);
-	}
+	blockPropsProvider.blockType = blockType;
+	blockPropsProvider.attributes = attributes;
 
-	let element = save( { attributes, innerBlocks, getBlockProps } );
+	let element = save( { attributes, innerBlocks } );
 
 	if (
 		isObject( element ) &&

From 84aeb9eb32409dd78f426c521402fc2e4853059e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Fri, 25 Sep 2020 18:22:20 +0300
Subject: [PATCH 3/4] Export through useBlockWrapperProps

---
 .../src/components/block-list/block-wrapper.js      |  8 ++++++++
 .../components/block-list/block-wrapper.native.js   |  7 +++++++
 packages/block-library/src/audio/save.js            |  8 +++++---
 packages/block-library/src/button/save.js           |  8 +++++---
 packages/block-library/src/buttons/save.js          |  8 +++++---
 packages/block-library/src/code/save.js             |  8 +++++---
 packages/block-library/src/column/save.js           | 13 ++++++++++---
 packages/block-library/src/columns/save.js          |  8 +++++---
 packages/block-library/src/cover/save.js            |  4 ++--
 packages/block-library/src/group/save.js            |  8 +++++---
 packages/block-library/src/heading/save.js          |  8 +++++---
 packages/block-library/src/image/save.js            | 10 ++++++----
 packages/block-library/src/list/save.js             |  8 +++++---
 packages/block-library/src/media-text/save.js       |  8 +++++---
 packages/block-library/src/paragraph/save.js        |  8 +++++---
 packages/block-library/src/preformatted/save.js     |  8 +++++---
 packages/block-library/src/quote/save.js            |  8 +++++---
 packages/block-library/src/social-links/save.js     |  8 +++++---
 packages/block-library/src/verse/save.js            |  8 +++++---
 packages/block-library/src/video/save.js            |  8 +++++---
 packages/blocks/README.md                           |  6 +++++-
 packages/blocks/src/api/serializer.js               |  7 ++++++-
 22 files changed, 119 insertions(+), 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
index 4aef321a0bf20b..0d95208177152b 100644
--- 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
index 10aea4bb9edd71..bf479d1821301a 100644
--- 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
index 44b9c76a5ebb64..15faa71d8536ba 100644
--- 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
index ffdc34b9eb5478..5613aef5ad7621 100644
--- 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
index 0a4a99f29e6f09..07852d4931ed5f 100644
--- 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
index 2e9a008ff01c57..386cea7cc014e9 100644
--- 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
index bfd087add5c2a2..b0ee55233d5e51 100644
--- 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
index bc71b0ffd8d8b4..26e0435bd648ed 100644
--- 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
index 4eba4aa0f23368..cfb0a4b0cea6d2 100644
--- 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
index 06efef17d3c7e3..6a8da906ef9985 100644
--- 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
index 93b3093f95a619..3d7b070eab3b68 100644
--- 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
index 5ea7a57a3b90f6..161c0162587272 100644
--- 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
index 95a860065c1ff3..41184eb6b6d959 100644
--- 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
index 8dc8dffafc39de..a458e2fa5940ec 100644
--- 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
index ab840a59ced655..2de85ea880d061 100644
--- 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
index f562824df69bfa..95d26b71b585b7 100644
--- 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
index 2183d28e26f9f7..83bb34f0e6bba8 100644
--- 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
index af4c5392ab520e..29ccad1c5cfe7e 100644
--- 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>
 	);
diff --git a/packages/block-library/src/verse/save.js b/packages/block-library/src/verse/save.js
index 4a1455c0644974..55f22fef9599fe 100644
--- a/packages/block-library/src/verse/save.js
+++ b/packages/block-library/src/verse/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 { textAlign, content } = attributes;
@@ -17,7 +19,7 @@ export default function save( { attributes } ) {
 	} );
 
 	return (
-		<pre { ...getBlockProps( { className } ) }>
+		<pre { ...useBlockWrapperProps.save( { className } ) }>
 			<RichText.Content value={ content } />
 		</pre>
 	);
diff --git a/packages/block-library/src/video/save.js b/packages/block-library/src/video/save.js
index a78811bb8581b5..baf7e248b3f10f 100644
--- a/packages/block-library/src/video/save.js
+++ b/packages/block-library/src/video/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';
 
 export default function save( { attributes } ) {
 	const {
@@ -17,7 +19,7 @@ export default function save( { attributes } ) {
 		playsInline,
 	} = attributes;
 	return (
-		<figure { ...getBlockProps() }>
+		<figure { ...useBlockWrapperProps.save() }>
 			{ src && (
 				<video
 					autoPlay={ autoplay }
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index 2ab7ca14be5646..b3dcb5de9a039b 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -300,7 +300,11 @@ _Returns_
 
 <a name="getBlockProps" href="#getBlockProps">#</a> **getBlockProps**
 
-Undocumented declaration.
+Call within a save function to get the props for the block wrapper.
+
+_Parameters_
+
+-   _props_ `Object`: Optional. Props to pass to the element.
 
 <a name="getBlockSupport" href="#getBlockSupport">#</a> **getBlockSupport**
 
diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js
index 08869dc9407649..bbce8a044c99dd 100644
--- a/packages/blocks/src/api/serializer.js
+++ b/packages/blocks/src/api/serializer.js
@@ -71,7 +71,12 @@ export function getBlockMenuDefaultClassName( blockName ) {
 
 const blockPropsProvider = {};
 
-export function getBlockProps( props ) {
+/**
+ * Call within a save function to get the props for the block wrapper.
+ *
+ * @param {Object} props Optional. Props to pass to the element.
+ */
+export function getBlockProps( props = {} ) {
 	const { blockType, attributes } = blockPropsProvider;
 	return applyFilters(
 		'blocks.getSaveContent.extraProps',

From 062d519866dc999059856d4c6b3719cdb9dd1d67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Fri, 25 Sep 2020 19:25:15 +0300
Subject: [PATCH 4/4] Mark getBlockProps unstable

---
 .../src/components/block-list/block-wrapper.js            | 2 +-
 .../src/components/block-list/block-wrapper.native.js     | 2 +-
 packages/blocks/README.md                                 | 8 --------
 packages/blocks/src/api/index.js                          | 2 +-
 4 files changed, 3 insertions(+), 11 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
index 0d95208177152b..dc837ff8f9b8fd 100644
--- a/packages/block-editor/src/components/block-list/block-wrapper.js
+++ b/packages/block-editor/src/components/block-list/block-wrapper.js
@@ -19,7 +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';
+import { __unstableGetBlockProps as getBlockProps } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
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
index bf479d1821301a..55c3bff51f66bd 100644
--- 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,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { getBlockProps } from '@wordpress/blocks';
+import { __unstableGetBlockProps as getBlockProps } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index b3dcb5de9a039b..1148b2f6028380 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -298,14 +298,6 @@ _Returns_
 
 -   `string`: The block's default menu item class.
 
-<a name="getBlockProps" href="#getBlockProps">#</a> **getBlockProps**
-
-Call within a save function to get the props for the block wrapper.
-
-_Parameters_
-
--   _props_ `Object`: Optional. Props to pass to the element.
-
 <a name="getBlockSupport" href="#getBlockSupport">#</a> **getBlockSupport**
 
 Returns the block support value for a feature, if defined.
diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js
index 0796853f04c976..ed50a953509e56 100644
--- a/packages/blocks/src/api/index.js
+++ b/packages/blocks/src/api/index.js
@@ -24,7 +24,7 @@ export {
 	getBlockMenuDefaultClassName,
 	getSaveElement,
 	getSaveContent,
-	getBlockProps,
+	getBlockProps as __unstableGetBlockProps,
 } from './serializer';
 export { isValidBlockContent } from './validation';
 export { getCategories, setCategories, updateCategory } from './categories';