この記事では、「WordPressブロックのフロントエンドで外部APIデータのレンダリング」に関する前の記事に記載されています。前の投稿では、外部APIを取得し、WordPress Webサイトのフロントエンドで取得したデータをレンダリングするブロックと統合する方法を学びました。
問題は、それを実装する方法が、WordPressブロックエディターでデータを表示できないことです。言い換えれば、ブロックをページに挿入できますが、プレビューは表示されません。ブロックは、リリース後にのみ見ることができます。
前の投稿で作成したサンプルブロックプラグインを確認しましょう。今回は、WordPressのJavaScriptを使用し、エコシステムを反応して、バックエンドブロックエディターでデータを取得およびレンダリングします。
WordPressブロックで外部APIを使用しておよびrender_callback関数に集中する必要があります。
EditSave編集
したがって、前の投稿で行ったのと同じことをカバーしますが、今回はFrontEndSaveに投稿する前にブロックエディターにプレビューを見ることができます。
ブロックプロパティ これがメインコンテンツ（レンダリング）をそらすため、前の投稿で
関数プロパティの説明を意図的に省略しました。
editコンソールに
setAttributes関数が必要なだけで、コードのpropsオブジェクトからそれらを分解します。前の投稿では、rapidapiのコードを変更して、APIデータをsetAttributes()で保存できるようにしました。 Propsは読み取り専用なので、直接変更することはできません。
ブロック属性は状態変数に似ており、反応のsetStateに類似していますが、クライアントでは反応が実行されますが、setAttributes()は、投稿を保存した後にWordPressデータベースに属性を永続的に保存するために使用されます。したがって、私たちがする必要があるのは、それらをattributes.dataに保存してから、それらをuseState()変数の初期値として呼び出すことです。
前の投稿で使用したHTMLコードをfootball-rankings.php>にコピーして貼り付け、JavaScriptの背景に編集するために編集を行います。前の投稿でフロントエンドスタイルとスクリプトの2つの追加ファイルを作成したことを覚えていますか？今日のアプローチに従ってください。これらのファイルを作成する必要はありません。代わりに、すべてをEdit関数に移動できます。
フルコード
`` `javascript
"@wordpress/element"から{ueseState}をインポートします。
デフォルト関数編集（Props）のエクスポート{
const {attributes、setattributes} = props;
const [apidata、setapidata] = uesestate（astributes.data）;
https://www.php.cn/link/a2a750ff64f34c66249d0f7d3dd42004 "、 オプション ）） .then（（respons）=＆gt; respons.json（）） .then（（response）=＆gt; { newData = {...応答}; setattributes（{data：newData}）; Setapidata（NewData）; //新しいデータを使用してステータスを変更します }） .catch（（err）=＆gt; console.error（err））; }
return（
我已经从@wordpress/element中包含了React钩子usestate（），而不是从React库中使用它。这是因为如果我以常规方式加载，它会为我使用的每个区块下载React。但是，如果我使用@wordpress/element」は、単一のソースからロードされます。
今回は、コードをuseEffect()にラッピングする代わりに、ボタンがクリックされたときにのみ呼び出される関数に巻き付けて、取得したデータをリアルタイムでプレビューできるようにしました。リーグテーブルを条件付きでレンダリングするために、apiDataと呼ばれる状態変数を使用しました。そのため、ボタンがクリックされてデータが取得されると、apiDataの新しいデータをfetchData()に設定し、利用可能なサッカーランキングテーブルHTMLで再レンダリングします。
投稿が保存され、ページが更新されると、リーグテーブルが消えることに気付くでしょう。これは、Null状態（null）をapiDataの初期値として使用するためです。投稿が保存されると、プロパティはattributes.dataオブジェクトに保存されます。これは、以下に示すようにuseState()変数の初期値として呼び出されます。
const [apiData, setApiData] = useState(attributes.data);
関数ではほぼ同じことを行いますが、少し変更します。たとえば、フロントエンドでは「データを取得」ボタンも必要ありませんし、save関数でチェックしたため、apiData状態変数も必要ありません。ただし、JSXを条件付きにレンダリングするためにeditをチェックするためにランダムapiData変数が必要です。そうしないと、未定義のエラーがスローされ、ブロックエディターUIが空白になります。 attributes.data
`` `javascript
デフォルト機能保存（Props）のエクスポート{
const {astributes} = props;
const apidata = attributes.data;
return（
apidata &&（// apidataが利用可能な場合にのみレンダリング
...テーブルデータのレンダリング。これは基本的に編集関数のコードと同じです...
如果您在区块已存在于区块编辑器中后修改save`関数、次のエラーが表示されます：
これは、保存されたコンテンツのタグが新しい関数のタグと異なるためです。開発モードであるため、現在のページからブロックを削除して新しいブロックとして再挿入する方が簡単です。このようにして、更新されたコードが使用され、すべてが同期するために復元されます。 save
メソッドを使用すると、出力が動的であり、render_callback関数ではなくPHPによって制御されるため、これは回避できます。したがって、各方法には独自の利点と短所があります。 save
関数で何をすべきでないかについての詳細な説明を提供します。 save
css /* 目标所有带有 data-title="Football Rankings" 的区块 */ .block-editor-block-list__layout .block-editor-block-list__block.wp-block[data-title="Football Rankings"] { /* 默认情况下，区块被限制在 650px 最大宽度加上其他设计特定代码 */ max-width: unset; /* ... 其他样式 ... */ } フロントエンドブロックスタイル
/
.wp-block-post-content .wp-block-football-rankings-league-table {
/ ...スタイル.../
}
リーグスタンディング{ /
/
}
`` <em>これを</em> src/style.scss`に追加します。これは、エディターとフロントエンドのスタイルを担当しています。エディターのアクセスが必要なため、デモURLを共有できませんが、デモを見るためのビデオを録画しました：
我们将此添加到デモを見るととてもきれいですよね？これで、フロントエンドをレンダリングするだけでなく、APIデータを取得してブロックエディターにレンダリングする完全に機能的なブロックがあります。更新ボタンがあります。
ただし、WordPressブロックエディターを最大限に活用したい場合は、色、タイポグラフィ、間隔の設定などのコントロールをブロックするためのブロックUI要素をマッピングすることを検討する必要があります。これは、ブロック開発学習の旅の良い次のステップです。
以上がバックエンドのWordPressブロックで外部APIデータをレンダリングするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
