{"id":233933,"date":"2023-02-25T14:50:00","date_gmt":"2023-02-25T11:50:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233933"},"modified":"2022-11-11T13:16:11","modified_gmt":"2022-11-11T10:16:11","slug":"kuinka-poistaa-gutenbergin-lohkot-kaeytoestae","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/kuinka-poistaa-gutenbergin-lohkot-kaeytoestae\/","title":{"rendered":"Kuinka poistaa Gutenbergin lohkot k\u00e4yt\u00f6st\u00e4"},"content":{"rendered":"\n

Yksi yleisimmist\u00e4 ongelmista teeman tai laajennuksen p\u00e4ivitt\u00e4misess\u00e4 Gutenberg-lohkoilla on, ett\u00e4 lohkokoodin muuttaminen rikkoo kaikki olemassa olevat viestit, jotka k\u00e4ytt\u00e4v\u00e4t kyseist\u00e4 lohkoa. Onneksi WordPress tarjoaa ratkaisun; tapa poistaa lohkot k\u00e4yt\u00f6st\u00e4. T\u00e4ss\u00e4 viestiss\u00e4 katsomme, kuinka t\u00e4m\u00e4 tehd\u00e4\u00e4n.<\/p>\n

Jos olet ty\u00f6skennellyt lohkojen kehitt\u00e4misen parissa ennen kuin olet luultavasti perehtynyt t\u00e4h\u00e4n lohkovirheeseen, kun olet lis\u00e4nnyt lohkon ja my\u00f6hemmin muuttanut save<\/code>toimintoa.<\/p>\n

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

T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 WordPress vertaa tietokantaan tallennettua lohkoa lohkosi save<\/code>funktion nykyiseen koodiin, eiv\u00e4tk\u00e4 ne t\u00e4sm\u00e4\u00e4. WordPress ei pysty korjaamaan eroa. Useimmissa tapauksissa voit klikata lohkon kolmea pistett\u00e4 ja valita "Yrit\u00e4 lohkopalautus". Jos save<\/code>funktioon tehdyt muutokset olivat pieni\u00e4 (esim. luokkamuutos), WordPress pystyy palauttamaan lohkon. Pahimmassa tapauksessa d sinun on napsautettava "Muunna HTML:ksi" ja menet\u00e4t lohkosi edit<\/code>toiminnallisuuden. Emme tietenk\u00e4\u00e4n voi odottaa, ett\u00e4 estokoodimme k\u00e4ytt\u00e4j\u00e4t l\u00f6yt\u00e4v\u00e4t manuaalisesti kaikki viestit k\u00e4ytt\u00e4m\u00e4ll\u00e4 t\u00e4t\u00e4 lohkoa ja suorittavat n\u00e4m\u00e4 vaiheet jokaiselle.<\/p>\n

Joten ennen kuin teemme p\u00e4ivityksi\u00e4 save<\/code>toimintoon, lis\u00e4\u00e4mme koodin kertomaan WordPressille, kuinka vanhalla save<\/code>toiminnolla tallennettua vanhaa sis\u00e4lt\u00f6\u00e4 k\u00e4sitell\u00e4\u00e4n.<\/p>\n

Menn\u00e4\u00e4n koodiin!<\/h2>\n

Se on itse asiassa aika yksinkertaista. Lyhyesti sanottuna meid\u00e4n on teht\u00e4v\u00e4; lis\u00e4\u00e4 deprecated<\/code>ominaisuus registerBlockType()<\/code>funktiokutsuun. T\u00e4m\u00e4 ominaisuus odottaa joukkoa. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 voit poistaa lohkon k\u00e4yt\u00f6st\u00e4 useita kertoja antamalla useita merkint\u00f6j\u00e4 taulukkoon. Jokainen poisto m\u00e4\u00e4ritell\u00e4\u00e4n objektiksi, jolla on t\u00e4ydellinen attributes<\/code>ominaisuus ja (vanha) save<\/code>toiminto.<\/p>\n

Toisin sanoen m\u00e4\u00e4rit\u00e4t deprecated<\/code>ominaisuuden taulukoksi ja kopioit sitten lohkosi attributes<\/code>ja save<\/code>funktiosi siihen. Sinun on sis\u00e4llytett\u00e4v\u00e4 attribuutit, vaikka et muuta niiss\u00e4 mit\u00e4\u00e4n p\u00e4ivityksess\u00e4. Toimintoa ei tarvitse sis\u00e4llytt\u00e4\u00e4 edit<\/code>poistoihin.<\/p>\n

deprecated: [\n    {\n        attributes: { ... },\n        save: (props) => { ... }\n    }\n]<\/code><\/pre>\n
Katsotaanpa t\u00e4t\u00e4 k\u00e4yt\u00e4nn\u00f6n esimerkiss\u00e4.<\/p>\n
Oletetaan, ett\u00e4 estokoodimme n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4. Toiminto edit<\/code>on j\u00e4tetty pois, koska meid\u00e4n ei tarvitse k\u00e4sitell\u00e4 sit\u00e4 poistoissa.<\/p>\n
const { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\n\u00a0\nimport edit from '.\/edit';\n\u00a0\nregisterBlockType( 'awp\/deprecated-block-example', {\n    title: __( 'Example of deprecating a block' ),\n    icon: 'format-aside',\n    category: 'widgets',\n    attributes: {\n        alignment: {\n            type: 'string',\n            default: 'center'\n        },\n        exampleString: {\n            type: 'string'\n        },\n    },\n    edit,\n    save: (props) => { \n        const { exampleString } = props;\n        return(\n            <div className=\"deprecated-block-example\">\n                <RichText.Content value={ exampleString } \/>\n            <\/div>\n        );\n    }\n});<\/code><\/pre>\n
Oletetaan sitten, ett\u00e4 haluamme tehd\u00e4 muutoksia molempiin m\u00e4\u00e4ritteisiin ja tallentaa ja v\u00e4ltt\u00e4\u00e4 olemassa olevien lohkojen rikkomista. Lis\u00e4\u00e4mme deprecated<\/code>ominaisuuden ja kopioimme siihen koko attributes<\/code>ja save<\/code>taulukkoelementtin\u00e4. Sitten voimme vapaasti tehd\u00e4 muutoksia attributes<\/code>tai\/tai save<\/code>toimintoihin.<\/p>\n
const { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\n\u00a0\nimport edit from '.\/edit';\n\u00a0\nregisterBlockType( 'awp\/deprecated-block-example', {\n    title: __( 'Example of deprecating a block' ),\n    icon: 'format-aside',\n    category: 'widgets',\n    attributes: {\n        alignment: {\n            type: 'string',\n            default: 'center'\n        },\n        exampleString: {\n            type: 'string'\n        },\n        newThing: {\n            type: 'string'\n        },\n    },\n    edit,\n    save: (props) => { \n        const { exampleString, newThing } = props;\n        return(\n            <div className=\"deprecated-block-example\">\n                <RichText.Content value={ exampleString } \/>\n                <div className=\"new-content\">\n                    <RichText.Content value={ newThing } \/>\n                <\/div>\n            <\/div>\n        );\n    },\n    deprecated: [\n        {\n            attributes: {\n                alignment: {\n                    type: 'string',\n                    default: 'center'\n                },\n                exampleString: {\n                    type: 'string'\n                },\n            },\n            save: (props) => { \n                const { exampleString } = props;\n                return(\n                    <div className=\"deprecated-block-example\">\n                        <RichText.Content value={ exampleString } \/>\n                    <\/div>\n                );\n            },\n        }\n    ]\n});<\/code><\/pre>\n
Kun t\u00e4m\u00e4 koodi on k\u00e4\u00e4nnetty, voit etsi\u00e4 olemassa olevan viestin vanhalla estokoodilla, eik\u00e4 sinun pit\u00e4isi saada rikkin\u00e4ist\u00e4 koodia!<\/p>\n
WordPress selvitt\u00e4\u00e4, ett\u00e4 lohko k\u00e4ytt\u00e4\u00e4 vanhentunutta koodiamme, ja lataa sis\u00e4ll\u00f6n k\u00e4ytt\u00e4m\u00e4ll\u00e4 vanhentunutta save<\/code>koodia. Kun teet muutoksia lohkoon ja p\u00e4ivit\u00e4t viestin, lohko tallennetaan k\u00e4ytt\u00e4m\u00e4ll\u00e4 uutta save<\/code>toimintoa.<\/p>\n
Edistyneempi poisto ja lis\u00e4lukeminen<\/h2>\n
Yll\u00e4 oleva koodiesimerkki on poistojen yksinkertaisin muoto. WordPress tukee enemm\u00e4n toimintoja, kuten sis\u00e4llytt\u00e4mist\u00e4 migrate<\/code>ja supports<\/code>jopa vakioiden (ajattele versionumeroiden) m\u00e4\u00e4ritt\u00e4mist\u00e4 vanhentuneelle koodillesi. Tutustu WordPressin dokumentaatioon lohkopoistoista<\/a>.<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Muutosten tekeminen Gutenberg-lohkokoodiin rikkoo kaikki olemassa olevat viestit, jotka k\u00e4ytt\u00e4v\u00e4t kyseist\u00e4 lohkoa. T\u00e4ss\u00e4 viestiss\u00e4 tarkastellaan, kuinka lohkot poistetaan k\u00e4yt\u00f6st\u00e4.<\/p>\n","protected":false},"author":1,"featured_media":151740,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,719,938,938,719,895,813,917,917,1110,834,843,813,834,843,864,864],"tags":[1166],"class_list":["post-233933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koodi","category-kehittaejae","category-gutenberg-5","category-laajennuksia","category-muut","category-n-a","category-opas-aloittelijoille","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233933","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=233933"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233933\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/151740"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}