在客製化區塊中,新增預設圖片


這個需求是這樣的,

希望在客製化區塊當中設定預設圖片,

而這個圖片應該要與區塊再一起,而不是使用 WordPress 的媒體庫

因此我就需要把圖片放在與區塊相同的資料夾底下。

並且使用動態的方式把圖片匯入。

然而我通常都會把 attribute 寫在 block.json

也因為這樣,變成無法使用動態資料,以後應該要將 attribute 寫在 index.js!

學到一課!

因為 js 可以使用 import 的方式把檔案匯入

import defaultImageURL from './home-1.jpeg';

因此非常簡單就可以將圖片丟進檔案當中。

最後只需要在 attribute 的地方設定 default 的數值

attributes: {
		image: {
			type: "object",
			default: {
				url: defaultImageURL
			}
		}
	}

這樣就完成拉~

之後就可以在 edit.js 裡面使用 image.url 叫到預設圖片。


發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *



© 2023 平凡以上 版權所有