Use `data_wp_context` helper in core blocks and remove `data-wp-interactive` object #58943

SantosGuillamot · 2024-02-12T15:16:27Z

What?

I'm using some of the latest changes in the Interactivity API in the core blocks:

Use data_wp_context helper. Although it doesn't seem possible to use it in the blocks using the tag processor.
Use data-wp-interactive="core/image" instead of the whole object.

Why?

These changes simplify the code and they serve as a potential example.

How?

I just modified the directives of the existing blocks.

Testing Instructions

Add an image -> click the link button -> enable expand on click. Check it works in the frontend.
Add a navigation block with the overlay menu set to always. Check it is interactive in the frontend.
Add a search block -> Select the option button only. Check it is interactive in the frontend.
Add a query block -> Disable force reload option. Check it is interactive in the frontend.
Add a file block -> Enable the show inline embed option. Check the embed is shown in desktop and hidden in mobile.

github-actions · 2024-02-12T15:16:44Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: SantosGuillamot <[email protected]>
Co-authored-by: c4rl0sbr4v0 <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

cbravobernal

Some tests need to be updated, in example:

Tests_Blocks_RenderQueryBlock::test_rendering_query_with_enhanced_pagination

expected -'{"namespace":"core/query"}'
returned  +'core/query'

github-actions · 2024-02-12T19:14:44Z

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ phpunit/blocks/render-query-test.php

cbravobernal

Thanks for the refactor Mario!
We should update the api reference too:
https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/docs/2-api-reference.md#wp-interactive

SantosGuillamot · 2024-02-12T19:23:41Z

We should update the api reference too:

You're right! Should it be part of this PR or should we add a follow-up task?

By the way, are there tests for the new data-wp-interactive format and the data_wp_context function?

cbravobernal · 2024-02-12T23:08:25Z

You're right! Should it be part of this PR or should we add a follow-up task?

A follow-up task.

By the way, are there tests for the new data-wp-interactive format and the data_wp_context function?

Yep.

* trunk: (273 commits) Remove preffered style variations legacy support (#58930) Style theme variations: add property extraction and merge utils (#58803) Migrate `change-detection` to Playwright (#58767) Update Changelog for 17.6.6 Docs: Clarify the status of the wp-block-styles theme support, and its intent (#58915) Use `data_wp_context` helper in core blocks and remove `data-wp-interactive` object (#58943) Try double enter for details block. (#58903) Template revisions API: move from experimental to compat/6.4 (#58920) Editor: Remove inline toolbar preference (#58945) Clean up link control CSS. (#58934) Font Library: Show error message when no fonts found to install (#58914) Block Bindings: lock editing of blocks by default (#58787) Editor: Remove the 'all' rendering mode (#58935) Pagination Numbers: Add `data-wp-key` to pagination numbers if enhanced pagination is enabled (#58189) Close link preview if collapsed selection when creating link (#58896) Fix incorrect useAnchor positioning when switching from virtual to rich text elements (#58900) Upgrade Floating UI packages, fix nested iframe positioning bug (#58932) Site editor: fix start patterns store selector (#58813) Revert "Rich text: pad multiple spaces through en/em replacement (#56341)" (#58792) Documentation: Clarify the performance reference commit and how to pick it (#58927) ...

…active` object (#58943) * Update file block * Update image block * Update navigation block * Update query block * WIP: Update form block * Use boolean instead of string in `$open_by_default` variable * Don't use `data-wp-interactive` object in search block * Remove unnecessary quotes * Adapt query block unit test Co-authored-by: SantosGuillamot <[email protected]> Co-authored-by: c4rl0sbr4v0 <[email protected]>

youknowriad · 2024-02-13T09:21:24Z

I just cherry-picked this PR to the backports/beta1 branch to get it included in the next release: 87c120a

…active` object (#58943) * Update file block * Update image block * Update navigation block * Update query block * WIP: Update form block * Use boolean instead of string in `$open_by_default` variable * Don't use `data-wp-interactive` object in search block * Remove unnecessary quotes * Adapt query block unit test Co-authored-by: SantosGuillamot <[email protected]> Co-authored-by: c4rl0sbr4v0 <[email protected]>

gziolo · 2024-02-16T13:28:29Z

Use data_wp_context helper. Although it doesn't seem possible to use it in the blocks using the tag processor.

What alternatives have you considered to make it compatible with the tag processor? It would be useful to be able to use it with the tag processor, too.

SantosGuillamot · 2024-02-16T13:43:34Z

What alternatives have you considered to make it compatible with the tag processor?

I believe it was discussed at some point to create a method for that. Something like $p->set_context().

youknowriad · 2024-02-19T04:58:43Z

packages/block-library/src/search/index.php

@@ -179,12 +179,20 @@ function render_block_core_search( $attributes ) {
 	if ( $is_expandable_searchfield ) {
 		$aria_label_expanded  = __( 'Submit Search' );
 		$aria_label_collapsed = __( 'Expand search field' );
+		$form_context         = data_wp_context(


What is this function? Are we sure the naming is correct? It's not clear to me what it does based on its name.

From what I understood, it was included as part of the Interactivity API server directive processing: link.

@DAreRodz @c4rl0sbr4v0 Do you know if the name was discussed at some point? Should it be prefixed by wp_interactivity_ as the other functions?

There was a discussion, but rather for using a function to generate a context that naming it:
#53102 (reply in thread)

If it is not clear, we can refactor it to wp_interactivitity_create_data_wp_context. Or wp_interactivity_create_context_directive or wp_interactivity_print_context_directive.

What do you think?

Let's do some pings to join the discussion, sorry for that 😅
@ryanwelcher , @swissspidy , @westonruter , @youknowriad , @gziolo

An inline thread on a closed Gutenberg pull request is really not the best place to discuss naming of WP core functions that are already in core... Can we move this elsewhere with more visibility, like a Trac ticket?

I agree that the name is not the best. Unfortunately when reviewing WordPress/wordpress-develop#5953 this wasn't more obvious to me, so thanks for raising this. It's definitely an outlier as the only unprefixed function in this file.

Something like wp_interactivity_get_context_attribute, wp_interactivity_context_attr would be more indicative of what the function does for sure.

Ticket created: https://core.trac.wordpress.org/ticket/60575#ticket

SantosGuillamot added 8 commits February 12, 2024 15:42

Update file block

d80395e

Update image block

ee0c679

Update navigation block

4707658

Update query block

1178a0b

WIP: Update form block

3d8cecc

Use boolean instead of string in $open_by_default variable

70742f0

Don't use data-wp-interactive object in search block

ab8ac4d

Remove unnecessary quotes

4a95840

SantosGuillamot requested review from luisherranz, DAreRodz and cbravobernal February 12, 2024 15:16

SantosGuillamot requested review from artemiomorales, michalczaplinski, tellthemachines and ajitbohra as code owners February 12, 2024 15:16

SantosGuillamot added [Type] Code Quality Issues or PRs that relate to code quality Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta [Feature] Interactivity API API to add frontend interactivity to blocks. labels Feb 12, 2024

cbravobernal requested changes Feb 12, 2024

View reviewed changes

Adapt query block unit test

86ffce0

cbravobernal approved these changes Feb 12, 2024

View reviewed changes

cbravobernal enabled auto-merge (squash) February 12, 2024 19:21

cbravobernal merged commit 535252e into trunk Feb 12, 2024
57 checks passed

cbravobernal deleted the update/use-latest-interactivity-apis-in-core-blocks branch February 12, 2024 19:46

github-actions bot added this to the Gutenberg 17.8 milestone Feb 12, 2024

youknowriad removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Feb 13, 2024

youknowriad mentioned this pull request Feb 13, 2024

All backports for WordPress Beta1 #58964

Merged

cbravobernal mentioned this pull request Feb 14, 2024

Interactivity API: Fix server side rendering for Search block #59029

Merged

youknowriad reviewed Feb 19, 2024

View reviewed changes

sabernhardt mentioned this pull request May 6, 2024

Search block: Add space between attributes when using "Button only" option #61399

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use `data_wp_context` helper in core blocks and remove `data-wp-interactive` object #58943

Use `data_wp_context` helper in core blocks and remove `data-wp-interactive` object #58943

SantosGuillamot commented Feb 12, 2024

github-actions bot commented Feb 12, 2024 •

edited

Loading

cbravobernal left a comment

github-actions bot commented Feb 12, 2024

cbravobernal left a comment

SantosGuillamot commented Feb 12, 2024

cbravobernal commented Feb 12, 2024

youknowriad commented Feb 13, 2024

gziolo commented Feb 16, 2024

SantosGuillamot commented Feb 16, 2024

youknowriad Feb 19, 2024

SantosGuillamot Feb 19, 2024

cbravobernal Feb 19, 2024

swissspidy Feb 19, 2024

cbravobernal Feb 19, 2024

Use data_wp_context helper in core blocks and remove data-wp-interactive object #58943

Use data_wp_context helper in core blocks and remove data-wp-interactive object #58943

Conversation

SantosGuillamot commented Feb 12, 2024

What?

Why?

How?

Testing Instructions

github-actions bot commented Feb 12, 2024 • edited Loading

cbravobernal left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 12, 2024

cbravobernal left a comment

Choose a reason for hiding this comment

SantosGuillamot commented Feb 12, 2024

cbravobernal commented Feb 12, 2024

youknowriad commented Feb 13, 2024

gziolo commented Feb 16, 2024

SantosGuillamot commented Feb 16, 2024

youknowriad Feb 19, 2024

Choose a reason for hiding this comment

SantosGuillamot Feb 19, 2024

Choose a reason for hiding this comment

cbravobernal Feb 19, 2024

Choose a reason for hiding this comment

swissspidy Feb 19, 2024

Choose a reason for hiding this comment

cbravobernal Feb 19, 2024

Choose a reason for hiding this comment

Use `data_wp_context` helper in core blocks and remove `data-wp-interactive` object #58943

Use `data_wp_context` helper in core blocks and remove `data-wp-interactive` object #58943

github-actions bot commented Feb 12, 2024 •

edited

Loading