From dc532bbcf3e9a82039fbc1980e7f0db4962cc70c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 4 Dec 2024 10:58:05 +0100 Subject: [PATCH] Separator block: Allow divs to be used as separators (#67530) Co-authored-by: youknowriad Co-authored-by: jorgefilipecosta Co-authored-by: Mamaduka Co-authored-by: ntsekouras Co-authored-by: jasmussen Co-authored-by: luminuu --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/separator/block.json | 5 +++ .../block-library/src/separator/deprecated.js | 1 + packages/block-library/src/separator/edit.js | 31 +++++++++++++++++-- packages/block-library/src/separator/save.js | 4 +-- .../block-library/src/separator/test/edit.js | 1 + .../blocks/core__separator-color.json | 3 +- .../blocks/core__separator-custom-color.json | 3 +- .../fixtures/blocks/core__separator.json | 3 +- .../core__separator__deprecated-color-v1.json | 3 +- ...separator__deprecated-custom-color-v1.json | 3 +- 11 files changed, 48 insertions(+), 11 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 34db859f71d1d..29033e278c348 100644 --- 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 index 484627aaa1612..926d978b7e4d5 100644 --- 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/deprecated.js b/packages/block-library/src/separator/deprecated.js index 5174310e186ff..7ce442813e2f7 100644 --- a/packages/block-library/src/separator/deprecated.js +++ b/packages/block-library/src/separator/deprecated.js @@ -49,6 +49,7 @@ const v1 = { style: customColor ? { color: { background: customColor } } : undefined, + tagName: 'hr', }; }, }; diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js index 0d0af336713c1..c4b832c66158d 100644 --- 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
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 ( <> - + )' ), value: 'hr' }, + { label: '
', value: 'div' }, + ] } + value={ tagName } + onChange={ ( value ) => + setAttributes( { tagName: value } ) + } + help={ htmlElementMessages[ tagName ] } + /> + + ; + return ; } diff --git a/packages/block-library/src/separator/test/edit.js b/packages/block-library/src/separator/test/edit.js index a37a0ebbe6dd6..33719b24925cd 100644 --- a/packages/block-library/src/separator/test/edit.js +++ b/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, diff --git a/test/integration/fixtures/blocks/core__separator-color.json b/test/integration/fixtures/blocks/core__separator-color.json index d32cb34f1871e..d66a8b2e1a242 100644 --- a/test/integration/fixtures/blocks/core__separator-color.json +++ b/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": [] } diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.json b/test/integration/fixtures/blocks/core__separator-custom-color.json index 7b0e6c3a7127a..9b126f2b5be6c 100644 --- a/test/integration/fixtures/blocks/core__separator-custom-color.json +++ b/test/integration/fixtures/blocks/core__separator-custom-color.json @@ -8,7 +8,8 @@ "color": { "background": "#5da54c" } - } + }, + "tagName": "hr" }, "innerBlocks": [] } diff --git a/test/integration/fixtures/blocks/core__separator.json b/test/integration/fixtures/blocks/core__separator.json index 3d69d4e24413c..aaeb9bc916f38 100644 --- a/test/integration/fixtures/blocks/core__separator.json +++ b/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": [] } diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json index 6e0ddf0dbef55..29f520c266f59 100644 --- a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json +++ b/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": [] } diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json index bc2de191b19cd..556305633861b 100644 --- a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json +++ b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json @@ -8,7 +8,8 @@ "color": { "background": "#cc1d1d" } - } + }, + "tagName": "hr" }, "innerBlocks": [] }