Portfolio

カスタムブロック 今日の日付を表示するブロック

開発環境構築

  1. Docker Desktopをインストール、起動
  2. デスクトップにフォルダを作成し、vscodeで開く
  3. コマンド
npx @wordpress/create-block --wp-env my-current-date
  1. wp-env起動、WordPressインストール
cd my-current-date/
npx wp-env start
npm start

エラー：
RPC failed; curl 56 OpenSSL SSL_read: Connection was reset, errno 10054

解決方法：

// gitのglobal設定で『post buffer』という設定の数値を上げる
git config --global http.postBuffer 524288000

カスタムブロック作成

block.json

	"attributes": {
		"fallbackCurrentDate": {
			"type": "string",
			"source": "text",
			"className": ".wp-block-create-block-my-current-date__currentDate"
		}
	},

edit.js

import { useEffect } from "react";
import { useState } from "@wordpress/element";
import { useBlockProps } from "@wordpress/block-editor";
import { Button, Modal, DatePicker } from "@wordpress/components";
import "./editor.scss";

export default function Edit({ attributes, setAttributes }) {
	const { fallbackCurrentDate } = attributes;

	// 現在の日付を取得し、文字列であることを確認する
	const currentYear = new Date().toLocaleDateString().replace(/\//g, ".");

	// モーダルの初期値をfalseに設定
	const [isOpen, setIsOpen] = useState(false);

	// 日付の初期値をカレンダーの選択日によって更新する関数
	const updateSelectedDateFunc = (selected) => {
		const updateSelected = new Date(selected)
			.toLocaleDateString()
			.replace(/\//g, ".");
		setAttributes({ fallbackCurrentDate: updateSelected });
	};

	// ブロックロードのとき、fallbackCurrentYear がまだ設定されていなければ、
	// 現在の年に設定する
	useEffect(() => {
		if (!fallbackCurrentDate) {
			setAttributes({ fallbackCurrentDate: currentYear });
		}
	}, [fallbackCurrentDate]);

	return (
		<div {...useBlockProps()}>
			<p
				className="wp-block-create-block-my-current-date__currentDate"
				value={fallbackCurrentDate}
				onChange={(value) => {
					setAttributes({ fallbackCurrentDate: value });
				}}
			>
				{fallbackCurrentDate}
			</p>
			<Button
				variant="secondary"
				className="wp-block-create-block-my-current-date__btn"
				onClick={() => setIsOpen(true)}
			>
				更新
			</Button>
			{isOpen && (
				<Modal onRequestClose={() => setIsOpen(false)}>
					<p>日付選択</p>
					<DatePicker
						onChange={(selected) => updateSelectedDateFunc(selected)}
					/>
				</Modal>
			)}
		</div>
	);
}

save.js

import { useBlockProps } from "@wordpress/block-editor";

export default function save({ attributes }) {
	const { fallbackCurrentDate } = attributes;
	return (
		<div {...useBlockProps.save()}>
			<p
				className="wp-block-create-block-my-current-date__currentDate"
				value={fallbackCurrentDate}
			>
				{fallbackCurrentDate}
			</p>
		</div>
	);
}

レンダリング結果

コードエディタ

<!-- wp:create-block/my-current-date -->
<div class="wp-block-create-block-my-current-date"><p class="wp-block-create-block-my-current-date__currentDate" value="2024.7.25">2024.7.25</p></div>
<!-- /wp:create-block/my-current-date -->

参考

記事一覧

Block Bindings API トップへ
ブロック作成メモ トップへ

関連記事

All Post »