Docs: Interactivity API: Add wp_interactivity_state() clarification #64356
Conversation
colorful-tones
requested review from
ajitbohra,
fabiankaegy,
juanmaguitar,
ndiego and
ryanwelcher
as code owners
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
colorful-tones
added
[Type] Developer Documentation
colorful-tones
requested review from
juanmaguitar,
luisherranz and
sirreal
and removed request for
juanmaguitar
| ```js | ||
| const { state } = store( 'myPlugin', { | ||
| console.log( state.ajaxUrl ); | ||
| // Expected output: https://yoursite.com/wp-admin/admin-ajax.php | ||
| } | ||
| ``` |
There was a problem hiding this comment.
This code snippet is not correct because you're executing a console.log inside a JavaScript object.
Perhaps it would be interesting to put here a complete example (although simple) of how to use AJAX with the nonce?
const { state } = store('myPlugin', {
actions: {
*doSomething() {
try {
const formData = new FormData();
formData.append('action', 'do_something');
formData.append('_ajax_nonce', state.nonce);
const data = yield fetch(state.ajaxUrl, {
method: 'POST',
body: formData,
}).then((response) => response.json());
console.log('Server data!', data);
} catch (e) {
// Something went wrong!
}
},
},
});There was a problem hiding this comment.
Yes, totally appreciate the clarity here. I pushed an update to address. However, I prefer the expanded syntax (extra white-space), but I do not want to introduce a wide philsophical debate on ESLint and formatting. So, if this is not ideal formatting then let me know and I'm happy to push a different less-whitespace format. Thanks!
There was a problem hiding this comment.
Yes, in the final file, it should adhere to the WordPress coding standard. If you have your IDE set up with a Prettier extension, it should format it automatically when you format the Markdown file.
It is not formatted with spaces here because I am using the normal Prettier when writing my GH comments, not the WordPress fork.
There was a problem hiding this comment.
Oh, I just realized that file wasn't formatted. Well, let's just merge this pull request and I'll create another one later to format it.
luisherranz
left a comment
luisherranz
left a comment
There was a problem hiding this comment.
LGTM, although I left a couple of suggestions.
We should link to the guide that explains server-side rendering once it is published.
Co-authored-by: Luis Herranz <[email protected]>
Co-authored-by: Luis Herranz <[email protected]>
Co-authored-by: Luis Herranz <[email protected]>
…64356) * Add wp_interactivity_state() clarification * Update code example for wp_interactivity_state * Update docs/reference-guides/interactivity-api/api-reference.md Co-authored-by: Luis Herranz <[email protected]> * Update docs/reference-guides/interactivity-api/api-reference.md Co-authored-by: Luis Herranz <[email protected]> * Update docs/reference-guides/interactivity-api/api-reference.md Co-authored-by: Luis Herranz <[email protected]> --------- Co-authored-by: Luis Herranz <[email protected]>
2 participants
What?
Addresses #63672 by adding the
wp_interactivity_state()under the Server Functions section of the Interactivity API docs.Why?
There is existing mention of the
wp_interactivity_state()under The Store > Setting the store > On the server sideHowever, having its own listing under the Server Functions makes sense, while also allowing it to show up in the "In this article" sidebar (desktop) table of contents. Overall, it is better visibility and having multiple breadcrumbs to find the information is never a bad thing.
How?
Adds a unique reference to the
wp_interactivity_state()function and offers another code example of its possible utility.