Block API: light block edit/save symmetry

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 }

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 }

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>
 	);

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 ) }

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>
 	);

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

@@ -8,15 +8,15 @@ 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( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
 	return (
-		<div className={ className ? className : undefined }>
+		<div { ...getBlockProps( { className } ) }>
 			<InnerBlocks.Content />
 		</div>
 	);

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"

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>

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>
 	);
 }

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>
+	);
 }

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>
 	);
 }

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 }

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>
 	);
 }

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>
+	);
 }

packages/block-library/src/quote/save.js

@@ -8,15 +8,15 @@ 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( {
 		[ `has-text-align-${ align }` ]: align,
 	} );
 
 	return (
-		<blockquote className={ className }>
+		<blockquote { ...getBlockProps( { className } ) }>
 			<RichText.Content multiline value={ value } />
 			{ ! RichText.isEmpty( citation ) && (
 				<RichText.Content tagName="cite" value={ citation } />

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>
 	);

packages/block-library/src/verse/save.js

@@ -8,18 +8,16 @@ 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( {
 		[ `has-text-align-${ textAlign }` ]: textAlign,
 	} );
 
 	return (
-		<RichText.Content
-			tagName="pre"
-			className={ className }
-			value={ content }
-		/>
+		<pre { ...getBlockProps( { className } ) }>
+			<RichText.Content value={ content } />
+		</pre>
 	);
 }

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 }

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.