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.

Sign up for GitHub

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: Allow "default" suffix values #65815

Merged
merged 11 commits into from
Oct 7, 2024
Merged

Interactivity API: Allow "default" suffix values #65815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b263f35
Allow "default" suffix to be used
sirreal Oct 2, 2024
33e2889
Improve vdom types
sirreal Oct 2, 2024
b4b1dda
Use null for default suffix
sirreal Oct 2, 2024
432a5be
Add test
sirreal Oct 2, 2024
c93d295
Add changelog entry
sirreal Oct 2, 2024
ea44a2d
Fix test
sirreal Oct 2, 2024
377da78
Update docs
sirreal Oct 2, 2024
0ee10ba
Fix another test
sirreal Oct 2, 2024
6ca237e
Fix another test
sirreal Oct 2, 2024
b0ff889
Fix the remaining tests
sirreal Oct 2, 2024
8759277
Merge remote-tracking branch 'origin/trunk' into fix/interactivity-de…
michalczaplinski Oct 7, 2024
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
20 changes: 16 additions & 4 deletions packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,17 +59,17 @@ class="foo bar baz"
data-testid="can toggle class when class attribute is missing"
></div>

<div data-wp-context='{ "falseValue": false }'>
<div data-wp-context='{ "value": false }'>
<div
class="foo"
data-wp-class--foo="context.falseValue"
data-wp-class--foo="context.value"
data-testid="can use context values"
></div>
<button
data-wp-on--click="actions.toggleContextFalseValue"
data-wp-on--click="actions.toggleContextValue"
data-testid="toggle context false value"
>
Toggle context falseValue
Toggle context value
</button>
</div>

Expand All @@ -83,4 +83,16 @@ class="foo"
data-testid="can use classes with several dashes"
></div>

<div data-wp-context='{ "value": false }'>
<div
data-wp-class--default="context.value"
data-testid="class name default"
></div>
<button
data-wp-on--click="actions.toggleContextValue"
data-testid="toggle class name default"
>
Toggle context val
</button>
</div>
</div>
4 changes: 2 additions & 2 deletions packages/e2e-tests/plugins/interactive-blocks/directive-class/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ const { state } = store( 'directive-class', {
toggleFalseValue: () => {
state.falseValue = ! state.falseValue;
},
toggleContextFalseValue: () => {
toggleContextValue: () => {
const context = getContext();
context.falseValue = ! context.falseValue;
context.value = ! context.value;
},
},
} );
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-init/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const { directive } = privateApis(
directive(
'show-mock',
( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
const entry = showMock.find( ( { suffix } ) => suffix === null );
if ( ! evaluate( entry ) ) {
return null;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-on-document/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const { directive } = privateApis(
directive(
'show-mock',
( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
const entry = showMock.find( ( { suffix } ) => suffix === null );
if ( ! evaluate( entry ) ) {
return null;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const { directive } = privateApis(
directive(
'show-mock',
( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
const entry = showMock.find( ( { suffix } ) => suffix === null );
if ( ! evaluate( entry ) ) {
return null;
}
Expand Down
4 changes: 1 addition & 3 deletions packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,7 @@ directive(
element,
evaluate,
} ) => {
const entry = showChildren.find(
( { suffix } ) => suffix === 'default'
);
const entry = showChildren.find( ( { suffix } ) => suffix === null );
return evaluate( entry )
? element
: cloneElement( element, { children: null } );
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/directive-watch/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const { directive } = privateApis(
directive(
'show-mock',
( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
const entry = showMock.find( ( { suffix } ) => suffix === null );
if ( ! evaluate( entry ) ) {
return null;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const { directive, h } = privateApis(
directive(
'show-mock',
( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
const entry = showMock.find( ( { suffix } ) => suffix === null );

if ( ! evaluate( entry ) ) {
element.props.children = h(
Expand Down
1 change: 1 addition & 0 deletions packages/interactivity/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

### Bug Fixes

- Fix an issue where "default" could not be used as a directive suffix ([#65815](https://github.com/WordPress/gutenberg/pull/65815)).
- Correctly handle lazily added, deeply nested properties with `deepMerge()` ([#65465](https://github.com/WordPress/gutenberg/pull/65465)).

## 6.9.0 (2024-10-03)
Expand Down
Loading
Loading