The annotations package breaks drop targets when dragging blocks

[herregroen]

Describe the bug
When you load the annotations package the is-drop-target class introduced in #19514 doesn't show up as the filter in https://github.com/WordPress/gutenberg/blob/master/packages/annotations/src/block/index.js doesn't add additional classes but replaces them.

To reproduce
Steps to reproduce the behavior:

1. Enqueue wp-annotations
2. Drag a block
3. You don't see any drop-targets and dragging blocks becomes much more difficult as the space these create is required.

Expected behavior
I expected the drop targets both to visually aid me as well as to provide sufficient space between elements to make dragging and dropping a user-friendly experience.

Additional context

• The annotations package is being used by Yoast SEO and thus will be loaded on a large number of sites.

[aduth]

Confirmed. It can also be reproduced in the default development environment by activating the "Gutenberg Test Plugin, Plugins API" plugin.

Suggested fix: Annotations implementation should merge with incoming className prop.

[aduth]

See #21184 for fix.

[aduth]

cc @jorgefilipecosta This may be a regression slated to land for 5.4.

As worst-case scenario in case it's too late for the release, a possible workaround would be to create filter(s) on editor.BlockListBlock which restores the is-drop-target class name.

Untested code, but roughly:

addFilter(
	'editor.BlockListBlock',
	'my-plugin/store-block-class-name',
	function( OriginalComponent ) {
		return function( props ) {
			if ( props.className ) {
				props = Object.assign(
					{ 'data-original-class-name': props.className },
					props
				);
			}

			return wp.element.createElement(
				OriginalComponent,
				props
			);
		}
	},
	5
);

addFilter(
	'editor.BlockListBlock',
	'my-plugin/restore-block-class-name',
	function( OriginalComponent ) {
		return function( props ) {
			return wp.element.createElement(
				OriginalComponent,
				Object.assign( {}, props, {
					className: [
						props.className,
						props[ 'data-original-class-name' ],
					].filter( Boolean ).join( ' ' ),
				} )
			);
		}
	},
	20
);