registerFormatType<\/code>, jonka avulla voimme valita valitun tekstin korostusv\u00e4rin semanttisen <mark><\/code>HTML-tunnisteen avulla.<\/p>\nKaikki t\u00e4ss\u00e4 opetusohjelmassa k\u00e4ytetty koodi l\u00f6ytyy ilmaisesta<\/strong> Highlighter-laajennuksesta<\/a>.<\/p>\nOn syyt\u00e4 huomata, ett\u00e4 et vain voit k\u00e4ytt\u00e4\u00e4 muotoja valittuun tekstiin lohkoissasi, vaan voit my\u00f6s k\u00e4ytt\u00e4\u00e4 niit\u00e4 muiden objektien lis\u00e4\u00e4miseen suoraan lohkoihin, kuten upotettuihin kuviin ja kuvakkeisiin.<\/p>\n
Muototyypin k\u00e4ytt\u00e4minen Highlighter-laajennuksella.<\/p>\n
Yll\u00e4 oleva video n\u00e4ytt\u00e4\u00e4 Highlighter-laajennuksen ja muototyyppimme toiminnassa. Hypp\u00e4\u00e4mme siihen.<\/p>\n
Edellytykset<\/h2>\n\n- Lue WordPress Block Editorin (Gutenberg) laajennuksen luominen<\/a> -opas, jotta saat etumatkan laajennuksen luomiseen.<\/li>\n
- Vaihtoehtoisesti lataa ilmainen Highlighter-laajennus<\/a> ja katso tiedostoa
\/src\/formats\/highlight.js<\/code><\/li>\n<\/ul>\nM\u00e4\u00e4rit\u00e4 liit\u00e4nn\u00e4istiedostot<\/h2>\n
Jos olet noudattanut edellytyst\u00e4 ja noudattanut laajennusopasta, meid\u00e4n on edett\u00e4v\u00e4 ja poistettava joukko n\u00e4it\u00e4 tiedostoja.<\/p>\n
\n- Poista src-kansiosta kaikki paitsi tiedostot
index.js<\/code>ja style.scss<\/code>.<\/li>\nindex.js<\/code>Poista ja sis\u00e4lt\u00f6 style.scss<\/code>kokonaan.<\/li>\n- Poista kansiosta kaikki
\/build<\/code>tiedostot. Uudistamme n\u00e4m\u00e4 my\u00f6hemmin.<\/li>\n- Poista
block.json<\/code>. Emme rakenna lohkoa t\u00e4n\u00e4\u00e4n, joten emme tarvitse t\u00e4t\u00e4.<\/li>\n<\/ul>\nAseta komentosarjat jonoon<\/h3>\n
Lis\u00e4\u00e4 p\u00e4\u00e4laajennustiedostoon (wholesome-plugin.php<\/code>jos olet noudattanut edellist\u00e4 opetusohjelmaa sanatarkasti) seuraava koodi lis\u00e4t\u00e4ksesi laajennuksen JavaScript- ja CSS-koodit.<\/p>\n<?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\n- Rekister\u00f6i muototyyppi<\/li>\n<\/ol>\n
\nAvaa \/src\/index.js<\/code>tiedosto ja lis\u00e4\u00e4 seuraava koodi.<\/p>\n\nimport { RichTextToolbarButton } from '@wordpress\/block-editor';\nimport { __ } from '@wordpress\/i18n';\n\nconst HighlighterButton = ({ isActive, onChange, value}) => {\n return (<RichTextToolbarButton\n icon='edit'\n isActive={ isActive }\n title={ __( 'Highlight', 'wholesome-highlighter') }\n \/>) };\n<\/code><\/pre>\nT\u00e4m\u00e4 luo korostuspainikkeen, joka tulee n\u00e4kyviin muotovalikkoon. Nyt k\u00e4yt\u00e4mme registerFormatType<\/code>muodon rekister\u00f6imiseen.<\/p>\nEnsinn\u00e4kin meid\u00e4n on muokattava tuontiamme voidaksemme tuoda my\u00f6s registerFormatType<\/code>osoitteesta @wordpress\/rich-text<\/code>.<\/p>\nimport { registerFormatType, toggleFormat } from '@wordpress\/rich-text';\n<\/code><\/pre>\nRekister\u00f6i sitten muoto lis\u00e4\u00e4m\u00e4ll\u00e4 muodon nimi (wholesome\/highlighter<\/code>) ja v\u00e4litt\u00e4m\u00e4ll\u00e4 objekti, jolla on seuraavat ominaisuudet. toggleFormat<\/code>k\u00e4ytet\u00e4\u00e4n my\u00f6hemmin klikkaustapahtumassamme.<\/p>\n\nclassName<\/code>: Luokan nimi, joka lis\u00e4t\u00e4\u00e4n korostettua teksti\u00e4 ymp\u00e4r\u00f6iv\u00e4\u00e4n tunnisteeseen.<\/li>\nedit<\/code>: Painike, jonka olemme aiemmin rekister\u00f6ineet.<\/li>\ntagName<\/code>: Korostettuun tekstiin k\u00e4ytett\u00e4v\u00e4n tunnisteen tyyppi. T\u00e4ss\u00e4 tapauksessa k\u00e4yt\u00e4mme <mark><\/code>semanttisesti oikeaa tekstin korostuksen merkint\u00e4\u00e4.<\/li>\ntitle<\/code>: muodon otsikko.<\/li>\n<\/ul>\n\nregisterFormatType(\n 'wholesome\/highlighter', {\n className: 'wholesome-highlight',\n edit: HighlighterButton,\n tagName: 'mark',\n title: __( 'Highlight', 'wholesome-highlighter' ),\n }\n);\n<\/code><\/pre>\nK\u00e4sittele napsautusta<\/h3>\n
Nyt kun olemme lis\u00e4nneet painikkeen muotovalikkoon, meid\u00e4n tarvitsee vain k\u00e4sitell\u00e4 klikkaustapahtuma.<\/p>\n
![\"Muotoile](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168405-61e7cb11d77e2.png\")
<\/a><\/p>\nMuokkaa tapahtumaa RichTextToolbarButton<\/code>ja lis\u00e4\u00e4 se onClick<\/code>.<\/p>\n<RichTextToolbarButton\n icon='edit'\n isActive={ isActive }\n onClick={() => {\n onChange(\n toggleFormat( value, {\n type: 'wholesome\/highlighter',\n }) );\n } }\n title={ __( 'Highlight', 'wholesome-highlighter') }\n\/>\n<\/code><\/pre>\nTriggeriss\u00e4 kutsumme toggleFormat<\/code>arvon v\u00e4litt\u00e4mist\u00e4 (joka on korostettu teksti) ja v\u00e4lit\u00e4mme objektin, jonka type<\/code>ominaisuus on asetettu muotomme nimeen.<\/p>\nNyt kun painiketta napsautetaan aluksi, se lis\u00e4\u00e4 <mark><\/code>HTML-tunnisteen valittuun tekstiin, ja kun sit\u00e4 painetaan uudelleen, se vaihtaa muotoa poistamalla sen uudelleen.<\/p>\nJos haluat n\u00e4hd\u00e4 koodin kokonaisuudessaan ja n\u00e4hd\u00e4ksesi viimeisimm\u00e4t p\u00e4ivitykset , katso koko \/src\/formats\/highlight.js<\/code>tiedosto Highlighter-laajennuksessa<\/a>.<\/p>\nYll\u00e4 oleva koodi rekister\u00f6i lohkon kaikille lohkotyypeille. Jos kuitenkin haluat lohkon n\u00e4kyv\u00e4n vain tietyiss\u00e4 lohkotyypeiss\u00e4, se voidaan my\u00f6s tehd\u00e4.<\/p>\n
T\u00e4t\u00e4 varten meid\u00e4n on k\u00e4ytett\u00e4v\u00e4 Higher Order -komponenttia ifCondition ja m\u00e4\u00e4ritett\u00e4v\u00e4 valitsemamme lohkotyyppi k\u00e4ytt\u00e4m\u00e4ll\u00e4 Select-toimintoa.<\/p>\n
Voit tehd\u00e4 t\u00e4m\u00e4n lis\u00e4\u00e4m\u00e4ll\u00e4 seuraavat tuontitiedostot tiedostosi alkuun.<\/p>\n
import { ifCondition } from '@wordpress\/compose';\nimport { useSelect } from '@wordpress\/data';\n<\/code><\/pre>\nregisterFormatType<\/code>Lis\u00e4\u00e4 koodilohkon yl\u00e4puolelle seuraava koodinkirjoituslohko.<\/p>\n\nvar HighlighterButtonContainer = ifCondition( (props) => {\n const selectedBlock = useSelect( (select) => select('core\/block-editor').getSelectedBlock() );\n return (selectedBlock &&\n selectedBlock.name === 'core\/paragraph'\n ); \n} )( HighlighterButton );\n<\/code><\/pre>\nKuten koodista n\u00e4kyy, jos valittu lohko on core\/paragraph<\/code>korkeamman j\u00e4rjestyksen komponentti ifCondition<\/code>, palauttaa tosi, ja antaa siksi painikkeen render\u00f6id\u00e4.<\/p>\nMeid\u00e4n tarvitsee vain siirt\u00e4\u00e4 juuri luomamme s\u00e4il\u00f6 registerBlockType<\/code>koodilohkoon ja koodimme on valmis.<\/p>\n\nregisterFormatType(\n 'wholesome\/highlighter', {\n className: 'wholesome-highlight',\n edit: HighlighterButtonContainer,\n tagName: 'mark',\n title: __( 'Highlight', 'wholesome-highlighter' ),\n }\n);\n<\/code><\/pre>\nJos haluat n\u00e4hd\u00e4 koodin kokonaisuudessaan , katso \/src\/formats\/highlight-paragraph.js<\/code>tiedostoa Highlighter-laajennuksessa<\/a>.<\/p>\n\n- Vie asioita pidemm\u00e4lle lis\u00e4\u00e4m\u00e4ll\u00e4 mukautettuja attribuutteja mukautettuun muotoon modaalisen ponnahdusikkunan avulla<\/a>.<\/li>\n
- Lis\u00e4\u00e4 lohkosivupalkki InspectorControlsilla<\/a><\/li>\n
- Katso vaihtoehto- ja asetussivun rakentaminen Gutenbergin komponenteilla<\/a><\/li>\n<\/ul>\n