Overload createElement from React

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

@@ -80,7 +80,6 @@ export {
 	isValueSpacingPreset,
 } from './spacing-sizes-control/utils';
 // Content Related Components.
-export { BlockContent } from './block-content';
 export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';
 export { default as BlockToolbar } from './block-toolbar';
@@ -90,6 +89,7 @@ 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-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,7 @@
 import {
 	Component,
 	cloneElement,
+	createElement,
 	EnvironmentContext,
 	renderToString,
 	RawHTML,
@@ -191,9 +192,11 @@ export function getSaveContent( blockTypeOrName, attributes, innerBlocks ) {
 	const blockType = normalizeBlockType( blockTypeOrName );
 
 	return renderToString(
-		<EnvironmentContext.Provider value="save">
-			{ getSaveElement( blockType, attributes, innerBlocks ) }
-		</EnvironmentContext.Provider>
+		createElement(
+			EnvironmentContext.Provider,
+			{ value: 'save' },
+			getSaveElement( blockType, attributes, innerBlocks )
+		)
 	);
 }
 

packages/element/README.md

@@ -84,63 +84,39 @@ This assumes that you will import the `createElement` function in any file where
 
 ### Children
 
-Object that provides utilities for dealing with React children.
-
-### cloneElement
-
-Creates a copy of an element with extended props.
+_Related_
 
-_Parameters_
+-   <https://reactjs.org/docs/react-api.html#children>
 
--   _element_ `WPElement`: Element
--   _props_ `?Object`: Props to apply to cloned element
+### cloneElement
 
-_Returns_
+_Related_
 
--   `WPElement`: Cloned element.
+-   <https://reactjs.org/docs/react-api.html#cloneelement>
 
 ### Component
 
-A base class to create WordPress Components (Refs, state and lifecycle hooks)
-
-### concatChildren
+_Related_
 
-Concatenate two or more React children objects.
+-   <https://reactjs.org/docs/react-api.html#component>
 
-_Parameters_
+### concatChildren
 
--   _childrenArguments_ `...?Object`: Array of children arguments (array of arrays/strings/objects) to concatenate.
+Object containing a React synthetic event.
 
-_Returns_
+_Type Definition_
 
--   `Array`: The concatenated value.
+-   _WPSyntheticEvent_ `import('react').SyntheticEvent`
 
 ### createContext
 
-Creates a context object containing two components: a provider and consumer.
-
-_Parameters_
-
--   _defaultValue_ `Object`: A default data stored in the context.
-
-_Returns_
+_Related_
 
--   `Object`: Context object.
+-   <https://reactjs.org/docs/react-api.html#createcontext>
 
 ### createElement
 
-Returns a new element of given type. Type can be either a string tag name or
-another function which itself returns an element.
-
-_Parameters_
-
--   _type_ `?(string|Function)`: Tag name or element creator
--   _props_ `Object`: Element properties, either attribute set to apply to DOM node or values to pass through to element creator
--   _children_ `...WPElement`: Descendant elements
-
-_Returns_
-
--   `WPElement`: Element.
+Undocumented declaration.
 
 ### createInterpolateElement
 
@@ -189,13 +165,9 @@ _Parameters_
 
 ### createRef
 
-Returns an object tracking a reference to a rendered element via its
-`current` property as either a DOMElement or Element, dependent upon the
-type of element rendered with the ref attribute.
-
-_Returns_
+_Related_
 
--   `Object`: Ref object.
+-   <https://reactjs.org/docs/react-api.html#createref>
 
 ### createRoot
 
@@ -227,22 +199,15 @@ _Parameters_
 
 ### forwardRef
 
-Component enhancer used to enable passing a ref to its wrapped component.
-Pass a function argument which receives `props` and `ref` as its arguments,
-returning an element using the forwarded ref. The return value is a new
-component which forwards its ref.
-
-_Parameters_
-
--   _forwarder_ `Function`: Function passed `props` and `ref`, expected to return an element.
-
-_Returns_
+_Related_
 
--   `WPComponent`: Enhanced component.
+-   <https://reactjs.org/docs/react-api.html#forwardref>
 
 ### Fragment
 
-A component which renders its children without any wrapping element.
+_Related_
+
+-   <https://reactjs.org/docs/react-api.html#fragment>
 
 ### hydrate
 
@@ -275,15 +240,9 @@ _Returns_
 
 ### isValidElement
 
-Checks if an object is a valid WPElement.
-
-_Parameters_
-
--   _objectToCheck_ `Object`: The object to be checked.
-
-_Returns_
+_Related_
 
--   `boolean`: true if objectToTest is a valid WPElement and false otherwise.
+-   <https://reactjs.org/docs/react-api.html#isvalidelement>
 
 ### lazy
 
@@ -367,7 +326,9 @@ _Related_
 
 ### StrictMode
 
-Component that activates additional checks and warnings for its descendants.
+_Related_
+
+-   <https://reactjs.org/docs/react-api.html#strictmode>
 
 ### Suspense