API リファレンス

<div
  data-wp-interactive="myPlugin"
  data-wp-context='{ "isOpen": false }'
  data-wp-watch="callbacks.logIsOpen"
>
  <button
    data-wp-on--click="actions.toggle"
    data-wp-bind--aria-expanded="context.isOpen"
    aria-controls="p-1"
  >
    Toggle
  </button>

  <p id="p-1" data-wp-bind--hidden="!context.isOpen">
    This element is now visible!
  </p>
</div>

<!-- この要素とその子をインタラクティブにして、名前空間を設定する -->
<div
  data-wp-interactive="myPlugin"
  data-wp-context='{ "myColor" : "red", "myBgColor": "yellow" }'
>
  <p>I'm interactive now, <span data-wp-style--background-color="context.myBgColor">and I can use directives!</span></p>
  <div>
    <p>I'm also interactive, <span data-wp-style--color="context.myColor">and I can also use directives!</span></p>
  </div>
</div>

<!-- これも有効 -->
<div
  data-wp-interactive='{ "namespace": "myPlugin" }'
  data-wp-context='{ "myColor" : "red", "myBgColor": "yellow" }'
>
  <p>I'm interactive now, <span data-wp-style--background-color="context.myBgColor">and I can use directives!</span></p>
  <div>
    <p>I'm also interactive, <span data-wp-style--color="context.myColor">and I can also use directives!</span></p>
  </div>
</div>

// render.php
<div data-wp-context='{ "post": { "id": <?php echo $post->ID; ?> } }' >
  <button data-wp-on--click="actions.logId" >
    Click Me!
  </button>
</div>

// view.js
store( "myPlugin", {
  actions: {
    logId: () => {
      const { post } = getContext();
      console.log( post.id );
    },
  },
} );

<div data-wp-context='{ "foo": "bar" }'>
  <span data-wp-text="context.foo"><!-- 出力: "bar" --></span>

  <div data-wp-context='{ "bar": "baz" }'>
    <span data-wp-text="context.foo"><!-- 出力: "bar" --></span>

    <div data-wp-context='{ "foo": "bob" }'>
      <span data-wp-text="context.foo"><!-- 出力: "bob" --></span>
    </div>

  </div>
</div>

<li data-wp-context='{ "isMenuOpen": false }'>
  <button
    data-wp-on--click="actions.toggleMenu"
    data-wp-bind--aria-expanded="context.isMenuOpen"
  >
    Toggle
  </button>
  <div data-wp-bind--hidden="!context.isMenuOpen">
    <span>Title</span>
    <ul>
      SUBMENU ITEMS
    </ul>
  </div>
</li>

// view.js
store( "myPlugin", {
  actions: {
    toggleMenu: () => {
      const context = getContext();
      context.isMenuOpen = !context.isMenuOpen;
    },
  },
} );

<div>
  <li
    data-wp-context='{ "isSelected": false }'
    data-wp-on--click="actions.toggleSelection"
    data-wp-class--selected="context.isSelected"
  >
    Option 1
  </li>
  <li
    data-wp-context='{ "isSelected": false }'
    data-wp-on--click="actions.toggleSelection"
    data-wp-class--selected="context.isSelected"
  >
    Option 2
  </li>
</div>

// view.js
store( "myPlugin", {
  actions: {
    toggleSelection: () => {
      const context = getContext();
      context.isSelected = !context.isSelected
    }
  }
} );

<!-- 推奨 -->
<div data-wp-class--is-dark="context.isDarkMode">
  <!-- ... -->
</div>

<!-- 非推奨 -->
<div data-wp-class--isDark="context.isDarkMode">
  <!-- ... -->
</div>

/* 推奨 */
.is-dark {
  /* ... */
}

/* 非推奨 */
.isDark {
  /* ... */
}

<div data-wp-context='{ "color": "red" }' >
  <button data-wp-on--click="actions.toggleContextColor">Toggle Color Text</button>
  <p data-wp-style--color="context.color">Hello World!</p>
</div>
>

store( "myPlugin", {
// view.js  
  actions: {
    toggleContextColor: () => {
      const context = getContext();
      context.color = context.color === 'red' ? 'blue' : 'red';
    },
  },
} );

<div data-wp-context='{ "text": "Text 1" }'>
  <span data-wp-text="context.text"></span>
  <button data-wp-on--click="actions.toggleContextText">
    Toggle Context Text
  </button>
</div>

// view.js
store( "myPlugin", {
  actions: {
    toggleContextText: () => {
      const context = getContext();
      context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1';
    },
  },
} );

<button data-wp-on--click="actions.logTime" >
  Click Me!
</button>

// view.js
store( "myPlugin", {
  actions: {
    logTime: ( event ) => {
      console.log( new Date() )
    },
  },
} );

<div data-wp-on-window--resize="callbacks.logWidth"></div>

// view.js
store( "myPlugin", {
	callbacks: {
		logWidth() {
			console.log( 'Window width: ', window.innerWidth );
		},
	},
} );

<div data-wp-on-document--keydown="callbacks.logKeydown"></div>

// view.js
store( "myPlugin", {
	callbacks: {
		logKeydown(event) {
			console.log( 'Key pressed: ', event.key );
		},
  },
} );

<div
  data-wp-context='{ "counter": 0 }'
  data-wp-watch="callbacks.logCounter"
>
  <p>Counter: <span data-wp-text="context.counter"></span></p>
  <button data-wp-on--click="actions.increaseCounter">+</button>
  <button data-wp-on--click="actions.decreaseCounter">-</button>
</div>

// view.js
store( "myPlugin", {
  actions: {
    increaseCounter: () => {
      const context = getContext();
      context.counter++;
    },
    decreaseCounter: () => {
      const context = getContext();
      context.counter--;
    },
  },
  callbacks: {
    logCounter: () => {
      const { counter } = getContext();
      console.log("Counter is " + counter + " at " + new Date() );
    },
  },
} );

<div data-wp-init="callbacks.logTimeInit">
  <p>Hi!</p>
</div>

<form
  data-wp-init--log="callbacks.logTimeInit"
  data-wp-init--focus="callbacks.focusFirstElement"
>
  <input type="text">
</form>

// view.js
import { store, getElement } from '@wordpress/interactivity';

store( "myPlugin", {
  callbacks: {
    logTimeInit: () => console.log( `Init at ` + new Date() ),
    focusFirstElement: () => {
      const { ref } = getElement();
      ref.querySelector( 'input:first-child' ).focus(),
    },
  },
} );

<div data-wp-run="callbacks.logInView">
  <p>Hi!</p>
</div>

// view.js
import { getElement, store, useState, useEffect } from '@wordpress/interactivity';

// `data-wp-init` や `data-wp-watch` と異なり、`data-wp-run` コールバック内では、
// 任意のフックを使用できます。
const useInView = () => {
  const [ inView, setInView ] = useState( false );
  useEffect( () => {
    const { ref } = getElement();
    const observer = new IntersectionObserver( ( [ entry ] ) => {
      setInView( entry.isIntersecting );
    } );
    observer.observe( ref );
    return () => ref && observer.unobserve( ref );
  }, []);
  return inView;
};

store( 'myPlugin', {
  callbacks: {
    logInView: () => {
      const isInView = useInView();
      useEffect( () => {
        if ( isInView ) {
          console.log( 'Inside' );
        } else {
          console.log( 'Outside' );
        }
      });
    }
  },
} );

<ul>
  <li data-wp-key="unique-id-1">Item 1</li>
  <li data-wp-key="unique-id-2">Item 2</li>
</ul>

<div>
  <a data-wp-key="previous-page" ...>Previous page</a>
  <a data-wp-key="next-page" ...>Next page</a>
</div>

<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
  <template data-wp-each="context.list" >
    <li data-wp-text="context.item"></li>
  </template>
</ul>

<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
  <li data-wp-text="context.item">hello</li>
  <li data-wp-text="context.item">hola</li>
  <li data-wp-text="context.item">olá</li>
</ul>

<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
  <template data-wp-each--greeting="context.list" >
    <li data-wp-text="context.greeting"></li>
  </template>
</ul>

<ul data-wp-context='{
  "list": [
    { "id": "en", "value": "hello" },
    { "id": "es", "value": "hola" },
    { "id": "pt", "value": "olá" }
  ]
}'>
  <template
    data-wp-each--greeting="context.list"
    data-wp-each-key="context.greeting.id"
  >
    <li data-wp-text="context.greeting.value"></li>
  </template>
</ul>

<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
  <template data-wp-each--greeting="context.list" >
    <li data-wp-text="context.greeting"></li>
  </template>
  <li data-wp-each-child>hello</li>
  <li data-wp-each-child>hola</li>
  <li data-wp-each-child>olá</li>
</ul>

// view.js
const { state } = store( "myPlugin", {
  state: {
    currentVideo: '',
    get isPlaying() {
      return state.currentVideo !== '';
    }
  },
} );

<div data-wp-bind--hidden="!state.isPlaying" ... >
  <iframe ...></iframe>
</div>

<div data-wp-interactive="myPlugin">
  <div data-wp-bind--hidden="otherPlugin::!state.isPlaying" ... >
		<iframe ...></iframe>
	</div>
</div>

<div data-wp-context='{ "someText": "Hello World!" }'>

  <!-- グローバルステートへアクセス -->
  <span data-wp-text="state.someText"></span>

  <!-- ローカルステート (コンテキスト) へアクセス -->
  <span data-wp-text="context.someText"></span>

</div>

const { state } = store( "myPlugin", {
  state: {
    someText: "Hello Universe!"
  },
  actions: {
    someAction: () => {
      state.someText // アクセス、変更先はグローバルステート - "Hello Universe!"

      const context = getContext();
      context.someText // アクセス、変更先はローカルステート (コンテキスト) - "Hello World!"
    },
  },
} )

// TypeScript
const { state, actions } = store("myPlugin", {
  actions: {
    selectItem: ( id ) => {
      const context = getContext();
      // ここで `id` はオプションです。したがってこのアクションはディレクティブでも使用できます。
      state.selected = id || context.id;
    },
    otherAction: () => {
      // しかし、他のアクションからも呼び出せます。
      actions.selectItem(123); // これは動作し、型も正しい
    }
  }
});

<div data-wp-context='{ "isOpen": true }'>
  <button data-wp-on--click="actions.someAction">Click</button>
</div>

<div data-wp-context='{ "isOpen": false }'>
  <button data-wp-on--click="actions.someAction">Click</button>
</div>

const { state } = store("myPlugin", {
  state: {
    get isOpen() {
      return getContext().isOpen;
    },
  },
  actions: {
    someAction: function* () {
      state.isOpen; // このコンテキストは正しい。なぜなら同期のため。
      yield longDelay(); // ジェネレーターを利用して、呼び出し側はこの関数にいつ戻ったかを制御する。
      state.isOpen; // このコンテキストは正しい。なぜなら関数を再開する前に適切なスコープを復元したため。
    },
  },
});

// 注意: WordPress 6.6では、この splitTask 関数は @wordpress/interactivity でエクスポートされます。
function splitTask() {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

store("myPlugin", {
  actions: {
    handleClick: function* (event) {
      event.preventDefault();
      yield splitTask();
      doTheWork();
    },
  },
});

// view.js
const { state } = store( "myPlugin", {
  state: {
    amount: 34,
    defaultCurrency: 'EUR',
    currencyExchange: {
      USD: 1.1,
      GBP: 0.85,
    },
    get amountInUSD() {
      return state.currencyExchange[ 'USD' ] * state.amount;
    },
    get amountInGBP() {
      return state.currencyExchange[ 'GBP' ] * state.amount;
    },
  },
} );

const { state, actions } = store( "myPlugin", {
  // ...
} );

store( "myPlugin", {
  state: {
    someValue: 1,
  }
} );

const { state } = store( "myPlugin", {
  actions: {
    someAction() {
      state.someValue // = 1
    }
  }
} );

const { state } = store( "myPlugin", {
  state: {
    get someDerivedValue() {
      const context = getContext();
      const { ref } = getElement();
      // ...
    }
  },
  actions: {
    someAction() {
      const context = getContext();
      const { ref } = getElement();
      // ...
    }
  },
  callbacks: {
    someEffect() {
      const context = getContext();
      const { ref } = getElement();
      // ...
    }
  }
} );

// store
import { store, getContext } from '@wordpress/interactivity';

store( "myPlugin", {
  actions: {
    toggle: () => {
      const context = getContext();
      context.isOpen = !context.isOpen;
    },
  },
  callbacks: {
    logIsOpen: () => {
      const { isOpen } = getContext();
      // `isOpen` が変更されるたびに、その値をログする。
      console.log( `Is open: ${ isOpen }` );
    }
  },
});

// render.php
wp_interactivity_state( 'myPlugin', array (
	'someValue' => get_some_value()
));

// render.php
wp_interactivity_state( 'favoriteMovies', array(
      "1" => array(
        "id" => "123-abc",
        "movieName" => __("someMovieName", "textdomain")
      ),
) );

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

// 以下の呼び出しではエラーが発生する
store( "myPlugin/private", { /* ストア部分 */ } );

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

// 以下の呼び出しは期待どおりに動く
store( "myPlugin/private", { /* ストア部分 */ }, { lock: PRIVATE_LOCK } );

const context = getContext('namespace');

// render.php
<div data-wp-interactive="myPlugin" data-wp-context='{ "isOpen": false }'>
	<button data-wp-on--click="actions.log">Log</button>
</div>

// store
import { store, getContext } from '@wordpress/interactivity';

store( "myPlugin", {
  actions: {
    log: () => {
      const context = getContext();
			 // "false" をログ
      console.log('context => ', context.isOpen)

      // With namespace argument.
      const myPluginContext = getContext("myPlugin");
      // Logs "false"
      console.log('myPlugin isOpen => ', myPluginContext.isOpen);
    },
  },
});

// store
import { store, getElement } from '@wordpress/interactivity';

store( "myPlugin", {
  actions: {
    log: () => {
      const element = getElement();
			 // Logs attributes
      console.log('element attributes => ', element.attributes)
    },
  },
});

{
	"data-wp-on--click": 'actions.log',
	"children": ['Log'],
	"onclick": event => { evaluate(entry, event); }
}

store('mySliderPlugin', {
	callbacks: {
		initSlideShow: () => {
			setInterval(
				withScope( () => {
					actions.nextImage();
				} ),
				3_000
			);
		},
  },
})

	wp_interactivity_config( 'myPlugin', array( 'showLikeButton' => is_user_logged_in() ) );

  wp_interactivity_config( 'myPlugin' );

// view.js

const { showLikeButton } = getConfig();

// render.php

wp_interactivity_state(
	'myPlugin',
	array(
		'ajaxUrl' => admin_url( 'admin-ajax.php' ),
		'nonce'   => wp_create_nonce( 'myPlugin_nonce' ),
	),
);

// view.js

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!
				}
			},
		},
	}
);

wp_interactivity_state( 'myPlugin', array( 'greeting' => 'Hello, World!' ) );
$html_content = '<div data-wp-text="myPlugin::state.greeting"></div>';
$processed_html = wp_interactivity_process_directives( $html_content );
echo $processed_html;

<div data-wp-text="myPlugin::state.greeting">Hello, World!</div>

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

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