ちょこちょこ Gutenberg 対応したり、マニュアルの整備を進めています。/ Snow Monkey 開発日誌【2018年9月8日】

v4.2.11 リリース

ほんとにちょこちょことした小さいアップデートが続いています…。ほとんど Gutenberg 対応です。Gutenberg の全貌を把握しているわけではないので、実際に Gutenberg で記事を書きながら、「あれ?ここはちょっと対応度が低いな」というところがあれば即反映、ということを繰り返しています。

今日は下記のアップデートを行いました。

  • URL をはりつけたときに自サイトの場合だけ Gutenberg 上でブログカードに反映されない不具合の修正
  • CSS の読み込み順が必ず Gutenberg の CSS → メイン CSS になるように修正
  • Gutenberg 上で YouTube 動画がレスポンシブにならない不具合の修正

URL をはりつけたときに自サイトの場合だけ Gutenberg 上でブログカードに反映されない不具合の修正

下記のコードを参照。なぜか自サイトのリンクの場合と外部サイトのリンクの場合で処理が分けられています。何か理由があるのでしょうか…。

Snow Monkey 側に、上記の処理のあとに実行される同じような処理を入れて、自サイトのリンクの場合でも外部サイトのリンクのときと同じ処理が実行されるようにして対応しました。

「TODO: This is a temporary solution.」とあるので、将来的に良い感じに解決されることを期待。

Gutenberg 上で YouTube 動画がレスポンシブにならない不具合の修正

Snow Monkey は embed_oembed_html フックを使って、YouTube 動画を埋め込んだときの HTML をカスタマイズし、その HTML に対してレスポンシブな動作をするようなスタイルをあてる、というようなことをしています。

Gutenberg 上の YouTube 動画埋め込み(というか oEmbed 系全部)は、一旦 Sandbox と呼ばれる iframe がつくられ、その中に動画が埋め込まれる、という形になっているのですが、自動的に CSS が読み込まれたりはしないようで、それが原因でレスポンシブになっていませんでした。

そこで、Gutenberg 上で埋め込み動画を表示する場合はさらに embed_oembed_html にフックする処理を実行して、CSS を読み込む link タグを追加するようにして対処しました。

ローカルではちゃんと動いているのになぜか Snow Monkey 公式サイトではレスポンシブにならない

という問題がありました。コードにおかしなところはないし、なんでだろうなーといろいろ調べていたときにふと思い浮かびました。「こういうときはだいたい Jetpack が怪しい…

Snow Monkey の公式サイトは Jetpack を使っていたのでググってみると、まさにその問題の issue を見つけることができました。コードでは対処できなさそうだったので、Jetpack の設定で機能をオフにして対処しました。みなさんもJetpack をお使いの場合はご注意ください。

詳しくは下記の記事にまとめました。

マニュアルの整備

わかりやすくなっているのかは自信があんまりないのですが、少しずつ書き換えていっています。わかりやすいところでいば、右カラムにそのページの目次がでるようにしていっています。

あとは文章も全面的に見直しています。が、画像と動画を取り直したり新しくつくるのがひどく億劫で、そこは後回しにしちゃっています…。特定のページで要望があればそのページを優先してちゃんとやります…。

サポートフォーラム対応

今日もいくつかの要望/質問に答えたりしました。

  • ブックマーク
  • Feedly

この記事を書いた人

キタジマタカシ

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。 多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。