{"id":233445,"date":"2023-02-14T14:32:00","date_gmt":"2023-02-14T11:32:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233445"},"modified":"2022-11-10T23:43:37","modified_gmt":"2022-11-10T20:43:37","slug":"luo-mukautettu-gutenberg-lohko-osa-6-tyoekalurivit","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/luo-mukautettu-gutenberg-lohko-osa-6-tyoekalurivit\/","title":{"rendered":"Luo mukautettu Gutenberg-lohko \u2013 Osa 6: Ty\u00f6kalurivit"},"content":{"rendered":"\n

T\u00e4ss\u00e4 postauksessa opimme lis\u00e4\u00e4m\u00e4\u00e4n WordPressin ty\u00f6kalurivej\u00e4 lohkoomme eli tasausta ja lohkokohdistusta varten. Opimme my\u00f6s lis\u00e4\u00e4m\u00e4\u00e4n omia ty\u00f6kalurivej\u00e4 omilla painikkeillamme mukautettuja toimintoja varten.<\/p>\n

Ty\u00f6kalurivien lis\u00e4\u00e4minen<\/h2>\n

Jotta voisimme lis\u00e4t\u00e4 jotain lohkomme ty\u00f6kalupalkkiin, meid\u00e4n on k\u00e4\u00e4ritt\u00e4v\u00e4 se, mit\u00e4 haluamme siihen komponenttiin nimelt\u00e4 BlockControls<\/code>(from wp.blockEditor<\/code>). T\u00e4m\u00e4n komponentin sis\u00e4\u00e4n voimme lis\u00e4t\u00e4 joko yhden WordPress-komponenteista muista lohkoista tutuille vakioty\u00f6kaluriveille (esim. tasaus) tai voimme lis\u00e4t\u00e4 oman ty\u00f6kalurivin.<\/p>\n

Lohkolla on oletuksena ty\u00f6kalurivi, joka sis\u00e4lt\u00e4\u00e4 vain lohkon kuvakkeen (Muunna toiminnoksi) ja lohkovalikko esim. lohkon poistamista varten. Emme voi poistaa niit\u00e4, mutta voimme lis\u00e4t\u00e4 omat painikkeemme ja ty\u00f6kalurivit niiden v\u00e4liin.<\/p>\n

Jotkut tietyt WordPress-komponentit lis\u00e4\u00e4v\u00e4t kuitenkin itse omat ty\u00f6kalurivit. T\u00e4ll\u00e4 hetkell\u00e4 lohkomme n\u00e4ytt\u00e4\u00e4 ty\u00f6kalupalkin tekstin muotoilua varten, joka tulee RichText<\/code>lis\u00e4tyst\u00e4 komponentista.<\/p>\n

\"Luo<\/a><\/p>\n

Lohkojen kohdistusty\u00f6kalurivin lis\u00e4\u00e4minen<\/h2>\n

Lohkojen kohdistusty\u00f6kalupalkki on olemassa k\u00e4yt\u00e4nn\u00f6ss\u00e4 kaikissa WordPress-lohkotyypeiss\u00e4, joten lis\u00e4t\u00e4\u00e4n se my\u00f6s lohkoomme. Kulissien takana on komponentti BlockAlignmentToolbar<\/code>, jonka voisimme lis\u00e4t\u00e4, mutta suosittelen olemaan lis\u00e4\u00e4m\u00e4tt\u00e4. Sen k\u00e4ytt\u00e4minen edellytt\u00e4\u00e4, ett\u00e4 k\u00e4sittelet manuaalisesti luokkia lohkojen kohdistusta varten ja varmistat, ett\u00e4 lohko laajentaa leveytt\u00e4 editorissa valittaessa ”Wide Width" tai ”Full Width.” Onneksi WordPress on tehnyt sen toteuttamisesta todella helppoa, t\u00e4ysin automaattista.<\/p>\n

PS: Aktiivisella teemalla on oltava aktiivisesti lis\u00e4tty teematuki n\u00e4ille kahdelle lohkokohdistukselle. N\u00e4ille voit lis\u00e4t\u00e4 tukea pit\u00e4m\u00e4ll\u00e4 add_theme_support('align-wide')<\/code>koukussa after_setup_theme<\/code>.<\/p>\n

Voimme lis\u00e4t\u00e4 uuden ominaisuuden kohteen kokoonpanoomme registerBlockType()<\/code>, nimelt\u00e4\u00e4n supports<\/code>. On olemassa muutamia muita ominaisuuksia, mutta olemme kiinnostuneita t\u00e4ss\u00e4 align<\/code>. Voimme joko asettaa align<\/code>lis\u00e4\u00e4m\u00e4\u00e4n true<\/code>kaikki mahdolliset kohdistukset tai voimme tarjota joukon tarkasti, mitk\u00e4 tasaukset sallimme lohkollemme.<\/p>\n

...\nregisterBlockType('awp\/firstblock', {\n    ...\n    supports: {\n        align: true\n    },\n    edit: (props) => {\n        ...\n});<\/code><\/pre>\n
Mik\u00e4 antaa meille t\u00e4m\u00e4n editorissa:<\/p>\n
\"Luo<\/a><\/p>\n
Jos haluat esimerkiksi est\u00e4\u00e4 ket\u00e4\u00e4n k\u00e4ytt\u00e4m\u00e4st\u00e4 Wide Widthi\u00e4 tai Full Widthi\u00e4, voit antaa taulukon ja j\u00e4tt\u00e4\u00e4 n\u00e4m\u00e4 kaksi pois. Lohkojen kohdistusten nimet ovat seuraavat: left<\/code>, right<\/code>, center<\/code>, wide<\/code>, ja full<\/code>.<\/p>\n
supports: {\n    align: ['left', 'right', 'center']\n},<\/code><\/pre>\n
Tarvitsetko oletuskohdistuksen?<\/h3>\n
Oletuksena lohko ei saa lohkon kohdistusta. Halutessasi voit asettaa oletusarvon tekem\u00e4ll\u00e4 attribuutin avaimella align<\/code>, aseta tyypiksi string<\/code>ja aseta oletusarvo siell\u00e4. WordPress yhdist\u00e4\u00e4 t\u00e4m\u00e4n m\u00e4\u00e4ritteen automaattisesti lohkokohdistukseen.<\/p>\n
attributes: {\n    align: {\n        type: 'string',\n        default: 'center'\n    }\n},\nsupports: {\n    align: true\n},<\/code><\/pre>\n
T\u00e4m\u00e4n avulla aina kun uusi tyyppimme lohko luodaan, oletuslohkokohdistus keskitet\u00e4\u00e4n.<\/p>\n
Est\u00e4 kohdistuksen muotoilusotku? Ei meid\u00e4n vikamme<\/h3>\n
Huomautus:<\/strong> WordPressin oletuslohkotyyli sotkee \u200b\u200bviestisi sis\u00e4ll\u00f6n kulun, kun k\u00e4yt\u00e4t vasemman ja oikean lohkon kohdistusta. Sama tapahtuu my\u00f6s muiden WordPressin lohkotyyppien kanssa, eik\u00e4 se ole pelk\u00e4st\u00e4\u00e4n meid\u00e4n lohkomme ongelma. T\u00e4m\u00e4 johtuu floatin lis\u00e4\u00e4misest\u00e4 elementtiin, mik\u00e4 kutistaa p\u00e4\u00e4elementin. Usko minua, olen yritt\u00e4nyt rakentaa lohkon v\u00e4ltt\u00e4\u00e4kseni t\u00e4m\u00e4n ongelman. Ainoa asia, jonka olen huomannut toimivan kunnolla sekoittamatta muita lohkokohdistuksia, on tyylin lis\u00e4\u00e4minen editoriin ja kelluntatyylin s\u00e4\u00e4t\u00e4minen.<\/p>\n
\"Luo<\/a><\/p>\n
Siit\u00e4 huolimatta WordPress on tehnyt lohkojen kohdistuksen toteuttamisesta melko helppoa. Katsotaan nyt muita ty\u00f6kalurivej\u00e4, joita voimme k\u00e4ytt\u00e4\u00e4.<\/p>\n
Tekstin tasausty\u00f6kalurivin lis\u00e4\u00e4minen<\/h2>\n
Jos haluat mieluummin ty\u00f6kalupalkin tekstin tasaamiseen, voit tehd\u00e4 t\u00e4m\u00e4n lohkotasauksen sijaan \u2013 t\u00e4ss\u00e4 ty\u00f6kalupalkissa on vain tasaus vasemmalle, keskelle ja oikealle. Itse asiassa voit k\u00e4ytt\u00e4\u00e4 sek\u00e4 tekstin tasausta ett\u00e4 lohkotasausta yhdess\u00e4 \u2013 ne toimivat erikseen. Jotta k\u00e4ytt\u00e4ji\u00e4 ei h\u00e4mmennet\u00e4, voit esimerkiksi lis\u00e4t\u00e4 vain leve\u00e4n ja t\u00e4ysleve\u00e4n lohkon tasauksen tuen ja k\u00e4ytt\u00e4\u00e4 tekstin tasauksen ty\u00f6kalupalkkia vasemman-, keski- tai oikealle tasauksen ohjaamiseen. N\u00e4in v\u00e4lt\u00e4t yll\u00e4 mainitun<\/strong> editorin lohkojen virtauksen ongelman. On itsest\u00e4si kiinni, kuinka haluat lohkosi toimivan.<\/p>\n
WordPressiss\u00e4 on komponentti, joka tulostaa tekstin tasausty\u00f6kalurivin, mutta oikeiden luokkien lis\u00e4\u00e4mist\u00e4 ei automaattisesti k\u00e4sitell\u00e4 sis\u00e4ll\u00f6n tasaamiseksi \u2013 sek\u00e4 editorin sis\u00e4ll\u00e4 ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4 (ainakin sik\u00e4li kuin olen l\u00f6yt\u00e4nyt!). Meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 ja p\u00e4ivitett\u00e4v\u00e4 manuaalisesti m\u00e4\u00e4rite tekstin tasausta varten.<\/p>\n
Lis\u00e4t\u00e4\u00e4n BlockControls<\/code>jaAlignmentToolbar<\/code><\/h3>\n
Lis\u00e4t\u00e4\u00e4n lopuksi BlockControls<\/code>ty\u00f6kalurivin edit<\/code>tulosteemme toimintoon. Tekstin tasauskomponentti on AlignmentToolbar<\/code>paketista wp.blockEditor<\/code>.<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText, InspectorControls, BlockControls, AlignmentToolbar } = wp.blockEditor;\nconst { ToggleControl, PanelBody, PanelRow, CheckboxControl, SelectControl, ColorPicker } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    title: 'My first block',\n    category: 'common',\n    icon: 'smiley',\n    description: 'Learning in progress',\n    keywords: ['example', 'test'],\n    attributes: {\n        myRichHeading: {\n            type: 'string',\n        },\n        myRichText: {\n            type: 'string',\n            source: 'html',\n            selector: 'p'\n        },\n        textAlignment: {\n            type: 'string',\n        }\n    },\n    supports: {\n        align: ['wide', 'full']\n    },\n    edit: (props) => {\n        const { attributes, setAttributes } = props;\n        const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n\u00a0\n        return (<div className={alignmentClass}>\n                <InspectorControls>\n                    ... \n                <\/InspectorControls>\n                <BlockControls>\n                    <AlignmentToolbar\n                        value={attributes.textAlignment}\n                        onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n                    \/>\n                <\/BlockControls>\n                <RichText \n                    tagName=\"h2\"\n                    placeholder=\"Write your heading here\"\n                    value={attributes.myRichHeading}\n                    onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n                \/>\n                <RichText\n                    tagName=\"p\"\n                    placeholder=\"Write your paragraph here\"\n                    value={attributes.myRichText}\n                    onChange={(newtext) => setAttributes({ myRichText: newtext })}\n                \/>\n            <\/div>\n        );\n\u00a0\n    },\n    save: (props) => { \n        const { attributes } = props;\n\u00a0\n        const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n        return (<div className={alignmentClass}>\n                <RichText.Content \n                    tagName=\"h2\"\n                    value={attributes.myRichHeading}\n                \/>\n                <RichText.Content \n                    tagName=\"p\"\n                    value={attributes.myRichText}\n                \/>\n                {attributes.activateLasers && \n                    <div className=\"lasers\">Lasers activated<\/div>\n                }\n            <\/div>\n        );\n    }\n});<\/code><\/pre>\n
Huomaa, ett\u00e4 olen sulkenut pois kaiken sis\u00e4ll\u00f6n, jonka loimme InspectorControls<\/code>edellisess\u00e4 vaiheessa koodin lyhent\u00e4miseksi.<\/p>\n
Rivien v\u00e4liss\u00e4 #37<\/code>on #42<\/code>ty\u00f6kalurivimme koko sis\u00e4lt\u00f6 (lukuun ottamatta ominaisuuden automaattisesti lis\u00e4\u00e4m\u00e4\u00e4 lohkokohdistusta supports<\/code>ja komponenttiemme lis\u00e4\u00e4m\u00e4\u00e4 tekstin muotoilua RichText<\/code>). K\u00e4yt\u00e4mme BlockControls<\/code>ty\u00f6kalupalkkiin p\u00e4\u00e4sy\u00e4, ja sis\u00e4\u00e4n lis\u00e4\u00e4mme AlignmentToolbar<\/code>komponentin.<\/p>\n
Kuten olemme tehneet useaan otteeseen sy\u00f6tteiden kanssa, tarjoamme value<\/code>rekvisiitin tallennetun arvon n\u00e4ytt\u00e4miseen ja onChange<\/code>rekvisiitin attribuuttimme p\u00e4ivitt\u00e4miseen AlignmentToolbar<\/code>komponenttiin. Attribuutti, jota k\u00e4yt\u00e4mme valitun tekstin tasauksen tallentamiseen, on m\u00e4\u00e4ritetty muodossa textAlignment<\/code>ja sen on oltava tyyppi string<\/code>. Kuten tavallista, voit antaa a default<\/code>varmistaaksesi, ett\u00e4 \u00e4skett\u00e4in luodut lohkot saavat oletusasetuksen.<\/p>\n
Varmistaaksemme, ett\u00e4 lohko tulostaa kohdistustiedot ja my\u00f6s tyylittyy oikein (joten n\u00e4emme itse asiassa tekstin muutoksen tasauksen) sek\u00e4 editorissa ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4, meid\u00e4n on asetettava manuaalisesti oikea luokka rivitysdiv:lle. Molemmissa edit<\/code>ja save<\/code>I m\u00e4\u00e4rittelee muuttujan, joka tarkistaa, onko attributes.textAlignment<\/code>asetettu. Jos n\u00e4in on, rakennan luokan nimen WordPressin tekstin tasausstandardien mukaisesti, joka on "has-text-align-(left|center|right)". T\u00e4ll\u00e4 luokalla WordPress soveltaa tyyli\u00e4\u00e4n lohkoomme ja varmistaa, ett\u00e4 lohkomme kohdistuu visuaalisesti oikein sek\u00e4 editorissa ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n
Mukautettujen ty\u00f6kalurivien lis\u00e4\u00e4minen omilla painikkeillamme<\/h3>\n
Voit my\u00f6s lis\u00e4t\u00e4 omia painikkeita ty\u00f6kalupalkkiin, jotta voit tehd\u00e4 mit\u00e4 haluat napsauttaessasi niit\u00e4. Voit tehd\u00e4 t\u00e4m\u00e4n lis\u00e4\u00e4m\u00e4ll\u00e4 komponentin Toolbar<\/code>ja lis\u00e4\u00e4m\u00e4ll\u00e4 t\u00e4m\u00e4n elementin IconButton<\/code>sis\u00e4\u00e4n (molemmat wp.components<\/code>paketissa). Kaikki BlockControls<\/code>tietysti sis\u00e4ll\u00e4.<\/p>\n
Huomautus<\/strong>: WordPressin mukaan Gutenbergin muutosloki IconButton<\/code>on vanhentunut Button<\/code>. En kuitenkaan n\u00e4yt\u00e4 saavan kuvaketta n\u00e4kyviin Button<\/code>komponenttia k\u00e4ytt\u00e4m\u00e4ll\u00e4 riippumatta siit\u00e4, mit\u00e4 teen, vaikka sen pit\u00e4isi tukea sit\u00e4. Joten toistaiseksi k\u00e4yt\u00e4n IconButton<\/code>.<\/p>\n
Voit tietysti yhdist\u00e4\u00e4 useita ty\u00f6kalurivin osia BlockControls<\/code>. Alla olevalla koodilla lis\u00e4\u00e4mme tekstin tasausty\u00f6kalurivin ja mukautetun ty\u00f6kalurivin yhdell\u00e4 painikkeella sen j\u00e4lkeen.<\/p>\n
<BlockControls>\n    <AlignmentToolbar\n        value={attributes.textAlignment}\n        onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n    \/>\n    <Toolbar>\n        <IconButton\n            label=\"My very own custom button\"\n            icon=\"edit\"\n            className=\"my-custom-button\"\n            onClick={() => console.log('pressed button')}\n        \/>\n    <\/Toolbar>\n<\/BlockControls><\/code><\/pre>\n
IconButton-komponentti hyv\u00e4ksyy WordPressin dashicon-<\/a> kuvakkeen tai SVG:n ehdotukseen icon<\/code>. Voimme tarjota joitain muita rekvisiitta, kuten className<\/code>ja label<\/code>(n\u00e4kyy ty\u00f6kaluvihjeess\u00e4, kun viet hiiren painikkeen p\u00e4\u00e4lle). Meit\u00e4 kiinnostaa eniten onClick<\/code>potkuri, joka laukeaa, kun nappia painetaan. T\u00e4\u00e4ll\u00e4 voimme tarjota toiminnon ja tehd\u00e4 periaatteessa mit\u00e4 haluamme. Mahdollisuudet ovat rajattomat ja riippuvat siit\u00e4, mit\u00e4 haluat tehd\u00e4. Yll\u00e4 olevassa koodissa yksinkertaisesti konsolin lokiin jotain, kun painiketta napsautetaan. Kun etenemme t\u00e4ss\u00e4 opetusohjelmasarjassa, saat luultavasti ideoita kuinka saada mukautettu painike toimimaan haluamallasi tavalla.<\/p>\n
\"Luo<\/a><\/p>\n
T\u00e4t\u00e4 olemme tehneet t\u00e4h\u00e4n menness\u00e4. Sarjan seuraavassa vaiheessa l\u00e4hdet\u00e4\u00e4n katselemaan edistyneempi\u00e4 juttuja ja opimme luomaan omia komponentteja hy\u00f6dynt\u00e4m\u00e4\u00e4n valtion ja muita etuja.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
T\u00e4ss\u00e4 viestiss\u00e4 opimme lis\u00e4\u00e4m\u00e4\u00e4n WordPress Gutenbergin ty\u00f6kalurivit lohkoomme; tekstin tasaus, lohkotasaus ja omat mukautetut ty\u00f6kalurivit.<\/p>\n","protected":false},"author":1,"featured_media":153354,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,938,938,895,813,917,917,1110,834,843,813,834,843,864,864],"tags":[1166],"class_list":{"0":"post-233445","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-koodi","8":"category-gutenberg-5","11":"category-laajennuksia","12":"category-muut","14":"category-n-a","15":"category-opas-aloittelijoille","16":"category-opetusohjelmia","20":"category-wordpress-5","22":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233445"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233445\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/153354"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}