{"id":228483,"date":"2022-10-20T19:32:00","date_gmt":"2022-10-20T16:32:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228483"},"modified":"2022-11-09T02:39:34","modified_gmt":"2022-11-08T23:39:34","slug":"vormindage-oma-postituse-sisu-registerformattypeiga","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/vormindage-oma-postituse-sisu-registerformattypeiga\/","title":{"rendered":"Vormindage oma postituse sisu registerFormatType&#8217;iga"},"content":{"rendered":"\n<p>Saate WordPress Gutenbergis t\u00f6\u00f6riistaribale kohandatud nuppe lisada \u00fcsna lihtsalt, kuid kas teadsite, et saate vormingumen\u00fc\u00fcsse lisada ka vormingut\u00fc\u00fcbi juhtnuppe?<\/p>\n<p>Selles juhendis vaatleme, kuidas lisada vormingu juhtelementi, mis v\u00f5imaldab meil semantilise HTML-m\u00e4rgendi <code>registerFormatType<\/code>abil valida valitud teksti esilet\u00f5stmise v\u00e4rvi .<code>&lt;mark&gt;<\/code><\/p>\n<p>Kogu selles \u00f5petuses kasutatud koodi leiate <strong>tasuta<\/strong> <a href=\"https:\/\/wholesomecode.ltd\/plugins\/highlighter\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pistikprogrammist Highlighter<\/a>.<\/p>\n<p>V\u00e4\u00e4rib m\u00e4rkimist, et mitte ainult ei saa oma plokkides valitud tekstile vorminguid rakendada, vaid saate neid kasutada ka muude objektide (nt tekstisisesed kujutised ja ikoonid) otse plokkidesse sisestamiseks.<\/p>\n<p>Vormingut\u00fc\u00fcbi rakendamine Highlighteri pistikprogrammi abil.<\/p>\n<p>\u00dclaltoodud video n\u00e4itab Highlighteri pistikprogrammi ja meie vormingut\u00fc\u00fcpi t\u00f6\u00f6s. H\u00fcppame selle juurde.<\/p>\n<h2>Eeldused<\/h2>\n<ul>\n<li>Lugege <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressi plokiredaktori (Gutenbergi) pistikprogrammi loomise<\/a> juhendit, et saaksite pistikprogrammi loomisel edumaa.<\/li>\n<li>Soovi <a href=\"https:\/\/wholesomecode.ltd\/plugins\/highlighter\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">korral laadige alla tasuta pistikprogramm Highlighter<\/a> ja vaadake faili<code>\/src\/formats\/highlight.js<\/code><\/li>\n<\/ul>\n<h2>Seadistage pistikprogrammi failid<\/h2>\n<p>Kui olete j\u00e4rginud eeltingimust ja j\u00e4rginud pistikprogrammi juhendit, peame j\u00e4tkama ja eemaldama hulga neid faile.<\/p>\n<ul>\n<li>Eemaldage kaustast src k\u00f5ik peale <code>index.js<\/code>ja <code>style.scss<\/code>failide.<\/li>\n<li><code>index.js<\/code>Kustutage ja sisu <code>style.scss<\/code>t\u00e4ielikult.<\/li>\n<li><code>\/build<\/code>Kustutage kaustas k\u00f5ik failid. Me taastame need hiljem.<\/li>\n<li>Eemalda <code>block.json<\/code>. Me ei ehita t\u00e4na plokki, seega pole seda vaja.<\/li>\n<\/ul>\n<h3>Pange skriptid j\u00e4rjekorda<\/h3>\n<p>Lisage pistikprogrammi p\u00f5hifaili (<code>wholesome-plugin.php<\/code>kui olete eelmist \u00f5petust s\u00f5na-s\u00f5nalt j\u00e4rginud) j\u00e4rgmine kood, et lisada oma pistikprogrammi JavaScripti ja CSS-i j\u00e4rjekorda.<\/p>\n<pre><code>&lt;?php\n\nfunction setup(): void {\n\n    load_plugin_textdomain( 'wholesome-highlighter', false, ROOT_DIR. 'languages' );\n\n    add_action( 'enqueue_block_editor_assets', __NAMESPACE__. 'enqueue_block_editor_assets', 10 );\n\n    add_action( 'enqueue_block_assets', __NAMESPACE__. 'enqueue_block_styles', 10 );\n}\n\nfunction enqueue_block_editor_assets(): void {\n\n    $asset_path = ROOT_DIR. '\/build\/index.asset.php';\n\n    if (! file_exists( $asset_path)) {\n        throw new Error(\n            esc_html__( 'You need to run `npm start` or `npm run build` in the root of the plugin \"wholesome-highlighter\" first.', 'wholesome-highlighter') );\n    }\n\n    $scripts = '\/build\/index.js';\n    $assets  = include $asset_path;\n\n    wp_enqueue_script(\n        PLUGIN_SLUG. '-block-scripts',\n        plugins_url( $scripts, ROOT_FILE ),\n        $assets['dependencies'],\n        $assets['version'],\n        false\n    );\n\n    wp_set_script_translations(\n        PLUGIN_SLUG. '-block-scripts',\n        'wholesome-highlighter',\n        ROOT_DIR. 'languages'\n    );\n}\nadd_action( 'plugins_loaded', __NAMESPACE__. 'setup' );\n\nfunction enqueue_block_styles(): void {\n\n    $styles = '\/build\/style-index.css';\n\n    wp_enqueue_style(\n        PLUGIN_SLUG. '-block-styles',\n        plugins_url( $styles, ROOT_FILE ),\n        array(),\n        filemtime( ROOT_DIR. $styles) );\n}\n\nadd_action( 'plugins_loaded', __NAMESPACE__. 'setup' );\n<\/code><\/pre>\n<ol>\n<li>Registreerige vormingu t\u00fc\u00fcp<\/li>\n<\/ol>\n<hr \/>\n<p>Avage <code>\/src\/index.js<\/code>fail ja lisage j\u00e4rgmine kood.<\/p>\n<pre><code>\nimport { RichTextToolbarButton } from '@wordpress\/block-editor';\nimport { __ } from '@wordpress\/i18n';\n\nconst HighlighterButton = ({ isActive, onChange, value}) =&gt; {\n    return (&lt;RichTextToolbarButton\n            icon='edit'\n            isActive={ isActive }\n            title={ __( 'Highlight', 'wholesome-highlighter') }\n        \/&gt;) };\n<\/code><\/pre>\n<p>See loob meie esilet\u00f5stmisnupu, mis kuvatakse vormindamismen\u00fc\u00fcs. N\u00fc\u00fcd kasutame <code>registerFormatType<\/code>vormingu registreerimiseks.<\/p>\n<p>K\u00f5igepealt peame muutma oma importi, et importida <code>registerFormatType<\/code>ka <code>@wordpress\/rich-text<\/code>.<\/p>\n<pre><code>import { registerFormatType, toggleFormat } from '@wordpress\/rich-text';\n<\/code><\/pre>\n<p>Seej\u00e4rel registreerige vorming, lisades vormingu nime (<code>wholesome\/highlighter<\/code>) ja edastades j\u00e4rgmiste omadustega objekti. <code>toggleFormat<\/code>kasutatakse hiljem meie kliki\u00fcritusel.<\/p>\n<ul>\n<li><code>className<\/code>: klassi nimi, mis lisatakse esilet\u00f5stetud teksti \u00fcmbritsevale sildile.<\/li>\n<li><code>edit<\/code>: nupp, mille me varem registreerisime.<\/li>\n<li><code>tagName<\/code>: sildi t\u00fc\u00fcp, mis rakendatakse esilet\u00f5stetud tekstile. Sel juhul kasutame <code>&lt;mark&gt;<\/code>teksti esilet\u00f5stmiseks semantiliselt \u00f5iget m\u00e4rgistust.<\/li>\n<li><code>title<\/code>: vormingu pealkiri.<\/li>\n<\/ul>\n<pre><code>\nregisterFormatType(\n    'wholesome\/highlighter', {\n        className: 'wholesome-highlight',\n        edit: HighlighterButton,\n        tagName: 'mark',\n        title: __( 'Highlight', 'wholesome-highlighter' ),\n    }\n);\n<\/code><\/pre>\n<h3>K\u00e4sitsege kl\u00f5psamist<\/h3>\n<p>N\u00fc\u00fcd, kui oleme nupu vormindamismen\u00fc\u00fcsse lisanud, pole meil vaja muud teha kui klikis\u00fcndmust.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168405-61e7cb11d77e2.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168405-61e7cb11d77e2.png\" alt=\"Vormindage oma postituse sisu registerFormatType&#039;iga\" ><\/a><\/p>\n<p>Muutke <code>RichTextToolbarButton<\/code>ja lisage <code>onClick<\/code>s\u00fcndmus.<\/p>\n<pre><code>&lt;RichTextToolbarButton\n  icon='edit'\n  isActive={ isActive }\n  onClick={() =&gt; {\n    onChange(\n      toggleFormat( value, {\n        type: 'wholesome\/highlighter',\n      }) );\n  } }\n  title={ __( 'Highlight', 'wholesome-highlighter') }\n\/&gt;\n<\/code><\/pre>\n<p>P\u00e4\u00e4stikul kutsume <code>toggleFormat<\/code>v\u00e4\u00e4rtuse sisestamist (mis on esilet\u00f5stetud tekst) ja edastame objekti, mille <code>type<\/code>atribuut on seatud meie vormingu nimele.<\/p>\n<p>N\u00fc\u00fcd, kui nuppu algselt kl\u00f5psate, rakendab see <code>&lt;mark&gt;<\/code>valitud tekstile HTML-m\u00e4rgendi ja uuesti kl\u00f5psamisel l\u00fclitab see vormingu v\u00e4lja, eemaldades selle uuesti.<\/p>\n<p>Koodi t\u00e4ismahus vaatamiseks ja viimaste v\u00e4rskenduste vaatamiseks <a href=\"https:\/\/github.com\/wholesomecode\/wholesome-highlighter\/blob\/master\/src\/formats\/highlight.js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">vaadake <code>\/src\/formats\/highlight.js<\/code>Highlighteri pistikprogrammi t\u00e4isfaili<\/a>.<\/p>\n<p>\u00dclaltoodud kood registreerib ploki k\u00f5igi plokit\u00fc\u00fcpide jaoks. Kui aga soovite, et plokk ilmuks ainult teatud plokit\u00fc\u00fcpide puhul, saate seda ka teha.<\/p>\n<p>Selleks peame kasutama k\u00f5rgema j\u00e4rgu komponenti ifCondition ja meie valitud ploki t\u00fc\u00fcbi m\u00e4\u00e4ramiseks kasutama Select.<\/p>\n<p>Selleks lisage faili \u00fclaossa j\u00e4rgmised impordid.<\/p>\n<pre><code>import { ifCondition  } from '@wordpress\/compose';\nimport { useSelect } from '@wordpress\/data';\n<\/code><\/pre>\n<p><code>registerFormatType<\/code>Lisage koodiploki kohale j\u00e4rgmine koodi koostamisplokk .<\/p>\n<pre><code>\nvar HighlighterButtonContainer = ifCondition( (props) =&gt; {\n    const selectedBlock = useSelect( (select) =&gt; select('core\/block-editor').getSelectedBlock() );\n    return (selectedBlock &amp;&amp;\n        selectedBlock.name === 'core\/paragraph'\n    ); \n} )( HighlighterButton );\n<\/code><\/pre>\n<p>Nagu koodist n\u00e4ha, tagastab kui valitud plokk on <code>core\/paragraph<\/code>k\u00f5rgema j\u00e4rgu komponent <code>ifCondition<\/code>, t\u00f5ene ja v\u00f5imaldab seega nupul renderdada.<\/p>\n<p>K\u00f5ik, mida me n\u00fc\u00fcd tegema peame, on \u00e4sja loodud konteineri <code>registerBlockType<\/code>koodiplokki edastada ja meie kood on valmis.<\/p>\n<pre><code>\nregisterFormatType(\n    'wholesome\/highlighter', {\n        className: 'wholesome-highlight',\n        edit: HighlighterButtonContainer,\n        tagName: 'mark',\n        title: __( 'Highlight', 'wholesome-highlighter' ),\n    }\n);\n<\/code><\/pre>\n<p>Koodi t\u00e4ielikuks vaatamiseks <a href=\"https:\/\/github.com\/wholesomecode\/wholesome-highlighter\/blob\/master\/src\/formats\/highlight-paragraph.js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">vaadake <code>\/src\/formats\/highlight-paragraph.js<\/code>faili Highlighteri pistikprogrammis<\/a>.<\/p>\n<ul>\n<li>Viige asju edasi, <a href=\"https:\/\/wholesomecode.ltd\/blog\/use-a-modal-popup-to-add-additional-attributes-with-registerblockformat\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lisades kohandatud vormingule kohandatud atribuudid modaalse h\u00fcpikaknaga<\/a>.<\/li>\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\">Lisage InspectorControlsiga ploki k\u00fclgriba<\/a><\/li>\n<li>Vaadake <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenbergi komponentide abil valikute ja s\u00e4tete lehe loomist<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Saate WordPress Gutenbergi t\u00f6\u00f6riistaribale kohandatud nuppe lisada \u00fcsna lihtsalt, kuid kas teadsite, et saate vormingumen\u00fc\u00fcsse lisada ka vormingut\u00fc\u00fcbi juhtelemente?Selles juhendis k\u00e4sitleme&#8230;<\/p>\n","protected":false},"author":1,"featured_media":221122,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[718,749,894,916,842],"tags":[1165],"class_list":["post-228483","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-avatud-laehtekoodiga","category-kood","category-muud","category-opetused","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=228483"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228483\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/221122"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=228483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=228483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=228483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}