Adds auxiliary class names for editor styles in the widgets editor (#33388)

Co-authored-by: Andrei Draganescu <[email protected]>
Co-authored-by: Robert Anderson <[email protected]>

Author: 3 people

packages/edit-widgets/src/blocks/widget-area/edit/index.js

@@ -78,7 +78,7 @@ export default function WidgetAreaEdit( {
 							type="postType"
 							id={ `widget-area-${ id }` }
 						>
-							<WidgetAreaInnerBlocks />
+							<WidgetAreaInnerBlocks id={ id } />
 						</EntityProvider>
 					</DisclosureContent>
 				) }

packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js

@@ -18,7 +18,7 @@ import { useRef } from '@wordpress/element';
  */
 import useIsDraggingWithin from './use-is-dragging-within';
 
-export default function WidgetAreaInnerBlocks() {
+export default function WidgetAreaInnerBlocks( { id } ) {
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'root',
 		'postType'
@@ -40,6 +40,7 @@ export default function WidgetAreaInnerBlocks() {
 
 	return (
 		<div
+			data-widget-area-id={ id }
 			className={ classnames(
 				'wp-block-widget-area__inner-blocks block-editor-inner-blocks editor-styles-wrapper',
 				{