Interactivity API: remove the wp-show directive (#53240)

* Remove wp-show

* Remove wp-show e2e tests

* Replace wp-show with wp-fakeshow in the rest of the e2e tests

* Update changelog

* Update changelog with PR number

* Change fakeshow with show-mock

packages/e2e-tests/plugins/interactive-blocks/directive-effect/render.php

@@ -7,7 +7,7 @@
 
 ?>
 <div data-wp-interactive>
-	<div data-wp-fakeshow="state.isOpen">
+	<div data-wp-show-mock="state.isOpen">
 		<input
 			data-testid="input"
 			data-wp-effect="effects.elementAddedToTheDOM"

packages/e2e-tests/plugins/interactive-blocks/directive-effect/view.js

@@ -1,28 +1,19 @@
 ( ( { wp } ) => {
-	const { store, directive, useContext, useMemo } = wp.interactivity;
+	const { store, directive } = wp.interactivity;
 
-	// Fake `data-wp-fakeshow` directive to test when things are removed from the DOM.
-	// Replace with `data-wp-show` when it's ready.
+	// Fake `data-wp-show-mock` directive to test when things are removed from the
+	// DOM.  Replace with `data-wp-show` when it's ready.
 	directive(
-		'fakeshow',
+		'show-mock',
 		( {
 			directives: {
-				fakeshow: { default: fakeshow },
+				"show-mock": { default: showMock },
 			},
 			element,
 			evaluate,
-			context,
 		} ) => {
-			const contextValue = useContext( context );
-			const children = useMemo(
-				() =>
-					element.type === 'template'
-						? element.props.templateChildren
-						: element,
-				[]
-			);
-			if ( ! evaluate( fakeshow, { context: contextValue } ) ) return null;
-			return children;
+			if ( ! evaluate( showMock ) ) return null;
+			return element;
 		}
 	);
 

packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php

@@ -7,14 +7,14 @@
 
 ?>
 <div>
-	<div data-wp-show="state.falseValue">
+	<div data-wp-show-mock="state.falseValue">
 		<span data-testid="not inside an island">
 			This should be shown because it is inside an island.
 		</span>
 	</div>
 
 	<div data-wp-interactive>
-		<div data-wp-show="state.falseValue">
+		<div data-wp-show-mock="state.falseValue">
 			<span data-testid="inside an island">
 				This should not be shown because it is inside an island.
 			</span>
@@ -23,7 +23,7 @@
 
 	<div data-wp-interactive>
 		<div data-wp-ignore>
-			<div data-wp-show="state.falseValue">
+			<div data-wp-show-mock="state.falseValue">
 				<span
 					data-testid="inside an inner block of an isolated island"
 				>
@@ -37,7 +37,7 @@
 	<div data-wp-interactive>
 		<div data-wp-interactive>
 			<div
-				data-wp-show="state.falseValue"
+				data-wp-show-mock="state.falseValue"
 				data-testid="island inside another island"
 			>
 				<span>
@@ -51,7 +51,7 @@
 	<div data-wp-interactive>
 		<div>
 			<div data-wp-interactive data-wp-ignore>
-				<div data-wp-show="state.falseValue">
+				<div data-wp-show-mock="state.falseValue">
 					<span
 						data-testid="island inside inner block of isolated island"
 					>

packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.js

@@ -1,5 +1,22 @@
 ( ( { wp } ) => {
-	const { store } = wp.interactivity;
+	const { store, directive, createElement } = wp.interactivity;
+
+	// Fake `data-wp-show-mock` directive to test when things are removed from the
+	// DOM.  Replace with `data-wp-show` when it's ready.
+	directive(
+		'show-mock',
+		( {
+			directives: {
+				"show-mock": { default: showMock },
+			},
+			element,
+			evaluate,
+		} ) => {
+			if ( ! evaluate( showMock ) )
+				element.props.children =
+					createElement( "template", null, element.props.children );
+		}
+	);
 
 	store( {
 		state: {

packages/interactivity/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Change
+
+-   Remove the `wp-show` directive until we figure out its final implementation. ([#53240](https://github.com/WordPress/gutenberg/pull/53240))
+
 ## 1.2.0 (2023-07-20)
 
 ### New Features

packages/interactivity/src/directives.js

@@ -244,26 +244,6 @@ export default () => {
 		}
 	);
 
-	// data-wp-show
-	directive(
-		'show',
-		( {
-			directives: {
-				show: { default: show },
-			},
-			element,
-			evaluate,
-			context,
-		} ) => {
-			const contextValue = useContext( context );
-
-			if ( ! evaluate( show, { context: contextValue } ) )
-				element.props.children = (
-					<template>{ element.props.children }</template>
-				);
-		}
-	);
-
 	// data-wp-ignore
 	directive(
 		'ignore',