【ワードプレス5.3】コクーンのブロックエディターでギャラリーの表示がずれるので

ワードプレスでブログ ワードプレス
この記事は約3分で読めます。

つい先日(2019.11.13)、WordPress(ワードプレス)のバージョンが 5.3 になりました。
いろいろと使いやすくなるように、WordPress の仕様変更があったようです。

蚕とまゆ

その仕様変更は、WordPress のテーマ「Cocoon(コクーン)」にも大きな影響を与えました。
ヴィジュアルエディターに加えていたスタイル定義が、無効になってしまったのです。

しかし早急にいろいろと対処されたようで、Cocoon の修正版がリリースされました。
ただまだ対処し切れてないところが、いくつか残っているようです。

追記 2019.12.04)
バージョン 2.0.2.2 にしたところ、ブロックエディターのギャラリー表示が直りました。

スポンサーリンク

ギャラリーの表示がずれるので

表示がずれるギャラリー
表示がずれるギャラリー(3カラムの場合)

ボクはブロックエディターで、一度に複数の画像を表示できるギャラリーをよく使います。
ただ Cocoon での対処はまだのようで、依然として表示がずれています。

じきに正式に対処されると思いますが、それまでは暫定的に対処することにしました。

ビジュアルエディターのスタイル定義を修正

ということで、きれいに並ぶようにしてみました。

カラム3 の場合だけでなく、カラム2 の場合やカラム5 の場合も確認しましたが、正しく表示されるようになっています。

作業手順:

  1. サイドメニューから、外部 > テーマエディター を開く。
  2. ビジュアルエディターのスタイルシート(editor-style.css)をクリック。
  3. 次の記述を追加して、「ファイルを更新」ボタンをクリック。
.blocks-gallery-grid {
  padding-left: 0;
}

.blocks-gallery-grid .blocks-gallery-item {
  margin: 0 16px 16px 0;
}

.blocks-gallery-grid .blocks-gallery-item:last-child {
  margin-right: 0;
}

修正内容:

  • ブロックギャラリー全体の不要な左パディングを 0 にした。
  • ブロックギャラリー項目の上と左の不要なマージンを 0 にして、右と下にマージン 16px を加えた。
  • 最後のブロックギャラリー項目の右マージンを 0 にした。

あとがき

現在(2019.11.15) Cocoon のフォーラムを見ると、質問がたくさん来ているようです。
その対処に追われて、何だかとっても忙しそうです。

右へ倣えする消防士

ただ記事を作成しているときにギャラリーの表示がずれると、見づらくて記事の作成に差し障ります。
ということで、急いで自分で暫定対処しておきました。

コメント

タイトルとURLをコピーしました