Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactivity API: remove the wp-show directive temporarily #53240

Merged
merged 6 commits into from
Aug 2, 2023
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
( ( { 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-fakeshow` directive to test when things are removed from the
// DOM. Replace with `data-wp-show` when it's ready.
directive(
'fakeshow',
( {
Expand All @@ -11,18 +11,9 @@
},
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( fakeshow ) ) return null;
return element;
}
);

Expand Down

This file was deleted.

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@

?>
<div>
<div data-wp-show="state.falseValue">
<div data-wp-fakeshow="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-fakeshow="state.falseValue">
<span data-testid="inside an island">
This should not be shown because it is inside an island.
</span>
Expand All @@ -23,7 +23,7 @@

<div data-wp-interactive>
<div data-wp-ignore>
<div data-wp-show="state.falseValue">
<div data-wp-fakeshow="state.falseValue">
<span
data-testid="inside an inner block of an isolated island"
>
Expand All @@ -37,7 +37,7 @@
<div data-wp-interactive>
<div data-wp-interactive>
<div
data-wp-show="state.falseValue"
data-wp-fakeshow="state.falseValue"
data-testid="island inside another island"
>
<span>
Expand All @@ -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-fakeshow="state.falseValue">
<span
data-testid="island inside inner block of isolated island"
>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,22 @@
( ( { wp } ) => {
const { store } = wp.interactivity;
const { store, directive, createElement } = 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.
directive(
'fakeshow',
( {
directives: {
fakeshow: { default: fakeshow },
},
element,
evaluate,
} ) => {
if ( ! evaluate( fakeshow ) )
element.props.children =
createElement( "template", null, element.props.children );
}
);

store( {
state: {
Expand Down
4 changes: 4 additions & 0 deletions packages/interactivity/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
20 changes: 0 additions & 20 deletions packages/interactivity/src/directives.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
59 changes: 0 additions & 59 deletions test/e2e/specs/interactivity/directives-show.spec.ts

This file was deleted.