さて、私はこれを少しの間遊んでいますが、ギャラリーブロックの出力を変更することに成功しました。次の警告があります。
- プレビューは出力と一致しません。これは可能だと思いますが、もう少し複雑に思えます。
- コンテンツを解析して編集可能にするには、ブロックの出力に特定のクラスとマークアップが必要です。これらのクラスには、対処する必要があるフロントエンドスタイルがあります。ブロックがこれを行う方法をフィルタリングする方法があるかどうかは、現時点ではわかりません。可能であれば、テーマまたはプラグインが非アクティブ化されたときにギャラリーブロックが壊れていることを意味するのは、あまり良い考えではないかもしれません。まったく新しいブロックは、おそらくこれが必要となる状況への道です。
- この段階で画像のサイズがどのように機能するかはよくわかりません。
- 使用されるJavaScriptフックの方法は、最終リリースでは関係ない場合があります。Gutenbergは
@wordpress/hooks、Coreでどのフックシステムを使用するかについての議論が進行中に使用しています。
- ブロックの出力はショートコードやメタではなくHTMLとして保存されるため、既存のギャラリーを編集せずに出力を変更することはできません。
最初に行う必要があるのは、スクリプトの登録です。これはで行われますwp_enqueue_scripts()が、enqueue_block_editor_assetsフックで行われます。
スクリプトには、wp-blocksスクリプトを依存関係として含める必要があります。ほぼ確実にエディターに既に読み込まれていますが、依存関係にすることで、スクリプトの前に確実に読み込まれます。
function wpse_298225_enqueue_block_assets() {
wp_enqueue_script(
'wpse-298225-gallery-block',
get_theme_file_uri( 'block.js' ),
['wp-blocks']
);
}
add_action( 'enqueue_block_editor_assets', 'wpse_298225_enqueue_block_assets' );
ブロックの出力のHTMLは、ブロックのsave()メソッドによって処理されます。このファイルでギャラリーブロックを確認できます。
この段階（2018年3月）では、Gutenbergはブロックの保存方法に関するフィルターをサポートしていますblocks.getSaveElement。次のように、JavaScriptでこれにフックを追加できます。
wp.hooks.addFilter(
'blocks.getSaveElement',
'wpse-298225',
wpse298225GallerySaveElement
)
最初の引数はフック名、2番目の引数は-名前空間、最後の引数はコールバック関数です。
save()ブロックのメソッドを置き換えるため、新しい要素を返す必要があります。ただし、これは返す必要がある通常のHTML要素ではありません。React要素を返す必要があります。
元のブロックのsave()メソッドを見ると、JSXが見えます。Gutenbergが内部で使用するReactは、要素のレンダリング用にサポートしています。詳細については、この記事を参照してください。
通常、JSXにはビルドステップが必要ですが、この例ではビルドステップを紹介していないため、JSXなしで要素を作成する方法が必要です。Reactはこれを提供しcreateElement()ます。WordPressは、この機能やその他の反応機能のラッパーをの形式で提供しwp.elementます。したがって、使用するにcreateElement()はを使用しますwp.element.createElement()。
コールバック関数でblocks.getSaveElementは、次を取得します。
element ブロックによって作成された元の要素。blockType 使用されているブロックを表すオブジェクト。attributesブロックインスタンスのプロパティ。この例では、ギャラリーの画像と列数などの設定が含まれます。
したがって、コールバック関数には次のことが必要です。
- 非ブロックギャラリーの元の要素を返します。
- 属性、特に画像を取得し、ギャラリーを表す属性から新しいReact要素を作成します。
ここで単に出力完了例でul、クラスとmy-gallery、そしてliクラスで各画像に対してだmy-gallery-itemとし、img各一方のsrc画像のURLへセットが。
function wpse298225GallerySaveElement( element, blockType, attributes ) {
if ( blockType.name !== 'core/gallery' ) {
return element;
}
var newElement = wp.element.createElement(
'ul',
{
'className': 'wp-block-gallery my-gallery',
},
attributes.images.map(
function( image ) {
return wp.element.createElement(
'li',
{
'className': 'blocks-gallery-item my-gallery-item',
},
wp.element.createElement(
'img',
{
'src': image.url,
}
)
)
}
)
)
return newElement
}
注意するべきいくつかの事柄：
- 元のギャラリーブロックはを検索して画像を検索
ul.wp-block-gallery .blocks-gallery-itemするため、ブロックを編集するにはこのマークアップとそれらのクラスが必要です。このマークアップは、デフォルトのスタイル設定にも使用されます。
attributes.images.map各画像をループし、子要素の配列をメイン要素のコンテンツとして返します。これらの要素の中には、画像自体の別の子要素があります。