インストール

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

  1. npm install @wordpress/block-library --save

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

API

registerCoreBlocks

ブロックエディタによって提供されるコアブロックを登録するための関数です。

使用法 

  1. import { registerCoreBlocks } from '@wordpress/block-library';
  3. registerCoreBlocks();

パラメータ

  • blocks Array: 登録されるコアブロックのオプションの配列です。

個別ブロックの登録

  • 1. ファイルがインポートされたときにブロックを登録することにのみ関心がある場合:
    1. import '@wordpress/block-library/build-module/verse/init';
  • 2. 自動的に登録された後にブロックへの参照を使用したい場合:
    1. import verseBlock from '@wordpress/block-library/build-module/verse/init';

  • 3. ブロックが登録されるタイミングを完全に制御する必要がある場合:

    1. import { init } from '@wordpress/block-library/build-module/verse';
    3. const verseBlock = init();

このパッケージへの貢献

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

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

新しいブロックの追加

⚠️ このパッケージに新しいブロックを追加するには追加の手順が必要です！

  • 1. このパッケージのindex.jsファイルに新しいコアブロックを登録することを忘れないでください。たとえば、core/blinking-paragraphという新しいコアブロックを追加する場合、次のように追加する必要があります:
    1. // packages/block-library/src/index.js
    2. import * as blinkingParagraph from './blinking-paragraph';
    次に、blinkingParagraphをgetAllBlocks()関数のリストに追加します。
    実験的なものであれば、block.jsonに次のプロパティを追加します:
    1. {
    2.  "__experimental": "true"
    3. }
  • 2. lib/blocks.phpファイルのgutenberg_reregister_core_block_types()関数でブロックを登録します。静的ブロックの場合はblock_folders配列に、動的ブロックの場合はblock_names配列に追加します。

  • 3. 新しいブロックのディレクトリにinit.jsファイルを追加します:

    1. /**
    2.  * Internal dependencies
    3.  */
    4. import { init } from './';
    6. export default init();

    このファイルは、@wordpress/block-libraryパッケージから個別のブロックを登録するオプションを使用する際に使用されます。

  • 4. ブロックのディレクトリにview.jsファイル（またはviewで接頭辞が付けられたファイル、例: view-example.js）が存在する場合、このファイルは他のアセットと共にビルドされ、ブラウザから読み込むことができるようになります。block.jsonファイル内でview.min.js（異なるファイル拡張子に注意）ファイルを参照するだけで済みます:

    1. {
    2.  "viewScript": "file:./view.min.js"
    3. }

    このファイルは、静的ブロックがフロントエンドに存在する場合に自動的に読み込まれます。動的ブロックの場合は、ブロックのrender_callbackでビューのスクリプトを手動でエンキューする必要があります。例:

    1. function render_block_core_blinking_paragraph( $attributes, $content ) {
    2.  $should_load_view_script = ! empty( $attributes['isInteractive'] ) && ! wp_script_is( 'wp-block-blinking-paragraph-view' );
    3.  if ( $should_load_view_script ) {
    4.  wp_enqueue_script( 'wp-block-blinking-paragraph-view' );
    5.  }
    7.  return $content;
    8. }

PHP関数の命名規則

  2. - `````block_core_<directory_name>
  • render_block_core_<directory_name>
  • register_block_core_<directory_name>

この文脈では、<directory_name>は対応する.phpファイルが存在するディレクトリの名前を表します。

ディレクトリ名は小文字に変換され、文字と数字以外のすべての文字はアンダースコアに置き換えられます。

例:

  2. - `````block_core_my_block
  • render_block_core_my_block
  • register_block_core_my_block

プラグイン固有の接頭辞/接尾辞の使用

/libディレクトリのPHPコードとは異なり、一般的にブロックPHPファイル内の関数や他のコードにgutenberg_のようなプラグイン固有の接頭辞/接尾辞を適用することは避けるべきです。

ただし、コアに相当するものが存在する場合でも、ブロックがGutenberg関数を使用する必要がある場合があります。たとえば、Gutenberg関数がプラグイン内でのみ利用可能なコードに依存している場合です。

そのような場合、ブロックPHPコード内で対応するコアwp_関数を使用し、その名前をWebpack構成ファイル内の接頭辞付き関数のリストに追加できます。

ビルド時に、Webpackはそのリスト内のwp_関数を検索し、それらをgutenberg_の同等物に置き換えます。このプロセスにより、プラグインはgutenberg_関数を呼び出しますが、ブロックは更新がバックポートされたときにコアwp_関数を呼び出します。

Webpackは、接頭辞を除いて、関数名が同一であると仮定します: wp_get_something_useful()はgutenberg_get_something_useful()に置き換えられます。