OMEGAHEIDERNさん

ちょっと時間がありませんので、私は確認は…すみません。
（今すぐ確認できる状態であれば、確認したのですが。。。）

よって、他の方の確認をお待ちいただきたいところですが。。。

その前に何点か。

現在CSSが圧縮されており、確認が難しいです。

おそらく以下だとは思いますが。。。

投稿者:: @omegaheidern

Page Optimize 0.5.1

他に思い当たるプラグインがあれば無効化しておいてください。
外部からの確認が困難です。

以下も無効、もしくはアンインストールしておくのが良い気はします。

投稿者:: @omegaheidern

AMP 2.1.3

このプラグインが有効で、過去に確認できないことがありました。

また、CocoonにはAMP機能がありますので、上記プラグインを必要としません。

以下のプラグインも不要だとは思います。

投稿者:: @omegaheidern

Gutenberg 11.3.0

上記プラグインはインストールする必要はないと思います。
上記プラグインがなくとも、ブロックエディタは使用可能です。

上記プラグインは、次期バージョンのWordPressに追加される予定の機能などを確認するためのものです。
主に開発者さん向けのものです。

もちろん、先行して新機能を試したいということであれば、インストールする意味はありますが、開発中の機能が含まれていますので、何らかの不具合がある可能性があります。

また開発中の機能に関しては、テーマ側も対応はできないと思います。

ご承知おきください。

mk2さん

ご指摘ありがとうございます。

無効化できていないものがあったようで失礼しました。

無効化できるプラグインは全て無効化しました。

前略、OMEGAHEIDERN さん

ローカルのテストサイトで画像ブロックを試していたら、どうもCocoonの画像ブロックの不具合っぽい気がしてきました。

編集画面の表示位置も「右寄せ」を選択しても、編集画面では左に寄ってしまったりするようです。

OMEGAHEIDERN さん

編集画面と実際の表示が一致しないと、何を基準に編集したら良いかわからなくなりますね。

画像ブロックには、キャプションの位置を指定するオプション機能は、もともと無いような気もします。

WordPressのデフォルトテーマの「Twenty Twenty-One」辺りだと、キャプションは中央に配置されるみたいです。

OMEGAHEIDERN さん

Cocoonの場合は、「中央寄せ」にすると、編集画面では、キャプションが画像の幅の中央に配置されるので、実際もそうなるのかと思いきや、実際の表示では、キャプションは配置の位置に関わらず、全て左寄せになるようです。

OMEGAHEIDERN さん

キャプションを画像の左右中央に配置するために、WordPressのデフォルトテーマの「Twenty Twenty-One」では、「figcaption」タグに「text-align: center;」を指定しているようなので、以下のコードを追加CSSか子テーマのstyle.cssファイルに記述するか、そのページだけに適用させたいときは、編集ページのカスタムCSSの欄に記述すれば良いかもしれません。

.wp-block-image figcaption {
    text-align: center;
}

OMEGAHEIDERN さん

ただし、画像の配置位置を指定しない場合は、上記のコードだと、カラム幅の左右中央にキャプションが配置されてしまうので、画像だけ左に寄ってしまい、キャプションだけがカラム幅の左右中央に配置され、画像とキャプションの位置がずれてしまうかと思います。（カラム幅いっぱいのサイズの画像では問題ないかとは思いますが・・）

OMEGAHEIDERN さん

引用ブロックは、私の環境では、編集画面でもそれっぽく表示されるようです。

OMEGAHEIDERN さん

あまりよく調べていないのですが、プラグインの「CoBlocks」についても、とても多機能なプラグインのようなので、Cocoonの機能との干渉が懸念されます。

テーマとプラグインに同じような機能があったりすると、不具合が生じる可能性が高くなることが考えられます。

Cocoonのテーマは、とても多機能ですので、デザインに影響を及ぼすようなプラグインは、使わない方が無難と言えば無難です。

わいひらさん

画像ブロックについては、ブロックエディターの表示を再確認した方が良いかもしれませんね。

引用ブロックについてですが。

何故か「グループ化」されているのは、さておき…ですが。

OMEGAHEIDERNさんの「引用ブロック」のソースは以下のような感じでした。

@mk2_mk2 さん

私のテストサイトでは、グループ化しても、それっぽいClass名は付与されないみたいです。

ちょっと、他の用事があるため、今夜は離脱します。

リフィトリーさん

「グループ化」のスタイルは、グループの方です。
（wp-block-group）

「引用ブロック」にもスタイルが指定できて、出てくるんですよね、デフォルトでも。

あとで少しだけ調べてはみますが、私も今日はあまり調べることはできません。

@mk2_mk2 さん

グループ化するときにグループの設定が「未設定」だとClass名が付与されない、とか・・

リフィトリーさん

「グループ化」しないで、単独の「引用ブロック」だと出てこなかったです。

ただ、先程までプラグイン「WordPress.com Editing Toolkit」が有効になっていたので、その影響の可能性があります。

今は無効化したもので。

【追記】

プラグイン「WordPress.com Editing Toolkit」を有効にしても出てきませんでした。

となると…。
リフィトリーさんの仰るとおり「グループ化」の影響なんでしょうか、やはり。

OMEGAHEIDERNさんのエディタ画面が何故ああなってしまうのか…。

もはや頭が澱んで、今晩は無理そうです?
そろそろ寝てしまおうかと。

【再追記】

「グループ化」しても出てきませんでした。

うーん、やはり完全に私の頭が澱んでいます。
今晩は、もう無理そうです、寝てしまいます。

@mk2_mk2 さん

私も明日の支度がありますので・・

お二方とも色々調べて頂いてありがとうございます。

現在プラグインは、Anti-spamとJetpack以外全て無効化してあります。

リフィトリーさんに教えて頂いた下記コードですが、子テーマのcocoon childのstyle.cssに加えてみてもキャプションは左寄りのまま、変化がありませんでした。画像のスタイルも未設定からデフォルトに変更してみましたが、特に変化は見られません。cocoonだとこの位置は変えられないのでしょうか。

.wp-block-image figcaption {
text-align: center;
}

同じページを、テキストと画像だけ持ってきて新規で作り直してもみましたが、やはり変わりはありませんでした。まだ何か考えられる原因や、試すべきことはあるでしょうか。

OMEGAHEIDERNさん

もはやPCは落としてしまい、スマホからです。

そして、私の頭は澱んでいますので、的外れなことを言ってしまいそうですが。。。

キャプションの件ですが、私からは添付のように見えてしますが、これとは違いますか。

OMEGAHEIDERNさん

Ctrl+F5キーを押してWebページをリロードしてください。

ブラウザに修正前のキャッシュが残っているんだと思います。

それでは、お休みなさい。

お二方とも、遅くまでありがとうございました。

帰宅してからでないと、PCからは確認ができませんが、確認でき次第、こちらにご連絡致します。

こんばんは。

Ctrl+F5の実行で、PCからもキャプションが中央表示されることが確認できました！

お力添え頂きまして、ありがとうございました。

大変助かりました。

OMEGAHEIDERN さん

画像ブロックの記事編集画面での表示が実際のWebページとは違ってしまう件は、わいひらさんが確認、修正くださるのではないかと推測しています。

.wp-block-imageのスタイルを調整しておきました。
エディターのデフォルトのスタイルを調べたら、キャプションも中央ぞろえみたいなので公開ページも同様にしました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------

@yhira さん

GitHubから修正した親テーマをインストールして試してみたのですが、「右寄せ」にしたときに、ブロックエディター上では、右寄せにならないようです。

では、Twenty Twenty One では、どうやっているのか、と思ってデベロッパーツールで覗いてみたら、なんと今どき？floatを使っているようです。

@yhira さん

キャプションについては、個人的には、１行だけのときは、画像の幅の中央に配置するとカッコいいのですが、長いキャプションだと左寄せになっている方が読みやすかったりするので、どちらがいいとは言えないかなと感じます。

キャプションの位置も選べると、CSSが良くわからない方でも使い勝手は良くなりますが、また機能が増えてしまうので、メンテナンス作業も増えることになっちゃいそうですね。

投稿者:: @leafytree

では、Twenty Twenty One では、どうやっているのか、と思ってデベロッパーツールで覗いてみたら、なんと今どき？floatを使っているようです。

画像ブロックは「左寄せ」「右寄せ」などの場合は、すぐ下の段落ブロックの文字を回り込ませるかため、floatになっているのかもしれません。

何も位置指定をしない場合は、左寄せで、下のブロックの文字は回りこまずに、下の位置のまま、という使い分けになるのかもですね。

そうなると、エディター画面上でも、その区別が見分けられる方が良いのかもしれません。

たしか、クラシックエディターの場合もそのような使い分けだったような・・

配置を指定するかしないか、あるいは、左寄せ、右寄せの場合、中央寄せの場合で、下の段落ブロックの文字の回り込みの有無を切り替えているのかもしれません。

だからTwenty Twenty Oneでは、左寄せや右寄せのときに画像のサイズが小さめに表示されるのかもしれません。

画像のサイズが変わる仕様だと、いままでの仕様と変わってしまうので、流石にそれはまずいと思いますが、エディター上でもすぐ下に配置した段落ブロックの文字の回り込みを確認できた方が良いのかもしれません。（左寄せ、右寄せの場合など）

@yhira さん

例えば、以下のトピックでは、画像ブロックで左寄せにしていても、編集画面上では、画像ブロックの下のブロックの文字が回りこまないため、「左寄せ」の選択時に下に設定した段落ブロックの文字が画像の右横に回り込むことに気づかない、ということがあるのではないかと推測します。

[解決済] スマホからだと画像が自動トリミングされてしまう

https://wp-cocoon.com/community/postid/55948/

回り込みは調整しておきました。
ただ、もしかしたら他のブロックで何かしら問題が出るかも。
とりあえず、出たら出たで修正していきます。

投稿者:: @leafytree

キャプションについては、個人的には、１行だけのときは、画像の幅の中央に配置するとカッコいいのですが、長いキャプションだと左寄せになっている方が読みやすかったりするので、どちらがいいとは言えないかなと感じます。

Twenty Twenty Oneだと画像ブロックのキャプションは真ん中に統一されてますね。

Cocoonは、デフォルトで左寄せだったので、それは今更変えられないと思うので、画像ブロックの中央寄せでもキャプションは左寄せに統一した方がいいのかな…。
ここらへんは好みなので難しいな…。

@yhira さん

flloatというプロパティは使い方が難しいので、お手数を増やすことに繋がってしまうとしたら申し訳ありません。

floatの影響を止めるために、エディター画面用のクリアフィックスを加えなければならないブロックも出てくる？のかもしれません。

キャプションについては、個人的にはずっと左寄せで来たのでしたら、ブレずに左寄せで良いような気がします。ただ、エディター画面では「中央寄せ」にしたとき、キャプションまで中央寄せになっていて、実際の表示と異なっていたため、どちらが正しいのか疑問に思われる方がいるのは、普通のことかなと。

エディター画面上でもキャプションは全て左寄せ、ということなら、疑問に感じる方はあまりいらっしゃらないような気がします。

いま、ちょっと他の用事がありますので、修正した親テーマは後ほどインストールしてみたいと思います。

@yhira さん

インストールしてみました。

エディター画面と実際のWebサイトでの表示が一致したので、違和感がなくなったと思います。

中央寄せのキャプションはキャプションも中央寄せなのですね。（まあ、これはこれで、全然違和感ないです。今までの仕様と変わってしまうという点は置いといて。）

あとは、他のブロックとの組み合わせなどで、変な影響が出ないかどうかでしょうか。

でも、影響が出るとしても、エディター画面上に、ということだと思います。

配置の選択項目の中にある「幅広」と「全幅」の違いについては、ちょっとまだよくわかっていませんが、今回のfloatとは無関係だと思うので、調べていません。