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

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

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

まぁ急用やイレギュラーでスマホ編集しなければならない時の参考にして頂ければなと。※iPhoneのシリーズやOSによっても症状が違うかもしれませんが

スポンサーリンク

エディターの併用について

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

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

新 ⇆ 旧 エディターはワンクリックで簡単に切り替え可能ですが、レイアウトが崩れる場合があるのでご注意ください。

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

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

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

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

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

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

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

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

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

※一時的な回避策

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

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

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

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

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

6.編集時の画面幅がおかしい

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

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

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

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

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

htmlモードの反応が激重

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

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

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

特にクラシックエディターで作成した記事をブロックエディターで編集する際は、色々と注意や手間が必要です。出来ない訳ではありませんが使用するエディターはどちらかに統一した方が良さそうです。

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

Comment

  1. sarten さん
    ご謙遜を。このブログは大変に分かりやすく。
    文章も論理的な感じで気持ちよく読ませて頂きました。
    単なる不満となりガチな話題なのに、気持ちよく読めると言うことは配慮と事実のみきちんと書くスキルがあってのことだと思います。
    私などついつい感情も込めてしまって年甲斐もなくです。
    今回はGoogle検索でサクッとこのブログが出て来たので、私だけの問題ではないがiPhoneでの編集ユーザーが少ないであろう事が解決の遅れになっているらしいことが掴めて助かりました。
    テーマ側にも、どうやらそうらしい事をお伝えした上で、もし可能なら助けて欲しいと言うスタンスで相談する事が出来ました。

    私もいくつかブログとホームページを持ってますが、それこそコメントなんてほぼ無いので、アクセスもですけど(笑)
    まれにコメントがあると嬉しく思ってました。

    本日は、ご丁寧に対応を頂いてありがとうございました。

    • sartensarten より:

      >ももちゃんさん

      検索してみたら本当にサクっと自分のサイトが表示された事に驚きつつ、すぐに誤字脱字を修正しました(笑)

      この問題で困ってるのはこの世で私だけかとも思っていましたが、同じ様に困っている方がいて安心しました。※可笑しな事ですが

      もちろんこのコメントもiPhoneで何度もサイズ調整しながら作成しております。ただ、昨日までよりもストレスは減った気がします。

      何か新しい情報が得られましたらお知らせいたします。色々とありがとうございました!

  2. わたしもブロックエディターでiPhoneによる作業するので、編集時のする時に編集画面がはみ出す問題で困り果てております。
    賢威8を使う時には賢威側で対処してくれて直りましたが、WordPress本体の問題だとすると、他のテーマの時に作者さん、メーカーさんにiPhone対応のお願いして良いのか?分担的に?
    分からなくて調べていてこちらに辿り着きました。
    私は現在Lightning Proを愛用していて、とりあえず販売元にも相談はスタートしたところです。
    iPhoneで編集する人が少ない為か?
    この問題は問題提起する人が少ないようで困りました。

    • sartensarten より:

      >ももちゃんさん

      コメント有難う御座います!

      ネット上の情報量から察するに、iPhoneメインで作業してる方はかなり少なそうですよね。

      やはり『ブロックエディターとiOSの相性』だと思います。
      ・safariでもchromeでも症状が出る
      ・クラシックエディターだと問題なし
      ・WordPressアプリだと問題なし

      私はもう諦めモードなので、どうしようもない時はsafariの表示倍率を50%に変えたりしながら作業しています。

      文章のリライトだけならWordPressアプリがおすすめです(htmlモードなどは使えませんが)。アプリなら画面からはみ出たりしませんので ( ´ー`)フゥー

      恐らくテーマ側で対処する義務は無いと思いますが(契約内容によりますが)、少なくともヒントや代替案は貰えそうですよね。

      • sarten さん
        再現条件が少しわかりました。
        sarten さんは先刻ご承知かもしれない情報ですが一応書きます。
        該当ページに大きめ(iPhoneで右にはみ出す程度)画像が含まれている場合に、ブロックを選択した途端にブロックエディターのツールバーが横スクロールも出来ないしピンチ操作も変になるんですね。
        画像がないページではツールバーは横スクロールも正常で問題なしでした。
        現在、Lightning Proさんが検討課題にしてくれているので、もし賢威8のように対応してくれたら嬉しいなあと期待中です。
        私もこれはテーマ側の対応義務ではなく、WordPress(ブロックエディター)が対応すべき事だと感じますが、ブロックエディターが普及してきた現時点でこれでは対応する気がないのかな?と諦め気分です。

        でも、iPhoneで出先でも編集できることが、html+cssサイトに比べてアドバンテージだと思うWordPressによるHP採用理由なので、これでは魅力半減です。

        WordPressアプリ、以前使っていたのですが、jetpackをアンインストールしたらグーグルスピードテストが10点くらい上がって、それ以来WordPressアプリは使ってませんでした。
        jetpackが入ってないサイトにも有効なのか?
        ちょっとこの後で試してみます。
        それで使えないとなれば、私もSafariの表示倍率で暫定対処でしょうか。。。

        • sartenさん、jetpackを削除した時点で、WordPressアプリからサイト自体が削除されていたので、使用不可能だと思い込んでましたが、今、手動でWordPressアプリにサイト追加したら編集可能でした。

          ところが、、、、
          LightningProの独自ブロック多用している私のサイトは、非サポートとなるブロックがあって、h2タグの付いた文字列すら非表示で操作不能でした。

          ううん、Lightning Proは独自ブロックが魅力なので、多用してますのでWordPressアプリが使えない状況でした。

          やっぱりWordPress側でiPhoneのブロックエディター利用を改善してくれるのを待つしかないようです。

          もし朗報があったらまたご報告しますね。

          • sartensarten より:

            >ももちゃんさん

            色々と情報ありがとうございます!

            偉そうにアプリを紹介しましたが、解決方法を探す過程で今朝インストールして使ってみただけなので、あまり把握できていません(笑)

            私の場合も非対応ブロックが多い様なので、本当に困った時くらいしか使わないと思います。

            編集画面のはみ出しは1年くらい前?のアップデート以降の症状なので、WordPress様が本気を出せば直せるものだとは思います。この記事も単なる不満ではなく期待(要望)として作りました。

            とはいえ、WordPressやCocoonが無ければサイト運営をやろうとすら思わなかったので、とにかく今自分にできる事に注力してスキルを上げつつ、アップデートの時を待ちたいと思っています。

            という、弱小サイト運営者の何ら解決に繋がらない精神論でごさいました!収益もPVも全然なのですが、コメント頂けると本当に嬉しいしモチベーション上がります。ももちゃんさんもコロナとブロックエディターに負けず頑張ってください〜!

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