Fix: Improve warning message and add spacing in HTMLElementControl (#70002)

* Fix: Improve warning message and add bottom margin in HTMLElementControl

* Simplify warning message

Co-authored-by: Sukhendu2002 <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: Mamaduka <[email protected]>

Author: 4 people

packages/block-editor/src/components/block-inspector/style.scss

@@ -11,7 +11,8 @@
 	}
 
 	.components-base-control,
-	.components-radio-control {
+	.components-radio-control,
+	.block-editor-html-element-control {
 		&:where(:not(:last-child)) {
 			margin-bottom: $grid-unit-20;
 		}
@@ -20,7 +21,8 @@
 	// Reset unwanted margin-bottom from being applied to BaseControls within certain components.
 	.components-focal-point-picker-control,
 	.components-query-controls,
-	.components-range-control {
+	.components-range-control,
+	.block-editor-html-element-control {
 		.components-base-control {
 			margin-bottom: 0;
 		}

packages/block-editor/src/components/html-element-control/index.js

@@ -86,7 +86,7 @@ export default function HTMLElementControl( {
 	} );
 
 	return (
-		<VStack spacing={ 2 }>
+		<VStack spacing={ 2 } className="block-editor-html-element-control">
 			<SelectControl
 				__nextHasNoMarginBottom
 				__next40pxDefaultSize
@@ -100,7 +100,7 @@ export default function HTMLElementControl( {
 			{ tagName === 'main' && hasMainElementElsewhere && (
 				<Notice status="warning" isDismissible={ false }>
 					{ __(
-						'Multiple <main> elements detected. This is not valid HTML and may cause accessibility issues. Please change this HTML element.'
+						'Multiple <main> elements detected. The duplicate may be in your content or template. This is not valid HTML and may cause accessibility issues. Please change this HTML element.'
 					) }
 				</Notice>
 			) }