作成するもの

ここでは、あなたが作成するものを簡単に紹介します。

作成するもの

完成したプロジェクトは、WordPress Playgroundでインタラクションすることも、クイックスタートガイドを使用して、ローカルのWordPress環境に完全なブロックプラグインをインストールすることもできます。

前提条件

このチュートリアルを完了するには、次のものが必要です：

  • 1. コードエディタ
  • 2. Node.js開発ツール
  • 3. ローカルWordPress環境

これらのアイテムのいずれかがない場合は、ブロック開発環境のドキュメントが開始するのに役立ちます。すべての準備が整ったら、ここに戻ってきてください。

このチュートリアルでは、wp-envを使用してローカルのWordPress開発環境を作成します。ただし、上記の前提条件を満たす任意の開発環境を使用しても構いません。

ブロックのスキャフォールディング

Copyright Date Blockを作成する最初のステップは、@wordpress/create-blockパッケージを使用して初期ブロック構造をスキャフォールディングすることです。

このパッケージの使用方法については、create-blockの始め方のドキュメントを確認してください。 

  2. したがって、ブロックプラグインを配置するディレクトリを選択するか、オプションで「Block Tutorial」という新しいフォルダを作成します。ターミナルを開き、`````cd`````に移動します。次に、次のコマンドを実行します。  
  4. `````wp-env`````を使用していない場合は、代わりにターミナルを使用してローカルWordPressインストールの`````plugins/`````フォルダに移動し、次のコマンドを実行します。   
  7. ``````bash
  8. npx @wordpress/create-block@latest copyright-date-block --variant=dynamic
  9. cd copyright-date-block
  10. `

このコマンドを実行すると、プラグインフォルダ内にcopyright-date-blockという名前の新しいディレクトリが作成されます。このディレクトリには、ブロックをカスタマイズするために必要なすべての初期ファイルが含まれています。

このコマンドは、copyright-date-blockをスラッグとして持つブロックの基本構造も設定します。このスラッグは、WordPress内でブロックを一意に識別します。

コマンドが--variant=dynamicフラグを使用していることに気付いたかもしれません。これは、create-blockに動的にレンダリングされたブロックをスキャフォールディングしたいことを伝えます。このチュートリアルの後半では、動的および静的レンダリングについて学び、このブロックに静的レンダリングを追加します。

WordPress管理のプラグインページに移動し、プラグインがアクティブであることを確認します。次に、新しいページまたは投稿を作成し、Copyright Date Blockを挿入できることを確認します。挿入後はこのように見えるはずです。

エディタ内のスキャフォールディングされたブロック

ファイルの確認

スキャフォールディングされたブロックを修正する前に、プラグインのファイル構造を確認することが重要です。コードエディタでプラグインフォルダを開きます。

ブロックプラグインを構成するファイル

次に、ブロックのファイル構造のドキュメントを確認して、各ファイルの役割を詳しく理解してください。今は圧倒されているかもしれませんが、このチュートリアルを通じて各ファイルの使い方を学びます。

動的ブロックをスキャフォールディングしたため、save.jsファイルは表示されません。チュートリアルの後半で、このファイルをプラグインに追加して静的レンダリングを有効にしますので、お楽しみに。

初期設定

最もシンプルなCopyright Date Blockを作成することから始めましょう。これは、著作権記号（©）と現在の年を表示する動的にレンダリングされたブロックです。また、ユーザーがフォントサイズやテキストカラーを変更できるようにいくつかのコントロールを追加します。

次のステップに進む前に、プラグインディレクトリ内のターミナルでnpm run startを実行します。このコマンドは、/srcフォルダ内の各ファイルの変更を監視します。ファイルを保存するたびに、ブロックのビルドファイルが更新されます。

ブロックエディタ用のJavaScriptを使うのドキュメントを確認して、詳細を学んでください。

block.jsonの更新

  3. ``````bash
  4. {
  5.    "$schema": "https://schemas.wp.org/trunk/block.json",
  6.    "apiVersion": 3,
  7.    "name": "create-block/copyright-date-block",
  8.    "version": "0.1.0",
  9.    "title": "Copyright Date Block",
  10.    "category": "widgets",
  11.    "icon": "smiley",
  12.    "description": "Example block scaffolded with Create Block tool.",
  13.    "example": {},
  14.    "supports": {
  15.    "html": false
  16.    },
  17.    "textdomain": "copyright-date-block",
  18.    "editorScript": "file:./index.js",
  19.    "editorStyle": "file:./index.css",
  20.    "style": "file:./style-index.css",
  21.    "render": "file:./render.php",
  22.    "viewScript": "file:./view.js"
  23. }
  24. `

block.jsonのドキュメントを確認して、このファイルの紹介を受けてください。

このスキャフォールディングプロセスでこのファイルが作成されたため、Copyright Date Blockのニーズに合わせていくつかの更新が必要です。

ブロックのアイデンティティの変更

アイコンを削除し、より適切な説明を追加することから始めます。後でカスタムアイコンを追加します。

  • 1. iconの行を削除します。
  • 2. 説明を「サイトの著作権日を表示します。」に更新します。
  • 3. ファイルを保存します。

エディタを更新すると、ブロックにスマイリーフェイスのアイコンがなくなり、説明が更新されていることがわかります。

エディタ内の更新された情報を持つブロック

ブロックサポートの追加

次に、ユーザーがブロックのフォントサイズとテキストカラーを制御できるように、いくつかのブロックサポートを追加します。

カスタム機能を構築する前に、常にネイティブのブロックサポートを使用するようにしてください。このアプローチは、ブロック間で一貫した編集体験を提供し、ブロックは数行のコードでコア機能の恩恵を受けます。 

  3. ``````bash
  4. "supports": {
  5.    "color": {
  6.    "background": false,
  7.    "text": true
  8.    },
  9.    "html": false,
  10.    "typography": {
  11.    "fontSize": true
  12.    }
  13. },
  14. `

"text": trueでテキストカラーサポートを有効にすると、背景色もデフォルトで有効になります。これを有効にしておくこともできますが、このチュートリアルでは必須ではないため、"background": falseを手動で設定できます。

ファイルを保存し、エディタでブロックを選択します。これで、設定サイドバーにカラーとタイポグラフィのパネルが表示されるようになります。設定を変更して、何が起こるか見てみましょう。

ブロックサポートを持つエディタ内のブロック

不要なコードの削除

シンプルさのために、Copyright Date Blockのスタイリングは、カラーとタイポグラフィのブロックサポートによって完全に制御されます。このブロックにはフロントエンドのJavaScriptもありません。したがって、block.jsonファイルにスタイルシートやviewScriptを指定する必要はありません。

  • 1. editorStyleの行を削除します。
  • 2. styleの行を削除します。
  • 3. viewScriptの行を削除します。
  • 4. ファイルを保存します。

エディタを更新すると、ブロックのスタイリングが現在のテーマに一致することがわかります。

デフォルトスタイリングのないエディタ内のブロック

すべてをまとめる

最終的なblock.jsonファイルは次のようになります： 

  1. {
  2.    "$schema": "https://schemas.wp.org/trunk/block.json",
  3.    "apiVersion": 3,
  4.    "name": "create-block/copyright-date-block",
  5.    "version": "0.1.0",
  6.    "title": "Copyright Date Block",
  7.    "category": "widgets",
  8.    "description": "Display your site's copyright date.",
  9.    "example": {},
  10.    "supports": {
  11.    "color": {
  12.    "background": false,
  13.    "text": true
  14.    },
  15.    "html": false,
  16.    "typography": {
  17.    "fontSize": true
  18.    }
  19.    },
  20.    "textdomain": "copyright-date-block",
  21.    "editorScript": "file:./index.js",
  22.    "render": "file:./render.php"
  23. }

index.jsの更新

ブロック自体の機能を構築する前に、もう少しクリーンアップを行い、ブロックにカスタムアイコンを追加しましょう。

index.jsファイルを開きます。これはブロックのメインJavaScriptファイルで、クライアントで登録するために使用されます。クライアント側とサーバー側の登録については、ブロックの登録のドキュメントで詳しく学べます。

registerBlockType関数を見てみましょう。この関数は、ブロックの名前を受け取り、block.jsonファイルからインポートしたものを取得し、ブロック構成オブジェクトを受け取ります。 

  1. import Edit from './edit';
  2. import metadata from './block.json';
  4. registerBlockType( metadata.name, {
  5.    edit: Edit,
  6. } );

デフォルトでは、オブジェクトにはeditプロパティのみが含まれていますが、iconを含む多くのプロパティを追加できます。これらのプロパティのほとんどはblock.jsonで既に定義されていますが、カスタムSVGを使用するにはここでアイコンを指定する必要があります。

カスタムアイコンの追加

https://wordpress.github.io/gutenberg/?path=/story/icons-icon—libraryからカレンダーアイコンを使用して、次のように関数にSVGを追加します： 

  1. const calendarIcon = (
  2.    <svg
  3.    viewBox="0 0 24 24"
  4.    xmlns="http://www.w3.org/2000/svg"
  5.    aria-hidden="true"
  6.    focusable="false"
  7.    >
  8.    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 16c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V7h15v12zM9 10H7v2h2v-2zm0 4H7v2h2v-2zm4-4h-2v2h2v-2zm4 0h-2v2h2v-2zm-4 4h-2v2h2v-2zm4 0h-2v2h2v-2z"></path>
  9.    </svg>
  10. );
  12. registerBlockType( metadata.name, {
  13.    icon: calendarIcon,
  14.    edit: Edit
  15. } );

すべてのブロックアイコンは24ピクセルの正方形である必要があります。上記のviewBoxパラメータに注意してください。 

  2. ![カスタムアイコンを持つエディタ内のブロック](https://cdn.hedaai.com/projects/wordpress/1892f257cdcde5a0c62a115da3a10b43.png_big1500.jpeg)  
  4. この時点で、ブロックのアイコンと説明は正しく、ブロックサポートによりフォントサイズとテキストカラーを変更できます。さて、ブロックの実際の機能に進む時です。  
  5.  <a name="updating-edit-js"></a>
  8. ### edit.jsの更新
  10. [`````edit.js`````](d6901ef4a6b50cb5.md#edit-js)ファイルは、ブロックがエディタでどのように機能し、表示されるかを制御します。現在、ユーザーは「Copyright Date Block – エディタからこんにちは！」というメッセージを見ています。それを変更しましょう。  
  12. ファイルを開くと、`````Edit()`````関数がデフォルトメッセージを持つ段落タグを返すことがわかります。  
  15. ``````bash
  16. export default function Edit() {
  17.    return (
  18.    <p { ...useBlockProps() }>
  19.    { __(
  20.    'Copyright Date Block – hello from the editor!',
  21.    'copyright-date-block-demo'
  22.    ) }
  23.    </p>
  24.    );
  25. }
  26. `

見た目は少し複雑ですが、実際にはそうではありません。

  • useBlockProps()は、エディタに必要なすべてのCSSクラスとスタイルをブロックのラッパーに出力します。これには、以前に追加したブロックサポートによって提供されたスタイルが含まれます。
  • ()は、テキスト文字列の国際化に使用されます。

ブロックラッパーのドキュメントを確認して、ブロックのマークアップラッパーが適切な属性を持つことを確認するための入門ガイドを参照してください。

このブロックの主な目的は、著作権記号（©）と現在の年を表示することです。したがって、最初に現在の年を文字列形式で取得する必要があります。これは次のコードで実行できます。 

  1. const currentYear = new Date().getFullYear().toString();

次に、関数を更新して正しい情報を表示します。 

  1. export default function Edit() {
  2.    const currentYear = new Date().getFullYear().toString();
  4.    return (
  5.    <p { ...useBlockProps() }>© { currentYear }</p>
  6.    );
  7. }
  2. ![エディタ内の正しい内容を表示するブロック](https://cdn.hedaai.com/projects/wordpress/332baacef3c130d1bd6c7d4fe4153239.png_big1500.jpeg)  
  3.  <a name="updating-render-php"></a>
  6. ### render.phpの更新
  8. ブロックがエディタで正常に動作している間、フロントエンドではデフォルトのブロックメッセージがまだ表示されています。これを修正するために、[`````render.php`````](d6901ef4a6b50cb5.md#render-php)ファイルを開くと、次のようになります。  
  11. ``````bash
  12. <?php
  13. ...
  14. ?>
  15. <p <?php echo get_block_wrapper_attributes(); ?>>
  16.    <?php esc_html_e( 'Copyright Date Block – hello from a dynamic block!', 'copyright-date-block' ); ?>
  17. </p>
  18. `

エディタのuseBlockProps()関数と同様に、get_block_wrapper_attributes()は、ブロックのラッパーに必要なすべてのCSSクラスとスタイルを出力します。更新が必要なのはコンテンツだけです。

date( "Y" )を使用して現在の年をPHPで取得でき、render.phpは次のようになります。 

  1. <?php
  2. ...
  3. ?>
  4. <p <?php echo get_block_wrapper_attributes(); ?>>© <?php echo date( "Y" ); ?></p>

ファイルを保存し、ブロックがエディタとフロントエンドの両方で正しく表示されることを確認します。

クリーンアップ

ブロックをスキャフォールディングするためにcreate-blockパッケージを使用すると、必要のないファイルが含まれることがあります。このチュートリアルの場合、ブロックはスタイルシートやフロントエンドのJavaScriptを使用しません。プラグインのsrc/フォルダを次のアクションでクリーンアップします。

  • 1. edit.jsファイルで、editor.scssをインポートする行を削除します。
  • 2. index.jsファイルで、style.scssをインポートする行を削除します。
  • 3. editor.scss、style.scss、view.jsファイルを削除します。

最後に、未保存の変更がないことを確認し、npm run startコマンドを終了します。npm run buildを実行してコードを最適化し、プロダクション準備を整えます。

完全に機能するWordPressブロックを構築しましたが、ここで止まる必要はありません。次のセクションでは、機能を追加し、静的レンダリングを有効にします。

ブロック属性の追加

作成したCopyright Date Blockは現在の年を表示しますが、開始年も表示したい場合はどうでしょうか？

作成するもの

この機能は、ユーザーがブロックのどこかに開始年を入力する必要があります。また、オンまたはオフに切り替える機能も必要です。

これをさまざまな方法で実装できますが、すべてブロック属性を必要とします。属性を使用すると、ブロックのカスタムデータを保存でき、そのデータを使用してブロックのマークアップを変更できます。

この開始年機能を有効にするには、開始年を保存するための1つの属性と、開始年を表示するかどうかをWordPressに伝えるための別の属性が必要です。

block.jsonの更新

ブロック属性は一般的にblock.jsonファイルで指定されます。したがって、ファイルを開き、exampleプロパティの後に次のセクションを追加します。 

  1. "example": {},
  2. "attributes": {
  3.    "showStartingYear": {
  4.    "type": "boolean"
  5.    },
  6.    "startingYear": {
  7.    "type": "string"
  8.    }
  9. },

属性を定義する際には、typeを示す必要があります。この場合、showStartingYearはtrueまたはfalseである必要があるため、booleanに設定されています。startingYearは単なる文字列です。

ファイルを保存し、エディタに進むことができます。

edit.jsの更新

  2. - ユーザーが開始年を入力し、機能をオンまたはオフに切り替え、これらの設定を属性として保存できるユーザーインターフェースを追加します。 
  3. - 定義された属性に応じて正しいコンテンツを表示するようにブロックを更新します。
  6. #### ユーザーインターフェースの追加
  8. このチュートリアルの初めに、ブロックサポートを追加して、ブロックの設定サイドバーに自動的にカラーとタイポグラフィのパネルを作成しました。`````InspectorControls`````コンポーネントを使用して独自のカスタムパネルを作成できます。
  11. ##### インスペクターコントロール
  13. `````InspectorControls`````は、[`````@wordpress/block-editor`````](/read/wordpress/7a5a5d104aefa7c3.md)パッケージに属しているため、`````edit.js`````ファイルにコンポーネント名を14行目に追加してインポートできます。結果は次のようになります。  
  16. ``````bash
  17. import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
  18. `

次に、Edit関数を更新して、現在のブロックコンテンツと「Testing」というテキストを含むInspectorControlsコンポーネントを返します。すべてをFragment（<></>）でラップして、適切なJSX構文を確保できます。結果は次のようになります。 

  1. export default function Edit() {
  2.    const currentYear = new Date().getFullYear().toString();
  4.    return (
  5.    <>
  6.    <InspectorControls>
  7.    Testing
  8.    </InspectorControls>
  9.    <p { ...useBlockProps() }>© { currentYear }</p>
  10.    </>
  11.    );
  12. }

ファイルを保存し、エディタを更新します。ブロックを選択すると、設定サイドバーに「Testing」メッセージが表示されるはずです。

設定サイドバーにメッセージが表示される

コンポーネントとパネル

次に、カスタムパネルと開始年機能のユーザーインターフェースを追加するために、いくつかのコアコンポーネントを使用します。PanelBody、TextControl、ToggleControlを@wordpress/componentsパッケージからインポートする必要があります。 

  3. ``````bash
  4. import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
  5. `

次に、「Testing」メッセージをPanelBodyコンポーネントでラップし、titleパラメータを「Settings」に設定します。追加のパラメータオプションについては、コンポーネントドキュメントを参照してください。 

  1. export default function Edit() {
  2.    const currentYear = new Date().getFullYear().toString();
  4.    return (
  5.    <>
  6.    <InspectorControls>
  7.    <PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
  8.    Testing
  9.    </PanelBody>
  10.    </InspectorControls>
  11.    <p { ...useBlockProps() }>© { currentYear }</p>
  12.    </>
  13.    );
  14. }

ファイルを保存し、エディタを更新します。新しい設定パネルが表示されるはずです。

設定サイドバーにカスタムパネルが表示される

テキストコントロール

次のステップは、「Testing」メッセージをユーザーがstartingYear属性を設定できるTextControlコンポーネントに置き換えることです。ただし、Edit()関数に2つのパラメータを含める必要があります。

  • attributesは、ブロックのすべての属性を含むオブジェクトです。
  • setAttributesは、属性の値を更新するための関数です。

これらのパラメータを含めることで、showStartingYearとstartingYear属性を取得できます。 

  3. ``````bash
  4. export default function Edit( { attributes, setAttributes } ) {
  5.    const { showStartingYear, startingYear } = attributes;
  6.    ...
  7. `

Copyright Date Blockに関連するすべての属性を表示するには、console.log( attributes );をEdit()関数の先頭に追加します。これは、カスタムブロックを構築およびテストする際に便利です。

これで、「Testing」メッセージを削除し、TextControlを追加できます。次の内容を含める必要があります：

  • 1. 「Starting year」に設定されたlabelプロパティ
  • 2. 属性startingYearに設定されたvalueプロパティ
  • 3. 値が変更されるたびにstartingYear属性を更新するonChangeプロパティ

すべてをまとめると、Edit()関数は次のようになります。 

  1. export default function Edit( { attributes, setAttributes } ) {
  2.    const { showStartingYear, startingYear } = attributes;
  3.    const currentYear = new Date().getFullYear().toString();
  5.    return (
  6.    <>
  7.    <InspectorControls>
  8.    <PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
  9.    <TextControl
  10.    label={ __(
  11.    'Starting year',
  12.    'copyright-date-block'
  13.    ) }
  14.    value={ startingYear || '' }
  15.    onChange={ ( value ) =>
  16.    setAttributes( { startingYear: value } )
  17.    }
  18.    />
  19.    </PanelBody>
  20.    </InspectorControls>
  21.    <p { ...useBlockProps() }>© { currentYear }</p>
  22.    </>
  23.    );
  24. }

valueプロパティの値がstartingYear || ''であることに気付いたかもしれません。シンボル||は、論理和（論理的選言）演算子と呼ばれます。これは、startingYearが空であるときにReactで警告を防ぎます。制御されたコンポーネントと制御されていないコンポーネントの詳細を参照してください。

ファイルを保存し、エディタを更新します。設定パネルにテキストフィールドが存在することを確認します。開始年を追加し、ページを更新すると、値が保存されることを確認します。

設定サイドバーで新しいStarting Yearフィールドを編集しているライブビュー

トグルコントロール

次に、開始年機能をオンまたはオフに切り替えるトグルを追加します。これは、ToggleControlコンポーネントを使用してshowStartingYear属性を設定することで実現できます。次の内容を含める必要があります：

  • 1. 「Show starting year」に設定されたlabelプロパティ
  • 2. 属性showStartingYearに設定されたcheckedプロパティ
  • 3. トグルがチェックまたはチェック解除されるたびにshowStartingYear属性を更新するonChangeプロパティ

showStartingYearがtrueのときのみ「Starting year」テキスト入力を表示するように更新することもできます。これは、&&論理演算子を使用して実行できます。 

  3. ``````bash
  4. export default function Edit( { attributes, setAttributes } ) {
  5.    const { showStartingYear, startingYear } = attributes;
  6.    const currentYear = new Date().getFullYear().toString();
  8.    return (
  9.    <>
  10.    <InspectorControls>
  11.    <PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
  12.    <ToggleControl
  13.    checked={ !! showStartingYear }
  14.    label={ __(
  15.    'Show starting year',
  16.    'copyright-date-block'
  17.    ) }
  18.    onChange={ () =>
  19.    setAttributes( {
  20.    showStartingYear: ! showStartingYear,
  21.    } )
  22.    }
  23.    />
  24.    { showStartingYear && (
  25.    <TextControl
  26.    label={ __(
  27.    'Starting year',
  28.    'copyright-date-block'
  29.    ) }
  30.    value={ startingYear || '' }
  31.    onChange={ ( value ) =>
  32.    setAttributes( { startingYear: value } )
  33.    }
  34.    />
  35.    ) }
  36.    </PanelBody>
  37.    </InspectorControls>
  38.    <p { ...useBlockProps() }>© { currentYear }</p>
  39.    </>
  40.    );
  41. }
  42. `

ファイルを保存し、エディタを更新します。トグルをクリックするとテキスト入力が表示され、ページを更新するとトグルがアクティブのままであることを確認します。

設定サイドバーで新しいShow Starting Yearトグルを編集しているライブビュー

ブロックコンテンツの更新

これまでに、開始年を追加し、関連するブロック属性を更新するためのユーザーインターフェースを作成しました。次に、エディタでブロックコンテンツを実際に更新する必要があります。

新しい変数displayDateを作成しましょう。showStartingYearがtrueで、ユーザーがstartingYearを提供した場合、displayDateにはstartingYearとcurrentYearがエムダッシュで区切られて含まれる必要があります。そうでない場合は、currentYearを表示します。

コードは次のようになります。 

  1. let displayDate;
  3. if ( showStartingYear && startingYear ) {
  4.    displayDate = startingYear + '–' + currentYear;
  5. } else {
  6.    displayDate = currentYear;
  7. }
  2. 次に、`````displayDate`````の代わりに`````currentYear`````変数を使用するようにブロックコンテンツを更新する必要があります。  
  4. `````Edit()`````関数は次のようになります。  
  7. ``````bash
  8. export default function Edit( { attributes, setAttributes } ) {
  9.    const { showStartingYear, startingYear } = attributes;
  10.    const currentYear = new Date().getFullYear().toString();
  12.    let displayDate;
  14.    if ( showStartingYear && startingYear ) {
  15.    displayDate = startingYear + '–' + currentYear;
  16.    } else {
  17.    displayDate = currentYear;
  18.    }
  20.    return (
  21.    <>
  22.    <InspectorControls>
  23.    <PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
  24.    <ToggleControl
  25.    checked={ !! showStartingYear }
  26.    label={ __(
  27.    'Show starting year',
  28.    'copyright-date-block'
  29.    ) }
  30.    onChange={ () =>
  31.    setAttributes( {
  32.    showStartingYear: ! showStartingYear,
  33.    } )
  34.    }
  35.    />
  36.    { showStartingYear && (
  37.    <TextControl
  38.    label={ __(
  39.    'Starting year',
  40.    'copyright-date-block'
  41.    ) }
  42.    value={ startingYear || '' }
  43.    onChange={ ( value ) =>
  44.    setAttributes( { startingYear: value } )
  45.    }
  46.    />
  47.    ) }
  48.    </PanelBody>
  49.    </InspectorControls>
  50.    <p { ...useBlockProps() }>© { displayDate }</p>
  51.    </>
  52.    );
  53. }
  54. `

ファイルを保存し、エディタを更新します。設定パネルで変更を加えると、ブロックコンテンツが正しく更新されることを確認します。

設定サイドバーの新しいフィールドによってブロックコンテンツが更新されるライブビュー

render.phpの更新

エディタは素晴らしいですが、フロントエンドに開始年機能がまだ追加されていません。render.phpファイルを更新してこれを修正しましょう。 

  2. この変数は、`````startingYear`````属性の値と`````$current_year`````変数をエムダッシュで区切って表示するか、`````showStartingYear`````属性が`````false`````の場合は`````$current_year`````だけを表示します。  
  4. `````render.php`````で3つの変数が公開されており、これを使用してブロックの出力をカスタマイズできます：  
  6. - `````$attributes`````（配列）：ブロック属性。 
  7. - `````$content`````（文字列）：ブロックのデフォルトコンテンツ。 
  8. - `````$block`````（[WP_Block](https://developer.wordpress.org/reference/classes/wp_block/)）：ブロックインスタンス。  
  10. コードは次のようになります。  
  13. ``````bash
  14. if ( ! empty( $attributes['startingYear'] ) && ! empty( $attributes['showStartingYear'] ) ) {
  15.    $display_date = $attributes['startingYear'] . '–' . $current_year;
  16. } else {
  17.    $display_date = $current_year;
  18. }
  19. `

次に、$display_dateの代わりに$current_year変数を使用するようにブロックコンテンツを更新する必要があります。

最終的なrender.phpファイルは次のようになります。 

  1. <?php
  2. $current_year = date( "Y" );
  4. if ( ! empty( $attributes['startingYear'] ) && ! empty( $attributes['showStartingYear'] ) ) {
  5.    $display_date = $attributes['startingYear'] . '–' . $current_year;
  6. } else {
  7.    $display_date = $current_year;
  8. }
  9. ?>
  10. <p <?php echo get_block_wrapper_attributes(); ?>>
  11.    © <?php echo esc_html( $display_date ); ?>
  12. </p>

ファイルを保存し、正しいブロックコンテンツがサイトのフロントエンドに表示されることを確認します。

動的にレンダリングされたカスタムブロックを正常に構築しました。これは、ブロックサポート、コアWordPressコンポーネント、およびカスタム属性を利用しています。多くの状況では、著作権日を表示するブロックに追加機能を持たせるために、これ以上のことは必要ありません。

ただし、次のセクションでは、ブロックに静的レンダリングを追加します。この演習では、ブロックデータがWordPressにどのように保存され、プラグインが誤って無効にされた場合のフォールバックを提供します。

静的レンダリングの追加

ブロックは動的レンダリング、静的レンダリング、またはその両方を利用できます。これまでに構築したブロックは動的にレンダリングされています。そのブロックのマークアップと関連する属性はデータベースに保存されていますが、HTML出力は保存されていません。

静的にレンダリングされたブロックは、常にブロックのマークアップ、属性、および出力をデータベースに保存します。ブロックは、データベースに静的出力を保存しながら、フロントエンドで動的にさらに強化されることもあります。

エディタ内でコードエディタに切り替えると、次のようになります。 

  1. <!-- wp:create-block/copyright-date-block {"showStartingYear":true,"startingYear":"2017"} /-->

段落ブロックのような静的にレンダリングされたブロックと比較してください。 

  1. <!-- wp:paragraph -->
  2. <p>This is a test.</p>
  3. <!-- /wp:paragraph -->

段落のHTMLは投稿コンテンツに保存され、データベースに保存されます。

動的および静的レンダリングの詳細については、基本的なドキュメントを参照してください。ほとんどのブロックは動的または静的にレンダリングされますが、両方の方法を利用するブロックを構築することもできます。

静的レンダリングを追加する理由

動的にレンダリングされたブロックに静的レンダリングを追加すると、render.phpファイルはフロントエンドの出力を制御し続けますが、ブロックのHTMLコンテンツはデータベースに保存されます。これは、プラグインがサイトから削除された場合でもコンテンツが残ることを意味します。このCopyright Date Blockの場合、コンテンツはカスタムHTMLブロックに戻り、簡単に段落ブロックに変換できます。

ブロックタイプが存在しないときのエディタ内のエラーメッセージ

すべての状況で必要ではありませんが、動的にレンダリングされたブロックに静的レンダリングを追加することで、プラグインが意図せず無効にされた場合の役立つフォールバックを提供できます。

また、ブロックマークアップがブロックパターンやテーマテンプレートに含まれている状況を考えてみてください。ユーザーがそのテーマをインストールしたり、Copyright Date Blockがインストールされていないパターンを使用した場合、ブロックが利用できないという通知が表示されますが、コンテンツは引き続き表示されます。

静的レンダリングを追加することは、ブロックコンテンツがWordPressにどのように保存され、レンダリングされるかを探求する良い方法でもあります。

保存関数の追加

まず、save.jsという新しいファイルをsrc/フォルダに追加します。このファイルに次の内容を追加します。 

  1. import { useBlockProps } from '@wordpress/block-editor';
  3. export default function save() {
  4.    return (
  5.    <p { ...useBlockProps.save() }>
  6.    { 'Copyright Date Block – hello from the saved content!' }
  7.    </p>
  8.    );
  9. }

これは元のedit.jsファイルに似たものになるはずで、追加情報についてはブロックラッパーのドキュメントを参照できます。

次に、index.jsファイルでこのsave()関数をインポートし、registerBlockType()関数に保存プロパティを追加します。更新されたファイルの簡略化されたビューは次のようになります。 

  1. import save from './save';
  3. ...
  5. registerBlockType( metadata.name, {
  6.    icon: calendarIcon,
  7.    edit: Edit,
  8.    save
  9. } );

オブジェクトのプロパティを定義する際、プロパティ名と変数名が同じ場合は、ショートハンドプロパティ名を使用できます。これが、上記のコードがsaveをsave: saveの代わりに使用している理由です。 

  2. ![エディタ内のブロック検証エラーメッセージ](https://cdn.hedaai.com/projects/wordpress/63c08b0541d76ae5d4d61ec63aaa9671.png_big1500.jpeg)  
  4. 心配しないでください。このエラーは予想されるものです。ブラウザのインスペクタを開くと、次のメッセージが表示されるはずです。  
  6. ![コンソール内のブロック検証エラーメッセージ](https://cdn.hedaai.com/projects/wordpress/cfd9ed31cd7e2786e1f79d52bad3e3cf.png_big1500.jpeg)  
  8. このブロック検証エラーは、`````save()`````関数がブロックコンテンツを返しますが、以前に保存されたブロックが動的であったため、ブロックマークアップにHTMLが保存されていないために発生します。現在のマークアップは次のようになります。  
  11. ``````bash
  12. <!-- wp:create-block/copyright-date-block {"showStartingYear":true,"startingYear":"2017"} /-->
  13. `

次のステップでsave()関数を更新すると、これらのエラーがさらに発生します。単に「ブロックの回復を試みる」をクリックし、ページを更新してください。

ブロックの回復を実行した後、コードエディタを開くと、マークアップが次のようになります。 

  1. <!-- wp:create-block/copyright-date-block {"showStartingYear":true,"startingYear":"2017"} -->
  2. <p class="wp-block-create-block-copyright-date-block">Copyright Date Block – hello from the saved content!</p>
  3. <!-- /wp:create-block/copyright-date-block -->

静的レンダリングを使用してブロックを構築する際に、ブロック検証エラーが発生することがよくありますが、それは問題ありません。save()関数の出力は、投稿コンテンツのHTMLと正確に一致する必要があります。機能を追加するにつれて、同期が取れなくなる可能性があります。ブロックの構築が完全に終了したときに検証エラーがない限り、すべて問題ありません。

save.jsの更新

次に、save()関数の出力を更新して正しい内容を表示しましょう。edit.jsで使用されているのと同じアプローチをコピーすることから始めます。

  • 1. attributesパラメータを関数に追加します
  • 2. showStartingYearおよびstartingYear変数を定義します
  • 3. currentYear変数を定義します
  • 4. currentYear、showStartingYear、startingYearの値に応じてdisplayDate変数を定義します

結果はこのようになります。 

  1. export default function save( { attributes } ) {
  2.    const { showStartingYear, startingYear } = attributes;
  3.    const currentYear = new Date().getFullYear().toString();
  5.    let displayDate;
  7.    if ( showStartingYear && startingYear ) {
  8.    displayDate = startingYear + '–' + currentYear;
  9.    } else {
  10.    displayDate = currentYear;
  11.    }
  13.    return (
  14.    <p { ...useBlockProps.save() }>© { displayDate }</p>
  15.    );
  16. }

ファイルを保存してエディタを更新します。「ブロックの回復を試みる」をクリックし、ページを更新します。コードエディタを確認すると、ブロックのマークアップは次のようになります。 

  1. <!-- wp:create-block/copyright-date-block {"showStartingYear":true,"startingYear":"2017"} -->
  2. <p class="wp-block-create-block-copyright-date-block">© 2017–2023</p>
  3. <!-- /wp:create-block/copyright-date-block -->

この時点で、作業が完了したように見えるかもしれません。ブロックの内容は現在、データベースにHTMLとして保存されており、フロントエンドの出力は動的にレンダリングされています。しかし、まだ対処すべきいくつかのことがあります。

ユーザーが2023年にページにブロックを追加し、その後2024年にページを編集しに戻った場合を考えてみてください。フロントエンドは期待通りに更新されますが、エディタではブロックの検証エラーが発生します。save()関数は2024年であることを知っていますが、データベースに保存されたブロックの内容はまだ2023年のままです。

次のセクションでこれを修正しましょう。

静的にレンダリングされたブロックでの動的コンテンツの処理

一般的に、静的にレンダリングされたブロックでは動的コンテンツを避けることが望ましいです。これは、動的レンダリングを指す際に「動的」という用語が使用される理由の一部です。

とはいえ、このチュートリアルでは両方のレンダリング方法を組み合わせており、年が変わるときにブロックの検証エラーを回避するためにもう少しコードが必要です。

問題の根本は、currentYear変数がsave()関数内で動的に設定されていることです。代わりに、これは関数内の静的変数であるべきであり、追加の属性で解決できます。

新しい属性の追加

  3. ``````bash
  4. "attributes": {
  5.    "fallbackCurrentYear": {
  6.    "type": "string"
  7.    },
  8.    "showStartingYear": {
  9.    "type": "boolean"
  10.    },
  11.    "startingYear": {
  12.    "type": "string"
  13.    }
  14. },
  15. `

次に、save.jsファイルを開き、新しいfallbackCurrentYear属性をcurrentYearの代わりに使用します。更新されたsave()関数は次のようになります。 

  1. export default function save( { attributes } ) {
  2.    const { fallbackCurrentYear, showStartingYear, startingYear } = attributes;
  4.    let displayDate;
  6.    if ( showStartingYear && startingYear ) {
  7.    displayDate = startingYear + '–' + fallbackCurrentYear;
  8.    } else {
  9.    displayDate = fallbackCurrentYear;
  10.    }
  12.    return (
  13.    <p { ...useBlockProps.save() }>© { displayDate }</p>
  14.    );
  15. }

では、fallbackCurrentYearが未定義の場合はどうなりますか？ 

  2. 著作権記号だけを返すのではなく、`````fallbackCurrentYear`````が設定されていない場合は`````null`````を返す条件を追加しましょう。データベースに不完全なデータを保存するよりも、HTMLを保存しない方が一般的に良いです。  
  4. 最終的な`````save()`````関数は次のようになります。  
  7. ``````bash
  8. export default function save( { attributes } ) {
  9.    const { fallbackCurrentYear, showStartingYear, startingYear } = attributes;
  11.    if ( ! fallbackCurrentYear ) {
  12.    return null;
  13.    }
  15.    let displayDate;
  17.    if ( showStartingYear && startingYear ) {
  18.    displayDate = startingYear + '–' + fallbackCurrentYear;
  19.    } else {
  20.    displayDate = fallbackCurrentYear;
  21.    }
  23.    return (
  24.    <p { ...useBlockProps.save() }>© { displayDate }</p>
  25.    );
  26. }
  27. `
  3. #### edit.jsでの属性の設定
  5. `````save()`````関数は新しい`````fallbackCurrentYear`````を使用するようになったので、どこかで設定する必要があります。`````Edit()`````関数を使用しましょう。  
  7. `````edit.js`````ファイルを開き、`````Edit()`````関数の他の属性と一緒に`````fallbackCurrentYear`````変数を最初に定義します。次に、関数内で何が起こっているかを確認します。  
  9. ブロックがエディタに読み込まれると、`````currentYear`````変数が定義されます。この関数はこの変数を使用してブロックの内容を設定します。  
  11. 次に、ブロックが読み込まれるときに`````fallbackCurrentYear`````属性を`````currentYear`````に設定します（属性がすでに設定されていない場合）。  
  14. ``````bash
  15. if ( currentYear !== fallbackCurrentYear ) {
  16.    setAttributes( { fallbackCurrentYear: currentYear } );
  17. }
  18. `

これで動作しますが、ブロックが初期化されるときにこのコードが一度だけ実行されるように改善できます。これを行うには、useEffect Reactフックを使用できます。このフックの使用方法については、Reactのドキュメントを参照してください。

まず、次のコードでuseEffectをインポートします。 

  1. import { useEffect } from 'react';

次に、setAttribute()コードをuseEffectでラップし、このコードをEdit()関数のcurrentYear定義の後に配置します。結果は次のようになります。 

  1. export default function Edit( { attributes, setAttributes } ) {
  2.    const { fallbackCurrentYear, showStartingYear, startingYear } = attributes;
  4.    // Get the current year and make sure it's a string.
  5.    const currentYear = new Date().getFullYear().toString();
  7.    // When the block loads, set the fallbackCurrentYear attribute to the
  8.    // current year if it's not already set.
  9.    useEffect( () => {
  10.    if ( currentYear !== fallbackCurrentYear ) {
  11.    setAttributes( { fallbackCurrentYear: currentYear } );
  12.    }
  13.    }, [ currentYear, fallbackCurrentYear, setAttributes ] );
  15.    ...

ブロックがエディタで初期化されると、fallbackCurrentYear属性が即座に設定されます。この値はsave()関数で利用可能になり、正しいブロックの内容が表示され、ブロックの検証エラーは発生しません。

唯一の注意点は、年が変わるときです。2023年にページに著作権日ブロックが追加され、2024年に編集された場合、fallbackCurrentYear属性はもはやcurrentYearと等しくなくなり、属性は2024に自動的に更新されます。これにより、save()関数によって返されるHTMLが更新されます。

ブロックの検証エラーは発生しませんが、エディタはページに変更が加えられたことを検出し、更新を促します。

render.phpの最適化

最終ステップはrender.phpファイルを最適化することです。currentYearおよびfallbackCurrentYear属性が同じであれば、ブロックの内容を動的に作成する必要はありません。すでにデータベースに保存されており、render.phpファイル内の$content変数を介して利用可能です。

したがって、currentYearおよびfallbackCurrentYearが一致しない場合は、生成されたコンテンツをレンダリングするようにファイルを更新します。 

  1. $current_year = date( "Y" );
  3. // Determine which content to display.
  4. if ( isset( $attributes['fallbackCurrentYear'] ) && $attributes['fallbackCurrentYear'] === $current_year ) {
  6.    // The current year is the same as the fallback, so use the block content saved in the database (by the save.js function).
  7.    $block_content = $content;
  8. } else {
  10.    // The current year is different from the fallback, so render the updated block content.
  11.    if ( ! empty( $attributes['startingYear'] ) && ! empty( $attributes['showStartingYear'] ) ) {
  12.    $display_date = $attributes['startingYear'] . '–' . $current_year;
  13.    } else {
  14.    $display_date = $current_year;
  15.    }
  17.    $block_content = '<p ' . get_block_wrapper_attributes() . '>© ' . esc_html( $display_date ) . '</p>';
  18. }
  20. echo wp_kses_post( $block_content );

これで完了です！動的および静的レンダリングの両方を利用するブロックができました。

まとめ

このチュートリアルを完了し、自分自身の著作権日ブロックを構築したことをおめでとうございます。この旅を通じて、WordPressブロック開発の基礎をしっかりと身につけ、独自のブロックを構築する準備が整いました。

最終的な参考として、このチュートリアルの完全なコードは、GitHubのブロック開発の例リポジトリで入手できます。

今、スキルを磨くことを目指しているのか、より高度なプロジェクトに取り組むのか、最新のWordPressトレンドを追い続けるのかにかかわらず、以下のリソースがブロック開発スキルの向上に役立ちます：

覚えておいてください、すべての専門家はかつて初心者でした。学び続け、実験し、そして何よりもWordPressでの構築を楽しんでください。