{"id":218682,"date":"2022-10-20T14:02:00","date_gmt":"2022-10-20T11:02:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=218682"},"modified":"2022-08-08T22:24:29","modified_gmt":"2022-08-08T19:24:29","slug":"ispolzujte-modalnoe-vsplyvajushhee-okno-dlja-dobavlenija-dopolnitelnyh-atributov-s-pomoshhju-registerblockformat","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/ru\/ispolzujte-modalnoe-vsplyvajushhee-okno-dlja-dobavlenija-dopolnitelnyh-atributov-s-pomoshhju-registerblockformat\/","title":{"rendered":"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e registerBlockFormat"},"content":{"rendered":"\n<p>\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 <a href=\"https:\/\/wholesomecode.ltd\/blog\/format-your-post-content-with-registerformattype\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u043a \u0432\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e registerFormatType<\/a>. \u041d\u043e \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043c\u0430\u0440\u043a\u0435\u0440\u0443?<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u043c\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u043c \u0442\u043e, \u043d\u0430\u0434 \u0447\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0440\u0430\u043d\u0435\u0435, \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0446\u0432\u0435\u0442 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432 \u044d\u0442\u043e\u043c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u043c \u043e\u043a\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u043a\u0438, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b.<\/p>\n<p>\u0412\u0435\u0441\u044c \u043a\u043e\u0434, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 <strong>\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u043c<\/strong> <a href=\"https:\/\/wholesomecode.ltd\/plugins\/highlighter\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u043f\u043b\u0430\u0433\u0438\u043d\u0435 \u00abHighlighter\u00bb<\/a>.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0442\u0438\u043f\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 Highlighter.<\/p>\n<p>\u0412\u0438\u0434\u0435\u043e \u0432\u044b\u0448\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043b\u0430\u0433\u0438\u043d Highlighter, \u043d\u0430\u0448 \u0442\u0438\u043f \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0438 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043d\u0435\u043c\u0443.<\/p>\n<h2>\u041f\u0440\u0435\u0434\u043f\u043e\u0441\u044b\u043b\u043a\u0438<\/h2>\n<ul>\n<li>\u041f\u0440\u043e\u0447\u0442\u0438\u0442\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u00ab<a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0431\u043b\u043e\u043a\u043e\u0432 WordPress\u00bb (Gutenberg)<\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430.<\/li>\n<li>\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0448\u0430\u0433\u0438, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432 <a href=\"https:\/\/wholesomecode.ltd\/blog\/format-your-post-content-with-registerformattype\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0441\u0442\u0430\u0442\u044c\u0435 \u00ab\u0424\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e registerFormatType\u00bb<\/a>.<\/li>\n<li>\u041f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 <a href=\"https:\/\/github.com\/wholesomecode\/wholesome-highlighter\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u00abHighlighter\u00bb \u0441 GitHub<\/a> \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0444\u0430\u0439\u043b<code>\/src\/formats\/highlight-colours.js<\/code><\/li>\n<\/ul>\n<h2>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0439<\/h2>\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e, \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u0431\u044b\u043b\u0430 \u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u0438\u043b\u0438 \u043d\u0435\u0442. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 <code>useState<\/code>\u0438\u0437 <code>'@wordpress\/element'<\/code>.<\/p>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0430\u0434 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c return \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0430\u0448\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<pre><code> \/\/ State to show popover.\n const [ showPopover, setShowPopover ] = useState( false );\n<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<pre><code>onClick={() =&gt; { \n    setShowPopover( true );\n} }\n<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 <code>URLPopover<\/code>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 <code>'@wordpress\/block-editor'<\/code>. \u0417\u0430\u0442\u0435\u043c \u0432 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0435 return \u043f\u043e\u0434 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 <code>showPopover<\/code>\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0444\u0430\u0439\u043b <code>URLPopover<\/code>.<\/p>\n<pre><code>return (&lt;&gt;\n    &lt;RichTextToolbarButton\n      icon='edit'\n      onClick={() =&gt; { \n        setShowPopover( true );\n      } }\n      title={ __( 'Highlight', 'wholesome-highlighter') }\n      \/&gt;\n    { showPopover &amp;&amp; (&lt;URLPopover\n        className=\"components-inline-color-popover\"\n        onClose={ () =&gt; setShowPopover( false) }\n        &gt;\n        ...\n      &lt;\/URLPopover&gt;) }\n    &lt;\/&gt;) <\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043c\u044b \u043e\u0431\u0435\u0440\u043d\u0443\u043b\u0438 \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0443\u0441\u0442\u044b\u043c\u0438 \u0442\u0435\u0433\u0430\u043c\u0438 <code>&lt;&gt;&lt;\/&gt;<\/code>. \u041e\u043d\u0438 \u0441\u043b\u0443\u0436\u0430\u0442 \u0446\u0435\u043b\u0438 <code>&lt;Fragment&gt;<\/code>\u0442\u0435\u0433\u0430 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u0432\u0443\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c JSX \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u0432\u044b\u0432\u043e\u0434\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435.<\/p>\n<h2>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430<\/h2>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0438, \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e <code>ColorPalette<\/code>\u0438 <code>'@wordpress\/block-editor'<\/code>\u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e.<\/p>\n<pre><code>&lt;URLPopover\n   className=\"components-inline-color-popover\"\n   onClose={ () =&gt; setShowPopover( false) }\n &gt;\n &lt;ColorPalette\n    onChange={ (color) =&gt; {\n      setShowPopover( false );\n      if (color) {\n        onChange( \n          applyFormat( value, {\n            type: name,\n            attributes: { style: `background-color: ${color};` },\n          } \n        ));\n      } else {\n        onChange( toggleFormat( value, { type: name }) ); \n      }\n    } }\n    \/&gt;\n&lt;\/URLPopover&gt;\n<\/code><\/pre>\n<p>\u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u0443 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u043c \u043e\u043a\u043d\u0435. \u041f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430.<\/p>\n<h2>\u041a\u043e\u0434\u0435\u043a\u0441 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e<\/h2>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u0432 \u043f\u0430\u043b\u0438\u0442\u0440\u0443, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434. \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 <a href=\"https:\/\/github.com\/wholesomecode\/wholesome-highlighter\/blob\/master\/src\/formats\/highlight-colours.js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0441\u043a\u0430\u0447\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u0441 Github<\/a>.<\/p>\n<pre><code>\nimport { ColorPalette, RichTextToolbarButton, URLPopover } from '@wordpress\/block-editor';\nimport { useState } from '@wordpress\/element';\nimport { __ } from '@wordpress\/i18n';\nimport { Icon } from '@wordpress\/icons';\nimport { applyFormat, registerFormatType, toggleFormat, useAnchorRef } from '@wordpress\/rich-text';\n\nimport '..\/style.scss';\n\nconst name = 'wholesome\/highlighter';\nconst cssClass = 'wholesome-highlight';\n\nconst HighlighterButton = (props) =&gt; {\n    const { contentRef, isActive, onChange, value } = props;\n    const { activeFormats } = value;\n    const anchorRef = useAnchorRef( { ref: contentRef, value } );\n\n    const highlighterIcon = &lt;svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;\n        &lt;path d=\"M14.2186 3.31061C13.7838 2.89252 13.0834 2.89708 12.6543 3.32078L9.22512 6.70711C9.17494 6.75668 9.13068 6.80978 9.09236 6.86558L7.36613 8.57021L11.393 12.4419L16.362 7.50771L16.6812 7.1925C17.1103 6.76879 17.1056 6.08638 16.6708 5.66828L14.2186 3.31061Z\" fill=\"black\"\/&gt;\n        &lt;path d=\"M6.81914 9.10588L10.8041 12.9457L9.79592 13.9391C9.42424 14.3053 8.84982 14.3575 8.42039 14.0938L7.83675 13.8883L7.01822 14.6819L5.03321 12.7381L5.86163 11.9349L5.67624 11.454C5.39121 11.0373 5.43547 10.4692 5.811 10.0992L6.81914 9.10588Z\" fill=\"black\"\/&gt;\n        &lt;path d=\"M5.11329 13.6189L6.13911 14.5945L5.70907 15L4 14.592L5.11329 13.6189Z\" fill=\"black\"\/&gt;\n    &lt;\/svg&gt;;\n\n    const [ showPopover, setShowPopover ] = useState( false );\n    const [ activeColor, setActiveColor ] = useState( false );\n\n    const colors = [\n        { name: 'Yellow', color: '#fff300' },\n        { name: 'Green', color: '#79fe0c' },\n        { name: 'Blue', color: '#4af1f2' },\n        { name: 'Purple', color: '#df00ff' },\n        { name: 'Red', color: '#ff2226' },\n        { name: 'Orange', color: '#ff7b19' },\n        { name: 'Pink', color: '#ff70c5' },\n    ];\n\n    const getActiveColor = () =&gt; {\n        const formats = activeFormats.filter( format =&gt; name === format['type'] );\n\n        if (formats.length &gt; 0) {\n            const format = formats[0];\n            const { attributes, unregisteredAttributes } = format;\n\n            let atts = unregisteredAttributes;\n\n            if (attributes &amp;&amp; attributes.length) {\n                atts = attributes;\n            }\n\n            if (! atts) {\n                if (activeColor) {\n                    return { backgroundColor: activeColor };\n                }\n                return;\n            }\n\n            if (atts.hasOwnProperty('class')) {\n\n                const parts = atts.class.split( '--' );\n                const colorName = parts[ parts.length - 1 ];\n                const selectedColor = colors.filter( item =&gt; colorName === item.name.toLowerCase() )[0];\n                return { backgroundColor: selectedColor.color };\n            } else if (atts.hasOwnProperty('style')) {\n\n                const { style } = atts;\n                const parts = style.split( ': ' );\n                const selectedColor = parts[ parts.length - 1 ].replace( ';', '' );\n                return { backgroundColor: selectedColor };\n            }\n        }        \n    };\n\n    return (&lt;&gt;\n        &lt;RichTextToolbarButton\n            icon={\n                &lt;&gt;\n                    &lt;Icon icon={ highlighterIcon } \/&gt;\n                    { isActive &amp;&amp; (&lt;span\n                            className=\"format-library-text-color-button__indicator\"\n                            style={ getActiveColor() }\n                        \/&gt;) }\n                &lt;\/&gt;\n            }\n            key={ isActive? 'text-color': 'text-color-not-active' }\n            name={ isActive? 'text-color': undefined }\n            onClick={ () =&gt; { \n                setShowPopover( true );\n            } }\n            title={ __( 'Highlight', 'wholesome-highlighter') }\n        \/&gt;\n        { showPopover &amp;&amp; (&lt;URLPopover\n                anchorRef={ anchorRef }\n                className=\"components-inline-color-popover\"\n                onClose={ () =&gt; setShowPopover( false) }\n            &gt;\n                &lt;ColorPalette\n                    colors={ colors }\n                    onChange={ (color) =&gt; {\n                        setShowPopover( false );\n                        setActiveColor( color );\n\n                        if (color) {\n                            const selectedColor = colors.filter( item =&gt; color === item.color );\n                            const attributes  = {};\n                            if (selectedColor.length) {\n\n                                attributes.class = `${cssClass}--${selectedColor[0].name.toLowerCase()}`;\n                            } else {\n\n                                attributes.style = `background-color: ${color};`;\n                            }\n                            onChange( \n                                applyFormat( value, {\n                                    type: name,\n                                    attributes,\n                                } \n                            ));\n                        } else {\n                            onChange( toggleFormat( value, { type: name }) ); \n                        }\n                    } }\n                \/&gt;\n            &lt;\/URLPopover&gt;) }\n        &lt;\/&gt;) };\n\nregisterFormatType(\n    name, {\n        className: cssClass,\n        edit: HighlighterButton,\n        tagName: 'mark',\n        title: __( 'Highlight', 'wholesome-highlighter' ),\n    }\n);\n<\/code><\/pre>\n<p>\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0446\u0432\u0435\u0442\u0430 \u0434\u043b\u044f \u0432\u0430\u0448\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 \u0432 <code>\/src\/style.scss<\/code>\u0444\u0430\u0439\u043b\u0435, \u0438 \u0432\u043e\u0442 \u043e\u043d, \u0444\u043e\u0440\u043c\u0430\u0442 \u043c\u0430\u0440\u043a\u0435\u0440\u0430 \u0441 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u043f\u0430\u043b\u0438\u0442\u0440\u043e\u0439.<\/p>\n<pre><code>\n.wholesome-highlight {\n    &amp;.wholesome-highlight--yellow {\n        background-color: #fff300;\n    }\n\n    &amp;.wholesome-highlight--green {\n        background-color: #79fe0c;\n    }\n\n    &amp;.wholesome-highlight--blue {\n        background-color: #4af1f2;\n    }\n\n    &amp;.wholesome-highlight--purple {\n        background-color: #df00ff;\n    }\n\n    &amp;.wholesome-highlight--red {\n        background-color: #ff2226;\n    }\n\n    &amp;.wholesome-highlight--orange {\n        background-color: #ff7b19;\n    }\n\n    &amp;.wholesome-highlight--pink {\n        background-color: #ff70c5;\n    }\n}\n<\/code><\/pre>\n<p>\u0417\u043d\u0430\u0447\u043e\u043a \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u043c\u0430\u0440\u043a\u0435\u0440\u0430<\/p>\n<ul>\n<li><a href=\"https:\/\/wholesomecode.ltd\/guides\/add-sidebar-controls-to-your-custom-wordpress-block-with-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0431\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c \u0431\u043b\u043e\u043a\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e InspectorControls<\/a><\/li>\n<li>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u043c\u0435\u0442\u0430\u043f\u043e\u043b\u0435\u0439 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0432 \u0431\u043b\u043e\u043a\u0430\u0445 \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433\u0430.<\/a><\/li>\n<li>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <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\u043e\u0432 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0432 \u0431\u043b\u043e\u043a\u0430\u0445 \u0413\u0443\u0442\u0435\u043d\u0431\u0435\u0440\u0433\u0430.<\/a><\/li>\n<li>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Gutenberg .<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0437\u0430\u043f\u0438\u0441\u0438:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u043a \u0432\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e registerFormatType. \u041d\u043e \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043c\u0430\u0440\u043a\u0435\u0440\u0443? \u0412 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f&#8230;<\/p>\n","protected":false},"author":1,"featured_media":220968,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[870,900,921,726,850],"tags":[1171],"class_list":["post-218682","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-ru","category-kod-2","category-drugoj","category-rozrobnyk-ru","category-uchebniki-ru","tag-affiai-ru"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/ru\/wp-json\/wp\/v2\/posts\/218682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/ru\/wp-json\/wp\/v2\/comments?post=218682"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/ru\/wp-json\/wp\/v2\/posts\/218682\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/ru\/wp-json\/wp\/v2\/media\/220968"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/ru\/wp-json\/wp\/v2\/media?parent=218682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/ru\/wp-json\/wp\/v2\/categories?post=218682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/ru\/wp-json\/wp\/v2\/tags?post=218682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}