Skip to content

Commit

Permalink
Rename data_wp_context_function (#59465)
Browse files Browse the repository at this point in the history
Co-authored-by: c4rl0sbr4v0 <[email protected]>
Co-authored-by: DAreRodz <[email protected]>
Co-authored-by: swissspidy <[email protected]>
  • Loading branch information
4 people authored Feb 29, 2024
1 parent 31b848a commit 7fa03fa
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ function wp_interactivity_config( string $store_namespace, array $config = array
}
}

if ( ! function_exists( 'data_wp_context' ) ) {
if ( ! function_exists( 'wp_interactivity_data_wp_context' ) ) {
/**
* Generates a `data-wp-context` directive attribute by encoding a context
* array.
Expand All @@ -162,7 +162,7 @@ function wp_interactivity_config( string $store_namespace, array $config = array
*
* Example:
*
* <div <?php echo data_wp_context( array( 'isOpen' => true, 'count' => 0 ) ); ?>>
* <div <?php echo wp_interactivity_data_wp_context( array( 'isOpen' => true, 'count' => 0 ) ); ?>>
*
* @since 6.5.0
*
Expand All @@ -171,7 +171,7 @@ function wp_interactivity_config( string $store_namespace, array $config = array
* @return string A complete `data-wp-context` directive with a JSON encoded value representing the context array and
* the store namespace if specified.
*/
function data_wp_context( array $context, string $store_namespace = '' ): string {
function wp_interactivity_data_wp_context( array $context, string $store_namespace = '' ): string {
return 'data-wp-context=\'' .
( $store_namespace ? $store_namespace . '::' : '' ) .
( empty( $context ) ? '{}' : wp_json_encode( $context, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ) ) .
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/navigation/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -552,7 +552,7 @@ private static function get_nav_element_directives( $is_interactive ) {
return '';
}
// When adding to this array be mindful of security concerns.
$nav_element_context = data_wp_context(
$nav_element_context = wp_interactivity_data_wp_context(
array(
'overlayOpenedBy' => array(
'click' => false,
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/search/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ 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(
$form_context = wp_interactivity_data_wp_context(
array(
'isSearchInputVisible' => $open_by_default,
'inputId' => $input_id,
Expand Down
33 changes: 28 additions & 5 deletions packages/interactivity/docs/api-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ Different contexts can be defined at different levels, and deeper levels will me

### `wp-bind`

This directive allows setting HTML attributes on elements based on a boolean or string value. It follows the syntax `data-wp-bind--attribute`.
This directive allows setting HTML attributes on elements based on a boolean or string value. It follows the syntax `data-wp-bind--attribute`.

```html
<li data-wp-context='{ "isMenuOpen": false }'>
Expand Down Expand Up @@ -225,7 +225,7 @@ The boolean value received by the directive is used to toggle (add when `true` o

### `wp-style`

This directive adds or removes inline style to an HTML element, depending on its value. It follows the syntax `data-wp-style--css-property`.
This directive adds or removes inline style to an HTML element, depending on its value. It follows the syntax `data-wp-style--css-property`.

```html
<div data-wp-context='{ "color": "red" }' >
Expand Down Expand Up @@ -299,7 +299,7 @@ The returned value is used to change the inner content of the element: `<div>val

### `wp-on`

This directive runs code on dispatched DOM events like `click` or `keyup`. The syntax is `data-wp-on--[event]` (like `data-wp-on--click` or `data-wp-on--keyup`).
This directive runs code on dispatched DOM events like `click` or `keyup`. The syntax is `data-wp-on--[event]` (like `data-wp-on--click` or `data-wp-on--keyup`).

```php
<button data-wp-on--click="actions.logTime" >
Expand Down Expand Up @@ -387,7 +387,7 @@ The callback passed as the reference receives [the event](https://developer.mozi

It runs a callback **when the node is created and runs it again when the state or context changes**.

You can attach several side effects to the same DOM element by using the syntax `data-wp-watch--[unique-id]`.
You can attach several side effects to the same DOM element by using the syntax `data-wp-watch--[unique-id]`.

The `unique-id` doesn't need to be unique globally. It just needs to be different from the other unique IDs of the `wp-watch` directives of that DOM element.

Expand Down Expand Up @@ -491,7 +491,7 @@ This directive runs the passed callback **during the node's render execution**.

You can use and compose hooks like `useState`, `useWatch`, or `useEffect` inside the passed callback and create your own logic, providing more flexibility than previous directives.

You can attach several `wp-run` to the same DOM element by using the syntax `data-wp-run--[unique-id]`.
You can attach several `wp-run` to the same DOM element by using the syntax `data-wp-run--[unique-id]`.

The `unique-id` doesn't need to be unique globally. It just needs to be different from the other unique IDs of the `wp-run` directives of that DOM element.

Expand Down Expand Up @@ -1092,3 +1092,26 @@ will output:
```html
<div data-wp-text="create-block::state.greeting">Hello, World!</div>
```

### wp_interactivity_data_wp_context

`wp_interactivity_data_wp_context` returns a stringified JSON of a context directive.
This function is the recommended way to print the `data-wp-context` attribute in the server side rendedered markup.

```php

$my_context = array(
'counter' => 0,
'isOpen' => true,
);
<div
echo wp_interactivity_data_wp_context($my_context)
>
</div>
```

will output:

```html
<div data-wp-context='{"counter":0,"isOpen":true}'>
```

0 comments on commit 7fa03fa

Please sign in to comment.