{"id":1865,"date":"2024-08-19T07:56:15","date_gmt":"2024-08-19T05:56:15","guid":{"rendered":"https:\/\/asgru.com\/?p=1865"},"modified":"2026-09-14T02:42:49","modified_gmt":"2026-09-14T00:42:49","slug":"tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1","status":"publish","type":"post","link":"https:\/\/asgru.com\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/","title":{"rendered":"Tworzenie komponentu listy zada\u0144 dla edytora blokowego WordPress \u2014 cz\u0119\u015b\u0107 1"},"content":{"rendered":"\n

W tej serii praktycznych materia\u0142\u00f3w chc\u0119 pokaza\u0107, jak daleko zaszed\u0142 rozw\u00f3j WordPressa. W 2024 roku programista WordPressa jest przede wszystkim frontend developerem, kt\u00f3ry musi dobrze zna\u0107 HTML\/CSS, React, specyfik\u0119 WordPressa, a tak\u017ce PHP, aby samodzielnie pisa\u0107 backend dla tworzonych blok\u00f3w. Przyznajcie, my\u015bleli\u015bcie, \u017ce chodzi tylko o klikanie przycisk\u00f3w w Elementorze, prawda? \ud83d\ude42<\/p>\n\n\n\n

Edytor blokowy WordPressa (Gutenberg) znacz\u0105co zmieni\u0142 proces tworzenia i edytowania tre\u015bci na stronach WordPress, zapewniaj\u0105c programistom zaawansowane narz\u0119dzia do tworzenia konfigurowalnych i funkcjonalnych blok\u00f3w. W tym poradniku stworzymy w\u0142asny komponent \u201eTodo-List\u201d, kt\u00f3ry pozwoli u\u017cytkownikom tworzy\u0107 listy zada\u0144 i wysy\u0142a\u0107 dane na serwer po zmianie statusu zada\u0144.<\/p>\n\n\n\n

Podstawowe elementy bloku<\/h3>\n\n\n\n

Tworzony przez nas blok b\u0119dzie sk\u0142ada\u0142 si\u0119 z kilku kluczowych element\u00f3w:<\/p>\n\n\n\n

    \n
  1. RichText<\/strong>: Komponent umo\u017cliwiaj\u0105cy u\u017cytkownikom wprowadzanie i edytowanie tekstu w obr\u0119bie bloku.<\/li>\n\n\n\n
  2. InspectorControls<\/strong>: Panel udost\u0119pniaj\u0105cy ustawienia i kontrolki bloku w edytorze.<\/li>\n\n\n\n
  3. CheckboxControl<\/strong>: Element kontrolny u\u017cywany do oznaczania zada\u0144 jako uko\u0144czonych.<\/li>\n\n\n\n
  4. useState<\/strong>: Hook zarz\u0105dzaj\u0105cy stanem zada\u0144 w obr\u0119bie bloku.<\/li>\n\n\n\n
  5. fetch API<\/strong>: S\u0142u\u017cy do wysy\u0142ania danych zada\u0144 na serwer.<\/li>\n<\/ol>\n\n\n\n

    Ka\u017cdy blok jest tworzony jako osobna wtyczka, kt\u00f3r\u0105 mo\u017cna ponownie wykorzysta\u0107 w innych projektach WordPress. Dzi\u0119ki temu mo\u017cna \u0142atwo zintegrowa\u0107 utworzony blok z dowolnymi innymi stronami dzia\u0142aj\u0105cymi na WordPressie.<\/p>\n\n\n\n

    Konfiguracja \u015brodowiska programistycznego<\/h3>\n\n\n\n

    Zanim zaczniemy budowa\u0107 komponent, wa\u017cne jest upewnienie si\u0119, \u017ce \u015brodowisko programistyczne zosta\u0142o prawid\u0142owo skonfigurowane. Do tworzenia bloku b\u0119d\u0105 potrzebne nast\u0119puj\u0105ce narz\u0119dzia:<\/p>\n\n\n\n

      \n
    1. WordPress<\/strong>: Upewnij si\u0119, \u017ce u\u017cywasz WordPressa w wersji 5.0 lub nowszej, poniewa\u017c edytor blokowy zosta\u0142 wprowadzony w tej wersji.<\/li>\n\n\n\n
    2. Node.js and npm<\/strong>: Wymagane do pracy z JavaScriptem i zarz\u0105dzania zale\u017cno\u015bciami.<\/li>\n\n\n\n
    3. WP-CLI<\/strong> (opcjonalnie): Narz\u0119dzie wiersza polece\u0144 do pracy z WordPressem, kt\u00f3re mo\u017ce upro\u015bci\u0107 proces tworzenia.<\/li>\n<\/ol>\n\n\n\n

      Instalowanie Node.js i npm<\/h3>\n\n\n\n

      Je\u015bli Node.js i npm nie s\u0105 jeszcze zainstalowane na Twoim komputerze, pobierz je i zainstaluj z oficjalnej strony Node.js.<\/p>\n\n\n\n

      Po instalacji uruchom nast\u0119puj\u0105ce polecenia, aby upewni\u0107 si\u0119, \u017ce wszystko zosta\u0142o poprawnie zainstalowane:<\/p>\n\n\n\n

      node -v\nnpm -v<\/code><\/pre>\n\n\n\n
      Je\u015bli polecenia zwr\u00f3c\u0105 numery wersji, wszystko dzia\u0142a poprawnie.<\/p>\n\n\n\n
      Tworzenie bloku Todo-List<\/h3>\n\n\n\n
      Aby przyspieszy\u0107 proces tworzenia bloku, mo\u017cesz u\u017cy\u0107 polecenia, kt\u00f3re automatycznie wygeneruje ca\u0142\u0105 struktur\u0119 projektu, w tym konfiguracje i pliki.<\/p>\n\n\n\n
      Krok 1: tworzenie bloku za pomoc\u0105 polecenia<\/h3>\n\n\n\n
      Otw\u00f3rz terminal i uruchom nast\u0119puj\u0105ce polecenie, aby automatycznie utworzy\u0107 blok \u201eTodo-List\u201d:<\/p>\n\n\n\n
      npx @wordpress\/create-block@latest todo-list<\/code><\/pre>\n\n\n\n
      To polecenie wykona za Ciebie nast\u0119puj\u0105ce kroki:<\/p>\n\n\n\n
        \n
      1. Inicjalizacja projektu:<\/strong> Polecenie utworzy nowy katalog o nazwie\u00a0todo-list, zawieraj\u0105cy wszystkie niezb\u0119dne pliki i struktur\u0119 bloku.<\/li>\n\n\n\n
      2. Instalowanie zale\u017cno\u015bci:<\/strong> Wszystkie niezb\u0119dne pakiety, takie jak\u00a0@wordpress\/scripts, zostan\u0105 automatycznie zainstalowane.<\/li>\n\n\n\n
      3. Tworzenie struktury plik\u00f3w:<\/strong> Struktura b\u0119dzie obejmowa\u0107 foldery\u00a0src\u00a0i\u00a0build, a tak\u017ce plik\u00a0index.js\u00a0z podstawowym kodem bloku.<\/li>\n\n\n\n
      4. Konfiguracja <\/strong>block.json:\u00a0Ten plik zostanie utworzony z podstawow\u0105 konfiguracj\u0105 definiuj\u0105c\u0105 blok \u201eTodo-List\u201d.<\/li>\n<\/ol>\n\n\n\n
        Struktura plik\u00f3w i opis<\/h3>\n\n\n\n
        Po uruchomieniu polecenia zostanie utworzona nast\u0119puj\u0105ca struktura projektu:<\/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
        Plik index.js w folderze src zawiera ca\u0142y kod \u017ar\u00f3d\u0142owy bloku. To w\u0142a\u015bnie tutaj implementowana jest logika bloku, w tym jego wygl\u0105d i interakcja z u\u017cytkownikiem. G\u0142\u00f3wne cz\u0119\u015bci kodu obejmuj\u0105 rejestrowanie bloku za pomoc\u0105 funkcji registerBlockType , konfiguracj\u0119 atrybut\u00f3w oraz definiowanie funkcji edycji i zapisywania bloku.<\/p>\n\n\n\n
        Przyk\u0142adowa zawarto\u015b\u0107 pliku index.js:<\/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
        Folder build s\u0142u\u017cy do przechowywania skompilowanych plik\u00f3w. Po zbudowaniu projektu za pomoc\u0105 polecenia npm run build w tym folderze zostanie umieszczony gotowy do u\u017cycia plik index.js, kt\u00f3ry b\u0119dzie wykorzystywany przez WordPress do wy\u015bwietlania i obs\u0142ugi bloku.<\/p>\n\n\n\n
        3. block.json<\/h3>\n\n\n\n
        Plik block.json zawiera metadane bloku. Definiuje nazw\u0119 bloku, kategori\u0119, ikon\u0119, skrypty i style niezb\u0119dne do jego dzia\u0142ania. Plik ten jest niezb\u0119dny do zarejestrowania bloku w WordPressie.<\/p>\n\n\n\n
        Przyk\u0142adowa zawarto\u015b\u0107 pliku block.json:<\/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
        Plik package.json zawiera informacje o projekcie i jego zale\u017cno\u015bciach. Zarz\u0105dza instalacj\u0105 i u\u017cywaniem pakiet\u00f3w wymaganych do tworzenia i budowania bloku. Plik ten jest automatycznie tworzony podczas inicjalizacji projektu i aktualizowany w miar\u0119 dodawania nowych zale\u017cno\u015bci.<\/p>\n\n\n\n
        Przyk\u0142adowa zawarto\u015b\u0107 pliku package.json:<\/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
        Plik README.md zawiera opis projektu, instrukcje instalacji i u\u017cytkowania oraz inne wa\u017cne informacje, kt\u00f3re mog\u0105 by\u0107 potrzebne programistom lub u\u017cytkownikom. Plik ten jest przydatny do dokumentowania projektu.<\/p>\n\n\n\n
        Budowanie projektu<\/h3>\n\n\n\n
        Po wprowadzeniu zmian w kodzie zbuduj projekt, aby uzyska\u0107 gotowy do u\u017cycia plik dla WordPressa:<\/p>\n\n\n\n
        npm run build<\/pre>\n\n\n\n
        Polecenie build skompiluje kod i umie\u015bci go w folderze build.<\/p>\n\n\n\n
        Rejestrowanie bloku w WordPressie<\/h3>\n\n\n\n
        Teraz, gdy blok jest gotowy, nale\u017cy zarejestrowa\u0107 go w WordPressie. Aby to zrobi\u0107, dodaj nast\u0119puj\u0105cy kod do pliku wtyczki lub motywu:<\/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
        Ten kod zarejestruje blok w WordPressie i doda do kolejki skompilowany plik JavaScript.<\/p>\n\n\n\n
        Podsumowanie<\/h3>\n\n\n\n
        U\u017cycie polecenia npx @wordpress\/create-block@latest znacz\u0105co przyspiesza proces tworzenia nowego bloku dla edytora blokowego WordPressa. W tym poradniku om\u00f3wili\u015bmy tworzenie bloku \u201eTodo-List\u201d, kt\u00f3ry umo\u017cliwia u\u017cytkownikom tworzenie list zada\u0144 i zarz\u0105dzanie ich realizacj\u0105, a dane s\u0105 wysy\u0142ane na serwer. Komponent ten mo\u017cna rozbudowa\u0107 o nowe funkcje i ulepszy\u0107 interakcj\u0119 z u\u017cytkownikiem, co otwiera szerokie mo\u017cliwo\u015bci dostosowania witryny WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"
        W tej serii praktycznych materia\u0142\u00f3w chc\u0119 pokaza\u0107, jak daleko zaszed\u0142 rozw\u00f3j WordPressa. W 2024 roku programista WordPressa jest przede wszystkim frontend developerem, kt\u00f3ry musi dobrze zna\u0107 HTML\/CSS, React, specyfik\u0119 WordPressa, a tak\u017ce PHP, aby samodzielnie pisa\u0107 backend dla tworzonych blok\u00f3w. Przyznajcie, my\u015bleli\u015bcie, \u017ce chodzi tylko o klikanie przycisk\u00f3w w Elementorze, prawda? \ud83d\ude42 Edytor blokowy WordPressa […]<\/p>\n","protected":false},"author":1,"featured_media":909,"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-1865","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"yoast_head":"\nTworzenie komponentu listy zada\u0144 dla edytora blokowego WordPress \u2014 cz\u0119\u015b\u0107 1 - 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\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tworzenie komponentu listy zada\u0144 dla edytora blokowego WordPress \u2014 cz\u0119\u015b\u0107 1 - asgru\" \/>\n<meta property=\"og:description\" content=\"W tej serii praktycznych materia\u0142\u00f3w chc\u0119 pokaza\u0107, jak daleko zaszed\u0142 rozw\u00f3j WordPressa. W 2024 roku programista WordPressa jest przede wszystkim frontend developerem, kt\u00f3ry musi dobrze zna\u0107 HTML\/CSS, React, specyfik\u0119 WordPressa, a tak\u017ce PHP, aby samodzielnie pisa\u0107 backend dla tworzonych blok\u00f3w. Przyznajcie, my\u015bleli\u015bcie, \u017ce chodzi tylko o klikanie przycisk\u00f3w w Elementorze, prawda? \ud83d\ude42 Edytor blokowy WordPressa […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/asgru.com\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/\" \/>\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-14T00:42:49+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=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"asgru\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\\\/\"},\"author\":{\"name\":\"asgru\",\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/#\\\/schema\\\/person\\\/8f6cca385f5ae3eb7802b1e40b721576\"},\"headline\":\"Tworzenie komponentu listy zada\u0144 dla edytora blokowego WordPress \u2014 cz\u0119\u015b\u0107 1\",\"datePublished\":\"2024-08-19T05:56:15+00:00\",\"dateModified\":\"2026-09-14T00:42:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\\\/\"},\"wordCount\":916,\"publisher\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\\\/\",\"url\":\"https:\\\/\\\/asgru.com\\\/pl\\\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\\\/\",\"name\":\"Tworzenie komponentu listy zada\u0144 dla edytora blokowego WordPress \u2014 cz\u0119\u015b\u0107 1 - asgru\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\\\/#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-14T00:42:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/asgru.com\\\/pl\\\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\\\/#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\\\/pl\\\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/asgru.com\\\/pl\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tworzenie komponentu listy zada\u0144 dla edytora blokowego WordPress \u2014 cz\u0119\u015b\u0107 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/#website\",\"url\":\"https:\\\/\\\/asgru.com\\\/pl\\\/\",\"name\":\"asgru\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/asgru.com\\\/pl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/#organization\",\"name\":\"asgru\",\"url\":\"https:\\\/\\\/asgru.com\\\/pl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/asgru.com\\\/pl\\\/#\\\/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\\\/pl\\\/#\\\/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\\\/pl\\\/#\\\/schema\\\/person\\\/8f6cca385f5ae3eb7802b1e40b721576\",\"name\":\"asgru\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@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\\\/pl\\\/author\\\/asgru\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tworzenie komponentu listy zada\u0144 dla edytora blokowego WordPress \u2014 cz\u0119\u015b\u0107 1 - 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\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/","og_locale":"pl_PL","og_type":"article","og_title":"Tworzenie komponentu listy zada\u0144 dla edytora blokowego WordPress \u2014 cz\u0119\u015b\u0107 1 - asgru","og_description":"W tej serii praktycznych materia\u0142\u00f3w chc\u0119 pokaza\u0107, jak daleko zaszed\u0142 rozw\u00f3j WordPressa. W 2024 roku programista WordPressa jest przede wszystkim frontend developerem, kt\u00f3ry musi dobrze zna\u0107 HTML\/CSS, React, specyfik\u0119 WordPressa, a tak\u017ce PHP, aby samodzielnie pisa\u0107 backend dla tworzonych blok\u00f3w. Przyznajcie, my\u015bleli\u015bcie, \u017ce chodzi tylko o klikanie przycisk\u00f3w w Elementorze, prawda? \ud83d\ude42 Edytor blokowy WordPressa […]","og_url":"https:\/\/asgru.com\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/","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-14T00:42:49+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":{"Napisane przez":"asgru","Szacowany czas czytania":"6 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/asgru.com\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/#article","isPartOf":{"@id":"https:\/\/asgru.com\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/"},"author":{"name":"asgru","@id":"https:\/\/asgru.com\/pl\/#\/schema\/person\/8f6cca385f5ae3eb7802b1e40b721576"},"headline":"Tworzenie komponentu listy zada\u0144 dla edytora blokowego WordPress \u2014 cz\u0119\u015b\u0107 1","datePublished":"2024-08-19T05:56:15+00:00","dateModified":"2026-09-14T00:42:49+00:00","mainEntityOfPage":{"@id":"https:\/\/asgru.com\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/"},"wordCount":916,"publisher":{"@id":"https:\/\/asgru.com\/pl\/#organization"},"image":{"@id":"https:\/\/asgru.com\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/#primaryimage"},"thumbnailUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","articleSection":["Uncategorized"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/asgru.com\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/","url":"https:\/\/asgru.com\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/","name":"Tworzenie komponentu listy zada\u0144 dla edytora blokowego WordPress \u2014 cz\u0119\u015b\u0107 1 - asgru","isPartOf":{"@id":"https:\/\/asgru.com\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/asgru.com\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/#primaryimage"},"image":{"@id":"https:\/\/asgru.com\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/#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-14T00:42:49+00:00","breadcrumb":{"@id":"https:\/\/asgru.com\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/asgru.com\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/asgru.com\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/#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\/pl\/tworzenie-komponentu-listy-zadan-dla-edytora-blokowego-wordpress-czesc-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/asgru.com\/pl\/home\/"},{"@type":"ListItem","position":2,"name":"Tworzenie komponentu listy zada\u0144 dla edytora blokowego WordPress \u2014 cz\u0119\u015b\u0107 1"}]},{"@type":"WebSite","@id":"https:\/\/asgru.com\/pl\/#website","url":"https:\/\/asgru.com\/pl\/","name":"asgru","description":"","publisher":{"@id":"https:\/\/asgru.com\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/asgru.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/asgru.com\/pl\/#organization","name":"asgru","url":"https:\/\/asgru.com\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/asgru.com\/pl\/#\/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\/pl\/#\/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\/pl\/#\/schema\/person\/8f6cca385f5ae3eb7802b1e40b721576","name":"asgru","image":{"@type":"ImageObject","inLanguage":"pl-PL","@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\/pl\/author\/asgru\/"}]}},"_links":{"self":[{"href":"https:\/\/asgru.com\/pl\/wp-json\/wp\/v2\/posts\/1865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/asgru.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/asgru.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/asgru.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/asgru.com\/pl\/wp-json\/wp\/v2\/comments?post=1865"}],"version-history":[{"count":1,"href":"https:\/\/asgru.com\/pl\/wp-json\/wp\/v2\/posts\/1865\/revisions"}],"predecessor-version":[{"id":1866,"href":"https:\/\/asgru.com\/pl\/wp-json\/wp\/v2\/posts\/1865\/revisions\/1866"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/asgru.com\/pl\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/asgru.com\/pl\/wp-json\/wp\/v2\/media?parent=1865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/asgru.com\/pl\/wp-json\/wp\/v2\/categories?post=1865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/asgru.com\/pl\/wp-json\/wp\/v2\/tags?post=1865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}