ブロックエディタでブロックをコピペする方法

先日、ツイッターでブロックエディタ(Gutenberg)で、挿入したブロックを他のページにコピペするのってどうすればいいの?というつぶやきがありまして、自分の方法を答えたらけっこう反応をいただけたので、記事に残しておくことにしました。

きっかけのつぶやき

ブロックをコピペする方法 – つかんでポイボタン大活用

私が一番やる方法です

このつぶやきまんまなのですが、記事内のブロックを選択した状態で、左側にカーソルをもっていくと、ブロックの移動ボタンがでてくるかと思います。
その中のドラッグ&ドロップで移動するためのボタン(私の中で「つかんでポイ」ボタンと呼んでるが正式名称はなんだろう)をクリックします。

そうすると、ブロックがちゃんと選択されるので、そのままコピーして、ペーストしたいページでペーストするとブロックがコピペできます。

選択して、ちゃんと選択されるって??

説明が下手くそすぎてすみません!

ただカーソルがあたってたりするだけの選択状態だと、ちゃんとブロック全部が選択できてないときがあって、うまくコピペできないことがあったので、私は、つかんでポイボタンでちゃんと選択されたぞ〜という状態にしてからいつもコピペしています。
特に親子関係のあるブロックは、親にちゃんと選択があたってるのか、子になってしまってるのかが分かりづらいので、ボタン大活躍させています

なので、とくにつかんでポイボタン押す前に、うまくコピペできることもあるので、お好きなスタイルで攻めるといいと思う!

いずれにせよ、コピペ元とコピペ先は別タブで出しておいたほうが便利です!

ブロックをコピペする方法 – 再利用ブロックにして複製

各ブロックは、「再利用ブロック」という汎用ブロックに変換することができます。

ブロックにカーソルを合わせると、ブロック上にメニューがでてくるので、その他(点つ3の)から「再利用ブロックに追加」を選択

再利用ブロックに変換したあとは、どの投稿画面からでも、変換したブロックを呼び出すことができます。

ブロック挿入メニューの一番下に「再利用可能」のメニューがでてくるのでそこから追加できます

注意点:再利用ブロックの挙動について

再利用ブロックは、本来は、各ページに同じ情報を載せたい!また、各ページに載せた同じ情報は1回修正とかしたら全部反映するようにしたい!といったことに活用するブロックです。(とても便利!)

なので、デフォルトのまま使うと、コピー元・コピー先(ブロック挿入先)ともにブロックの編集内容はシンクロする形になります。

なので、文言ひとつでもページごとに変えたいな〜というときは、必ずコピペ終了後、コピー元(再利用ブロックに変換したもの)・コピー先のブロック両方とも「通常ブロックへの変換」を行ってください。(これで各々が独立した通常のブロック扱いになり、シンクロしなくなります)

応用:よく使うブロックパターンはひな形として再利用ブロックで保持!

上記の作業の応用で、よくこの設定・このレイアウトでブロック呼び出すな〜。でも毎回この設定するのめんどくさいな〜っていうときがでてくるかと思います。(いや、そんなにでてこないかw)

そんなときも、再利用ブロック便利で、よく使うパターンを再利用ブロックに変換しておいて、要所要所呼び出して使うなんていうことができます。(そのときもコピー先のブロックを通常ブロックに戻すこと忘れずに)

あと、Web制作・運用を代行している方なにかも、再利用ブロックでいくつか鉄板レイアウト的なのを用意してあげて、お客様にこれ使うといいよ〜ってお伝えしとくと、結構良いんではないかなと思います。

その他:ブロックコピペ方法 – 他の方がシェアしてた情報

最近、なぜか自分の周りでブロックのコピペ情報がつぶやかれてたので、こちらにまとめておきます(私の備忘録用にもなるw)

逆にコードエディタでやることを1mmも思いつかなかったわい。このテク、けっこう手堅いので私も今後使いたい