再利用ブロックの使い方とブロックの複製

ブロックエディタ( Gutenberg )では追加したブロックを同じ記事内で複製したり、再利用ブロックに追加して複数の記事で同じブロックを共有して利用することができます。ここではブロックエディタで追加したブロックを複製する方法、および再利用ブロックに追加して利用す方法について解説します。

(Last modified: )

ブロックを複製する

ブロックエディタに追加したブロックは、複製することができます。例えば次のような記事で試してみます。

ブロックを複製する(1)

複製する記事を選択したあとで、ツールバーに表示されている「?」をクリックしてください。

ブロックを複製する(2)

表示されたメニューの中から「複製」をクリックしてください。

ブロックを複製する(3)

ブロックが複製されてすぐ下の位置に追加されました。

ブロックを複製する(4)

複製されたブロックはそれぞれ独立したブロックですので、別々に自由に編集することができます。

ブロックを再利用ブロックに追加する

ブロックの複製は同じ記事内でブロックを複製するものですが、ブロックを再利用ブロックに追加しておくと別の記事で同じブロックを追加することができます。ただあとで詳しく解説しますが複製の場合と違い再利用ブロックはすべての記事で共有して利用されます。その為、どこかの記事で再利用ブロックに編集を加えると、同じブロックを追加しているすべての記事で変更が反映されます。

例えば次のような記事で試してみます。

ブロックを再利用ブロックに追加する(1)

再利用ブロックに追加する記事を選択したあとで、ツールバーに表示されている「?」をクリックしてください。

ブロックを再利用ブロックに追加する(2)

表示されたメニューの中から「再利用ブロックに追加」をクリックしてください。

ブロックを再利用ブロックに追加する(3)

再利用ブロックが作成されました。

ブロックを再利用ブロックに追加する(4)

再利用ブロックの名前を入力し「保存」をクリックしてください。これで再利用ブロックへの追加が完了です。

ブロックを再利用ブロックに追加する(5)

ブロックを再利用ブロックに追加する(6)

再利用ブロックを他の記事で利用する

それでは再利用ブロックに追加されたブロックを他の記事で利用してみます。新しい記事を次のように作成しました。

再利用ブロックを他の記事で利用する(1)

ブロックを追加します。画面左上の「+」アイコンをクリックしてください(他の方法でも構いません)。

再利用ブロックを他の記事で利用する(2)

一番下にある「再利用可能」をクリックしてください。

再利用ブロックを他の記事で利用する(3)

再利用ブロックに追加済みのブロックの一覧が表示されますので、追加したいブロックをクリックしてください。

再利用ブロックを他の記事で利用する(4)

記事にブロックが追加されました。

再利用ブロックを他の記事で利用する(5)

このように再利用ブロックに追加しておくこで、他のブロックと同じようにいつでも記事に追加することができます。

再利用ブロックの編集と注意点

再利用ブロックに追加したブロックはあとから編集して内容を変更することができます。方法は二つあり、ブロックを追加している記事上で編集する方法と再利用ブロックの一覧画面から編集する方法です。

ブロックを追加している記事で編集する

最初にブロックを追加している記事上で編集する方法を試してみます。再利用ブロックが追加されている記事の編集画面を表示してください。

再利用ブロックの編集と注意点(1)

追加されている再利用ブロックをクリックして選択したあと、右上に表示されている「編集」をクリックしてください。

再利用ブロックの編集と注意点(2)

次のような画面になったら再利用ブロックに元になっているブロックの部分(今回の場合は「リスト」ブロック)の部分を一度クリックしてください。元になっているブロックを編集できるようになります。

再利用ブロックの編集と注意点(3)

再利用ブロックの編集と注意点(4)

今回は 3 番目の項目を編集してみます。

再利用ブロックの編集と注意点(5)

編集が終わりましたら右上に表示されている「保存」をクリックしてください。再利用ブロックの更新が完了します。

再利用ブロックの編集と注意点(6)

再利用ブロックの編集と注意点(7)

再利用ブロックを利用する場合の注意点

注意が必要なのが再利用ブロックの実態は一つしかなく、再利用ブロックが追加されている記事のいずれかで編集を行うと、同じ再利用ブロックが追加されている他の記事でも編集された内容が反映されるという点です。

先ほど編集を行った再利用ブロックが追加されている他の記事を開いてみます。

再利用ブロックの編集と注意点(8)

記事に追加されている再利用ブロックについて先ほど別の記事で行った編集内容が反映されていることが確認できます。

再利用ブロックの編集と注意点(9)

ブロックが追加されているすべての記事で常に同じ内容が表示されているのは便利な面もありますが不便な面もあります。もし再利用ブロックを追加したあと、他の記事に追加した再利用ブロックに影響を与えずに編集を行いたい場合は、後ほど解説する一般ブロックに変換をしてから編集を行ってください。

再利用ブロックの一覧画面から編集する

再利用ブロックを編集する二つ目の方法は再利用ブロックの一覧画面から編集する方法です。いずれかの記事の編集画面を表示したあと、画面右上に表示されている「?」をクリックしてください。

再利用ブロックの一覧画面から編集する(1)

再利用ブロックの一覧画面から編集する(2)

表示されたメニューの中から「すべての再利用ブロックを管理」をクリックしてください。

再利用ブロックの一覧画面から編集する(3)

作成されたブロックの一覧画面が表示されます。

再利用ブロックの一覧画面から編集する(4)

編集したいブロックにマウスを合わせ、表示されたメニューの中から「編集」をクリックしてください。

再利用ブロックの一覧画面から編集する(5)

再利用ブロックの編集画面が表示されました。

再利用ブロックの一覧画面から編集する(6)

今回はリストに 6 番目の項目を追加します。

再利用ブロックの一覧画面から編集する(7)

編集が終わりましたら画面右上に表示されている「更新」をクリックしてください。

再利用ブロックの一覧画面から編集する(8)

ブロックが更新されました。

再利用ブロックの一覧画面から編集する(9)

ここで編集した内容は、この再利用ブロックを追加しているすべての記事で自動的に反映されます。それでは再利用ブロックを追加している記事の一つを開いてみます。

再利用ブロックの一覧画面から編集する(10)

先ほど行った変更内容が反映されていることが確認できました。

再利用ブロックを通常ブロックに変換する

再利用ブロックを記事に追加したあと、同じ再利用ブロックを追加している他の記事に影響を与えないように再利用ブロックを編集するには、再利用ブロックを通常ブロックに変換します。

それでは試してみます。新しい記事を作成し、再利用ブロックを追加してください。

再利用ブロックを通常ブロックに変換する(1)

再利用ブロックを通常ブロックに変換します。再利用ブロックを選択したあと、上部の「?」をクリックしてください。

再利用ブロックを通常ブロックに変換する(2)

表示されたメニューの中の「通常のブロックに変換」をクリックしてください。

再利用ブロックを通常ブロックに変換する(3)

ブロックの内容はそのままで、再利用ブロックから通常ブロックに変換されました。(変換されたのはこの記事に追加した再利用ブロックだけで、他の記事に追加されている再利用ブロックは何も変わりません)。

再利用ブロックを通常ブロックに変換する(4)

通常の「リスト」ブロックですので、自由に編集することができます。編集した内容が他のブロックに影響することはありません。再利用ブロックをテンプレートのように利用して、記事に追加したあとは他へ影響せずに自由に編集したい場合にはここで紹介した通常ブロックへの変換を行ってください。

-- --

ブロックエディタで追加したブロックを複製する方法、および再利用ブロックに追加して利用す方法について解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。