【悲しみ】Gutenberg導入前に絶望を与える仕様とバグの回避

この記事は約7分で読めます。

結論からいうと、Gutenbergデモで使われている魅力的な「カバー」・「ギャラリー」は、AMPやモバイルで非常に使いにくく、「文字回り込み画像」は改行されないため、風景以外が非常に見にくい。

導入する意味として、「一部多機能テーマで提供されている特殊な機能のほとんど」がGutenbergのみで使用可能になるが、上記3つのメリットはAMPだと潰されている点に注意しよう。

この記事は仕様とバグを知って導入を諦めさせたり、自分に向いているのか結論を仰ぐ記事だ。導入前提なら先にこちらではなく、以下の記事を参考にするといい。
スポンサーリンク

厄介な仕様一覧

今後修正されるかもしれないが、Gutenbergバージョン4.4.0の仕様を紹介していく。何か詰まったら見に来ればいいので、「こんな仕様なのかー」程度に流し読もう。
  • パーマリンクは大文字が小文字に変換されない
  • パーマリンクで左をずっと押すとカーソルがパーマリンクを飛び出る
  • 一度画像を挿入したギャラリーは削除しないと画像の順番を変えられない
  • 一度画像を挿入したギャラリーはブロックを削除しないとalt属性(代替テキスト)を設定できない
  • 同じギャラリーに画像を追加する際、ライブラリの項目が消えるためアップするしかない
  • 投稿記事から入れたalt属性すべてがその記事にしか保存されない(一部未検証)
  • カバー画像はAMP非対応
  • 一度画像を挿入したカバー画像はブロックを削除しないとalt属性を設定できない
  • 画像のリンク設定はブロックごとに設定する
  • 段落でしかGutenbergの色設定が使えない
  • Gutenbergの色設定はAMP非対応
  • ギャラリーによる画像複数表示はスマホだと1カラムにならない
  • カラム(ベータ)による画像複数表示もスマホだと1カラムにならない(AMPは1カラム)
  • AMPだとギャラリーによるカラム画像左側に、リストでお馴染みulタグの「・」が入る
  • 過去記事などのクラシックブロックを変換させるとCSSなど装飾が外される
  • コードエディターにすると投稿記事の一部CSSが表示されない(更新すれば戻る)
  • 「複数ブロックを巻き込んだGutenbergの文字」をコピーすると、ブロックタグまでコピーされる
    • クラシックに貼り付けするとブロックタグ、Gutenbergに貼り付けすると上下にクラシックが挿入される
  • 「クラシック」ブロックの中に「複数ブロックを巻き込んだGutenbergの文字」を貼り付けると公開時にすべて外に出される?
  • Gutenbergにコピペした際、文章前後にスペースが入ったりスタイルを引き継ぐ
    • ChromeとFirefoxはCtrl+Shift+Vのプレーンテキスト化で乗り切れる。ビジュアルエディタでも同じ?
結構修正された。使用してみると自然に使えるレベルにまでなっている。

長くなるため細かすぎるものは紹介しないが、その時点で取るに足らないものだと思うので当記事は追求しない。

目玉だとされるカバー画像(固定背景:挙動が特殊で魅力的)やギャラリーは実質AMPサイトでは微妙であり、私としてもこのページでしか使用していないほどに使いづらい。

文章を回り込ませる画像も魅力的だが、右のようにどうしても小さくなる点に注意。

F12のデベロッパーツールで確認してみるといいだろう。

モバイルやAMPで改行してくれると見やすいかもしれないが、F12で確認してもらえるとわかるとおり、改行されずただただ見にくい。

ようするに、改行されないからPCだと通常通り見えてくれるが、モバイルやAMPだと小さくなって風景画像以外は非常に見にくい。

実はテストができるので、試すといいかもしれない。

公式サイト新しい Gutenberg 編集エクスペリエンス

仕様により「色や何らかのデザインを減らす方向」にせざるを得ないだろうが、この記事のようにクラシックブロック内で装飾をガンガン使うことは可能。

文字色は何か決定的に読みやすさが変わらないのであれば、これを気に抹殺だ。

冒頭にした記事でAMPやギャラリーの動作を確認することができるが、最後にも再掲載する。

バグのようなもの一覧

ほぼ死滅した模様。

「投稿記事真っ白現象」はなくなったかもしれない。

現在は過去記事丸々「クラシック」ブロックに包まれるようになり、ほとんどのテーマで問題なく表示されるようになったかもしれないため、前に遭遇して諦めたのなら一度確認してみると良い。

  • CloudflareのRESTAPIどうのこうの(協議中?注意書きがでた)
  • ショートカットを使い(Ctrl+K)空欄にリンクを作成すると文字入力ができない(実際は入力されている)※確率50%ほど
  • たまにリンクで検索時、該当記事題名をクリックすると他のブロックが選択され、リンク作成が無効化される※確率50%ほど
  • 「カラム(ベータ)」ブロック削除がそのままできず、上下どちらかのブロックを巻き込んでから削除する必要がある
  • ごく稀にクラシックブロックの編集バーのようなものが更新されるまで消せない
  • カバー画像にキャプションを入れると、タグがエラーになる(タグ初心者のため無視)
  • クラシックでリンクを作成すると挙動がおかしい(テーマにより症状が複数)
  • クラシックで作成したリストの下にリンクを直接挿入 → ブロックへ変換 → リンク削除 → リスト一番下を改行すると一部消える 
  • New!:Web上のリストをクラシックにコピペすると、プレビュー・公開記事から編集可能
  • New!:クラシックにリンク先メディアファイルのキャプション付き画像挿入 → ブロックへ変換で画像分裂&リンク先強制解除
  • カラムを3以上にした状態で横幅の長い画像を入れるとチカチカぼやける(カラム6以上からになった?)
  • New!:カラムにクラシックを入れて公開 → 編集に戻るとクラシックが想定していないコンテンツになる
  • 段落・見出し・キャプション・リストなど、全角1文字目がChromeだとアルファベットになる
    • リストだけはブラウザを変更しても直らず、正常に使えない致命的なバグ
  • New!:過去作成したリスト1段目を削除しても、実は削除されていない

以上のように、ただのメモだ。あきらかにクラシック関連が多い。

とりあえず、Web上のリストをコピーしてクラシックに貼り付けしたままを回避し、貼り付けしてもクラシック内のリストに更新しなおせば正常になる。

カラムのバグ

現在はこのカラムにクラシックを入れ公開 → 編集に戻るとバグり、6カラム以上にした際に画像の横幅が一定値を超えるとチカチカ猛烈にバグる(Chromeで確認)。

チカチカ猛烈バグはかなり衝撃的で混乱するだろうが、原因だと思われるカラムに挿入した画像をクリック → 画像サイズを変更する丸をクリックするとなぜか戻る。

画面チカチカバグ解決法

とりあえず、現在はこの方法で回避しておこう。

右側が激烈に白くなるため、選択したい画像がが見えないかもしれない。その場合はCtrlを押しながら+を押してブラウザ表示を90%にすると、なんと表示されるぞ!

使いにくくなるもの

  • 太字や枠など装飾タグ
  • 旧ビジュアルエディターへの画像挿入
  • 段落ブロック以外の装飾リンクを使用した他記事タイトルのコピー

必然的に装飾の数が減るため、断捨離をおこなう決断をしなければずっとビジュアルでいるといい。

スポンサーリンク

いろいろやって判明した小ネタ

残念な情報や、意外と知らない情報のメモといった部分。

過去記事は綺麗にGutenberg化できない

GutenbergにHTMLを記入できないので、「ブロックへ変換」してしまうと消える仕様。

過去記事全体を「クラシック」ブロックで囲われている以上、選択した部分だけを「ブロックへ変換」といった、素敵なことはできない。

全体をクラシックではなく段落ごとにクラシックになってくれればできそうだが、現状は無視推奨。

ということで、正解は「巨大クラシックブロックの中で今後も訂正・追記していく」ことだ。

当サイトはすでに全記事ベルク化という苦行を終えたため、追記も訂正もいい感じなのは内緒。

Gutenberg導入と同時に捨てた常識

  • 太字CSSの多用
  • 文字の色多用
  • 投稿記事から画像を挿入し、alt属性(代替テキスト)記入
スポンサーリンク

Gutenberg導入を考える

多機能テーマを使用しなくても、ほぼGutenbergで完結してしまう。

とても魅力あふれるGutenbergだが、紹介した仕様やバグに抗う向上心が「WordPressをはじめたとき」のようにあるのなら挑戦するといい。

ぷっぷ
ぷっぷ

やっぱり慣れると、自然に使えちゃうよ!

コメント

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