web-dev-qa-db-ja.com

グーテンベルクでギャラリーブロックを拡張するには？

私はグーテンベルクと一緒に遊んでいるのですが、既存のギャラリーブロックを拡張して表示を変更する方法を知りたいのです。例えば、サムネイルのグリッドの代わりに、画像のスライドショーを見せたいのです。出来ますか？もしそうなら、どうですか？任意の助けがいただければ幸いです。

imagesgalleryblock-editor
13
leemon

さて、私はこれを少しの間遊んでいますが、ギャラリーブロックの出力を変更することに成功しました。次の警告があります。

  • プレビューは出力と一致しません。これは可能だと思いますが、もう少し複雑に思えます。
  • コンテンツを解析して編集可能にするには、ブロックの出力に特定のクラスとマークアップが必要です。これらのクラスには、対処する必要があるフロントエンドスタイルがあります。ブロックがこれを行う方法をフィルタリングする方法があるかどうかは、現時点ではわかりません。可能であれば、テーマまたはプラグインが非アクティブ化されたときにギャラリーブロックが壊れていることを意味するのは、あまり良い考えではないかもしれません。まったく新しいブロックは、おそらくこれが必要となる状況への道です。
  • この段階で画像のサイズがどのように機能するかはよくわかりません。
  • 使用される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要素を作成します。

以下は、クラスmy-galleryを持つ各画像のクラスmy-gallery-item、およびulsを持つliと、画像URLに設定されたimgを持つ各クラスのsrcを出力する完全な例です。

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は各画像をループし、子要素の配列をメイン要素のコンテンツとして返します。これらの要素の中には、画像自体の別の子要素があります。
15
Jacob Peattie

ここで最新の回答を提供します。 この投稿は非常に役に立ちました / Gallery Blockを拡張する方法の質問に答えることで/。

つまり、既存のブロックを拡張するのではなく、単に新しいブロックを作成することをお勧めします。上記の私のリンクの投稿から：

ブロックのHTMLを[拡張して]変更しても、元のブロックとしては認識されません。コアブロックを操作しようとするのではなく、コアブロックの登録を解除してその代わりに新しい代替ブロックを登録するのがより安全なアプローチのように思えます。独自のHTML構造を定義しています。

上のリンクも/を参照しています Create-Guten_Blockプラグイン あなたはブロック作成を始めるためにあなたが必要とするすべてを生成するコマンドラインツールです。このツールは非常に使いやすく、セットアップも簡単です。

これらのリソースを使用して、カスタムギャラリーブロックを短時間で開発する方法を見つけ出すことができました。

2
Jeff Wilkerson