Add the directive for handling block root

packages/block-editor/README.md

@@ -205,10 +205,6 @@ _Returns_
 
 -   `WPComponent`: The component to be rendered.
 
-### BlockRoot
-
-Undocumented declaration.
-
 ### BlockSelectionClearer
 
 Undocumented declaration.

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/index.js

@@ -108,7 +108,6 @@ export { default as __experimentalUseResizeCanvas } from './use-resize-canvas';
 export { default as BlockInspector } from './block-inspector';
 export { default as BlockList } from './block-list';
 export { useBlockProps } from './block-list/use-block-props';
-export { BlockRoot } from './block-root';
 export { LayoutStyle as __experimentalLayoutStyle } from './block-list/layout';
 export { default as BlockMover } from './block-mover';
 export {

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

@@ -89,7 +89,6 @@ export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { useBlockProps } from './block-list/use-block-props';
-export { BlockRoot } from './block-root';
 export { default as FloatingToolbar } from './floating-toolbar';
 
 // State Related Components.

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 {
-	BlockRoot,
 	getColorClassName,
 	__experimentalUseColorProps as useColorProps,
 } from '@wordpress/block-editor';
@@ -46,8 +45,8 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 	};
 
 	return (
-		<BlockRoot
-			as={ HorizontalRule }
+		<HorizontalRule
+			data-wp-block-root
 			className={ className }
 			style={ hasCustomColor ? styles : undefined }
 		/>

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

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	BlockRoot,
 	getColorClassName,
 	__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 <BlockRoot as="hr" className={ className } style={ styles } />;
+	return <hr data-wp-block-root className={ className } style={ styles } />;
 }

packages/element/README.md

@@ -308,6 +308,15 @@ _Returns_
 
 -   `JSX.Element`: Dangerously-rendering component.
 
+### registerDirective
+
+Registers a new directive.
+
+_Parameters_
+
+-   _name_ `string`: Name of the directive.
+-   _handler_ `Function`: Handler for the directive.
+
 ### render
 
 > **Deprecated** since WordPress 6.2.0. Use `createRoot` instead.

packages/element/src/react/directives.js → packages/element/src/directives.js

@@ -21,9 +21,3 @@ export const directives = new Map();
 export function registerDirective( name, handler ) {
 	directives.set( DIRECTIVE_PREFIX + name, handler );
 }
-
-registerDirective( 'debug', function ( type, originalProps, ...children ) {
-	const key = DIRECTIVE_PREFIX + 'debug';
-	const { [ key ]: value, ...props } = originalProps;
-	return [ type, props, ...children ];
-} );

packages/element/src/index.js

@@ -1,4 +1,5 @@
 export { default as createInterpolateElement } from './create-interpolate-element';
+export { registerDirective } from './directives';
 export * from './react';
 export * from './react-platform';
 export * from './utils';

packages/element/src/react/create-element.js

@@ -7,20 +7,19 @@ import { createElement as createElementReact } from 'react';
 /**
  * Internal dependencies
  */
-import { directives } from './directives';
+import { directives } from '../directives';
 
 export function createElement( type, props, ...children ) {
-	// Limiting the application of directives to HTML elements with attributes.
-	if ( typeof type !== 'string' || ! props || props.length === 0 ) {
+	// Limiting the application of directives to components with props.
+	if ( ! props || props.length === 0 ) {
 		return createElementReact( type, props, ...children );
 	}
 
 	for ( const [ attributeName, directiveHandler ] of directives ) {
 		if ( attributeName in props ) {
 			[ type, props, ...children ] = directiveHandler(
-				type,
-				props,
-				...children
+				[ type, props, ...children ],
+				attributeName
 			);
 		}
 	}