グーテンベルクで再利用可能なブロックを作成する方法

従来のエディターに代わってWordPressのバージョン5.0に付属していたGutenbergブロックエディターは、投稿とページを作成するというパラダイムを変更しました。 それらのそれぞれは、特定のタイプのコンテンツまたはブロックのセットで構成されています：テキスト、見出し、引用、リスト、ファイル、表、画像、表紙、画像ギャラリー、メディアとテキスト、ボタン、埋め込みなど、カスタマイズできます一部のプロパティは、非常に印象的なデザインをすばやく作成します。

したがって、たとえば、以下に示すセクションを挿入するのは、新しいカバーブロックを挿入するのと同じくらい簡単です。ここに、オレンジ色の100％不透明なフィルターを重ね合わせ、気に入ったメッセージとボタンを追加しました。

これはすべてGutenbergブロックエディターからのものであり、投稿を離れたり、HTMLコードをコピーして貼り付けたり編集したりする必要はありません。 これは、従来のWordPressエディターでは考えられませんでした。 カバーブロックが提供するさまざまな可能性について詳しく知りたい場合は、注目の画像とカバーブロックの違いについてこの記事を読むことをお勧めします。

ブロックエディタを使用すると、あらゆる種類の要素の組み合わせに基づいて、多くの新しいデザインの可能性があります。 そして、ページや投稿のデザインではるかに創造的で生産的になるために利用できる各ブロックによって提供されるさまざまな可能性を知るためにあなたの時間を少し費やすことはあなたに補償することを保証します。

ブロックエディタの大きな利点の1つは、使用可能なすべてのブロックによって提供されるさまざまなコンテンツを作成できるだけでなく、ブロックを再利用できることです。

コード、コンテンツ、およびデザインの再利用は、すべてのWeb開発者が以前の作業を活用し、時間を節約し、冗長性を減らすための効率の基本原則であることをすでにご存知でしょう。 また、Webサイト全体で統一された画像やスタイルを維持するのにも役立ちます。 あなたは私たちのウェブサイトを閲覧するだけで、それらの間の非常に類似したセクションのセットを見ることができます。同じスタイルですが、コンテンツが異なり、クライアントからの行動や推薦状が異なります。

以下で、再利用可能なブロックの作成がどのように機能するかを見てみましょう。

再利用可能なブロックを作成する

投稿またはページで作成したブロックは、再利用可能なブロックに変換できます。 これを行うには、問題のブロックを選択し、3点アイコンをクリックして、[再利用可能なブロックに追加]を選択します。

追加するブロックの名前を入力して保存するように求められます。

ブロックを再利用する

これで、投稿またはページで再利用可能なブロックの1つを使用する場合はいつでも、ブロックライブラリの[再利用可能]セクションで利用できます。

選択後、ブロックが挿入されます。 効果は、ブロックを作成したのと同じ投稿でそのブロックを複製した場合と同じです。

再利用可能なブロックを変更する

再利用可能なブロックは、他の通常のブロックのように変更できないことに注意してください。変更できるのは、[編集]ボタンをクリックすることだけです。

再利用可能なブロックを編集すると、現在の投稿に表示されるインスタンスだけでなく、ブロック自体もどこでも変更できます。 つまり、再利用可能なブロックで行った変更は、再利用可能なブロックを追加したすべての投稿とページにも適用されます。

確かにあなたは自分自身に問いかけます、私が追加したばかりのブロックに変更を加えるだけで、作成された残りのブロックには変更を加えないようにするにはどうすればよいですか？

通常のブロックに変換

Webサイトの残りの部分にあるブロックのすべてのインスタンスを変更せずに、追加したばかりの再利用ブロックを変更したい場合は、追加したばかりのブロックを通常のブロックに変換するオプションが常にあります。

この時点で、再利用されたブロックは再び元のタイプのブロックになります。 この場合、ブロックはカバーブロックに変換され、再利用可能なブロックを変更せずに、必要な変更を加えることができます。

再利用可能なブロックを管理する

作成する再利用可能なブロックごとに、指定した名前で、ブロックタイプの新しいカスタムコンテンツタイプがデータベースに作成されます。 ただし、いつでも直接、他の投稿タイプであるかのように作成された再利用可能なブロックを変更または削除できます。

これを行うには、[再利用可能なブロック]タブのブロックライブラリの最後にある[すべての再利用可能なブロックの管理]オプションをクリックします。

または、オプションの[すべての再利用可能なブロックを管理]から再利用可能なブロックのリストにアクセスするオプションもあります。これは、右上のメニューの3点アイコン[その他のツールとオプションを表示]にあります。

どちらの場合も、作成した再利用可能なブロックのリストを視覚化することができ、それらのそれぞれについて、他の投稿やページの場合と同じように、ブロックを変更または削除できます。

再利用可能なブロックに加えた変更は、それを使用するすべての投稿とページに自動的に適用されることに注意してください。

同様に、削除すると、再利用可能なブロックも、追加したすべてのページで自動的に削除されます（また、通常のブロックに再変換しませんでした）。

そして、これがあなたがあなたのウェブサイトのすべてのセクションをはるかに生産的かつ効率的に再利用して、あなたがそれを通して同じイメージとスタイルを保つことを確実にするために不可欠です。

次の投稿では、グーテンベルクを使用してブロックをエクスポートおよびインポートする方法についても説明します。 しかし、私の推奨事項は、グーテンベルクのコンテンツ作成コースにサインアップすることで、グーテンベルクについてさらに多くのトリックを学ぶことです。

UnsplashのNicolaFioravantiによる写真。