{"id":233455,"date":"2023-02-14T14:36:00","date_gmt":"2023-02-14T11:36:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233455"},"modified":"2022-11-10T23:47:35","modified_gmt":"2022-11-10T20:47:35","slug":"kohandatud-gutenbergi-ploki-loomine-6-osa-toeoeriistaribad","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/kohandatud-gutenbergi-ploki-loomine-6-osa-toeoeriistaribad\/","title":{"rendered":"Kohandatud Gutenbergi ploki loomine \u2013 6. osa: t\u00f6\u00f6riistaribad"},"content":{"rendered":"\n

Selles postituses \u00f5pime, kuidas lisada oma plokki WordPressi t\u00f6\u00f6riistaribasid, st joondamiseks ja plokkide joondamiseks. Samuti \u00f5pime lisama oma t\u00f6\u00f6riistaribasid oma nuppudega kohandatud toimingute tegemiseks.<\/p>\n

T\u00f6\u00f6riistaribade lisamine<\/h2>\n

Selleks, et oma ploki t\u00f6\u00f6riistaribale midagi lisada, peame sellesse pakkima selle, mida soovime, komponendi nimega BlockControls<\/code>(alates wp.blockEditor<\/code>). Selle komponendi sisse saame lisada kas \u00fche WordPressi komponendi standardsete t\u00f6\u00f6riistaribade jaoks, mida tunneme teistest plokkidest (n\u00e4iteks joondamine) v\u00f5i oma t\u00f6\u00f6riistariba.<\/p>\n

Vaikimisi on plokil t\u00f6\u00f6riistariba, mis sisaldab ainult ploki ikooni (funktsiooni teisendamiseks) ja plokkide men\u00fc\u00fcd n\u00e4iteks ploki eemaldamiseks. Me ei saa neid eemaldada, kuid saame nende vahele lisada oma nuppe ja t\u00f6\u00f6riistaribasid.<\/p>\n

M\u00f5ned WordPressi komponendid lisavad aga ise oma t\u00f6\u00f6riistaribad. Praeguse seisuga n\u00e4itab meie plokk tekstivormingu t\u00f6\u00f6riistariba, mis p\u00e4rineb RichText<\/code>lisatud komponendist.<\/p>\n

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

Plokkide joondamise t\u00f6\u00f6riistariba lisamine<\/h2>\n

Plokkide joondamise t\u00f6\u00f6riistariba on olemas praktiliselt k\u00f5ikidel WordPressi plokit\u00fc\u00fcpidel, seega lisame selle ka meie plokki. Kulisside taga on komponent BlockAlignmentToolbar<\/code>, mille v\u00f5iksime lisada, kuid ma soovitan seda mitte teha. Selle kasutamine n\u00f5uab plokkide joondamise klasside k\u00e4sitsi haldamist ja ploki laiuse suurendamist redaktoris, kui valite \u201eWide Width" v\u00f5i \u201eFull Width”. \u00d5nneks on WordPress teinud selle rakendamise v\u00e4ga lihtsaks, t\u00e4isautomaatseks.<\/p>\n

PS: aktiivsele teemale peab nende kahe ploki joonduse jaoks olema aktiivselt lisatud teematugi. Saate lisada neile tuge, kui olete add_theme_support('align-wide')<\/code>konksus after_setup_theme<\/code>.<\/p>\n

Saame lisada oma objekti konfiguratsioonile uue omaduse registerBlockType()<\/code>nimega supports<\/code>. On veel m\u00f5ned funktsioonid, kuid see, mis meid siin huvitab, on align<\/code>. V\u00f5ime seada align<\/code>lisama true<\/code>k\u00f5ik v\u00f5imalikud joondused v\u00f5i pakkuda massiivi t\u00e4pselt, milliseid joondusi me oma ploki jaoks lubame.<\/p>\n

...\nregisterBlockType('awp\/firstblock', {\n    ...\n    supports: {\n        align: true\n    },\n    edit: (props) => {\n        ...\n});<\/code><\/pre>\n
Mis annab meile redaktoris selle:<\/p>\n
\"Kohandatud<\/a><\/p>\n
Kui soovite n\u00e4iteks keelata, et keegi kasutaks funktsiooni Wide Width v\u00f5i Full Width, saate esitada massiivi ja need kaks v\u00e4listada. Plokkide joonduste nimed on j\u00e4rgmised: left<\/code>, right<\/code>, center<\/code>, wide<\/code>, ja full<\/code>.<\/p>\n
supports: {\n    align: ['left', 'right', 'center']\n},<\/code><\/pre>\n
Kas vajate vaikejoondust?<\/h3>\n
Vaikimisi ei saa plokk ploki joondust. Kui soovite, saate m\u00e4\u00e4rata vaikev\u00e4\u00e4rtuse, tehes atribuudi v\u00f5tmega align<\/code>, m\u00e4\u00e4rake t\u00fc\u00fcbiks string<\/code>ja m\u00e4\u00e4rake vaikev\u00e4\u00e4rtus seal. WordPress \u00fchendab selle atribuudi automaatselt ploki joondusega.<\/p>\n
attributes: {\n    align: {\n        type: 'string',\n        default: 'center'\n    }\n},\nsupports: {\n    align: true\n},<\/code><\/pre>\n
Sellega iga kord, kui luuakse uus meie t\u00fc\u00fcpi plokk, tsentreeritakse vaikeplokkide joondus.<\/p>\n
Kas blokeerida joonduse kujundamise segadus? Pole meie s\u00fc\u00fc<\/h3>\n
M\u00e4rkus<\/strong>. WordPressi ploki vaikestiil ajab teie postituse sisu voolu sassi, kui kasutate plokkide vasakut ja paremat joondust. Sama asi juhtub ka teiste WordPressi plokit\u00fc\u00fcpidega ja see pole ainult meie ploki probleem. Selle p\u00f5hjuseks on elemendile ujuki lisamine, mis ahendab p\u00f5hielemendi. Uskuge mind, selle probleemi v\u00e4ltimiseks olen proovinud plokki konstrueerida. Ainus asi, mille avastasin, et t\u00f6\u00f6tab korralikult, ilma teiste plokkide joondustega segamini ajamata, on redaktorisse stiilide lisamine ja ujukistiili reguleerimine.<\/p>\n
\"Kohandatud<\/a><\/p>\n
Sellest hoolimata on WordPress teinud plokkide joondamise rakendamise \u00fcsna lihtsaks. Vaatame n\u00fc\u00fcd teisi t\u00f6\u00f6riistaribasid, mida saame kasutada.<\/p>\n
Teksti joondamise t\u00f6\u00f6riistariba lisamine<\/h2>\n
Kui soovite pigem t\u00f6\u00f6riistariba teksti joondamiseks, saate seda teha ploki joondamise asemel \u2013 sellel t\u00f6\u00f6riistaribal on meil ainult vasakule, keskele ja paremale joondamine. Tegelikult saate koos kasutada nii teksti joondamist kui ka ploki joondamist \u2013 need t\u00f6\u00f6tavad eraldi. Et kasutajaid mitte segadusse ajada, v\u00f5ite lisada n\u00e4iteks laia ja t\u00e4islaiuse plokkide joondamise toe ning kasutada teksti joondamise t\u00f6\u00f6riistariba vasakule, keskele v\u00f5i paremale joondamise juhtimiseks. Seda tehes v\u00e4ldite \u00fclalmainitud probleemi<\/strong> redaktoris plokkide vooluga. Teie otsustada, kuidas soovite, et teie plokk toimiks.<\/p>\n
WordPressil on komponent teksti joondamise t\u00f6\u00f6riistariba v\u00e4ljastamiseks, kuid sisu reaalseks joondamiseks pole \u00f5igete klasside lisamise automaatset k\u00e4itlemist \u2013 nii redaktoris kui ka esiservas (v\u00e4hemalt nii palju, kui ma olen leidnud!). Peame teksti joondamise atribuudi k\u00e4sitsi lisama ja v\u00e4rskendama.<\/p>\n
Lisades BlockControls<\/code>jaAlignmentToolbar<\/code><\/h3>\n
Lisame l\u00f5puks BlockControls<\/code>oma edit<\/code>funktsiooni t\u00f6\u00f6riistariba v\u00e4ljundi jaoks. Teksti joondamise komponent on AlignmentToolbar<\/code>paketist 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
Pange t\u00e4hele, et olen InspectorControls<\/code>koodi l\u00fchendamiseks v\u00e4listanud eelmises etapis loodud sisu.<\/p>\n
Rea vahele #37<\/code>j\u00e4\u00e4b #42<\/code>kogu meie t\u00f6\u00f6riistariba sisu (peale atribuudi automaatselt lisatud ploki joonduse ja meie komponentide supports<\/code>lisatud tekstivormingu ). RichText<\/code>Me kasutame BlockControls<\/code>t\u00f6\u00f6riistaribale juurdep\u00e4\u00e4su saamiseks ja sees lisame AlignmentToolbar<\/code>komponendi.<\/p>\n
Nagu oleme sisenditega mitu korda teinud, pakume value<\/code>rekvisiidi salvestatud v\u00e4\u00e4rtuse kuvamiseks ja onChange<\/code>rekvisiitri komponendi atribuudi v\u00e4rskendamiseks AlignmentToolbar<\/code>. Atribuut, mida me valitud teksti joonduse salvestamiseks kasutame, on m\u00e4\u00e4ratletud kujul textAlignment<\/code>ja see peab olema t\u00fc\u00fcp string<\/code>. Nagu tavaliselt, saate lisada a default<\/code>, et tagada vastloodud plokkide vaikejoondus.<\/p>\n
Tagamaks, et plokk v\u00e4ljastaks joondusteabe ja saaks ka \u00f5ige stiili (nii n\u00e4eme tegelikult teksti joondamist) nii redaktoris kui ka eesmises, peame m\u00e4hisevagunis k\u00e4sitsi seadistama \u00f5ige klassi. M\u00f5lemas edit<\/code>ja save<\/code>I defineerime muutuja, mis kontrollib, kas attributes.textAlignment<\/code>see on seatud. Kui see on nii, koostan klassi nime j\u00e4rgides WordPressi teksti joondamise standardeid, mis on "has-text-align-(left|center|right)". Selle klassiga rakendab WordPress meie ploki stiili ja veendub, et meie plokk oleks visuaalselt \u00f5igesti joondatud nii redaktoris kui ka kasutajaliideses.<\/p>\n
Kohandatud t\u00f6\u00f6riistaribade lisamine meie enda nuppudega<\/h3>\n
Samuti saate t\u00f6\u00f6riistaribale lisada oma nuppe, et neil kl\u00f5psates teha mida iganes soovite. Selleks soovite lisada komponendi Toolbar<\/code>ja selle elemendi sisse lisada IconButton<\/code>(m\u00f5lemad wp.components<\/code>pakendis). K\u00f5ik sees BlockControls<\/code>muidugi.<\/p>\n
M\u00e4rkus<\/strong>: WordPressi andmetel on Gutenbergi muudatuste logi IconButton<\/code>kasutusest loobutud Button<\/code>. Siiski tundub, et ma ei saa seda komponenti kasutades kuvada ikooni, Button<\/code>hoolimata sellest, mida ma teen, kuigi see peaks seda toetama. Nii et praeguse seisuga kasutan IconButton<\/code>.<\/p>\n
Ilmselgelt saate rakenduses kombineerida mitu t\u00f6\u00f6riistariba komponenti BlockControls<\/code>. Alloleva koodiga lisame teksti joondamise t\u00f6\u00f6riistariba ja kohandatud t\u00f6\u00f6riistariba \u00fche nupuga p\u00e4rast seda.<\/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
IconButtoni komponent aktsepteerib rekvisiidile WordPressi dashiconi<\/a> ikooni v\u00f5i SVG- d icon<\/code>. Saame pakkuda ka muid rekvisiite, n\u00e4iteks className<\/code>ja label<\/code>(kuvatakse kohtspikris, kui h\u00f5ljutate kursorit nupu kohal). Rekvisiit, mis meid k\u00f5ige rohkem huvitab, on ilmselgelt onClick<\/code>rekvisiit, mis vallandub nupu kl\u00f5psamisel. Siin saame pakkuda funktsiooni ja teha p\u00f5him\u00f5tteliselt k\u00f5ike, mida tahame. V\u00f5imalused on l\u00f5putud ja s\u00f5ltuvad sellest, mida soovite teha. \u00dclaltoodud koodis lihtsalt konsooli login midagi, kui nuppu kl\u00f5psate. Selle \u00f5petuste seeria edenedes saate t\u00f5en\u00e4oliselt ideid, kuidas panna oma kohandatud nupp tegema seda, mida soovite.<\/p>\n
\"Kohandatud<\/a><\/p>\n
Seda oleme siiani teinud. Sarja j\u00e4rgmises etapis hakkame uurima keerukamaid asju ja \u00f5pime, kuidas luua oma komponente oleku- ja muude eeliste kasutamiseks.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Selles postituses \u00f5pime, kuidas lisada oma plokki WordPressi Gutenbergi t\u00f6\u00f6riistaribasid; teksti joondus, plokkide joondamine ja meie enda kohandatud t\u00f6\u00f6riistaribad.<\/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":[894,937,937,833,894,916,916,1110,842,812,812,833,842,863,863],"tags":[1165],"class_list":["post-233455","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kood","category-gutenberg-4","category-juhend-algajatele","category-muud","category-n-a","category-opetused","category-pistikprogrammid","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233455","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=233455"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233455\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/153354"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}