Interactivity API: Remove data-wp-slot and data-wp-fill (#57854)

* Remove slot and fill directives

* Remove slots tests

* Update changelog

packages/interactivity/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 -   Add the `data-wp-run` directive along with the `useInit` and `useWatch` hooks. ([57805](https://github.com/WordPress/gutenberg/pull/57805))
 
+### Breaking Change
+
+-	Remove `data-wp-slot` and  `data-wp-fill`. ([#57854](https://github.com/WordPress/gutenberg/pull/57854))
+
 ### Bug Fix
 
 -   Fix namespaces when there are nested interactive regions. ([#57029](https://github.com/WordPress/gutenberg/pull/57029))

packages/interactivity/src/directives.js

@@ -16,7 +16,6 @@ import { deepSignal, peek } from 'deepsignal';
 import { createPortal } from './portals';
 import { useWatch, useInit } from './utils';
 import { directive } from './hooks';
-import { SlotProvider, Slot, Fill } from './slots';
 import { navigate } from './router';
 
 const isObject = ( item ) =>
@@ -333,64 +332,6 @@ export default () => {
 		element.props.children = evaluate( entry );
 	} );
 
-	// data-wp-slot
-	directive(
-		'slot',
-		( { directives: { slot }, props: { children }, element } ) => {
-			const { value } = slot.find(
-				( { suffix } ) => suffix === 'default'
-			);
-			const name = typeof value === 'string' ? value : value.name;
-			const position = value.position || 'children';
-
-			if ( position === 'before' ) {
-				return (
-					<>
-						<Slot name={ name } />
-						{ children }
-					</>
-				);
-			}
-			if ( position === 'after' ) {
-				return (
-					<>
-						{ children }
-						<Slot name={ name } />
-					</>
-				);
-			}
-			if ( position === 'replace' ) {
-				return <Slot name={ name }>{ children }</Slot>;
-			}
-			if ( position === 'children' ) {
-				element.props.children = (
-					<Slot name={ name }>{ element.props.children }</Slot>
-				);
-			}
-		},
-		{ priority: 4 }
-	);
-
-	// data-wp-fill
-	directive(
-		'fill',
-		( { directives: { fill }, props: { children }, evaluate } ) => {
-			const entry = fill.find( ( { suffix } ) => suffix === 'default' );
-			const slot = evaluate( entry );
-			return <Fill slot={ slot }>{ children }</Fill>;
-		},
-		{ priority: 4 }
-	);
-
-	// data-wp-slot-provider
-	directive(
-		'slot-provider',
-		( { props: { children } } ) => (
-			<SlotProvider>{ children }</SlotProvider>
-		),
-		{ priority: 4 }
-	);
-
 	// data-wp-run
 	directive( 'run', ( { directives: { run }, evaluate } ) => {
 		run.forEach( ( entry ) => evaluate( entry ) );