diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-effect/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-effect/render.php index 243826aae35046..440edbf5881f68 100644 --- a/packages/e2e-tests/plugins/interactive-blocks/directive-effect/render.php +++ b/packages/e2e-tests/plugins/interactive-blocks/directive-effect/render.php @@ -7,7 +7,7 @@ ?>
-
+
{ - 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; } ); diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-show/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-show/block.json deleted file mode 100644 index ab6801843a7cae..00000000000000 --- a/packages/e2e-tests/plugins/interactive-blocks/directive-show/block.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "apiVersion": 2, - "name": "test/directive-show", - "title": "E2E Interactivity tests - directive show", - "category": "text", - "icon": "heart", - "description": "", - "supports": { - "interactivity": true - }, - "textdomain": "e2e-interactivity", - "viewScript": "directive-show-view", - "render": "file:./render.php" -} diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-show/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-show/render.php deleted file mode 100644 index 5818f3b7c10b63..00000000000000 --- a/packages/e2e-tests/plugins/interactive-blocks/directive-show/render.php +++ /dev/null @@ -1,53 +0,0 @@ - -
- - - - -
-

trueValue children

-
- -
-

falseValue children

-
- -
-
- falseValue -
- -
-
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-show/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-show/view.js deleted file mode 100644 index 9398321b4cfe43..00000000000000 --- a/packages/e2e-tests/plugins/interactive-blocks/directive-show/view.js +++ /dev/null @@ -1,24 +0,0 @@ -( ( { wp } ) => { - /** - * WordPress dependencies - */ - const { store } = wp.interactivity; - - store( { - state: { - trueValue: true, - falseValue: false, - }, - actions: { - toggleTrueValue: ( { state } ) => { - state.trueValue = ! state.trueValue; - }, - toggleFalseValue: ( { state } ) => { - state.falseValue = ! state.falseValue; - }, - toggleContextFalseValue: ( { context } ) => { - context.falseValue = ! context.falseValue; - }, - }, - } ); -} )( window ); diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php index aa0f2e68d3b7cf..a3ebb7a87424e4 100644 --- a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php +++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php @@ -7,14 +7,14 @@ ?>
-
+
This should be shown because it is inside an island.
-
+
This should not be shown because it is inside an island. @@ -23,7 +23,7 @@
-
+
@@ -37,7 +37,7 @@
@@ -51,7 +51,7 @@
-
+
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.js b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.js index 3ccb09203e6bb6..f897368193ea8b 100644 --- a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.js +++ b/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: { diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index 7bf3a829becdb6..5a79ee8f5af75c 100644 --- a/packages/interactivity/CHANGELOG.md +++ b/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 diff --git a/packages/interactivity/src/directives.js b/packages/interactivity/src/directives.js index e32d691c29fed4..a25e83c170e8d0 100644 --- a/packages/interactivity/src/directives.js +++ b/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 = ( - - ); - } - ); - // data-wp-ignore directive( 'ignore', diff --git a/test/e2e/specs/interactivity/directives-show.spec.ts b/test/e2e/specs/interactivity/directives-show.spec.ts deleted file mode 100644 index 7e25332ae143c5..00000000000000 --- a/test/e2e/specs/interactivity/directives-show.spec.ts +++ /dev/null @@ -1,59 +0,0 @@ -/** - * Internal dependencies - */ -import { test, expect } from './fixtures'; - -test.describe( 'data-wp-show', () => { - test.beforeAll( async ( { interactivityUtils: utils } ) => { - await utils.activatePlugins(); - await utils.addPostWithBlock( 'test/directive-show' ); - } ); - test.beforeEach( async ( { interactivityUtils: utils, page } ) => { - await page.goto( utils.getLink( 'test/directive-show' ) ); - } ); - test.afterAll( async ( { interactivityUtils: utils } ) => { - await utils.deactivatePlugins(); - await utils.deleteAllPosts(); - } ); - - test( 'show if callback returns truthy value', async ( { page } ) => { - const el = page.getByTestId( 'show if callback returns truthy value' ); - await expect( el ).toBeVisible(); - } ); - - test( 'do not show if callback returns falsy value', async ( { page } ) => { - const el = page.getByTestId( - 'do not show if callback returns false value' - ); - await expect( el ).toBeHidden(); - } ); - - test( 'hide when toggling truthy value to falsy', async ( { page } ) => { - const el = page.getByTestId( 'show if callback returns truthy value' ); - await expect( el ).toBeVisible(); - await page.getByTestId( 'toggle trueValue' ).click(); - await expect( el ).toBeHidden(); - await page.getByTestId( 'toggle trueValue' ).click(); - await expect( el ).toBeVisible(); - } ); - - test( 'show when toggling false value to truthy', async ( { page } ) => { - const el = page.getByTestId( - 'do not show if callback returns false value' - ); - await expect( el ).toBeHidden(); - await page.getByTestId( 'toggle falseValue' ).click(); - await expect( el ).toBeVisible(); - await page.getByTestId( 'toggle falseValue' ).click(); - await expect( el ).toBeHidden(); - } ); - - test( 'can use context values', async ( { page } ) => { - const el = page.getByTestId( 'can use context values' ); - await expect( el ).toBeHidden(); - await page.getByTestId( 'toggle context false value' ).click(); - await expect( el ).toBeVisible(); - await page.getByTestId( 'toggle context false value' ).click(); - await expect( el ).toBeHidden(); - } ); -} );