Why does wordpress interactivity api need context?

Question

WordPress Interactivity API was officially released with WordPress 6.5. As I've been studying this new feature, I find it intriguing, but I'm somewhat perplexed about certain aspects, particularly regarding the use of context.

My main question is: What's the rationale behind using context in addition to state? Wouldn't using state alone be sufficient?

I understand that context is supposed to be local while state is global. However, it appears that we can access context using namespaces, as demonstrated in this example:

import { getContext } from "@wordpress/interactivity";
 
const otherPluginContext = getContext( "otherPlugin" );

Furthermore, it seems possible to create private states, as shown here:

const { state } = store("myPlugin/private", {
  state: {
      messages: [ "private message" ]
    } 
  },
  { lock: true }
);

// The following call throws an Error!
store( "myPlugin/private", { /* store part */ } );

Given these capabilities, I'm curious about the specific advantages and use cases for context in the WordPress Interactivity API. Could someone clarify the distinctions between state and context, and explain scenarios where using context would be preferable to using state alone?

Emiel Zuurbier · Accepted Answer · 2024-07-10 12:47:00Z

2

Let's say you have three identical blocks on the page which all use the interactivity API. In this scenario they would share the same store, but have different individual properties, for example an ID.

<button
  data-wp-interactive="namespace/storename"
  data-wp-context='{"id":1}'
  data-wp-on--click="actions.toggle"
>Click me</button>

Now let's say we want to update the global state by adding or removing the block that we've clicked. With getContext() we can figure out which of the blocks triggered the action and read the context of that block to use it with the global state.

const { state } = store('namespace/storename', {
  state: {
    clickedBlocks: []
  },
  actions: {
    toggle: () => {
      const context = getContext();

      const index = state.clickedBlocks.findIndex(
        (block) => block === context.id
      );

      if (index === -1) {
        state.clickedBlocks = [...state.clickedBlocks, context.id];
      } else {
        state.clickedBlocks = state.clickedBlocks.toSpliced(index, 1);
      }
    }
  }
});

Without getContext() we wouldn't know which one of the blocks triggered the toggle action.

answered Jul 10, 2024 at 12:47

Emiel Zuurbier

21.2k3 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Byeongin Yoon Over a year ago

Thank you for your answer. However, I believe we can use three separate states instead of just one shared state.

Byeongin Yoon Over a year ago

Aha! Now I understand. By using getContext(), we don't need to know the specific name of the state. This means we don't have to pass the state name to the JavaScript world. The getContext() function automatically finds the local context for us. However, if we use three separate states, we would need to pass the namespace of each state to its corresponding view.js file (in the JavaScript world). Because we are using same block. Same but three duplicated block.

Byeongin Yoon Over a year ago

Would you please check this question also ? stackoverflow.com/questions/78733862/…

Emiel Zuurbier Over a year ago

Please mark the answer as accepted if it answers the question. I'll take a look to your next question

Collectives™ on Stack Overflow

Why does wordpress interactivity api need context?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related