WordPress5.3の更新が来てたからアップデートしたら、あれ？ 投稿記事の編集画面がなんか左に寄っちゃってズレてない？
まあいいか。といつも通り記事を制作していて気付く…
無い！ あの矢印が無い！
段落とかパーツごとに動かして並び替えるやつ！
私も思わず悲しみのツイートをしてしまいました。
ブロックを上下に移動させる矢印が無い？
テーマかプラグインかの相性でしょうか。 要するにわかりません！
ブロックの左側に出てくる（ハズの）上下に移動させて並び順を変更できる矢印。
便利ですよね。
これをまた使えるようにする対応の手順をご紹介します。
ちなみにこの記事も、下記対策をしてブロックの並び替えを使いながら制作しています。
Cocoonフォーラムで公式に、Cocoonを最新版にしたら解決する旨が回答されました。
WordPressを5.3にアップデートしたら、エディター画面が左に寄ってます。 | 不具合報告 | Cocoon フォーラム
詳しい方は手動でアップデートを。
私は自動アプデがくるまで待ちます。それまでは以下の方法でしのぎます。
【2019/11/16 追記】
自動アップデートが配布されて、Cocoon2.0～となりました。
エディターの寄りに関して、解決済みのバージョンです。
困った方は最新版にアプデしましょう。作者様に感謝です。
WordPress5.3 アップデートで編集画面がズレたので対策【上下する矢印が復活】
ブロックを上下させる矢印を復活させる対策の手順を解説します。
編集画面が左に寄った原因が、WordPress5.3 か Cocoon か他プラグインか、それぞれの相性かはわかっていない中で、いちばん実践しやすい応急処置はこれかなと思います。
本体を編集するのは、他の崩れや不具合を誘発するかもしれないので、ブラウザ上で表示を一時的にずらして対策します。
ワードプレス5.3
新エディタ「Gutenberg（グーテンベルグ）」使用
テーマ「Cocoon」バージョン 1.9.9.5.3
ブラウザ「google chrome」
windows10
ブラウザの検証でスタイルを一時的に編集
ワードプレスの投稿編集画面のエディタのどこかで、右クリックして検証。
今回は、記事タイトルの入力欄にカーソル（マウスポインタ）を置いた状態で
右クリック
検証
をしてください。
そうすると、右側上段にhtmlソースが表示されます。
タイトル入力欄で検証を選んだので、
タイトルのtextareaの記述部分がうすく色付いています。
そこから、ソース表示欄を少し上にスクロールして見てください。
13行くらい上の
<div tabindex="-1" class="edit-post-visual-editor editor-styles-wrapper">と書かれている行を、一回クリックします。
クリックしたらその箇所が選択されて、下の欄にスタイルの記述が表示されます。
.edit-post-layout__content .edit-post-visual-editor {
flex-shrink: 0;
flex-grow: 0;
padding: 0 10px;
}の中で
padding: 0 10px;のピクセル数値（px）をダブルクリックすると変更できるようになりますので
padding: 0 40px;10pxを、40pxくらいに書き換えてあげます。
ご自身の画面状況に合わせて、数値を大きめにしたりしてください。
これで右側の検証ウインドウを閉じると
いかがでしょうか。
入力欄の左右余白を増やしたおかげで、隠れてしまっていた「ブロック単位で上下移動させる矢印」が使えるようになりました。
そしてこの方法は、WordPressやCocoonの元ファイルを編集していません。
ブラウザ上で見た目の変更をシミュレートしているだけなので、安心度が高いと思います。
逆に、元ファイルを編集していないので、投稿一覧に戻ってからまた記事編集を開く等のページ移動でリセットされます。
矢印が使いたいときは、再度この操作が必要になります。
もちろん投稿の編集内容は保存できます。
- WordPressやCocoonの元ファイルを編集保存していないので安心
- 投稿一覧に戻ってからまた記事編集を開く等のページ移動でリセットされる
- 投稿の編集内容はいつも通り保存できる
都度の操作で面倒ですが、すぐに対応修正版がリリースいただけると思いますので一旦の応急処置をご紹介しました。
繰り返しになりますが、編集画面が左に寄った原因が WordPress5.3 か Cocoon か他プラグインか、それぞれの相性かは今私はわかっていません。
公式な対応では無いので、自己責任でお試しください。
ご指摘などありましたら、いただけると幸いです。
コメント