Portfolio

カスタムブロック作成 チュートリアル

カスタムブロック作成のチュートリアル

開発環境構築

  1. localでローカル環境を構築
  2. プラグインディレクトリにカスタムブロックの雛形を生成
$ npx @wordpress/create-block@latest todo-list
$ cd todo-list
$ npm start
  1. ダッシュボードにログインし、プラグインを有効化する

edit.jsを編集

edit.jsの初期状態

export default function Edit() {
	return <div {...useBlockProps()}>Hello, World!</div>;
}

編集後

import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import "./editor.scss";
import { TextControl } from "@wordpress/components";

export default function Edit({ attributes, setAttributes }) {
	const { message } = attributes;
	return (
		<p {...useBlockProps()}>
			<TextControl
				value={message}
				onChange={(value) => {
					setAttributes({ message: value });
				}}
			/>
		</p>
	);
}

save.jsを編集

save.js初期状態

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

export default function save() {
	return (
		<p { ...useBlockProps.save() }>
			{ 'Repo – hello from the saved content!' }
		</p>
	);
}

編集後

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

console.log("wwww");
export default function save({ attributes }) {
	const { message } = attributes;
	return <p {...useBlockProps.save()}>{message}</p>;
}

block.jsonを編集

block.json編集後

	"supports": {
		"html": false,
		"align": true,
		"color": {
			"background": true,
			"gradients": true,
			"link": true,
			"text": true
		},
		"typography": {
			"fontSize": true
		},
		"spacing": {
			"margin": true,
			"padding": true
		}
	},
	"attributes": {
		"message": {
			"type": "string",
			"default": "Hello WordPress!",
			"source": "text"
		}
	},

参考リンク

記事一覧

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

関連記事

All Post »