diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 65861c0dc70314..18c2c2cfbce521 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -201,10 +201,6 @@ _Returns_
 
 -   `WPComponent`: The component to be rendered.
 
-### BlockRoot
-
-Undocumented declaration.
-
 ### BlockSelectionClearer
 
 Undocumented declaration.
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index e3a873fe65d68e..13dfffda4d6364 100644
--- a/packages/block-editor/package.json
+++ b/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",
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index f83a5bd20aad24..00fdd3fb66319a 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -105,7 +105,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 {
diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
index 81dd9569d0bc6b..d5b182572e386c 100644
--- a/packages/block-editor/src/components/index.native.js
+++ b/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.
diff --git a/packages/block-editor/src/directives/index.js b/packages/block-editor/src/directives/index.js
new file mode 100644
index 00000000000000..36486dad948846
--- /dev/null
+++ b/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 ];
+	}
+);
diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js
index e272043c7ebab5..e86eebb45a079d 100644
--- a/packages/block-editor/src/index.js
+++ b/packages/block-editor/src/index.js
@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import './directives';
 import './hooks';
 export {
 	getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles,
diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js
index 1360aafe3e9d5d..895a8430ebf30d 100644
--- a/packages/block-library/src/separator/edit.js
+++ b/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 }
 		/>
diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js
index 4cd9c0957ec923..40f25204e69ed7 100644
--- a/packages/block-library/src/separator/save.js
+++ b/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 } />;
 }
diff --git a/packages/element/README.md b/packages/element/README.md
index 8e615357e388c5..8bd6e672436330 100755
--- a/packages/element/README.md
+++ b/packages/element/README.md
@@ -295,6 +295,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
 
 Renders a given element into the target DOM node.
diff --git a/packages/element/src/react/directives.js b/packages/element/src/directives.js
similarity index 68%
rename from packages/element/src/react/directives.js
rename to packages/element/src/directives.js
index 9ac5fa001130ff..787fb313a6257b 100644
--- a/packages/element/src/react/directives.js
+++ b/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 ];
-} );
diff --git a/packages/element/src/index.js b/packages/element/src/index.js
index f936229b693574..6aac8484845743 100644
--- a/packages/element/src/index.js
+++ b/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';
diff --git a/packages/element/src/react/create-element.js b/packages/element/src/react/create-element.js
index 8b9923f9cefa21..326a740b30d8d7 100644
--- a/packages/element/src/react/create-element.js
+++ b/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
 			);
 		}
 	}