ブロックエディターをiPhoneで使用する際の問題点【Gutenberg】

2018年12月にWordPressのアップデートがあり、新しいエディター Gutenberg (グーテンベルグ) が使えるようになりました。便利になった部分もたくさんありますが、ほぼiPhoneだけでサイト運営している少数派の私からiPhoneでの問題点をピックアップさせていただきました。

PCで作業すれば良いだけなんですけどね・・

ほとんどの方はPCで作業されていると思いますが、急用やイレギュラーでスマホ編集しなければならない時の参考にしてください。iPhoneといってもシリーズやOSによって症状が違うかもしれません。

スポンサーリンク

エディターの設定について

旧エディタであるクラシックエディターを使いたい場合は、以下のプラグインをインストールして有効化します。

プラグイン情報
  • 名称:Classic Editer
  • 作成者: WordPress

新 ⇆ 旧 エディターの切り替えはワンクリックで簡単ですが、デザインが崩れる場合もあるのでご注意を。

デフォルトのエディターを設定

新規で投稿ページを作る際に使うデフォルトのエディターを選べます。

WordPressの設定
  1. ダッシュボード
  2. 設定
  3. 投稿設定
デフォルトのエディターを選択

ブロックエディターの問題点

iPhoneで記事の作成・編集をする場合、以下の様な問題が発生しました。総じて『編集画面のサイズ感』が主なポイントです。

解決済みは打ち消し線
  1. <編集時の画面幅が狭い
  2. 編集時のフォントが実際とだいぶ違う
  3. Cocoonで画面下の編集をクリックすると白紙ページになる
  4. パネルの項目が多いと下の方が見えない
  5. クラシックから切り替えると改行が無くなる
  6. 編集時に画面幅が狂う
  7. リンク挿入の窓がキーボードに隠れがち
  8. htmlモードでのコピペがおかしくなった

4.下の方のメニューが画面内に表示できない

↓この画像で言うと「ページ設定」の下に「エディター」があるのですが、下から上にスワイプしても画面内に持ってこれません

クラシックエディター選択

一時的な回避策

オプションからDocument Panels や Advanced Panels のチェック項目を出来る限り減らします。その後、Status & Visibilityをタップで最小化するとエディターが表示されます。

デフォルトだとたくさんチェックが入ってます。あくまでも一時的な回避策なのでご了承ください。

5.旧 → 新エディターに変えると改行が消える

見やすさを考えて行間を空けていたのに、旧エディターで作成したページをブロックエディターで編集・保存すると改行が無くなります。※<br>は無効の様です

そもそも概念というか仕様が違うので、ブロックエディターで行間を調整するにはスペーサーというブロックを使用します。

6.編集しようとすると画面幅が狂う

ブロックを追加して編集しようとすると、編集画面が拡大されてしまってiPhoneの画面内に収まりません。言葉だけ見ると大したことなさそうですが、いちいち二本指でピンチして画面幅を縮小しないと絶対的に編集できない部分が発生します。

この作業が本当に手間で困っています。

7.リンク挿入窓がキーボードに隠れがち

テキストや画像にリンクを貼ろうとすると、ポップアップされた入力欄がキーボードに半隠れ。

上手くアクティブにしてペーストできることもあれば、どうにもいかずに入力欄がキーボードの裏に逃げてしまうことも。

htmlモード

コピペ問題はアップデートで改善された様ですが、ある時期から急激に重くなりました。文字の追加や削除も入力してから2〜3秒後に反映されるくらいの感覚です。

エディターの併用は避ける

SNSの埋め込みなど便利な機能もたくさんあるブロックエディターですが、クラシックエディターの感覚とはまた違う仕様になっています。

特にクラシックエディターで作成した記事をブロックエディターで編集する際は、色々と注意や手間が必要です。出来ない訳ではありませんが、なるべくページ事に使用するエディターを決めた方が良いかもしれません。

参考にしたブロックエディター情報

Comment

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