{"id":1873,"date":"2024-08-19T07:56:15","date_gmt":"2024-08-19T05:56:15","guid":{"rendered":"https:\/\/asgru.com\/?p=1873"},"modified":"2026-09-14T03:12:37","modified_gmt":"2026-09-14T01:12:37","slug":"ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa","status":"publish","type":"post","link":"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/","title":{"rendered":"\u00dclesannete loendi komponendi loomine WordPressi plokiredaktori jaoks \u2013 1. osa"},"content":{"rendered":"\n

Selle praktiliste materjalide sarjaga soovin n\u00e4idata, kui kaugele WordPressi arendus on j\u00f5udnud. 2024. aastal on WordPressi arendaja eelk\u00f5ige frontend-arendaja, kellel peab olema p\u00f5hjalik arusaam HTML-ist\/CSS-ist, Reactist, WordPressi erip\u00e4radest ning ka PHP-st, et iseseisvalt kirjutada loodavate plokkide backend. Tunnistage, arvasite, et asi seisneb lihtsalt Elementoriga nuppude kl\u00f5psamises, eks? \ud83d\ude42<\/p>\n\n\n\n

WordPressi plokiredaktor (Gutenberg) on oluliselt muutnud WordPressi saitidel sisu loomise ja redigeerimise protsessi, pakkudes arendajatele v\u00f5imsaid t\u00f6\u00f6riistu kohandatavate ja funktsionaalsete plokkide loomiseks. Selles juhendis loome oma \u201eTodo-Listi\u201c komponendi, mis v\u00f5imaldab kasutajatel luua \u00fclesannete loendeid ja saata andmeid serverisse, kui \u00fclesannete olek muutub.<\/p>\n\n\n\n

Ploki p\u00f5hielemendid<\/h3>\n\n\n\n

Loodav plokk koosneb mitmest p\u00f5hielemendist:<\/p>\n\n\n\n

    \n
  1. RichText<\/strong>: komponent, mis v\u00f5imaldab kasutajatel ploki sees teksti sisestada ja redigeerida.<\/li>\n\n\n\n
  2. InspectorControls<\/strong>: paneel, mis pakub redaktoris ploki seadistusi ja juhtelemente.<\/li>\n\n\n\n
  3. CheckboxControl<\/strong>: juhtelement, mida kasutatakse \u00fclesannete l\u00f5petatuks m\u00e4rkimiseks.<\/li>\n\n\n\n
  4. useState<\/strong>: hook, mis haldab ploki sees \u00fclesannete olekut.<\/li>\n\n\n\n
  5. fetch API<\/strong>: kasutatakse \u00fclesannete andmete saatmiseks serverisse.<\/li>\n<\/ol>\n\n\n\n

    Iga plokk luuakse eraldi pluginana, mida saab teistes WordPressi projektides uuesti kasutada. See v\u00f5imaldab loodud ploki h\u00f5lpsalt integreerida mis tahes teistele WordPressil t\u00f6\u00f6tavatele saitidele.<\/p>\n\n\n\n

    Arenduskeskkonna seadistamine<\/h3>\n\n\n\n

    Enne komponendi loomise alustamist on oluline veenduda, et teie arenduskeskkond on \u00f5igesti seadistatud. Ploki arendamiseks vajate j\u00e4rgmisi t\u00f6\u00f6riistu:<\/p>\n\n\n\n

      \n
    1. WordPress<\/strong>: veenduge, et teie WordPressi versioon on 5.0 v\u00f5i uuem, kuna plokiredaktor v\u00f5eti kasutusele selles versioonis.<\/li>\n\n\n\n
    2. Node.js ja npm<\/strong>: vajalikud JavaScriptiga t\u00f6\u00f6tamiseks ja s\u00f5ltuvuste haldamiseks.<\/li>\n\n\n\n
    3. WP-CLI<\/strong> (valikuline): WordPressiga t\u00f6\u00f6tamiseks m\u00f5eldud k\u00e4sureat\u00f6\u00f6riist, mis v\u00f5ib arendust lihtsustada.<\/li>\n<\/ol>\n\n\n\n

      Node.js-i ja npm-i installimine<\/h3>\n\n\n\n

      Kui Node.js ja npm ei ole veel teie arvutisse installitud, laadige need alla ja installige need Node.js-i ametlikult veebisaidilt.<\/p>\n\n\n\n

      P\u00e4rast installimist k\u00e4ivitage j\u00e4rgmised k\u00e4sud, et veenduda, kas k\u00f5ik on \u00f5igesti installitud:<\/p>\n\n\n\n

      node -v\nnpm -v<\/code><\/pre>\n\n\n\n
      Kui k\u00e4sud tagastavad versiooninumbrid, t\u00f6\u00f6tab k\u00f5ik \u00f5igesti.<\/p>\n\n\n\n
      Todo-Listi ploki loomine<\/h3>\n\n\n\n
      Ploki loomise protsessi kiirendamiseks saate kasutada k\u00e4sku, mis genereerib automaatselt kogu projektistruktuuri, sealhulgas konfiguratsioonid ja failid.<\/p>\n\n\n\n
      1. samm: ploki loomine k\u00e4suga<\/h3>\n\n\n\n
      Avage terminal ja k\u00e4ivitage j\u00e4rgmine k\u00e4sk, et luua automaatselt plokk \u201eTodo-List\u201c:<\/p>\n\n\n\n
      npx @wordpress\/create-block@latest todo-list<\/code><\/pre>\n\n\n\n
      See k\u00e4sk teeb teie eest j\u00e4rgmised toimingud:<\/p>\n\n\n\n
        \n
      1. Projekti l\u00e4htestamine:<\/strong> k\u00e4sk loob uue kataloogi nimega\u00a0todo-list, mis sisaldab k\u00f5iki ploki jaoks vajalikke faile ja struktuuri.<\/li>\n\n\n\n
      2. S\u00f5ltuvuste installimine:<\/strong> k\u00f5ik vajalikud paketid, n\u00e4iteks\u00a0@wordpress\/scripts, installitakse automaatselt.<\/li>\n\n\n\n
      3. Failistruktuuri loomine:<\/strong> struktuur h\u00f5lmab kaustu\u00a0src\u00a0ja\u00a0build\u00a0ning faili\u00a0index.js, mis sisaldab ploki p\u00f5hikoodi.<\/li>\n\n\n\n
      4. Seadistamine <\/strong>block.json:\u00a0see fail luuakse p\u00f5hikonfiguratsiooniga, mis m\u00e4\u00e4ratleb ploki \u201eTodo-List\u201c.<\/li>\n<\/ol>\n\n\n\n
        Failistruktuur ja kirjeldus<\/h3>\n\n\n\n
        P\u00e4rast k\u00e4su k\u00e4ivitamist luuakse j\u00e4rgmine projektistruktuur:<\/p>\n\n\n\n
        todo-list\/\n\u2502\n\u251c\u2500\u2500 src\/\n\u2502   \u2514\u2500\u2500 index.js\n\u2502\n\u251c\u2500\u2500 build\/\n\u2502\n\u251c\u2500\u2500 block.json\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 README.md<\/code><\/pre>\n\n\n\n
        1. src\/index.js<\/h3>\n\n\n\n
        Kaustas src asuv fail index.js sisaldab kogu teie ploki l\u00e4htekoodi. Siin rakendatakse ploki loogika, sealhulgas selle v\u00e4limus ja kasutajaga suhtlemine. Koodi p\u00f5hiosad h\u00f5lmavad ploki registreerimist funktsiooni registerBlockType abil, atribuutide seadistamist ning ploki redigeerimise ja salvestamise funktsioonide m\u00e4\u00e4ratlemist.<\/p>\n\n\n\n
        Faili index.js n\u00e4idissisu:<\/p>\n\n\n\n
        import { registerBlockType } from '@wordpress\/blocks';\nimport { useState } from '@wordpress\/element';\nimport { RichText, InspectorControls } from '@wordpress\/block-editor';\nimport { PanelBody, CheckboxControl } from '@wordpress\/components';\n\nregisterBlockType('todo-plugin\/todo-list', {\n    title: 'Todo List',\n    icon: 'list-view',\n    category: 'widgets',\n    attributes: {\n        tasks: {\n            type: 'array',\n            default: [],\n        },\n    },\n    edit({ attributes, setAttributes }) {\n        const { tasks } = attributes;\n        const [taskText, setTaskText] = useState('');\n\n        const addTask = () => {\n            if (taskText) {\n                const newTasks = [...tasks, { text: taskText, done: false }];\n                setAttributes({ tasks: newTasks });\n                setTaskText('');\n                sendTasksToServer(newTasks);\n            }\n        };\n\n        const toggleTaskDone = (index) => {\n            const newTasks = tasks.map((task, i) =>\n                i === index ? { ...task, done: !task.done } : task\n            );\n            setAttributes({ tasks: newTasks });\n            sendTasksToServer(newTasks);\n        };\n\n        const sendTasksToServer = (tasks) => {\n            \/\/ Example of sending data to the server\n            fetch('\/wp-json\/todo\/v1\/update', {\n                method: 'POST',\n                headers: {\n                    'Content-Type': 'application\/json',\n                },\n                body: JSON.stringify({ tasks }),\n            });\n        };\n\n        return (\n            <div>\n                <InspectorControls>\n                    <PanelBody title=\"Tasks\">\n                        {tasks.map((task, index) => (\n                            <CheckboxControl\n                                key={index}\n                                label={task.text}\n                                checked={task.done}\n                                onChange={() => toggleTaskDone(index)}\n                            \/>\n                        ))}\n                    <\/PanelBody>\n                <\/InspectorControls>\n                <div>\n                    <RichText\n                        tagName=\"p\"\n                        value={taskText}\n                        onChange={(text) => setTaskText(text)}\n                        placeholder=\"Enter new task\"\n                    \/>\n                    <button onClick={addTask}>Add Task<\/button>\n                <\/div>\n                <ul>\n                    {tasks.map((task, index) => (\n                        <li key={index}>\n                            <CheckboxControl\n                                label={task.text}\n                                checked={task.done}\n                                onChange={() => toggleTaskDone(index)}\n                            \/>\n                        <\/li>\n                    ))}\n                <\/ul>\n            <\/div>\n        );\n    },\n    save({ attributes }) {\n        const { tasks } = attributes;\n\n        return (\n            <ul>\n                {tasks.map((task, index) => (\n                    <li key={index}>\n                        <RichText.Content\n                            tagName=\"span\"\n                            value={task.text}\n                            style={{ textDecoration: task.done ? 'line-through' : 'none' }}\n                        \/>\n                    <\/li>\n                ))}\n            <\/ul>\n        );\n    },\n});<\/code><\/pre>\n\n\n\n
        2.\u00a0build<\/h3>\n\n\n\n
        Kaust build on m\u00f5eldud kompileeritud failide talletamiseks. P\u00e4rast projekti buildimist k\u00e4suga npm run build paigutatakse sellesse kausta kasutusvalmis fail index.js, mida WordPress kasutab ploki kuvamiseks ja k\u00e4itamiseks.<\/p>\n\n\n\n
        3. block.json<\/h3>\n\n\n\n
        Fail block.json sisaldab teie ploki metaandmeid. See m\u00e4\u00e4ratleb ploki nime, kategooria, ikooni, skriptid ja selle t\u00f6\u00f6ks vajalikud stiilid. See fail on WordPressis ploki registreerimiseks h\u00e4davajalik.<\/p>\n\n\n\n
        Faili block.json n\u00e4idissisu:<\/p>\n\n\n\n
        {\n  \"apiVersion\": 2,\n  \"name\": \"todo-plugin\/todo-list\",\n  \"title\": \"Todo List\",\n  \"category\": \"widgets\",\n  \"icon\": \"list-view\",\n  \"description\": \"A customizable todo list block.\",\n  \"keywords\": [ \"todo\", \"tasks\", \"list\" ],\n  \"version\": \"1.0.0\",\n  \"textdomain\": \"todo-list\",\n  \"editorScript\": \"file:.\/build\/index.js\"\n}<\/code><\/pre>\n\n\n\n
        4. package.json<\/h3>\n\n\n\n
        Fail package.json sisaldab teavet projekti ja selle s\u00f5ltuvuste kohta. See haldab ploki arendamiseks ja buildimiseks vajalike pakettide installimist ja kasutamist. Fail luuakse projekti l\u00e4htestamisel automaatselt ning seda uuendatakse uute s\u00f5ltuvuste lisamisel.<\/p>\n\n\n\n
        Faili package.json n\u00e4idissisu:<\/p>\n\n\n\n
        {\n  \"name\": \"todo-list\",\n  \"version\": \"1.0.0\",\n  \"description\": \"A custom block for todo list\",\n  \"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n  },\n  \"devDependencies\": {\n    \"@wordpress\/scripts\": \"^24.0.0\"\n  }\n}<\/code><\/pre>\n\n\n\n
        5. README.md<\/h3>\n\n\n\n
        Fail README.md sisaldab projekti kirjeldust, installimis- ja kasutusjuhiseid ning muud olulist teavet, mida arendajad v\u00f5i kasutajad v\u00f5ivad vajada. See fail on kasulik projekti dokumenteerimiseks.<\/p>\n\n\n\n
        Projekti buildimine<\/h3>\n\n\n\n
        P\u00e4rast koodis muudatuste tegemist buildige projekt, et saada WordPressi jaoks kasutusvalmis fail:<\/p>\n\n\n\n
        npm run build<\/pre>\n\n\n\n
        K\u00e4sk build kompileerib teie koodi ja paigutab selle kausta build.<\/p>\n\n\n\n
        Ploki registreerimine WordPressis<\/h3>\n\n\n\n
        N\u00fc\u00fcd, kui plokk on valmis, tuleb see WordPressis registreerida. Selleks lisage oma plugina- v\u00f5i teemafaili j\u00e4rgmine kood:<\/p>\n\n\n\n
        function todo_plugin_register_block() {\n    wp_register_script(\n        'todo-list-editor-script',\n        plugins_url( 'build\/index.js', __FILE__ ),\n        array( 'wp-blocks', 'wp-element', 'wp-editor' ),\n        filemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n    );\n\n    register_block_type( 'todo-plugin\/todo-list', array(\n        'editor_script' => 'todo-list-editor-script',\n    ) );\n}\nadd_action( 'init', 'todo_plugin_register_block' );<\/code><\/pre>\n\n\n\n
        See kood registreerib teie ploki WordPressis ja lisab j\u00e4rjekorda kompileeritud JavaScripti faili.<\/p>\n\n\n\n
        Kokkuv\u00f5te<\/h3>\n\n\n\n
        K\u00e4su npx @wordpress\/create-block@latest kasutamine kiirendab oluliselt uue ploki loomist WordPressi plokiredaktori jaoks. Selles juhendis uurisime, kuidas luua plokk \u201eTodo-List\u201c, mis v\u00f5imaldab kasutajatel koostada \u00fclesannete loendeid ja hallata nende l\u00f5petamist ning saadab andmed serverisse. Seda komponenti saab laiendada, lisades uusi funktsioone ja parandades kasutajaga suhtlemist, mis avab laialdased v\u00f5imalused teie WordPressi saidi kohandamiseks.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Selle praktiliste materjalide sarjaga soovin n\u00e4idata, kui kaugele WordPressi arendus on j\u00f5udnud. 2024. aastal on WordPressi arendaja eelk\u00f5ige frontend-arendaja, kellel peab olema p\u00f5hjalik arusaam HTML-ist\/CSS-ist, Reactist, WordPressi erip\u00e4radest ning ka PHP-st, et iseseisvalt kirjutada loodavate plokkide backend. Tunnistage, arvasite, et asi seisneb lihtsalt Elementoriga nuppude kl\u00f5psamises, eks? \ud83d\ude42 WordPressi plokiredaktor (Gutenberg) on oluliselt muutnud WordPressi […]<\/p>\n","protected":false},"author":1,"featured_media":904,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1873","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"yoast_head":"\n\u00dclesannete loendi komponendi loomine WordPressi plokiredaktori jaoks \u2013 1. osa - asgru<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/\" \/>\n<meta property=\"og:locale\" content=\"et_EE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00dclesannete loendi komponendi loomine WordPressi plokiredaktori jaoks \u2013 1. osa - asgru\" \/>\n<meta property=\"og:description\" content=\"Selle praktiliste materjalide sarjaga soovin n\u00e4idata, kui kaugele WordPressi arendus on j\u00f5udnud. 2024. aastal on WordPressi arendaja eelk\u00f5ige frontend-arendaja, kellel peab olema p\u00f5hjalik arusaam HTML-ist\/CSS-ist, Reactist, WordPressi erip\u00e4radest ning ka PHP-st, et iseseisvalt kirjutada loodavate plokkide backend. Tunnistage, arvasite, et asi seisneb lihtsalt Elementoriga nuppude kl\u00f5psamises, eks? \ud83d\ude42 WordPressi plokiredaktor (Gutenberg) on oluliselt muutnud WordPressi […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/\" \/>\n<meta property=\"og:site_name\" content=\"asgru\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/asgru.wp\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-19T05:56:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-14T01:12:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1186\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"asgru\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ArtemKondranin\" \/>\n<meta name=\"twitter:site\" content=\"@ArtemKondranin\" \/>\n<meta name=\"twitter:label1\" content=\"Kirjutanud\" \/>\n\t<meta name=\"twitter:data1\" content=\"asgru\" \/>\n\t<meta name=\"twitter:label2\" content=\"Eeldatav lugemisaeg\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\\\/\"},\"author\":{\"name\":\"asgru\",\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/#\\\/schema\\\/person\\\/8f6cca385f5ae3eb7802b1e40b721576\"},\"headline\":\"\u00dclesannete loendi komponendi loomine WordPressi plokiredaktori jaoks \u2013 1. osa\",\"datePublished\":\"2024-08-19T05:56:15+00:00\",\"dateModified\":\"2026-09-14T01:12:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\\\/\"},\"wordCount\":777,\"publisher\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"et\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\\\/\",\"url\":\"https:\\\/\\\/asgru.com\\\/et\\\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\\\/\",\"name\":\"\u00dclesannete loendi komponendi loomine WordPressi plokiredaktori jaoks \u2013 1. osa - asgru\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"datePublished\":\"2024-08-19T05:56:15+00:00\",\"dateModified\":\"2026-09-14T01:12:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\\\/#breadcrumb\"},\"inLanguage\":\"et\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/asgru.com\\\/et\\\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"et\",\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\\\/#primaryimage\",\"url\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"contentUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"width\":2560,\"height\":1186},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/asgru.com\\\/et\\\/avaleht\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00dclesannete loendi komponendi loomine WordPressi plokiredaktori jaoks \u2013 1. osa\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/#website\",\"url\":\"https:\\\/\\\/asgru.com\\\/et\\\/\",\"name\":\"asgru\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/asgru.com\\\/et\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"et\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/#organization\",\"name\":\"asgru\",\"url\":\"https:\\\/\\\/asgru.com\\\/et\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"et\",\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/logo-black.svg\",\"contentUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/logo-black.svg\",\"caption\":\"asgru\"},\"image\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/asgru.wp\\\/\",\"https:\\\/\\\/x.com\\\/ArtemKondranin\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/asgru\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/asgru.com\\\/et\\\/#\\\/schema\\\/person\\\/8f6cca385f5ae3eb7802b1e40b721576\",\"name\":\"asgru\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"et\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g\",\"caption\":\"asgru\"},\"sameAs\":[\"http:\\\/\\\/asgru.loc\"],\"url\":\"https:\\\/\\\/asgru.com\\\/et\\\/author\\\/asgru\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00dclesannete loendi komponendi loomine WordPressi plokiredaktori jaoks \u2013 1. osa - asgru","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/","og_locale":"et_EE","og_type":"article","og_title":"\u00dclesannete loendi komponendi loomine WordPressi plokiredaktori jaoks \u2013 1. osa - asgru","og_description":"Selle praktiliste materjalide sarjaga soovin n\u00e4idata, kui kaugele WordPressi arendus on j\u00f5udnud. 2024. aastal on WordPressi arendaja eelk\u00f5ige frontend-arendaja, kellel peab olema p\u00f5hjalik arusaam HTML-ist\/CSS-ist, Reactist, WordPressi erip\u00e4radest ning ka PHP-st, et iseseisvalt kirjutada loodavate plokkide backend. Tunnistage, arvasite, et asi seisneb lihtsalt Elementoriga nuppude kl\u00f5psamises, eks? \ud83d\ude42 WordPressi plokiredaktor (Gutenberg) on oluliselt muutnud WordPressi […]","og_url":"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/","og_site_name":"asgru","article_publisher":"https:\/\/www.facebook.com\/asgru.wp\/","article_published_time":"2024-08-19T05:56:15+00:00","article_modified_time":"2026-09-14T01:12:37+00:00","og_image":[{"width":2560,"height":1186,"url":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","type":"image\/png"}],"author":"asgru","twitter_card":"summary_large_image","twitter_creator":"@ArtemKondranin","twitter_site":"@ArtemKondranin","twitter_misc":{"Kirjutanud":"asgru","Eeldatav lugemisaeg":"6 minutit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/#article","isPartOf":{"@id":"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/"},"author":{"name":"asgru","@id":"https:\/\/asgru.com\/et\/#\/schema\/person\/8f6cca385f5ae3eb7802b1e40b721576"},"headline":"\u00dclesannete loendi komponendi loomine WordPressi plokiredaktori jaoks \u2013 1. osa","datePublished":"2024-08-19T05:56:15+00:00","dateModified":"2026-09-14T01:12:37+00:00","mainEntityOfPage":{"@id":"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/"},"wordCount":777,"publisher":{"@id":"https:\/\/asgru.com\/et\/#organization"},"image":{"@id":"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/#primaryimage"},"thumbnailUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","articleSection":["Uncategorized"],"inLanguage":"et"},{"@type":"WebPage","@id":"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/","url":"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/","name":"\u00dclesannete loendi komponendi loomine WordPressi plokiredaktori jaoks \u2013 1. osa - asgru","isPartOf":{"@id":"https:\/\/asgru.com\/et\/#website"},"primaryImageOfPage":{"@id":"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/#primaryimage"},"image":{"@id":"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/#primaryimage"},"thumbnailUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","datePublished":"2024-08-19T05:56:15+00:00","dateModified":"2026-09-14T01:12:37+00:00","breadcrumb":{"@id":"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/#breadcrumb"},"inLanguage":"et","potentialAction":[{"@type":"ReadAction","target":["https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/"]}]},{"@type":"ImageObject","inLanguage":"et","@id":"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/#primaryimage","url":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","contentUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","width":2560,"height":1186},{"@type":"BreadcrumbList","@id":"https:\/\/asgru.com\/et\/ulesannete-loendi-komponendi-loomine-wordpressi-plokiredaktori-jaoks-1-osa\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/asgru.com\/et\/avaleht\/"},{"@type":"ListItem","position":2,"name":"\u00dclesannete loendi komponendi loomine WordPressi plokiredaktori jaoks \u2013 1. osa"}]},{"@type":"WebSite","@id":"https:\/\/asgru.com\/et\/#website","url":"https:\/\/asgru.com\/et\/","name":"asgru","description":"","publisher":{"@id":"https:\/\/asgru.com\/et\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/asgru.com\/et\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"et"},{"@type":"Organization","@id":"https:\/\/asgru.com\/et\/#organization","name":"asgru","url":"https:\/\/asgru.com\/et\/","logo":{"@type":"ImageObject","inLanguage":"et","@id":"https:\/\/asgru.com\/et\/#\/schema\/logo\/image\/","url":"https:\/\/asgru.com\/wp-content\/uploads\/2025\/06\/logo-black.svg","contentUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2025\/06\/logo-black.svg","caption":"asgru"},"image":{"@id":"https:\/\/asgru.com\/et\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/asgru.wp\/","https:\/\/x.com\/ArtemKondranin","https:\/\/www.linkedin.com\/in\/asgru\/"]},{"@type":"Person","@id":"https:\/\/asgru.com\/et\/#\/schema\/person\/8f6cca385f5ae3eb7802b1e40b721576","name":"asgru","image":{"@type":"ImageObject","inLanguage":"et","@id":"https:\/\/secure.gravatar.com\/avatar\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g","caption":"asgru"},"sameAs":["http:\/\/asgru.loc"],"url":"https:\/\/asgru.com\/et\/author\/asgru\/"}]}},"_links":{"self":[{"href":"https:\/\/asgru.com\/et\/wp-json\/wp\/v2\/posts\/1873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/asgru.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/asgru.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/asgru.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/asgru.com\/et\/wp-json\/wp\/v2\/comments?post=1873"}],"version-history":[{"count":1,"href":"https:\/\/asgru.com\/et\/wp-json\/wp\/v2\/posts\/1873\/revisions"}],"predecessor-version":[{"id":1874,"href":"https:\/\/asgru.com\/et\/wp-json\/wp\/v2\/posts\/1873\/revisions\/1874"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/asgru.com\/et\/wp-json\/wp\/v2\/media\/904"}],"wp:attachment":[{"href":"https:\/\/asgru.com\/et\/wp-json\/wp\/v2\/media?parent=1873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/asgru.com\/et\/wp-json\/wp\/v2\/categories?post=1873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/asgru.com\/et\/wp-json\/wp\/v2\/tags?post=1873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}