最近、WPGraphQL の作成者である Jason Bahl とチャットする機会がありました。彼がファウンダーでありクリエーターでもあるということだけでなく、彼が現在 Gatsby チームの一員でもあるため、WPGraphQL に大きく依存しているプロジェクトを開発するつながりを持つには完璧な人物でした。

私たちが作成しているプロジェクトは Shifter の新しいサイトであり、回答に興味をもっていたとある質問がありました。その質問は、Gutenberg は Gatsby とどのように連携するのですか？というものです。

まだ明確な答えはありませんが、これにはいくつかのアプローチがどこかにあり、おそらくこの回答がそれらに加わることになるでしょう、いずれにせよ、私たちにはいくつかのアイデアがあり、それらを実践に移しました。

いくつかの背景

あなたが WordPress の最近のバージョンを利用している ユーザーであれば、おそらく Gutenberg が導入されているでしょう。WordPress の新しいブロックエディターであり、高度にカスタマイズ、拡張可能であり、良くも悪くも編集エクスペリエンスに革命をもたらしました。

この例では、ブログの投稿に焦点を当てみます。 Gutenberg には、列、埋め込み、ボタンなどのページビルダーの動きに似たツールがすぐに使用できます。拡張機能を追加するかカスタムブロックを作成することで、さらに多くのことができます。 Gatsby、WordPress、Gutenberg を使用してサイトを開発している場合、重要な要素が欠落していることにすぐに気付くでしょう。 Gutenberg 関連の CSS です。

Gutenberg の編集エクスペリエンスと出力は複雑になる可能性がありますが、単にブロックポストの the_content フィールドに HTML マークアップを追加しているだけです。ページのレンダリングは、Gatsbyサイトには存在しないスタイルシートによって異なってきます。

可能な解決策

いくつか検討したのち、3つの可能な解決策がありました。

1. Gutenberg 関連の必要な CSS にポイントし、それをリモートファイルをサポートする自分のSCSS ファイルにインポートします。
2. NPM で何らかの形でインストールし、そこからインポートします。ええ、このオプションは、、、ばかげて聞こえます。
3. WPGraphQL で必要な CSS を取得します。

この機能が WPGraphQL で利用できないと気付く前に、私は最後の選択肢に決めていました。WPGraphQL は拡張可能なので、心配する必要はありません！カスタムなユースケースのアイデアがある場合は、コアプラグインをさまざまな方法で拡張可能です。 WPGraphQLのドキュメントサイトで何ができるのかを確認できます。

WPGraphQL エンキュー

WPGraphQLエンキューと呼ぶことにしたアイデアのスケッチを始めました。

私の目的は、WordPress がコアで既に提供しているものを使用し、そのデータを WPGraphQL に公開することでした。取得したいデータは、キューに入れられたスクリプトとスタイルでした。

エンキューされたスクリプトとスタイルに焦点を合わせると、いくつかの高度な機能が提供されています。スタイルとスクリプトを適切に登録したプラグインまたはテーマを追加すると、それらのアセットがスキーマで自動的に使用可能になります。これには、デフォルトのブロックエディター CSS と自分で追加可能な拡張機能が含まれます。

私がこのアイデアについてジェイソンに連絡したところ、彼は親切に私をガイドしてくれました。WPGraphQL サイトのドキュメントに従ってデモを作成することができ、そのデモは有望なように思われます。

このプロジェクトはオープンソースであり、GitHub で入手できます。いまも開発中で、他の人の役に立てればいいと願っています。このプロジェクトのロードマップとしては私たちの特定のユースケースに合わせて構築することですが、他の人の役に立つかもしれません。

Guttenberg で WPGraphQL を使用している場合、デフォルトの機能を拡張するための貴重なツールになることを願っています。

それ以外にも、もう1つ質問がありました。ページビルダーはGatsbyとどのように連携できるのでしょうか？

私たちはページビルダーの大ファンです。なぜなら、彼らは驚くばかりに使いやすいからです。 Elementor、Setka、および他の多くの製品を使用して開発している場合でも、ビジュアルコンテンツを簡単に作成するための多くの利点があります。

ほとんどのページビルダーは、Gutenberg と同じような技術で機能しています。では、同じソリューションを適用できるのでしょうか？それは多分ですが、この最初のリリース後に分かると思います。

WPGraphQL エンキューの開発方法の詳細については、私、Daniel Olson と Jason Bahl との以下のペアプログラミングセッションをご覧ください。