Refactor Separator block to use BlockRoot (new name)

WordPress · Mar 17, 2023 · f0ce06c · f0ce06c
1 parent 70ec95d
commit f0ce06c
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 22 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -125,10 +125,6 @@ _Returns_
 
 Undocumented declaration.
 
-### BlockContent
-
-Undocumented declaration.
-
 ### BlockContextProvider
 
 Component which merges passed value with current consumed block context.
@@ -205,6 +201,10 @@ _Returns_
 
 -   `WPComponent`: The component to be rendered.
 
+### BlockRoot
+
+Undocumented declaration.
+
 ### BlockSelectionClearer
 
 Undocumented declaration.

diff --git a/...tor/src/components/block-content/index.js → ...editor/src/components/block-root/index.js b/...tor/src/components/block-content/index.js → ...editor/src/components/block-root/index.js
@@ -8,32 +8,33 @@ import { EnvironmentContext, forwardRef } from '@wordpress/element';
  */
 import { useBlockProps } from '../block-list/use-block-props';
 
-const BlockContentEdit = forwardRef(
+const BlockRootEdit = forwardRef(
 	( { as: Component = 'div', className, style, ...props }, ref ) => {
 		const blockProps = useBlockProps( { ref, className, style } );
 		return <Component { ...props } { ...blockProps } />;
 	}
 );
 
-const BlockContentSave = ( {
+const BlockRootSave = ( {
 	as: Component = 'div',
 	className,
 	style,
 	...props
 } ) => {
 	const blockProps = useBlockProps.save( { className, style } );
+
 	return <Component { ...props } { ...blockProps } />;
 };
 
-export const BlockContent = forwardRef( ( props, ref ) => {
+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' ? (
-					<BlockContentSave { ...props } />
+					<BlockRootSave { ...props } />
 				) : (
-					<BlockContentEdit ref={ ref } { ...props } />
+					<BlockRootEdit ref={ ref } { ...props } />
 				)
 			}
 		</EnvironmentContext.Consumer>

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -96,7 +96,6 @@ export { default as __experimentalSpacingSizesControl } from './spacing-sizes-co
 /*
  * Content Related Components
  */
-export { BlockContent } from './block-content';
 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';
@@ -106,6 +105,7 @@ 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-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { HorizontalRule } from '@wordpress/components';
 import {
-	useBlockProps,
+	BlockRoot,
 	getColorClassName,
 	__experimentalUseColorProps as useColorProps,
 } from '@wordpress/block-editor';
@@ -46,13 +46,10 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 	};
 
 	return (
-		<>
-			<HorizontalRule
-				{ ...useBlockProps( {
-					className,
-					style: hasCustomColor ? styles : undefined,
-				} ) }
-			/>
-		</>
+		<BlockRoot
+			as={ HorizontalRule }
+			className={ className }
+			style={ hasCustomColor ? styles : undefined }
+		/>
 	);
 }
diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js
@@ -7,8 +7,8 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
+	BlockRoot,
 	getColorClassName,
-	useBlockProps,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
 
@@ -37,5 +37,5 @@ export default function separatorSave( { attributes } ) {
 		backgroundColor: colorProps?.style?.backgroundColor,
 		color: colorClass ? undefined : customColor,
 	};
-	return <hr { ...useBlockProps.save( { className, style: styles } ) } />;
+	return <BlockRoot as="hr" className={ className } style={ styles } />;
 }
diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js
@@ -4,6 +4,7 @@
 import {
 	Component,
 	cloneElement,
+	EnvironmentContext,
 	renderToString,
 	RawHTML,
 } from '@wordpress/element';
@@ -190,7 +191,9 @@ export function getSaveContent( blockTypeOrName, attributes, innerBlocks ) {
 	const blockType = normalizeBlockType( blockTypeOrName );
 
 	return renderToString(
-		getSaveElement( blockType, attributes, innerBlocks )
+		<EnvironmentContext.Provider value="save">
+			{ getSaveElement( blockType, attributes, innerBlocks ) }
+		</EnvironmentContext.Provider>
 	);
 }