{"id":228584,"date":"2022-10-18T17:16:00","date_gmt":"2022-10-18T14:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228584"},"modified":"2022-11-09T03:08:16","modified_gmt":"2022-11-09T00:08:16","slug":"stvorit-storinku-nalashtuvan-za-dopomogoju-komponentiv-wordpress-block-editor-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/uk\/stvorit-storinku-nalashtuvan-za-dopomogoju-komponentiv-wordpress-block-editor-gutenberg\/","title":{"rendered":"\u0421\u0442\u0432\u043e\u0440\u0456\u0442\u044c \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 WordPress Block Editor (Gutenberg)."},"content":{"rendered":"\n<p>\u0420\u0430\u043d\u0456\u0448\u0435 \u043c\u0438 \u0440\u043e\u0437\u0433\u043b\u044f\u0434\u0430\u043b\u0438 <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438 \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u043d\u043d\u044f \u0442\u0430 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0431\u043b\u043e\u043a\u0456\u0432 WordPress (Gutenberg)<\/a> \u0456 <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0440\u043e\u0437\u0448\u0438\u0440\u0435\u043d\u043d\u044f \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u044e \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0431\u043b\u043e\u043a\u0443, \u0449\u043e\u0431 \u0434\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u0438 \u0434\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0456 \u043a\u0456\u043d\u0446\u0435\u0432\u0456 \u0442\u043e\u0447\u043a\u0438<\/a>. \u0423 \u0446\u044c\u043e\u043c\u0443 \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0443 \u043c\u0438 \u043e\u0431&#8217;\u0454\u0434\u043d\u0430\u0454\u043c\u043e \u0457\u0445 \u0443\u0441\u0456\u0445, \u0449\u043e\u0431 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 Gutenberg.<\/p>\n<p>\u0421\u0442\u043e\u0440\u0456\u043d\u043a\u0430 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c, \u044f\u043a\u0443 \u043c\u0438 \u0437\u0431\u0438\u0440\u0430\u0454\u043c\u043e\u0441\u044f \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438<\/p>\n<p>\u0410\u043b\u0435 \u043f\u043e-\u043f\u0435\u0440\u0448\u0435, \u0437\u0430\u0441\u043b\u0443\u0433\u0430 \u0442\u0430\u043c, \u0434\u0435 \u0446\u0435 \u043d\u0430\u043b\u0435\u0436\u043d\u0435, \u043d\u0430\u0442\u0445\u043d\u0435\u043d\u043d\u044f\u043c \u0434\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0430 \u0454 \u0441\u0442\u0430\u0442\u0442\u044f \u0425\u0430\u0440\u0434\u0456\u043f\u0430 \u0410\u0441\u0440\u0430\u043d\u0456 \u043f\u0440\u043e \u043a\u043e\u0434 \u0443 WP: <a href=\"https:\/\/www.codeinwp.com\/blog\/plugin-options-page-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u00ab\u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0456\u0432 \u043f\u043b\u0430\u0433\u0456\u043d\u0430\u00bb \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 Gutenberg<\/a>.<\/p>\n<h2>\u043f\u0435\u0440\u0435\u0434\u0443\u043c\u043e\u0432\u0438<\/h2>\n<ul>\n<li>\u0414\u043e\u0442\u0440\u0438\u043c\u0443\u0439\u0442\u0435\u0441\u044c \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0430 \u00ab<a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0421\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043f\u043b\u0430\u0433\u0456\u043d\u0430 \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0431\u043b\u043e\u043a\u0456\u0432 WordPress\u00bb (Gutenberg).<\/a><\/li>\n<li>\u0414\u043e\u0442\u0440\u0438\u043c\u0443\u0439\u0442\u0435\u0441\u044c \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0430 \u00ab<a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0456\u0432 \u0434\u043b\u044f \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u043d\u043d\u044f \u0434\u0430\u043d\u0438\u0445 \u0443 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0456 \u0431\u043b\u043e\u043a\u0456\u0432 WordPress\u00bb (Gutenberg).<\/a><\/li>\n<li>\u0414\u043e\u0442\u0440\u0438\u043c\u0443\u0439\u0442\u0435\u0441\u044c \u0456\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0456\u0439 \u0456\u0437 \u0434\u043e\u0434\u0430\u0432\u0430\u043d\u043d\u044f \u0442\u043e\u0447\u043e\u043a \u0432\u0445\u043e\u0434\u0443 \u0434\u043e \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0430 <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0437\u0456 \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u044e \u0431\u043b\u043e\u043a\u0443 WordPress<\/a><\/li>\n<\/ul>\n<h2>\u0421\u0442\u0432\u043e\u0440\u0456\u0442\u044c \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c \u0443 PHP<\/h2>\n<p>\u0414\u043e\u0442\u0440\u0438\u043c\u0443\u044e\u0447\u0438\u0441\u044c \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0456\u0432 \u0443 \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u0456\u0445 \u0432\u0438\u043c\u043e\u0433\u0430\u0445, \u0432\u0456\u0434\u043a\u0440\u0438\u0439\u0442\u0435 \u043a\u043e\u0440\u0435\u043d\u0435\u0432\u0438\u0439 \u0444\u0430\u0439\u043b PHP \u043f\u043b\u0430\u0433\u0456\u043d\u0430 (\u0443 \u0446\u044c\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 <code>wholesome-plugin.php<\/code>) \u0456 \u0434\u043e\u0434\u0430\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0435:<\/p>\n<h3>\u0417\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0439\u0442\u0435 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f<\/h3>\n<p>\u042f\u043a \u0456 \u0432 <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0443 \u0437 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0456\u0432 \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u043d\u043d\u044f \u0434\u0430\u043d\u0438\u0445<\/a>, \u0434\u043e\u0434\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0456 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438 \u0434\u043e \u0444\u0430\u0439\u043b\u0443:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_settings() {\n    register_setting(\n        'wholesomecode_wholesome_plugin_settings',\n        'wholesomecode_wholesome_plugin_example_select',\n        [\n            'default'      =&gt; '',\n            'show_in_rest' =&gt; true,\n            'type'         =&gt; 'string',\n        ]\n    );\n\n    register_setting(\n        'wholesomecode_wholesome_plugin_settings',\n        'wholesomecode_wholesome_plugin_example_text',\n        [\n            'default'      =&gt; '',\n            'show_in_rest' =&gt; true,\n            'type'         =&gt; 'string',\n        ]\n    );\n\n    register_setting(\n        'wholesomecode_wholesome_plugin_settings',\n        'wholesomecode_wholesome_plugin_example_text_2',\n        [\n            'default'      =&gt; '',\n            'show_in_rest' =&gt; true,\n            'type'         =&gt; 'string',\n        ]\n    );\n\n    register_setting(\n        'wholesomecode_wholesome_plugin_settings',\n        'wholesomecode_wholesome_plugin_example_text_3',\n        [\n            'default'      =&gt; '',\n            'show_in_rest' =&gt; true,\n            'type'         =&gt; 'string',\n        ]\n    );\n\n    register_setting(\n        'wholesomecode_wholesome_plugin_settings',\n        'wholesomecode_wholesome_plugin_example_toggle',\n        [\n            'default'      =&gt; '',\n            'show_in_rest' =&gt; true,\n            'type'         =&gt; 'string',\n        ]\n    );\n}\nadd_action( 'init', 'wholesomecode_wholesome_plugin_register_settings', 10 );\n<\/code><\/pre>\n<p>\u0417\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0439\u0442\u0435 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f, \u0434\u043e \u044f\u043a\u0438\u0445 \u043c\u0438 \u043c\u0430\u0442\u0438\u043c\u0435\u043c\u043e \u0434\u043e\u0441\u0442\u0443\u043f \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u0446\u0456 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c. \u041e\u0431\u043e\u0432\u2019\u044f\u0437\u043a\u043e\u0432\u043e \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u0456\u0442\u044c <code>show_in_rest<\/code>\u0434\u043b\u044f <code>true<\/code>\u043a\u043e\u0436\u043d\u043e\u0433\u043e \u0437 \u043d\u0438\u0445, \u0449\u043e\u0431 \u0434\u043e \u043d\u0438\u0445 \u043c\u043e\u0436\u043d\u0430 \u0431\u0443\u043b\u043e \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u0434\u043e\u0441\u0442\u0443\u043f \u0447\u0435\u0440\u0435\u0437 Gutenberg.<\/p>\n<h3>\u0417\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0439\u0442\u0435 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c<\/h3>\n<p>\u0414\u043e\u0434\u0430\u0439\u0442\u0435 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0443 \u0434\u043b\u044f \u0440\u0435\u0454\u0441\u0442\u0440\u0430\u0446\u0456\u0457 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_settings_page() {\n    add_options_page(\n        __( 'Wholesome Plugin Settings', 'wholesome-plugin' ),\n        __( 'Wholesome Plugin Settings', 'wholesome-plugin' ),\n        'manage_options',\n        'wholesome_plugin_settings',\n        function() {\n            ?&gt;\n            &lt;div id=\"wholesome-plugin-settings\"&gt;&lt;\/div&gt;\n            &lt;?php\n        },\n    );\n}\nadd_action( 'admin_menu', 'wholesomecode_wholesome_plugin_settings_page', 10 );\n<\/code><\/pre>\n<p>\u041d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0439 \u0432\u0438\u0449\u0435 \u043a\u043e\u0434 \u0434\u043e\u0434\u0430\u0454 \u043d\u043e\u0432\u0443 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u0434\u043e \u043c\u0435\u043d\u044e \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c. \u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443, \u0449\u043e \u0432\u0441\u0435, \u0449\u043e \u0432\u0456\u043d \u0440\u043e\u0431\u0438\u0442\u044c, \u0446\u0435 \u0432\u0438\u0432\u043e\u0434\u0438\u0442\u044c a <code>&lt;div&gt;<\/code>, \u0446\u0435 \u0442\u0435, \u0449\u043e \u043c\u0438 \u0431\u0443\u0434\u0435\u043c\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0434\u043b\u044f \u0432\u0456\u0437\u0443\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u0457 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 Gutenberg \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0456 React.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168686-61e7f0058b713.png\" alt=\"\u0421\u0442\u0432\u043e\u0440\u0456\u0442\u044c \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 WordPress Block Editor (Gutenberg).\" \/>\u041f\u0443\u043d\u043a\u0442 \u043c\u0435\u043d\u044e \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c<\/p>\n<h3>\u041f\u043e\u0441\u0442\u0430\u0432\u0442\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0438 \u0430\u0434\u043c\u0456\u043d\u0456\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430 \u0432 \u0447\u0435\u0440\u0433\u0443<\/h3>\n<p>\u0429\u043e\u0431 \u043e\u0442\u0440\u0438\u043c\u0430\u0442\u0438 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0438\u0439 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0443, \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0432\u0438\u043a\u043e\u043d\u0430\u0442\u0438 \u0432\u0441\u0456 \u043a\u0440\u043e\u043a\u0438 \u0432 \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0443 \u00ab<a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0414\u043e\u0434\u0430\u0442\u0438 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0443 \u0434\u043e \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u044e \u0431\u043b\u043e\u043a\u0443 \u00bb.<\/a> \u041f\u0435\u0440\u0435\u043a\u043e\u043d\u0430\u0439\u0442\u0435\u0441\u044f, \u0449\u043e \u0432\u0438 \u0432\u0438\u043a\u043e\u043d\u0430\u043b\u0438 \u0432\u0441\u0456 \u043a\u0440\u043e\u043a\u0438 \u0432 \u0446\u044c\u043e\u043c\u0443 \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0443 \u043f\u0435\u0440\u0435\u0434 \u0446\u0438\u043c \u043a\u0440\u043e\u043a\u043e\u043c, \u0430 \u043f\u043e\u0442\u0456\u043c \u043f\u043e\u0432\u0435\u0440\u043d\u0456\u0442\u044c\u0441\u044f \u0442\u0430 \u0432\u0438\u043a\u043e\u043d\u0430\u0439\u0442\u0435 \u0440\u0435\u0448\u0442\u0443 \u0446\u044c\u043e\u0433\u043e \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0430.<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_admin_scripts() {\n    $dir = __DIR__;\n\n    $script_asset_path = \"$dir\/build\/admin.asset.php\";\n    if (! file_exists( $script_asset_path)) {\n        throw new Error(\n            'You need to run `npm start` or `npm run build` for the \"wholesomecode\/wholesome-plugin\" block first.'\n        );\n    }\n    $admin_js     = 'build\/admin.js';\n    $script_asset = require( $script_asset_path );\n    wp_enqueue_script(\n        'wholesomecode-wholesome-plugin-admin-editor',\n        plugins_url( $admin_js, __FILE__ ),\n        $script_asset['dependencies'],\n        $script_asset['version']\n    );\n    wp_set_script_translations( 'wholesomecode-wholesome-plugin-block-editor', 'wholesome-plugin' );\n\n    $admin_css = 'build\/admin.css';\n    wp_enqueue_style(\n        'wholesomecode-wholesome-plugin-admin',\n        plugins_url( $admin_css, __FILE__ ),\n        ['wp-components'],\n        filemtime( \"$dir\/$admin_css\") );\n}\nadd_action( 'admin_enqueue_scripts', 'wholesomecode_wholesome_plugin_admin_scripts', 10 );\n<\/code><\/pre>\n<h2>\u0421\u0442\u0432\u043e\u0440\u0456\u0442\u044c \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u0430\u0434\u043c\u0456\u043d\u0456\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430 \u0432 JavaScript<\/h2>\n<p>\u042f\u043a\u0449\u043e \u0432\u0438 \u0432\u0438\u043a\u043e\u043d\u0430\u043b\u0438 \u0432\u0441\u0456 \u043a\u0440\u043e\u043a\u0438 \u0432 \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0443 \u00ab<a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0414\u043e\u0434\u0430\u0442\u0438 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0443 \u0434\u043e \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u044e \u0431\u043b\u043e\u043a\u0443<\/a> \u00bb, \u0443 \u0432\u0430\u0441 \u043c\u0430\u0454 \u0431\u0443\u0442\u0438 <code>\/src\/admin.js<\/code>\u0444\u0430\u0439\u043b. \u0412\u0456\u0434\u043a\u0440\u0438\u0439\u0442\u0435 \u0446\u0435\u0439 \u0444\u0430\u0439\u043b \u0456 \u0432\u0438\u0434\u0430\u043b\u0456\u0442\u044c \u0439\u043e\u0433\u043e \u0432\u043c\u0456\u0441\u0442.<\/p>\n<h3>\u0412\u0456\u0434\u043e\u0431\u0440\u0430\u0437\u0456\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/h3>\n<p>\u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0438 <code>npm start<\/code>\u0443 \u0441\u0432\u043e\u0454\u043c\u0443 \u0442\u0435\u0440\u043c\u0456\u043d\u0430\u043b\u0456 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u043e \u0434\u043e <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0430 \u0437\u0456 \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043f\u043b\u0430\u0433\u0456\u043d\u0430<\/a> \u0442\u0430 \u0434\u043e\u0434\u0430\u0442\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0435 \u043d\u0438\u0436\u0447\u0435 \u0434\u043e \u0441\u0432\u043e\u0433\u043e <code>\/src\/admin.js<\/code>\u0444\u0430\u0439\u043b\u0443.<\/p>\n<pre><code>import '.\/admin.scss';\nimport { Icon } from '@wordpress\/components';\nimport {\n    Fragment,\n    render,\n    Component,\n} from '@wordpress\/element';\nimport { __ } from '@wordpress\/i18n';\n\nclass App extends Component {\n    constructor() {\n        super( ...arguments );\n    }\n\n    render() {\n        return (&lt;Fragment&gt;\n                &lt;div className=\"wholesome-plugin__header\"&gt;\n                    &lt;div className=\"wholesome-plugin__container\"&gt;\n                        &lt;div className=\"wholesome-plugin__title\"&gt;\n                            &lt;h1&gt;{ __( 'Wholesome Plugin Settings', 'wholesome-plugin') } &lt;Icon icon=\"admin-plugins\" \/&gt;&lt;\/h1&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n                &lt;div className=\"wholesome-plugin__main\"&gt;&lt;\/div&gt;\n            &lt;\/Fragment&gt;) }\n}\n\ndocument.addEventListener( 'DOMContentLoaded',() =&gt; {\n    const htmlOutput = document.getElementById( 'wholesome-plugin-settings' );\n\n    if (htmlOutput) {\n        render(\n            &lt;App \/&gt;,\n            htmlOutput\n        );\n    }\n});\n<\/code><\/pre>\n<p>\u042f\u043a\u0449\u043e \u0432\u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u0442\u0435 \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c \u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0456, \u0432\u0438 \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0435 \u0442\u0430\u043a\u0435:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168686-61e7f00682524.png\" alt=\"\u0421\u0442\u0432\u043e\u0440\u0456\u0442\u044c \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 WordPress Block Editor (Gutenberg).\" \/>\u0412\u0456\u0434\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 \u043d\u0430 \u0435\u043a\u0440\u0430\u043d\u0456 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c<\/p>\n<h3>\u0414\u043e\u0434\u0430\u0439\u0442\u0435 \u043f\u043e\u043b\u044f \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c<\/h3>\n<p>\u041f\u0430\u043c\u2019\u044f\u0442\u0430\u0454\u0442\u0435 \u0434\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0456 \u043a\u0440\u043e\u043a\u0438 \u0432 \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0443 \u00ab\u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0456\u0432 \u0434\u043b\u044f \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u043d\u043d\u044f \u0434\u0430\u043d\u0438\u0445\u00bb? \u0429\u043e \u0436, \u043c\u0438 \u043c\u0430\u0439\u0436\u0435 \u0434\u043e\u0441\u043b\u0456\u0432\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u043c\u043e \u0457\u0445 \u0443 \u0446\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0442\u043e\u0436 \u0443 \u0432\u0430\u0441 \u043c\u0430\u0454 \u0432\u0438\u0439\u0442\u0438 \u043a\u043e\u0434, \u044f\u043a\u0438\u0439 \u0432\u0438\u0433\u043b\u044f\u0434\u0430\u0454 \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code>import '.\/admin.scss';\n\nimport api from '@wordpress\/api';\n\nimport {\n    Button,\n    Icon,\n    Panel,\n    PanelBody,\n    PanelRow,\n    Placeholder,\n    SelectControl,\n    Spinner,\n    TextControl,\n    ToggleControl,\n} from '@wordpress\/components';\n\nimport {\n    Fragment,\n    render,\n    Component,\n} from '@wordpress\/element';\n\nimport { __ } from '@wordpress\/i18n';\n\nclass App extends Component {\n    constructor() {\n        super( ...arguments );\n\n        this.state = {\n            exampleSelect: '',\n            exampleText: '',\n            exampleText2: '',\n            exampleText3: '',\n            exampleToggle: false,\n            isAPILoaded: false,\n        };\n    }\n\n    componentDidMount() {\n\n        api.loadPromise.then(() =&gt; {\n            this.settings = new api.models.Settings();\n\n            const { isAPILoaded } = this.state;\n\n            if (isAPILoaded === false) {\n                this.settings.fetch().then( (response) =&gt; {\n                    this.setState( {\n                        exampleSelect: response[ 'wholesomecode_wholesome_plugin_example_select' ],\n                        exampleText: response[ 'wholesomecode_wholesome_plugin_example_text' ],\n                        exampleText2: response[ 'wholesomecode_wholesome_plugin_example_text_2' ],\n                        exampleText3: response[ 'wholesomecode_wholesome_plugin_example_text_3' ],\n                        exampleToggle: Boolean( response[ 'wholesomecode_wholesome_plugin_example_toggle' ] ),\n                        isAPILoaded: true,\n                    } );\n                } );\n            }\n        } );\n    }\n\n    render() {\n        const {\n            exampleSelect,\n            exampleText,\n            exampleText2,\n            exampleText3,\n            exampleToggle,\n            isAPILoaded,\n        } = this.state;\n\n        if (! isAPILoaded) {\n            return (&lt;Placeholder&gt;\n                    &lt;Spinner \/&gt;\n                &lt;\/Placeholder&gt;\n            );\n        }\n\n        return (&lt;Fragment&gt;\n                &lt;div className=\"wholesome-plugin__header\"&gt;\n                    &lt;div className=\"wholesome-plugin__container\"&gt;\n                        &lt;div className=\"wholesome-plugin__title\"&gt;\n                            &lt;h1&gt;{ __( 'Wholesome Plugin Settings', 'wholesome-plugin') } &lt;Icon icon=\"admin-plugins\" \/&gt;&lt;\/h1&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                &lt;div className=\"wholesome-plugin__main\"&gt;\n                    &lt;Panel&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body One', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;SelectControl\n                                help={ __( 'An example dropdown field.', 'wholesome-plugin') }\n                                label={ __( 'Example Select', 'wholesome-plugin') }\n                                onChange={ (exampleSelect) =&gt; this.setState( { exampleSelect }) }\n                                options={ [\n                                    {\n                                        label: __( 'Please Select...', 'wholesome-plugin' ),\n                                        value: '',\n                                    },\n                                    {\n                                        label: __( 'Option 1', 'wholesome-plugin' ),\n                                        value: 'option-1',\n                                    },\n                                    {\n                                        label: __( 'Option 2', 'wholesome-plugin' ),\n                                        value: 'option-2',\n                                    },\n                                ] }\n                                value={ exampleSelect }\n                            \/&gt;\n                        &lt;\/PanelBody&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body Two', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;TextControl\n                                help={ __( 'This is an example text field.', 'wholesome-plugin') }\n                                label={ __( 'Example Text', 'wholesome-plugin') }\n                                onChange={ (exampleText) =&gt; this.setState( { exampleText }) }\n                                value={ exampleText }\n                            \/&gt;\n\n                        &lt;\/PanelBody&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body Three', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;PanelRow&gt;\n                                &lt;TextControl\n                                    help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }\n                                    label={ __( 'Example Text 2', 'wholesome-plugin') }\n                                    onChange={ (exampleText2) =&gt; this.setState( { exampleText2 }) }\n                                    value={ exampleText2 }\n                                \/&gt;\n                                &lt;TextControl\n                                    help={ __( 'This control is inline.', 'wholesome-plugin') }\n                                    label={ __( 'Example Text 3', 'wholesome-plugin') }\n                                    onChange={ (exampleText3) =&gt; this.setState( { exampleText3 }) }\n                                    value={ exampleText3 }\n                                \/&gt;\n                            &lt;\/PanelRow&gt;\n                        &lt;\/PanelBody&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body Four', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;ToggleControl\n                                checked={ exampleToggle }\n                                help={ __( 'An example toggle.', 'wholesome-plugin') }\n                                label={ __( 'Example Toggle', 'wholesome-plugin') }\n                                onChange={ (exampleToggle) =&gt; this.setState( { exampleToggle }) }\n                            \/&gt;\n                        &lt;\/PanelBody&gt;\n                        &lt;Button\n                            isPrimary\n                            isLarge\n                            onClick={ () =&gt; {}}\n                        &gt;\n                            { __( 'Save', 'wholesome-plugin') }\n                        &lt;\/Button&gt;\n                    &lt;\/Panel&gt;\n                &lt;\/div&gt;\n            &lt;\/Fragment&gt;) }\n}\n\ndocument.addEventListener( 'DOMContentLoaded', () =&gt; {\n    const htmlOutput = document.getElementById( 'wholesome-plugin-settings' );\n\n    if (htmlOutput) {\n        render(\n            &lt;App \/&gt;,\n            htmlOutput\n        );\n    }\n});\n<\/code><\/pre>\n<p>\u041a\u0440\u0456\u043c \u0432\u0438\u0434\u0430\u043b\u0435\u043d\u043d\u044f <code>subscribe<\/code>in <code>componentDidMount<\/code>, \u044f\u043a\u0438\u0439 \u043c\u0438 \u0440\u0430\u043d\u0456\u0448\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u043b\u0438 \u0434\u043b\u044f \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u0432 \u0446\u044c\u043e\u043c\u0443 \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0443, \u0456 \u0434\u043e\u0434\u0430\u0432\u0430\u043d\u043d\u044f \u043a\u043d\u043e\u043f\u043a\u0438, \u043a\u043e\u0434 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u043e \u043a\u043e\u043f\u0456\u044e\u0454\u0442\u044c\u0441\u044f \u0442\u0430 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0454\u0442\u044c\u0441\u044f.<\/p>\n<p>\u042f\u043a\u0449\u043e \u0432\u0441\u0435 \u0434\u043e\u0431\u0440\u0435, \u043d\u0430\u0448\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0430 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c \u0442\u0435\u043f\u0435\u0440 \u043c\u0430\u0454 \u0432\u0438\u0433\u043b\u044f\u0434\u0430\u0442\u0438 \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168686-61e7f007658c6.png\" alt=\"\u0421\u0442\u0432\u043e\u0440\u0456\u0442\u044c \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 WordPress Block Editor (Gutenberg).\" \/>\u0412\u0456\u0437\u0443\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u044f \u043f\u043e\u043b\u0456\u0432 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c<\/p>\n<p>\u041d\u0435 \u0445\u0432\u0438\u043b\u044e\u0439\u0442\u0435\u0441\u044f, \u043c\u0438 \u043e\u0447\u0438\u0441\u0442\u0438\u043c\u043e \u0441\u0442\u0438\u043b\u0456 \u0432 \u0440\u043e\u0437\u0434\u0456\u043b\u0456 4 \u0446\u044c\u043e\u0433\u043e \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0430.<\/p>\n<h3>\u041e\u0431\u0440\u043e\u0431\u043a\u0430 \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f<\/h3>\n<p>\u0412 <code>onClick<\/code>\u043e\u0431\u0440\u043e\u0431\u043d\u0438\u043a\u0443 <code>&lt;button&gt;<\/code>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043e\u0434\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code>&lt;Button\n  isPrimary\n  isLarge\n  onClick={ () =&gt; {\n    const {\n      exampleSelect,\n      exampleText,\n      exampleText2,\n      exampleText3,\n      exampleToggle,\n    } = this.state;\n\n    const settings = new api.models.Settings( {\n      [ 'wholesomecode_wholesome_plugin_example_select' ]: exampleSelect,\n      [ 'wholesomecode_wholesome_plugin_example_text' ]: exampleText,\n      [ 'wholesomecode_wholesome_plugin_example_text_2' ]: exampleText2,\n      [ 'wholesomecode_wholesome_plugin_example_text_3' ]: exampleText3,\n      [ 'wholesomecode_wholesome_plugin_example_toggle' ]: exampleToggle? 'true': '',\n    } );\n    settings.save();\n  }}\n  &gt;\n  { __( 'Save', 'wholesome-plugin') }\n&lt;\/Button&gt;\n<\/code><\/pre>\n<p>\u0426\u0435 \u0437\u0431\u0435\u0440\u0435\u0436\u0435 \u043d\u0430\u0448\u0456 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438 \u0442\u0430 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043f\u0456\u0441\u043b\u044f \u043d\u0430\u0442\u0438\u0441\u043a\u0430\u043d\u043d\u044f \u043a\u043d\u043e\u043f\u043a\u0438. \u041e\u0434\u043d\u0430\u043a \u043d\u0435\u043c\u0430\u0454 \u043e\u0437\u043d\u0430\u043a \u0442\u043e\u0433\u043e, \u0449\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438 \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043e \u0437\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c.<\/p>\n<h3>\u0421\u0442\u0432\u043e\u0440\u0456\u0442\u044c \u0441\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u043d\u044f<\/h3>\n<p>\u0429\u043e\u0431 \u043d\u0430\u0434\u0430\u0442\u0438 \u043d\u0430\u0448\u043e\u043c\u0443 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0435\u0432\u0456 \u0434\u0435\u044f\u043a\u0438\u0439 \u0432\u0456\u0434\u0433\u0443\u043a \u043f\u0440\u043e \u0442\u0435, \u0449\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438 \u0442\u0430 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043f\u0440\u043e\u0432\u0430\u0434\u0438\u043c\u043e \u0441\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u043d\u044f \u00ab\u043f\u0430\u043d\u0435\u043b\u0456 \u0448\u0432\u0438\u0434\u043a\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0443\u00bb. \u0426\u0435 \u0442\u0435 \u0441\u0430\u043c\u0435 \u0441\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u043d\u044f, \u044f\u043a\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f \u043d\u0430 \u0433\u043e\u043b\u043e\u0432\u043d\u043e\u043c\u0443 \u0435\u043a\u0440\u0430\u043d\u0456 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043f\u0443\u0431\u043b\u0456\u043a\u0430\u0446\u0456\u0439, \u044f\u043a\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0431\u043b\u043e\u043a\u0456\u0432, \u043a\u043e\u043b\u0438 \u043f\u0443\u0431\u043b\u0456\u043a\u0430\u0446\u0456\u044e \u0431\u0443\u043b\u043e \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043e.<\/p>\n<p>\u0429\u043e\u0431 \u0434\u043e\u0434\u0430\u0442\u0438 \u0446\u0435, \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Gutenberg \u0443 \u043d\u0430\u0448\u0443 \u0437\u0431\u0456\u0440\u043a\u0443, \u043e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0438\u0439 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0437\u0432\u0438\u0447\u0430\u0439\u043d\u0438\u0445 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0456\u0432 \u0456\u043c\u043f\u043e\u0440\u0442\u0443.<\/p>\n<p>\u041d\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0431\u0443\u0434\u0435 \u0434\u043e\u0434\u0430\u0442\u0438 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0438\u0439 \u043a\u043e\u0434 \u0443 \u0444\u0430\u0439\u043b:<\/p>\n<pre><code>import { SnackbarList } from '@wordpress\/components';\n\nimport {\n    dispatch,\n    useDispatch,\n    useSelect,\n} from '@wordpress\/data';\n\nimport { store as noticesStore } from '@wordpress\/notices';\n\nconst Notices = () =&gt; {\n    const notices = useSelect( (select) =&gt;\n            select( noticesStore) .getNotices()\n                .filter( (notice) =&gt; notice.type === 'snackbar' ),\n        []\n    );\n    const { removeNotice } = useDispatch( noticesStore );\n    return (&lt;SnackbarList\n            className=\"edit-site-notices\"\n            notices={ notices }\n            onRemove={ removeNotice }\n        \/&gt;\n    );\n};\n<\/code><\/pre>\n<p>\u041f\u043e\u0442\u0456\u043c \u0443 \u0433\u043e\u043b\u043e\u0432\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0456 <code>&lt;App&gt;<\/code>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043e\u0434\u0430\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0435 \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u0438\u0442\u0442\u044f\u043c <code>&lt;\/Fragment&gt;<\/code>:<\/p>\n<pre><code>&lt;div className=\"wholesome-plugin__notices\"&gt;\n  &lt;Notices\/&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>\u041d\u0430\u0440\u0435\u0448\u0442\u0456 \u0434\u043e\u0434\u0430\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0435 \u0434\u043e <code>onClick<\/code>\u043e\u0431\u0440\u043e\u0431\u043d\u0438\u043a\u0430 \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n<pre><code>dispatch('core\/notices').createNotice(\n  'success',\n  __( 'Settings Saved', 'wholesome-plugin' ),\n  {\n    type: 'snackbar',\n    isDismissible: true,\n  }\n);\n<\/code><\/pre>\n<p>\u0426\u0435 \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438\u043c\u0435 \u043d\u0435\u0432\u0435\u043b\u0438\u043a\u0435 \u0441\u043f\u043b\u0438\u0432\u0430\u044e\u0447\u0435 \u0432\u0456\u043a\u043d\u043e \u00ab\u043f\u0430\u043d\u0435\u043b\u0456 \u0448\u0432\u0438\u0434\u043a\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0443\u00bb \u043f\u0456\u0434 \u0447\u0430\u0441 \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168686-61e7f00850403.png\" alt=\"\u0421\u0442\u0432\u043e\u0440\u0456\u0442\u044c \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 WordPress Block Editor (Gutenberg).\" \/>\u0421\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u043d\u044f Snackbar \u0432 \u0434\u0456\u0457<\/p>\n<p>\u042f \u0437\u043d\u0430\u044e, \u044f \u0437\u043d\u0430\u044e, \u043d\u0430\u043c \u0449\u0435 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0432\u0438\u043f\u0440\u0430\u0432\u0438\u0442\u0438 \u0446\u0456 \u0441\u0442\u0438\u043b\u0456.<\/p>\n<h3>\u041f\u043e\u0432\u043d\u0438\u0439 <code>\/src\/admin.js<\/code>\u0444\u0430\u0439\u043b<\/h3>\n<p>\u0414\u043b\u044f \u0434\u043e\u0432\u0456\u0434\u043a\u0438 \u043e\u0441\u044c \u043f\u043e\u0432\u043d\u0438\u0439 <code>\/src\/admin.js<\/code>\u043a\u043e\u0434 \u0444\u0430\u0439\u043b\u0443:<\/p>\n<pre><code>import '.\/admin.scss';\n\nimport api from '@wordpress\/api';\n\nimport {\n    Button,\n    Icon,\n    Panel,\n    PanelBody,\n    PanelRow,\n    Placeholder,\n    SelectControl,\n    SnackbarList,\n    Spinner,\n    TextControl,\n    ToggleControl,\n} from '@wordpress\/components';\n\nimport {\n    dispatch,\n    useDispatch,\n    useSelect,\n} from '@wordpress\/data';\n\nimport {\n    Fragment,\n    render,\n    Component,\n} from '@wordpress\/element';\n\nimport { __ } from '@wordpress\/i18n';\n\nimport { store as noticesStore } from '@wordpress\/notices';\n\nconst Notices = () =&gt; {\n    const notices = useSelect( (select) =&gt;\n            select( noticesStore) .getNotices()\n                .filter( (notice) =&gt; notice.type === 'snackbar' ),\n        []\n    );\n    const { removeNotice } = useDispatch( noticesStore );\n    return (&lt;SnackbarList\n            className=\"edit-site-notices\"\n            notices={ notices }\n            onRemove={ removeNotice }\n        \/&gt;\n    );\n};\n\nclass App extends Component {\n    constructor() {\n        super( ...arguments );\n\n        this.state = {\n            exampleSelect: '',\n            exampleText: '',\n            exampleText2: '',\n            exampleText3: '',\n            exampleToggle: false,\n            isAPILoaded: false,\n        };\n    }\n\n    componentDidMount() {\n\n        api.loadPromise.then( () =&gt; {\n            this.settings = new api.models.Settings();\n\n            const { isAPILoaded } = this.state;\n\n            if (isAPILoaded === false) {\n                this.settings.fetch().then( (response) =&gt; {\n                    this.setState( {\n                        exampleSelect: response[ 'wholesomecode_wholesome_plugin_example_select' ],\n                        exampleText: response[ 'wholesomecode_wholesome_plugin_example_text' ],\n                        exampleText2: response[ 'wholesomecode_wholesome_plugin_example_text_2' ],\n                        exampleText3: response[ 'wholesomecode_wholesome_plugin_example_text_3' ],\n                        exampleToggle: Boolean( response[ 'wholesomecode_wholesome_plugin_example_toggle' ] ),\n                        isAPILoaded: true,\n                    } );\n                } );\n            }\n        } );\n    }\n\n    render() {\n        const {\n            exampleSelect,\n            exampleText,\n            exampleText2,\n            exampleText3,\n            exampleToggle,\n            isAPILoaded,\n        } = this.state;\n\n        if (! isAPILoaded) {\n            return (&lt;Placeholder&gt;\n                    &lt;Spinner \/&gt;\n                &lt;\/Placeholder&gt;\n            );\n        }\n\n        return (&lt;Fragment&gt;\n                &lt;div className=\"wholesome-plugin__header\"&gt;\n                    &lt;div className=\"wholesome-plugin__container\"&gt;\n                        &lt;div className=\"wholesome-plugin__title\"&gt;\n                            &lt;h1&gt;{ __( 'Wholesome Plugin Settings', 'wholesome-plugin') } &lt;Icon icon=\"admin-plugins\" \/&gt;&lt;\/h1&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n\n                &lt;div className=\"wholesome-plugin__main\"&gt;\n                    &lt;Panel&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body One', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;SelectControl\n                                help={ __( 'An example dropdown field.', 'wholesome-plugin') }\n                                label={ __( 'Example Select', 'wholesome-plugin') }\n                                onChange={ (exampleSelect) =&gt; this.setState( { exampleSelect }) }\n                                options={ [\n                                    {\n                                        label: __( 'Please Select...', 'wholesome-plugin' ),\n                                        value: '',\n                                    },\n                                    {\n                                        label: __( 'Option 1', 'wholesome-plugin' ),\n                                        value: 'option-1',\n                                    },\n                                    {\n                                        label: __( 'Option 2', 'wholesome-plugin' ),\n                                        value: 'option-2',\n                                    },\n                                ] }\n                                value={ exampleSelect }\n                            \/&gt;\n                        &lt;\/PanelBody&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body Two', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;TextControl\n                                help={ __( 'This is an example text field.', 'wholesome-plugin') }\n                                label={ __( 'Example Text', 'wholesome-plugin') }\n                                onChange={ (exampleText) =&gt; this.setState( { exampleText }) }\n                                value={ exampleText }\n                            \/&gt;\n\n                        &lt;\/PanelBody&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body Three', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;PanelRow&gt;\n                                &lt;TextControl\n                                    help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }\n                                    label={ __( 'Example Text 2', 'wholesome-plugin') }\n                                    onChange={ (exampleText2) =&gt; this.setState( { exampleText2 }) }\n                                    value={ exampleText2 }\n                                \/&gt;\n                                &lt;TextControl\n                                    help={ __( 'This control is inline.', 'wholesome-plugin') }\n                                    label={ __( 'Example Text 3', 'wholesome-plugin') }\n                                    onChange={ (exampleText3) =&gt; this.setState( { exampleText3 }) }\n                                    value={ exampleText3 }\n                                \/&gt;\n                            &lt;\/PanelRow&gt;\n                        &lt;\/PanelBody&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body Four', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;ToggleControl\n                                checked={ exampleToggle }\n                                help={ __( 'An example toggle.', 'wholesome-plugin') }\n                                label={ __( 'Example Toggle', 'wholesome-plugin') }\n                                onChange={ (exampleToggle) =&gt; this.setState( { exampleToggle }) }\n                            \/&gt;\n                        &lt;\/PanelBody&gt;\n                        &lt;Button\n                            isPrimary\n                            isLarge\n                            onClick={ () =&gt; {\n                                const {\n                                    exampleSelect,\n                                    exampleText,\n                                    exampleText2,\n                                    exampleText3,\n                                    exampleToggle,\n                                } = this.state;\n\n                                const settings = new api.models.Settings( {\n                                    [ 'wholesomecode_wholesome_plugin_example_select' ]: exampleSelect,\n                                    [ 'wholesomecode_wholesome_plugin_example_text' ]: exampleText,\n                                    [ 'wholesomecode_wholesome_plugin_example_text_2' ]: exampleText2,\n                                    [ 'wholesomecode_wholesome_plugin_example_text_3' ]: exampleText3,\n                                    [ 'wholesomecode_wholesome_plugin_example_toggle' ]: exampleToggle? 'true': '',\n                                } );\n                                settings.save();\n\n                                dispatch('core\/notices').createNotice(\n                                    'success',\n                                    __( 'Settings Saved', 'wholesome-plugin' ),\n                                    {\n                                        type: 'snackbar',\n                                        isDismissible: true,\n                                    }\n                                );\n                            }}\n                        &gt;\n                            { __( 'Save', 'wholesome-plugin') }\n                        &lt;\/Button&gt;\n                    &lt;\/Panel&gt;\n                &lt;\/div&gt;\n\n                &lt;div className=\"wholesome-plugin__notices\"&gt;\n                    &lt;Notices\/&gt;\n                &lt;\/div&gt;\n\n            &lt;\/Fragment&gt;) }\n}\n\ndocument.addEventListener( 'DOMContentLoaded', () =&gt; {\n    const htmlOutput = document.getElementById( 'wholesome-plugin-settings' );\n\n    if (htmlOutput) {\n        render(\n            &lt;App \/&gt;,\n            htmlOutput\n        );\n    }\n});\n<\/code><\/pre>\n<h2>\u0414\u043e\u0434\u0430\u0439\u0442\u0435 SCSS<\/h2>\n<p>\u0427\u0430\u0441 \u0432\u0438\u043f\u0440\u0430\u0432\u0438\u0442\u0438 \u0446\u0456 \u0441\u0442\u0438\u043b\u0456. \u041f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0434\u0430\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0435 \u0443 <code>\/src\/admin.scss<\/code>\u0444\u0430\u0439\u043b (\u044f\u043a\u0438\u0439 \u0432\u0438 \u0431 \u0441\u0442\u0432\u043e\u0440\u0438\u043b\u0438 \u0432 \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a\u0443 \u00ab<a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0414\u043e\u0434\u0430\u0442\u0438 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0443 \u0434\u043e \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u044e \u0431\u043b\u043e\u043a\u0443\u00bb.<\/a><\/p>\n<pre><code>#wholesome-plugin-settings {\n\n    .components-placeholder {\n        background: #f1f1f1;\n    }\n\n    .wholesome-plugin__header {\n        background-color: #ffffff;\n        box-shadow: 0 1px 0 rgba(213, 213, 213, .5), 0 1px 2px #eeeeee;\n        margin-left: -2em;\n        padding: 20px 10px;\n\n        .wholesome-plugin__container {\n            margin: 0 auto;\n            max-width: 750px;\n\n            .wholesome-plugin__title {\n                align-items: center;\n                display: flex;\n                justify-content: center;\n\n                .dashicon {\n                    color: #757575;\n                }\n            }\n        }\n    }\n\n    .wholesome-plugin__main {\n        margin-left: auto;\n        margin-right: auto;\n        max-width: 750px;\n\n        .components-panel {\n            background: none;\n            border: none;\n        }\n\n        .components-panel__body {\n            background: #ffffff;\n            border: 1px solid #e2e4e7;\n            margin: 1rem 0;\n        }\n    }\n\n    .components-base-control__help {\n        margin-top: .5rem;\n    }\n\n    .components-panel__row {\n        &gt; div {\n            flex-grow: 1;\n            margin-right: 1rem;\n\n            &amp;:last-of-type {\n                margin-right: 0;\n            }\n        }\n    }\n\n    .wholesome-plugin__notices {\n        .components-snackbar {\n            bottom: .5rem;\n            position: fixed;\n        }\n    }\n}\n<\/code><\/pre>\n<h2>\u041f\u0435\u0440\u0435\u0433\u043b\u044f\u0434 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c<\/h2>\n<p>\u041e\u0441\u044c \u043a\u0456\u043d\u0446\u0435\u0432\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168686-61e7f0098b5d1.gif\" alt=\"\u0421\u0442\u0432\u043e\u0440\u0456\u0442\u044c \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 WordPress Block Editor (Gutenberg).\" \/>\u0421\u0442\u043e\u0440\u0456\u043d\u043a\u0430 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c<\/p>\n<p>\u0414\u0435\u044f\u043a\u0456 \u043f\u043b\u0430\u0433\u0456\u043d\u0438 \u043c\u0430\u044e\u0442\u044c \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u00ab\u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f\u00bb \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u0446\u0456 \u043f\u043b\u0430\u0433\u0456\u043d\u0456\u0432, \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168686-61e7f00b64270.png\" alt=\"\u0421\u0442\u0432\u043e\u0440\u0456\u0442\u044c \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 WordPress Block Editor (Gutenberg).\" \/>\u041f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u043d\u0430 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0456 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c \u043f\u043b\u0430\u0433\u0456\u043d\u0430<\/p>\n<p>\u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u0434\u043e\u0434\u0430\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0438\u0439 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0443 \u0434\u043e \u043a\u043e\u0440\u0435\u043d\u044f \u0432\u0430\u0448\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0443 \u043f\u043b\u0430\u0433\u0456\u043d\u0430 (\u0443 \u0446\u044c\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 <code>wholesome-plugin.php<\/code>):<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_settings_link( $links ): array {\n    $label = esc_html__( 'Settings', 'wholesome-plugin' );\n    $slug  = 'wholesome_plugin_settings';\n\n    array_unshift( $links, \"&lt;a href='options-general.php?page=$slug'&gt;$label&lt;\/a&gt;\" );\n\n    return $links;\n}\nadd_action( 'plugin_action_links_'. plugin_basename( __FILE__ ), 'wholesomecode_wholesome_plugin_settings_link', 10 );\n<\/code><\/pre>\n<ul>\n<li>\u041f\u043e\u0434\u0438\u0432\u0456\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0432\u043a\u043b\u0430\u0434\u0435\u043d\u0438\u0445 \u0434\u043e\u0447\u0456\u0440\u043d\u0456\u0445 \u0431\u043b\u043e\u043a\u0456\u0432 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e <code>InnerBlocks<\/code>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/a><\/li>\n<li>\u041f\u043e\u0434\u0438\u0432\u0456\u0442\u044c\u0441\u044f \u043d\u0430 <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u043f\u043e\u0441\u0442 \u043c\u0435\u0442\u0430-\u043f\u043e\u043b\u0456\u0432 \u0443 \u0431\u043b\u043e\u043a\u0430\u0445 \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433\u0430<\/a><\/li>\n<li>\u041f\u043e\u0434\u0438\u0432\u0456\u0442\u044c\u0441\u044f \u043d\u0430 <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-customizer-panel-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043f\u0430\u043d\u0435\u043b\u0456 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u044c \u0456\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 Gutenberg<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0414\u0436\u0435\u0440\u0435\u043b\u043e \u0437\u0430\u043f\u0438\u0441\u0443:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0420\u0430\u043d\u0456\u0448\u0435 \u043c\u0438 \u0440\u043e\u0437\u0433\u043b\u044f\u0434\u0430\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438 \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u043d\u043d\u044f \u0442\u0430 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0431\u043b\u043e\u043a\u0456\u0432 WordPress (Gutenberg) \u0456 \u0440\u043e\u0437\u0448\u0438\u0440\u0435\u043d\u043d\u044f \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u044e \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0431\u043b\u043e\u043a\u0443, \u0449\u043e\u0431 \u0434\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u0438 \u0434\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0456 \u043a\u0456\u043d\u0446\u0435\u0432\u0456 \u0442\u043e\u0447\u043a\u0438. \u0423 \u0446\u044c\u043e\u043c\u0443&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223685,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[943,902,923,725],"tags":[1174],"class_list":["post-228584","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-10","category-kod-3","category-inshyj","category-rozrobnyk","tag-affiai-uk"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/posts\/228584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/comments?post=228584"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/posts\/228584\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/media\/223685"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/media?parent=228584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/categories?post=228584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/uk\/wp-json\/wp\/v2\/tags?post=228584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}