Cocoon Blocks 0.1.2

とりあえず、Cocoon Blocksプラグインは無効にした方が良いかと思います。削除してしまって良いです。
既に標準機能になっているので。そうでないと、古いCocoon Blocksが読み込まれます。

それ以外の原因だと、ちょっと管理画面上でのことですし、思いつかないかもしれません。

それ以外でしたら、何かのCSSが影響したのかも？

子テーマにはCSSを書いてないようですし、（外観から入るカスタマイザーの）追加CSS・（記事下にある）カスタムCSSにもstyleがないってないですよね？

ってことなら、プラグインを停止して原因を当たってみるなどですかねぇ。

WP Responsive Menu　ってプラグインのスタイルが影響してるかも？ただ管理画面の事なのでやっぱり分かりません。

わいひらさん、かうたっくさん、レスありがとうございます。

全てのプラグインを停止してみましたが、状況変わりません。ついでにスキンも変更したみましたが、同じく。（これについては別件で質問があるのでポストを分けます）

CSSは追加も修正もしていません。

一つ気がついたのが、ブロックを下に追加すると一発でアウトですが、上に追加するとブロック自体は通常に表示され、編集も可能です。
その後でブロック自体を上下させると一時的に重なったりブロック同士が合体したりと奇妙な動きをするのですが、順序の変更もできます。
が、時々きちんと動かなかったりします。成功・不成功のトリガーは今はわかりません。

とにかく記事作成をガンガンしないといけないので当面これで進めようと
思いますが、効率が悪すぎます。。。

なにかお気づきの点がありましたら、引き続きご教示ください。

＞（これについては別件で質問があるのでポストを分けます）

すみません、これは無視してください

画像を左寄せにしているからではないでしょうか？

左寄せ（float:left;）の効果としては正常に見えますがGutenbergのクラシックブロックは少し編集し辛いですね。

私は画像の左寄せを使った事がなかったので編集画面での動作が仕様かどうかわかりませんが…

トピ主さんは今回以前は画像を左寄せにしてもブロックは重ならなかったということでしょうか？

草村さん

レスありがとうございます。

明確には覚えていませんが、一昨日まで配置はどこでも問題無かったと思います。ほんとに主観的には突然なんですがなにかトリガーがあったはず。。

最初のポスト書いたURLは別の質問のためにうっかり上書きしてしまったので、再現して作り直しました。

こちらをご覧ください。　

いろいろいじってるといつの間にかブロックが合体したりで、もう訳わかりません。。。

<p>[caption id="attachment_3710" align="alignleft" width="150"]<img class="size-full wp-image-3710" src="画像パス" alt="" width="150" height="144"> あああ[/caption]</p>
<p>あああ画像左寄せ②</p>
<p>新規クラシック①</p>
<p>[caption id="attachment_3710" align="alignleft" width="150"]<img class="size-full wp-image-3710" src="画像パス" alt="" width="150" height="144"> あああ[/caption]</p>

<!-- wp:paragraph -->
<p>あああ左寄せ②</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>新規クラシック②</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>新規段落ブロック③</p>
<!-- /wp:paragraph -->

<p>新規クラシック</p>
<p></p>
<p></p>
<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>

このHTMLで

https://gyazo.com/d5df5c01f0cf4d2653ea207e5e4c642c

表示がくずれる。って事ですね。修正してくれると思われます。

かいたっくさん

いつもありがとうございます。

もうWPの再インストールしかないのかと思い、WP/Cocoonの再設定後に現在作成済のページとメディアだけ復旧する方法はないかと考えてました。。

よろしくお願いいたします。

最初のポスト書いたURLは別の質問のためにうっかり上書きしてしまったので、再現して作り直しました。

そうだったんですね。
もう一度ページを作ってくださってありがとうございます！

確認して、私もテスト環境でかうたっくさんの書かれたコードや、画像の配置など色々試してみましたが、おかしい所が見当たらずわかりませんでした…お力になれず申し訳ないです；

私はお役に立てそうにないですが不具合が解消する事を祈っております…！
失礼いたしました。

もうWPの再インストールしかないのかと思い、WP/Cocoonの再設定後に現在作成済のページとメディアだけ復旧する方法はないかと考えてました。。

ってか、WordPressの仕様かもしれないです。

その仕様が気に入っている人からすれば、テーマ側で仕様変更すれば、たぶん迷惑な話。と思う人もいるかも。って今思いました。

alignleft

画像の『左寄せ』を選択したら、画像の高さまで、回り込みを続ける感じになってしまします。

そうしたくない段落やリストなどなど…、回り込みを解除したい場所のHTMLにclass="cf" を付ける感じが良いかも。

今gif画像を作りました。

*************

表示

https://gyazo.com/cb2703e01f875ac1bae8d22255a146dd

個人的に、ブロックエディターで画像を左寄せしたときに重なるのは、添付画像のような表現をするために必要なのかなと思い、そのままにしようと思います。
WordPress自体デフォルトであえてこのようにしているのかなと。

ただし、クラシックブロックの場合は、添付画像のような表現にする必要はないと思うので、修正しました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

修正ファイルで同様の状態にすると、添付画像のように縦並びで表示されます。

ただ、上記の状態で保存すると、添付画像のようにクラシックブロックは1つにまとめられてしまうようです。
これ自体は、まとめられるというだけで意図した表示にはなりますし、実害はないのでこのままにしようと思います。
※修正するとしたら調べる時間も含めて滅茶苦茶大変かもしれない。調べてはないですが。調べたとしても、解決方法が出てくるかもわからない。

わいひらさん、かうたっくさん、草村さん

みなさん、お時間を割いて頂きありがとうございます！

いくつかヒントを頂いたので、順次試していきます。

＞わいひらさん
上記の状態で保存すると、添付画像のようにクラシックブロックは1つにまとめられてしまうようです。

今の状態でも、ブロックの上下移動をすると合体は発生します。編集時のミスやブロックの移動を考えて細かく分けてますので、合体するとちょっと困っちゃいます。。。

上記の状態で保存すると、添付画像のようにクラシックブロックは1つにまとめられてしまうようです。

添付画像がないので、また添付してもらって良いですか。

今の状態でも、ブロックの上下移動をすると合体は発生します。

全部クラシックブロックを使ってるのですか？

何のブロックと何のブロックが合体しますか？

画像の左寄せをしたブロックの下にあるブロックのみ合体してる感じですか？

上記の状態で保存すると、添付画像のようにクラシックブロックは1つにまとめられてしまうようです。

今の状態でも、ブロックの上下移動をすると合体は発生します。

こちらはCocoonの問題ではなく、Gutenbergの仕様によるものです。

https://github.com/WordPress/gutenberg/tree/master/packages/block-library/src/classic

コードを見た感じでは、Gutenbergのクラシックエディターは他のブロックとは異なり、一般的な独立したブロックとしての利用よりも、特定のブロックに属していないHTMLをビジュアルエディター上で表示・編集するための補完ツール的な役割を想定して設計されているようです。

なので、ブロックの要素等を保存するHTMLコメントが存在せず、クラシックエディターで記述したHTMLは全てひとつのブロック内にまとめられることになります。

現状、クラシックエディターをメインで使用したい場合は、

• Gutenbergを無効にする
• クラシックエディター専用のブロックを別途用意する

といった解決策が考えられますが、このGutenbergの仕様に大きな問題を感じるのであれば、GitHubからGutenberg側にissueを書くなりした方がよいかと思います。

前提：上でアドバイスして頂いた件はまだ適用していません。

＞かうたっくさん
　合体するとこんな感じです。

　99%はクラシックエディターです。やはり機能が豊富なので。

過去に作成したページを開くと、細かくブロックで分割していたものが長大な段落に合体していて、ため息がでました。。。。

確かに表示上は問題ないのですが、段落内の修正・加筆・上下の移動って結構センシティブで、すぐ壊れてしまいます。特に、私は吹き出しを多用するのですが、ブロック内の吹き出しの追加、削除って結構面倒です。なので吹き出しは一つのブロックにしておかないとあとが困るのです。

過去のページの例ですが（見にくくてすみません！）最初は赤い四角毎にブロックを分けていましたが、今開くと青い四角にまとまってます。

LPイメージで長いページを作ってこうなると悲惨なので、1ページを短くしてページネーションを使ったほうがメンテは楽かな。。。とか思い初めてます。

たしかにクラシックブロックを使ってるとそうなるので仕方ないかもです。

加筆修正のとき、修正を行わない場所はクラシックで一旦おいておき、コピペをおこなって、別ブロックに置き換え、段落などのブロックを使っていくなどで対応したほうが良い気もします。

分かりにくいので、以下。

https://gogo-onlinecasino.com/test2/

こちらだと画像の幅が広いのでぱっと見は何も変わらないと思います。

管理画面がどうなってるのかが気になりますけど。（管理画面の話ですよね？）

幅を広くしたら、挙動が変だと初めて思うかもしれません。

https://gyazo.com/1b1496511e9d2bdbde48ec73417ed733

上記のような表示になって困るって事をおっしゃっているなら、#post-19470

class="cf"を付けたら問題ないと思います。

<a class="cf" href="https://gogo-onlinecasino.com/wp-content/uploads/2019/02/cryptocurrency-3435862_640.jpg">

https://gyazo.com/aeacb32a1a89b63d6defd9c19e2e8b8a

Gutenbergを使用する場合、クラシックエディターがHTMLコメントを要する独立したブロックでない以上、個別のブロックを優先して使用すべきだと思います。

どうしてもクラシックエディターをメインで使用して、画像にあるような赤い枠ごとにブロックを分けたいのであれば、見出しを見出しブロックで書くなどクラシックエディター間に個別ブロックを用意することで、エディターの結合を避けることは可能です。

僕も、クラシックブロックを何個も連続で使って書くのであれば、クラシックブロック以外のブロックを使うべきかと思います。

もし毎回、クラシックブロックを使うのであれば、クラシックエディターを利用した方が良いのではないでしょうか。

まとめで失礼します。

皆様、アドバイスありがとうございました。。

いろいろ試してみたのですが、新規でも修正でもブロック単位の修正・移動は捨てがたいので、ロコさんの仰るようにブロックエディターとクラシックエディターを交互に、またはどうしてもクラシックエディターが必要な時以外はブロックを使う、でなんとかなりそうです。

皆様、お忙しい中でお時間を割いて頂き、ありがとうございました！