Separator block: Allow divs to be used as separators

docs/reference-guides/core-blocks.md

@@ -820,7 +820,7 @@ Create a break between ideas or sections with a horizontal separator. ([Source](
 -	**Name:** core/separator
 -	**Category:** design
 -	**Supports:** align (center, full, wide), anchor, color (background, gradients, ~~enableContrastChecker~~, ~~text~~), interactivity (clientNavigation), spacing (margin)
--	**Attributes:** opacity
+-	**Attributes:** opacity, tagName
 
 ## Shortcode
 

packages/block-library/src/separator/block.json

@@ -11,6 +11,11 @@
 		"opacity": {
 			"type": "string",
 			"default": "alpha-channel"
+		},
+		"tagName": {
+			"type": "string",
+			"enum": [ "hr", "div" ],
+			"default": "hr"
 		}
 	},
 	"supports": {

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

@@ -49,6 +49,7 @@ const v1 = {
 			style: customColor
 				? { color: { background: customColor } }
 				: undefined,
+			tagName: 'hr',
 		};
 	},
 };

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

@@ -6,20 +6,28 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { HorizontalRule } from '@wordpress/components';
+import { HorizontalRule, SelectControl } from '@wordpress/components';
 import {
 	useBlockProps,
 	getColorClassName,
 	__experimentalUseColorProps as useColorProps,
+	InspectorControls,
 } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import useDeprecatedOpacity from './use-deprecated-opacity';
 
+const htmlElementMessages = {
+	div: __(
+		'The <div> element should only be used if the separator is a design element that should not be announced.'
+	),
+};
+
 export default function SeparatorEdit( { attributes, setAttributes } ) {
-	const { backgroundColor, opacity, style } = attributes;
+	const { backgroundColor, opacity, style, tagName } = attributes;
 	const colorProps = useColorProps( attributes );
 	const currentColor = colorProps?.style?.backgroundColor;
 	const hasCustomColor = !! style?.color?.background;
@@ -44,10 +52,27 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 		color: currentColor,
 		backgroundColor: currentColor,
 	};
+	const Wrapper = tagName === 'hr' ? HorizontalRule : tagName;
 
 	return (
 		<>
-			<HorizontalRule
+			<InspectorControls group="advanced">
+				<SelectControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'HTML element' ) }
+					options={ [
+						{ label: __( 'Default (<hr>)' ), value: 'hr' },
+						{ label: '<div>', value: 'div' },
+					] }
+					value={ tagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+					help={ htmlElementMessages[ tagName ] }
+				/>
+			</InspectorControls>
+			<Wrapper
 				{ ...useBlockProps( {
 					className,
 					style: hasCustomColor ? styles : undefined,

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

@@ -13,7 +13,7 @@ import {
 } from '@wordpress/block-editor';
 
 export default function separatorSave( { attributes } ) {
-	const { backgroundColor, style, opacity } = attributes;
+	const { backgroundColor, style, opacity, tagName: Tag } = attributes;
 	const customColor = style?.color?.background;
 	const colorProps = getColorClassesAndStyles( attributes );
 	// The hr support changing color using border-color, since border-color
@@ -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 <Tag { ...useBlockProps.save( { className, style: styles } ) } />;
 }

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

@@ -23,6 +23,7 @@ const defaultAttributes = {
 	opacity: 'alpha-channel',
 	style: {},
 	className: '',
+	tagName: 'hr',
 };
 const defaultProps = {
 	attributes: defaultAttributes,

test/integration/fixtures/blocks/core__separator-color.json

@@ -4,7 +4,8 @@
 		"isValid": true,
 		"attributes": {
 			"opacity": "alpha-channel",
-			"backgroundColor": "accent"
+			"backgroundColor": "accent",
+			"tagName": "hr"
 		},
 		"innerBlocks": []
 	}

test/integration/fixtures/blocks/core__separator-custom-color.json

@@ -8,7 +8,8 @@
 				"color": {
 					"background": "#5da54c"
 				}
-			}
+			},
+			"tagName": "hr"
 		},
 		"innerBlocks": []
 	}

test/integration/fixtures/blocks/core__separator.json

@@ -3,7 +3,8 @@
 		"name": "core/separator",
 		"isValid": true,
 		"attributes": {
-			"opacity": "alpha-channel"
+			"opacity": "alpha-channel",
+			"tagName": "hr"
 		},
 		"innerBlocks": []
 	}

test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json

@@ -4,7 +4,8 @@
 		"isValid": true,
 		"attributes": {
 			"backgroundColor": "accent",
-			"opacity": "css"
+			"opacity": "css",
+			"tagName": "hr"
 		},
 		"innerBlocks": []
 	}

test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json

@@ -8,7 +8,8 @@
 				"color": {
 					"background": "#cc1d1d"
 				}
-			}
+			},
+			"tagName": "hr"
 		},
 		"innerBlocks": []
 	}