{"id":380,"date":"2021-05-27T07:51:25","date_gmt":"2021-05-27T07:51:25","guid":{"rendered":"https:\/\/aki-hamano.blog\/?p=380"},"modified":"2025-10-25T03:54:49","modified_gmt":"2025-10-25T03:54:49","slug":"gutenberg-plugin-page","status":"publish","type":"post","link":"https:\/\/aki-hamano.blog\/ja\/2021\/05\/27\/gutenberg-plugin-page\/","title":{"rendered":"Gutenberg Components\u3092\u4f7f\u3063\u3066\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u8a2d\u5b9a\u753b\u9762\u3092\u4f5c\u308b"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u306f\u3058\u3081\u306b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u958b\u767a\u3059\u308b\u6642\u306b\u3001\u6a5f\u80fd\u554f\u308f\u305a\u8a2d\u5b9a\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3059\u308b\u30b1\u30fc\u30b9\u306f\u591a\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u822c\u7684\u306b\u306f\u3001<code>add_options_page<\/code>\u30d5\u30c3\u30af\u306a\u3069\u3067\u7ba1\u7406\u753b\u9762\u306b\u72ec\u81ea\u30da\u30fc\u30b8\u3092\u8ffd\u52a0\u3057\u3001\u7b2c5\u5f15\u6570\u306b\u6307\u5b9a\u3057\u305f\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u5185\u3067\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u751f\u6210\u3059\u308b\u624b\u6cd5\u304c\u3068\u3089\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/wpdocs.osdn.jp\/%E7%AE%A1%E7%90%86%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AE%E8%BF%BD%E5%8A%A0\" target=\"_blank\" rel=\"noreferrer noopener\">\u7ba1\u7406\u30e1\u30cb\u30e5\u30fc\u306e\u8ffd\u52a0 &#8211; WordPress Codex \u65e5\u672c\u8a9e\u7248<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u3001\u30ab\u30b9\u30bf\u30e0\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306b\u3042\u305f\u3063\u3066\u7ba1\u7406\u753b\u9762\u3082<strong>React\uff08Gutenberg Components\uff09<\/strong>\u3067\u69cb\u7bc9\u3057\u3066\u307f\u305f\u6240\u3001\u601d\u3063\u3066\u3044\u305f\u3088\u308a\u30b7\u30f3\u30d7\u30eb\u306b\u958b\u767a\u3067\u304d\u305f\u305f\u3081\u3001\u958b\u767a\u306e\u4e2d\u3067\u5f97\u3089\u308c\u305f\u77e5\u898b\u3092\u3001\u30b5\u30f3\u30d7\u30eb\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u958b\u767a\u3059\u308b\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u5f62\u5f0f\u3067\u7d39\u4ecb\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u306a\u305cReact\u306a\u306e\u304b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ab\u30b9\u30bf\u30e0\u30d6\u30ed\u30c3\u30af\u958b\u767a\u3067\u3082\u306a\u3044\u306e\u306b\u3001\u306a\u305c\u308f\u3056\u308f\u3056React\u3092\u8a2d\u5b9a\u753b\u9762\u306b\u5c0e\u5165\u3059\u308b\u306e\u304b\u3001\u958b\u767a\u306e\u4e2d\u3067\u611f\u3058\u3089\u308c\u305f\u30e1\u30ea\u30c3\u30c8\u3092\u6319\u3052\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30f3\u30c6\u30f3\u30c4\u90e8\u5206\u3092Component\u3068\u3057\u3066\u5207\u308a\u3060\u305b\u308b<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f93\u6765\u306e\u624b\u6cd5\u3067\u306f\u3001PHP\u3067\u8a2d\u5b9a\u753b\u9762\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u30b4\u30ea\u30b4\u30ea\u66f8\u3044\u3066\u3044\u305f\u7b87\u6240\u3092\u5225\u30d5\u30a1\u30a4\u30eb\u306b\u5207\u308a\u3060\u3059\u4e8b\u304c\u3067\u304d\u3001\u30b3\u30fc\u30c9\u306e\u898b\u901a\u3057\u304c\u826f\u304f\u306a\u3063\u305f\u3068\u611f\u3058\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PHP\u3067\u3082class\u5316\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u3067\u591a\u5c11\u5206\u96e2\u306f\u51fa\u6765\u307e\u3059\u304c\u3001\u4f8b\u3048\u3070\u30bf\u30d6\u3067\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u5207\u308a\u66ff\u3048\u308b\u3088\u3046\u306a\u5834\u5408\u3067\u3042\u3063\u305f\u308a\u3001\u30da\u30fc\u30b8\u5185\u306b\u591a\u6570\u306e\u8a2d\u5b9a\u9805\u76ee\u304c\u3042\u3063\u305f\u5834\u5408\u306a\u3069\u3067\u30b3\u30fc\u30c9\u91cf\u304c\u5897\u3048\u305f\u6642\u306b\u3001React\u3067\u3042\u308c\u3070\u305d\u308c\u305e\u308c\u3092\u9069\u5ea6\u306a\u7c92\u5ea6\u3067Component\u5316\uff08\u5225\u30d5\u30a1\u30a4\u30eb\u5316\uff09\u3057\u3066\u3001\u9069\u5b9cimport\u3059\u308b\u3067\u5bfe\u51e6\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u72b6\u614b\u7ba1\u7406\u304c\u7c21\u5358<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f8b\u3048\u3070\u3001\u300c\u8a2d\u5b9aA\u304cOFF\u306e\u5834\u5408\u306f\u8a2d\u5b9aB\u306f\u975e\u8868\u793a\u306b\u3057\u305f\u3044\u300d\u306e\u3088\u3046\u306a\u52d5\u7684\u306a\u52d5\u304d\u3092\u6301\u305f\u305b\u305f\u3044\u5834\u5408\u3001\u5f93\u6765\u306e\u624b\u6cd5\u3067\u306fJavaScript\u3067\u4e00\u3064\u4e00\u3064\u30a4\u30d9\u30f3\u30c8\u51e6\u7406\u3092\u66f8\u3044\u3066\u3044\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React\u3067\u3042\u308c\u3070\u5404\u8a2d\u5b9a\u9805\u76ee\u306e\u72b6\u614b\u3092state\uff08\u5f8c\u8ff0\uff09\u3068\u3057\u3066\u7ba1\u7406\u3067\u304d\u3001state\u3092\u3082\u3068\u306b\u3057\u305f\u6761\u4ef6\u6587\u3092\u66f8\u304f\u3060\u3051\u3067\u5b9f\u73fe\u3067\u304d\u308b\u306e\u3067\u3001\u30b3\u30fc\u30c9\u91cf\u304c\u30b0\u30c3\u3068\u6e1b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">CSS\u304c\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u3044\u3044\u611f\u3058\u306b\u5f53\u305f\u3063\u3066\u3044\u308b<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Gutenberg Compoent\u306f\u3001\u305d\u308c\u305e\u308c\u306b\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u30b9\u30bf\u30a4\u30eb\u304c\u9069\u7528\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f8b\u3048\u3070\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u4ee3\u308f\u308a\u306b\u5229\u7528\u51fa\u6765\u308b <code>ToggleControl<\/code> \u3067\u3059\u304c\u3001\u308f\u3056\u308f\u3056\u30c8\u30b0\u30eb\u30dc\u30bf\u30f3\u7528\u306eCSS\u3092\u66f8\u304b\u306a\u304f\u3066\u3082\u3001Component\u3092import\u30fb\u8a2d\u7f6e\u3059\u308b\u3060\u3051\u3067\u3044\u3044\u611f\u3058\u306b\u8868\u793a\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u305d\u306e\u305f\u3081\u3001\u5c11\u306a\u3044CSS\u30b3\u30fc\u30c9\u3067\u7d71\u4e00\u611f\u306e\u3042\u308bUI\u3092\u4f5c\u6210\u3059\u308b\u4e8b\u304c\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5099\u8003<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u958b\u767a\u3059\u308b\u30b5\u30f3\u30d7\u30eb\u30d7\u30e9\u30b0\u30a4\u30f3\u306f\u3042\u304f\u307e\u3067\u521d\u6b69\u7684\u306a\u3082\u306e\u3067\u3059\u306e\u3067\u3001\u4e0d\u5341\u5206\u306a\u70b9\u3084\u6539\u5584\u70b9\u304c\u591a\u3005\u3042\u308a\u307e\u3059\u3002<br>\u30d6\u30e9\u30c3\u30b7\u30e5\u30a2\u30c3\u30d7\u3059\u308b\u305f\u3081\u306eTips\u306f\u6700\u7d42\u7ae0\u306e\u5fdc\u7528\u7de8\u306b\u8a18\u8f09\u3057\u3066\u3044\u307e\u3059\u306e\u3067\u3001\u4f59\u88d5\u304c\u3042\u308b\u65b9\u304c\u3044\u307e\u3057\u305f\u3089\u8a66\u3057\u3066\u307f\u3066\u4e0b\u3055\u3044\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u524d\u63d0\u3068\u306a\u308b\u77e5\u8b58\u30fb\u6280\u8853<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u8a2d\u5b9a\u753b\u9762\u4ed8\u304d\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u958b\u767a<\/li>\n\n\n\n<li>ES6\u3001JSX\u306e\u521d\u6b69\u7684\u306a\u77e5\u8b58<\/li>\n\n\n\n<li><code>npm<\/code>\u3092\u4f7f\u3063\u305f\u30ed\u30fc\u30ab\u30eb\u958b\u767a\u74b0\u5883\u306e\u69cb\u7bc9<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0a\u306e\u77e5\u8b58\u30fb\u6280\u8853\u304c\u3042\u308b\u4e8b\u3092\u524d\u63d0\u3068\u3057\u3066\u3001\u672c\u984c\u304b\u3089\u5916\u308c\u308b\u5185\u5bb9\u306f\u8a73\u3057\u304f\u8a18\u8f09\u3057\u3066\u3044\u307e\u305b\u3093\u306e\u3067\u3054\u4e86\u627f\u4e0b\u3055\u3044\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u958b\u767a\u3059\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u6982\u8981<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306f\u8a2d\u5b9a\u753b\u9762\u306e\u958b\u767a\u304c\u30e1\u30a4\u30f3\u30c6\u30fc\u30de\u3067\u3059\u306e\u3067\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u81f3\u6975\u30b7\u30f3\u30d7\u30eb\u306a\u6a5f\u80fd\u3092\u60f3\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5168\u30da\u30fc\u30b8\u306e\u53f3\u4e0b\u306b\u3001\u56fa\u5b9a\u30ec\u30a4\u30a2\u30a6\u30c8\u3067\u5e83\u544a\u3092\u8868\u793a\u3059\u308b<\/li>\n\n\n\n<li>\u5e83\u544a\u8868\u793a\u306e\u6709\u7121\u3001\u30c6\u30ad\u30b9\u30c8\u3001\u6587\u5b57\u30b5\u30a4\u30ba\u3092\u8a2d\u5b9a\u753b\u9762\u3067\u5909\u66f4\u51fa\u6765\u308b<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"737\" height=\"468\" src=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_01.png\" alt=\"\u958b\u767a\u3059\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u6982\u8981\" class=\"wp-image-432\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u958b\u767a\u3057\u305f\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u6574\u7406\u3057\u305f\u30bd\u30fc\u30b9\u306f\u3001\u4ee5\u4e0b\u30ea\u30dd\u30b8\u30c8\u30ea\u3067\u78ba\u8a8d\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/t-hamano\/my-gutenberg-admin-plugin\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/t-hamano\/my-gutenberg-admin-plugin<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">STEP1\uff1a\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30d9\u30fc\u30b9\u306e\u4f5c\u6210<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d7\u30e9\u30b0\u30a4\u30f3\u540d\uff08\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u540d\uff09\u306f <code>my-gutenberg-admin-plugin<\/code> \u3068\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress\u7ba1\u7406\u753b\u9762\u3067\u30d7\u30e9\u30b0\u30a4\u30f3\u3068\u3057\u3066\u8a8d\u8b58\u3055\u305b\u308b\u305f\u3081\u306e\u6700\u4f4e\u9650\u306e\u30d8\u30c3\u30c0\u30fc\u60c5\u5831\u3068\u3001\u3042\u308f\u305b\u3066\u4eca\u56de\u30e1\u30a4\u30f3\u3067\u958b\u767a\u3059\u308b\u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u3092\u8ffd\u52a0\u3059\u308b\u51e6\u7406\u3092\u8a18\u8ff0\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>{WordPress\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u30c7\u30a3\u30ec\u30af\u30c8\u30ea}\/wp-content\/plugins\/my-gutenberg-admin-plugin\/my-gutenberg-admin-plugin.php<\/code> \u306b\u3001\u4ee5\u4e0b\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre data-label=\"my-gutenberg-admin-plugin.php\" id=\"my-gutenberg-admin-plugin.php\" class=\"wp-block-code lang-php\"><code>&lt;?php\n\/**\n * Plugin Name: My Gutenberg Admin Plugin\n *\/\n\n\/\/ \u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u306e\u8ffd\u52a0\nfunction my_plugin_menu() {\n    add_options_page(\n        'My Gutenberg Admin Plugin', \/\/ \u30e1\u30cb\u30e5\u30fc\u3092\u9078\u629e\u3057\u305f\u6642\u306b\u30da\u30fc\u30b8\u306e\u30bf\u30a4\u30c8\u30eb\u30bf\u30b0\u306b\u8868\u793a\u3055\u308c\u308b\u30c6\u30ad\u30b9\u30c8\n        'My Gutenberg Admin Plugin', \/\/ \u30e1\u30cb\u30e5\u30fc\u3067\u8868\u793a\u3055\u308c\u308b\u30c6\u30ad\u30b9\u30c8\n        'administrator',             \/\/ \u30e1\u30cb\u30e5\u30fc\u3092\u4f7f\u7528\u51fa\u6765\u308b\u6a29\u9650\uff08\u4eca\u56de\u306f\u7ba1\u7406\u8005\uff09\n        'my-gutenberg-admin-plugin', \/\/ \u30b9\u30e9\u30c3\u30b0\u540d\uff08URL\u306e\u4e00\u90e8\u306b\u3082\u306a\u308b\uff09\n        'my_settings_page'           \/\/ \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\n    );\n}\nadd_action( 'admin_menu', 'my_plugin_menu' );\n\n\/\/ \u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\nfunction my_settings_page() {\n    echo '&lt;div id=\"my-gutenberg-admin-plugin\">&lt;\/div>';\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3053\u3067\u306e\u30dd\u30a4\u30f3\u30c8\u306f\u3001<code>add_options_page<\/code> \u306e\u7b2c5\u5f15\u6570\u306b\u6307\u5b9a\u3057\u305fcallback\u95a2\u6570\u3067\u3001<strong>ID\u4ed8\u304d\u306e\u7a7a\u306ediv\u30bf\u30b0\u306e\u307f\u3092\u51fa\u529b\u3057\u3066\u3044\u308b<\/strong>\u3068\u3044\u3046\u70b9\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u307e\u3067\u306e\u624b\u6cd5\u3067\u306f\u3001\u3053\u3053\u306b <code>form<\/code> \u30bf\u30b0\u3001<code>settings_fields<\/code> \/ <code>do_settings_sections<\/code> \/ <code>wp_nonce_field<\/code>\u95a2\u6570\u306a\u3069\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b4\u30ea\u30b4\u30ea\u3068\u8a2d\u5b9a\u753b\u9762\u3092\u66f8\u3044\u3066\u3044\u305f\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306f\u3001\u8a2d\u5b9a\u753b\u9762\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306f\u5168\u3066React\uff08Gutenberg Component\uff09\u3067\u751f\u6210\u3059\u308b\u306e\u3067\u3001\u30eb\u30fc\u30c8DOM\u30ce\u30fc\u30c9\u306e\u307f\u3092\u51fa\u529b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305a\u306f\u3053\u3053\u307e\u3067\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u3001WordPress\u7ba1\u7406\u753b\u9762\u3067\u30d7\u30e9\u30b0\u30a4\u30f3\u304c\u8a8d\u8b58\u3055\u308c\u3066\u304a\u308a\u3001\u30b5\u30a4\u30c9\u30e1\u30cb\u30e5\u30fc\u304b\u3089\u30d7\u30e9\u30b0\u30a4\u30f3\u30da\u30fc\u30b8\u3078\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3068\u7a7a\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308b\u4e8b\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"621\" src=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_02-840x621.png\" alt=\"\u7a7a\u30da\u30fc\u30b8\" class=\"wp-image-433\" srcset=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_02-840x621.png 840w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_02-768x568.png 768w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_02.png 1136w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">STEP2\uff1a\u30d3\u30eb\u30c9\u74b0\u5883\u306e\u69cb\u7bc9\u30fb\u6e96\u5099<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u8a2d\u5b9a\u753b\u9762\u306e\u958b\u767a\u306b\u3042\u305f\u3063\u3066\u3001ES6 + JSX\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u306e\u30d3\u30eb\u30c9\u74b0\u5883\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305a\u306f\u3001 <code>{WordPress\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u30c7\u30a3\u30ec\u30af\u30c8\u30ea}\/wp-content\/plugins\/my-gutenberg-admin-plugin\/<\/code> \u3067\u3001 <code>npm init<\/code> \u30b3\u30de\u30f3\u30c9\u3067 <code>package.json<\/code> \u3092\u751f\u6210\u3057\u307e\u3059\u3002<br>\u4eca\u56de\u306f\u30c6\u30b9\u30c8\u306a\u306e\u3067\u3001\u5168\u3066Yes\uff08Enter\u30ad\u30fc\u62bc\u4e0b\uff09\u3067\u9032\u3081\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d3\u30eb\u30c9\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u306b\u3064\u3044\u3066\u306f\u3001\u81ea\u524d\u3067 <code>webpack<\/code> \u306a\u3069\u3092\u7528\u610f\u3057\u3066\u3082\u3088\u3044\u3067\u3059\u304c\u3001\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u30cf\u30f3\u30c9\u30d6\u30c3\u30af\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\uff08<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/javascript\/js-build-setup\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript \u30d3\u30eb\u30c9\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/a>\uff09\u306b\u5f93\u3044\u3001 <code>@wordpress\/scripts<\/code> \u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>npm install --save-dev @wordpress\/scripts<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3042\u308f\u305b\u3066\u3001 <code>wp-scripts<\/code> \u306e\u30b3\u30de\u30f3\u30c9\u3092\u7c21\u5358\u306b\u5b9f\u884c\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u306b\u3001 <code>package.json<\/code> \u306e <code>scripts<\/code> \u306b <code>start<\/code> \u3068 <code>build<\/code> \u3092\u8a18\u8ff0\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code lang-json\"><code> \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\",\n    \"start\": \"wp-scripts start\",\n    \"build\": \"wp-scripts build\"\n  },<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u7d9a\u3044\u3066\u3001\u30a8\u30f3\u30c8\u30ea\u30dd\u30a4\u30f3\u30c8\u3068\u306a\u308bjs\u30d5\u30a1\u30a4\u30eb\u3068\u3001\u7ba1\u7406\u753b\u9762\u306b\u9069\u7528\u3059\u308bscss\u30d5\u30a1\u30a4\u30eb\u3092<code>src<\/code>\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u914d\u7f6e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>@wordpress\/scripts<\/code> \u30d1\u30c3\u30b1\u30fc\u30b8\u306f\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u3067 <code>src\/index.js<\/code> \u3092\u30a8\u30f3\u30c8\u30ea\u30dd\u30a4\u30f3\u30c8\u3068\u3057\u3001\u30d3\u30eb\u30c9\u30d5\u30a1\u30a4\u30eb\u3092<code>build\/<\/code> \u306b\u51fa\u529b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>\u2514\u2500\u2500 plugins\n    \u2514\u2500\u2500 my-gutenberg-admin-plugin\n        \u251c\u2500\u2500 src\n        \u2502    \u251c\u2500\u2500 index.js   \/\/ \u2190\u8ffd\u52a0\n        \u2502    \u2514\u2500\u2500 admin.scss \/\/ \u2190\u8ffd\u52a0\n        \u251c\u2500\u2500 my-gutenberg-admin-plugin.php\n        \u251c\u2500\u2500 package-lock.json\n        \u2514\u2500\u2500 package.json<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305f\u3001\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u8fbc\u307f\u30fb\u30d3\u30eb\u30c9\u78ba\u8a8d\u7528\u306b\u9069\u5f53\u306a\u30b3\u30fc\u30c9\u3092\u8a18\u8ff0\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre data-label=\"src\/index.js\" id=\"src\/index.js\" class=\"wp-block-code lang-js\"><code>\/\/ \u8a2d\u5b9a\u753b\u9762\u7528\u30b9\u30bf\u30a4\u30eb\nimport '.\/admin.scss';\n\n\/\/ JavaScript\u30d5\u30a1\u30a4\u30eb\u8aad\u307f\u8fbc\u307f\u78ba\u8a8d\nconsole.log('admin scripts loaded.')<\/code><\/pre>\n\n\n\n<pre data-label=\"src\/admin.scss\" id=\"src\/admin.scss\" class=\"wp-block-code lang-scss\"><code>\/\/ add_options_page\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3067\u51fa\u529b\u3057\u305fdiv\u30bf\u30b0\u306b\u3001\u9069\u5f53\u306a\u30b9\u30bf\u30a4\u30eb\u3092\u5f53\u3066\u3066\u307f\u308b\n#my-gutenberg-admin-plugin {\n    min-height: 300px;\n    border: 3px red solid;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3053\u3067\u4e00\u65e6\u30d3\u30eb\u30c9\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u5b9f\u884c\u3057\u3001build\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u30d5\u30a1\u30a4\u30eb\u304c\u751f\u6210\u3055\u308c\u308b\u4e8b\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>npm run build<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>\u2514\u2500\u2500 plugins\n    \u2514\u2500\u2500 my-gutenberg-admin-plugin\n        \u251c\u2500\u2500 build\n        \u2502   \u251c\u2500\u2500 index.asset.php \/\/ \u2190\u81ea\u52d5\u751f\u6210\n        \u2502   \u251c\u2500\u2500 index.css       \/\/ \u2190\u81ea\u52d5\u751f\u6210\n        \u2502   \u2514\u2500\u2500 index.js        \/\/ \u2190\u81ea\u52d5\u751f\u6210\n        \u251c\u2500\u2500 src\n        \u2502    \u251c\u2500\u2500 index.js\n        \u2502    \u2514\u2500\u2500 admin.scss\n        \u251c\u2500\u2500 my-gutenberg-admin-plugin.php\n        \u251c\u2500\u2500 package-lock.json\n        \u2514\u2500\u2500 package.json<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">STEP3\uff1a\u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u3078\u306e\u30d5\u30a1\u30a4\u30eb\u8aad\u307f\u8fbc\u307f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">STEP2\u3067\u751f\u6210\u3057\u305fjs\u30d5\u30a1\u30a4\u30eb\u30fbcss\u30d5\u30a1\u30a4\u30eb\u3092\u3001<a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/admin_enqueue_scripts\/\" target=\"_blank\" rel=\"noreferrer noopener\">admin_enqueue_scripts<\/a>\u30d5\u30c3\u30af\u3092\u4f7f\u3063\u3066\u3001\u4f5c\u6210\u3057\u305f\u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u306e\u307f\u3067\u8aad\u307f\u8fbc\u3080\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u3001 <code>my-gutenberg-admin-plugin.php<\/code> \u306b\u8ffd\u8a18\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre data-label=\"my-gutenberg-admin-plugin.php\" id=\"my-gutenberg-admin-plugin.php\" class=\"wp-block-code lang-php\"><code>\/\/ \uff5e\uff5e\u7701\u7565\uff5e\uff5e\n\n\/\/ \u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\nfunction my_settings_page() {\n    echo '&lt;div id=\"my-gutenberg-admin-plugin\">&lt;\/div>';\n}\n\nfunction my_admin_scripts( $hook_suffix ) {\n\n    \/\/ \u4f5c\u6210\u3057\u305f\u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u4ee5\u5916\u3067\u306f\u8aad\u307f\u8fbc\u307e\u306a\u3044\n    if ( 'settings_page_my-gutenberg-admin-plugin' !== $hook_suffix ) {\n        return;\n    }\n\n    \/\/ \u4f9d\u5b58\u30b9\u30af\u30ea\u30d7\u30c8\u30fb\u30d0\u30fc\u30b8\u30e7\u30f3\u304c\u8a18\u8ff0\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u307f\n    $asset_file = include plugin_dir_path( __FILE__ ) . '\/build\/index.asset.php';\n\n    \/\/ CSS\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u8fbc\u307f\n    wp_enqueue_style(\n        'my-gutenberg-admin-plugin-style',\n        plugin_dir_url( __FILE__ ) . '\/build\/index.css',\n        array( 'wp-components' ) \/\/ \u2190Gutenberg\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u30b9\u30bf\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u307f\n    );\n\n    \/\/ JavaScript\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u8fbc\u307f\n    wp_enqueue_script(\n        'my-gutenberg-admin-plugin-script',\n        plugin_dir_url( __FILE__ ) . '\/build\/index.js',\n        $asset_file&#91;'dependencies'],\n        $asset_file&#91;'version'],\n        true \/\/ &lt;\/body>`\u7d42\u4e86\u30bf\u30b0\u306e\u76f4\u524d\u3067\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u8aad\u307f\u8fbc\u3080\n    );\n}\nadd_action( 'admin_enqueue_scripts', 'my_admin_scripts' );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ab\u30b9\u30bf\u30e0\u30d6\u30ed\u30c3\u30af\u3084\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u958b\u767a\u3055\u308c\u305f\u4e8b\u306e\u3042\u308b\u65b9\u306b\u306f\u304a\u306a\u3058\u307f\u306e\u8a18\u8ff0\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u30dd\u30a4\u30f3\u30c8\u3068\u306a\u308b\u306e\u306fCSS\u3092\u8aad\u307f\u8fbc\u3080 <code>wp_enqueue_style<\/code> \u306e\u7b2c3\u5f15\u6570\u306b\u3001<strong>\u4f9d\u5b58\u30b9\u30bf\u30a4\u30eb\u3068\u3057\u3066 <code>wp-components<\/code> \u3092\u6307\u5b9a\u3059\u308b<\/strong>\u3068\u3044\u3046\u70b9\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ab\u30b9\u30bf\u30e0\u30d6\u30ed\u30c3\u30af\u958b\u767a\u3067\u30a8\u30c7\u30a3\u30bf\u5074\u306bCSS\u3092\u8aad\u307f\u8fbc\u307e\u305b\u308b\u6642\u3068\u306f\u9055\u3044\u3001\u660e\u793a\u7684\u306b\u6307\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3082\u3046\u4e00\u3064\u306e\u30dd\u30a4\u30f3\u30c8\u306f\u3001JavaScript\u3092\u8aad\u307f\u8fbc\u3080 <code>wp_enqueue_script<\/code> \u306e\u7b2c5\u5f15\u6570\u306btrue\u3092\u6307\u5b9a\u3057\u3001<strong><code>&lt;\/body&gt;<\/code> \u7d42\u4e86\u30bf\u30b0\u306e\u76f4\u524d\u3067\u30b9\u30af\u30ea\u30d7\u30c8\u304c\u8aad\u307f\u8fbc\u307e\u308c\u308b<\/strong>\u3088\u3046\u306b\u3057\u307e\u3059\u3002<br>\uff08\u7b2c5\u5f15\u6570\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u306f<code>true<\/code> \u2192 <code>&lt;head&gt;<\/code>\u30bf\u30b0\u5185\u3067\u8aad\u307f\u8fbc\u307e\u308c\u308b\uff09<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>true<\/code> \u3092\u6307\u5b9a\u3057\u306a\u3044\u3068\u3001\u30eb\u30fc\u30c8DOM\uff08 <code>&lt;div id=\"my-gutenberg-admin-plugin\"&gt;&lt;\/div&gt;<\/code> \uff09\u304c\u751f\u6210\u3055\u308c\u308b\u524d\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u304c\u8d70\u3063\u3066\u3057\u307e\u3044\u30a8\u30e9\u30fc\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3053\u307e\u3067\u3067\u6539\u3081\u3066\u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u3092\u78ba\u8a8d\u3057\u3066\u307f\u308b\u3068\u3001\u30d6\u30e9\u30a6\u30b6\u30b3\u30f3\u30bd\u30fc\u30eb\u306bJavaScript\u306e\u78ba\u8a8d\u7528\u30b3\u30fc\u30c9\u304c\u51fa\u529b\u3055\u308c\u3001\u307e\u305f\u30b3\u30f3\u30c6\u30f3\u30c4\u30a8\u30ea\u30a2\u306e\u30eb\u30fc\u30c8DOM\uff08 <code>#my-gutenberg-admin-plugin<\/code> \uff09\u306b\u30b9\u30bf\u30a4\u30eb\u304c\u5f53\u305f\u3063\u3066\u3044\u308b\u4e8b\u304c\u78ba\u8a8d\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"473\" src=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_03-840x473.png\" alt=\"\u30b3\u30f3\u30c6\u30f3\u30c4\u30a8\u30ea\u30a2\u306e\u30eb\u30fc\u30c8DOM\uff08 #my-gutenberg-admin-plugin \uff09\u306b\u30b9\u30bf\u30a4\u30eb\u304c\u5f53\u305f\u3063\u3066\u3044\u308b\" class=\"wp-image-434\" srcset=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_03-840x473.png 840w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_03-768x432.png 768w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_03.png 1317w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u78ba\u8a8d\u3057\u305f\u3089\u3001 <code>src\/admin.scss<\/code> \u306b\u8a18\u8ff0\u3057\u305f\u78ba\u8a8d\u7528\u30b9\u30bf\u30a4\u30eb\u306f\u524a\u9664\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<pre data-label=\"src\/admin.scss\" id=\"src\/admin.scss\" class=\"wp-block-code lang-scss\"><code>#my-gutenberg-admin-plugin {\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">STEP4\uff1a\u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u306e\u30d9\u30fc\u30b9\u30b3\u30fc\u30c9\u4f5c\u6210<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u3044\u3088\u3044\u3088\u3001React\uff08Gutenberg Components\uff09\u3092\u4f7f\u3063\u3066\u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u6295\u5165\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305a\u306f\u3001\u8a2d\u5b9a\u753b\u9762\u306e\u30e1\u30a4\u30f3\u3068\u306a\u308bComponent\u306b\u30bf\u30a4\u30c8\u30eb\u306e\u307f\u3092\u8a18\u8ff0\u3057\u3001\u30eb\u30fc\u30c8DOM\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b3\u30fc\u30c9\u3092\u8a18\u8ff0\u3059\u308b\u524d\u306b\u3001 <code>npm run start<\/code> \u30b9\u30af\u30ea\u30d7\u30c8\u3092\u5b9f\u884c\u3057\u3001\u30b3\u30fc\u30c9\u306e\u5909\u66f4\u3092\u76e3\u8996\u3057\u3066\u81ea\u52d5\u3067\u30d3\u30eb\u30c9\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u3066\u304a\u3044\u3066\u4e0b\u3055\u3044\u3002<\/p>\n\n\n\n<pre data-label=\"src\/index.js\" id=\"src\/index.js\" class=\"wp-block-code lang-jsx\"><code>\/\/ \u8a2d\u5b9a\u753b\u9762\u7528\u30b9\u30bf\u30a4\u30eb\nimport '.\/admin.scss';\n\n\/\/ render\u30e1\u30bd\u30c3\u30c9\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\nimport { render } from '@wordpress\/element';\n\n\/\/ Admin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\nconst Admin = () =&gt; {\n    return (\n        &lt;div className=\"wrap\"&gt;\n            &lt;h1&gt;\u30aa\u30d7\u30b7\u30e7\u30f3\u8a2d\u5b9a&lt;\/h1&gt;\n        &lt;\/div&gt;\n    );\n};\n\n\/\/ Admin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30eb\u30fc\u30c8DOM\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\nrender(\n    &lt;Admin \/&gt;,\n    document.getElementById( 'my-gutenberg-admin-plugin' )\n);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b63\u3057\u304f\u8a18\u8ff0\u3055\u308c\u3066\u3044\u308c\u3070\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30bf\u30a4\u30c8\u30eb\u304c\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30fb\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u4e8b\u304c\u78ba\u8a8d\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"334\" src=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_04-840x334.png\" alt=\"\u30bf\u30a4\u30c8\u30eb\u304c\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u30fb\u8868\u793a\u3055\u308c\u3066\u3044\u308b\" class=\"wp-image-435\" srcset=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_04-840x334.png 840w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_04-768x305.png 768w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_04.png 1007w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">STEP5\uff1aComponent\u3092\u4f7f\u3063\u305f\u8a2d\u5b9a\u9805\u76ee\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u672c\u683c\u7684\u306a\u958b\u767a\u306b\u5165\u308b\u524d\u306b\u3001\u6539\u3081\u3066\u4eca\u56de\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u6982\u8981\u3092\u518d\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5168\u30da\u30fc\u30b8\u306e\u53f3\u4e0b\u306b\u3001\u56fa\u5b9a\u30ec\u30a4\u30a2\u30a6\u30c8\u3067\u5e83\u544a\u3092\u8868\u793a\u3059\u308b<\/li>\n\n\n\n<li>\u5e83\u544a\u8868\u793a\u306e\u6709\u7121\u3001\u30c6\u30ad\u30b9\u30c8\u3001\u6587\u5b57\u30b5\u30a4\u30ba\u3092\u8a2d\u5b9a\u753b\u9762\u3067\u5909\u66f4\u51fa\u6765\u308b<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0a\u3092\u8e0f\u307e\u3048\u3066\u3001\u5404\u8a2d\u5b9a\u9805\u76ee\u3067\u4f7f\u3046Component\u3068\u4ed5\u69d8\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u6c7a\u5b9a\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u8a2d\u5b9a\u9805\u76ee\u540d<\/th><th>\u578b<\/th><th>\u521d\u671f\u5024<\/th><th>\u5165\u529b\u5f62\u5f0f<\/th><th>Component<\/th><\/tr><\/thead><tbody><tr><td>\u5e83\u544a\u3092\u8868\u793a\u3059\u308b<\/td><td>boolean<\/td><td>true<\/td><td>\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\uff08\u30c8\u30b0\u30eb\uff09<\/td><td><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/toggle-control\/\" target=\"_blank\" rel=\"noreferrer noopener\">ToggleControl<\/a><\/td><\/tr><tr><td>\u30c6\u30ad\u30b9\u30c8<\/td><td>string<\/td><td>\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059<\/td><td>\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9<\/td><td><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/text-control\/\" target=\"_blank\" rel=\"noreferrer noopener\">TextControl<\/a><\/td><\/tr><tr><td>\u6587\u5b57\u30b5\u30a4\u30ba<\/td><td>number<\/td><td>16<\/td><td>\u30ec\u30f3\u30b8<\/td><td><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/range-control\/\" target=\"_blank\" rel=\"noreferrer noopener\">RangeControl<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">attributes\u3092\u6301\u3063\u305f\u30ab\u30b9\u30bf\u30e0\u30d6\u30ed\u30c3\u30af\u3092\u958b\u767a\u3055\u308c\u305f\u65b9\u306b\u3068\u3063\u3066\u306f\u304a\u306a\u3058\u307f\u306eComponent\u3070\u304b\u308a\u3067\u3059\u304c\u3001\u3053\u308c\u3092\u30e1\u30a4\u30f3\u3068\u306a\u308bAdmin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u306b\u8ffd\u52a0\u3057\u3066\u3044\u304d\u307e\u3059\u3002<br>\u3053\u3053\u3067\u306f\u3001\u5404Component\u306eprops\u306f\u6700\u4f4e\u9650\u306e\u3082\u306e\u3060\u3051\u3092\u6307\u5b9a\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre data-label=\"src\/index.js\" id=\"src\/index.js\" class=\"wp-block-code lang-jsx\"><code>\/\/ \u8a2d\u5b9a\u753b\u9762\u7528\u30b9\u30bf\u30a4\u30eb\nimport '.\/admin.scss';\n\n\/\/ render\u30e1\u30bd\u30c3\u30c9\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\nimport { render } from '@wordpress\/element';\n\n\/\/ \uff08\u8ffd\u52a0\uff09Component\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\nimport {\n    ToggleControl,\n    TextControl,\n    RangeControl\n} from '@wordpress\/components';\n\n\/\/ Admin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\nconst Admin = () =&gt; {\n    return (\n        &lt;div className=\"wrap\"&gt;\n            &lt;h1&gt;\u30aa\u30d7\u30b7\u30e7\u30f3\u8a2d\u5b9a&lt;\/h1&gt;\n\n            {\/* \uff08\u8ffd\u52a0\uff09\u5404\u8a2d\u5b9a\u9805\u76ee\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 *\/}\n            &lt;ToggleControl\n                label=\"\u5e83\u544a\u3092\u8868\u793a\u3059\u308b\"\n            \/&gt;\n            &lt;TextControl\n                label=\"\u30c6\u30ad\u30b9\u30c8\"\n            \/&gt;\n            &lt;RangeControl\n                label=\"\u6587\u5b57\u30b5\u30a4\u30ba\"\n                min=\"10\"\n                max=\"30\"\n            \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\n\/\/ Admin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30eb\u30fc\u30c8DOM\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\nrender(\n    &lt;Admin \/&gt;,\n    document.getElementById( 'my-gutenberg-admin-plugin' )\n);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3053\u3067\u3001\u8ffd\u52a0\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8868\u793a\u3092\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"367\" src=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_05-840x367.png\" alt=\"\u8ffd\u52a0\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8868\u793a\u3092\u78ba\u8a8d\" class=\"wp-image-436\" srcset=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_05-840x367.png 840w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_05-768x335.png 768w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_05.png 1008w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">h1\u898b\u51fa\u3057\u306e\u4e0b\u306b\u4f59\u767d\u304c\u7121\u304b\u3063\u305f\u308a\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d0\u30e9\u30f3\u30b9\u304c\u60aa\u304b\u3063\u305f\u308a\u3059\u308b\u306e\u3067\u3001CSS\u3067\u8abf\u6574\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre data-label=\"src\/admin.scss\" id=\"src\/admin.scss\" class=\"wp-block-code lang-scss\"><code>#my-gutenberg-admin-plugin {\n    h1{\n        margin-bottom: 2em;\n    }\n    .components-base-control {\n        max-width: 400px;\n        margin-bottom: 20px;\n    }\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"367\" src=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_06-840x367.png\" alt=\"\u8ffd\u52a0\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8868\u793a\u3092\u78ba\u8a8d\" class=\"wp-image-437\" srcset=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_06-840x367.png 840w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_06-768x336.png 768w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_06.png 1007w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">STEP6\uff1a\u8a2d\u5b9a\u5024\u306estate\u7ba1\u7406<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5404\u8a2d\u5b9a\u9805\u76ee\u3067\u5165\u529b\u30fb\u5909\u66f4\u3055\u308c\u305f\u5024\u3092\u4fdd\u6301\u3059\u308b\u305f\u3081\u306b\u3001<strong>state<\/strong>\u3092\u5c0e\u5165\u3057\u307e\u3059\u3002<br>state\u3068\u306f\u3001\u3056\u3063\u304f\u308a\u3068\u8a00\u3046\u3068\u300c<strong>\u305d\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u6301\u3063\u3066\u3044\u308b\u72b6\u614b<\/strong>\u300d\u306e\u4e8b\u3067\u3001state\u3067\u4fdd\u6301\u3055\u308c\u305f\u5024\u306f\u3001\u5f8c\u3005\u306eSTEP\u3067\u306e\u4fdd\u5b58\u51e6\u7406\u306b\u3082\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305a\u306fstate\u3092\u5229\u7528\u3059\u308b\u305f\u3081\u306b <code>useState<\/code> \u30d5\u30c3\u30af\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\u3068\u3001state\u306e\u5ba3\u8a00\u3092\u884c\u3044\u307e\u3059\u3002<br>\u5f62\u5f0f\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import { useState } from '@wordpress\/element';\nconst &#91; state\u306e\u5909\u6570\u540d, state\u3092\u66f4\u65b0\u3059\u308b\u95a2\u6570\u540d ] = useState( state\u306e\u521d\u671f\u5024 );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u300cstate\u3092\u66f4\u65b0\u3059\u308b\u95a2\u6570\u540d\u300d\u306f\u3001\u6163\u4f8b\u7684\u306b\u300c<strong>set + state\u306e\u5909\u6570\u540d<\/strong>\u300d\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u305d\u3057\u3066\u3001state\u3092\u66f4\u65b0\u3059\u308b\u95a2\u6570\u540d\u304c\u4f8b\u3048\u3070 <code>setText<\/code>\u3067\u3042\u3063\u305f\u5834\u5408\u3001state\u306e\u66f4\u65b0\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u884c\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>setText ( '\u65b0\u3057\u3044\u30c6\u30ad\u30b9\u30c8' );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0a\u3092\u8e0f\u307e\u3048\u3066\u3001\u5404\u8a2d\u5b9a\u5024\u306estate\u306e\u5ba3\u8a00\u3068\u3001\u5404\u8a2d\u5b9a\u9805\u76ee\u306e\u521d\u671f\u5024\u3001\u8a2d\u5b9a\u9805\u76ee\u304c\u5165\u529b\u30fb\u5909\u66f4\u3055\u308c\u305f\u6642\u306bstate\u3092\u66f4\u65b0\u3059\u308b\u51e6\u7406\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<br>attributes\u3092\u6301\u3063\u305f\u30ab\u30b9\u30bf\u30e0\u30d6\u30ed\u30c3\u30af\u3092\u958b\u767a\u3055\u308c\u305f\u4e8b\u306e\u3042\u308b\u65b9\u3067\u3042\u308c\u3070\u3001\u300c<strong>\u3044\u3064\u3082setAttributes\u3057\u3066\u3044\u308b\u7b87\u6240\u3092setXXX\u306b\u7f6e\u304d\u63db\u3048\u308b<\/strong>\u300d\u3068\u8a00\u3046\u3068\u30a4\u30e1\u30fc\u30b8\u3057\u3084\u3059\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<pre data-label=\"src\/index.js\" id=\"src\/index.js\" class=\"wp-block-code lang-jsx\"><code>\/\/ \u8a2d\u5b9a\u753b\u9762\u7528\u30b9\u30bf\u30a4\u30eb\nimport '.\/admin.scss';\n\nimport {\n    render,\n\n    \/\/ \uff08\u8ffd\u52a0\uff09useState\u30d5\u30c3\u30af\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\n    useState\n} from '@wordpress\/element';\n\n\/\/ Component\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\nimport {\n    ToggleControl,\n    TextControl,\n    RangeControl\n} from '@wordpress\/components';\n\n\/\/ Admin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\nconst Admin = () =&gt; {\n\n    \/\/ \uff08\u8ffd\u52a0\uff09state\u3068\u521d\u671f\u5024\u306e\u5ba3\u8a00\n    const &#91; showFlg, setShowFlg ] = useState( true );               \/\/ \u5e83\u544a\u3092\u8868\u793a\u3059\u308b\n    const &#91; text, setText ] = useState( '\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059' ); \/\/ \u30c6\u30ad\u30b9\u30c8\n    const &#91; fontSize, setFontSize ] = useState( 16 );               \/\/ \u6587\u5b57\u30b5\u30a4\u30ba\n\n    return (\n        &lt;div className=\"wrap\"&gt;\n            &lt;h1&gt;\u30aa\u30d7\u30b7\u30e7\u30f3\u8a2d\u5b9a&lt;\/h1&gt;\n            &lt;ToggleControl\n                label=\"\u5e83\u544a\u3092\u8868\u793a\u3059\u308b\"\n\n                \/\/ \uff08\u8ffd\u52a0\uff09\u521d\u671f\u5024\u306e\u8a2d\u5b9a\u3068\u5165\u529b\u30fb\u5909\u66f4\u3055\u308c\u305f\u6642\u306estate\u66f4\u65b0\u51e6\u7406\n                checked={ showFlg }\n                onChange={ () =&gt; setShowFlg( ! showFlg ) }\n            \/&gt;\n            &lt;TextControl\n                label=\"\u30c6\u30ad\u30b9\u30c8\"\n\n                \/\/ \uff08\u8ffd\u52a0\uff09\u521d\u671f\u5024\u306e\u8a2d\u5b9a\u3068\u5165\u529b\u30fb\u5909\u66f4\u3055\u308c\u305f\u6642\u306estate\u66f4\u65b0\u51e6\u7406\n                value={ text }\n                onChange={ ( value ) =&gt; setText( value ) }\n            \/&gt;\n            &lt;RangeControl\n                label=\"\u6587\u5b57\u30b5\u30a4\u30ba\"\n                min=\"10\"\n                max=\"30\"\n\n                \/\/ \uff08\u8ffd\u52a0\uff09\u521d\u671f\u5024\u306e\u8a2d\u5b9a\u3068\u5165\u529b\u30fb\u5909\u66f4\u3055\u308c\u305f\u6642\u306estate\u66f4\u65b0\u51e6\u7406\n                value={ fontSize }\n                onChange={ ( value ) =&gt; setFontSize( value ) }\n            \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\n\/\/ Admin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30eb\u30fc\u30c8DOM\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\nrender(\n    &lt;Admin \/&gt;,\n    document.getElementById( 'my-gutenberg-admin-plugin' )\n);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3053\u3067\u4e00\u5ea6\u30d6\u30e9\u30a6\u30b6\u3092\u30ea\u30ed\u30fc\u30c9\u3057\u3001 <code>useState<\/code> \u30d5\u30c3\u30af\u3067\u5ba3\u8a00\u3057\u305f\u521d\u671f\u5024\u304c\u3001\u5404\u8a2d\u5b9a\u9805\u76ee\u306e\u521d\u671f\u5024\u3068\u3057\u3066\u53cd\u6620\u3055\u308c\u3066\u3044\u308b\u4e8b\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"333\" src=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_07-840x333.png\" alt=\"\u5404\u8a2d\u5b9a\u9805\u76ee\u306e\u521d\u671f\u5024\u3068\u3057\u3066\u53cd\u6620\u3055\u308c\u3066\u3044\u308b\u4e8b\u3092\u78ba\u8a8d\" class=\"wp-image-438\" srcset=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_07-840x333.png 840w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_07-768x304.png 768w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_07.png 1009w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">STEP7\uff1a\u8a2d\u5b9a\u9805\u76ee\u306e\u767b\u9332<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3053\u3067\u4e00\u65e6PHP\u306b\u623b\u3063\u3066\u3001<a href=\"https:\/\/wpdocs.osdn.jp\/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9\/register_setting\" target=\"_blank\" rel=\"noreferrer noopener\">register_setting<\/a> \u95a2\u6570\u3067\u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u306e\u8a2d\u5b9a\u9805\u76ee\u3092\u767b\u9332\u30fb\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre data-label=\"my-gutenberg-admin-plugin.php\" id=\"my-gutenberg-admin-plugin.php\" class=\"wp-block-code lang-php\"><code>\uff5e\uff5e\uff5e\uff5e\uff5e\n\nadd_action( 'admin_enqueue_scripts', 'my_admin_scripts' );\n\n\/\/ \u8a2d\u5b9a\u9805\u76ee\u306e\u767b\u9332\nfunction my_register_settings() {\n    \/\/ \u5e83\u544a\u3092\u8868\u793a\u3059\u308b\n    register_setting(\n        'my_gutenberg_admin_plugin_settings',\n        'my_gutenberg_admin_plugin_show_flg',\n        array(\n            'type'         =&gt; 'boolean',\n            'show_in_rest' =&gt; true,\n            'default'      =&gt; true,\n        )\n    );\n    \/\/ \u30c6\u30ad\u30b9\u30c8\n    register_setting(\n        'my_gutenberg_admin_plugin_settings',\n        'my_gutenberg_admin_plugin_text',\n        array(\n            'type'         =&gt; 'string',\n            'show_in_rest' =&gt; true,\n            'default'      =&gt; '\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059',\n        )\n    );\n    \/\/ \u6587\u5b57\u30b5\u30a4\u30ba\n    register_setting(\n        'my_gutenberg_admin_plugin_settings',\n        'my_gutenberg_admin_plugin_font_size',\n        array(\n            'type'         =&gt; 'number',\n            'show_in_rest' =&gt; true,\n            'default'      =&gt; 16,\n        )\n    );\n}\nadd_action( 'init', 'my_register_settings' );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3053\u3067\u306e\u30dd\u30a4\u30f3\u30c8\u306f\u3001<strong>register_setting\u306e\u7b2c3\u5f15\u6570\u306e\u914d\u5217\u306b<code>show_in_rest =&gt; true<\/code>\u3092\u6307\u5b9a\u3059\u308b<\/strong>\u3068\u3044\u3046\u70b9\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u767b\u9332\u3057\u305f\u8a2d\u5b9a\u9805\u76ee\u306f\u3001 <code>get_option<\/code> \u306a\u3069\u306ePHP\u95a2\u6570\u3067\u76f4\u63a5\u53d6\u5f97\u3059\u308b\u308f\u3051\u3067\u306f\u306a\u304f\u3001\u5f8c\u8ff0\u306e<strong>REST API<\/strong>\u306b\u3066\u53d6\u5f97\u3059\u308b\u305f\u3081\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">STEP8\uff1aAPI\u3092\u4f7f\u7528\u3057\u305f\u8a2d\u5b9a\u5024\u306e\u53d6\u5f97\u30fb\u53cd\u6620<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u518d\u5ea6JavaScript\u306b\u623b\u3063\u3066\u3001\u300c<strong>STEP7\uff1a\u8a2d\u5b9a\u9805\u76ee\u306e\u767b\u9332<\/strong>\u300d\u3067\u8a2d\u5b9a\u3057\u305f\u8a2d\u5b9a\u9805\u76ee\u3092API\u3067\u53d6\u5f97\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3053\u306f\u3042\u307e\u308a\u8a73\u3057\u304f\u306a\u3044\u306e\u3067\u3059\u304c\u3001 <code>@wordpress\/api<\/code> \u30d1\u30c3\u30b1\u30fc\u30b8\u306b<a href=\"https:\/\/developer.wordpress.org\/rest-api\/using-the-rest-api\/backbone-javascript-client\/\" target=\"_blank\" rel=\"noreferrer noopener\">Backbone JavaScript Client<\/a>\u3068\u3044\u3046\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u542b\u307e\u308c\u3066\u304a\u308a\u3001<code>wp_options<\/code> \u30c6\u30fc\u30d6\u30eb\u306b\u683c\u7d0d\u3055\u308c\u305f\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u8a2d\u5b9a\u5024\u3092\u7c21\u5358\u306b\u53d6\u5f97\u3059\u308b\u4e8b\u304c\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\u203b<code>@wordpress\/api<\/code> \u306e\u4ee3\u308f\u308a\u306b\u3001<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-api-fetch\/\" target=\"_blank\" rel=\"noreferrer noopener\">@wordpress\/api-fetch<\/a>\u3092\u4f7f\u3046\u65b9\u6cd5\u3082\u3042\u308a\u307e\u3059\u3002<br>\u305d\u306e\u5834\u5408\u3001 <code>register_rest_route<\/code> \u3067\u30ab\u30b9\u30bf\u30e0\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u3092\u5b9a\u7fa9\u3057\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3067 <code>get_option<\/code> \u5024\u3092\u8fd4\u5374\u3059\u308b\u51e6\u7406\u3092\u8a18\u8ff0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<br>\u3088\u308a\u67d4\u8edf\u306b\u8a2d\u5b9a\u5024\u3092\u6271\u3046\u4e8b\u304c\u51fa\u6765\u308b\u306e\u3067\u3001\u8208\u5473\u304c\u3042\u308b\u65b9\u306f\u8abf\u3079\u3066\u307f\u3066\u4e0b\u3055\u3044\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\u3072\u3068\u307e\u305a\u3001\u3069\u306e\u3088\u3046\u306a\u30ec\u30b9\u30dd\u30f3\u30b9\u304c\u8fd4\u3063\u3066\u304f\u308b\u304b\u3092\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<pre data-label=\"src\/index.js\" id=\"src\/index.js\" class=\"wp-block-code lang-jsx\"><code>\/\/ \u8a2d\u5b9a\u753b\u9762\u7528\u30b9\u30bf\u30a4\u30eb\nimport '.\/admin.scss';\n\nimport {\n    render,\n    useState\n} from '@wordpress\/element';\n\n\/\/ Component\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\nimport {\n    ToggleControl,\n    TextControl,\n    RangeControl\n} from '@wordpress\/components';\n\n\/\/ \uff08\u8ffd\u52a0\uff09API\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\nimport api from '@wordpress\/api';\n\n\/\/ Admin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\nconst Admin = () =&gt; {\n\n    \/\/ state\u3068\u521d\u671f\u5024\u306e\u5ba3\u8a00\n    const &#91; showFlg, setShowFlg ] = useState( true );               \/\/ \u5e83\u544a\u3092\u8868\u793a\u3059\u308b\n    const &#91; text, setText ] = useState( '\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059' ); \/\/ \u30c6\u30ad\u30b9\u30c8\n    const &#91; fontSize, setFontSize ] = useState( 16 );               \/\/ \u6587\u5b57\u30b5\u30a4\u30ba\n\n    \/\/ \uff08\u8ffd\u52a0\uff09\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306e\u6e96\u5099\u304c\u51fa\u6765\u3066\u304b\u3089\u5b9f\u884c\n    api.loadPromise.then( () =&gt; {\n\n        \/\/ Model\u306e\u751f\u6210\n        const model = new api.models.Settings();\n\n        \/\/ \u8a2d\u5b9a\u5024\u306e\u53d6\u5f97\n        model.fetch().then( response =&gt; {\n            console.log( response );\n        });\n    });\n\n    return (\n        &lt;div className=\"wrap\"&gt;\n            &lt;h1&gt;\u30aa\u30d7\u30b7\u30e7\u30f3\u8a2d\u5b9a&lt;\/h1&gt;\n            &lt;ToggleControl\n                label=\"\u5e83\u544a\u3092\u8868\u793a\u3059\u308b\"\n                checked={ showFlg }\n                onChange={ () =&gt; setShowFlg( ! showFlg ) }\n            \/&gt;\n            &lt;TextControl\n                label=\"\u30c6\u30ad\u30b9\u30c8\"\n                value={ text }\n                onChange={ ( value ) =&gt; setText( value ) }\n            \/&gt;\n            &lt;RangeControl\n                label=\"\u6587\u5b57\u30b5\u30a4\u30ba\"\n                min=\"10\"\n                max=\"30\"\n                value={ fontSize }\n                onChange={ ( value ) =&gt; setFontSize( value ) }\n            \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\n\/\/ Admin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30eb\u30fc\u30c8DOM\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\nrender(\n    &lt;Admin \/&gt;,\n    document.getElementById( 'my-gutenberg-admin-plugin' )\n);<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"441\" src=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_08-840x441.png\" alt=\"API\u3092\u4f7f\u7528\u3057\u305f\u8a2d\u5b9a\u5024\u306e\u53d6\u5f97\" class=\"wp-image-439\" srcset=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_08-840x441.png 840w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_08-768x403.png 768w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_08.png 1070w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><code>register_setting<\/code> \u95a2\u6570\u3067\u5b9a\u7fa9\u3057\u305f\u8a2d\u5b9a\u9805\u76ee\u3068\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u3092\u542b\u3081\u3001 <code>wp_options<\/code> \u30c6\u30fc\u30d6\u30eb\u306e\u30c7\u30fc\u30bf\u304c\u53d6\u5f97\u3055\u308c\u305f\u4e8b\u3092\u78ba\u8a8d\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u7d9a\u3044\u3066\u3001\u53d6\u5f97\u3057\u305f\u8a2d\u5b9a\u5024\u3092\u5404\u8a2d\u5b9a\u9805\u76ee\u306b\u53cd\u6620\u3055\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u300c<strong>STEP6\uff1a\u8a2d\u5b9a\u5024\u306estate\u7ba1\u7406<\/strong>\u300d\u3067\u8a18\u8f09\u3057\u305f\u901a\u308a\u3001\u5404\u8a2d\u5b9a\u9805\u76ee\u306e\u5024\u306fstate\u3067\u7ba1\u7406\u3057\u3066\u3044\u307e\u3059\u306e\u3067\u3001<code>setXXXX<\/code> \u306e\u5f15\u6570\u306b\u30ec\u30b9\u30dd\u30f3\u30b9\u30c7\u30fc\u30bf\u306e\u5024\u3092\u6307\u5b9a\u3059\u308c\u3070\u3001\u5404\u8a2d\u5b9a\u9805\u76ee\u306e\u5024\u3068\u3057\u3066\u53cd\u6620\u3055\u308c\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n\n\n\n<pre data-label=\"src\/index.js\" id=\"src\/index.js\" class=\"wp-block-code lang-jsx\"><code>\/\/ \u8a2d\u5b9a\u753b\u9762\u7528\u30b9\u30bf\u30a4\u30eb\nimport '.\/admin.scss';\n\nimport {\n    render,\n    useState,\n\n    \/\/ \uff08\u8ffd\u52a0\uff09useEffect\u30d5\u30c3\u30af\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\n    useEffect\n} from '@wordpress\/element';\n\n\/\/ Component\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\nimport {\n    ToggleControl,\n    TextControl,\n    RangeControl\n} from '@wordpress\/components';\n\n\/\/ \uff08\u8ffd\u52a0\uff09API\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\nimport api from '@wordpress\/api';\n\n\/\/ Admin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\nconst Admin = () =&gt; {\n\n    \/\/ state\u3068\u521d\u671f\u5024\u306e\u5ba3\u8a00\n    const &#91; showFlg, setShowFlg ] = useState( true );               \/\/ \u5e83\u544a\u3092\u8868\u793a\u3059\u308b\n    const &#91; text, setText ] = useState( '\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059' ); \/\/ \u30c6\u30ad\u30b9\u30c8\n    const &#91; fontSize, setFontSize ] = useState( 16 );               \/\/ \u6587\u5b57\u30b5\u30a4\u30ba\n\n    \/\/ \uff08\u8ffd\u52a0\uff09\u53d6\u5f97\u3057\u305f\u8a2d\u5b9a\u5024\u3092state\u306b\u53cd\u6620\n    useEffect( () =&gt; {\n        api.loadPromise.then( () =&gt; {\n            const model = new api.models.Settings();\n            model.fetch().then( response =&gt; {\n                setShowFlg( Boolean( response.my_gutenberg_admin_plugin_show_flg ) );\n                setText( response.my_gutenberg_admin_plugin_text );\n                setFontSize( response.my_gutenberg_admin_plugin_font_size );\n            });\n        });\n    }, &#91;]);\n\n    return (\n        &lt;div className=\"wrap\"&gt;\n            &lt;h1&gt;\u30aa\u30d7\u30b7\u30e7\u30f3\u8a2d\u5b9a&lt;\/h1&gt;\n            &lt;ToggleControl\n                label=\"\u5e83\u544a\u3092\u8868\u793a\u3059\u308b\"\n                checked={ showFlg }\n                onChange={ () =&gt; setShowFlg( ! showFlg ) }\n            \/&gt;\n            &lt;TextControl\n                label=\"\u30c6\u30ad\u30b9\u30c8\"\n                value={ text }\n                onChange={ ( value ) =&gt; setText( value ) }\n            \/&gt;\n            &lt;RangeControl\n                label=\"\u6587\u5b57\u30b5\u30a4\u30ba\"\n                min=\"10\"\n                max=\"30\"\n                value={ fontSize }\n                onChange={ ( value ) =&gt; setFontSize( value ) }\n            \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\n\/\/ Admin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30eb\u30fc\u30c8DOM\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\nrender(\n    &lt;Admin \/&gt;,\n    document.getElementById( 'my-gutenberg-admin-plugin' )\n);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><code>register_setting<\/code> \u95a2\u6570\u3067\u5404\u8a2d\u5b9a\u5024\u306edefault\u5024\u3092\u8a2d\u5b9a\u3057\u305f\u304b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u305d\u308c\u3089\u3092\u4ed6\u306e\u5024\u306b\u5909\u66f4\u3057\u3066\u30d6\u30e9\u30a6\u30b6\u3092\u30ea\u30ed\u30fc\u30c9\u3057\u305f\u6642\u306b\u3001\u5404\u8a2d\u5b9a\u9805\u76ee\u306b\u5909\u66f4\u5f8c\u306edefault\u5024\u304c\u53cd\u6620\u3055\u308c\u308b\u4e8b\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305f\u3053\u3053\u3067\u3001\u4eca\u307e\u3067\u306b\u306a\u304b\u3063\u305f <code>useEffect<\/code> \u3068\u3044\u3046\u30d5\u30c3\u30af\u304c\u30a4\u30f3\u30dd\u30fc\u30c8\u3055\u308c\u3001\u8a2d\u5b9a\u5024\u3092\u53d6\u5f97\u3059\u308b\u51e6\u7406\u3092\u56f2\u3093\u3067\u3044\u308b\u4e8b\u304c\u5206\u304b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3056\u3063\u304f\u308a\u8a00\u3046\u3068\u3001<a href=\"https:\/\/ja.reactjs.org\/docs\/hooks-intro.html\" target=\"_blank\" rel=\"noreferrer noopener\">React Hooks<\/a> \u306e\u4e00\u3064\u3067\u3001\u300c<strong>\u95a2\u6570\u3092\u7279\u5b9a\u306e\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u5b9f\u884c\u3055\u305b\u308b<\/strong>\u300d\u4e8b\u304c\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>useEffect<\/code> \u306e\u7b2c\u4e8c\u5f15\u6570\u306b\u306f\u3001\u4f9d\u5b58\u914d\u5217\u3092\u6307\u5b9a\u3059\u308b\u4e8b\u304c\u3067\u304d\u3001\u7279\u5b9a\u306eprops\u3084state\u304c\u5909\u308f\u3063\u305f\u6642\u306b\u5b9f\u884c\u3001\u3068\u3044\u3063\u305f\u4e8b\u3092\u884c\u3046\u4e8b\u304c\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306e\u30b3\u30fc\u30c9\u3067\u306f\u7a7a\u914d\u5217\uff08<code>[]<\/code>\uff09\u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u3053\u306e\u5834\u5408\u306fComponent\u304c\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u305f\u76f4\u5f8c\u306b\u4e00\u5ea6\u3060\u3051\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002<br>React \u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u3092\u77e5\u3063\u3066\u3044\u308b\u65b9\u306f\u3001\u30af\u30e9\u30b9\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e <code>componentDidMount<\/code> \u3001 <code>componentDidUpdate<\/code> \u3001 <code>componentWillUnmount<\/code> \u304c\u307e\u3068\u307e\u3063\u305f\u3082\u306e\u3001\u3068\u8a00\u3048\u3070\u5206\u304b\u308a\u3084\u3059\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>useEffect<\/code>\u3092\u4f7f\u308f\u306a\u3044\u3068\u3001Component\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3068API\u30ec\u30b9\u30dd\u30f3\u30b9\u306e\u3069\u3061\u3089\u304c\u5148\u306b\u5b8c\u4e86\u3059\u308b\u304b\u304c\u4fdd\u8a3c\u3055\u308c\u306a\u3044\u305f\u3081\u3001\u60f3\u5b9a\u5916\u306e\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3059\u308b\u4e8b\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>useEffect<\/code>\u3092\u4f7f\u3046\u4e8b\u3067\u3001\u300cComponent\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u304c\u5b8c\u4e86\u3057\u3066\u304b\u3089API\u3092\u5b9f\u884c\u3059\u308b\u300d\u3068\u540c\u671f\u3092\u3068\u3063\u305f\u51e6\u7406\u3092\u884c\u3046\u4e8b\u304c\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f <code>useEffect<\/code> \u304c\u7121\u304f\u3066\u3082\u52d5\u4f5c\u3059\u308b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u7d30\u304b\u306a\u975e\u540c\u671f\u51e6\u7406\u3084state\u7ba1\u7406\u306a\u3069\u3092\u884c\u3046\u5834\u5408\u306b\u6709\u7528\u306a\u30d5\u30c3\u30af\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gutenberg\u306e\u6a19\u6e96\u30d6\u30ed\u30c3\u30af\u3067\u3082\u591a\u6570\u306e\u5229\u7528\u4f8b\u304c\u3042\u308b\u306e\u3067\u3001\u8208\u5473\u304c\u3042\u308b\u65b9\u306f\u7814\u7a76\u3057\u3066\u307f\u3066\u4e0b\u3055\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/block-library\/src\">gutenberg\/packages\/block-library\/src at trunk \u00b7 WordPress\/gutenberg<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">STEP9\uff1aAPI\u3092\u4f7f\u7528\u3057\u305f\u8a2d\u5b9a\u5024\u306e\u66f4\u65b0<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u5ea6\u306f\u3001\u624b\u52d5\u3067\u9069\u5f53\u306a\u5024\u3092\u30d9\u30bf\u66f8\u304d\u3057\u3001API\u7d4c\u7531\u3067\u8a2d\u5b9a\u5024\u306e\u767b\u9332\u3092\u884c\u3063\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<pre data-label=\"src\/index.js\" id=\"src\/index.js\" class=\"wp-block-code lang-jsx\"><code>\/\/ \u8a2d\u5b9a\u753b\u9762\u7528\u30b9\u30bf\u30a4\u30eb\nimport '.\/admin.scss';\n\nimport {\n    render,\n    useState,\n    useEffect\n} from '@wordpress\/element';\n\n\/\/ Component\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\nimport {\n    ToggleControl,\n    TextControl,\n    RangeControl\n} from '@wordpress\/components';\n\n\/\/ API\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\nimport api from '@wordpress\/api';\n\n\/\/ Admin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\nconst Admin = () =&gt; {\n\n    \/\/ state\u3068\u521d\u671f\u5024\u306e\u5ba3\u8a00\n    const &#91; showFlg, setShowFlg ] = useState( true );               \/\/ \u5e83\u544a\u3092\u8868\u793a\u3059\u308b\n    const &#91; text, setText ] = useState( '\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059' ); \/\/ \u30c6\u30ad\u30b9\u30c8\n    const &#91; fontSize, setFontSize ] = useState( 16 );               \/\/ \u6587\u5b57\u30b5\u30a4\u30ba\n\n    \/\/ \u53d6\u5f97\u3057\u305f\u8a2d\u5b9a\u5024\u3092state\u306b\u53cd\u6620\n    useEffect( () =&gt; {\n        api.loadPromise.then( () =&gt; {\n            const model = new api.models.Settings();\n            model.fetch().then( response =&gt; {\n                setShowFlg( Boolean( response.my_gutenberg_admin_plugin_show_flg ) );\n                setText( response.my_gutenberg_admin_plugin_text );\n                setFontSize( response.my_gutenberg_admin_plugin_font_size );\n            });\n        });\n    }, &#91;]);\n\n    \/\/ \uff08\u8ffd\u52a0\uff09\u8a2d\u5b9a\u9805\u76ee\u306e\u767b\u9332\n    api.loadPromise.then( () =&gt; {\n        const model = new api.models.Settings({\n            'my_gutenberg_admin_plugin_show_flg': false,\n            'my_gutenberg_admin_plugin_text': 'API\u7d4c\u7531\u3067\u767b\u9332\u3055\u308c\u305f\u30c6\u30ad\u30b9\u30c8\u3067\u3059',\n            'my_gutenberg_admin_plugin_font_size': 20\n        });\n\n        const save = model.save();\n\n        save.success( ( response, status ) =&gt; {\n            console.log( response );\n            console.log( status );\n        });\n        save.error( ( response, status ) =&gt; {\n            console.log( response );\n            console.log( status );\n        });\n    });\n\n    return (\n        &lt;div className=\"wrap\"&gt;\n            &lt;h1&gt;\u30aa\u30d7\u30b7\u30e7\u30f3\u8a2d\u5b9a&lt;\/h1&gt;\n            &lt;ToggleControl\n                label=\"\u5e83\u544a\u3092\u8868\u793a\u3059\u308b\"\n                checked={ showFlg }\n                onChange={ () =&gt; setShowFlg( ! showFlg ) }\n            \/&gt;\n            &lt;TextControl\n                label=\"\u30c6\u30ad\u30b9\u30c8\"\n                value={ text }\n                onChange={ ( value ) =&gt; setText( value ) }\n            \/&gt;\n            &lt;RangeControl\n                label=\"\u6587\u5b57\u30b5\u30a4\u30ba\"\n                min=\"10\"\n                max=\"30\"\n                value={ fontSize }\n                onChange={ ( value ) =&gt; setFontSize( value ) }\n            \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\n\/\/ Admin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30eb\u30fc\u30c8DOM\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\nrender(\n    &lt;Admin \/&gt;,\n    document.getElementById( 'my-gutenberg-admin-plugin' )\n);<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"660\" src=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_09-840x660.png\" alt=\"API\u3092\u4f7f\u7528\u3057\u305f\u8a2d\u5b9a\u5024\u306e\u66f4\u65b0\" class=\"wp-image-440\" srcset=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_09-840x660.png 840w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_09-768x604.png 768w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_09.png 1071w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d6\u30e9\u30a6\u30b6\u3092\u30ea\u30ed\u30fc\u30c9\u3059\u308b\u3068\u3001API\u7d4c\u7531\u3067\u8a2d\u5b9a\u5024\u306e\u66f4\u65b0\u51e6\u7406\u304c\u884c\u308f\u308c\u305f\u5f8c\u306b <code>save.success()<\/code> \u304c\u547c\u3070\u308c\u3001\u30ec\u30b9\u30dd\u30f3\u30b9\u306b\u624b\u52d5\u3067\u8a2d\u5b9a\u3057\u305f\u65b0\u3057\u3044\u5024\u304c\u53cd\u6620\u3055\u308c\u3066\u3044\u308b\u4e8b\u304c\u78ba\u8a8d\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u203b\u3061\u306a\u307f\u306b\u3001 <code>register_setting<\/code> \u3067\u5b9a\u7fa9\u3057\u305f\u3082\u306e\u3068\u9055\u3046\u578b\u306e\u30c7\u30fc\u30bf\uff08 <code>'my_gutenberg_admin_plugin_show_flg': 'hoge'<\/code> \u306a\u3069\uff09\u3092\u767b\u9332\u3057\u3088\u3046\u3068\u3059\u308b\u3068\u3001500\u30a8\u30e9\u30fc\u3068\u306a\u308a <code>save.error()<\/code> \u306e\u65b9\u304c\u547c\u3070\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"466\" src=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_10.png\" alt=\"\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e wp_options \u30c6\u30fc\u30d6\u30eb\" class=\"wp-image-441\" srcset=\"https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_10.png 776w, https:\/\/aki-hamano.blog\/wp-content\/uploads\/2024\/06\/gutenberg-plugin-page_10-768x461.png 768w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e <code>wp_options<\/code> \u30c6\u30fc\u30d6\u30eb\u306b\u3082\u3001\u3061\u3083\u3093\u3068\u30ec\u30b3\u30fc\u30c9\u304c\u767b\u9332\u3055\u308c\u3066\u3044\u308b\u4e8b\u304c\u78ba\u8a8d\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">STEP10\uff1astate\u7ba1\u7406\u3057\u305f\u8a2d\u5b9a\u5024\u306e\u767b\u9332<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u300c<strong>STEP8\uff1aAPI\u3092\u4f7f\u7528\u3057\u305f\u8a2d\u5b9a\u5024\u306e\u53d6\u5f97<\/strong>\u300d\u3068\u300c<strong>STEP9\uff1aAPI\u3092\u4f7f\u7528\u3057\u305f\u8a2d\u5b9a\u5024\u306e\u66f4\u65b0<\/strong>\u300d\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u3001\u5b9f\u969b\u306b\u8a2d\u5b9a\u753b\u9762\u3067\u5165\u529b\u3055\u308c\u305f\u5024\uff08state\uff09\u3092\u5143\u306b\u3001API\u7d4c\u7531\u3067\u8a2d\u5b9a\u5024\u3092\u66f4\u65b0\u3059\u308b\u51e6\u7406\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9f\u88c5\u65b9\u91dd\u3068\u3057\u3066\u3001\u4fdd\u5b58\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u3001\u62bc\u4e0b\u3055\u308c\u305f\u6642\u306bComponent\u304c\u6301\u3064state\u3092API\u306emodel\u306b\u683c\u7d0d\u3057\u3066\u4fdd\u5b58\u51e6\u7406\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4fdd\u5b58\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u3001onClick\u30a4\u30d9\u30f3\u30c8\u5185\u306b\u5148\u307b\u3069\u8ffd\u52a0\u3057\u305f\u8a2d\u5b9a\u9805\u76ee\u306e\u767b\u9332\u51e6\u7406\u3092\u5165\u308c\u8fbc\u307f\u307e\u3059\u3002<br>\u305d\u3057\u3066\u3001\u30d9\u30bf\u66f8\u304d\u3057\u3066\u3044\u305f\u5404\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5024\u3092state\u5024\u306b\u7f6e\u304d\u63db\u3048\u307e\u3059\u3002<br><code>@wordpress\/components<\/code> \u304b\u3089 <code>Button<\/code> \u30b3\u30f3\u30dd\u2015\u30cd\u30f3\u30c8\u3092\u8ffd\u52a0\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u304a\u304f\u4e8b\u3082\u5fd8\u308c\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<pre data-label=\"src\/index.js\" id=\"src\/index.js\" class=\"wp-block-code lang-jsx\"><code>\/\/ \u8a2d\u5b9a\u753b\u9762\u7528\u30b9\u30bf\u30a4\u30eb\nimport '.\/admin.scss';\n\nimport {\n    render,\n    useState,\n    useEffect\n} from '@wordpress\/element';\n\n\/\/ Component\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\nimport {\n    ToggleControl,\n    TextControl,\n    RangeControl,\n\n    \/\/ \uff08\u8ffd\u52a0\uff09Button\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\n    Button\n} from '@wordpress\/components';\n\n\/\/ API\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\nimport api from '@wordpress\/api';\n\n\/\/ Admin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\nconst Admin = () =&gt; {\n\n    \/\/ state\u3068\u521d\u671f\u5024\u306e\u5ba3\u8a00\n    const &#91; showFlg, setShowFlg ] = useState( true );               \/\/ \u5e83\u544a\u3092\u8868\u793a\u3059\u308b\n    const &#91; text, setText ] = useState( '\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059' ); \/\/ \u30c6\u30ad\u30b9\u30c8\n    const &#91; fontSize, setFontSize ] = useState( 16 );               \/\/ \u6587\u5b57\u30b5\u30a4\u30ba\n\n    \/\/ \u53d6\u5f97\u3057\u305f\u8a2d\u5b9a\u5024\u3092state\u306b\u53cd\u6620\n    useEffect( () =&gt; {\n        api.loadPromise.then( () =&gt; {\n            const model = new api.models.Settings();\n            model.fetch().then( response =&gt; {\n                setShowFlg( Boolean( response.my_gutenberg_admin_plugin_show_flg ) );\n                setText( response.my_gutenberg_admin_plugin_text );\n                setFontSize( response.my_gutenberg_admin_plugin_font_size );\n            });\n        });\n    }, &#91;]);\n\n    \/\/ \uff08\u5909\u66f4\uff09 \u8a2d\u5b9a\u9805\u76ee\u306e\u767b\u9332\n    const onClick = () =&gt; {\n        api.loadPromise.then( () =&gt; {\n            const model = new api.models.Settings({\n                'my_gutenberg_admin_plugin_show_flg': showFlg,  \/\/ state\u306e\u5024\n                'my_gutenberg_admin_plugin_text': text,         \/\/ state\u306e\u5024\n                'my_gutenberg_admin_plugin_font_size': fontSize \/\/ state\u306e\u5024\n            });\n            const save = model.save();\n\n            save.success( ( response, status ) =&gt; {\n                console.log( response );\n                console.log( status );\n            });\n            save.error( ( response, status ) =&gt; {\n                console.log( response );\n                console.log( status );\n            });\n        });\n    };\n\n    return (\n        &lt;div className=\"wrap\"&gt;\n            &lt;h1&gt;\u30aa\u30d7\u30b7\u30e7\u30f3\u8a2d\u5b9a&lt;\/h1&gt;\n            &lt;ToggleControl\n                label=\"\u5e83\u544a\u3092\u8868\u793a\u3059\u308b\"\n                checked={ showFlg }\n                onChange={ () =&gt; setShowFlg( ! showFlg ) }\n            \/&gt;\n            &lt;TextControl\n                label=\"\u30c6\u30ad\u30b9\u30c8\"\n                value={ text }\n                onChange={ ( value ) =&gt; setText( value ) }\n            \/&gt;\n            &lt;RangeControl\n                label=\"\u6587\u5b57\u30b5\u30a4\u30ba\"\n                min=\"10\"\n                max=\"30\"\n                value={ fontSize }\n                onChange={ ( value ) =&gt; setFontSize( value ) }\n            \/&gt;\n            {\/* \uff08\u8ffd\u52a0\uff09\u4fdd\u5b58\u30dc\u30bf\u30f3 *\/}\n            &lt;Button\n                isPrimary\n                onClick={ onClick }\n            &gt;\n                \u4fdd\u5b58\n            &lt;\/Button&gt;\n        &lt;\/div&gt;\n    );\n};\n\n\/\/ Admin\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30eb\u30fc\u30c8DOM\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\nrender(\n    &lt;Admin \/&gt;,\n    document.getElementById( 'my-gutenberg-admin-plugin' )\n);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u8a2d\u5b9a\u9805\u76ee\u306e\u5024\u3092\u4f55\u5ea6\u304b\u5909\u3048\u3066\u3001\u4fdd\u5b58\u30dc\u30bf\u30f3\u3092\u62bc\u4e0b\u3059\u308b\u5ea6\u306b\u6700\u65b0\u306e\u5024\u304c <code>save.success()<\/code> \u306e\u30ec\u30b9\u30dd\u30f3\u30b9\u306b\u53cd\u6620\u3055\u308c\u3001\u307e\u305f <code>wp_options<\/code> \u30c6\u30fc\u30d6\u30eb\u306e\u5404\u30ec\u30b3\u30fc\u30c9\u306e\u5024\u3082\u66f4\u65b0\u3055\u308c\u308b\u4e8b\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0a\u304c\u3001React\uff08Gutenberg Components\uff09\u3092\u4f7f\u3063\u3066\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u8a2d\u5b9a\u753b\u9762\u3092\u4f5c\u308b\u57fa\u672c\u7684\u306a\u65b9\u6cd5\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5fdc\u7528\u7de8<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3053\u307e\u3067\u3067\u958b\u767a\u3057\u305f\u30d7\u30e9\u30b0\u30a4\u30f3\u306f\u3042\u304f\u307e\u3067\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u306e\u305f\u3081\u3001\u5b9f\u904b\u7528\u306b\u8010\u3048\u3046\u308b\u30af\u30aa\u30ea\u30c6\u30a3\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6539\u5584\u70b9\u306f\u591a\u3005\u8003\u3048\u3089\u308c\u307e\u3059\u304c\u3001\u300c\u3053\u306e\u8a18\u4e8b\u306e\u5185\u5bb9\u3067\u306f\u7269\u8db3\u308a\u306a\u3044\uff01\u300d\u3068\u3044\u3046\u65b9\u306f\u3001\u4ee5\u4e0b\u306e\u8ffd\u52a0\u958b\u767a\u306b\u3082\u6311\u6226\u3057\u3066\u307f\u3066\u4e0b\u3055\u3044\u3002<br>\u203bGutenberg Components\u306b\u76f4\u63a5\u95a2\u4fc2\u306a\u3044\u5185\u5bb9\u3082\u4e00\u90e8\u542b\u307e\u308c\u3066\u3044\u307e\u3059<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u8a2d\u5b9a\u5024\u306e\u7121\u5bb3\u5316<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u300c<strong>STEP7\uff1a\u8a2d\u5b9a\u9805\u76ee\u306e\u767b\u9332<\/strong>\u300d\u3067\u3001 <code>register_setting<\/code> \u95a2\u6570\u3092\u4f7f\u3063\u3066\u30aa\u30d7\u30b7\u30e7\u30f3\u30da\u30fc\u30b8\u306e\u8a2d\u5b9a\u9805\u76ee\u3092\u767b\u9332\u3057\u307e\u3057\u305f\u304c\u3001\u30b5\u30cb\u30bf\u30a4\u30ba\u51e6\u7406\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u300c <code>'my_gutenberg_admin_plugin_show_flg': 'hoge'<\/code> \u300d\u306e\u3088\u3046\u306b\u3001\u578b\u304c\u9055\u3046\u5024\u306f\u5f3e\u304f\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u304c\u3001\u4f8b\u3048\u3070\u30c6\u30ad\u30b9\u30c8\uff08 <code>my_gutenberg_admin_plugin_text<\/code> \uff09\u306e\u6587\u5b57\u9577\u3084\u3001\u6587\u5b57\u30b5\u30a4\u30ba\uff08 <code>my_gutenberg_admin_plugin_font_size<\/code> \uff09\u306e\u4e0b\u9650\u5024\/\u4e0a\u9650\u5024\u306e\u30c1\u30a7\u30c3\u30af\u3092\u884c\u3063\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>register_setting<\/code> \u95a2\u6570\u306e\u7b2c3\u5f15\u6570\u306e\u914d\u5217\u306b\u3001 <code>sanitize_callback<\/code> \u3067\u30b5\u30cb\u30bf\u30a4\u30ba\u7528\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u6307\u5b9a\u51fa\u6765\u307e\u3059\u306e\u3067\u3001\u5404\u8a2d\u5b9a\u5024\u306b\u7570\u5e38\u5024\u304c\u5165\u529b\u3055\u308c\u305f\u5834\u5408\u306e\u51e6\u7406\u3092\u8ffd\u52a0\u3057\u3066\u307f\u3066\u4e0b\u3055\u3044\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u901a\u77e5\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u8868\u793a<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4fdd\u5b58\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8a2d\u5b9a\u5024\u304c\u66f4\u65b0\u3055\u308c\u307e\u3059\u304c\u3001\u753b\u9762\u306b\u4f55\u306e\u53cd\u5fdc\u3082\u306a\u3044\u305f\u3081\u3001\u30e6\u30fc\u30b6\u30fc\u30d3\u30ea\u30c6\u30a3\u7684\u306b\u3088\u304f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8a2d\u5b9a\u304c\u6b63\u3057\u304f\u4fdd\u5b58\u3055\u308c\u305f\u6642\uff08 <code>save.success()<\/code> \uff09\u3001\u304a\u3088\u3073\u8a2d\u5b9a\u306e\u4fdd\u5b58\u306b\u5931\u6557\u3057\u305f\u6642\uff08 <code>save.error()<\/code> \uff09\u306b\u3001\u753b\u9762\u306b\u4f55\u3089\u304b\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8868\u793a\u3059\u308b\u4e8b\u3092\u691c\u8a0e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u4f8b\u3068\u3057\u3066\u3001 <code>react-notifications-component<\/code> \u3068\u3044\u3046npm\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u4f7f\u3063\u3066\u3001\u4fdd\u5b58\u6642\u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8868\u793a\u3059\u308b\u30b5\u30f3\u30d7\u30eb\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/Codeinwp\/otter-blocks\/blob\/master\/src\/Components\/Main.js#L90-L120\" target=\"_blank\" rel=\"noreferrer noopener\">otter-blocks\/Main.js at master \u00b7 Codeinwp\/otter-blocks<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u72b6\u614b\u306e\u8868\u793a<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">API\u7d4c\u7531\u3067\u8a2d\u5b9a\u5024\u3092\u53d6\u5f97\u30fb\u66f4\u65b0\u3059\u308b\u6642\u306b\u3001\u4f55\u3089\u304b\u306e\u7406\u7531\u3067\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u5f97\u308b\u307e\u3067\u306b\u6642\u9593\u304c\u304b\u304b\u308b\u53ef\u80fd\u6027\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u305d\u306e\u3088\u3046\u306a\u5834\u5408\u3001\u30e6\u30fc\u30b6\u30fc\u306b\u51e6\u7406\u3092\u884c\u3063\u3066\u3044\u308b\u6700\u4e2d\u3067\u3042\u308b\u4e8b\u3092\u4f1d\u3048\u308b\u305f\u3081\u306b\u3001\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u72b6\u614b\u3067\u3042\u308b\u304b\u3069\u3046\u304b\u306e\u7ba1\u7406\u3001\u304a\u3088\u3073\u753b\u9762\u306b\u8868\u793a\u3059\u308b\u6a5f\u80fd\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u3064\u306e\u3084\u308a\u65b9\u3068\u3057\u3066\u3001 <code>isAPILoading<\/code> \u306e\u3088\u3046\u306astate\u3092\u7528\u610f\u3057\u3001API\u901a\u4fe1\u958b\u59cb\u6642\u306b <code>true<\/code> \u3001API\u901a\u4fe1\u7d42\u4e86\u6642\u306b <code>false<\/code> \u306b\u66f4\u65b0\u3057\u3001 <code>isAPILoading == true<\/code> \u306e\u6642\u306b\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u72b6\u614b\u3092\u8868\u793a\u3059\u308b\u3001\u3068\u3044\u3046\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u72b6\u614b\u3092\u77e5\u3089\u305b\u308b\u306e\u306b\u6700\u9069\u306aComponent\u306e\u4e00\u3064\u306b\u3001 <code>@wordpress\/components<\/code> \u306e <code>Spinner<\/code> \u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306eComponent\u3092\u4f7f\u3063\u305f\u30b3\u30fc\u30c9\u4f8b\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/Codeinwp\/otter-blocks\/blob\/master\/src\/Components\/Main.js#L178-L184\" target=\"_blank\" rel=\"noreferrer noopener\">otter-blocks\/Main.js at master \u00b7 Codeinwp\/otter-blocks<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u521d\u671f\u5316\u6a5f\u80fd\u306e\u8ffd\u52a0<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u8a2d\u5b9a\u5024\u3092\u8272\u3005\u3068\u5909\u66f4\u3057\u3066\u3044\u308b\u9593\u306b\u3001\u3088\u304f\u5206\u304b\u3089\u306a\u304f\u306a\u3063\u3066\u3057\u307e\u3063\u305f\u306e\u3067\u521d\u671f\u5024\u306b\u623b\u3057\u305f\u3044\u3001\u3068\u3044\u3046\u30b1\u30fc\u30b9\u304c\u3042\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u305d\u308c\u306b\u5bfe\u5fdc\u3059\u308b\u305f\u3081\u306b\u3001\u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\u306e\u8ffd\u52a0\u3092\u691c\u8a0e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8272\u3005\u8abf\u3079\u3066\u307f\u307e\u3057\u305f\u304c\u3001\u4fdd\u5b58\u30dc\u30bf\u30f3\u3067\u884c\u3063\u305f\u3088\u3046\u306b <code>@wordpress\/api<\/code>\u306e<code>new api.models.Settings<\/code> \u3092\u4f7f\u3063\u3066\u3001 <code>delete_option<\/code> \u7684\u306a\u51e6\u7406\u3092\u884c\u3046\u65b9\u6cd5\u306f\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002<br>\uff08\u3054\u5b58\u3058\u306e\u65b9\u304c\u3044\u307e\u3057\u305f\u3089\u30b3\u30e1\u30f3\u30c8\u304f\u3060\u3055\u3044\u3002\u3002\uff01\uff09<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u81ea\u5206\u306e\u5834\u5408\u306f\u3001<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-api-fetch\/\" target=\"_blank\" rel=\"noreferrer noopener\">@wordpress\/api-fetch<\/a> \u3092\u4f7f\u3044\u3001 <code>register_rest_route<\/code> \u3067\u30ab\u30b9\u30bf\u30e0\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u3092\u5b9a\u7fa9\u3057\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u5185\u3067 <code>delete_option<\/code> \u3092\u5b9f\u884c\u3059\u308b\u4e8b\u3067\u5bfe\u5fdc\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u624b\u524d\u5473\u564c\u306b\u306a\u308a\u307e\u3059\u304c\u3001\u4ee5\u4e0b\u3092\u53c2\u8003\u306b\u3057\u3066\u307f\u3066\u4e0b\u3055\u3044\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/t-hamano\/custom-html-block-extension\/blob\/main\/classes\/class-api.php#L53-L65\" target=\"_blank\" rel=\"noreferrer noopener\">custom-html-block-extension\/class-api.php at main \u00b7 t-hamano\/custom-html-block-extension<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/t-hamano\/custom-html-block-extension\/blob\/main\/src\/admin\/editor-config\/index.jsx#L69-L87\" target=\"_blank\" rel=\"noreferrer noopener\">custom-html-block-extension\/index.jsx at main \u00b7 t-hamano\/custom-html-block-extension<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305f\u3001\u30dc\u30bf\u30f3\u3092\u62bc\u4e0b\u3057\u305f\u6642\u306b\u3044\u304d\u306a\u308a\u521d\u671f\u5316\u51e6\u7406\u3092\u884c\u3046\u306e\u3067\u306f\u306a\u304f\u3001\u4e00\u65e6\u78ba\u8a8d\u306e\u305f\u3081\u306b\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u30a6\u30a3\u30f3\u30c9\u30a6\u3092\u631f\u3080\u65b9\u304c\u89aa\u5207\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u81ea\u524d\u3067\u4f5c\u3089\u306a\u304f\u3066\u3082\u3001 <code>Modal<\/code> \u3068\u3044\u3046\u4fbf\u5229\u306aComponent\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/modal\/\" target=\"_blank\" rel=\"noreferrer noopener\">Modal | Block Editor Handbook | WordPress Developer Resources<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u8a2d\u5b9a\u5024\u3092API\u7d4c\u7531\u3067\u306f\u306a\u304fJavaScript\u5909\u6570\u304b\u3089\u53d6\u5f97\u3059\u308b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5404\u8a2d\u5b9a\u5024\u3092\u521d\u671f\u5024\u304b\u3089\u5909\u66f4\u30fb\u4fdd\u5b58\u3057\u3066\u3044\u308b\u5834\u5408\u3001\u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u6642\u306e\u8a2d\u5b9a\u5024\uff08state\uff09\u304c\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code>useState<\/code> \u3067\u6307\u5b9a\u3057\u305f\u521d\u671f\u5024<\/li>\n\n\n\n<li>API\u7d4c\u7531\u3067\u53d6\u5f97\u3057\u305f\u8a2d\u5b9a\u5024\u3092<code>setState<\/code>\u3067\u8a2d\u5b9a\u3059\u308b<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">1\u30682\u306e\u9593\u306b\u306f\u30bf\u30a4\u30e0\u30e9\u30b0\u304c\u3042\u308b\u305f\u3081\u3001\u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u76f4\u5f8c\u306e\u6319\u52d5\u3092\u78ba\u8a8d\u3057\u3066\u307f\u308b\u3068\u3001\u8a2d\u5b9a\u9805\u76ee\u306e\u5165\u529b\u6b04\u306e\u5024\u304c\u300c1\u306e\u5024\u21922\u306e\u5024\u300d\u3068\u5909\u308f\u308b\u4e8b\u304c\u5206\u304b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306f\u3001API\u3067\u306e\u8a2d\u5b9a\u5024\u53d6\u5f97\u306e\u305f\u3081\u306b\u3042\u3048\u3066\u3053\u306e\u3088\u3046\u306a\u4ed5\u69d8\u306b\u3057\u307e\u3057\u305f\u304c\u3001<a href=\"https:\/\/wpdocs.osdn.jp\/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9\/wp_localize_script\" target=\"_blank\" rel=\"noreferrer noopener\">wp_localize_script<\/a>\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u6642\u306e\u8a2d\u5b9a\u5024\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>wp_localize_script<\/code> \u306f\u3001PHP\u3067\u8a2d\u5b9a\u3057\u305f\u5024\u3092JavaScript\u306e\u5909\u6570\u3068\u3057\u3066\u51fa\u529b\u51fa\u6765\u308b\u95a2\u6570\u3067\u3001\u4ee5\u4e0b\u306e\u624b\u9806\u3067\u5b9f\u88c5\u3059\u308c\u3070\u30bf\u30a4\u30e0\u30e9\u30b0\u3092\u89e3\u6d88\u3067\u304d\u3001\u307e\u305f\u8a2d\u5b9a\u5024\u53d6\u5f97\u306e\u305f\u3081\u306eAPI\u901a\u4fe1\u51e6\u7406\u3082\u7121\u304f\u3059\u4e8b\u304c\u51fa\u6765\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code>admin_enqueue_scripts<\/code> \u3067\u30d5\u30c3\u30af\u3055\u308c\u305f\u95a2\u6570\u5185\u3067\u3001<code>get_option<\/code>\u3092\u4f7f\u7528\u3057\u3066\u8a2d\u5b9a\u5024\u3092\u53d6\u5f97\u3059\u308b<\/li>\n\n\n\n<li><code>wp_localize_script<\/code> \u95a2\u6570\u306e\u7b2c2\u5f15\u6570\u306b\u5909\u6570\u540d\u3001\u7b2c3\u5f15\u6570\u306e\u914d\u5217\u306b\u8a2d\u5b9a\u5024\u3092\u6307\u5b9a\u3059\u308b<\/li>\n\n\n\n<li><code>useState<\/code> \u306e\u521d\u671f\u5024\u306b\u3001JavaScript\u3067\u51fa\u529b\u3055\u308c\u305f\u5909\u6570\u306e\u5024\u3092\u4f7f\u3046<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u53c2\u8003\u6587\u732e<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.codeinwp.com\/blog\/plugin-options-page-gutenberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">Making a \u201cPlugin Options Page\u201d With Gutenberg Components<\/a><br><br>\u3053\u306e\u8a18\u4e8b\u306e\u30d9\u30fc\u30b9\u3068\u306a\u3063\u305f\u3001\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u5f62\u5f0f\u306e\u8a18\u4e8b\u3067\u3059\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/Codeinwp\/otter-blocks\" target=\"_blank\" rel=\"noreferrer noopener\">Gutenberg Blocks and Template Library by Otter<\/a><br><br>1.\u306e\u8a18\u4e8b\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u306e\u30d9\u30fc\u30b9\u306b\u3082\u306a\u3063\u3066\u3044\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u3067\u3059\u3002<br>\u975e\u5e38\u306b\u30b7\u30f3\u30d7\u30eb\u306a\u30b3\u30fc\u30c9\u306a\u306e\u3067\u3001\u5b9f\u969b\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u958b\u767a\u3067\u306f\u3069\u306e\u3088\u3046\u306b\u5b9f\u88c5\u3055\u308c\u3066\u3044\u308b\u304b\u5927\u5909\u53c2\u8003\u306b\u306a\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/Automattic\/jetpack\/tree\/master\/projects\/plugins\/jetpack\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/Automattic\/jetpack\/tree\/master\/projects\/plugins\/jetpack<\/a><br><br>WordPress\u516c\u5f0f\uff08Automatic\uff09\u304c\u63d0\u4f9b\u3057\u3066\u3044\u308b\u9ad8\u6a5f\u80fd\u306a\u30d7\u30e9\u30b0\u30a4\u30f3\u3067\u3059\u3002<br>\u305d\u306e\u5206\u30b3\u30fc\u30c9\u3082\u8907\u96d1\u3067\u81ea\u5206\u3082\u7406\u89e3\u3057\u304d\u308c\u3066\u3044\u307e\u305b\u3093\u304c\u3001\u30ab\u30b9\u30bf\u30e0\u30d6\u30ed\u30c3\u30af\u3082\u542b\u3081\u305f\u8907\u5408\u7684\u306a\u30d7\u30e9\u30b0\u30a4\u30f3\u958b\u767a\u306e\u53c2\u8003\u306b\u306a\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u306f\u3058\u3081\u306b WordPress\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u958b\u767a\u3059\u308b\u6642\u306b\u3001\u6a5f\u80fd\u554f\u308f\u305a\u8a2d\u5b9a\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3059\u308b\u30b1\u30fc\u30b9\u306f\u591a\u3044\u3068\u601d\u3044\u307e\u3059\u3002 \u4e00\u822c\u7684\u306b\u306f\u3001add_options_page\u30d5\u30c3\u30af\u306a\u3069\u3067\u7ba1\u7406\u753b\u9762\u306b\u72ec\u81ea\u30da\u30fc\u30b8\u3092\u8ffd\u52a0\u3057\u3001\u7b2c5\u5f15\u6570\u306b\u6307\u5b9a\u3057\u305f\u30b3\u30fc\u30eb [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_locale":"ja","_original_post":"https:\/\/aki-hamano.blog\/?p=380","footnotes":""},"categories":[16],"tags":[],"class_list":["post-380","post","type-post","status-publish","format-standard","hentry","category-gutenberg","ja"],"_links":{"self":[{"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/posts\/380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/comments?post=380"}],"version-history":[{"count":23,"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/posts\/380\/revisions"}],"predecessor-version":[{"id":1443,"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/posts\/380\/revisions\/1443"}],"wp:attachment":[{"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/media?parent=380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/categories?post=380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/tags?post=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}