{"id":37621,"date":"2022-10-04T22:27:32","date_gmt":"2022-10-04T13:27:32","guid":{"rendered":"https:\/\/kinsta.com\/jp\/?p=37621&#038;preview=true&#038;preview_id=37621"},"modified":"2023-06-08T17:39:47","modified_gmt":"2023-06-08T08:39:47","slug":"gutenberg-blocks","status":"publish","type":"post","link":"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/","title":{"rendered":"Gutenberg\u30d6\u30ed\u30c3\u30af\u958b\u767a\u5fb9\u5e95\u89e3\u8aac"},"content":{"rendered":"<p>\u591a\u304f\u306e\u958b\u767a\u8005\u304c\u3001Gutenberg\u306e\u30d6\u30ed\u30c3\u30af\u3084\u30a2\u30d7\u30ea\u958b\u767a\u3092\u59cb\u3081\u308b\u30cf\u30fc\u30c9\u30eb\u306e\u9ad8\u3055\u306b\u4e0d\u6e80\u3092\u62b1\u3044\u3066\u3044\u307e\u3059\u3002\u7fd2\u5f97\u306e\u96e3\u6613\u5ea6\u304c\u9ad8\u3044\u7406\u7531\u306f\u3001\u958b\u767a\u74b0\u5883\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u8a2d\u5b9a\u306e\u8907\u96d1\u3055\u306b\u3042\u308a\u307e\u3059\u3002\u3057\u304b\u3082\u3001\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306b\u306f\u3001JavaScript\u3001Node.js\u3001React\u3001Redux\u306e\u6df1\u3044\u77e5\u8b58\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n<p>WordPress\u516c\u5f0f\u306e<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/getting-started\/create-block\/\">\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u30cf\u30f3\u30c9\u30d6\u30c3\u30af<\/a>\u306f\u6709\u7528\u306a\u30ea\u30bd\u30fc\u30b9\u3067\u3059\u304c\u3001\u958b\u767a\u8005\u5411\u3051\u306e\u81a8\u5927\u306a\u60c5\u5831\u306e\u4e2d\u3067\u3001\u521d\u5fc3\u8005\u304c\u8ff7\u5b50\u306b\u306a\u308b\u3053\u3068\u306f\u307b\u307c\u9593\u9055\u3044\u306a\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n<p>Gutenberg\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30ea\u30fc\u30c9\u958b\u767a\u8005Mat\u00edas Ventura\u6c0f\u306f\u3001<a href=\"https:\/\/wptavern.com\/a-discussion-with-gutenberg-project-lead-matias-ventura-on-the-barrier-to-entry\">WP Tavern\u306e\u30a4\u30f3\u30bf\u30d3\u30e5\u30fc<\/a>\u3067\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8a9e\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<blockquote><p>\u3059\u3050\u306b\u30d6\u30ed\u30c3\u30af\u958b\u767a\u3092\u7fd2\u5f97\u3067\u304d\u308b\u4eba\u3082\u3044\u307e\u3059\u304c\u3001\u3084\u306f\u308a\u591a\u304f\u306e\u4eba\u306b\u3068\u3063\u3066\u5927\u304d\u306a\u58c1\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u6bb5\u968e\u7684\u306a\u7fd2\u5f97\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u304c\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306f\u3001\u69cb\u6210\u3082\u8868\u73fe\u3082\u6841\u9055\u3044\u306b\u6539\u5584\u3067\u304d\u308b\u306f\u305a\u3067\u3059\u3002\u3082\u3063\u3068\u3044\u308d\u3044\u308d\u306a\u3053\u3068\u304c\u3067\u304d\u308c\u3070\u3068\u601d\u3063\u3066\u3044\u307e\u3059\u3002\uff08\u82f1\u8a9e\u539f\u6587\u306e\u65e5\u672c\u8a9e\u8a33\uff09<\/p><\/blockquote>\n<p>\u305d\u3053\u3067\u3001\u4eca\u56de\u306e\u8a18\u4e8b\u3067\u306f\u3001Gutenberg\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306b\u3064\u3044\u3066\u3001\u5fb9\u5e95\u7684\u306b\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u305d\u308c\u3067\u306f\u3001\u65e9\u901f\u59cb\u3081\u307e\u3057\u3087\u3046\uff01<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Gutenberg\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306e\u524d\u63d0\u6761\u4ef6<\/h2>\n<p>WordPress\u30d7\u30e9\u30b0\u30a4\u30f3\u958b\u767a\u306e\u77e5\u8b58\u3068\u3001<a href=\"https:\/\/kinsta.com\/blog\/html-best-practices\/\">\u57fa\u672c\u7684\u306aHTML<\/a>\u3001CSS\u3001JavaScript\u3001React\u306e\u77e5\u8b58\u306e\u307f\u3092\u4f7f\u3063\u3066\u5b9f\u884c\u3067\u304d\u308b\u7bc4\u56f2\u3067\u3054\u8aac\u660e\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u4eca\u56de\u306e\u8a18\u4e8b\u306f\u3001\u3084\u3084\u9577\u7de8\u306b\u306a\u308a\u305d\u3046\u3067\u3059\u3002<\/p>\n<p>\u5fc5\u8981\u306a\u60c5\u5831\u3092\u3059\u3079\u3066\u76db\u308a\u8fbc\u307f\u3064\u3064\u3001\u308f\u304b\u308a\u3084\u3059\u3044\u7c21\u6f54\u306a\u89e3\u8aac\u3092\u884c\u3046\u305f\u3081\u3001\u9069\u5207\u306a\u59a5\u5354\u70b9\u3092\u63a2\u308a\u3001\u53d6\u308a\u4e0a\u3052\u308b\u30c8\u30d4\u30c3\u30af\u3092\u53b3\u9078\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u4e2d\u7d1a\u8005\u30fb\u4e0a\u7d1a\u8005\u306e\u65b9\u3005\u306f\u3001<a href=\"https:\/\/reactjs.org\/docs\/state-and-lifecycle.html\">React\u306e\u30b9\u30c6\u30fc\u30c8<\/a>\u3001<a href=\"https:\/\/redux.js.org\/api\/store\">Redux\u306e\u30b9\u30c8\u30a2<\/a>\u3001<a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\">\u9ad8\u968e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/a>\u306a\u3069\u306b\u89e6\u308c\u306a\u3044\u3053\u3068\u306b\u4e0d\u6e80\u3092\u611f\u3058\u3089\u308c\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u4eca\u56de\u306f\u3054\u4e86\u627f\u304f\u3060\u3055\u3044\u3002\u3053\u308c\u3089\u306e\u30c8\u30d4\u30c3\u30af\u3092\u7db2\u7f85\u3059\u308b\u3068\u3001\u3055\u3089\u306b\u9577\u5c3a\u306b\u306a\u308a\u3001\uff08React\u958b\u767a\u8005\u3067\u306a\u3044\u9650\u308a\uff09\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306e\u521d\u5fc3\u8005\u306b\u3068\u3063\u3066\u9ad8\u5ea6\u904e\u304e\u308b\u5185\u5bb9\u306b\u306a\u3063\u3066\u3057\u307e\u3046\u3068\u3044\u3046\u5224\u65ad\u3067\u3059\u3002<\/p>\n<p>\u540c\u3058\u7406\u7531\u3067\u3001<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/block-tutorial\/creating-dynamic-blocks\/\">\u30c0\u30a4\u30ca\u30df\u30c3\u30af\u30d6\u30ed\u30c3\u30af<\/a>\u3084<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/metabox\/\">\u30e1\u30bf\u30dc\u30c3\u30af\u30b9<\/a>\u306a\u3069\u3001Gutenberg\u306e\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306b\u95a2\u9023\u3059\u308b\u9ad8\u5ea6\u306a\u30c8\u30d4\u30c3\u30af\u3082\u4eca\u56de\u306f\u53d6\u308a\u4e0a\u3052\u307e\u305b\u3093\u3002<\/p>\n<p>\u3057\u304b\u3057\u3001\u3053\u306e\u8a18\u4e8b\u3092\u901a\u3057\u3066\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306e\u57fa\u790e\u3092\u7406\u89e3\u3059\u308c\u3070\u3001\u3059\u3050\u306b\u751f\u7523\u7684\u306a\u958b\u767a\u3092\u59cb\u3081\u3089\u308c\u308b\u306f\u305a\u3002<\/p>\n<p>\u305d\u3057\u3066\u3001\u4e00\u5ea6\u30d6\u30ed\u30c3\u30af\u958b\u767a\u3092\u59cb\u3081\u308c\u3070\u3001\u30b9\u30ad\u30eb\u3092\u78e8\u304d\u306a\u304c\u3089\u3001\u3088\u308a\u9ad8\u5ea6\u306aGutenberg\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u6210\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n\n<h2>Gutenberg\u306e\u30d6\u30ed\u30c3\u30af<\/h2>\n<p>2018\u5e7412\u6708\u306e\u30ea\u30ea\u30fc\u30b9\u4ee5\u6765\u3001<a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-wordpress-editor\/\">\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc<\/a>\u306f\u3001\u3042\u3089\u3086\u308b\u9762\u3067\u5927\u304d\u304f\u6539\u5584\u3055\u308c\u307e\u3057\u305f\u3002<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/\">\u5f37\u529b\u306aAPI<\/a>\u3001\u9ad8\u5ea6\u306a\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3001\u30e6\u30fc\u30b6\u30d3\u30ea\u30c6\u30a3\u306e\u5411\u4e0a\u3001\u6570\u3005\u306e\u30d6\u30ed\u30c3\u30af\u3001<a href=\"https:\/\/kinsta.com\/jp\/blog\/wordpress-5-8\/#full-site-editing-features-in-wordpress-58\">\u30d5\u30eb\u30b5\u30a4\u30c8\u7de8\u96c6\u306e\u6700\u521d\u306e\u5b9f\u88c5<\/a>\u306a\u3069\u3002<\/p>\n<p>\u672a\u3060\u958b\u767a\u4e2d\u306eGutenberg\u3082\u3001\u305d\u308c\u306a\u308a\u306b\u9577\u3044\u9053\u306e\u308a\u3092\u6b69\u3093\u3067\u304d\u307e\u3057\u305f\u3002\u4eca\u65e5\u3001\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u306f\u3001\u30da\u30fc\u30b8\u30d3\u30eb\u30c0\u30fc\u3084\u30b5\u30a4\u30c8\u30d3\u30eb\u30c0\u30fc\u3068\u3057\u3066\u3001\u4fe1\u983c\u6027\u3082\u5411\u4e0a\u3057\u3001\u6a5f\u80fd\u7684\u3067\u3001\u5341\u5206\u306a\u6210\u9577\u3092\u898b\u305b\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u958b\u767a\u8005\u306e\u8996\u70b9\u3067\u898b\u308b\u3068\u3001Gutenberg\u306f\u3001WordPress\u5229\u7528\u8005\u304c\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u4f5c\u6210\u3001\u7de8\u96c6\u3001\u524a\u9664\u3067\u304d\u308b\u3001React\u30d9\u30fc\u30b9\u306e\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\uff08SPA\uff09\u3067\u3059\u3002\u305f\u3060\u3057\u3001\u5f93\u6765\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u30a8\u30c7\u30a3\u30bf\u30fc\u306e\u62e1\u5f35\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<p>\u3053\u306e\u70b9\u306b\u3064\u3044\u3066\u3001\u5c11\u3057\u6398\u308a\u4e0b\u3052\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>Gutenberg\u306f\u3001\u901a\u5e38\u306eWYSIWYG\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u3080\u3057\u308d\u3001WordPress\u306b\u304a\u3051\u308b\u7de8\u96c6\u4f53\u9a13\u5168\u4f53\u306e\u518d\u5b9a\u7fa9\u3067\u3059\u3002<\/strong><\/p>\n<\/aside>\n\n<p>Gutenberg\u3067\u306f\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u30d6\u30ed\u30c3\u30af\u306b\u5206\u5272\u3057\u307e\u3059\u3002\u30d6\u30ed\u30c3\u30af\u306f\u3001\u6295\u7a3f\u3084\u56fa\u5b9a\u30da\u30fc\u30b8\u3001\u3042\u308b\u3044\u306f\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u5168\u4f53\u306e\u4f5c\u6210\u306b\u4f7f\u7528\u3067\u304d\u308b\u30ec\u30f3\u30ac\u306e\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u3002<\/p>\n<p>\u3067\u306f\u3001\u6280\u8853\u7684\u306b\u898b\u305f\u30d6\u30ed\u30c3\u30af\u306e\u5b9a\u7fa9\u3068\u306f\u4f55\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-blocks\/\">WordPress<\/a>\u304c\u3053\u308c\u3092\u3046\u307e\u304f\u8868\u73fe\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<blockquote><p>\u300c\u30d6\u30ed\u30c3\u30af\u300d\u3068\u306f\u3001\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3084\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u69cb\u6210\u3059\u308b\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u306e\u307e\u3068\u307e\u308a\u3092\u8868\u3059\u62bd\u8c61\u7684\u306a\u7528\u8a9e\u3067\u3042\u308b\u3002\u30a2\u30a4\u30c7\u30a2\u3068\u3057\u3066\u306f\u3001\u4eca\u65e5\u306eWordPress\u3067\u3001\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3001\u30ab\u30b9\u30bf\u30e0HTML\u3001\u57cb\u3081\u8fbc\u307f\u306e\u767a\u898b\u3067\u5b9f\u73fe\u3057\u3066\u3044\u308b\u6982\u5ff5\u3092\u3001\u5358\u4e00\u306e\u4e00\u8cab\u3057\u305fAPI\u3084\u30e6\u30fc\u30b6\u30fc\u4f53\u9a13\u3068\u7d71\u5408\u3057\u305f\u3082\u306e\u3068\u8a00\u3048\u308b\u3002\uff08\u82f1\u8a9e\u539f\u6587\u306e\u65e5\u672c\u8a9e\u8a33\uff09<\/p><\/blockquote>\n<p>\u30bf\u30a4\u30c8\u30eb\u3001\u6bb5\u843d\u3001\u30ab\u30e9\u30e0\u3001\u753b\u50cf\u3001\u30ae\u30e3\u30e9\u30ea\u30fc\u3001\u305d\u3057\u3066\u30b5\u30a4\u30c9\u30d0\u30fc\u30d1\u30cd\u30eb\u304b\u3089\u30d6\u30ed\u30c3\u30af\u30c4\u30fc\u30eb\u30d0\u30fc\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u307e\u3067\u3001\u30a8\u30c7\u30a3\u30bf\u30fc\u306e\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u69cb\u6210\u3059\u308b\u3059\u3079\u3066\u306e\u8981\u7d20\u306f\u3001React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3059\u3002<\/p>\n<p>\u3067\u306f\u3001React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u306f\u4f55\u3067\u3057\u3087\u3046\u304b\u3002W3Schools\u306f\u3001<a href=\"https:\/\/www.w3schools.com\/react\/react_components.asp\">\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5b9a\u7fa9<\/a>\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<blockquote><p>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001\u72ec\u7acb\u3057\u305f\u3001\u518d\u5229\u7528\u53ef\u80fd\u306a\u5c0f\u3055\u306a\u30b3\u30fc\u30c9\u3067\u3042\u308b\u3002JavaScript\u306e\u95a2\u6570\u3068\u540c\u3058\u76ee\u7684\u3092\u679c\u305f\u3059\u304c\u3001\u5206\u96e2\u3057\u3066\u52d5\u4f5c\u3057\u3001<code>render()<\/code>\u95a2\u6570\u3067HTML\u3092\u8fd4\u3059\u3002\uff08\u82f1\u8a9e\u539f\u6587\u306e\u65e5\u672c\u8a9e\u8a33\uff09<\/p><\/blockquote>\n<figure id=\"attachment_105117\" aria-describedby=\"caption-attachment-105117\" style=\"width: 2874px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105117 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/working-with-blocks.jpg\" alt=\"WordPress 5.8\u306eGutenberg\u30d6\u30ed\u30c3\u30af\" width=\"2874\" height=\"1344\"><figcaption id=\"caption-attachment-105117\" class=\"wp-caption-text\">WordPress 5.8\u306eGutenberg\u30d6\u30ed\u30c3\u30af<\/figcaption><\/figure>\n<p>Gutenberg\u306f\u3001\u5f93\u6765\u306eWordPress\u30af\u30e9\u30b7\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u3068\u306f\u7570\u306a\u308a\u307e\u3059\u304c\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u5185\u3067\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u4fdd\u5b58\u65b9\u6cd5\u306f\u540c\u3058\u3067\u3059\u3002\u3053\u308c\u306f\u3001Gutenberg\u304cWordPress\u5185\u3067\u52d5\u4f5c\u3059\u308b\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u3042\u308a\u3001\u30b3\u30a2\u3067\u306eCMS\u306e\u52d5\u4f5c\u306b\u5909\u5316\u306f\u306a\u3044\u305f\u3081\u3067\u3059\u3002<\/p>\n<p>Gutenberg\u3067\u4f5c\u6210\u3057\u305f\u6295\u7a3f\uff08\u304a\u3088\u3073\u56fa\u5b9a\u30da\u30fc\u30b8\u3001\u30ab\u30b9\u30bf\u30e0\u6295\u7a3f\u30bf\u30a4\u30d7\uff09\u306f\u3001\u30af\u30e9\u30b7\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u540c\u69d8\u3001<code>wp_posts<\/code>\u30c6\u30fc\u30d6\u30eb\u306b\u683c\u7d0d\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u3057\u304b\u3057\u3001\u30c6\u30fc\u30d6\u30eb\u5185\u306eGutenberg\u3067\u4f5c\u6210\u3055\u308c\u305f\u6295\u7a3f\u306b\u306f\u3001\u30af\u30e9\u30b7\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u4f5c\u6210\u3055\u308c\u305f\u6295\u7a3f\u3068\u6839\u672c\u7684\u306b\u7570\u306a\u308b\u60c5\u5831\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>HTML\u30b3\u30e1\u30f3\u30c8\u306e\u3088\u3046\u306b\u3082\u898b\u3048\u308b\u3053\u306e\u60c5\u5831\u306b\u306f\u3001\u533a\u5207\u308a\u30d6\u30ed\u30c3\u30af\u3068\u3044\u3046\u6a5f\u80fd\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_105118\" aria-describedby=\"caption-attachment-105118\" style=\"width: 1522px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105118 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/code-editor-view.jpg\" alt=\"\u30b3\u30fc\u30c9\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u8868\u793a\u3057\u305f\u30d6\u30ed\u30b0\u306e\u6295\u7a3f\" width=\"1522\" height=\"1054\"><figcaption id=\"caption-attachment-105118\" class=\"wp-caption-text\">\u30b3\u30fc\u30c9\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u8868\u793a\u3057\u305f\u30d6\u30ed\u30b0\u306e\u6295\u7a3f<\/figcaption><\/figure>\n<p>\u3053\u306e\u30d6\u30ed\u30c3\u30af\u3092\u533a\u5207\u308b\u3001<strong>\u533a\u5207\u308a\u30d6\u30ed\u30c3\u30af<\/strong>\u306f\u3001\u753b\u9762\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u30d6\u30ed\u30c3\u30af\u3068JSON\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30d6\u30ed\u30c3\u30af\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5024\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001\u30d6\u30ed\u30c3\u30af\u304c\u753b\u9762\u4e0a\u3067\u3069\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u308b\u304b\u3092\u6c7a\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_105119\" aria-describedby=\"caption-attachment-105119\" style=\"width: 1630px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105119 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/post-content.jpg\" alt=\"wp_posts\u30c6\u30fc\u30d6\u30eb\u306b\u4fdd\u5b58\u3055\u308c\u305f\u30d6\u30ed\u30b0\u306e\u6295\u7a3f\" width=\"1630\" height=\"1036\"><figcaption id=\"caption-attachment-105119\" class=\"wp-caption-text\"><code>wp_posts<\/code>\u30c6\u30fc\u30d6\u30eb\u306b\u4fdd\u5b58\u3055\u308c\u305f\u30d6\u30ed\u30b0\u306e\u6295\u7a3f<\/figcaption><\/figure>\n<h2>WordPress\u958b\u767a\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h2>\n<p>\u6700\u65b0\u306eJavaScript\u958b\u767a\u74b0\u5883\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3059\u308b\u306b\u306f\u3001<a href=\"https:\/\/webpack.js.org\/\">Webpack<\/a>\u3001<a href=\"https:\/\/reactjs.org\/\">React<\/a>\u3001<a href=\"https:\/\/facebook.github.io\/jsx\/\">JSX<\/a>\u3001<a href=\"https:\/\/babeljs.io\/docs\/en\/index.html\">Babel<\/a>\u3001<a href=\"https:\/\/eslint.org\/\">ESLint<\/a>\u306a\u3069\u306e\u9ad8\u5ea6\u306a\u6280\u8853\u306b\u95a2\u3059\u308b\u78ba\u5b9f\u306a\u77e5\u8b58\u304c\u6c42\u3081\u3089\u308c\u307e\u3059\u3002<\/p>\n<p>\u4e00\u898b\u5c3b\u8fbc\u307f\u3057\u3066\u3057\u307e\u3044\u305d\u3046\u3067\u3059\u304c\u3001\u3054\u5b89\u5fc3\u3092\u3002WordPress\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u304c\u3001\u3059\u3067\u306b\u6551\u3044\u306e\u624b\u3092\u5dee\u3057\u4f38\u3079\u3066\u304a\u308a\u3001\u9762\u5012\u306a\u500b\u5225\u306e\u8a2d\u5b9a\u3092\u56de\u907f\u3067\u304d\u308b\u3001\u512a\u308c\u305f\u30c4\u30fc\u30eb\u304c\u5b58\u5728\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u7c21\u6f54\u306a\u89e3\u8aac\u3092\u5fc3\u304c\u3051\u308b\u305f\u3081\u3001<a href=\"https:\/\/kinsta.com\/blog\/transpiling-php\/\">\u30c8\u30e9\u30f3\u30b9\u30d1\u30a4\u30eb<\/a>\u306b\u3064\u3044\u3066\u306f\u89e6\u308c\u307e\u305b\u3093\uff08\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306e\u57fa\u672c\u3092\u7fd2\u5f97\u5f8c\u306b\u5b66\u7fd2\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\uff09\u3002\u4ee3\u308f\u308a\u306b\u3001\u6700\u65b0\u306eJavaScript\u958b\u767a\u74b0\u5883\u3092\u3001\u7d20\u65e9\u304f\u7c21\u5358\u306b\u3001\u6570\u5206\u3067\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3067\u304d\u308b\u30012\u3064\u306e\u4ee3\u66ff\u30c4\u30fc\u30eb\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002\u958b\u767a\u3059\u308b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u5fdc\u3058\u3066\u3001\u4fbf\u5229\u306a\u65b9\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>Gutenberg\u30d6\u30ed\u30c3\u30af\u69cb\u7bc9\u7528\u306eJavaScript\u958b\u767a\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u306f\u3001\u4ee5\u4e0b\u306e3\u3064\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u884c\u3044\u307e\u3059\u3002<\/p>\n<ol>\n<li><a href=\"#node-npm\">Node.js\u3068npm\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/a><\/li>\n<li><a href=\"#dev-environment\">\u958b\u767a\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/a><\/li>\n<li><a href=\"#block-plugin\">\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/a><\/li>\n<\/ol>\n<p>\u3067\u306f\u3001\u305d\u308c\u305e\u308c\u306e\u624b\u9806\u3092\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<h3 id=\"node-npm\">1. Node.js\u3068npm\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n<p>\u958b\u767a\u74b0\u5883\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3001\u6700\u521d\u306e\u30d6\u30ed\u30c3\u30af\u3092\u767b\u9332\u3059\u308b\u524d\u306b\u3001<a href=\"https:\/\/kinsta.com\/it\/knowledgebase\/node-js\/\">Node.js<\/a>\u3068Node\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\uff08npm\uff09\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><a href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a>\u306f\u3001Chrome\u306eV8 JavaScript\u30a8\u30f3\u30b8\u30f3\u4e0a\u306b\u69cb\u7bc9\u3055\u308c\u305fJavaScript\u30e9\u30f3\u30bf\u30a4\u30e0\u3067\u3059\u3002\u307e\u305f\u3001\u4e00\u822c\u306bNode\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\u3068\u3057\u3066\u77e5\u3089\u308c\u308b<a href=\"https:\/\/www.npmjs.com\/\">npm<\/a>\u306f\u3001\u4e16\u754c\u6700\u5927\u306e\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u30ec\u30b8\u30b9\u30c8\u30ea\u3068\u8a00\u308f\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<\/aside>\n\n<p>Node.js\u3068npm\u306f\u3001<a href=\"https:\/\/docs.npmjs.com\/downloading-and-installing-node-js-and-npm\">\u8907\u6570\u306e\u65b9\u6cd5<\/a>\u3067<a href=\"https:\/\/kinsta.com\/jp\/blog\/how-to-install-node-js\/\">\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/a>\u3067\u304d\u307e\u3059\u304c\u3001\u307e\u305a\u306f\u3001\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u6e08\u307f\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u30bf\u30fc\u30df\u30ca\u30eb\u3092\u8d77\u52d5\u3057\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>\u7d50\u679c\u304c\u300c<code>command not found<\/code>\uff08\u30b3\u30de\u30f3\u30c9\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\uff09\u300d\u3067\u3042\u308c\u3070\u3001Node.js\u306f\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002\u3053\u306e\u307e\u307e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3092\u9032\u3081\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u6700\u3082\u7c21\u5358\u306a\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5\u3067\u3042\u308b<a href=\"https:\/\/nodejs.org\/en\/download\/\">Node\u30a4\u30f3\u30b9\u30c8\u30fc\u30e9<\/a>\u3092\u4f7f\u3063\u305f\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\u4f7f\u7528\u3057\u3066\u3044\u308b\u30aa\u30da\u30ec\u30fc\u30c6\u30a3\u30f3\u30b0\u30b7\u30b9\u30c6\u30e0\u306b\u5bfe\u5fdc\u3059\u308b\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3001\u30a6\u30a3\u30b6\u30fc\u30c9\u3092\u8d77\u52d5\u3059\u308b\u3060\u3051\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_105120\" aria-describedby=\"caption-attachment-105120\" style=\"width: 1974px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105120 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/nodejs-downloads.jpg\" alt=\"Node.js\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u30da\u30fc\u30b8\" width=\"1974\" height=\"1550\"><figcaption id=\"caption-attachment-105120\" class=\"wp-caption-text\">Node.js\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u30da\u30fc\u30b8<\/figcaption><\/figure>\n<p>Node.js\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001\u518d\u5ea6\u30bf\u30fc\u30df\u30ca\u30eb\u3067<code>node -v<\/code>\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002\u307e\u305f\u3001<code>npm -v<\/code>\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u3001npm\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u5229\u7528\u3067\u304d\u308b\u3053\u3068\u3082\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u308c\u3067\u3001\u4ee5\u4e0b\u306e\u30c4\u30fc\u30eb\u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<ul>\n<li><code>npx<\/code>\uff1aNode.js\u30d1\u30c3\u30b1\u30fc\u30b8\u30e9\u30f3\u30ca\u30fc\uff08<a href=\"https:\/\/nodejs.dev\/learn\/the-npx-nodejs-package-runner\">\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u53c2\u7167<\/a>\uff09\u3002\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u305b\u305a\u306b\u3001<code>npm<\/code>\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3002<\/li>\n<li><code>npm<\/code>\uff1aNode.js\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\uff08<a href=\"https:\/\/docs.npmjs.com\/\">\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u53c2\u7167<\/a>\uff09\u3002\u4f9d\u5b58\u95a2\u4fc2\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u5b9f\u884c\u3059\u308b\u3002<\/li>\n<\/ul>\n<p>\u6b21\u306b\u958b\u767a\u74b0\u5883\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<h3 id=\"dev-environment\">2. \u958b\u767a\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h3>\n<p>\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u306b\u6700\u65b0\u7248\u306eNode.js\u3068npm\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u3089\u3001\u6b21\u306b\u3001WordPress\u306e\u958b\u767a\u74b0\u5883\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n<p>\u3053\u308c\u306b\u306f\u3001DevKinsta\u306e\u3088\u3046\u306a\u30ed\u30fc\u30ab\u30eb\u958b\u767a\u74b0\u5883\u3092\u4f7f\u3046\u304b\u3001WordPress\u306e\u516c\u5f0f\u30c4\u30fc\u30eb\u3092\u4f7f\u3046\u304b\u306e\u3069\u3061\u3089\u304b\u306b\u306a\u308a\u307e\u3059\u3002\u305d\u308c\u305e\u308c\u306e\u65b9\u6cd5\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<h4 id=\"devkinsta\">\u65b9\u6cd51. DevKinsta\u3092\u4f7f\u7528\u3059\u308b<\/h4>\n<p>Kinsta\u306e\u30ed\u30fc\u30ab\u30ebWordPress\u958b\u767a\u30c4\u30fc\u30eb\u300c<a href=\"https:\/\/kinsta.com\/jp\/devkinsta\/\">DevKinsta<\/a>\u300d\u3092\u4f7f\u7528\u3059\u308c\u3070\u3001\u6570\u30af\u30ea\u30c3\u30af\u3067<a href=\"https:\/\/kinsta.com\/jp\/ebooks\/wordpress\/wordpress-local-development\/\">\u30ed\u30fc\u30ab\u30eb\u306bWordPress\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/a>\u3067\u304d\u307e\u3059\u3002\u307e\u305f\u3001DevKinsta\u306e\u4ed6\u306b\u3001<a href=\"https:\/\/kinsta.com\/jp\/blog\/install-wordpress-locally\/#how-to-install-wordpress-locally-on-mac-using-mamp\">MAMP<\/a>\u3084<a href=\"https:\/\/kinsta.com\/jp\/blog\/install-wordpress-locally\/#how-to-install-wordpress-locally-using-xampp\">XAMPP<\/a>\u306a\u3069\u3001\u4ed6\u306e\u30ed\u30fc\u30ab\u30eb\u958b\u767a\u30c4\u30fc\u30eb\u3082\u9078\u629e\u3067\u304d\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_105122\" aria-describedby=\"caption-attachment-105122\" style=\"width: 2502px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105122 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/dev-kinsta-create-new-site.jpg\" alt=\"DevKinsta\u3067\u306e\u65b0\u3057\u3044WordPress\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306e\u4f5c\u6210\" width=\"2502\" height=\"1252\"><figcaption id=\"caption-attachment-105122\" class=\"wp-caption-text\">DevKinsta\u3067\u306e\u65b0\u3057\u3044WordPress\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306e\u4f5c\u6210<\/figcaption><\/figure>\n<h4 id=\"wp-env\">\u65b9\u6cd52. wp-env\u3092\u4f7f\u7528\u3059\u308b<\/h4>\n<p>\u516c\u5f0f\u30c4\u30fc\u30eb\u300c<code><a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/env\">wp-env<\/a><\/code>\u300d\u3082\u3042\u308a\u307e\u3059\u3002wp-env\u306f\u3001\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u304b\u3089\u76f4\u63a5\u8d77\u52d5\u3057\u3066\u3001\u30ed\u30fc\u30ab\u30eb\u306eWordPress\u958b\u767a\u74b0\u5883\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002Noah Alen\u6c0f\u306f\u3001wp-env\u3092<a href=\"https:\/\/make.wordpress.org\/core\/2020\/03\/03\/wp-env-simple-local-environments-for-wordpress\/\">\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5b9a\u7fa9<\/a>\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<blockquote><p>WordPress\u306e\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u306f\u30b3\u30de\u30f3\u30c91\u3064\u3067\u3001\u7c21\u5358\u306b\u69cb\u7bc9\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<code>wp-env<\/code>\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u500b\u5225\u306e\u8a2d\u5b9a\u3092\u3057\u306a\u304f\u3066\u3082\u7c21\u5358\u306b\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u3092\u69cb\u7bc9\u3057\u3001\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u6307\u5b9a\u306b\u3088\u308a\u3001\u6642\u9593\u3092\u304b\u3051\u305a\u306b\u7d20\u65e9\u304fWordPress\u3092\u8d77\u52d5\u3067\u304d\u307e\u3059\u3002wp-env\u958b\u767a\u306b\u3088\u3063\u3066\u3001\u958b\u767a\u8005\u3001\u30c7\u30b6\u30a4\u30ca\u30fc\u3001\u7ba1\u7406\u8005\u306a\u3069\u3001\u8ab0\u3082\u304c\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u3092\u7c21\u5358\u306b\u5229\u7528\u3067\u304d\u308b\u3053\u3068\u304c\u76ee\u6a19\u3067\u3059\u3002\uff08\u82f1\u8a9e\u539f\u6587\u306e\u65e5\u672c\u8a9e\u8a33\uff09<\/p><\/blockquote>\n<p><code>wp-env<\/code>\u306f\u3001\u4ee5\u4e0b\u306e2\u30b9\u30c6\u30c3\u30d7\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u307e\u3059\u3002<\/p>\n<h5>\u30b9\u30c6\u30c3\u30d71. Docker\u3068Node.js\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3092\u78ba\u8a8d\u3059\u308b<\/h5>\n<p>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u8981\u4ef6\u3092\u6e80\u305f\u3059\u306b\u306f\u3001\u307e\u305a<a href=\"https:\/\/www.docker.com\/\">Docker<\/a>\u3068Node.js\u306e\u4e21\u65b9\u3092\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<code>wp-env<\/code>\u306f\u3001WordPress\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u3092\u5b9f\u884c\u3059\u308bDocker\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u30b3\u30fc\u30c9\u306b\u52a0\u3048\u3089\u308c\u305f\u5909\u66f4\u306f\u3001\u5373\u5ea7\u306bWordPress\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306b\u53cd\u6620\u3055\u308c\u307e\u3059\u3002<\/p>\n<h5>\u30b9\u30c6\u30c3\u30d72. \u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u304b\u3089<code>@wordpress\/env<\/code>\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/h5>\n<p>Docker\u3068Node.js\u304c\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u4e0a\u3067\u52d5\u4f5c\u3057\u3066\u3044\u308b\u72b6\u614b\u3067\u3001\u6b21\u306b\u3001WordPress<a href=\"https:\/\/developer.wordpress.org\/block-editor\/handbook\/tutorials\/devenv\/#wordpress-development-site\">\u958b\u767a\u74b0\u5883<\/a>\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<p><code>wp-env<\/code>\u306f\u3001\u30b0\u30ed\u30fc\u30d0\u30eb\u306b\u3082\u30ed\u30fc\u30ab\u30eb\u306b\u3082\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u307e\u3059\u3002\u30b0\u30ed\u30fc\u30d0\u30eb\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u306b\u306f\u3001plugins\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304b\u3089\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\uff08\u4ee5\u4e0b\u306e\u300c\u91cd\u8981\u300d\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u3057\u304f\u3054\u8aac\u660e\u3057\u307e\u3059\uff09\u3002<\/p>\n<pre><code class=\"language-bash\">npm install -g @wordpress\/env<\/code><\/pre>\n<p>\u30b3\u30de\u30f3\u30c9\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u306f\u4ee5\u4e0b\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n<ul>\n<li><code>npm install<\/code>\uff1a<a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/commands\/npm-install\">\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/a><\/li>\n<li><code>-g<\/code>\uff1a\u30b3\u30de\u30f3\u30c9\u306b\u4ed8\u52a0\u3057\u3066\u3001<a href=\"https:\/\/docs.npmjs.com\/downloading-and-installing-packages-globally\">\u7279\u5b9a\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30b0\u30ed\u30fc\u30d0\u30eb\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/a><\/li>\n<li><code>@wordpress\/env<\/code>\uff1a<a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/env\">\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u30d1\u30c3\u30b1\u30fc\u30b8<\/a><\/li>\n<\/ul>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Mac\u3084Linux\u3067\u306f\u3001node\u30d1\u30c3\u30b1\u30fc\u30b8\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067<strong>\/usr\/local\/lib\/node_modules<\/strong>\u306b<a href=\"https:\/\/nodejs.dev\/learn\/where-does-npm-install-the-packages\">\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/a>\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u66f8\u304d\u8fbc\u307f\u6a29\u9650\u304c\u306a\u3044\u3068\u3001EACCES\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3059\u3002\u30b0\u30ed\u30fc\u30d0\u30eb\u3078\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u6642\u306b\u767a\u751f\u3057\u305fEACCES\u6a29\u9650\u30a8\u30e9\u30fc\u3092\u89e3\u6c7a\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u306f<a href=\"https:\/\/docs.npmjs.com\/resolving-eacces-permissions-errors-when-installing-packages-globally\">\u3053\u3061\u3089<\/a>\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\"><\/p>\n<\/aside>\n<\/span><\/p>\n<p><code>wp-env<\/code>\u304c\u6b63\u5e38\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u305f\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u306b\u306f\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">wp-env --version<\/code><\/pre>\n<p><code>wp-env<\/code>\u306e\u73fe\u5728\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u304c\u8868\u793a\u3055\u308c\u308b\u306f\u305a\u3067\u3059\u3002\u3053\u308c\u3067\u3001<a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/env#user-content-usage\">\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30d5\u30a9\u30eb\u30c0\u304b\u3089<\/a>\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001\u74b0\u5883\u3092\u8d77\u52d5\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">wp-env start<\/code><\/pre>\n<p>WordPress\u306e\u7ba1\u7406\u753b\u9762\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u30a2\u30c9\u30ec\u30b9\u3067\u30a2\u30af\u30bb\u30b9\u3067\u304d\u307e\u3059\u3002<\/p>\n<ul>\n<li>http:\/\/localhost:8888\/wp-admin\/<\/li>\n<\/ul>\n<p>\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u8a8d\u8a3c\u60c5\u5831\u306f\u4ee5\u4e0b\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n<ul>\n<li>\u30e6\u30fc\u30b6\u30fc\u540d\uff1a<code>admin<\/code><\/li>\n<li>\u30d1\u30b9\u30ef\u30fc\u30c9\uff1a<code>password<\/code><\/li>\n<\/ul>\n<h3 id=\"block-plugin\">\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h3>\n<p>\u6b21\u306b\u3001\u958b\u767a\u306e\u30d9\u30fc\u30b9\u3068\u306a\u308b\u30b9\u30bf\u30fc\u30bf\u30fc\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u304c\u5fc5\u8981\u3067\u3059\u304c\u3001\u3059\u3079\u3066\u306e\u30d5\u30a1\u30a4\u30eb\u3084\u30d5\u30a9\u30eb\u30c0\u3092\u542b\u3080\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u6e96\u5099\u306f\u4e0d\u8981\u3067\u3059\u3002\u958b\u767a\u30c4\u30fc\u30eb\u3092\u5b9f\u884c\u3059\u308b\u3060\u3051\u3067\u3001\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306b\u5fc5\u8981\u306a\u3059\u3079\u3066\u306e\u30d5\u30a1\u30a4\u30eb\u3084\u8a2d\u5b9a\u3092\u6e96\u5099\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u3053\u308c\u3092\u884c\u3046\u306b\u306f\u30012\u3064\u306e\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\u3002\u305d\u308c\u305e\u308c\u8a73\u3057\u304f\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<h4 id=\"create-block\">\u65b9\u6cd51. @wordpress\/create-block\u3092\u4f7f\u7528\u3059\u308b<\/h4>\n<p><a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/packages\/packages-create-block\/\">@wordpress\/create-block<\/a>\u306f\u3001Gutenberg\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u6210\u3059\u308b\u3001\u69cb\u6210\u306e\u4e0d\u8981\u306a\u516c\u5f0f\u30c4\u30fc\u30eb\u3067\u3059\u3002<\/p>\n<blockquote><p>Create Block\u306f\u3001\u30d6\u30ed\u30c3\u30af\u306eWordPress\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u3072\u306a\u5f62\u3092\u4f5c\u6210\u3059\u308b\u3001\u516c\u5f0f\u30b5\u30dd\u30fc\u30c8\u30c4\u30fc\u30eb\u3067\u3059\u3002\u69cb\u6210\u306f\u4e0d\u8981\u3067\u3001\u30e2\u30c0\u30f3\u306a\u30d3\u30eb\u30c9\u74b0\u5883\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002PHP\u3001JS\u3001CSS\u30b3\u30fc\u30c9\u3001\u305d\u306e\u4ed6\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u958b\u59cb\u306b\u5fc5\u8981\u306a\u3059\u3079\u3066\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u751f\u6210\u3057\u307e\u3059\u3002<\/p>\n<p>Create Block\u306f<a href=\"https:\/\/create-react-app.dev\/docs\/getting-started\/\">create-react-app<\/a>\u304b\u3089\u591a\u5927\u306a\u5f71\u97ff\u3092\u53d7\u3051\u307e\u3057\u305f\u3002<a href=\"https:\/\/github.com\/gaearon\">@gaearon<\/a>\u3001Facebook\u306e\u958b\u767a\u8005\u3001\u305d\u3057\u3066React\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u306b\u5927\u304d\u306a\u8cdb\u8f9e\u3092\u9001\u308a\u307e\u3059\u3002<\/p><\/blockquote>\n<p>\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u3092\u8d77\u52d5\u3057\u305f\u3089\u3001<code>npx @wordpress\/create-bloc<\/code>k<a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\">\u30b3\u30de\u30f3\u30c9<\/a>\u3092\u5b9f\u884c\u3059\u308b\u3060\u3051\u3067\u3001\u30b9\u30bf\u30fc\u30bf\u30fc\u30d6\u30ed\u30c3\u30af\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u30b3\u30de\u30f3\u30c9\u306f\u3001<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/getting-started\/create-block\/wp-plugin\/\">\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u3072\u306a\u5f62\u3092\u4f5c\u6210<\/a>\u3057\u3001\u65b0\u3057\u3044\u30d6\u30ed\u30c3\u30af\u306e\u767b\u9332\u306b\u5fc5\u8981\u306a\u3001\u3059\u3079\u3066\u306e\u30d5\u30a1\u30a4\u30eb\u3068\u30d5\u30a9\u30eb\u30c0\u3092\u6e96\u5099\u3057\u307e\u3059\u3002<\/p>\n<p>\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3057\u3001\u3069\u306e\u3088\u3046\u306b\u52d5\u4f5c\u3059\u308b\u304b\u3092\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n<p>\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u30c4\u30fc\u30eb\u304b\u3089\u3001<strong>\/wp-content\/plugins\/<\/strong>\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3066\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block my-first-block<\/code><\/pre>\n<p>\u78ba\u8a8d\u3092\u6c42\u3081\u3089\u308c\u305f\u3089\u3001<code>y<\/code>\u3092\u5165\u529b\u3057\u3066\u6b21\u306b\u9032\u307f\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_105124\" aria-describedby=\"caption-attachment-105124\" style=\"width: 1136px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105124 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/create-block-my-first-block.jpg\" alt=\"@wordpress\/create-block\u3092\u4f7f\u7528\u3057\u305f\u30d6\u30ed\u30c3\u30af\u306e\u4f5c\u6210\" width=\"1136\" height=\"170\"><figcaption id=\"caption-attachment-105124\" class=\"wp-caption-text\">@wordpress\/create-block\u3092\u4f7f\u7528\u3057\u305f\u30d6\u30ed\u30c3\u30af\u306e\u4f5c\u6210<\/figcaption><\/figure>\n<p>\u3053\u306e\u51e6\u7406\u306b\u306f\u5c11\u3057\u6642\u9593\u304c\u304b\u304b\u308a\u307e\u3059\u3002\u5b8c\u4e86\u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_105125\" aria-describedby=\"caption-attachment-105125\" style=\"width: 1134px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105125 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/wordpress-create-block-completed.jpg\" alt=\"\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u304c\u4f5c\u6210\u3055\u308c\u305f\u72b6\u614b\" width=\"1134\" height=\"680\"><figcaption id=\"caption-attachment-105125\" class=\"wp-caption-text\">\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u304c\u4f5c\u6210\u3055\u308c\u305f\u72b6\u614b<\/figcaption><\/figure>\n<p>\u4ee5\u4e0a\u3067\u3059\uff01<\/p>\n<p>\u6b21\u306bWordPress\u306e\u958b\u767a\u74b0\u5883\u3092\u8d77\u52d5\u3057\u3001WordPress\u7ba1\u7406\u753b\u9762\u306e\u300c\u30d7\u30e9\u30b0\u30a4\u30f3\u300d\u753b\u9762\u3092\u8868\u793a\u3057\u307e\u3059\u3002\u4e00\u89a7\u306b\u30d7\u30e9\u30b0\u30a4\u30f3\u300cMy First Block\u300d\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<figure id=\"attachment_105126\" aria-describedby=\"caption-attachment-105126\" style=\"width: 1956px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105126 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/my-first-block-plugin.jpg\" alt=\"\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u304c\u6b63\u3057\u304f\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b\" width=\"1956\" height=\"1168\"><figcaption id=\"caption-attachment-105126\" class=\"wp-caption-text\">\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u304c\u6b63\u3057\u304f\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><code>wp-env<\/code>\u30c4\u30fc\u30eb\u3067\u306f\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u542b\u3080\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304b\u3089<code>wp-env start<\/code>\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001\u81ea\u52d5\u7684\u306b\u30d7\u30e9\u30b0\u30a4\u30f3\u304c\u30de\u30a6\u30f3\u30c8\u3055\u308c\u3001\u6709\u52b9\u5316\u3055\u308c\u307e\u3059\u3002\u4ed6\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304b\u3089<code>wp-env start<\/code>\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001\u4e00\u822c\u7684\u306aWordPress\u74b0\u5883\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\uff08<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/getting-started\/devenv\/\">WordPress\u516c\u5f0f\u30b5\u30a4\u30c8\u306e\u958b\u767a\u74b0\u5883\u30da\u30fc\u30b8<\/a>\u3082\u3054\u89a7\u304f\u3060\u3055\u3044\uff09\u3002<\/p>\n<\/aside>\n\n<p>\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u6709\u52b9\u5316\u3057\u3001\u65b0\u3057\u3044\u30d6\u30ed\u30b0\u6295\u7a3f\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u6b21\u306b\u3001\u30d6\u30ed\u30c3\u30af\u30a4\u30f3\u30b5\u30fc\u30bf\u30fc\u3092\u300c<strong>\u30a6\u30a3\u30b8\u30a7\u30c3\u30c8<\/strong>\u300d\u30bb\u30af\u30b7\u30e7\u30f3\u307e\u3067\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u3001\u65b0\u3057\u3044\u30d6\u30ed\u30c3\u30af\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_134071\" aria-describedby=\"caption-attachment-134071\" style=\"width: 2190px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134071 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/example-block.jpg\" alt=\"@wordpress\/create-block\u3067\u4f5c\u6210\u3057\u305f\u30d6\u30ed\u30c3\u30af\u306e\u4f8b\" width=\"2190\" height=\"1034\"><figcaption id=\"caption-attachment-134071\" class=\"wp-caption-text\">@wordpress\/create-block\u3067\u4f5c\u6210\u3057\u305f\u30d6\u30ed\u30c3\u30af\u306e\u4f8b<\/figcaption><\/figure>\n<p>\u3053\u3053\u3067\u30bf\u30fc\u30df\u30ca\u30eb\u306b\u623b\u308a\u3001\u30ab\u30ec\u30f3\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092<strong>my-first-block<\/strong>\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">cd my-first-block<\/code><\/pre>\n<p>\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>\u3053\u308c\u3067\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u958b\u767a\u30e2\u30fc\u30c9\u3067\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002\u672c\u756a\u7528\u306e\u30b3\u30fc\u30c9\u3092\u4f5c\u6210\u3059\u308b\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">npm run build<\/code><\/pre>\n<h4 id=\"create-guten-block\">\u65b9\u6cd52. create-guten-block\u3092\u4f7f\u7528\u3059\u308b<\/h4>\n<p><code><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code>\u306f\u3001Gutenberg\u30d6\u30ed\u30c3\u30af\u3092\u69cb\u7bc9\u3059\u308b\u3001\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u88fd\u306e\u958b\u767a\u30c4\u30fc\u30eb\u3067\u3059\u3002<\/p>\n<blockquote><p><code>create-guten-block<\/code>\u306f\u3001\u69cb\u6210\u306e\u4e0d\u8981\u306a\u958b\u767a\u30c4\u30fc\u30eb\u30ad\u30c3\u30c8\uff08#0CJS\uff09\u3067\u3059\u3002React\u3001webpack\u3001ES6\/7\/8\/Next\u3001ESLint\u3001Babel\u306a\u3069\u3092\u500b\u5225\u306b\u8a2d\u5b9a\u3057\u306a\u304f\u3066\u3082\u3001WordPress Gutenberg\u30d6\u30ed\u30c3\u30af\u3092\u6570\u5206\u3067\u958b\u767a\u3067\u304d\u307e\u3059\u3002<\/p><\/blockquote>\n<p>\u516c\u5f0f\u306e<code>create-block<\/code>\u30c4\u30fc\u30eb\u3068\u540c\u69d8\u306b\u3001<code>create-guten-block<\/code>\u3082\u3001<a href=\"https:\/\/create-react-app.dev\/docs\/getting-started\">create-react-app<\/a>\u3092\u30d9\u30fc\u30b9\u306b\u3057\u3066\u304a\u308a\u3001\u6700\u521d\u306e\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u7c21\u5358\u306b\u751f\u6210\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u30c4\u30fc\u30eb\u30ad\u30c3\u30c8\u306b\u306f\u3001\u6700\u65b0\u306eWordPress\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u4f5c\u6210\u306b\u5fc5\u8981\u306a\u3001<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#whats-included\">\u4ee5\u4e0b\u3092\u542b\u3080<\/a>\u3059\u3079\u3066\u306e\u6a5f\u80fd\u304c\u63c3\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<ul>\n<li>React\u3001JSX\u3001ES6\u69cb\u6587\u306b\u5bfe\u5fdc<\/li>\n<li>\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u5b9f\u884c\u3055\u308c\u308b\u3001webpack\u958b\u767a\u7528\u3001\u672c\u756a\u7528\u306e\u30d3\u30eb\u30c9\u30d7\u30ed\u30bb\u30b9<\/li>\n<li>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30b9\u30d7\u30ec\u30c3\u30c9\u6f14\u7b97\u5b50\u306a\u3069\u3001ES6\u3092\u8d85\u3048\u308b\u8a00\u8a9e\u62e1\u5f35<\/li>\n<li>-webkit\u306a\u3069\u306e\u63a5\u982d\u8f9e\u304c\u4e0d\u8981\u306a\u3001CSS\u306e\u81ea\u52d5\u63a5\u982d\u8f9e<\/li>\n<li>\u672c\u756a\u7528\u306b\u3001JS\u3001CSS\u3001\u753b\u50cf\u3092\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u4ed8\u304d\u3067\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u30d3\u30eb\u30c9\u30b9\u30af\u30ea\u30d7\u30c8<\/li>\n<li>cgb-scripts\u306e\u307f\u3078\u306e\u4f9d\u5b58\u306b\u3088\u308b\u6a5f\u80fd\u306e\u66f4\u65b0<\/li>\n<\/ul>\n<p>\u306a\u304a\u3001\u4ee5\u4e0b\u306e\u70b9\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<blockquote><p>\u30c8\u30ec\u30fc\u30c9\u30aa\u30d5\u3068\u3057\u3066\u3001\u3053\u308c\u3089\u306e\u30c4\u30fc\u30eb\u306f\u7279\u5b9a\u306e\u65b9\u6cd5\u3067\u52d5\u4f5c\u3059\u308b\u3088\u3046\u306b\u69cb\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u3082\u3057\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u9ad8\u5ea6\u306a\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u304c\u5fc5\u8981\u3067\u3042\u308c\u3070\u3001<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#--npm-run-eject\">\u5883\u754c\u3092<\/a><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#--npm-run-eject\">\u8d8a\u3048\u3066<\/a>\u81ea\u7531\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u307e\u3059\u304c\u3001\u305d\u306e\u3068\u304d\u3082\u3001\u69cb\u6210\u3092\u7dad\u6301\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p><\/blockquote>\n<p>WordPress\u306e\u30ed\u30fc\u30ab\u30eb\u30b5\u30a4\u30c8\u3092\u624b\u5143\u306b\u7528\u610f\u3057\u305f\u3089\u3001\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u30c4\u30fc\u30eb\u3092\u8d77\u52d5\u3057\u3001\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u5148\u306e<strong>\/wp-content\/plugins<\/strong>\u30d5\u30a9\u30eb\u30c0\u306b\u79fb\u52d5\u3057\u3066\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">npx create-guten-block my-first-block<\/code><\/pre>\n<p>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u69cb\u9020\u306e\u4f5c\u6210\u3001\u4f9d\u5b58\u95a2\u4fc2\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u306b\u306f\u30011\uff5e2\u5206\u307b\u3069\u304b\u304b\u308a\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_105147\" aria-describedby=\"caption-attachment-105147\" style=\"width: 1136px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105147 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/create-guten-block.jpg\" alt=\"create-guten-block\u3092\u4f7f\u7528\u3057\u305fGutenberg\u30d6\u30ed\u30c3\u30af\u306e\u4f5c\u6210\" width=\"1136\" height=\"290\"><figcaption id=\"caption-attachment-105147\" class=\"wp-caption-text\">create-guten-block\u3092\u4f7f\u7528\u3057\u305fGutenberg\u30d6\u30ed\u30c3\u30af\u306e\u4f5c\u6210<\/figcaption><\/figure>\n<p>\u51e6\u7406\u304c\u5b8c\u4e86\u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_105132\" aria-describedby=\"caption-attachment-105132\" style=\"width: 1130px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105132 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/create-guten-block-complete.jpg\" alt=\"create-guten-block\u3067\u6b63\u3057\u304f\u30d6\u30ed\u30c3\u30af\u304c\u4f5c\u6210\u3055\u308c\u305f\u72b6\u614b\" width=\"1130\" height=\"673\"><figcaption id=\"caption-attachment-105132\" class=\"wp-caption-text\">create-guten-block\u3067\u6b63\u3057\u304f\u30d6\u30ed\u30c3\u30af\u304c\u4f5c\u6210\u3055\u308c\u305f\u72b6\u614b<\/figcaption><\/figure>\n<p>\u4ee5\u4e0b\u306e\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u306f\u3001<a href=\"https:\/\/kinsta.com\/jp\/blog\/best-text-editors\/#visual-studio-code\">Visual Studio Code<\/a>\u5185\u3067\u7a3c\u50cd\u3057\u3066\u3044\u308b\u30bf\u30fc\u30df\u30ca\u30eb\u3068\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u69cb\u9020\u306e\u69d8\u5b50\u3067\u3059\u3002<\/p>\n<figure id=\"attachment_105133\" aria-describedby=\"caption-attachment-105133\" style=\"width: 2350px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105133 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/create-guten-block-plugin-in-visual-studio-code.jpg\" alt=\"Visual Sudio Code\u3067\u8868\u793a\u3057\u305f\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\" width=\"2350\" height=\"1484\"><figcaption id=\"caption-attachment-105133\" class=\"wp-caption-text\">Visual Sudio Code\u3067\u8868\u793a\u3057\u305f\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3<\/figcaption><\/figure>\n<p>\u6b21\u306b\u3001WordPress\u306e\u7ba1\u7406\u753b\u9762\u306b\u623b\u308a\u307e\u3059\u3002\u300c\u30d7\u30e9\u30b0\u30a4\u30f3\u300d\u753b\u9762\u306b\u300c<strong>my-first-block<\/strong>\u300d\u30d7\u30e9\u30b0\u30a4\u30f3\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<figure id=\"attachment_105134\" aria-describedby=\"caption-attachment-105134\" style=\"width: 2136px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105134 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/plugins-screen.jpg\" alt=\"create-guten-block\u3067\u4f5c\u6210\u3057\u305f\u30d7\u30e9\u30b0\u30a4\u30f3\" width=\"2136\" height=\"1155\"><figcaption id=\"caption-attachment-105134\" class=\"wp-caption-text\">create-guten-block\u3067\u4f5c\u6210\u3057\u305f\u30d7\u30e9\u30b0\u30a4\u30f3<\/figcaption><\/figure>\n<p>\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u6709\u52b9\u5316\u3057\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u306b\u623b\u308a\u307e\u3059\u3002\u30ab\u30ec\u30f3\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u300c<strong>my-first-block<\/strong>\u300d\u306b\u5909\u66f4\u3057\u3001<code>npm start<\/code>\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">cd my-first-block\nnpm start<\/code><\/pre>\n<p>\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u5fdc\u7b54\u304c\u3042\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<figure id=\"attachment_105128\" aria-describedby=\"caption-attachment-105128\" style=\"width: 1129px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105128 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/npm-started.jpg\" alt=\"npm start\" width=\"1129\" height=\"390\"><figcaption id=\"caption-attachment-105128\" class=\"wp-caption-text\">npm start<\/figcaption><\/figure>\n<p>\u3053\u306e\u5834\u5408\u3082\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u306f\u958b\u767a\u30e2\u30fc\u30c9\u3067\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002\u672c\u756a\u7528\u306e\u30b3\u30fc\u30c9\u3092\u4f5c\u6210\u3059\u308b\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">npm run build<\/code><\/pre>\n<p>\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u6709\u52b9\u5316\u3057\u3066\u3001\u65b0\u898f\u6295\u7a3f\u307e\u305f\u306f\u56fa\u5b9a\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u30d6\u30ed\u30c3\u30af\u30a4\u30f3\u30b9\u30da\u30af\u30bf\u3092\u691c\u7d22\u3057\u3066\u3001Gutenberg\u30d6\u30ed\u30c3\u30af\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_105136\" aria-describedby=\"caption-attachment-105136\" style=\"width: 2458px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105136 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/first-block-created-with-create-guten-block.jpg\" alt=\"create-guten-block\u3067\u4f5c\u6210\u3057\u305f\u30d6\u30ed\u30c3\u30af\" width=\"2458\" height=\"1220\"><figcaption id=\"caption-attachment-105136\" class=\"wp-caption-text\">create-guten-block\u3067\u4f5c\u6210\u3057\u305f\u30d6\u30ed\u30c3\u30af<\/figcaption><\/figure>\n<p>\u8a73\u7d30\u306a\u6982\u8981\u3084\u3001\u767a\u751f\u3057\u305f\u30a8\u30e9\u30fc\u3078\u306e\u5bfe\u5fdc\u306b\u3064\u3044\u3066\u306f\u3001<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">Ahmad Awais\u6c0f\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a>\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<h2>\u30b9\u30bf\u30fc\u30bf\u30fc\u30d6\u30ed\u30c3\u30af\u306e\u3072\u306a\u5f62\u306e\u63a2\u7d22<\/h2>\n<p><code>create-block<\/code>\u3068<code>create-guten-block<\/code>\u306e\u3069\u3061\u3089\u306e\u958b\u767a\u30c4\u30fc\u30eb\u3092\u9078\u629e\u3057\u3066\u3082\u3001\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u69cb\u7bc9\u306e\u51fa\u767a\u70b9\u3068\u3057\u3066\u5229\u7528\u53ef\u80fd\u306a\u30d6\u30ed\u30c3\u30af\u306e\u3072\u306a\u5f62\u3092\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2020\/02\/28\/new-wordpress-create-block-package-for-block-scaffolding\/\">\u30d6\u30ed\u30c3\u30af\u306e\u3072\u306a\u5f62<\/a>\u3068\u306f\u4f55\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n<blockquote><p>\u30d6\u30ed\u30c3\u30af\u306e\u3072\u306a\u5f62\u3068\u306f\u3001WordPress\u304b\u3089\u30d6\u30ed\u30c3\u30af\u3068\u3057\u3066\u8a8d\u8b58\u3055\u308c\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u9020\u3092\u8868\u3059\u8a00\u8449\u3067\u3059\u3002\u901a\u5e38\u3001\u3053\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u306f<strong>index.php<\/strong>\u3001<strong>index.js<\/strong>\u3001<strong>style.css<\/strong>\u306a\u3069\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u3042\u308a\u3001\u30d5\u30a1\u30a4\u30eb\u306e\u5185\u90e8\u306b\u306f<code>register_block_type<\/code>\u306a\u3069\u306e\u547c\u3073\u51fa\u3057\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p><\/blockquote>\n<p><a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/getting-started\/devenv\/\">\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u30cf\u30f3\u30c9\u30d6\u30c3\u30af<\/a>\u3067\u3082\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b\u516c\u5f0f\u306e<strong>Create Block<\/strong>\u958b\u767a\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002\u305f\u3060\u3057\u3001<code>create-guten-block<\/code>\u306e\u3088\u3046\u306a\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u30c4\u30fc\u30eb\u3067\u3082\u5927\u304d\u306a\u9055\u3044\u306f\u306a\u3044\u306f\u305a\u3067\u3059\u3002<\/p>\n<p>\u305d\u308c\u3067\u306f\u3001<code><a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/getting-started\/create-block\/\">create-block<\/a><\/code><a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/getting-started\/create-block\/\">\u30c4\u30fc\u30eb<\/a>\u3092\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<h3>\u958b\u767a\u30c4\u30fc\u30eb\u300cCreate Block\u300d\u3068\u306f<\/h3>\n<p>\u524d\u8ff0\u306e\u3088\u3046\u306b\u3001<a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\">Create Block<\/a>\u306f\u3001Gutenberg\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u6210\u3059\u308b\u516c\u5f0f\u306e\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u30c4\u30fc\u30eb\u3067\u3059\u3002\u30bf\u30fc\u30df\u30ca\u30eb\u3067<code>@wordpress\/create-block<\/code>\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001\u65b0\u3057\u3044\u30d6\u30ed\u30c3\u30af\u30bf\u30a4\u30d7\u306e\u767b\u9332\u306b\u5fc5\u8981\u306a\u3001PHP\u3001JS\u3001SCSS\u30d5\u30a1\u30a4\u30eb\u3068\u30b3\u30fc\u30c9\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block [options] [slug]<\/code><\/pre>\n<ul>\n<li><code>[slug]<\/code>\uff08\u4efb\u610f\uff09\uff1a\u30d6\u30ed\u30c3\u30af\u306e\u30b9\u30e9\u30c3\u30b0\u306e\u5272\u308a\u5f53\u3066\u3068\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u306b\u4f7f\u7528\u3055\u308c\u308b<\/li>\n<li><code>[options]<\/code>\uff08\u4efb\u610f\uff09\uff1a\u5229\u7528\u53ef\u80fd\u306a\u30aa\u30d7\u30b7\u30e7\u30f3<\/li>\n<\/ul>\n<p>\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u3001<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/javascript\/esnext-js\/\">ESNext<\/a>\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u304c\u5272\u308a\u5f53\u3066\u3089\u308c\u307e\u3059\u3002\u3059\u306a\u308f\u3061\u3001<a href=\"https:\/\/en.wikipedia.org\/wiki\/JSX_(JavaScript)\">JSX\u69cb\u6587<\/a>\u304c\u8ffd\u52a0\u3055\u308c\u305f<a href=\"https:\/\/www.freecodecamp.org\/news\/es5-to-esnext-heres-every-feature-added-to-javascript-since-2015-d0c255e13c6e\/\">\u6b21\u30d0\u30fc\u30b8\u30e7\u30f3\u306eJavaScript<\/a>\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u30d6\u30ed\u30c3\u30af\u540d\u3092\u7701\u7565\u3059\u308b\u3068\u3001\u30b3\u30de\u30f3\u30c9\u306f\u5bfe\u8a71\u30e2\u30fc\u30c9\u3067\u5b9f\u884c\u3055\u308c\u3001\u30d5\u30a1\u30a4\u30eb\u751f\u6210\u524d\u306b\u8907\u6570\u306e\u8a2d\u5b9a\u3092\u7de8\u96c6\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<figure id=\"attachment_133845\" aria-describedby=\"caption-attachment-133845\" style=\"width: 1684px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-133845 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/create-block-interactive-mode-1.jpg\" alt=\"\u5bfe\u8a71\u30e2\u30fc\u30c9\u3067\u306ecreate-block\u306e\u5b9f\u884c\" width=\"1684\" height=\"1005\"><figcaption id=\"caption-attachment-133845\" class=\"wp-caption-text\">\u5bfe\u8a71\u30e2\u30fc\u30c9\u3067\u306ecreate-block\u306e\u5b9f\u884c<\/figcaption><\/figure>\n<p>\u4e0b\u306e\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u306f\u3001\u516c\u5f0f\u306eCreate Block\u30c4\u30fc\u30eb\u3067\u4f5c\u6210\u3055\u308c\u305f\u3001\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30d5\u30a1\u30a4\u30eb\u69cb\u6210\u3067\u3059\u3002<\/p>\n<figure id=\"attachment_133848\" aria-describedby=\"caption-attachment-133848\" style=\"width: 1404px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-133848 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/block-structure.jpg\" alt=\"@wordpress\/create-block\u3067\u4f5c\u6210\u3055\u308c\u305f\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30d5\u30a1\u30a4\u30eb\u3068\u30d5\u30a9\u30eb\u30c0\" width=\"1404\" height=\"960\"><figcaption id=\"caption-attachment-133848\" class=\"wp-caption-text\">@wordpress\/create-block\u3067\u4f5c\u6210\u3055\u308c\u305f\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30d5\u30a1\u30a4\u30eb\u3068\u30d5\u30a9\u30eb\u30c0<\/figcaption><\/figure>\n<p>\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u4e3b\u306a\u30d5\u30a1\u30a4\u30eb\u3068\u30d5\u30a9\u30eb\u30c0\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n<h3 id=\"plugin-file\">\u30d7\u30e9\u30b0\u30a4\u30f3\u30d5\u30a1\u30a4\u30eb<\/h3>\n<p>\u30e1\u30a4\u30f3\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u30d5\u30a1\u30a4\u30eb\u3067\u306f\u3001<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-metadata\/\">\u30b5\u30fc\u30d0\u30fc\u306b\u30d6\u30ed\u30c3\u30af\u3092\u767b\u9332<\/a>\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name:       Kinsta Academy Block\n * Plugin URI:        https:\/\/kinsta.com\/\n * Description:       An example block for Kinsta Academy students\n * Requires at least: 5.9\n * Requires PHP:      7.0\n * Version:           0.1.0\n * Author:            Kinsta Students\n * License:           GPL-2.0-or-later\n * License URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Text Domain:       ka-example-block\n *\n * @package           ka-example-block\n *\/\n\n\/**\n * Registers the block using the metadata loaded from the `block.json` file.\n * Behind the scenes, it registers also all assets so they can be enqueued\n * through the block editor in the corresponding context.\n *\n * @see https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\n *\/\nfunction ka_example_block_ka_example_block_block_init() {\n\tregister_block_type( __DIR__ . '\/build' );\n}\nadd_action( 'init', 'ka_example_block_ka_example_block_block_init' );<\/code><\/pre>\n<p><code>register_block_type<\/code>\u95a2\u6570\u306f\u3001<strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u683c\u7d0d\u3055\u308c\u305f\u30e1\u30bf\u30c7\u30fc\u30bf\u3092\u4f7f\u7528\u3057\u3066\u3001<a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\">\u30b5\u30fc\u30d0\u30fc\u306b\u30d6\u30ed\u30c3\u30af\u30bf\u30a4\u30d7\u3092\u767b\u9332<\/a>\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u95a2\u6570\u306f2\u3064\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u53d6\u308a\u307e\u3059\u3002<\/p>\n<ul>\n<li>\u540d\u524d\u7a7a\u9593\u3092\u542b\u3080\u30d6\u30ed\u30c3\u30af\u30bf\u30a4\u30d7\u540d\u3001\u307e\u305f\u306f<strong>json<\/strong>\u30d5\u30a1\u30a4\u30eb\u304c\u3042\u308b\u30d5\u30a9\u30eb\u30c0\u306e\u30d1\u30b9\u3001\u307e\u305f\u306f\u5b8c\u5168\u306a<code>WP_Block_Type<\/code>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8<\/li>\n<li>\u30d6\u30ed\u30c3\u30af\u30bf\u30a4\u30d7\u306e\u5f15\u6570\u306e\u914d\u5217<\/li>\n<\/ul>\n<p>\u4e0a\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001\u30d6\u30ed\u30c3\u30af\u30bf\u30a4\u30d7\u306e\u5f15\u6570\u306b\u3001<a href=\"https:\/\/www.php.net\/manual\/en\/language.constants.magic.php\">\u30de\u30b8\u30c3\u30af\u5b9a\u6570<\/a>\u300c<code>__DIR__<\/code>\u300d\u304c\u6307\u5b9a\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u306f\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30d5\u30a1\u30a4\u30eb\u3068\u540c\u3058\u30d5\u30a9\u30eb\u30c0\u306b<strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u304c\u5b58\u5728\u3059\u308b\u3053\u3068\u3092\u610f\u5473\u3057\u307e\u3059\u3002<\/p>\n<h3 id=\"package-json\">package.json\u30d5\u30a1\u30a4\u30eb<\/h3>\n<p><a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/configuring-npm\/package-json\">package.json\u30d5\u30a1\u30a4\u30eb<\/a>\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306eJavaScript\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u3053\u3053\u306b\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f9d\u5b58\u95a2\u4fc2\u3082\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/kinsta.com\/jp\/blog\/free-html-editor\/\">\u30b3\u30fc\u30c9\u30a8\u30c7\u30a3\u30bf\u30fc<\/a>\u3067\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u304d\u3001\u5185\u5bb9\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre><code class=\"language-json\">{\n\t\"name\": \"ka-example-block\",\n\t\"version\": \"0.1.0\",\n\t\"description\": \"An example block for Kinsta Academy students\",\n\t\"author\": \"Kinsta Students\",\n\t\"license\": \"GPL-2.0-or-later\",\n\t\"homepage\": \"https:\/\/kinsta.com\/\",\n\t\"main\": \"build\/index.js\",\n\t\"scripts\": {\n\t\t\"build\": \"wp-scripts build\",\n\t\t\"format\": \"wp-scripts format\",\n\t\t\"lint:css\": \"wp-scripts lint-style\",\n\t\t\"lint:js\": \"wp-scripts lint-js\",\n\t\t\"packages-update\": \"wp-scripts packages-update\",\n\t\t\"plugin-zip\": \"wp-scripts plugin-zip\",\n\t\t\"start\": \"wp-scripts start\"\n\t},\n\t\"devDependencies\": {\n\t\t\"@wordpress\/scripts\": \"^24.1.0\"\n\t},\n\t\"dependencies\": {\n\t\t\"classnames\": \"^2.3.2\"\n\t}\n}<\/code><\/pre>\n<p><code>scripts<\/code><a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/using-npm\/scripts\">\u30d7\u30ed\u30d1\u30c6\u30a3<\/a>\u306f\u3001<a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts\">\u30b3\u30de\u30f3\u30c9\u3092\u542b\u3080\u9023\u60f3\u914d\u5217<\/a>\u3067\u3059\u3002\u30b3\u30de\u30f3\u30c9\u306f<code>npm run [cmd]<\/code>\u3092\u4f7f\u7528\u3057\u3066\u3001<a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/configuring-npm\/package-json\">\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb<\/a>\u306e\u69d8\u3005\u306a\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001<a href=\"https:\/\/developer.wordpress.org\/block-editor\/handbook\/tutorials\/create-block\/wp-plugin\/#package-json\">\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9<\/a>\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<ul>\n<li><code>npm run build<\/code>\uff1a\uff08\u5727\u7e2e\u3055\u308c\u305f\uff09\u672c\u756a\u7528\u30d3\u30eb\u30c9\u3092\u4f5c\u6210<\/li>\n<li><code>npm run start<\/code>\uff1a\uff08\u5727\u7e2e\u3055\u308c\u3066\u3044\u306a\u3044\uff09\u958b\u767a\u7528\u30d3\u30eb\u30c9\u3092\u4f5c\u6210<\/li>\n<\/ul>\n<p><code>dependencies<\/code>\u3068<code>devDependencies<\/code>\u306f\u3001<a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/configuring-npm\/package-json#dependencies\">\u30d1\u30c3\u30b1\u30fc\u30b8\u540d\u3068\u30d0\u30fc\u30b8\u30e7\u30f3<\/a>\u3092\u5bfe\u5fdc\u4ed8\u3051\u308b2\u3064\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3002<code>dependencies<\/code>\u306f\u672c\u756a\u7528\u30d3\u30eb\u30c9\u3067\u3001<code>devDependences<\/code>\u306f\u30ed\u30fc\u30ab\u30eb\u958b\u767a\u3067\u306e\u307f\u5fc5\u8981\u3067\u3059\uff08\u8a73\u7d30\u306f<a href=\"https:\/\/docs.npmjs.com\/specifying-dependencies-and-devdependencies-in-a-package-json-file\">\u3053\u3061\u3089<\/a>\uff09\u3002<\/p>\n<p>\u30c7\u30d5\u30a9\u30eb\u30c8\u306edevDependencies\u306f\u3001<code>@wordpress\/scripts<\/code>\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u307f\u3067\u3001\u3053\u308c\u306f\u300cWordPress\u958b\u767a\u5c02\u7528\u306e\u3001\u518d\u5229\u7528\u53ef\u80fd\u306a\u30b9\u30af\u30ea\u30d7\u30c8\u96c6\u300d\u3068\u3057\u3066<a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts\">\u5b9a\u7fa9<\/a>\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<h3 id=\"block-json\">block.json\u30d5\u30a1\u30a4\u30eb<\/h3>\n<p>WordPress 5.8\u4ee5\u964d\u3001<a href=\"https:\/\/kinsta.com\/jp\/blog\/wordpress-5-8\/#block-api-enhancements\">\u6b63\u5f0f\u306a\u30d6\u30ed\u30c3\u30af\u30bf\u30a4\u30d7\u306e\u767b\u9332<\/a>\u306b\u306f\u3001<strong>block.json<\/strong><a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-metadata\/\">\u30e1\u30bf\u30c7\u30fc\u30bf\u30d5\u30a1\u30a4\u30eb<\/a>\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<p><strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u306f\u3001<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-metadata\/#benefits-using-the-metadata-file\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u5411\u4e0a<\/a>\u3084\u3001<a href=\"https:\/\/ja.wordpress.org\/plugins\/\">WordPress\u30d7\u30e9\u30b0\u30a4\u30f3\u30c7\u30a3\u30ec\u30af\u30c8\u30ea<\/a>\u3067\u306e\u8996\u8a8d\u6027\u306e\u5411\u4e0a\u306a\u3069\u3001\u69d8\u3005\u306a\u5229\u70b9\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<blockquote><p>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u89b3\u70b9\u304b\u3089\u3001\u30c6\u30fc\u30de\u304c\u30a2\u30bb\u30c3\u30c8\u306e\u9045\u5ef6\u30ed\u30fc\u30c9\u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u3068\u304d\u3001<strong>block.json<\/strong>\u3067\u767b\u9332\u3055\u308c\u305f\u30d6\u30ed\u30c3\u30af\u306f\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u30a2\u30bb\u30c3\u30c8\u306e\u30ad\u30e5\u30fc\u51e6\u7406\u304c\u6700\u9069\u5316\u3055\u308c\u307e\u3059\u3002<code>style<\/code>\u307e\u305f\u306f<code>script<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u30ea\u30b9\u30c8\u3055\u308c\u305f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9CSS\u3084JavaScript\u30a2\u30bb\u30c3\u30c8\u306f\u3001\u30d6\u30ed\u30c3\u30af\u304c\u30da\u30fc\u30b8\u4e0a\u306b\u5b58\u5728\u3059\u308b\u3068\u304d\u306e\u307f\u30ad\u30e5\u30fc\u306b\u5165\u308c\u3089\u308c\u3001\u7d50\u679c\u3001\u30da\u30fc\u30b8\u30b5\u30a4\u30ba\u304c\u7e2e\u5c0f\u3057\u307e\u3059\u3002<\/p><\/blockquote>\n<p><code>@wordpress\/create-block<\/code>\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e<strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-json\">{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n\t\"apiVersion\": 2,\n\t\"name\": \"ka-example-block\/ka-example-block\",\n\t\"version\": \"0.1.0\",\n\t\"title\": \"Kinsta Academy Block\",\n\t\"category\": \"widgets\",\n\t\"icon\": \"superhero-alt\",\n\t\"description\": \"An example block for Kinsta Academy students\",\n\t\"supports\": {\n\t\t\"html\": false\n\t},\n\t\"textdomain\": \"ka-example-block\",\n\t\"editorScript\": \"file:.\/index.js\",\n\t\"editorStyle\": \"file:.\/index.css\",\n\t\"style\": \"file:.\/style-index.css\"\n}<\/code><\/pre>\n<p>\u4ee5\u4e0b\u306f\u3001<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-metadata\/#block-api\">\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3<\/a>\u306e\u4e00\u89a7\u3067\u3059\u3002<\/p>\n<ul>\n<li><code>apiVersion<\/code>\uff1a\u30d6\u30ed\u30c3\u30af\u304c\u5229\u7528\u3059\u308bAPI\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\uff08\u73fe\u5728\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u306f2\uff09<\/li>\n<li><code>name<\/code>\uff1a\u540d\u524d\u7a7a\u9593\u3092\u542b\u3080\u30d6\u30ed\u30c3\u30af\u306e\u4e00\u610f\u306a\u8b58\u5225\u5b50<\/li>\n<li><code>version<\/code>\uff1a\u30d6\u30ed\u30c3\u30af\u306e\u73fe\u5728\u306e\u30d0\u30fc\u30b8\u30e7\u30f3<\/li>\n<li><code>title<\/code>\uff1a\u30d6\u30ed\u30c3\u30af\u306e\u8868\u793a\u30bf\u30a4\u30c8\u30eb<\/li>\n<li><code>category<\/code>\uff1a\u30d6\u30ed\u30c3\u30af\u306e\u30ab\u30c6\u30b4\u30ea<\/li>\n<li><code>icon<\/code>\uff1a<a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/\">Dashicon<\/a>\u306e\u30b9\u30e9\u30c3\u30b0\u307e\u305f\u306f\u81ea\u4f5cSVG\u30a2\u30a4\u30b3\u30f3<\/li>\n<li><code>description<\/code>\uff1a\u30d6\u30ed\u30c3\u30af\u30a4\u30f3\u30b9\u30da\u30af\u30bf\u306b\u8868\u793a\u3055\u308c\u308b\u77ed\u3044\u8aac\u660e<\/li>\n<li><code>supports<\/code>\uff1a\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u4f7f\u7528\u3055\u308c\u308b\u6a5f\u80fd\u3092\u5236\u5fa1\u3059\u308b\u30aa\u30d7\u30b7\u30e7\u30f3\u7fa4<\/li>\n<li><code>textdomain<\/code>\uff1a\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30c6\u30ad\u30b9\u30c8\u30c9\u30e1\u30a4\u30f3<\/li>\n<li><code>editorScript<\/code>\uff1a\u30a8\u30c7\u30a3\u30bf\u30fc\u30b9\u30af\u30ea\u30d7\u30c8\u5b9a\u7fa9<\/li>\n<li><code>editorStyle<\/code>\uff1a\u30a8\u30c7\u30a3\u30bf\u30fc\u30b9\u30bf\u30a4\u30eb\u5b9a\u7fa9<\/li>\n<li><code>style<\/code>\uff1a\u30d6\u30ed\u30c3\u30af\u306e\u4ee3\u66ff\u30b9\u30bf\u30a4\u30eb\u3092\u6307\u5b9a<\/li>\n<\/ul>\n<p>\u4e0a\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u52a0\u3048\u3066\u5c5e\u6027\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u5b9a\u7fa9\u3067\u304d\u3001\u30d6\u30ed\u30c3\u30af\u304c\u4fdd\u5b58\u3059\u308b\u30c7\u30fc\u30bf\u306b\u95a2\u3059\u308b\u60c5\u5831\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<strong>block.json<\/strong>\u3067\u306f\u3001\u30ad\u30fc\u3068\u5024\u306e\u30da\u30a2\u3067\u3044\u304f\u3064\u3067\u3082\u5c5e\u6027\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u6642\u3001\u30ad\u30fc\u306f\u5c5e\u6027\u540d\u3001\u5024\u306f\u5c5e\u6027\u5b9a\u7fa9\u3067\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306f\u5c5e\u6027\u5b9a\u7fa9\u306e\u4f8b\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-json\">\"attributes\": {\n\t\"content\": {\n\t\t\"type\": \"array\",\n\t\t\"source\": \"children\",\n\t\t\"selector\": \"p\"\n\t},\n\t\"align\": {\n\t\t\"type\": \"string\",\n\t\t\"default\": \"none\"\n\t},\n\t\"link\": { \n\t\t\"type\": \"string\", \n\t\t\"default\": \"https:\/\/kinsta.com\" \n\t}\n},<\/code><\/pre>\n<p><strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u3064\u3044\u3066\u306f<a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#block-json-at-work\">\u3053\u306e\u8a18\u4e8b\u306e\u5f8c\u534a<\/a>\u3067\u8a73\u3057\u304f\u3054\u8aac\u660e\u3057\u307e\u3059\u304c\u3001\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u30cf\u30f3\u30c9\u30d6\u30c3\u30af\u3067\u3082\u3001<strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u306e<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-metadata\/\">\u30e1\u30bf\u30c7\u30fc\u30bf<\/a>\u3084<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-attributes\/\">\u5c5e\u6027<\/a>\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u89e3\u8aac\u3055\u308c\u3066\u3044\u307e\u3059\u306e\u3067\u3001\u53c2\u7167\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h3 id=\"src-folder\">src\u30d5\u30a9\u30eb\u30c0<\/h3>\n<p><code>src<\/code>\u30d5\u30a9\u30eb\u30c0\u306f\u3001\u958b\u767a\u304c\u884c\u308f\u308c\u308b\u5834\u6240\u3067\u3059\u3002\u30d5\u30a9\u30eb\u30c0\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<ul>\n<li><strong>index.js<\/strong><\/li>\n<li><strong>edit.js<\/strong><\/li>\n<li><strong>save.js<\/strong><\/li>\n<li><strong>editor.scss<\/strong><\/li>\n<li><strong>style.scss<\/strong><\/li>\n<\/ul>\n<h4>index.js<\/h4>\n<p><strong>index.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u306f\u51fa\u767a\u70b9\u3067\u3059\u3002\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3001\u30d6\u30ed\u30c3\u30af\u30bf\u30a4\u30d7\u3092\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u767b\u9332\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\n\nimport '.\/style.scss';\n\nimport Edit from '.\/edit';\nimport save from '.\/save';\nimport metadata from '.\/block.json';\n\nregisterBlockType( metadata.name, {\n\t\/**\n\t * @see .\/edit.js\n\t *\/\n\tedit: Edit,\n\n\t\/**\n\t * @see .\/save.js\n\t *\/\n\tsave,\n} );<\/code><\/pre>\n<p>\u6700\u521d\u306e\u6587\u3067\u306f\u3001<code>@wordpress\/blocks<\/code><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-blocks\/\">\u30d1\u30c3\u30b1\u30fc\u30b8<\/a>\u304b\u3089<code>registerBlockType<\/code>\u95a2\u6570\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u3002\u7d9a\u304f<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\">import\u6587<\/a>\u306f\u3001\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3001<code>Edit<\/code>\u95a2\u6570\u3001<code>save<\/code>\u95a2\u6570\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p><code>registerBlockType<\/code>\u95a2\u6570\u306f\u3001<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-registration\/\">\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u767b\u9332<\/a>\u3057\u307e\u3059\u3002\u3053\u306e\u95a2\u6570\u306f2\u3064\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u53d6\u308a\u307e\u3059\u3002\u30d6\u30ed\u30c3\u30af\u540d\u306e\u300c\u540d\u524d\u7a7a\u9593\/\u30d6\u30ed\u30c3\u30af\u540d\u300d\uff08\u30b5\u30fc\u30d0\u30fc\u4e0a\u3067\u767b\u9332\u3055\u308c\u305f\u3082\u306e\u3068\u540c\u3058\uff09\u3068\u30d6\u30ed\u30c3\u30af\u69cb\u6210\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3002<\/p>\n<p><code>Edit<\/code>\u95a2\u6570\u306f\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u63cf\u753b\u3055\u308c\u308b\u30d6\u30ed\u30c3\u30af\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u5b9a\u7fa9\u3057\u3001<code>save<\/code>\u95a2\u6570\u306f\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u3055\u308c\u3066\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u4fdd\u5b58\u3055\u308c\u308b\u69cb\u9020\u3092\u5b9a\u7fa9\u3057\u307e\u3059\uff08\u8a73\u3057\u304f\u306f<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-edit-save\/\">\u3053\u3061\u3089<\/a>\uff09\u3002<\/p>\n<h4>edit.js<\/h4>\n<p><strong>edit.js<\/strong>\u3067\u306f\u3001\u30d6\u30ed\u30c3\u30af\u7ba1\u7406\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nexport default function Edit() {\n\treturn (\n\t\t&lt;p {...useBlockProps()}&gt;\n\t\t\t{__('My First Block \u2013 hello from the editor!', 'my-first-block')}\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<p>\u307e\u305a\u3001<code>@wordpress\/i18n<\/code>\u30d1\u30c3\u30b1\u30fc\u30b8\uff08\u3053\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u306b\u306f\u3001JavaScript\u7248\u306e\u7ffb\u8a33\u95a2\u6570\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\uff09\u306e<code>__<\/code>\u95a2\u6570\u3001<a href=\"https:\/\/make.wordpress.org\/core\/2020\/11\/18\/block-api-version-2\/\"><code>useBlockProps<\/code><\/a> <a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-edit-save\/#block-wrapper-props\">React\u30d5\u30c3\u30af<\/a>\u3001<code>editor.scss<\/code>\u30d5\u30a1\u30a4\u30eb\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u7d9a\u3044\u3066\u3001React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3057\u307e\u3059\uff08\u8a73\u7d30\u306f<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\">import<\/a>\u6587\u3068<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export\">export<\/a>\u6587\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\uff09\u3002<\/p>\n<h4>save.js<\/h4>\n<p><strong>save.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u3067\u306f\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u4fdd\u5b58\u3059\u308b\u30d6\u30ed\u30c3\u30af\u69cb\u9020\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\n\nexport default function save() {\n\treturn (\n\t\t&lt;p {...useBlockProps.save()}&gt;\n\t\t\t{__(\n\t\t\t\t'My First Block \u2013 hello from the saved content!',\n\t\t\t\t'my-first-block'\n\t\t\t)}\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<h4>editor.scss\u3068style.scss<\/h4>\n<p>\u30b9\u30af\u30ea\u30d7\u30c8\u3068\u306f\u5225\u306b\u30012\u3064\u306e<a href=\"https:\/\/sass-lang.com\/\">SASS<\/a>\u30d5\u30a1\u30a4\u30eb\u304c<strong>src<\/strong>\u30d5\u30a9\u30eb\u30c0\u306b\u5b58\u5728\u3057\u307e\u3059\u3002<strong>editor.scss<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u306f\u30a8\u30c7\u30a3\u30bf\u30fc\u306e\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3067\u30d6\u30ed\u30c3\u30af\u306b\u9069\u7528\u3055\u308c\u308b\u30b9\u30bf\u30a4\u30eb\u304c\u542b\u307e\u308c\u3001<strong>style.scss<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u306f<a href=\"https:\/\/developer.wordpress.org\/block-editor\/contributors\/code\/coding-guidelines\/#scss-file-naming-conventions-for-blocks\">\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30a8\u30c7\u30a3\u30bf\u30fc<\/a>\u3067\u306e\u8868\u793a\u7528\u306e\u30d6\u30ed\u30c3\u30af\u306e\u30b9\u30bf\u30a4\u30eb\u304c\u542b\u307e\u308c\u307e\u3059\u3002\u3053\u308c\u3089\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u3064\u3044\u3066\u306f\u3001\u3053\u306e\u8a18\u4e8b\u306e\u5f8c\u534a\u3067\u6398\u308a\u4e0b\u3052\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<h3 id=\"node_modules-build\">node_modules\u3068build\u30d5\u30a9\u30eb\u30c0<\/h3>\n<p><code>node_modules<\/code>\u30d5\u30a9\u30eb\u30c0\u306b\u306f\u3001node\u30e2\u30b8\u30e5\u30fc\u30eb\u3068\u305d\u306e\u4f9d\u5b58\u95a2\u4fc2\u304c\u683c\u7d0d\u3055\u308c\u3066\u3044\u307e\u3059\u3002node\u30d1\u30c3\u30b1\u30fc\u30b8\u306f\u3001\u3053\u306e\u8a18\u4e8b\u3067\u6271\u3046\u7bc4\u56f2\u3092\u8d85\u3048\u308b\u305f\u3081\u6df1\u5165\u308a\u3057\u307e\u305b\u3093\u304c\u3001npm\u304c\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5834\u6240\u306b\u3064\u3044\u3066\u306f\u3001<a href=\"https:\/\/nodejs.dev\/learn\/where-does-npm-install-the-packages\">\u3053\u306e\u8a18\u4e8b<\/a>\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<p><code>build<\/code>\u30d5\u30a9\u30eb\u30c0\u306b\u306f\u3001\u30d3\u30eb\u30c9\u51e6\u7406\u3067\u751f\u6210\u3055\u308c\u305fJS\u30d5\u30a1\u30a4\u30eb\u3068CSS\u30d5\u30a1\u30a4\u30eb\u304c\u683c\u7d0d\u3055\u308c\u307e\u3059\u3002\u8a73\u3057\u3044\u30d3\u30eb\u30c9\u30d7\u30ed\u30bb\u30b9\u306b\u3064\u3044\u3066\u306f\u3001\u300c<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/javascript\/esnext-js\/\">ESNext\u69cb\u6587<\/a>\u300d\u3068\u300c<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/javascript\/js-build-setup\/\">JavaScript\u30d3\u30eb\u30c9\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/a>\u300d\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<h2>\u5b9f\u8df5\u2500Gutenberg\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u6210\u3057\u3088\u3046<\/h2>\n<p>\u305d\u308c\u3067\u306f\u3001\u5b9f\u969b\u306b\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u3063\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001CTA\uff08\u30b3\u30fc\u30eb\u30fb\u30c8\u30a5\u30fb\u30a2\u30af\u30b7\u30e7\u30f3\uff09\u30d6\u30ed\u30c3\u30af\u3001Kinsta Academy\u30d6\u30ed\u30c3\u30af\u3092\u5b9f\u88c5\u3059\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u4f5c\u6210\u65b9\u6cd5\u3092\u3054\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n<p>\u30d6\u30ed\u30c3\u30af\u306f2\u3064\u306e\u30ab\u30e9\u30e0\u3067\u69cb\u6210\u3055\u308c\u3001\u5de6\u5074\u306b\u753b\u50cf\u3001\u53f3\u5074\u306b\u30c6\u30ad\u30b9\u30c8\u306e\u6bb5\u843d\u304c\u3042\u308a\u307e\u3059\u3002\u30c6\u30ad\u30b9\u30c8\u306e\u4e0b\u306b\u306f\u3001\u7de8\u96c6\u53ef\u80fd\u306a\u30ea\u30f3\u30af\u304c\u4ed8\u3044\u305f\u30dc\u30bf\u30f3\u304c\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_137853\" aria-describedby=\"caption-attachment-137853\" style=\"width: 1502px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-137853 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/custom-block-final-2.jpg\" alt=\"\u3053\u306e\u8a18\u4e8b\u3067\u69cb\u7bc9\u65b9\u6cd5\u3092\u5b66\u3076\u30d6\u30ed\u30c3\u30af\u30bf\u30a4\u30d7\" width=\"1502\" height=\"808\"><figcaption id=\"caption-attachment-137853\" class=\"wp-caption-text\">\u3053\u306e\u8a18\u4e8b\u3067\u69cb\u7bc9\u65b9\u6cd5\u3092\u5b66\u3076\u30d6\u30ed\u30c3\u30af\u30bf\u30a4\u30d7<\/figcaption><\/figure>\n<p>\u3053\u308c\u306f\u7c21\u5358\u306a\u4f8b\u3067\u3059\u304c\u3001Gutenberg\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306e\u57fa\u672c\u3092\u7db2\u7f85\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u4e00\u901a\u308a\u7406\u89e3\u3067\u304d\u305f\u3089\u3001<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/\">\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u30cf\u30f3\u30c9\u30d6\u30c3\u30af<\/a>\u306a\u3069\u306e\u30ea\u30bd\u30fc\u30b9\u3092\u53c2\u7167\u3057\u3066\u3001\u3088\u308a\u8907\u96d1\u306aGutenberg\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>\u3053\u306e\u8a18\u4e8b\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u306f\u3001<a href=\"https:\/\/gist.github.com\/carlodaniele\/8166f014e10d55fdb8dd75b99dfe3d14\">Gist\u3067\u3082\u5229\u7528\u53ef\u80fd<\/a>\u3067\u3059\u3002<\/p>\n<\/aside>\n\n<p>\u4eca\u56de\u306f\u3001\u30ed\u30fc\u30ab\u30eb\u958b\u767a\u74b0\u5883\u3067\u6700\u65b0\u7248\u306eWordPress\u304c\u7a3c\u50cd\u3057\u3066\u3044\u308b\u3053\u3068\u3092\u524d\u63d0\u3068\u3057\u3001\u4ee5\u4e0b\u306e\u9806\u756a\u3067\u30d6\u30ed\u30c3\u30af\u958b\u767a\u3092\u3054\u7d39\u4ecb\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#set-up-the-plugin\">\u30b9\u30bf\u30fc\u30bf\u30fc\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#block-json-at-work\">json\u306e\u7de8\u96c6<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#using-richtext-component\">\u7d44\u307f\u8fbc\u307f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f7f\u7528\u2500RichText\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#adding-block-toolbar-controls\">\u30d6\u30ed\u30c3\u30af\u30c4\u30fc\u30eb\u30d0\u30fc\u3078\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306e\u8ffd\u52a0<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#settings-sidebar\">\u30d6\u30ed\u30c3\u30af\u8a2d\u5b9a\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u7de8\u96c6<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#external-link\">\u5916\u90e8\u30ea\u30f3\u30af\u306e\u8ffd\u52a0\u3068\u7de8\u96c6<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#multiple-block-styles\">\u8907\u6570\u306e\u30d6\u30ed\u30c3\u30af\u30b9\u30bf\u30a4\u30eb\u306e\u8ffd\u52a0<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#innerblocks-component\">InnerBlocks\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u7528\u3057\u305f\u30d6\u30ed\u30c3\u30af\u306e\u30cd\u30b9\u30c8<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#additional-improvements\">\u7d30\u304b\u306a\u7de8\u96c6<\/a><\/li>\n<\/ul>\n<p>\u3067\u306f\u3001\u59cb\u3081\u307e\u3057\u3087\u3046\u3002<\/p>\n<h3>\u30b9\u30bf\u30fc\u30bf\u30fc\u30d6\u30ed\u30c3\u30af\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5<\/h3>\n<p>\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u30c4\u30fc\u30eb\u3092\u8d77\u52d5\u3057\u3066\u3001<strong>\/wp-content\/plugins<\/strong>\u30d5\u30a9\u30eb\u30c0\u306b\u79fb\u52d5\u3057\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_105130\" aria-describedby=\"caption-attachment-105130\" style=\"width: 1224px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105130 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/new-terminal-at-folder.jpg\" alt=\"macOS\u306e\u300c\u30d5\u30a9\u30eb\u30c0\u306b\u65b0\u898f\u30bf\u30fc\u30df\u30ca\u30eb\u300d\" width=\"1224\" height=\"958\"><figcaption id=\"caption-attachment-105130\" class=\"wp-caption-text\">macOS\u306e\u300c\u30d5\u30a9\u30eb\u30c0\u306b\u65b0\u898f\u30bf\u30fc\u30df\u30ca\u30eb\u300d<\/figcaption><\/figure>\n<p>\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>\u3053\u306e\u30b3\u30de\u30f3\u30c9\u306f\u5bfe\u8a71\u30e2\u30fc\u30c9\u3067\u3001\u30d6\u30ed\u30c3\u30af\u767b\u9332\u7528\u306ePHP\u3001SCSS\u3001JS\u30d5\u30a1\u30a4\u30eb\u3092\u751f\u6210\u3057\u307e\u3059\u3002\u5bfe\u8a71\u30e2\u30fc\u30c9\u3067\u306f\u3001\u30d6\u30ed\u30c3\u30af\u306b\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u7c21\u5358\u306b\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u5024\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<ul>\n<li>Template variant\uff08\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\uff09\uff1a<strong>static<\/strong>\uff08\u9759\u7684\uff09<\/li>\n<li>Block slug\uff08\u30d6\u30ed\u30c3\u30af\u306e\u30b9\u30e9\u30c3\u30b0\uff09\uff1a<strong>ka-example-block<\/strong><\/li>\n<li>Internal namespace\uff08\u5185\u90e8\u540d\u524d\u7a7a\u9593\uff09\uff1a<strong>ka-example-block<\/strong><\/li>\n<li>Block display title\uff08\u30d6\u30ed\u30c3\u30af\u8868\u793a\u30bf\u30a4\u30c8\u30eb\uff09\uff1a<strong>Kinsta Academy Block<\/strong><\/li>\n<li>Short block description\uff08\u30d6\u30ed\u30c3\u30af\u306e\u8aac\u660e\uff09\uff1a<strong>An example block for Kinsta Academy students<\/strong>\uff08Kinsta\u30a2\u30ab\u30c7\u30df\u30fc\u53d7\u8b1b\u8005\u5411\u3051\u30d6\u30ed\u30c3\u30af\u306e\u4f8b\uff09<\/li>\n<li>Dashicon\uff08\u30a2\u30a4\u30b3\u30f3\u30d5\u30a9\u30f3\u30c8\uff09\uff1a<strong>superhero-alt<\/strong><\/li>\n<li>Category name\uff08\u30ab\u30c6\u30b4\u30ea\u540d\uff09\uff1a<strong>widgets<\/strong><\/li>\n<li>Do you want to customize the WordPress plugin?\uff08WordPress\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u7de8\u96c6\u3057\u307e\u3059\u304b\uff1f\uff09\uff1a<strong>Yes<\/strong><\/li>\n<li>The home page of the plugin\uff08\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\uff09\uff1a<strong>https:\/\/kinsta.com\/<\/strong><\/li>\n<li>Current plugin version\uff08\u73fe\u5728\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\uff09\uff1a<strong>1.0<\/strong><\/li>\n<li>Plugin author\uff08\u30d7\u30e9\u30b0\u30a4\u30f3\u958b\u767a\u8005\u540d\uff09 \uff1a<strong>\u81ea\u5206\u306e\u540d\u524d<\/strong><\/li>\n<li>License\uff08\u30e9\u30a4\u30bb\u30f3\u30b9\uff09\uff1a\u2500<\/li>\n<li>Link to the license text\uff08\u30e9\u30a4\u30bb\u30f3\u30b9\u30c6\u30ad\u30b9\u30c8\u3078\u306e\u30ea\u30f3\u30af\uff09\uff1a\u2500<\/li>\n<li>Custom domain path for translation\uff08\u7ffb\u8a33\u7528\u72ec\u81ea\u30c9\u30e1\u30a4\u30f3\u30d1\u30b9\uff09\uff1a\u2500<\/li>\n<\/ul>\n<p>\u30d7\u30e9\u30b0\u30a4\u30f3\u3068\u3059\u3079\u3066\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u306b\u306f\u3001\u6570\u5206\u304b\u304b\u308a\u307e\u3059\u3002\u51e6\u7406\u304c\u5b8c\u4e86\u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_134076\" aria-describedby=\"caption-attachment-134076\" style=\"width: 1136px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134076 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/example-block-installed.jpg\" alt=\"\u958b\u767a\u7528\u30d6\u30ed\u30c3\u30af\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u767b\u9332\" width=\"1136\" height=\"682\"><figcaption id=\"caption-attachment-134076\" class=\"wp-caption-text\">\u958b\u767a\u7528\u30d6\u30ed\u30c3\u30af\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u767b\u9332<\/figcaption><\/figure>\n<p>\u6b21\u306b\u3001\/wp-content\/plugins\u30d5\u30a9\u30eb\u30c0\u304b\u3089\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">cd ka-example-block<\/code><\/pre>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>WordPress\u74b0\u5883\u3092\u5b9f\u884c\u4e2d\u3067\u3042\u308c\u3070\u3001\u307e\u305aDocker Desktop\u3092\u8d77\u52d5\u3057\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30d5\u30a9\u30eb\u30c0\u5185\u304b\u3089wp-env start\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u6b21\u306b\u3001\u30a6\u30a7\u30d6\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u300chttp:\/\/localhost:8888\/wp-login\u300d\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3001\u30e6\u30fc\u30b6\u30fc\u540d\u300c<strong>admin<\/strong>\u300d\u3001\u30d1\u30b9\u30ef\u30fc\u30c9\u300c<strong>password<\/strong>\u300d\u3067\u3001WordPress\u7ba1\u7406\u753b\u9762\u306b\u30ed\u30b0\u30a4\u30f3\u3057\u307e\u3059\u3002<span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\"><\/p>\n<\/aside>\n<\/span><\/p>\n<figure id=\"attachment_105184\" aria-describedby=\"caption-attachment-105184\" style=\"width: 2508px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105184 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/visual-studio-code-terminal.jpg\" alt=\"Visual Studio Code\u30bf\u30fc\u30df\u30ca\u30eb\u304b\u3089\u306e\u30b3\u30de\u30f3\u30c9\u306e\u5b9f\u884c\" width=\"2508\" height=\"1612\"><figcaption id=\"caption-attachment-105184\" class=\"wp-caption-text\">Visual Studio Code\u30bf\u30fc\u30df\u30ca\u30eb\u304b\u3089\u306e\u30b3\u30de\u30f3\u30c9\u306e\u5b9f\u884c<\/figcaption><\/figure>\n<p>\u6700\u5f8c\u306b\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30d5\u30a9\u30eb\u30c0\uff08\u3053\u306e\u4f8b\u3067\u306f<strong>ka-example-block<\/strong>\uff09\u304b\u3089\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5165\u529b\u3057\u3066\u3001\u958b\u767a\u3092\u59cb\u3081\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>\u300c\u30d7\u30e9\u30b0\u30a4\u30f3\u300d\u753b\u9762\u3092\u958b\u304d\u3001\u300c<strong>Kinsta Academy Block<\/strong>\u300d\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u6709\u52b9\u5316\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<figure id=\"attachment_133866\" aria-describedby=\"caption-attachment-133866\" style=\"width: 2214px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-133866 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/plugins-screen.jpg\" alt=\"\u30b5\u30f3\u30d7\u30eb\u30d6\u30ed\u30c3\u30af\u3092\u6709\u52b9\u5316\" width=\"2214\" height=\"1254\"><figcaption id=\"caption-attachment-133866\" class=\"wp-caption-text\">\u30b5\u30f3\u30d7\u30eb\u30d6\u30ed\u30c3\u30af\u3092\u6709\u52b9\u5316<\/figcaption><\/figure>\n<p>\u65b0\u3057\u3044\u6295\u7a3f\u3092\u4f5c\u6210\u3057\u3001\u30d6\u30ed\u30c3\u30af\u30a4\u30f3\u30b5\u30fc\u30bf\u30fc\u3092\u958b\u304d\u3001\u300c<strong>\u30c7\u30b6\u30a4\u30f3<\/strong>\u300d\u30ab\u30c6\u30b4\u30ea\u307e\u3067\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u307e\u3059\u3002\u300cKinsta Academy Block\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3001\u6295\u7a3f\u306b\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<figure id=\"attachment_133869\" aria-describedby=\"caption-attachment-133869\" style=\"width: 2216px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-133869 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/starter-block.jpg\" alt=\"@wordpress\/create-block\u3067\u4f5c\u6210\u3057\u305f\u30b9\u30bf\u30fc\u30bf\u30fc\u30d6\u30ed\u30c3\u30af\" width=\"2216\" height=\"1242\"><figcaption id=\"caption-attachment-133869\" class=\"wp-caption-text\">@wordpress\/create-block\u3067\u4f5c\u6210\u3057\u305f\u30b9\u30bf\u30fc\u30bf\u30fc\u30d6\u30ed\u30c3\u30af<\/figcaption><\/figure>\n<h3 id=\"block-json-at-work\">block.json\u306e\u7de8\u96c6<\/h3>\n<p>\u524d\u8ff0\u3057\u305f\u3088\u3046\u306b\u3001\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u306e\u30d6\u30ed\u30c3\u30af\u767b\u9332\u306f\u30e1\u30a4\u30f3\u306e<strong>.php<\/strong>\u30d5\u30a1\u30a4\u30eb\u3067\u884c\u308f\u308c\u307e\u3059\u3002\u3057\u304b\u3057\u3001\u3053\u3053\u3067\u306f<strong>.php<\/strong>\u30d5\u30a1\u30a4\u30eb\u5185\u3067\u8a2d\u5b9a\u3092\u5b9a\u7fa9\u3057\u307e\u305b\u3093\u3002\u4ee3\u308f\u308a\u306b\u3001<strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<p>\u3082\u3046\u4e00\u5ea6<strong>block.json<\/strong>\u3092\u958b\u3044\u3066\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u8a2d\u5b9a\u3092\u8a73\u3057\u304f\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre><code class=\"language-json\">{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n\t\"apiVersion\": 2,\n\t\"name\": \"ka-example-block\/ka-example-block\",\n\t\"version\": \"0.1.0\",\n\t\"title\": \"Kinsta Academy Block\",\n\t\"category\": \"widgets\",\n\t\"icon\": \"superhero-alt\",\n\t\"description\": \"An example block for Kinsta Academy students\",\n\t\"supports\": {\n\t\t\"html\": false\n\t},\n\t\"textdomain\": \"ka-example-block\",\n\t\"editorScript\": \"file:.\/index.js\",\n\t\"editorStyle\": \"file:.\/index.css\",\n\t\"style\": \"file:.\/style-index.css\"\n}<\/code><\/pre>\n<h4>\u30b9\u30af\u30ea\u30d7\u30c8\u3068\u30b9\u30bf\u30a4\u30eb<\/h4>\n<p><code>editorScript<\/code>\u3001<code>editorStyle<\/code>\u3001<code>style<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3068\u30b9\u30bf\u30a4\u30eb\u3078\u306e\u76f8\u5bfe\u30d1\u30b9\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u3053\u3067\u5b9a\u7fa9\u3057\u305f\u30b9\u30af\u30ea\u30d7\u30c8\u3068\u30b9\u30bf\u30a4\u30eb\u306f\u3001WordPress\u306b\u3088\u3063\u3066\u81ea\u52d5\u7684\u306b\u767b\u9332\u3055\u308c\u3001\u30ad\u30e5\u30fc\u306b\u5165\u308c\u3089\u308c\u308b\u305f\u3081\u3001\u624b\u52d5\u3067\u767b\u9332\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u78ba\u8a8d\u306e\u305f\u3081\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u300c\u691c\u8a3c\u300d\u3092\u8d77\u52d5\u3057\u3001\u300c<strong>\u30cd\u30c3\u30c8\u30ef\u30fc\u30af<\/strong>\u300d\u30bf\u30d6\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<figure id=\"attachment_133870\" aria-describedby=\"caption-attachment-133870\" style=\"width: 2216px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-133870 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/chrome-devtools-network.jpg\" alt=\"Chrome\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u3067\u306e\u30ea\u30bd\u30fc\u30b9\u306e\u69d8\u5b50\" width=\"2216\" height=\"1256\"><figcaption id=\"caption-attachment-133870\" class=\"wp-caption-text\">Chrome\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u3067\u306e\u30ea\u30bd\u30fc\u30b9\u306e\u69d8\u5b50<\/figcaption><\/figure>\n<p>\u4e0a\u306e\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u304b\u3089\u3082\u308f\u304b\u308b\u3088\u3046\u306b\u3001<strong>build<\/strong>\u30d5\u30a9\u30eb\u30c0\u5185\u306e<strong>index.js<\/strong>\u30b9\u30af\u30ea\u30d7\u30c8\u306f\u3001\u6b63\u3057\u304f\u30ad\u30e5\u30fc\u306b\u5165\u308c\u3089\u308c\u3066\u3044\u307e\u3059\u3002<strong>PHP\u30b3\u30fc\u30c9\u3092\u8a18\u8ff0\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093<\/strong>\u3002<\/p>\n<h4>UI\u30e9\u30d9\u30eb<\/h4>\n<p><code>title<\/code>\u3068<code>description<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u306f\u3001\u30a8\u30c7\u30a3\u30bf\u30fc\u4e0a\u3067\u306e\u30d6\u30ed\u30c3\u30af\u306e\u8b58\u5225\u306b\u5fc5\u8981\u306a\u30e9\u30d9\u30eb\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_133871\" aria-describedby=\"caption-attachment-133871\" style=\"width: 2216px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-133871 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/block-labels.jpg\" alt=\"\u30d6\u30ed\u30c3\u30af\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u30d6\u30ed\u30c3\u30af\u540d\u3068\u8aac\u660e\" width=\"2216\" height=\"742\"><figcaption id=\"caption-attachment-133871\" class=\"wp-caption-text\">\u30d6\u30ed\u30c3\u30af\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u30d6\u30ed\u30c3\u30af\u540d\u3068\u8aac\u660e<\/figcaption><\/figure>\n<h4>\u30ad\u30fc\u30ef\u30fc\u30c9<\/h4>\n<p>\u524d\u8ff0\u3057\u305f\u3088\u3046\u306b\u3001<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-registration\/\">\u30d7\u30ed\u30d1\u30c6\u30a3<\/a>\u3068<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-attributes\/\">\u5c5e\u6027<\/a>\u3092\u4f7f\u7528\u3057\u3066\u30d6\u30ed\u30c3\u30af\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002\u4f8b\u3048\u3070\u30011\u3064\u4ee5\u4e0a\u306e<code>keywords<\/code>\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30d6\u30ed\u30c3\u30af\u3092\u691c\u7d22\u3057\u3084\u3059\u304f\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-json\">\"keywords\": [ \n\t\t\"kinsta\", \n\t\t\"academy\", \n\t\t\"superhero\" \n\t],<\/code><\/pre>\n<p>\u30af\u30a4\u30c3\u30af\u30a4\u30f3\u30b5\u30fc\u30bf\u30fc\u306b\u300ckinsta\u300d\u300cacademy\u300d\u307e\u305f\u306f\u300csuperhero\u300d\u3092\u5165\u529b\u3059\u308b\u3068\u3001\u30a8\u30c7\u30a3\u30bf\u30fc\u306b\u300cKinsta Academy\u300d\u30d6\u30ed\u30c3\u30af\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_133969\" aria-describedby=\"caption-attachment-133969\" style=\"width: 2086px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-133969 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/block-keywords.jpg\" alt=\"\u30af\u30a4\u30c3\u30af\u30a4\u30f3\u30b5\u30fc\u30bf\u30fc\u306e\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u305f\u30d6\u30ed\u30c3\u30af\u306e\u691c\u7d22\" width=\"2086\" height=\"944\"><figcaption id=\"caption-attachment-133969\" class=\"wp-caption-text\">\u30af\u30a4\u30c3\u30af\u30a4\u30f3\u30b5\u30fc\u30bf\u30fc\u306e\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u305f\u30d6\u30ed\u30c3\u30af\u306e\u691c\u7d22<\/figcaption><\/figure>\n<h4>\u30ed\u30fc\u30ab\u30e9\u30a4\u30ba<\/h4>\n<p>JSON\u30d5\u30a1\u30a4\u30eb\u5185\u306e\u6587\u5b57\u5217\u3092\u30ed\u30fc\u30ab\u30e9\u30a4\u30ba\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u306f\u3001<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30293\">\u3053\u3061\u3089<\/a>\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<blockquote><p>JavaScript\u5185\u3067\u306f\u3001<code>@wordpress\/blocks<\/code>\u30d1\u30c3\u30b1\u30fc\u30b8\u306e<code>registerBlockTypeFromMetadata<\/code>\u30e1\u30bd\u30c3\u30c9\u3068\u3001<strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u304b\u3089\u8aad\u307f\u8fbc\u3093\u3060\u30e1\u30bf\u30c7\u30fc\u30bf\u3092\u4f7f\u7528\u3057\u3066\u3001\u30d6\u30ed\u30c3\u30af\u30bf\u30a4\u30d7\u3092\u767b\u9332\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u3059\u3079\u3066\u306e\u30ed\u30fc\u30ab\u30e9\u30a4\u30ba\u3055\u308c\u305f\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001PHP\u306e<code>register_block_type_from_metadata<\/code>\u3068\u540c\u69d8\u306b\u3001\u81ea\u52d5\u7684\u306b<code>_x<\/code>\uff08<code>@wordpress\/i18n<\/code>\u30d1\u30c3\u30b1\u30fc\u30b8\uff09\u95a2\u6570\u547c\u3073\u51fa\u3057\u306b\u30e9\u30c3\u30d7\u3055\u308c\u307e\u3059\u3002\u552f\u4e00\u306e\u8981\u4ef6\u3068\u3057\u3066\u3001<strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b<code>textdomain<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p><\/blockquote>\n<p>\u3053\u3053\u3067\u306f\u3001<code>registerBlockTypeFromMetadata<\/code>\u306e\u4ee3\u308f\u308a\u306b<code>registerBlockType<\/code>\u95a2\u6570\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/27\/whats-new-in-gutenberg-10-7-26-may\/\">Gutenberg 10.7<\/a>\u4ee5\u964d\u3001registerBlockTypeFromMetadata\u304c<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32030\">\u975e\u63a8\u5968<\/a>\u306b\u306a\u3063\u305f\u305f\u3081\u3067\u3059\u304c\u3001\u4ed5\u7d44\u307f\u306f\u540c\u3058\u3067\u3059\u3002<\/p>\n<h3 id=\"using-richtext-component\">\u7d44\u307f\u8fbc\u307f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f7f\u7528\u2500RichText\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/h3>\n<p>Gutenberg\u30d6\u30ed\u30c3\u30af\u3092\u69cb\u6210\u3059\u308b\u8981\u7d20\u306f\u3001React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3042\u308a\u3001<code>wp<\/code>\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u3067\u30a2\u30af\u30bb\u30b9\u3067\u304d\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u30b3\u30f3\u30bd\u30fc\u30eb\u306b<code>wp.editor\u3068<\/code>\u5165\u529b\u3059\u308b\u3068\u3001<code>wp.editor<\/code>\u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u542b\u307e\u308c\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4e00\u89a7\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u30ea\u30b9\u30c8\u3092\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u540d\u524d\u304b\u3089\u4e2d\u8eab\u3092\u63a8\u6e2c\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u540c\u69d8\u306b\u3001<code>wp.components<\/code>\u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u542b\u307e\u308c\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4e00\u89a7\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_133970\" aria-describedby=\"caption-attachment-133970\" style=\"width: 2288px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-133970 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/wp-components.jpg\" alt=\"WP\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\" width=\"2288\" height=\"1392\"><figcaption id=\"caption-attachment-133970\" class=\"wp-caption-text\">WP\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><strong>\u30e2\u30b8\u30e5\u30fc\u30eb\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0<\/strong>\u306f\u3001\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u8a2d\u8a08\u6280\u6cd5\u306e1\u3064\u3067\u3001\u30d7\u30ed\u30b0\u30e9\u30e0\u306e\u6a5f\u80fd\u3092\u3001\u72ec\u7acb\u3057\u305f\u4ea4\u63db\u53ef\u80fd\u306a<strong>\u30e2\u30b8\u30e5\u30fc\u30eb<\/strong>\u306b\u5206\u96e2\u3057\u307e\u3059\u3002\u5404\u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u306f\u3001\u6a5f\u80fd\u306e\u7279\u5b9a\u90e8\u5206\u306e\u5b9f\u884c\u306b\u5fc5\u8981\u306a\u30b3\u30fc\u30c9\u306e\u307f\u304c\u542b\u307e\u308c\u307e\u3059\uff08\u51fa\u5178\uff1a<a href=\"https:\/\/en.wikipedia.org\/wiki\/Modular_programming\">Wikipedia<\/a>\uff09\u3002<\/p>\n<\/aside>\n\n<p><strong>edit.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u623b\u308a\u3001\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u8a73\u3057\u304f\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre><code class=\"language-jsx\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nexport default function Edit() {\n\treturn (\n\t\t&lt;p { ...useBlockProps() }&gt;\n\t\t\t{ __(\n\t\t\t\t'Kinsta Academy Block \u2013 hello from the editor!',\n\t\t\t\t'ka-example-block'\n\t\t\t) }\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<p>\u3053\u306e\u30b3\u30fc\u30c9\u306f\u3001\u30b7\u30f3\u30d7\u30eb\u3067\u7de8\u96c6\u3067\u304d\u306a\u3044\u30c6\u30ad\u30b9\u30c8\u3092\u542b\u3080\u9759\u7684\u30d6\u30ed\u30c3\u30af\u3092\u751f\u6210\u3057\u307e\u3059\u304c\u3001\u7c21\u5358\u306b\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_133971\" aria-describedby=\"caption-attachment-133971\" style=\"width: 1400px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-133971 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/starter-block-in-code-editor.jpg\" alt=\"\u30b3\u30fc\u30c9\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u8868\u793a\u3057\u305f\u30b9\u30bf\u30fc\u30bf\u30fc\u30d6\u30ed\u30c3\u30af\" width=\"1400\" height=\"772\"><figcaption id=\"caption-attachment-133971\" class=\"wp-caption-text\">\u30b3\u30fc\u30c9\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u8868\u793a\u3057\u305f\u30b9\u30bf\u30fc\u30bf\u30fc\u30d6\u30ed\u30c3\u30af<\/figcaption><\/figure>\n<p>\u30c6\u30ad\u30b9\u30c8\u3092\u7de8\u96c6\u53ef\u80fd\u306b\u3059\u308b\u306b\u306f\u3001\u73fe\u5728\u306e&lt;p&gt;\u30bf\u30b0\u3092\u3001<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/HTML\/Editable_content\">\u5165\u529b\u5185\u5bb9\u3092\u7de8\u96c6\u3067\u304d\u308b<\/a>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u7f6e\u304d\u63db\u3048\u307e\u3059\u3002Gutenberg\u306b\u306f\u3001\u3053\u306e\u76ee\u7684\u3067\u4f7f\u7528\u3067\u304d\u308b\u7d44\u307f\u8fbc\u307f\u306e<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/block-editor\/src\/components\/rich-text\/README.md\">RichText\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/a>\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u7d44\u307f\u8fbc\u307f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u30015\u3064\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u30d6\u30ed\u30c3\u30af\u306b\u8ffd\u52a0\u3067\u304d\u307e\u3059\u3002<\/p>\n<ol>\n<li style=\"list-style-type: none\">\n<ol>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#import-components\">WordPress\u30d1\u30c3\u30b1\u30fc\u30b8\u304b\u3089\u5fc5\u8981\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#jsx-elements\">JSX\u30b3\u30fc\u30c9\u306b\u5bfe\u5fdc\u3059\u308b\u8981\u7d20\u3092\u8ffd\u52a0\u3059\u308b<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#define-attributes\">block.json\u30d5\u30a1\u30a4\u30eb\u306b\u5fc5\u8981\u306a\u5c5e\u6027\u3092\u5b9a\u7fa9\u3059\u308b<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#define-event-handlers\">\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3092\u5b9a\u7fa9\u3059\u308b<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#save-data\">\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\u3059\u308b<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h4 id=\"import-components\">\u30b9\u30c6\u30c3\u30d71. WordPress\u30d1\u30c3\u30b1\u30fc\u30b8\u304b\u3089\u5fc5\u8981\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b<\/h4>\n<p>edit.js\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u304d\u3001<code>import<\/code>\u6587\u3092\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">import { useBlockProps } from '@wordpress\/block-editor';<\/code><\/pre>\n<p>\u4e0a\u306eimport\u6587\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre><code class=\"language-js\">import { useBlockProps, RichText } from '@wordpress\/block-editor';<\/code><\/pre>\n<p><code>@wordpress\/block-editor<\/code>\u30d1\u30c3\u30b1\u30fc\u30b8\u304b\u3089\u3001<code>useBlockProps<\/code>\u95a2\u6570\u3068<code>RichText<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<h5>useBlockProps<\/h5>\n<p><code><a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-edit-save\/#block-wrapper-props\">useBlockProps<\/a><\/code> React\u30d5\u30c3\u30af\u306f\u3001<a href=\"https:\/\/make.wordpress.org\/core\/2020\/11\/18\/block-api-version-2\/\">\u30d6\u30ed\u30c3\u30af\u306e\u30e9\u30c3\u30d1\u30fc\u8981\u7d20<\/a>\u3092\u30de\u30fc\u30af\u3057\u307e\u3059\u3002<\/p>\n<blockquote><p>API\u30d0\u30fc\u30b8\u30e7\u30f32\u3092\u4f7f\u7528\u3059\u308b\u306b\u306f\u3001\u30d6\u30ed\u30c3\u30af\u306e<code>edit<\/code>\u95a2\u6570\u5185\u3067\u65b0\u3057\u3044<code>useBlockProps<\/code>\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u3001\u30d6\u30ed\u30c3\u30af\u306e\u30e9\u30c3\u30d1\u30fc\u8981\u7d20\u3092\u30de\u30fc\u30af\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<code>useBlockProps<\/code>\u30d5\u30c3\u30af\u306f\u3001\u30d6\u30ed\u30c3\u30af\u306e\u52d5\u4f5c\u306e\u6709\u52b9\u5316\u306b\u5fc5\u8981\u306a\u5c5e\u6027\u3068\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3092\u633f\u5165\u3057\u307e\u3059\u3002\u30d6\u30ed\u30c3\u30af\u8981\u7d20\u306b\u306f<code>useBlockProps<\/code>\u3092\u4ecb\u3057\u3066\u5c5e\u6027\u3092\u6e21\u3057\u3001\u623b\u308a\u5024\u306f\u8981\u7d20\u306b\u5c55\u958b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p><\/blockquote>\n<p>\u3064\u307e\u308a\u3001<code>useBlockProps<\/code>\u306f\u3001\u30e9\u30c3\u30d1\u30fc\u8981\u7d20\uff08\u3053\u306e\u4f8b\u3067\u306fp\u8981\u7d20\uff09\u306b\u81ea\u52d5\u7684\u306b\u5c5e\u6027\u3068\u30af\u30e9\u30b9\u3092\u5272\u308a\u5f53\u3066\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_133973\" aria-describedby=\"caption-attachment-133973\" style=\"width: 2614px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-133973 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/useblockprops.jpg\" alt=\" useBlockProps\u3067\u751f\u6210\u3055\u308c\u305f\u8981\u7d20\u3068\u30af\u30e9\u30b9\" width=\"2614\" height=\"966\"><figcaption id=\"caption-attachment-133973\" class=\"wp-caption-text\">useBlockProps\u3067\u751f\u6210\u3055\u308c\u305f\u8981\u7d20\u3068\u30af\u30e9\u30b9<\/figcaption><\/figure>\n<p>\u30e9\u30c3\u30d1\u30fc\u8981\u7d20\u304b\u3089<code>useBlockProps<\/code>\u3092\u524a\u9664\u3059\u308b\u3068\u3001\u5358\u7d14\u306a\u30c6\u30ad\u30b9\u30c8\u6587\u5b57\u5217\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u3001\u30d6\u30ed\u30c3\u30af\u306e\u6a5f\u80fd\u3084\u30b9\u30bf\u30a4\u30eb\u306b\u30a2\u30af\u30bb\u30b9\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n<figure id=\"attachment_133974\" aria-describedby=\"caption-attachment-133974\" style=\"width: 2614px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-133974 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/without-useblockprops.jpg\" alt=\"useBlockProps\u306e\u306a\u3044\u30d6\u30ed\u30c3\u30af\" width=\"2614\" height=\"1016\"><figcaption id=\"caption-attachment-133974\" class=\"wp-caption-text\">useBlockProps\u306e\u306a\u3044\u30d6\u30ed\u30c3\u30af<\/figcaption><\/figure>\n<p><a href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#additional-improvements\">\u5f8c\u3067\u89e6\u308c\u307e\u3059\u304c<\/a>\u3001<code>useBlockProps<\/code>\u306b\u306f\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6e21\u3057\u3066\u3082\u3001\u51fa\u529b\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u307e\u3059\u3002<\/p>\n<h5>RichText<\/h5>\n<p>RichText\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u306f<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/HTML\/Editable_content\">\u7de8\u96c6\u53ef\u80fd<\/a>\u306a\u5165\u529b\u9818\u57df\u304c\u3042\u308a\u3001\u30e6\u30fc\u30b6\u30fc\u306f\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u7de8\u96c6\u3057\u3001\u66f8\u5f0f\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>GitHub\u306e<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/block-editor\/src\/components\/rich-text\/README.md\">RichText\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a>\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<h4 id=\"jsx-elements\">\u30b9\u30c6\u30c3\u30d72. JSX\u30b3\u30fc\u30c9\u306b\u5bfe\u5fdc\u3059\u308b\u8981\u7d20\u3092\u8ffd\u52a0\u3059\u308b<\/h4>\n<pre><code class=\"language-jsx\">...\n\nconst blockProps = useBlockProps();\n\nreturn (\n\t&lt;RichText \n\t\t{ ...blockProps }\n\t\ttagName=\"p\"\n\t\tonChange={ onChangeContent }\n\t\tallowedFormats={ [ 'core\/bold', 'core\/italic' ] }\n\t\tvalue={ attributes.content }\n\t\tplaceholder={ __( 'Write your text...' ) }\n\t\/&gt;\n);<\/code><\/pre>\n<p>\u5404\u884c\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n<ul>\n<li><code>tagName<\/code>\uff1a\u7de8\u96c6\u53ef\u80fd\u306aHTML\u8981\u7d20\u306e\u30bf\u30b0\u540d<\/li>\n<li><code>onChange<\/code>\uff1a\u8981\u7d20\u306e\u5185\u5bb9\u304c\u5909\u66f4\u3055\u308c\u305f\u3068\u304d\u306b\u547c\u3073\u51fa\u3055\u308c\u308b\u95a2\u6570<\/li>\n<li><code>allowedFormats<\/code>\uff1a\u8a31\u53ef\u3055\u308c\u308b\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u306e\u914d\u5217\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u3001\u3059\u3079\u3066\u306e\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u304c\u8a31\u53ef\u3055\u308c\u307e\u3059\uff09<\/li>\n<li><code>value<\/code>\uff1a\u7de8\u96c6\u53ef\u80fd\u306b\u306a\u308bHTML\u6587\u5b57\u5217<\/li>\n<li><code>placeholder<\/code>\uff1a\u8981\u7d20\u304c\u7a7a\u306e\u3068\u304d\u306b\u8868\u793a\u3055\u308c\u308b\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30c6\u30ad\u30b9\u30c8<\/li>\n<\/ul>\n<h4 id=\"define-attributes\">\u30b9\u30c6\u30c3\u30d73. block.json\u30d5\u30a1\u30a4\u30eb\u306b\u5fc5\u8981\u306a\u5c5e\u6027\u3092\u5b9a\u7fa9\u3059\u308b<\/h4>\n<p><a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-attributes\/\">\u5c5e\u6027<\/a>\u306f\u3001\u30ea\u30c3\u30c1\u30b3\u30f3\u30c6\u30f3\u30c4\u3001\u80cc\u666f\u8272\u3001URL\u306a\u3069\u3001\u30d6\u30ed\u30c3\u30af\u304c\u4fdd\u5b58\u3059\u308b\u30c7\u30fc\u30bf\u306b\u95a2\u3059\u308b\u60c5\u5831\u3092\u4fdd\u6301\u3057\u307e\u3059\u3002<\/p>\n<p><code>attributes<\/code>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5185\u306b\u306f\u3001\u30ad\u30fc\u3068\u5024\u306e\u30da\u30a2\u3067\u4efb\u610f\u306e\u6570\u306e\u5c5e\u6027\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002\u30ad\u30fc\u306f\u5c5e\u6027\u540d\u3001\u5024\u306f\u5c5e\u6027\u5b9a\u7fa9\u3067\u3059\u3002<\/p>\n<p><strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u304d\u3001\u4ee5\u4e0b\u306e<code>attributes<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-json\">\"attributes\": {\n\t\"content\": {\n\t\t\"type\": \"string\",\n\t\t\"source\": \"html\",\n\t\t\"selector\": \"p\"\n\t}\n},<\/code><\/pre>\n<p><code>content<\/code>\u5c5e\u6027\u306f\u3001\u7de8\u96c6\u53ef\u80fd\u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u5165\u529b\u3055\u308c\u305f\u30c6\u30ad\u30b9\u30c8\u3092\u683c\u7d0d\u3067\u304d\u307e\u3059\u3002<\/p>\n<ul>\n<li><code>type<\/code>\u306f\u3001\u5c5e\u6027\u306b\u3088\u3063\u3066\u4fdd\u5b58\u3055\u308c\u308b\u30c7\u30fc\u30bf\u306e\u7a2e\u985e\u3092\u793a\u3057\u307e\u3059\u3002\u3053\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001<code>enum<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5b9a\u7fa9\u3057\u306a\u3044\u9650\u308a\u5fc5\u9808\u3067\u3059\u3002<\/li>\n<li><code>source<\/code>\u306f\u3001\u6295\u7a3f\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u304b\u3089\u3001\u3069\u306e\u3088\u3046\u306b\u5c5e\u6027\u5024\u3092\u62bd\u51fa\u3059\u308b\u304b\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u3053\u306e\u4f8b\u3067\u306f\u3001HTML\u30b3\u30f3\u30c6\u30f3\u30c4\u3067\u3059\u3002\u6ce8\u610f\uff09\u3053\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6307\u5b9a\u3057\u306a\u3051\u308c\u3070\u3001\u30c7\u30fc\u30bf\u306f\u30d6\u30ed\u30c3\u30af\u30c7\u30ea\u30df\u30bf\u306b\u683c\u7d0d\u3055\u308c\u307e\u3059\uff08\u8a73\u7d30\u306f<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-attributes\/#value-source\">\u3053\u3061\u3089<\/a>\uff09\u3002<\/li>\n<li><code>selector<\/code>\u306f\u3001HTML\u30bf\u30b0\u3001\u307e\u305f\u306f\u30af\u30e9\u30b9\u540d\u3084id\u5c5e\u6027\u306a\u3069\u306e\u305d\u306e\u4ed6\u306e\u30bb\u30ec\u30af\u30bf\u3067\u3059\u3002<\/li>\n<\/ul>\n<p><code>Edit<\/code>\u95a2\u6570\u306b\u306f\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6e21\u3057\u307e\u3059\u3002<strong>edit.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u623b\u308a\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre><code class=\"language-js\">export default function Edit( { attributes, setAttributes } ) { ... }<\/code><\/pre>\n<h4 id=\"define-event-handlers\">\u30b9\u30c6\u30c3\u30d74. \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3092\u5b9a\u7fa9\u3059\u308b<\/h4>\n<p><code>RichText<\/code>\u8981\u7d20\u306b\u306f<code>onChange<\/code>\u5c5e\u6027\u304c\u3042\u308a\u3001\u8981\u7d20\u306e\u5185\u5bb9\u304c\u5909\u66f4\u3055\u308c\u305f\u3068\u304d\u306b\u547c\u3073\u51fa\u3055\u308c\u308b\u95a2\u6570\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306f\u3001\u3053\u306e\u95a2\u6570\u3092\u5b9a\u7fa9\u3057\u305f<strong>edit.js<\/strong>\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u5168\u6587\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps, RichText } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nexport default function Edit( { attributes, setAttributes } ) {\n\tconst blockProps = useBlockProps();\n\n\tconst onChangeContent = ( newContent ) =&gt; {\n\t\tsetAttributes( { content: newContent } )\n\t}\n\n\treturn (\n\t\t&lt;RichText \n\t\t\t{ ...blockProps }\n\t\t\ttagName=\"p\"\n\t\t\tonChange={ onChangeContent }\n\t\t\tallowedFormats={ [ 'core\/bold', 'core\/italic' ] }\n\t\t\tvalue={ attributes.content }\n\t\t\tplaceholder={ __( 'Write your text...' ) }\n\t\t\/&gt;\n\t);\n}<\/code><\/pre>\n<p>\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u30a6\u30a3\u30f3\u30c9\u30a6\u3067npm run start\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002WordPress\u306e\u7ba1\u7406\u753b\u9762\u306b\u623b\u308a\u3001\u65b0\u898f\u6295\u7a3f\u307e\u305f\u306f\u56fa\u5b9a\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3057\u3001Kinsta Academy\u30d6\u30ed\u30c3\u30af\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_134001\" aria-describedby=\"caption-attachment-134001\" style=\"width: 2618px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134001 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/rich-text-component.jpg\" alt=\"\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u306eRichText\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u51fa\u529b\" width=\"2618\" height=\"960\"><figcaption id=\"caption-attachment-134001\" class=\"wp-caption-text\">\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u306eRichText\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u51fa\u529b<\/figcaption><\/figure>\n<p>\u30c6\u30ad\u30b9\u30c8\u3092\u5165\u529b\u3057\u3066\u3001\u30b3\u30fc\u30c9\u30d3\u30e5\u30fc\u306b\u5207\u308a\u66ff\u3048\u307e\u3059\u3002\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:ka-example-block\/ka-example-block --&gt;\n&lt;p class=\"wp-block-ka-example-block-ka-example-block\"&gt;Kinsta Academy Block \u2013 hello from the saved content!&lt;\/p&gt;\n&lt;!-- \/wp:ka-example-block\/ka-example-block --&gt;<\/code><\/pre>\n<p>\u3053\u3053\u3067\u30da\u30fc\u30b8\u3092\u4fdd\u5b58\u3057\u3066\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u8868\u793a\u3092\u30c1\u30a7\u30c3\u30af\u3057\u3066\u3082\u3001\u6b8b\u5ff5\u306a\u3053\u3068\u306b\u5909\u66f4\u306f\u30b5\u30a4\u30c8\u306b\u53cd\u6620\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002<strong>save.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u3092\u4fee\u6b63\u3057\u3066\u3001\u6295\u7a3f\u3092\u4fdd\u5b58\u3059\u308b\u969b\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u5165\u529b\u3092\u4fdd\u5b58\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h4 id=\"save-data\">\u30b9\u30c6\u30c3\u30d75. \u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\u3059\u308b<\/h4>\n<p><strong>save.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u304d\u3001\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u6b21\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps, RichText } from '@wordpress\/block-editor';\n\nexport default function save( { attributes } ) {\n\tconst blockProps = useBlockProps.save();\n\treturn (\n\t\t&lt;RichText.Content \n\t\t\t{ ...blockProps } \n\t\t\ttagName=\"p\" \n\t\t\tvalue={ attributes.content } \n\t\t\/&gt;\n\t);\n}<\/code><\/pre>\n<p>\u3053\u3053\u3067\u306f\u4ee5\u4e0b\u3092\u5b9f\u884c\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<ul>\n<li><code>block-editor<\/code>\u30d1\u30c3\u30b1\u30fc\u30b8\u304b\u3089<code>RichText<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b<\/li>\n<li><code>save<\/code>\u95a2\u6570\u306b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5f15\u6570\u3092\u4ecb\u3057\u3066\u8907\u6570\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6e21\u3059\uff08\u3053\u306e\u4f8b\u3067\u306f<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-edit-save\/#attributes\"><code>attributes<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3<\/a>\u306e\u307f\u3092\u6e21\u3057\u3066\u3044\u307e\u3059\uff09<\/li>\n<li><code>RichText<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8fd4\u3059<\/li>\n<\/ul>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>save\u95a2\u6570\u3092\u5909\u66f4\u3059\u308b\u305f\u3073\u306b\u3001\u30a8\u30c7\u30a3\u30bf\u30fc\u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u30d6\u30ed\u30c3\u30af\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u524a\u9664\u3057\u3001\u518d\u5ea6\u30a4\u30f3\u30af\u30eb\u30fc\u30c9\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-edit-save\/#validation\">\u3053\u306e\u30da\u30fc\u30b8\u306e\u300c\u59a5\u5f53\u6027\u691c\u8a3c\u300d\u30bb\u30af\u30b7\u30e7\u30f3<\/a>\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<\/aside>\n\n<figure id=\"attachment_134002\" aria-describedby=\"caption-attachment-134002\" style=\"width: 1770px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134002 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/block-content-in-the-code-editor.jpg\" alt=\"\u30d6\u30ed\u30c3\u30af\u306e\u5185\u5bb9\u304c\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u4fdd\u5b58\u3055\u308c\u308b\" width=\"1770\" height=\"1000\"><figcaption id=\"caption-attachment-134002\" class=\"wp-caption-text\">\u30d6\u30ed\u30c3\u30af\u306e\u5185\u5bb9\u304c\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u4fdd\u5b58\u3055\u308c\u308b<\/figcaption><\/figure>\n<p><code>RichText<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/richtext\/\">\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u30cf\u30f3\u30c9\u30d6\u30c3\u30af<\/a>\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u4e00\u89a7\u306b\u3064\u3044\u3066\u306f\u3001<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/HEAD\/packages\/block-editor\/src\/components\/rich-text\/README.md\">Github<\/a>\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u6b21\u306f\u3001\u30d6\u30ed\u30c3\u30af\u30c4\u30fc\u30eb\u30d0\u30fc\u306b\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<h3 id=\"adding-block-toolbar-controls\">\u30d6\u30ed\u30c3\u30af\u30c4\u30fc\u30eb\u30d0\u30fc\u3078\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306e\u8ffd\u52a0<\/h3>\n<p><a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/block-tutorial\/block-controls-toolbar-and-sidebar\/\">\u30d6\u30ed\u30c3\u30af\u30c4\u30fc\u30eb\u30d0\u30fc<\/a>\u306b\u306f\u3001\u30d6\u30ed\u30c3\u30af\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u4e00\u90e8\u3092\u64cd\u4f5c\u3067\u304d\u308b\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u304c\u4e26\u3073\u307e\u3059\u3002\u5404\u30c4\u30fc\u30eb\u30d0\u30fc\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306b\u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_134007\" aria-describedby=\"caption-attachment-134007\" style=\"width: 1212px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134007 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/paragraph-toolbar.jpg\" alt=\"\u30b3\u30a2\u306e\u6bb5\u843d\u30d6\u30ed\u30c3\u30af\u306e\u30c4\u30fc\u30eb\u30d0\u30fc\" width=\"1212\" height=\"242\"><figcaption id=\"caption-attachment-134007\" class=\"wp-caption-text\">\u30b3\u30a2\u306e\u6bb5\u843d\u30d6\u30ed\u30c3\u30af\u306e\u30c4\u30fc\u30eb\u30d0\u30fc<\/figcaption><\/figure>\n<p>\u4f8b\u3048\u3070\u3001\u30d6\u30ed\u30c3\u30af\u306b\u306f\u30c6\u30ad\u30b9\u30c8\u914d\u7f6e\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3092\u8ffd\u52a0\u3067\u304d\u307e\u3059\u3002\u5fc5\u8981\u306a\u4f5c\u696d\u306f\u3001<code>@wordpress\/block-editor<\/code>\u30d1\u30c3\u30b1\u30fc\u30b8\u304b\u30892\u3064\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n<p>\u524d\u306e\u4f8b\u3068\u540c\u3058\u624b\u9806\u3067\u9032\u3081\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<ol>\n<li>WordPress\u30d1\u30c3\u30b1\u30fc\u30b8\u304b\u3089\u5fc5\u8981\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b<\/li>\n<li>JSX\u30b3\u30fc\u30c9\u306b\u5bfe\u5fdc\u3059\u308b\u8981\u7d20\u3092\u8ffd\u52a0\u3059\u308b<\/li>\n<li><strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u5fc5\u8981\u306a\u5c5e\u6027\u3092\u5b9a\u7fa9\u3059\u308b<\/li>\n<li>\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3092\u5b9a\u7fa9\u3059\u308b<\/li>\n<li>\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\u3059\u308b<\/li>\n<\/ol>\n<h4>\u30b9\u30c6\u30c3\u30d71. @wordpress\/block-editor\u304b\u3089BlockControls\u3068AlignmentControl\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b<\/h4>\n<p>\u30d6\u30ed\u30c3\u30af\u30c4\u30fc\u30eb\u30d0\u30fc\u306b\u914d\u7f6e\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3092\u8ffd\u52a0\u3059\u308b\u306b\u306f\u30012\u3064\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n<ul>\n<li><code>BlockControls<\/code>\u306f\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306e\u52d5\u7684\u30c4\u30fc\u30eb\u30d0\u30fc\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u307e\u3059\uff08\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306a\u3057\uff09\u3002<\/li>\n<li><code>AlignmentControl<\/code>\u306f\u3001\u9078\u629e\u3055\u308c\u305f\u30d6\u30ed\u30c3\u30af\u306e\u6574\u5217\u65b9\u6cd5\u3092\u8868\u793a\u3059\u308b\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u307e\u3059\uff08\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/block-editor\/src\/components\/alignment-control\/README.md\">\u3053\u3061\u3089<\/a>\uff09\u3002<\/li>\n<\/ul>\n<p><strong>edit.js<\/strong>\u3092\u958b\u304d\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b<code>import<\/code>\u6587\u3092\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">import { \n\tuseBlockProps, \n\tRichText, \n\tAlignmentControl, \n\tBlockControls \n} from '@wordpress\/block-editor';<\/code><\/pre>\n<h4>\u30b9\u30c6\u30c3\u30d72. BlockControls\u3068AlignmentControl\u8981\u7d20\u3092\u8ffd\u52a0\u3059\u308b<\/h4>\n<p><code>Edit<\/code>\u95a2\u6570\u306b\u79fb\u52d5\u3057\u3001<code>&lt;BlockControls \/&gt;<\/code>\u8981\u7d20\u3092<code>&lt;RichText \/&gt;<\/code>\u3068\u540c\u3058\u30ec\u30d9\u30eb\u3067\u633f\u5165\u3057\u307e\u3059\u3002\u6b21\u306b\u3001<code>&lt;BlockControls \/&gt;<\/code>\u306e\u4e2d\u306b<code>&lt;AlignmentControl \/&gt;<\/code>\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes, setAttributes } ) {\n\tconst blockProps = useBlockProps();\n\treturn (\n\t\t&lt;&gt;\n\t\t\t&lt;BlockControls&gt;\n\t\t\t\t&lt;AlignmentControl\n\t\t\t\t\tvalue={ attributes.align }\n\t\t\t\t\tonChange={ onChangeAlign }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/BlockControls&gt;\n\t\t\t&lt;RichText \n\t\t\t\t{ ...blockProps }\n\t\t\t\ttagName=\"p\"\n\t\t\t\tonChange={ onChangeContent }\n\t\t\t\tallowedFormats={ [ 'core\/bold', 'core\/italic' ] }\n\t\t\t\tvalue={ attributes.content }\n\t\t\t\tplaceholder={ __( 'Write your text...' ) }\n\t\t\t\tstyle={ { textAlign: attributes.align } }\n\t\t\t\/&gt;\n\t\t&lt;\/&gt;\n\t);\n}<\/code><\/pre>\n<p>\u4e0a\u306e\u30b3\u30fc\u30c9\u3067<code>&lt;&gt;<\/code>\u3068<code>&lt;\/&gt;<\/code>\u306f\u3001React\u3067\u8907\u6570\u306e\u8981\u7d20\u3092\u8fd4\u3059\u300c<a href=\"https:\/\/ja.reactjs.org\/docs\/fragments.html#short-syntax\">\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8<\/a>\u300d\u3092\u5ba3\u8a00\u3059\u308b\u77ed\u3044\u8a18\u6cd5\u3067\u3059\u3002<\/p>\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001<code>AlignmentControl<\/code>\u306b2\u3064\u306e\u5c5e\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<ul>\n<li><code>value<\/code>\u306f\u3001\u3053\u306e\u8981\u7d20\u306e\u73fe\u5728\u306e\u5024\u3092\u8868\u3057\u307e\u3059<\/li>\n<li><code>onChange<\/code>\u306f\u3001\u5024\u304c\u5909\u66f4\u3055\u308c\u305f\u3068\u304d\u306b\u5b9f\u884c\u3059\u308b<a href=\"https:\/\/reactjs.org\/docs\/handling-events.html\">\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9<\/a>\u3092\u6307\u5b9a\u3057\u307e\u3059<\/li>\n<\/ul>\n<p>\u307e\u305f\u3001RichText\u8981\u7d20\u306b\u8ffd\u52a0\u306e\u5c5e\u6027\u3082\u5b9a\u7fa9\u3057\u3066\u3044\u307e\u3059\uff08<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/block-editor\/src\/components\/rich-text\/README.md\">\u4f8b\u4ed8\u304d\u306e\u5c5e\u6027\u306e\u4e00\u89a7\u306b\u3064\u3044\u3066\u306f\u3053\u3061\u3089<\/a>\uff09\u3002<\/p>\n<h4>\u30b9\u30c6\u30c3\u30d73. block.json\u306balgin\u5c5e\u6027\u3092\u5b9a\u7fa9\u3059\u308b<\/h4>\n<p><strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u79fb\u52d5\u3057\u3066\u3001<code>align<\/code>\u5c5e\u6027\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-json\">\"align\": {\n\t\"type\": \"string\",\n\t\"default\": \"none\"\n}<\/code><\/pre>\n<p>\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u306b\u623b\u308a\u3001\u30da\u30fc\u30b8\u3092\u66f4\u65b0\u3057\u3066\u30d6\u30ed\u30c3\u30af\u3092\u9078\u629e\u3057\u307e\u3059\u3002\u30d6\u30ed\u30c3\u30af\u30c4\u30fc\u30eb\u30d0\u30fc\u306b\u3001\u914d\u7f6e\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u304c\u8868\u793a\u3055\u308c\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<figure id=\"attachment_134008\" aria-describedby=\"caption-attachment-134008\" style=\"width: 1770px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134008 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/block-showing-an-error-message.jpg\" alt=\"\u30d6\u30ed\u30c3\u30af\u304c\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8868\u793a\" width=\"1770\" height=\"818\"><figcaption id=\"caption-attachment-134008\" class=\"wp-caption-text\">\u30d6\u30ed\u30c3\u30af\u304c\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8868\u793a<\/figcaption><\/figure>\n<p>\u3053\u308c\u306f\u3001\u307e\u3060\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3092\u5b9a\u7fa9\u3057\u3066\u3044\u306a\u3044\u306e\u304c\u539f\u56e0\u3067\u3059\u3002<\/p>\n<h4>\u30b9\u30c6\u30c3\u30d74. \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3092\u5b9a\u7fa9\u3059\u308b<\/h4>\n<p>\u6b21\u306b\u3001<code>onChangeAlign<\/code>\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">const onChangeAlign = ( newAlign ) =&gt; {\n\tsetAttributes( { \n\t\talign: newAlign === undefined ? 'none' : newAlign, \n\t} )\n}<\/code><\/pre>\n<p><code>newAlign<\/code>\u304c<code>undefined<\/code>\u3067\u3042\u308c\u3070\u3001<code>none<\/code>\u306b\u8a2d\u5b9a\u3057\u3001\u305d\u3046\u3067\u306a\u3051\u308c\u3070\u3001<code>newAlign<\/code>\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u308c\u3067\u3001<strong>edit.js<\/strong>\u30b9\u30af\u30ea\u30d7\u30c8\u306f\uff08\u4e00\u65e6\uff09\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes, setAttributes } ) {\n\tconst blockProps = useBlockProps();\n\tconst onChangeContent = ( newContent ) =&gt; {\n\t\tsetAttributes( { content: newContent } )\n\t}\n\tconst onChangeAlign = ( newAlign ) =&gt; {\n\t\tsetAttributes( { \n\t\t\talign: newAlign === undefined ? 'none' : newAlign, \n\t\t} )\n\t}\n\treturn (\n\t\t&lt;&gt;\n\t\t\t&lt;BlockControls&gt;\n\t\t\t\t&lt;AlignmentControl\n\t\t\t\t\tvalue={ attributes.align }\n\t\t\t\t\tonChange={ onChangeAlign }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/BlockControls&gt;\n\t\t\t&lt;RichText \n\t\t\t\t{ ...blockProps }\n\t\t\t\ttagName=\"p\"\n\t\t\t\tonChange={ onChangeContent }\n\t\t\t\tallowedFormats={ [ 'core\/bold', 'core\/italic' ] }\n\t\t\t\tvalue={ attributes.content }\n\t\t\t\tplaceholder={ __( 'Write your text...' ) }\n\t\t\t\tstyle={ { textAlign: attributes.align } }\n\t\t\t\/&gt;\n\t\t&lt;\/&gt;\n\t);\n}<\/code><\/pre>\n<p>\u3053\u308c\u3067\u30a8\u30c7\u30a3\u30bf\u30fc\u306b\u623b\u3063\u3066\u3001\u30d6\u30ed\u30c3\u30af\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u914d\u7f6e\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u30d6\u30ed\u30c3\u30af\u306b\u914d\u7f6e\u30c4\u30fc\u30eb\u30d0\u30fc\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<figure id=\"attachment_134009\" aria-describedby=\"caption-attachment-134009\" style=\"width: 1772px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134009 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/alignment-toolbar.jpg\" alt=\"\u30d6\u30ed\u30c3\u30af\u306b\u914d\u7f6e\u30c4\u30fc\u30eb\u30d0\u30fc\u3092\u8ffd\u52a0\" width=\"1772\" height=\"702\"><figcaption id=\"caption-attachment-134009\" class=\"wp-caption-text\">\u30d6\u30ed\u30c3\u30af\u306b\u914d\u7f6e\u30c4\u30fc\u30eb\u30d0\u30fc\u3092\u8ffd\u52a0<\/figcaption><\/figure>\n<p>\u306a\u304a\u3001\u6295\u7a3f\u3092\u4fdd\u5b58\u3059\u308b\u3068\u3001\u30d6\u30ed\u30c3\u30af\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3067\u914d\u7f6e\u3055\u308c\u306a\u3044\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u5834\u5408\u3001<code>save<\/code>\u95a2\u6570\u3092\u4fee\u6b63\u3057\u3066\u3001\u30d6\u30ed\u30c3\u30af\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3068\u5c5e\u6027\u3092\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u4fdd\u5b58\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h4>\u30b9\u30c6\u30c3\u30d75. \u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\u3059\u308b<\/h4>\n<p><strong>save.js<\/strong>\u3092\u958b\u304d\u3001<code>save<\/code>\u95a2\u6570\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre><code class=\"language-jsx\">export default function save( { attributes } ) {\n\tconst blockProps = useBlockProps.save();\n\treturn (\n\t\t&lt;RichText.Content \n\t\t\t{ ...blockProps } \n\t\t\ttagName=\"p\" \n\t\t\tvalue={ attributes.content } \n\t\t\tstyle={ { textAlign: attributes.align } }\n\t\t\/&gt;\n\t);\n}<\/code><\/pre>\n<p>\u6700\u5f8c\u306b\u3001<a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\">\u5206\u5272\u4ee3\u5165\u69cb\u6587<\/a>\u3092\u4f7f\u7528\u3057\u3066\u3001<code>attribute<\/code>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304b\u3089\u500b\u3005\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u62bd\u51fa\u3057\u3001\u30b3\u30fc\u30c9\u3092\u6574\u7406\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre><code class=\"language-jsx\">export default function save( { attributes } ) {\n\tconst blockProps = useBlockProps.save();\n\tconst { content, align } = attributes;\n\treturn (\n\t\t&lt;RichText.Content \n\t\t\t{ ...blockProps } \n\t\t\ttagName=\"p\" \n\t\t\tvalue={ content } \n\t\t\tstyle={ { textAlign: align } }\n\t\t\/&gt;\n\t);\n}<\/code><\/pre>\n<p><strong>edit.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u3067\u3082\u540c\u3058\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u3001\u30b3\u30fc\u30c9\u30a8\u30c7\u30a3\u30bf\u30fc\u30e2\u30fc\u30c9\u3067\u30a8\u30c7\u30a3\u30bf\u30fc\u306b\u623b\u308a\u307e\u3059\u3002\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:ka-example-block\/ka-example-block {\"align\":\"right\"} --&gt;\n&lt;p class=\"wp-block-ka-example-block-ka-example-block\" style=\"text-align:right\"&gt;This is my first editable &lt;strong&gt;Gutenberg&lt;\/strong&gt; &lt;em&gt;block&lt;\/em&gt; \ud83d\ude0e&lt;\/p&gt;\n&lt;!-- \/wp:ka-example-block\/ka-example-block --&gt;<\/code><\/pre>\n<figure id=\"attachment_134010\" aria-describedby=\"caption-attachment-134010\" style=\"width: 1446px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134010 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/block-toolbar-controls.jpg\" alt=\"\u30d6\u30ed\u30c3\u30af\u30c4\u30fc\u30eb\u30d0\u30fc\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306e\u78ba\u8a8d\" width=\"1446\" height=\"498\"><figcaption id=\"caption-attachment-134010\" class=\"wp-caption-text\">\u30d6\u30ed\u30c3\u30af\u30c4\u30fc\u30eb\u30d0\u30fc\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306e\u78ba\u8a8d<\/figcaption><\/figure>\n<p>\u3053\u308c\u3067\u5b8c\u4e86\u3067\u3059\u3002\u30d6\u30ed\u30c3\u30af\u30c4\u30fc\u30eb\u30d0\u30fc\u306b\u914d\u7f6e\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3092\u8ffd\u52a0\u3067\u304d\u307e\u3057\u305f\ud83e\udd13<\/p>\n<p>\u30d6\u30ed\u30c3\u30af\u30c4\u30fc\u30eb\u30d0\u30fc\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306e\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u30cf\u30f3\u30c9\u30d6\u30c3\u30af\u306e\u300c<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/block-tutorial\/block-controls-toolbar-and-sidebar\/\">\u30d6\u30ed\u30c3\u30af\u30c4\u30fc\u30eb\u30d0\u30fc\u3068\u8a2d\u5b9a\u30b5\u30a4\u30c9\u30d0\u30fc<\/a>\u300d\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h3 id=\"settings-sidebar\">\u30d6\u30ed\u30c3\u30af\u8a2d\u5b9a\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u7de8\u96c6<\/h3>\n<p>\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306f\u3001\u30d6\u30ed\u30c3\u30af<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/block-tutorial\/block-controls-toolbar-and-sidebar\/\">\u8a2d\u5b9a\u30b5\u30a4\u30c9\u30d0\u30fc<\/a>\u306b\u3082\u8ffd\u52a0\u3067\u304d\u307e\u3059\uff08\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u7528\u306b\u65b0\u898f\u30b5\u30a4\u30c9\u30d0\u30fc\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u3082\uff09\u3002<\/p>\n<p>API\u3068\u3057\u3066\u306f\u3001<code><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/block-editor\/src\/components\/inspector-controls\/README.md\">InspectorControls<\/a><\/code><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/block-editor\/src\/components\/inspector-controls\/README.md\">\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/a>\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u30cf\u30f3\u30c9\u30d6\u30c3\u30af\u3067\u3001<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/block-tutorial\/block-controls-toolbar-and-sidebar\/#settings-sidebar\">\u8a2d\u5b9a\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u4f7f\u3044\u65b9<\/a>\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8aac\u660e\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<blockquote><p>\u8a2d\u5b9a\u30b5\u30a4\u30c9\u30d0\u30fc\u306f\u3001\u3042\u307e\u308a\u4f7f\u308f\u306a\u3044\u8a2d\u5b9a\u3084\u3001\u5927\u304d\u306a\u753b\u9762\u30b9\u30da\u30fc\u30b9\u304c\u5fc5\u8981\u306a\u8a2d\u5b9a\u3067\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002\u8a2d\u5b9a\u30b5\u30a4\u30c9\u30d0\u30fc\u306f<strong>\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8a2d\u5b9a\u3067\u306e\u307f<\/strong>\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u30d6\u30ed\u30c3\u30af\u5185\u306e\u9078\u629e\u3057\u305f\u30b3\u30f3\u30c6\u30f3\u30c4\u3067\u306e\u307f\u6709\u52b9\u306a\u8a2d\u5b9a\u306f\uff08\u4f8b\uff1a\u6bb5\u843d\u5185\u306e\u9078\u629e\u3057\u305f\u30c6\u30ad\u30b9\u30c8\u306b\u5bfe\u3059\u308b\u300c\u592a\u5b57\u300d\u8a2d\u5b9a\uff09\u3001\u8a2d\u5b9a\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u4e2d\u306b\u7f6e\u304b\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u3002\u8a2d\u5b9a\u30b5\u30a4\u30c9\u30d0\u30fc\u306fHTML\u30e2\u30fc\u30c9\u3067\u30d6\u30ed\u30c3\u30af\u3092\u7de8\u96c6\u3059\u308b\u3068\u304d\u306b\u3082\u8868\u793a\u3055\u308c\u308b\u305f\u3081\u3001\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u306e\u8a2d\u5b9a\u306e\u307f\u3092\u914d\u7f6e\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p><\/blockquote>\n<p>\u518d\u3073\u3001\u540c\u3058\u624b\u9806\u3067\u9032\u3081\u307e\u3059\u3002<\/p>\n<ol>\n<li>WordPress\u30d1\u30c3\u30b1\u30fc\u30b8\u304b\u3089\u5fc5\u8981\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b<\/li>\n<li>JSX\u30b3\u30fc\u30c9\u306b\u5bfe\u5fdc\u3059\u308b\u8981\u7d20\u3092\u8ffd\u52a0\u3059\u308b<\/li>\n<li><strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u5fc5\u8981\u306a\u5c5e\u6027\u3092\u5b9a\u7fa9\u3059\u308b<\/li>\n<li>\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3092\u5b9a\u7fa9\u3059\u308b<\/li>\n<li>\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\u3059\u308b<\/li>\n<\/ol>\n<h4>\u30b9\u30c6\u30c3\u30d71. @wordpress\/block-editor\u304b\u3089InspectorControls\u3068PanelColorSettings\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b<\/h4>\n<p>\u30d6\u30ed\u30c3\u30af\u306e\u7279\u5b9a\u90e8\u5206\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u306b\u306f\u3001\u5fc5\u8981\u306a\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001\u30ab\u30e9\u30fc\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u30d1\u30cd\u30eb\u3092\u5b9f\u88c5\u3059\u308b\u306b\u306f\u3001<code>block-editor<\/code>\u30e2\u30b8\u30e5\u30fc\u30eb\u304b\u3089<code>InspectorControls<\/code>\u3068<code>PanelColorSettings<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">import { \n\tuseBlockProps, \n\tRichText, \n\tAlignmentControl, \n\tBlockControls,\n\tInspectorControls,\n\tPanelColorSettings\n} from '@wordpress\/block-editor';<\/code><\/pre>\n<h4>\u30b9\u30c6\u30c3\u30d72. JSX\u30b3\u30fc\u30c9\u306b\u5bfe\u5fdc\u3059\u308b\u8981\u7d20\u3092\u8ffd\u52a0\u3059\u308b<\/h4>\n<p>\u6b21\u306b\u3001<code>Edit<\/code>\u95a2\u6570\u304c\u8fd4\u3059JSX\u306b\u3001\u5bfe\u5fdc\u3059\u308b\u8981\u7d20\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes, setAttributes } ) {\n\tconst blockProps = useBlockProps();\n\n\tconst { content, align, backgroundColor, textColor } = attributes;\n\n\tconst onChangeContent = ( newContent ) =&gt; {\n\t\tsetAttributes( { content: newContent } )\n\t}\n\tconst onChangeAlign = ( newAlign ) =&gt; {\n\t\tsetAttributes( { \n\t\t\talign: newAlign === undefined ? 'none' : newAlign, \n\t\t} )\n\t}\n\treturn (\n\t\t&lt;&gt;\n\t\t\t&lt;InspectorControls&gt;\n\t\t\t\t&lt;PanelColorSettings \n\t\t\t\t\ttitle={ __( 'Color settings', 'ka-example-block' ) }\n\t\t\t\t\tinitialOpen={ false }\n\t\t\t\t\tcolorSettings={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t  value: textColor,\n\t\t\t\t\t\t  onChange: onChangeTextColor,\n\t\t\t\t\t\t  label: __( 'Text color', 'ka-example-block' )\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t  value: backgroundColor,\n\t\t\t\t\t\t  onChange: onChangeBackgroundColor,\n\t\t\t\t\t\t  label: __( 'Background color', 'ka-example-block' )\n\t\t\t\t\t\t}\n\t\t\t\t\t] }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/InspectorControls&gt;\n\t\t\t&lt;BlockControls&gt;\n\t\t\t\t&lt;AlignmentControl\n\t\t\t\t\tvalue={ align }\n\t\t\t\t\tonChange={ onChangeAlign }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/BlockControls&gt;\n\t\t\t&lt;RichText \n\t\t\t\t{ ...blockProps }\n\t\t\t\ttagName=\"p\"\n\t\t\t\tonChange={ onChangeContent }\n\t\t\t\tallowedFormats={ [ 'core\/bold', 'core\/italic' ] }\n\t\t\t\tvalue={ content }\n\t\t\t\tplaceholder={ __( 'Write your text...' ) }\n\t\t\t\tstyle={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } }\n\t\t\t\/&gt;\n\t\t&lt;\/&gt;\n\t);\n}<\/code><\/pre>\n<p>\u306a\u304a\u3001<code>RichText<\/code>\u8981\u7d20\u306e<code>style<\/code>\u5c5e\u6027\u3082\u66f4\u65b0\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">&lt;RichText \n\t { ...blockProps }\n\t tagName=\"p\"\n\t onChange={ onChangeContent }\n\t allowedFormats={ [ 'core\/bold', 'core\/italic' ] }\n\t value={ content }\n\t placeholder={ __( 'Write your text...' ) }\n\t style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } }\n\/&gt;<\/code><\/pre>\n<h4>\u30b9\u30c6\u30c3\u30d73. block.json\u306b\u5fc5\u8981\u306a\u5c5e\u6027\u3092\u5b9a\u7fa9\u3059\u308b<\/h4>\n<p>\u3053\u3053\u3067\u3001<strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b<code>backgroundColor<\/code>\u3068<code>textColor<\/code>\u5c5e\u6027\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-json\">\"attributes\": {\n\t\"content\": {\n\t\t\"type\": \"string\",\n\t\t\"source\": \"html\",\n\t\t\"selector\": \"p\"\n\t},\n\t\"align\": {\n\t\t\"type\": \"string\",\n\t\t\"default\": \"none\"\n\t},\n\t\"backgroundColor\": {\n\t\t\"type\": \"string\"\n\t},\t \n\t\"textColor\": {\n\t\t\"type\": \"string\"\n\t}\n},<\/code><\/pre>\n<h4>\u30b9\u30c6\u30c3\u30d74. \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3092\u5b9a\u7fa9\u3059\u308b<\/h4>\n<p>\u6b21\u306b\u3001\u5165\u529b\u306b\u5fdc\u3058\u3066<code>backgroundColor<\/code>\u3068<code>textColor<\/code>\u3092\u66f4\u65b0\u3059\u308b2\u3064\u306e\u95a2\u6570\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">const onChangeBackgroundColor = ( newBackgroundColor ) =&gt; {\n\tsetAttributes( { backgroundColor: newBackgroundColor } )\n}\n\nconst onChangeTextColor = ( newTextColor ) =&gt; {\n\tsetAttributes( { textColor: newTextColor } )\n}<\/code><\/pre>\n<h4>\u30b9\u30c6\u30c3\u30d75. \u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\u3059\u308b<\/h4>\n<p>\u6700\u5f8c\u306b<strong>save.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u304d\u3001\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">export default function save( { attributes } ) {\n\tconst blockProps = useBlockProps.save();\n\tconst { content, align, backgroundColor, textColor } = attributes;\n\treturn (\n\t\t&lt;RichText.Content \n\t\t\t{ ...blockProps } \n\t\t\ttagName=\"p\" \n\t\t\tvalue={ content } \n\t\t\tstyle={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } }\n\t\t\/&gt;\n\t);\n}<\/code><\/pre>\n<p>\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u3001\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u30d6\u30ed\u30c3\u30af\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002\u30d6\u30ed\u30c3\u30af\u306b\u4e88\u671f\u305b\u306c\u3001\u307e\u305f\u306f\u7121\u52b9\u306a\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u542b\u307e\u308c\u3066\u3044\u308b\u3053\u3068\u3092\u77e5\u3089\u305b\u308b\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_134011\" aria-describedby=\"caption-attachment-134011\" style=\"width: 1396px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134011 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/unexpected-or-invalid-content.jpg\" alt=\"\u4e88\u671f\u305b\u306c\u3001\u307e\u305f\u306f\u7121\u52b9\u306a\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\" width=\"1396\" height=\"542\"><figcaption id=\"caption-attachment-134011\" class=\"wp-caption-text\">\u4e88\u671f\u305b\u306c\u3001\u307e\u305f\u306f\u7121\u52b9\u306a\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8<\/figcaption><\/figure>\n<p>\u3053\u306e\u30a8\u30e9\u30fc\u306f\u3001<strong>save.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u304c\u5909\u66f4\u3055\u308c\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u4fdd\u5b58\u3055\u308c\u305f\u30b3\u30fc\u30c9\u304c\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b\u30b3\u30fc\u30c9\u3068\u4e00\u81f4\u3057\u306a\u3044\u6642\u306b\u767a\u751f\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u308c\u3092\u4fee\u6b63\u3059\u308b\u306b\u306f\u3001\u30da\u30fc\u30b8\u3092\u66f4\u65b0\u3057\u3001\u30d6\u30ed\u30c3\u30af\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4e00\u5ea6\u524a\u9664\u3057\u3066\u3001\u518d\u5ea6\u6295\u7a3f\u306b\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<figure id=\"attachment_134012\" aria-describedby=\"caption-attachment-134012\" style=\"width: 1962px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134012 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/color-settings-panel.jpg\" alt=\"\u30ab\u30e9\u30fc\u8a2d\u5b9a\u30d1\u30cd\u30eb\u4ed8\u304d\u306e\u30ab\u30b9\u30bf\u30e0\u30d6\u30ed\u30c3\u30af\" width=\"1962\" height=\"1020\"><figcaption id=\"caption-attachment-134012\" class=\"wp-caption-text\">\u30ab\u30e9\u30fc\u8a2d\u5b9a\u30d1\u30cd\u30eb\u4ed8\u304d\u306e\u30ab\u30b9\u30bf\u30e0\u30d6\u30ed\u30c3\u30af<\/figcaption><\/figure>\n<p>\u5909\u66f4\u3092\u52a0\u3048\u3001\u6295\u7a3f\u3092\u4fdd\u5b58\u3057\u3066\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3067\u8868\u793a\u3057\u307e\u3059\u3002\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u884c\u3063\u305f\u5909\u66f4\u304c\u3001\u30b5\u30a4\u30c8\u306b\u3082\u53cd\u6620\u3055\u308c\u3066\u3044\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<figure id=\"attachment_134013\" aria-describedby=\"caption-attachment-134013\" style=\"width: 1918px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134013 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/custom-settings-applied.jpg\" alt=\"\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3067\u3082\u30ab\u30b9\u30bf\u30e0\u30d6\u30ed\u30c3\u30af\u304c\u6b63\u3057\u304f\u52d5\u4f5c\" width=\"1918\" height=\"628\"><figcaption id=\"caption-attachment-134013\" class=\"wp-caption-text\">\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3067\u3082\u30ab\u30b9\u30bf\u30e0\u30d6\u30ed\u30c3\u30af\u304c\u6b63\u3057\u304f\u52d5\u4f5c<\/figcaption><\/figure>\n<h3 id=\"external-link\">\u5916\u90e8\u30ea\u30f3\u30af\u306e\u8ffd\u52a0\u3068\u7de8\u96c6<\/h3>\n<p>\u6b21\u306b\u3001\u30d6\u30ed\u30c3\u30af\u30bf\u30a4\u30d7\u306b\u65b0\u3057\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<ul>\n<li>\u30ab\u30b9\u30bf\u30e0\u30d6\u30ed\u30c3\u30af\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u53ef\u80fd\u306a\u30ea\u30f3\u30af\u3092\u8ffd\u52a0\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b<code>ExternalLink<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/li>\n<li>\u30ea\u30f3\u30af\u306e\u8a2d\u5b9a\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u308b\u8907\u6570\u306e\u30b5\u30a4\u30c9\u30d0\u30fc\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/li>\n<\/ul>\n<h4>\u30b9\u30c6\u30c3\u30d71. @wordpress\/components\u304b\u3089\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/h4>\n<p><code>@wordpress\/components<\/code>\u304b\u3089\u8907\u6570\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<strong>edit.js<\/strong>\u3092\u958b\u304d\u3001\u4ee5\u4e0b\u306e<code>import<\/code>\u6587\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre><code class=\"language-js\">import {\n\tTextControl,\n\tPanelBody,\n\tPanelRow,\n\tToggleControl,\n\tExternalLink\n} from '@wordpress\/components';<\/code><\/pre>\n<ul>\n<li><code><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/panel\/README.md#panelbody\">PanelBody<\/a><\/code>\uff1a\u8a2d\u5b9a\u30b5\u30a4\u30c9\u30d0\u30fc\u306b\u6298\u308a\u305f\u305f\u307f\u53ef\u80fd\u306a\u30b3\u30f3\u30c6\u30ca\u3092\u8ffd\u52a0<\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/panel\/README.md#panelrow\"><code>PaneRow<\/code><\/a>\uff1a\u30b5\u30a4\u30c9\u30d0\u30fc\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u7528\u306e\u6c4e\u7528\u30b3\u30f3\u30c6\u30ca\u3092\u751f\u6210<\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/text-control\/README.md\"><code>TextControl<\/code><\/a>\uff1a\u30c6\u30ad\u30b9\u30c8\u5165\u529b\u7528\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/toggle-control\/README.md\"><code>ToggleControl<\/code><\/a>\uff1a\u7279\u5b9a\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u6709\u52b9\u30fb\u7121\u52b9\u3092\u5207\u308a\u66ff\u3048\u3089\u308c\u308b\u30c8\u30b0\u30eb\u7528\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/external-link\/README.md\"><code>ExternalLink<\/code><\/a>\uff1a\u5916\u90e8\u30ea\u30f3\u30af\u3092\u8ffd\u52a0\u3059\u308b\u30b7\u30f3\u30d7\u30eb\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/li>\n<\/ul>\n<h4>\u30b9\u30c6\u30c3\u30d72. JSX\u30b3\u30fc\u30c9\u306b\u5bfe\u5fdc\u3059\u308b\u8981\u7d20\u3092\u8ffd\u52a0\u3059\u308b<\/h4>\n<p>\u307e\u305a\u3001<code>div<\/code>\u30b3\u30f3\u30c6\u30ca\u5185\u306b\u3001<code>RichText<\/code>\u3068\u540c\u3058\u30ec\u30d9\u30eb\u3067<code>ExternalLink<\/code>\u8981\u7d20\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">&lt;div { ...blockProps }&gt;\n\t&lt;RichText \n\t\t...\n\t\/&gt;\n\t&lt;ExternalLink \n\t\thref={ kaLink }\n\t\tclassName=\"ka-button\"\n\t\trel={ hasLinkNofollow ? \"nofollow\" : \"\" }\n\t&gt;\n\t\t\t{ linkLabel }\n\t&lt;\/ExternalLink&gt;\n\n&lt;\/div&gt;<\/code><\/pre>\n<p>\u306a\u304a\u3001<code>ExternalLink<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u5316\u3055\u308c\u3066\u3044\u306a\u3044\u305f\u3081\u3001<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/external-link\/index.js\">\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/a>\u3092\u53c2\u7167\u3057\u3066\u5229\u7528\u53ef\u80fd\u306a\u5c5e\u6027\u306e\u4e00\u89a7\u3092\u53d6\u5f97\u3057\u307e\u3057\u305f\u3002\u3053\u3053\u3067\u306f\u3001<code>href<\/code>\u3001<code>className<\/code>\u3001<code>rel<\/code>\u5c5e\u6027\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u3001<code>rel<\/code>\u5c5e\u6027\u306e\u5024\u306f<code>noopener noreferrer<\/code>\u306b\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u3002\u3053\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001\u30c8\u30b0\u30eb\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u304c<strong>\u30aa\u30f3<\/strong>\u306e\u3068\u304d\u3001\u7d50\u679c\u306e<code>a<\/code>\u30bf\u30b0\u306e<code>rel<\/code>\u5c5e\u6027\u306b<code><a href=\"https:\/\/kinsta.com\/jp\/blog\/add-nofollow-links-in-wordpress\/\">nofollow<\/a><\/code><a href=\"https:\/\/kinsta.com\/jp\/blog\/add-nofollow-links-in-wordpress\/\">\u30ad\u30fc\u30ef\u30fc\u30c9<\/a>\u304c\u8ffd\u52a0\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u30d6\u30ed\u30c3\u30af\u30b5\u30a4\u30c9\u30d0\u30fc\u306b\u30ea\u30f3\u30af\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002\u307e\u305a\u3001<code>InspectorControls<\/code>\u5185\u306b\u3001<code>PanelColorSettings<\/code>\u3068\u540c\u3058\u30ec\u30d9\u30eb\u3067<code>PanelBody<\/code>\u8981\u7d20\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">&lt;InspectorControls&gt;\n\t&lt;PanelColorSettings \n\t...\n\t\/&gt;\n\t&lt;PanelBody \n\t\ttitle={ __( 'Link Settings' )}\n\t\tinitialOpen={true}\n\t&gt;\n\t...\n\t&lt;\/PanelBody&gt;\n&lt;\/InspectorControls&gt;<\/code><\/pre>\n<p>\u4eca\u56de\u306f\u3001\u4ee5\u4e0b\u3092\u5b9f\u884c\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<ol>\n<li><code>title<\/code>\u5c5e\u6027\u3067\u30d1\u30cd\u30eb\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u6307\u5b9a<\/li>\n<li><code>initialOpen<\/code>\u3067\u521d\u671f\u72b6\u614b\u3067\u30d1\u30cd\u30eb\u304c\u958b\u3044\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3092\u8a2d\u5b9a<\/li>\n<\/ol>\n<p>\u6b21\u306b\u3001<code>PanelBody<\/code>\u306e\u4e2d\u306b2\u3064\u306e<code>PanelRow<\/code>\u8981\u7d20\u3092\u8ffd\u52a0\u3057\u3001\u305d\u308c\u305e\u308c\u306e<code>PanelRow<\/code>\u306e\u4e2d\u306b<code>TextControl<\/code>\u8981\u7d20\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">&lt;PanelBody \n\ttitle={ __( 'Link Settings', 'ka-example-block' )}\n\tinitialOpen={true}\n&gt;\n\t&lt;PanelRow&gt;\n\t\t&lt;fieldset&gt;\n\t\t\t&lt;TextControl\n\t\t\t\tlabel={__( 'KA link', 'ka-example-block' )}\n\t\t\t\tvalue={ kaLink }\n\t\t\t\tonChange={ onChangeKaLink }\n\t\t\t\thelp={ __( 'Add your Academy link', 'ka-example-block' )}\n\t\t\t\/&gt;\n\t\t&lt;\/fieldset&gt;\n\t&lt;\/PanelRow&gt;\n\t&lt;PanelRow&gt;\n\t\t&lt;fieldset&gt;\n\t\t\t&lt;TextControl\n\t\t\t\tlabel={__( 'Link label', 'ka-example-block' )}\n\t\t\t\tvalue={ linkLabel }\n\t\t\t\tonChange={ onChangeLinkLabel }\n\t\t\t\thelp={ __( 'Add link label', 'ka-example-block' )}\n\t\t\t\/&gt;\n\t\t&lt;\/fieldset&gt;\n\t&lt;\/PanelRow&gt;\n&lt;\/PanelBody&gt;<\/code><\/pre>\n<p>\u4e0a\u306e\u30b3\u30fc\u30c9\u306f\u3001\u3082\u3046\u304b\u306a\u308a\u7c21\u5358\u306b\u601d\u3048\u308b\u306f\u305a\u3002\u305d\u308c\u304b\u3089\u30012\u3064\u306e\u30c6\u30ad\u30b9\u30c8\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306b\u30ea\u30f3\u30af\u30e9\u30d9\u30eb\u3068URL\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p>\u3055\u3089\u306b\u3001<code>ToggleControl<\/code>\u3092\u542b\u3080<code>PanelRow<\/code>\u3092\u8ffd\u52a0\u3057\u3066\u3001\u5c5e\u6027\u3092\u542b\u3081\u308b\u304b\u3069\u3046\u304b\u306a\u3069\u3001\u7279\u5b9a\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u6709\u52b9\u3001\u7121\u52b9\u3092\u5207\u308a\u66ff\u3048\u3089\u308c\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">&lt;PanelRow&gt;\n\t&lt;fieldset&gt;\n\t\t&lt;ToggleControl\n\t\t\tlabel=\"Add rel = nofollow\"\n\t\t\thelp={\n\t\t\t\thasLinkNofollow\n\t\t\t\t\t? 'Has rel nofollow.'\n\t\t\t\t\t: 'No rel nofollow.'\n\t\t\t}\n\t\t\tchecked={ hasLinkNofollow }\n\t\t\tonChange={ toggleNofollow }\n\t\t\/&gt;\n\t&lt;\/fieldset&gt;\n&lt;\/PanelRow&gt;<\/code><\/pre>\n<h4>\u30b9\u30c6\u30c3\u30d73. block.json\u306b\u5fc5\u8981\u306a\u5c5e\u6027\u3092\u5b9a\u7fa9\u3059\u308b<\/h4>\n<p><strong>block.json<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b<code>kaLink<\/code>\u3001<code>linkLabel<\/code>\u3001<code>hasLinkNofollow<\/code>\u5c5e\u6027\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-json\">\"kaLink\": {\n\t\"type\": \"string\",\n\t\"default\": \"\"\n},\n\"linkLabel\": {\n\t\"type\": \"string\",\n\t\"default\": \"Check it out!\"\n},\n\"hasLinkNofollow\": {\n\t\"type\": \"boolean\",\n\t\"default\": false\n}<\/code><\/pre>\n<p>\u3053\u308c\u4ee5\u4e0a\u3001\u4f55\u304b\u3092\u8ffd\u52a0\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\/Event_handlers\">\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u95a2\u6570<\/a>\u306e\u5b9a\u7fa9\u306b\u79fb\u308a\u307e\u3057\u3087\u3046\u3002<\/p>\n<h4>\u30b9\u30c6\u30c3\u30d74. \u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3092\u5b9a\u7fa9\u3059\u308b<\/h4>\n<p><strong>edit.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u623b\u308a\u3001\u4ee5\u4e0b\u306e\u95a2\u6570\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">const { content, align, backgroundColor, textColor, kaLink, linkLabel, hasLinkNofollow } = attributes;\n\nconst onChangeKaLink = ( newKaLink ) =&gt; {\n\tsetAttributes( { kaLink: newKaLink === undefined ? '' : newKaLink } )\n}\n\nconst onChangeLinkLabel = ( newLinkLabel ) =&gt; {\n\tsetAttributes( { linkLabel: newLinkLabel === undefined ? '' : newLinkLabel } )\n}\n\nconst toggleNofollow = () =&gt; {\n\tsetAttributes( { hasLinkNofollow: ! hasLinkNofollow } )\n}<\/code><\/pre>\n<p>\u3053\u306e\u95a2\u6570\u306f\u3001\u5165\u529b\u306b\u5bfe\u5fdc\u3059\u308b\u5c5e\u6027\u5024\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002<\/p>\n<h4>\u30b9\u30c6\u30c3\u30d75. \u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\u3059\u308b<\/h4>\n<p>\u6700\u5f8c\u306b\u3001<strong>save.js<\/strong>\u306e<code>save<\/code>\u95a2\u6570\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">export default function save( { attributes } ) {\n\t\n\tconst { content, align, backgroundColor, textColor, kaLink, linkLabel, hasLinkNofollow } = attributes;\n\n\tconst blockProps = useBlockProps.save( {\n\t\tclassName: `has-text-align-${ align }`\n\t} );\n\t\n\treturn (\n\t\t&lt;div \n\t\t\t{ ...blockProps }\n\t\t\tstyle={ { backgroundColor: backgroundColor } }\n\t\t&gt;\n\t\t\t&lt;RichText.Content \n\t\t\t\ttagName=\"p\" \n\t\t\t\tvalue={ content } \n\t\t\t\tstyle={ { color: textColor } }\n\t\t\t\/&gt;\n\t\t\t&lt;p&gt;\n\t\t\t\t&lt;a \n\t\t\t\t\thref={ kaLink }\n\t\t\t\t\tclassName=\"ka-button\"\n\t\t\t\t\trel={ hasLinkNofollow ? \"nofollow\" : \"noopener noreferrer\" }\n\t\t\t\t&gt;\n\t\t\t\t\t{ linkLabel }\n\t\t\t\t&lt;\/a&gt;\n\t\t\t&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>\u306a\u304a\u3001\u4eca\u56de\u306e\u4f8b\u3067\u306f\u3001<code>ExternalLink<\/code>\u306e\u4ee3\u308f\u308a\u306b\u3001\u901a\u5e38\u306e<code>a<\/code>\u8981\u7d20\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u7d50\u679c\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_134015\" aria-describedby=\"caption-attachment-134015\" style=\"width: 1964px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134015 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/link-settings.jpg\" alt=\"\u30d6\u30ed\u30c3\u30af\u8a2d\u5b9a\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u30ea\u30f3\u30af\u8a2d\u5b9a\u30d1\u30cd\u30eb\" width=\"1964\" height=\"1146\"><figcaption id=\"caption-attachment-134015\" class=\"wp-caption-text\">\u30d6\u30ed\u30c3\u30af\u8a2d\u5b9a\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u30ea\u30f3\u30af\u8a2d\u5b9a\u30d1\u30cd\u30eb<\/figcaption><\/figure>\n<h3 id=\"multiple-block-styles\">\u8907\u6570\u306e\u30d6\u30ed\u30c3\u30af\u30b9\u30bf\u30a4\u30eb\u306e\u8ffd\u52a0<\/h3>\n<p>\u524d\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30c6\u30ad\u30b9\u30c8\u306e\u914d\u7f6e\u3092\u8a2d\u5b9a\u3067\u304d\u308b\u3001\u30d6\u30ed\u30c3\u30af\u30c4\u30fc\u30eb\u30d0\u30fc\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306e\u8ffd\u52a0\u65b9\u6cd5\u306b\u3064\u3044\u3066\u5b66\u3073\u307e\u3057\u305f\u3002\u540c\u3058\u624b\u9806\u3067\u30d6\u30ed\u30c3\u30af\u30c4\u30fc\u30eb\u30d0\u30fc\u306b\u3055\u3089\u306b\u30b9\u30bf\u30a4\u30eb\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3092\u8ffd\u52a0\u3067\u304d\u307e\u3059\u304c\u3001\u30ef\u30f3\u30af\u30ea\u30c3\u30af\u3067\u9078\u629e\u3067\u304d\u308b\u3001\u5b9a\u7fa9\u6e08\u307f\u306e\u30d6\u30ed\u30c3\u30af\u30b9\u30bf\u30a4\u30eb\u3092\u8ffd\u52a0\u3059\u308b\u65b9\u6cd5\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u3053\u308c\u306b\u306f\u30d6\u30ed\u30c3\u30afAPI\u306e\u4fbf\u5229\u306a\u6a5f\u80fd<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-metadata\/#block-styles\">\u30d6\u30ed\u30c3\u30af\u30b9\u30bf\u30a4\u30eb<\/a>\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<p><strong>block.json<\/strong>\u306e<code>styles<\/code>\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5b9a\u7fa9\u3057\u3066\u3001\u5bfe\u5fdc\u3059\u308b\u30b9\u30bf\u30a4\u30eb\u3092\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3067\u5ba3\u8a00\u3057\u307e\u3059\u3002<\/p>\n<p>\u4f8b\u3048\u3070\u3001\u6b21\u306e\u3088\u3046\u306a\u30b9\u30bf\u30a4\u30eb\u306e\u914d\u5217\u3092\u8ffd\u52a0\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-json\">\"styles\": [\n\t{\n\t\t\"name\": \"default\",\n\t\t\"label\": \"Default\",\n\t\t\"isDefault\": true\n\t},\n\t{\n\t\t\"name\": \"border\",\n\t\t\"label\": \"Border\"\n\t}\n],<\/code><\/pre>\n<p>\u3053\u308c\u3067\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u3068\u3001<code>border<\/code>\uff08\u67a0\uff09\u3068\u547c\u3070\u308c\u308b\u30b9\u30bf\u30a4\u30eb\u304c\u8ffd\u52a0\u3055\u308c\u307e\u3057\u305f\u3002\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u306b\u623b\u308a\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_134064\" aria-describedby=\"caption-attachment-134064\" style=\"width: 1874px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134064 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/block-styles.jpg\" alt=\"2\u3064\u306e\u5b9a\u7fa9\u6e08\u307f\u30d6\u30ed\u30c3\u30af\u30b9\u30bf\u30a4\u30eb\" width=\"1874\" height=\"1034\"><figcaption id=\"caption-attachment-134064\" class=\"wp-caption-text\">2\u3064\u306e\u5b9a\u7fa9\u6e08\u307f\u30d6\u30ed\u30c3\u30af\u30b9\u30bf\u30a4\u30eb<\/figcaption><\/figure>\n<p>\u30b9\u30bf\u30a4\u30eb\u306f\u3001<a href=\"https:\/\/kinsta.com\/jp\/blog\/wordpress-5-8\/#normalized-block-toolbars\">\u30d6\u30ed\u30c3\u30af\u30b9\u30a4\u30c3\u30c1\u30e3\u30fc<\/a>\u3092\u30af\u30ea\u30c3\u30af\u3057\u3001<strong>\u30d6\u30ed\u30c3\u30af\u8a2d\u5b9a\u30b5\u30a4\u30c9\u30d0\u30fc<\/strong>\u306e\u300c<strong>\u30b9\u30bf\u30a4\u30eb<\/strong>\u300d\u30d1\u30cd\u30eb\u304b\u3089\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u30b9\u30bf\u30a4\u30eb\u3092\u9078\u629e\u3057\u3001<code>p<\/code>\u8981\u7d20\u306b\u9069\u7528\u3055\u308c\u308b\u30af\u30e9\u30b9\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002\u30d6\u30ed\u30c3\u30af\u4e0a\u3067\u53f3\u30af\u30ea\u30c3\u30af\u3057\u3066\u3001\u300c<strong>\u691c\u8a3c<\/strong>\u300d\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u6b21\u306e\u5f62\u5f0f\u306e\u540d\u524d\u306e\u65b0\u3057\u3044\u30af\u30e9\u30b9\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-css\">is-style-{style-name}<\/code><\/pre>\n<p>\u300c<code>Border<\/code>\u300d\u30b9\u30bf\u30a4\u30eb\u3092\u9078\u629e\u3059\u308b\u3068\u3001p\u8981\u7d20\u306b<code>is-style-border<\/code>\u30af\u30e9\u30b9\u304c\u8ffd\u52a0\u3055\u308c\u307e\u3059\u3002\u300c<code>Default<\/code>\u300d\u30b9\u30bf\u30a4\u30eb\u3092\u9078\u629e\u3059\u308b\u3068\u3001\u4ee3\u308f\u308a\u306b<code>is-style-default<\/code>\u30af\u30e9\u30b9\u304c\u8ffd\u52a0\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u3042\u3068\u306f\u3001CSS\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5ba3\u8a00\u3059\u308b\u3060\u3051\u3067\u3059\u3002<strong>editor.scss<\/strong>\u3092\u958b\u304d\u3001\u73fe\u5728\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u7f6e\u304d\u63db\u3048\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-css\">.wp-block-ka-example-block-ka-example-block {\n    padding: 4px;\n}<\/code><\/pre>\n<p>\u6b21\u306b\u3001<strong>style.scss<\/strong>\u306b\u3082\u540c\u69d8\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002\u524d\u8ff0\u3057\u305f\u3088\u3046\u306b\u3001<strong>style.scss<\/strong>\u3067\u5b9a\u7fa9\u3055\u308c\u305f\u30b9\u30bf\u30a4\u30eb\u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30a8\u30c7\u30a3\u30bf\u30fc\u306e\u4e21\u65b9\u306b\u9069\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-css\">.wp-block-ka-example-block-ka-example-block {\n\t&.is-style-default{\n\t\tborder: 0;\n        background-color: #FFE2C7;\n\t}\n\t&.is-style-border{\n\t\tborder: 2px solid #000;\n        border-radius: 16px;\n        background-color: #F6F6F6;\n\t}\n}<\/code><\/pre>\n<p>\u3053\u308c\u3067\u5b8c\u4e86\u3067\u3059\u3002\u30da\u30fc\u30b8\u3092\u66f4\u65b0\u3057\u3066\u3001\u65b0\u305f\u306a\u30d6\u30ed\u30c3\u30af\u30b9\u30bf\u30a4\u30eb\u3092\u304a\u697d\u3057\u307f\u304f\u3060\u3055\u3044\u3002<\/p>\n<figure id=\"attachment_134067\" aria-describedby=\"caption-attachment-134067\" style=\"width: 1876px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134067 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/block-styles-compared.jpg\" alt=\"\u3055\u307e\u3056\u307e\u306a\u30d6\u30ed\u30c3\u30af\u30b9\u30bf\u30a4\u30eb\" width=\"1876\" height=\"960\"><figcaption id=\"caption-attachment-134067\" class=\"wp-caption-text\">\u3055\u307e\u3056\u307e\u306a\u30d6\u30ed\u30c3\u30af\u30b9\u30bf\u30a4\u30eb<\/figcaption><\/figure>\n<h3 id=\"innerblocks-component\">InnerBlocks\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u7528\u3057\u305fGutebnerg\u30d6\u30ed\u30c3\u30af\u306e\u30cd\u30b9\u30c8<\/h3>\n<p>\u3053\u306e\u30ab\u30b9\u30bf\u30e0\u30d6\u30ed\u30c3\u30af\u306f\u3001\u6a5f\u80fd\u7684\u306b\u306f\u5341\u5206\u3067\u3059\u304c\u3001\u3053\u306e\u307e\u307e\u3067\u306f\u9b45\u529b\u7684\u306a\u5916\u89b3\u3068\u306f\u8a00\u3048\u307e\u305b\u3093\u3002\u8a2a\u554f\u8005\u306e\u76ee\u3092\u5f15\u304f\u5199\u771f\u3084\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u753b\u50cf\u3092\u8ffd\u52a0\u3059\u308b\u3068\u3001\u30d6\u30ed\u30c3\u30af\u306b\u8907\u96d1\u306a\u30ec\u30a4\u30e4\u30fc\u3092\u91cd\u306d\u3066\u3057\u307e\u3046\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u5e78\u3044\u4e00\u304b\u3089\u4f5c\u308a\u306a\u304a\u3059\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002Gutenberg\u306b\u306f\u3001<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/block-tutorial\/nested-blocks-inner-blocks\/\">\u30cd\u30b9\u30c8\u3057\u305f\u30d6\u30ed\u30c3\u30af<\/a>\u69cb\u9020\u3092\u4f5c\u6210\u3059\u308b\u7279\u5225\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p><code>InnerBlocks<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/block-editor\/src\/components\/inner-blocks\/README.md\">\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5b9a\u7fa9<\/a>\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<blockquote><p><code>InnerBlocks<\/code>\u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30da\u30a2\u3092\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3057\u3001\u30cd\u30b9\u30c8\u3057\u305f\u30d6\u30ed\u30c3\u30af\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u5b9f\u73fe\u3059\u308b\u30d6\u30ed\u30c3\u30af\u3092\u5b9f\u88c5\u3059\u308b\u3082\u306e\u3002\uff08\u82f1\u8a9e\u539f\u6587\u306e\u65e5\u672c\u8a9e\u8a33\uff09<\/p><\/blockquote>\n<p>\u307e\u305a\u3001<strong>src<\/strong>\u30d5\u30a9\u30eb\u30c0\u306b<strong>.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u4eca\u56de\u306e\u4f8b\u3067\u306f\u3001<strong>container.js<\/strong>\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p>\u6b21\u306b\u3001\u65b0\u3057\u3044\u30ea\u30bd\u30fc\u30b9\u3092<strong>index.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">import '.\/container';<\/code><\/pre>\n<p><strong>container.js<\/strong>\u306b\u623b\u308a\u3001\u5fc5\u8981\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from \"@wordpress\/blocks\";\nimport { __ } from \"@wordpress\/i18n\";\nimport {\n\tuseBlockProps, \n\tInnerBlocks \n} from \"@wordpress\/block-editor\";<\/code><\/pre>\n<p>\u6b21\u306b\u3001\u5185\u90e8\u306b\u304a\u3051\u308b\u30d6\u30ed\u30c3\u30af\u306e\u914d\u7f6e\u3092\u898f\u5b9a\u3059\u308b\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u3053\u306e\u4f8b\u3067\u306f\u30012\u3064\u306e\u30ab\u30e9\u30e0\u304b\u3089\u306a\u308b\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u305d\u308c\u305e\u308c\u306e\u30ab\u30e9\u30e0\u306b\u3001\u30b3\u30a2\u3068\u306a\u308b\u753b\u50cf\u30d6\u30ed\u30c3\u30af\u3068\u30ab\u30b9\u30bf\u30e0\u30d6\u30ed\u30c3\u30af\u3092\u914d\u7f6e\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">const TEMPLATE = [ [ 'core\/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [\n\t[ 'core\/column', { templateLock: 'all' }, [\n\t\t[ 'core\/image' ],\n\t] ],\n\t[ 'core\/column', { templateLock: 'all' }, [\n\t\t[ 'ka-example-block\/ka-example-block', { placeholder: 'Enter side content...' } ],\n\t] ],\n] ] ];<\/code><\/pre>\n<p>\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u69cb\u9020\u306f\u3001<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/docs\/reference-guides\/block-api\/block-templates.md\">blockTypes\uff08\u30d6\u30ed\u30c3\u30af\u540d\u3068\u4efb\u610f\u306e\u5c5e\u6027\uff09\u306e\u914d\u5217<\/a>\u3067\u3059\u3002<\/p>\n<p>\u4e0a\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001\u8907\u6570\u306e\u5c5e\u6027\u3092\u4f7f\u7528\u3057\u3066\u3001Columns\u30d6\u30ed\u30c3\u30af\u3068Column\u30d6\u30ed\u30c3\u30af\u3092\u69cb\u6210\u3057\u3066\u3044\u307e\u3059\u3002\u7279\u306b\u3001<code>templateLock: 'all'<\/code>\u5c5e\u6027\u306f\u3001Column\u30d6\u30ed\u30c3\u30af\u3092\u30ed\u30c3\u30af\u3057\u3001\u4e0d\u7528\u610f\u306b\u65e2\u5b58\u306e\u30d6\u30ed\u30c3\u30af\u3092\u8ffd\u52a0\u3001\u4e26\u3079\u66ff\u3048\u3001\u524a\u9664\u3067\u304d\u306a\u3044\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<code>templateLock<\/code>\u306f\u3001\u4ee5\u4e0b\u306e\u3044\u305a\u308c\u304b\u306e\u5024\u3092\u53d6\u308a\u307e\u3059\u3002<\/p>\n<ul>\n<li><code>all<\/code>\uff1a<code>InnerBlocks<\/code>\u304c\u30ed\u30c3\u30af\u3055\u308c\u30d6\u30ed\u30c3\u30af\u306e\u8ffd\u52a0\u3001\u4e26\u3079\u66ff\u3048\u3001\u524a\u9664\u304c\u3067\u304d\u306a\u304f\u306a\u308b<\/li>\n<li><code>insert<\/code>\uff1a\u30d6\u30ed\u30c3\u30af\u306e\u4e26\u3079\u66ff\u3048\u3068\u524a\u9664\u306e\u307f\u53ef\u80fd<\/li>\n<li><code>false<\/code>\uff1a\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u304c\u30ed\u30c3\u30af\u3055\u308c\u306a\u3044<\/li>\n<\/ul>\n<p>\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306f\u3001<code>InnerBlocks<\/code>\u8981\u7d20\u306b\u5272\u308a\u5f53\u3066\u3089\u308c\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">&lt;InnerBlocks\n\ttemplate={ TEMPLATE }\n\ttemplateLock=\"all\"\n\/&gt;<\/code><\/pre>\n<p>\u4e92\u63db\u6027\u306e\u554f\u984c\u306e\u56de\u907f\u306e\u305f\u3081\u3001<code>InnerBlocks<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b<code>templateLock<\/code>\u5c5e\u6027\u3082\u8ffd\u52a0\u3057\u307e\u3059\uff08issue #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/17262\">17262<\/a>\u3068pull #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26128\">26128<\/a>\u53c2\u7167\uff09\u3002<\/p>\n<p>\u6700\u7d42\u7684\u306a<strong>container.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u306f\u3001\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">registerBlockType('ka-example-block\/ka-example-container-block', {\n\ttitle: __( 'KA Container block', 'ka-example-block' ),\n\tcategory: 'design',\n\n\tedit( { className } ) {\n\t\t\n\t\treturn(\n\t\t\t&lt;div className={ className }&gt;\n\t\t\t\t&lt;InnerBlocks\n\t\t\t\t\ttemplate={ TEMPLATE }\n\t\t\t\t\ttemplateLock=\"all\"\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/div&gt;\n\t\t)\n\t},\n\n\tsave() {\n\t\tconst blockProps = useBlockProps.save();\n\t\treturn(\n\t\t\t&lt;div { ...blockProps }&gt;\n\t\t\t\t&lt;InnerBlocks.Content \/&gt;\n\t\t\t&lt;\/div&gt;\n\t\t)\n\t},\n});<\/code><\/pre>\n<figure id=\"attachment_134068\" aria-describedby=\"caption-attachment-134068\" style=\"width: 2060px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-134068 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/09\/block-final.jpg\" alt=\"\u30a8\u30c7\u30a3\u30bf\u30fc\u5185\u3067\u306e\u6700\u7d42\u7684\u306a\u30d6\u30ed\u30c3\u30af\" width=\"2060\" height=\"1326\"><figcaption id=\"caption-attachment-134068\" class=\"wp-caption-text\">\u30a8\u30c7\u30a3\u30bf\u30fc\u5185\u3067\u306e\u6700\u7d42\u7684\u306a\u30d6\u30ed\u30c3\u30af<\/figcaption><\/figure>\n<h3 id=\"additional-improvements\">\u7d30\u304b\u306a\u7de8\u96c6<\/h3>\n<p>\u3053\u308c\u3067\u30d6\u30ed\u30c3\u30af\u304c\u6a5f\u80fd\u3059\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u304c\u3001\u3055\u3089\u306b\u3061\u3087\u3063\u3068\u3057\u305f\u7de8\u96c6\u3092\u52a0\u3048\u308b\u3053\u3068\u3067\u3001\u30d6\u30ed\u30c3\u30af\u3092\u6539\u826f\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><code>RichText<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u751f\u6210\u3055\u308c\u308b\u6bb5\u843d\u306b\u306f\u3001<code>backgroundColor<\/code>\u5c5e\u6027\u3092\u5272\u308a\u5f53\u3066\u307e\u3057\u305f\u304c\u3001\u30b3\u30f3\u30c6\u30ca\u306e<code>div<\/code>\u306b\u80cc\u666f\u8272\u3092\u5272\u308a\u5f53\u3066\u305f\u65b9\u304c\u826f\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n<p>\u305d\u306e\u5834\u5408\u306f\u3001<strong>edit.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u3068<strong>save.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u306e<code>div<\/code>\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-jsx\">&lt;div \n\t{ ...blockProps }\n\tstyle={ { backgroundColor: backgroundColor } }\n&gt;\n...\n&lt;\/div&gt;<\/code><\/pre>\n<p>\u3053\u308c\u3067\u30d6\u30ed\u30c3\u30af\u5168\u4f53\u306e\u80cc\u666f\u3092\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u4e00\u65b9\u3001\u95a2\u9023\u6027\u306e\u9ad8\u3044\u5909\u66f4\u304c\u3001<code>useBlockProps<\/code>\u30e1\u30bd\u30c3\u30c9\u3067\u3059\u3002\u4eca\u56de\u306e\u4f8b\u3067\u306f\u3001\u5143\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001\u5b9a\u6570<code>blockProps<\/code>\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5b9a\u7fa9\u3057\u307e\u3057\u305f\u3002<\/p>\n<pre><code class=\"language-js\">const blockProps = useBlockProps();<\/code><\/pre>\n<p>\u3057\u304b\u3057\u3001<a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/reference-guides\/block-api\/block-edit-save\/#block-wrapper-props\">\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u30bb\u30c3\u30c8<\/a>\u3092\u6e21\u3059\u3053\u3068\u3067\u3001<code>useBlockProps<\/code>\u3092\u52b9\u679c\u7684\u306b\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001<code>classnames<\/code>\u30e2\u30b8\u30e5\u30fc\u30eb\u304b\u3089<code>classnames<\/code>\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3001\u305d\u308c\u306b\u5fdc\u3058\u305f\u30e9\u30c3\u30d1\u30fc\u30af\u30e9\u30b9\u540d\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306e\u4f8b\u3067\u306f\u3001<code>align<\/code>\u5c5e\u6027\u306e\u5024\u306b\u57fa\u3065\u3044\u3066\u30af\u30e9\u30b9\u540d\u3092\u5272\u308a\u5f53\u3066\u3066\u3044\u307e\u3059\uff08<strong>edit.js<\/strong>\uff09\u3002<\/p>\n<pre><code class=\"language-js\">import classnames from 'classnames';\n\n...\n\nexport default function Edit( { attributes, setAttributes } ) {\n\t...\n\t\n\tconst onChangeAlign = ( newAlign ) =&gt; {\n\t\tsetAttributes( { \n\t\t\talign: newAlign === undefined ? 'none' : newAlign, \n\t\t} )\n\t}\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: `has-text-align-${ align }`\n\t} );\n\t...\n}<\/code><\/pre>\n<p><strong>save.js<\/strong>\u3082\u540c\u69d8\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">import classnames from 'classnames';\n\n...\n\nexport default function save( { attributes } ) {\n\t...\n\tconst { content, align, backgroundColor, textColor, kaLink, linkLabel, hasLinkNofollow } = attributes;\n\n\tconst blockProps = useBlockProps.save( {\n\t\tclassName: `has-text-align-${ align }`\n\t} );\n\t...\n}<\/code><\/pre>\n<p>\u3053\u308c\u3067\u7d42\u4e86\u3067\u3059\uff01<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-scripts\/#build\">\u672c\u756a\u7528\u306e\u30d3\u30eb\u30c9\u3092\u5b9f\u884c<\/a>\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre><code class=\"language-bash\">npm run build<\/code><\/pre>\n\n<h2>\u307e\u3068\u3081<\/h2>\n<p>\u3053\u3053\u307e\u3067\u3001\u304a\u8aad\u307f\u3044\u305f\u3060\u304d\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\u3002\u4eca\u56de\u306e\u8a18\u4e8b\u3067\u306f\u3001\u958b\u767a\u74b0\u5883\u306e\u8a2d\u5b9a\u304b\u3089\u5b8c\u5168\u306a\u30d6\u30ed\u30c3\u30af\u30bf\u30a4\u30d7\u306e\u4f5c\u6210\u307e\u3067\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u5192\u982d\u3067\u8ff0\u3079\u305f\u3088\u3046\u306b\u3001\u9ad8\u5ea6\u306aGutenberg\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u6210\u3057\u3001\u30d7\u30ed\u306eGutenberg\u958b\u767a\u8005\u306b\u306a\u308b\u306b\u306f\u3001Node.js\u3001Webpack\u3001Babel\u3001React\u306b\u7cbe\u901a\u3057\u3066\u3044\u306a\u3051\u308c\u3070\u306a\u308a\u307e\u305b\u3093\u3002<\/p>\n<p>\u3057\u304b\u3057\u3001React\u306e\u7d4c\u9a13\u304c\u5341\u5206\u3067\u306a\u304f\u3066\u3082\u3001\u30d6\u30ed\u30c3\u30af\u958b\u767a\u3092\u697d\u3057\u3080\u3053\u3068\u306f\u3067\u304d\u307e\u3059\u3002\u5b9f\u969b\u306b\u624b\u3092\u52d5\u304b\u3057\u3066\u3044\u304f\u4e2d\u3067\u3001Gutenberg\u30d6\u30ed\u30c3\u30af\u306b\u5fc5\u8981\u306a\u5e45\u5e83\u3044\u6280\u8853\u30b9\u30ad\u30eb\u3092\u78e8\u304f\u30e2\u30c1\u30d9\u30fc\u30b7\u30e7\u30f3\u306f\u81ea\u305a\u3068\u751f\u307e\u308c\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<p>\u3053\u306e\u89e3\u8aac\u8a18\u4e8b\u306f\u3001\u3042\u304f\u307e\u3067\u3001\u306f\u3058\u3081\u3066\u306eGutenberg\u30d6\u30ed\u30c3\u30af\u4f5c\u6210\u306b\u5f79\u7acb\u3064\u60c5\u5831\u306e\u3054\u7d39\u4ecb\u304c\u76ee\u7684\u3067\u3042\u308a\u3001\u3059\u3079\u3066\u306e\u95a2\u9023\u30c8\u30d4\u30c3\u30af\u306b\u306f\u89e6\u308c\u3066\u3044\u307e\u305b\u3093\u3002\u30aa\u30f3\u30e9\u30a4\u30f3\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3084\u89e3\u8aac\u8a18\u4e8b\u3092\u5229\u7528\u3057\u3066\u3001\u77e5\u8b58\u3092\u6df1\u3081\u3066\u3044\u3063\u3066\u304f\u3060\u3055\u3044\u3002\u4ee5\u4e0b\u306f\u3001\u7279\u306b\u304a\u3059\u3059\u3081\u306e\u30ea\u30bd\u30fc\u30b9\u3067\u3059\u3002<\/p>\n<ul>\n<li><a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/getting-started\/create-block\/\">\u516c\u5f0f\u306e\u30d6\u30ed\u30c3\u30af\u4f5c\u6210\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb<\/a>\uff08\u521d\u5fc3\u8005\u5411\u3051\uff09<\/li>\n<li><a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/block-tutorial\/\">\u516c\u5f0f\u306e\u30d6\u30ed\u30c3\u30af\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb<\/a>\uff08\u4e2d\u7d1a\u8005\u5411\u3051\uff09<\/li>\n<li><a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/block-tutorial\/creating-dynamic-blocks\/\">\u30c0\u30a4\u30ca\u30df\u30c3\u30af\u30d6\u30ed\u30c3\u30af<\/a><\/li>\n<li><a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/metabox\/\">\u30e1\u30bf\u30dc\u30c3\u30af\u30b9<\/a><\/li>\n<li><a href=\"https:\/\/ja.wordpress.org\/team\/handbook\/block-editor\/how-to-guides\/plugin-sidebar-0\/\">\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u4f5c\u6210<\/a><\/li>\n<\/ul>\n<p>WordPress\u306e\u958b\u767a\u3092\u59cb\u3081\u305f\u3070\u304b\u308a\u3067\u3042\u308c\u3070\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306e\u57fa\u672c\u7684\u306a\u30b3\u30f3\u30bb\u30d7\u30c8\u306e\u7406\u89e3\u3082\u6b20\u304b\u305b\u307e\u305b\u3093\u3002\u4ee5\u4e0b\u306e\u30ea\u30bd\u30fc\u30b9\u3092\u5b66\u7fd2\u306b\u304a\u5f79\u7acb\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/jp\/ebooks\/wordpress\/wordpress-local-development\/\">WordPress\u3092\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u65b9\u6cd5<\/a>\uff08\u7121\u6599\u96fb\u5b50\u66f8\u7c4d\uff09<\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/ebooks\/wordpress\/managed-wordpress-hosting\/\">WordPress\u5c02\u7528\u30de\u30cd\u30fc\u30b8\u30c9\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d0\u30fc\u306e\u672c\u5f53\u306e\u4fa1\u5024<\/a>\uff08\u7121\u6599\u96fb\u5b50\u66f8\u7c4d\uff09<\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/what-is-javascript\/\">JavaScript\u3068\u306f<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/blog\/html-vs-html5\/\">HTML\u5bfeHTML5<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/wordpress-css\/\">WordPress\u3067CSS\u3092\u7de8\u96c6\u3059\u308b\u65b9\u6cd5<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/jp\/blog\/what-is-php\/\">PHP\u3068\u306f<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/blog\/wordpress-hooks\/\">WordPress\u30d5\u30c3\u30af\u3068\u306f<\/a><\/li>\n<\/ul>\n<p>\u307e\u305f\u3001\u3053\u306e\u8a18\u4e8b\u3067\u53d6\u308a\u4e0a\u3052\u305f\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u306f<a href=\"https:\/\/gist.github.com\/carlodaniele\/8166f014e10d55fdb8dd75b99dfe3d14\">Gist\u3067\u516c\u958b<\/a>\u3055\u308c\u3066\u3044\u307e\u3059\u306e\u3067\u3001\u305c\u3072\u3054\u6d3b\u7528\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>Gutenberg\u30d6\u30ed\u30c3\u30af\u3092\u958b\u767a\u3057\u305f\u3053\u3068\u306f\u3042\u308a\u307e\u3059\u304b\uff1f\u3053\u308c\u307e\u3067\u306b\u3069\u306e\u3088\u3046\u306a\u554f\u984c\u306b\u906d\u9047\u3055\u308c\u307e\u3057\u305f\u304b\uff1f<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u591a\u304f\u306e\u958b\u767a\u8005\u304c\u3001Gutenberg\u306e\u30d6\u30ed\u30c3\u30af\u3084\u30a2\u30d7\u30ea &#8230;<\/p>\n","protected":false},"author":36,"featured_media":37622,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[360,288,56],"topic":[],"class_list":["post-37621","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-block-editor","tag-development","tag-gutenberg"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gutenberg\u30d6\u30ed\u30c3\u30af\u958b\u767a\u5fb9\u5e95\u89e3\u8aac<\/title>\n<meta name=\"description\" content=\"Gutenberg\u306e\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306f\u7fd2\u5f97\u304c\u96e3\u3057\u3044\u3068\u601d\u308f\u308c\u304c\u3061\u3067\u3059\u304c\u3001\u610f\u5916\u3068\u305d\u3046\u3067\u3082\u3042\u308a\u307e\u305b\u3093\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001Gutenberg\u3067\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gutenberg\u30d6\u30ed\u30c3\u30af\u958b\u767a\u5fb9\u5e95\u89e3\u8aac\" \/>\n<meta property=\"og:description\" content=\"Gutenberg\u306e\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306f\u7fd2\u5f97\u304c\u96e3\u3057\u3044\u3068\u601d\u308f\u308c\u304c\u3061\u3067\u3059\u304c\u3001\u610f\u5916\u3068\u305d\u3046\u3067\u3082\u3042\u308a\u307e\u305b\u3093\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001Gutenberg\u3067\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Japan-334616080691171\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-04T13:27:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-08T08:39:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2022\/10\/Gutenberg-blocks_Blog_cover.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Gutenberg\u306e\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306f\u7fd2\u5f97\u304c\u96e3\u3057\u3044\u3068\u601d\u308f\u308c\u304c\u3061\u3067\u3059\u304c\u3001\u610f\u5916\u3068\u305d\u3046\u3067\u3082\u3042\u308a\u307e\u305b\u3093\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001Gutenberg\u3067\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2022\/10\/Gutenberg-blocks_Blog_cover.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_JP\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"23\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Gutenberg\u30d6\u30ed\u30c3\u30af\u958b\u767a\u5fb9\u5e95\u89e3\u8aac\",\"datePublished\":\"2022-10-04T13:27:32+00:00\",\"dateModified\":\"2023-06-08T08:39:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/\"},\"wordCount\":1007,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/jp\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2022\/10\/Gutenberg-blocks_Blog_cover.png\",\"keywords\":[\"Block Editor\",\"development\",\"Gutenberg\"],\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/\",\"url\":\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/\",\"name\":\"Gutenberg\u30d6\u30ed\u30c3\u30af\u958b\u767a\u5fb9\u5e95\u89e3\u8aac\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/jp\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2022\/10\/Gutenberg-blocks_Blog_cover.png\",\"datePublished\":\"2022-10-04T13:27:32+00:00\",\"dateModified\":\"2023-06-08T08:39:47+00:00\",\"description\":\"Gutenberg\u306e\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306f\u7fd2\u5f97\u304c\u96e3\u3057\u3044\u3068\u601d\u308f\u308c\u304c\u3061\u3067\u3059\u304c\u3001\u610f\u5916\u3068\u305d\u3046\u3067\u3082\u3042\u308a\u307e\u305b\u3093\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001Gutenberg\u3067\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2022\/10\/Gutenberg-blocks_Blog_cover.png\",\"contentUrl\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2022\/10\/Gutenberg-blocks_Blog_cover.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/jp\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gutenberg\u30d6\u30ed\u30c3\u30af\u958b\u767a\u5fb9\u5e95\u89e3\u8aac\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/jp\/#website\",\"url\":\"https:\/\/kinsta.com\/jp\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"\u9ad8\u901f\u304b\u3064\u5805\u7262\u306a\u30d7\u30ec\u30df\u30a2\u30e0\u30b5\u30fc\u30d0\u30fc\u30b5\u30fc\u30d3\u30b9\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/jp\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/jp\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/jp\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/jp\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Japan-334616080691171\/\",\"https:\/\/x.com\/Kinsta_JP\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/jp\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Gutenberg\u30d6\u30ed\u30c3\u30af\u958b\u767a\u5fb9\u5e95\u89e3\u8aac","description":"Gutenberg\u306e\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306f\u7fd2\u5f97\u304c\u96e3\u3057\u3044\u3068\u601d\u308f\u308c\u304c\u3061\u3067\u3059\u304c\u3001\u610f\u5916\u3068\u305d\u3046\u3067\u3082\u3042\u308a\u307e\u305b\u3093\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001Gutenberg\u3067\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/","og_locale":"ja_JP","og_type":"article","og_title":"Gutenberg\u30d6\u30ed\u30c3\u30af\u958b\u767a\u5fb9\u5e95\u89e3\u8aac","og_description":"Gutenberg\u306e\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306f\u7fd2\u5f97\u304c\u96e3\u3057\u3044\u3068\u601d\u308f\u308c\u304c\u3061\u3067\u3059\u304c\u3001\u610f\u5916\u3068\u305d\u3046\u3067\u3082\u3042\u308a\u307e\u305b\u3093\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001Gutenberg\u3067\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002","og_url":"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Japan-334616080691171\/","article_published_time":"2022-10-04T13:27:32+00:00","article_modified_time":"2023-06-08T08:39:47+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2022\/10\/Gutenberg-blocks_Blog_cover.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Gutenberg\u306e\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306f\u7fd2\u5f97\u304c\u96e3\u3057\u3044\u3068\u601d\u308f\u308c\u304c\u3061\u3067\u3059\u304c\u3001\u610f\u5916\u3068\u305d\u3046\u3067\u3082\u3042\u308a\u307e\u305b\u3093\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001Gutenberg\u3067\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002","twitter_image":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2022\/10\/Gutenberg-blocks_Blog_cover.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_JP","twitter_misc":{"\u57f7\u7b46\u8005":"Carlo Daniele","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"23\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/jp\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Gutenberg\u30d6\u30ed\u30c3\u30af\u958b\u767a\u5fb9\u5e95\u89e3\u8aac","datePublished":"2022-10-04T13:27:32+00:00","dateModified":"2023-06-08T08:39:47+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/"},"wordCount":1007,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/jp\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2022\/10\/Gutenberg-blocks_Blog_cover.png","keywords":["Block Editor","development","Gutenberg"],"inLanguage":"ja","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/","url":"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/","name":"Gutenberg\u30d6\u30ed\u30c3\u30af\u958b\u767a\u5fb9\u5e95\u89e3\u8aac","isPartOf":{"@id":"https:\/\/kinsta.com\/jp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2022\/10\/Gutenberg-blocks_Blog_cover.png","datePublished":"2022-10-04T13:27:32+00:00","dateModified":"2023-06-08T08:39:47+00:00","description":"Gutenberg\u306e\u30d6\u30ed\u30c3\u30af\u958b\u767a\u306f\u7fd2\u5f97\u304c\u96e3\u3057\u3044\u3068\u601d\u308f\u308c\u304c\u3061\u3067\u3059\u304c\u3001\u610f\u5916\u3068\u305d\u3046\u3067\u3082\u3042\u308a\u307e\u305b\u3093\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001Gutenberg\u3067\u30d6\u30ed\u30c3\u30af\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002","breadcrumb":{"@id":"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#primaryimage","url":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2022\/10\/Gutenberg-blocks_Blog_cover.png","contentUrl":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2022\/10\/Gutenberg-blocks_Blog_cover.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/jp\/blog\/gutenberg-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/jp\/"},{"@type":"ListItem","position":2,"name":"Gutenberg\u30d6\u30ed\u30c3\u30af\u958b\u767a\u5fb9\u5e95\u89e3\u8aac"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/jp\/#website","url":"https:\/\/kinsta.com\/jp\/","name":"Kinsta\u00ae","description":"\u9ad8\u901f\u304b\u3064\u5805\u7262\u306a\u30d7\u30ec\u30df\u30a2\u30e0\u30b5\u30fc\u30d0\u30fc\u30b5\u30fc\u30d3\u30b9","publisher":{"@id":"https:\/\/kinsta.com\/jp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/jp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/jp\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/jp\/","logo":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/kinsta.com\/jp\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/jp\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Japan-334616080691171\/","https:\/\/x.com\/Kinsta_JP","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/jp\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/kinsta.com\/jp\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/jp\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/posts\/37621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/comments?post=37621"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/posts\/37621\/revisions"}],"predecessor-version":[{"id":46482,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/posts\/37621\/revisions\/46482"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/37621\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/37621\/translations\/fr"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/37621\/translations\/es"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/37621\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/37621\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/37621\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/37621\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/37621\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/37621\/translations\/dk"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/37621\/translations\/se"},{"href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/37621\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/media\/37622"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/media?parent=37621"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/tags?post=37621"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/topic?post=37621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}