インストール

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

  1. npm install @wordpress/interface --save

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

APIの使用

補完領域

このコンポーネントは、補完的なランドマークにちなんで名付けられました。これは、DOM階層内のメインコンテンツと同じレベルで補完的に設計された文書のサポートセクションであり、メインコンテンツから分離されても意味を持ちます。 

  2. ストアを使用して、どの補完が有効かを制御することが可能です。  
  4. 以下は、ストアを使用してアクティブな補完領域を制御する方法のいくつかの例です:  
  7. ``````bash
  8. wp.data
  9.    .select( 'core/interface' )
  10.    .getActiveComplementaryArea( 'core' );
  11. // -> "edit-post/document"
  13. wp.data
  14.    .dispatch( 'core/interface' )
  15.    .enableComplementaryArea( 'core', 'edit-post/block' );
  17. wp.data
  18.    .select( 'core/interface' )
  19.    .getActiveComplementaryArea( 'core' );
  20. // -> "edit-post/block"
  22. wp.data
  23.    .dispatch( 'core/interface' )
  24.    .disableComplementaryArea( 'core' );
  26. wp.data
  27.    .select( 'core/interface' )
  28.    .getActiveComplementaryArea( 'core' );
  29. // -> null
  30. `

ピン留めされたアイテム

  2. 使用例: `````ComplementaryArea`````コンポーネントは`````PinnedItems`````を利用し、お気に入りとしてマークされた補完領域のために自動的にピン留めされたアイテムを追加します。  
  5. ``````bash
  6. wp.data.select( 'core/interface' ).isItemPinned( 'core', 'edit-post-block-patterns/block-patterns-sidebar' );
  7. // -> false
  9. wp.data.dispatch( 'core/interface' ).pinItem( 'core', 'edit-post-block-patterns/block-patterns-sidebar' );
  11. wp.data.select( 'core/interface' ).isItemPinned( 'core', 'edit-post-block-patterns/block-patterns-sidebar' );
  12. // -> true
  14. wp.data.dispatch( 'core/interface' ).unpinItem( 'core', 'edit-post-block-patterns/block-patterns-sidebar' );
  16. wp.data.select( 'core/interface' ).isItemPinned( 'core', 'edit-post-block-patterns/block-patterns-sidebar' ); -> false
  17. `

設定

インターフェースパッケージは、エディタの設定を実装するためのいくつかのヘルパーを提供します。

機能

機能は、特定のエディタ機能をオンまたはオフに切り替えるために使用されるブール値です。

エディタの初期化時に機能のデフォルト値を設定します: 

  1. import { dispatch } from '@wordpress/data';
  2. import { store as interfaceStore } from '@wordpress/interface';
  4. function initialize() {
  5.    // ...
  7.    dispatch( interfaceStore ).setFeatureDefaults(
  8.    'namespace/editor-or-plugin-name',
  9.    {
  10.    myFeatureName: true,
  11.    }
  12.    );
  14.    // ...
  15. }
  3. ``````bash
  4. wp.data
  5.    .select( 'core/interface' )
  6.    .isFeatureActive( 'namespace/editor-or-plugin-name', 'myFeatureName' ); // true
  7. wp.data
  8.    .dispatch( 'core/interface' )
  9.    .toggleFeature( 'namespace/editor-or-plugin-name', 'myFeatureName' );
  10. wp.data
  11.    .select( 'core/interface' )
  12.    .isFeatureActive( 'namespace/editor-or-plugin-name', 'myFeatureName' ); // false
  13. `

このパッケージへの貢献

これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主要な貢献者ガイドをお読みください。