使用法

このパッケージは、インタラクティブブロックの view.js ファイルに動的にインポートされることを意図しています。これは、初回ページロード時の JS バンドルサイズを削減するために行われます。 

  1. /* view.js */
  3. import { store } from '@wordpress/interactivity';
  5. // This is how you would typically use the navigate() action in your block.
  6. store( 'my-namespace/myblock', {
  7.    actions: {
  8.    *goToPage( e ) {
  9.    e.preventDefault();
  11.    // We import the package dynamically to reduce the initial JS bundle size.
  12.    // Async actions are defined as generators so the import() must be called with `yield`.
  13.    const { actions } = yield import(
  14.    '@wordpress/interactivity-router'
  15.    );
  16.    yield actions.navigate( e.target.href );
  17.    },
  18.    },
  19. } );

現在、ブロックの view.js ファイル内で actions.navigate() を呼び出して、別のページに移動したり、data-wp-on--click 属性に渡したりできます。

読み込まれると、このパッケージは core/router ストアに 次の状態とアクション を追加します: 

  1. const { state, actions } = store( 'core/router', {
  2.    state: {
  3.    url: window.location.href,
  4.    navigation: {
  5.    hasStarted: false,
  6.    hasFinished: false,
  7.    texts: {
  8.    loading: '',
  9.    loaded: '',
  10.    },
  11.    message: '',
  12.    },
  13.    },
  14.    actions: {
  15.    *navigate(href, options) {...},
  16.    prefetch(url, options) {...},
  17.    }
  18. })

コアの「クエリループ」ブロックは、地域ベースのナビゲーション を提供するために このパッケージを使用しています。

ディレクティブ

data-wp-router-region

ナビゲーション時に更新される領域を定義します。値として一意の ID が必要で、data-wp-interactive を持つルートインタラクティブ要素内でのみ使用できます。つまり、data-wp-interactive を持つ他の要素内にネストされていない要素です。

例: 

  1. <div data-wp-interactive="myblock" data-wp-router-region="main-list">
  2.   <ul>
  3.    <li><a href="/post-1">Post 1</a></li>
  4.    <li><a href="/post-2">Post 2</a></li>
  5.    <li><a href="/post-3">Post 3</a></li>
  6.   </ul>
  7.   <a data-wp-on--click="actions.navigate" href="/page/2">
  8. </div>

アクション

ナビゲート

指定されたページに移動します。

この関数は、渡された href を正規化し、必要に応じてページの HTML を取得し、新しいページで内容が変更されたインタラクティブ領域を更新します。また、ブラウザのセッション履歴に新しいエントリを作成します。

パラメータ 

  1. navigate( href: string, options: NavigateOptions = {} )
  • href: ページ href。
  • options: オプションオブジェクト。
    • force: true の場合、URL の再取得を強制します。 navigate() は常にページをキャッシュするため、以前に移動したページがある場合はそれが使用されます。デフォルトは false です。
    • html: 要求された URL を取得する代わりに使用される HTML 文字列。
    • replace: true の場合、ブラウザのセッション履歴の現在のエントリを置き換えます。デフォルトは false です。
    • timeout: ナビゲーションが中止されるまでの時間（ミリ秒）。デフォルトは 10000 です。
    • loadingAnimation: ナビゲーション中にアニメーションを表示するかどうか。デフォルトは true です。
    • screenReaderAnnouncement: ナビゲーション中にスクリーンリーダー用のメッセージを発表するかどうか。デフォルトは true です。

プレフェッチ

渡された URL のページをプレフェッチします。ページはキャッシュされ、ナビゲーションに使用できます。

この関数は URL を正規化し、内部でフェッチの約束を保存して、進行中のリクエストに対して二重のフェッチをトリガーしないようにします。

パラメータ 

  1. prefetch( url: string, options: PrefetchOptions = {} )
  • url: ページ url。
  • options: オプションオブジェクト。
    • force: true の場合、URL を再度取得することを強制します。
    • html: 要求された URL を取得する代わりに使用される HTML 文字列。

状態

state.url は現在の URL と同期されたリアクティブプロパティです。

state.navigation の下のプロパティは、ローディングバーアニメーション用です。

インストール

モジュールをインストールします: 

  1. npm install @wordpress/interactivity-router --save

このステップは、WordPress の外でインタラクティビティ API を使用する場合にのみ必要です。

WordPress 内では、このパッケージはすでにコアにバンドルされています。これがエンキューされることを確認するには、スクリプトモジュールの依存配列に @wordpress/interactivity-router を追加します。このプロセスは、wp-scripts のようなツールを使用して自動的に行われることがよくあります。

さらに、このパッケージは、あなたのコードが ES2015+ 環境で実行されることを前提としています。このような言語機能や API のサポートが限られているか、まったくない環境を使用している場合は、@wordpress/babel-preset-default に含まれるポリフィルをコードに含める必要があります。

ライセンス

インタラクティビティ API の提案は、Gutenberg および WordPress プロジェクトの一部として、無料ソフトウェアであり、GNU 一般公衆ライセンスバージョン 2 または（あなたの選択により）それ以降のバージョンの条件の下でリリースされています。完全なライセンスについては、LICENSE.md を参照してください。