Separator block: Allow divs to be used as separators

WordPress · Dec 3, 2024 · bf467ef · bf467ef
1 parent 1c3cea4
commit bf467ef
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 6 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/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
 

diff --git a/packages/block-library/src/separator/block.json b/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": {

diff --git a/packages/block-library/src/separator/edit.js b/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,

diff --git a/packages/block-library/src/separator/save.js b/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 } ) } />;
 }