Blocks: Add block environment and directives support (edit vs save)

packages/block-editor/package.json

@@ -28,7 +28,7 @@
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
-		"{src,build,build-module}/{index.js,store/index.js,hooks/**}"
+		"{src,build,build-module}/{index.js,store/index.js,directives/**,hooks/**}"
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",

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

@@ -43,7 +43,7 @@ import BlockHtml from './block-html';
 import { useBlockProps } from './use-block-props';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
-export const BlockListBlockContext = createContext();
+export const BlockListBlockContext = createContext( {} );
 
 /**
  * Merges wrapper props with special handling for classNames and styles.

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

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { EnvironmentContext, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockProps } from '../block-list/use-block-props';
+
+const BlockRootEdit = forwardRef(
+	( { as: Component = 'div', className, style, ...props }, ref ) => {
+		const blockProps = useBlockProps( { ref, className, style } );
+		return <Component { ...props } { ...blockProps } />;
+	}
+);
+
+const BlockRootSave = ( {
+	as: Component = 'div',
+	className,
+	style,
+	...props
+} ) => {
+	const blockProps = useBlockProps.save( { className, style } );
+
+	return <Component { ...props } { ...blockProps } />;
+};
+
+export const BlockRoot = forwardRef( ( props, ref ) => {
+	// We can't use the `useContext` hook here because it isn't supported in the save environment.
+	return (
+		<EnvironmentContext.Consumer>
+			{ ( env ) =>
+				env === 'save' ? (
+					<BlockRootSave { ...props } />
+				) : (
+					<BlockRootEdit ref={ ref } { ...props } />
+				)
+			}
+		</EnvironmentContext.Consumer>
+	);
+} );

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

@@ -99,7 +99,6 @@ export {
 /*
  * Content Related Components
  */
-
 export { default as __unstableBlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item';
 export { default as __unstableBlockToolbarLastItem } from './block-toolbar/block-toolbar-last-item';
 export { default as __unstableBlockNameContext } from './block-toolbar/block-name-context';

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

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { registerDirective } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { BlockRoot } from '../components/block-root';
+
+registerDirective(
+	'block-root',
+	function ( [ type, originalProps, ...children ], attributeName ) {
+		const { [ attributeName ]: _, ...props } = originalProps;
+		return [ BlockRoot, { ...props, as: type }, ...children ];
+	}
+);

packages/block-editor/src/index.js

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import './directives';
 import './hooks';
 export {
 	getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles,

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

@@ -8,7 +8,6 @@ import classnames from 'classnames';
  */
 import { HorizontalRule } from '@wordpress/components';
 import {
-	useBlockProps,
 	getColorClassName,
 	__experimentalUseColorProps as useColorProps,
 } from '@wordpress/block-editor';
@@ -46,13 +45,10 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 	};
 
 	return (
-		<>
-			<HorizontalRule
-				{ ...useBlockProps( {
-					className,
-					style: hasCustomColor ? styles : undefined,
-				} ) }
-			/>
-		</>
+		<HorizontalRule
+			data-wp-block-root
+			className={ className }
+			style={ hasCustomColor ? styles : undefined }
+		/>
 	);
 }

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

@@ -8,7 +8,6 @@ import classnames from 'classnames';
  */
 import {
 	getColorClassName,
-	useBlockProps,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
 
@@ -37,5 +36,5 @@ export default function separatorSave( { attributes } ) {
 		backgroundColor: colorProps?.style?.backgroundColor,
 		color: colorClass ? undefined : customColor,
 	};
-	return <hr { ...useBlockProps.save( { className, style: styles } ) } />;
+	return <hr data-wp-block-root className={ className } style={ styles } />;
 }

packages/block-library/src/separator/test/edit.js

@@ -13,10 +13,10 @@ import { useBlockProps } from '@wordpress/block-editor';
  */
 import SeparatorEdit from '../edit';
 
-jest.mock( '@wordpress/block-editor', () => ( {
-	...jest.requireActual( '@wordpress/block-editor' ),
-	useBlockProps: jest.fn(),
-} ) );
+jest.mock(
+	'@wordpress/block-editor/src/components/block-list/use-block-props',
+	() => ( { useBlockProps: jest.fn() } )
+);
 
 const defaultAttributes = {
 	backgroundColor: undefined,
@@ -38,6 +38,7 @@ describe( 'Separator block edit method', () => {
 		render( <SeparatorEdit { ...defaultProps } /> );
 		expect( useBlockProps ).toHaveBeenCalledWith( {
 			className: 'has-alpha-channel-opacity',
+			ref: null,
 			style: undefined,
 		} );
 	} );
@@ -50,6 +51,7 @@ describe( 'Separator block edit method', () => {
 		render( <SeparatorEdit { ...props } /> );
 		expect( useBlockProps ).toHaveBeenCalledWith( {
 			className: 'has-css-opacity',
+			ref: null,
 			style: undefined,
 		} );
 	} );
@@ -68,6 +70,7 @@ describe( 'Separator block edit method', () => {
 			// is-style-dots as this class was always added to v1 blocks, so may be expected by themes and plugins.
 			className:
 				'has-text-color has-alpha-channel-opacity has-background',
+			ref: null,
 			style: {
 				backgroundColor: '#ff0000',
 				color: '#ff0000',
@@ -88,6 +91,7 @@ describe( 'Separator block edit method', () => {
 		expect( useBlockProps ).toHaveBeenCalledWith( {
 			className:
 				'has-text-color has-alpha-channel-opacity has-background',
+			ref: null,
 			style: {
 				backgroundColor: '#ff0000',
 				color: '#ff0000',
@@ -109,6 +113,7 @@ describe( 'Separator block edit method', () => {
 		expect( useBlockProps ).toHaveBeenCalledWith( {
 			className:
 				'has-text-color has-banana-color has-alpha-channel-opacity has-banana-background-color has-background',
+			ref: null,
 			style: undefined,
 		} );
 	} );

packages/blocks/src/api/serializer.js

@@ -4,6 +4,8 @@
 import {
 	Component,
 	cloneElement,
+	createElement,
+	EnvironmentContext,
 	renderToString,
 	RawHTML,
 } from '@wordpress/element';
@@ -190,7 +192,11 @@ export function getSaveContent( blockTypeOrName, attributes, innerBlocks ) {
 	const blockType = normalizeBlockType( blockTypeOrName );
 
 	return renderToString(
-		getSaveElement( blockType, attributes, innerBlocks )
+		createElement(
+			EnvironmentContext.Provider,
+			{ value: 'save' },
+			getSaveElement( blockType, attributes, innerBlocks )
+		)
 	);
 }