Add block class

WordPress · Mar 9, 2020 · 6a6fc9f · 6a6fc9f
1 parent bf97c84
commit 6a6fc9f
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 29 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 { focus, isTextField, placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { BACKSPACE, DELETE, ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { BlockPropsFilterContext } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -236,9 +237,13 @@ const elements = [
 const BlockSaveComponent = forwardRef(
 	( { children, tagName: TagName = 'div', ...props }, wrapper ) => {
 		return (
-			<TagName { ...props } ref={ wrapper }>
-				{ children }
-			</TagName>
+			<BlockPropsFilterContext>
+				{ ( filter ) => (
+					<TagName ref={ wrapper } { ...filter( props ) }>
+						{ children }
+					</TagName>
+				) }
+			</BlockPropsFilterContext>
 		);
 	}
 );

diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
@@ -7,7 +7,10 @@ import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import {
+	RichText,
+	__experimentalBlock as Block,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const {
@@ -67,11 +70,13 @@ export default function save( { attributes } ) {
 
 	if ( 'left' === align || 'right' === align || 'center' === align ) {
 		return (
-			<div>
+			<Block.Save.div>
 				<figure className={ classes }>{ figure }</figure>
-			</div>
+			</Block.Save.div>
 		);
 	}
 
-	return <figure className={ classes }>{ figure }</figure>;
+	return (
+		<Block.Save.figure className={ classes }>{ figure }</Block.Save.figure>
+	);
 }
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
@@ -176,6 +176,10 @@ In the random image block above, we've given the `alt` attribute of the image a
 
 <!-- START TOKEN(Autogenerated API docs) -->
 
+<a name="BlockPropsFilterContext" href="#BlockPropsFilterContext">#</a> **BlockPropsFilterContext**
+
+Undocumented declaration.
+
 <a name="cloneBlock" href="#cloneBlock">#</a> **cloneBlock**
 
 Given a block object, returns a copy of the block object, optionally merging

diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js
@@ -24,6 +24,7 @@ export {
 	getBlockMenuDefaultClassName,
 	getSaveElement,
 	getSaveContent,
+	BlockPropsFilterContext,
 } 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
@@ -6,7 +6,12 @@ import { isEmpty, reduce, isObject, castArray, startsWith } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, cloneElement, renderToString } from '@wordpress/element';
+import {
+	Component,
+	cloneElement,
+	renderToString,
+	createContext,
+} from '@wordpress/element';
 import { hasFilter, applyFilters } from '@wordpress/hooks';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
@@ -17,6 +22,7 @@ import {
 	getBlockType,
 	getFreeformContentHandlerName,
 	getUnregisteredTypeHandlerName,
+	hasBlockSupport,
 } from './registration';
 import { normalizeBlockType } from './utils';
 import BlockContentProvider from '../block-content-provider';
@@ -68,6 +74,8 @@ export function getBlockMenuDefaultClassName( blockName ) {
 	);
 }
 
+export const BlockPropsFilterContext = createContext();
+
 /**
  * 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,27 +103,42 @@ export function getSaveElement(
 	}
 
 	let element = save( { attributes, innerBlocks } );
+	let blockPropsFilter = ( props ) => props;
+
+	if ( hasFilter( 'blocks.getSaveContent.extraProps' ) ) {
+		if ( hasBlockSupport( blockType, 'lightBlockWrapper', false ) ) {
+			blockPropsFilter = ( props ) =>
+				/**
+				 * Filters the props applied to the block save result element.
+				 *
+				 * @param {Object}  props      Props applied to save element.
+				 * @param {WPBlock} blockType  Block type definition.
+				 * @param {Object}  attributes Block attributes.
+				 */
+				applyFilters(
+					'blocks.getSaveContent.extraProps',
+					{ ...props },
+					blockType,
+					attributes
+				);
+		} else if ( isObject( element ) ) {
+			/**
+			 * Filters the props applied to the block save result element.
+			 *
+			 * @param {Object}  props      Props applied to save element.
+			 * @param {WPBlock} blockType  Block type definition.
+			 * @param {Object}  attributes Block attributes.
+			 */
+			const props = applyFilters(
+				'blocks.getSaveContent.extraProps',
+				{ ...element.props },
+				blockType,
+				attributes
+			);
 
-	if (
-		isObject( element ) &&
-		hasFilter( 'blocks.getSaveContent.extraProps' )
-	) {
-		/**
-		 * Filters the props applied to the block save result element.
-		 *
-		 * @param {Object}  props      Props applied to save element.
-		 * @param {WPBlock} blockType  Block type definition.
-		 * @param {Object}  attributes Block attributes.
-		 */
-		const props = applyFilters(
-			'blocks.getSaveContent.extraProps',
-			{ ...element.props },
-			blockType,
-			attributes
-		);
-
-		if ( ! isShallowEqual( props, element.props ) ) {
-			element = cloneElement( element, props );
+			if ( ! isShallowEqual( props, element.props ) ) {
+				element = cloneElement( element, props );
+			}
 		}
 	}
 
@@ -135,7 +158,9 @@ export function getSaveElement(
 
 	return (
 		<BlockContentProvider innerBlocks={ innerBlocks }>
-			{ element }
+			<BlockPropsFilterContext.Provider value={ blockPropsFilter }>
+				{ element }
+			</BlockPropsFilterContext.Provider>
 		</BlockContentProvider>
 	);
 }