{"id":54880,"date":"2023-08-10T07:00:06","date_gmt":"2023-08-10T14:00:06","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=54880"},"modified":"2025-05-26T11:19:51","modified_gmt":"2025-05-26T18:19:51","slug":"jak-uzywac-blokow-wordpress","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/","title":{"rendered":"Jak u\u017cywa\u0107 blok\u00f3w WordPress (+ jak stworzy\u0107 w\u0142asne!)"},"content":{"rendered":"\n<p>Czy to by\u0142oby dziwne miejsce, aby wspomnie\u0107, jak moja \u017cona trzyma w idealnym stanie, nieotwarty, limitowany zestaw Lego Star Wars BB-8?<\/p>\n\n\n\n<p>Te rzeczy sprzedaj\u0105 si\u0119 za jakie\u015b 500 dolar\u00f3w!<\/p>\n\n\n\n<p>Dobrze. To by\u0142oby dziwne. Zrozumia\u0142em, g\u0142o\u015bno i wyra\u017anie\u2026 Ale to wszystko stanie si\u0119 nieco bardziej zrozumia\u0142e za chwil\u0119.<\/p>\n\n\n\n<p>W tym po\u015bcie om\u00f3wimy wszystko, co musisz wiedzie\u0107 o blokach WordPress. Je\u015bli jeste\u015b u\u017cytkownikiem WP starej daty takim jak ja, to prawdopodobnie nadal my\u015blisz o blokach jako o &#8220;nowo\u015bci&#8221; <a href=\"https:\/\/www.dreamhost.com\/blog\/pl\/czym-jest-wordpress\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a>, poniewa\u017c zacz\u0105\u0142e\u015b od korzystania z klasycznego edytora.<\/p>\n\n\n\n<p>Min\u0119\u0142o ponad pi\u0119\u0107 lat od kiedy WordPress wprowadzi\u0142 bloki, ale nadal s\u0105 one jednym z najbardziej niezrozumia\u0142ych i niedocenianych funkcji CMS.<\/p>\n\n\n\n<p>Bloki WordPress s\u0105 troch\u0119 jak klocki Lego \u2014 widzisz, <i>m\u00f3wi\u0142em ci<\/i>, \u017ce to ma sens \u2014 pozwalaj\u0105 ci budowa\u0107 i dostosowywa\u0107 twoj\u0105 stron\u0119 internetow\u0105 w spos\u00f3b, kt\u00f3ry jeszcze kilka lat temu wymaga\u0142by zatrudnienia profesjonalnego projektanta i dewelopera stron internetowych.<\/p>\n\n\n\n<p>I to jest jednym z powod\u00f3w, dla kt\u00f3rych ludzie tak bardzo je kochaj\u0105. Gdy tylko je zrozumiej\u0105.<\/p>\n\n\n\n<p>Po wyja\u015bnieniu, jak dzia\u0142aj\u0105, nie ma w\u0105tpliwo\u015bci, \u017ce Ty r\u00f3wnie\u017c je polubisz.<\/p>\n\n\n\n<h2 id=\"definition\" class=\"wp-block-heading\">Czym s\u0105 bloki WordPress?<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1052\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks.jpg\" alt=\"Bloki WordPress\" class=\"wp-image-41445 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-300x197.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-1024x673.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-768x505.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Wordpress-Blocks-1536x1010.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-600x395.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1200x789.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-730x480.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1460x960.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-784x515.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-1568x1031.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Wordpress-Blocks-877x577.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1052;\" \/><\/figure>\n\n\n\n<p>Bloki WordPress, jak sugeruje nazwa, s\u0105 jak <i>klocki do budowania<\/i>, kt\u00f3re mo\u017cesz dodawa\u0107 do stron i post\u00f3w na swojej stronie WordPress.<\/p>\n\n\n\n<p>Zosta\u0142y dodane do WordPressa 5.0 wraz z dodaniem edytora Gutenberg, z kt\u00f3rym wi\u0119kszo\u015b\u0107 z nas jest ju\u017c zaznajomiona. Bloki s\u0105 obecnie standardowym sposobem na dostosowywanie Twojej strony WordPress \u2014 i mo\u017cesz u\u017cywa\u0107 blok\u00f3w na ca\u0142ej swojej stronie, nie tylko w postach.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Gutenberg<\/h3>\n    <p>Gutenberg to nazwa projektu Edytora Blok\u00f3w w WordPress. Wielu programist\u00f3w i entuzjast\u00f3w WordPress u\u017cywa nazw Edytor Gutenberg i Edytor Blok\u00f3w zamiennie.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/gutenberg\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Czytaj wi\u0119cej                    <\/a>\n\n<\/div>\n\n\n\n<p>Pomy\u015bl o tym jak o kreatorze stron lub stronie. Mo\u017cesz klikn\u0105\u0107 przycisk \u201e+\u201d, aby doda\u0107 blok do strony lub posta, a nast\u0119pnie wybra\u0107 z r\u00f3\u017cnych opcji blok\u00f3w. Aktualna wersja WordPressa zawiera ponad 90 opcji od razu po instalacji.<\/p>\n\n\n\n<p>Ka\u017cdy blok to w zasadzie wid\u017cet. Mog\u0105 one robi\u0107 r\u00f3\u017cne rzeczy, takie jak osadzanie tre\u015bci z innej strony lub serwisu, dodawanie nowych funkcji jak kalendarze czy formularze kontaktowe do strony, a nawet dodawanie specyficznych tre\u015bci z predefiniowanym formatowaniem.<\/p>\n\n\n\n<p>Ponadto, wi\u0119kszo\u015b\u0107 blok\u00f3w ma opcje dostosowywania, kt\u00f3re pozwalaj\u0105 dostosowa\u0107 spos\u00f3b ich wy\u015bwietlania lub funkcjonowania na Twojej stronie.<\/p>\n\n\n\n<p>Edytor blok\u00f3w WordPress to ogromna poprawa w stosunku do klasycznego edytora. W dniach przed Gutenbergiem, u\u017cytkownicy WordPress mogli dodawa\u0107 do posta tylko tekst i obrazy, zanim musieli zag\u0142\u0119bi\u0107 si\u0119 w niestandardowy kod.<\/p>\n\n\n\n<p><b>Uwaga nerd\u00f3w:<\/b> Je\u015bli z jakiego\u015b powodu nie masz dost\u0119pu do blok\u00f3w z edytora WordPress, mo\u017ce to by\u0107 spowodowane jedn\u0105 z dw\u00f3ch przyczyn: Pierwsza to, \u017ce twoja <a href=\"https:\/\/www.dreamhost.com\/pl\/wordpress\/\" target=\"_blank\" rel=\"noopener\">instalacja WordPress<\/a> mo\u017ce by\u0107 strasznie przestarza\u0142a (jak z przed wielu lat). Druga mo\u017cliwo\u015b\u0107 to, \u017ce edytor blok\u00f3w zosta\u0142 wy\u0142\u0105czony przez wtyczk\u0119 Classic Editor. Kiedy jest aktywna na stronie WordPress, ta wtyczka powraca do klasycznego do\u015bwiadczenia edytora. Sprawd\u017a swoj\u0105 stron\u0119 wtyczek z wp-admin, aby dowiedzie\u0107 si\u0119, czy to dotyczy tak\u017ce ciebie.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"blocks\" class=\"wp-block-heading\">Jakie Bloki Posiada Ju\u017c WordPress?<\/h2>\n\n\n\n<p>Domy\u015blnie edytor blok\u00f3w oferuje <i>ogromn\u0105 <\/i>ilo\u015b\u0107 <a href=\"https:\/\/wordpress.com\/support\/wordpress-editor\/blocks\/\" target=\"_blank\" rel=\"noopener\">dost\u0119pnych blok\u00f3w<\/a>. Mo\u017cesz u\u017cy\u0107 tych blok\u00f3w do dostosowania swojego motywu WordPress, umo\u017cliwienie pisarzom i blogerom dodawanie bogatych tre\u015bci do ich post\u00f3w, wci\u0105ganie tre\u015bci z medi\u00f3w spo\u0142eczno\u015bciowych i o wiele wi\u0119cej.<\/p>\n\n\n\n<p>Przyjrzyjmy si\u0119 niekt\u00f3rym z najpopularniejszych i najbardziej pomocnych domy\u015blnych blok\u00f3w Gutenberg.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Najcz\u0119\u015bciej U\u017cywane Bloki<\/h3>\n\n\n\n<p>Dodawanie dowolnego tekstu lub obrazu odbywa si\u0119 za pomoc\u0105 bloku. Oznacza to, \u017ce najcz\u0119\u015bciej u\u017cywanymi blokami s\u0105 generalnie r\u00f3\u017cne style i typy element\u00f3w tekstowych lub obrazowych, kt\u00f3re mo\u017cesz doda\u0107 do strony.<\/p>\n\n\n\n<p>Rzeczy takie jak:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Blok Tekstowy \u2014 Ka\u017cdy akapit, kt\u00f3ry piszesz w edytorze blok\u00f3w, znajduje si\u0119 w w\u0142asnym bloku tekstowym, ale bloki tekstowe nie ograniczaj\u0105 si\u0119 tylko do akapit\u00f3w. Napisz troch\u0119 lub du\u017co.<\/li>\n\n\n\n<li>Blok Obrazu \u2014 Kiedy chcesz pokaza\u0107 co\u015b wi\u0119cej ni\u017c tylko opowiedzie\u0107, dodaj obraz dla dodatkowego efektu.<\/li>\n\n\n\n<li>Blok Listy \u2014 Potrzebujesz napisa\u0107 zarys? A mo\u017ce list\u0119 numerowan\u0105? Mo\u017cesz to zrobi\u0107 za pomoc\u0105 bloku listy!<\/li>\n\n\n\n<li>Blok Galerii Obraz\u00f3w \u2014 Prezentacja zdj\u0119\u0107 z wakacji lub zdj\u0119\u0107 produkt\u00f3w nigdy nie wygl\u0105da\u0142a tak dobrze. ?<\/li>\n\n\n\n<li>Blok Tabeli \u2014 Stw\u00f3rz tabel\u0119 cenow\u0105 lub podziel si\u0119 danymi z arkusza kalkulacyjnego z \u0142atwo\u015bci\u0105.<\/li>\n\n\n\n<li>Blok Cytatu \u2014 Chcesz zwr\u00f3ci\u0107 uwag\u0119 na szczeg\u00f3ln\u0105 obserwacj\u0119? Zainspirowany cytatem, kt\u00f3ry jest istotny dla pisanej przez Ciebie tre\u015bci? Wyr\u00f3\u017cnij go za pomoc\u0105 bloku cytatu!<\/li>\n\n\n<\/ul>\n\n\n\n<p>Ka\u017cdy z tych element\u00f3w mo\u017cesz doda\u0107 do swojej strony za pomoc\u0105 edytora blok\u00f3w. Nast\u0119pnie mo\u017cesz je pozycjonowa\u0107 i stylizowa\u0107 w sekcji zawarto\u015bci strony.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Osadzone Bloki Tre\u015bci<\/h3>\n\n\n\n<p>Bloki u\u0142atwiaj\u0105 niezwykle \u0142atwe osadzanie zewn\u0119trznych tre\u015bci i wid\u017cet\u00f3w na Twojej stronie WordPress, bez konieczno\u015bci dodawania nowego pluginu lub dodatku stron trzecich.<\/p>\n\n\n\n<p>Niekt\u00f3re z najpopularniejszych blok\u00f3w osadzonych do pobierania tre\u015bci z zewn\u0119trznych \u017ar\u00f3de\u0142:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Blok Calendly<\/li>\n\n\n\n<li>Blok HTML<\/li>\n\n\n\n<li>Blok Twitter<\/li>\n\n\n\n<li>Blok YouTube<\/li>\n\n\n\n<li>Opinie<\/li>\n\n\n\n<li>WooCommerce<\/li>\n\n\n\n<li>Formularze Kontaktowe<\/li>\n\n\n\n<li>Najcz\u0119\u015bciej Zadawane Pytania<\/li>\n\n\n<\/ul>\n\n\n\n<p>Korzystaj\u0105c z tych typ\u00f3w blok\u00f3w, mo\u017cesz wyj\u015b\u0107 poza podstawowy edytor tekstu i tworzy\u0107 interaktywne tre\u015bci, kt\u00f3re oferuj\u0105 r\u00f3\u017cnorodne funkcjonalno\u015bci i funkcje.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Specjalistyczne Bloki<\/h3>\n\n\n\n<p>Oto, gdzie sytuacja staje si\u0119 naprawd\u0119 pikantna.<\/p>\n\n\n\n<p>Poza podstawami i osadzonymi tre\u015bciami, istnieje tak\u017ce wiele zaawansowanych blok\u00f3w, kt\u00f3re mo\u017cesz wykorzysta\u0107 w specjalnych przypadkach. Mo\u017ce chcesz poprawi\u0107 nawigacj\u0119 i UX swojej strony, lub u\u017cy\u0107 WordPressa jako pe\u0142noprawnego kreatora stron.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Nawigacja<\/h3>\n    <p>W internecie termin u2018nawigacjau2019 oznacza przemieszczanie si\u0119 mi\u0119dzy jedn\u0105 stron\u0105 lub stron\u0105 internetow\u0105 a inn\u0105. Nawigacja to r\u00f3wnie\u017c powszechny termin w rozwoju i projektowaniu stron internetowych. K\u0142adzie si\u0119 nacisk na to, aby u\u017cytkownikom \u0142atwo by\u0142o znale\u017a\u0107 strony, kt\u00f3rych potrzebuj\u0105.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/navigation\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Czytaj wi\u0119cej                    <\/a>\n\n<\/div>\n\n\n\n<p>Oto kilka, kt\u00f3re warto sprawdzi\u0107:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Blok przycisk\u00f3w<\/li>\n\n\n\n<li>Blok kolumn<\/li>\n\n\n\n<li>Blok grupowy<\/li>\n\n\n\n<li>Blok karuzeli post\u00f3w<\/li>\n\n\n\n<li>Blok zawarto\u015bci postu<\/li>\n\n\n\n<li>Blok p\u0119tli zapyta\u0144<\/li>\n\n\n\n<li>Blok wielokrotnego u\u017cytku<\/li>\n\n\n\n<li>Blok skr\u00f3tu<\/li>\n\n\n\n<li>Blok spisu tre\u015bci<\/li>\n\n\n<\/ul>\n\n\n\n<p>Za pomoc\u0105 tych blok\u00f3w mo\u017cesz pobiera\u0107 niestandardow\u0105 tre\u015b\u0107 bezpo\u015brednio z bazy danych WordPress lub w pe\u0142ni dostosowa\u0107 uk\u0142ad, odst\u0119py i przep\u0142yw ka\u017cdej strony lub posta na swojej stronie internetowej.<\/p>\n\n\n\n<p>To wszystko jest wspania\u0142e i \u015bwietne.<\/p>\n\n\n\n<p><i>Ale co je\u015bli potrzebujesz bloku, kt\u00f3ry domy\u015blnie nie jest dost\u0119pny w WordPressie?&nbsp;<\/i><\/p>\n\n\n\n<p>Na szcz\u0119\u015bcie, bloki r\u00f3wnie\u017c s\u0105 konfigurowalne. Podobnie jak widgety, mo\u017cesz dodawa\u0107 nowe bloki, a nawet tworzy\u0107 w\u0142asne, aby dostosowa\u0107 je do potrzeb projektu i szablonu Twojej strony.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Widget<\/h3>\n    <p>Wid\u017cety WordPress mog\u0105 dodawa\u0107 funkcje do pask\u00f3w bocznych, stopki lub innych obszar\u00f3w twojej strony. Niekt\u00f3re domy\u015blne wid\u017cety WordPress to Kategorie, Chmura Tag\u00f3w, Wyszukiwarka, Menu Nawigacyjne, Kalendarz i Ostatnie Wpisy.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/widget\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Czytaj wi\u0119cej                    <\/a>\n\n<\/div>\n\n\n\n<h2 id=\"create\" class=\"wp-block-heading\">Jak tworzy\u0107 niestandardowe bloki za pomoc\u0105 wtyczki WordPress<\/h2>\n\n\n\n<p>Naj\u0142atwiejszym sposobem na stworzenie niestandardowego bloku jest u\u017cycie pluginu.<\/p>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\">Plugin Genesis Custom Blocks<\/a> u\u0142atwia tworzenie i uruchamianie w\u0142asnych niestandardowych blok\u00f3w. B\u0119dziesz potrzebowa\u0107 podstawowej wiedzy o <a href=\"https:\/\/www.dreamhost.com\/blog\/pl\/ucz-sie-html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> i <a href=\"https:\/\/www.dreamhost.com\/blog\/pl\/ucz-sie-css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a>, aby stworzy\u0107 i dostosowa\u0107 blok do swoich potrzeb.<\/p>\n\n\n\n<p>Z tymi podstawowymi umiej\u0119tno\u015bciami, plugin zajmuje si\u0119 wszystkimi trudnymi ustawieniami i konfiguracj\u0105 w celu zaimplementowania nowego bloku.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Krok 1: Zainstaluj wtyczk\u0119 Genesis Block<\/h3>\n\n\n\n<p>Przede wszystkim: Przejd\u017a do katalogu wtyczek WordPress i zainstaluj <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/#description\" target=\"_blank\" rel=\"noopener\">wtyczk\u0119 Genesis Custom Block<\/a>.<\/p>\n\n\n\n<p>(Nie zapomnij przej\u015b\u0107 do zak\u0142adki Plugins i aktywowa\u0107.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Krok 2: Dodaj Nowy Blok<\/h3>\n\n\n\n<p>Po zainstalowaniu i aktywacji powinna pojawi\u0107 si\u0119 nowa opcja w panelu administratora WP w lewym menu nawigacyjnym.<\/p>\n\n\n\n<p>Klik Custom Blocks &gt; Add New.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Krok 3: Dostosuj Pola Edytora<\/h3>\n\n\n\n<p>Teraz jeste\u015bmy gotowi, aby zacz\u0105\u0107 budowa\u0107 niestandardowy blok.<\/p>\n\n\n\n<p>Pierwszym krokiem b\u0119dzie skonfigurowanie p\u00f3l i opcji dostosowania, kt\u00f3re b\u0119d\u0105 pojawia\u0107 si\u0119 podczas korzystania z bloku na Twojej stronie internetowej.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1171\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen.jpg\" alt=\"Zrzut ekranu przedstawiaj\u0105cy ekran konfiguracji Genesis Custom Blocks Plugin\" class=\"wp-image-41446 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1024x749.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1536x1124.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1200x878.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-730x534.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1460x1069.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-1568x1148.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Genesis-Custom-Blocks-Plugin-setup-screen-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1171;\" \/><\/figure>\n\n\n\n<p>Mo\u017cesz my\u015ble\u0107 o tym jak o mini wersji samego edytora blok\u00f3w. Dodasz niestandardowe pola i dane, kt\u00f3re zostan\u0105 wst\u0119pnie wype\u0142nione przez sam blok lub zebrane przez edytora lub u\u017cytkownika, kt\u00f3ry dodaje blok do strony lub posta.<\/p>\n\n\n\n<p>Na przyk\u0142ad, je\u015bli tworzysz niestandardowy blok wezwania do dzia\u0142ania (CTA), mo\u017cesz doda\u0107 pola takie jak:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tekst nag\u0142\u00f3wka<\/li>\n\n\n\n<li>Tekst podtytu\u0142u<\/li>\n\n\n\n<li>Tekst przycisku<\/li>\n\n\n\n<li>URL przycisku CTA<\/li>\n\n\n<\/ul>\n\n\n\n<p>Ka\u017cde pole b\u0119dzie mia\u0142o etykiet\u0119, nazw\u0119 i typ. Mo\u017cesz nawet dostosowa\u0107 szeroko\u015b\u0107 lub doda\u0107 tekst pomocy, aby u\u0142atwi\u0107 dodatkowym redaktorom lub autorom korzystanie z niego.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Krok 4: Dostosuj Znaczniki i CSS<\/h3>\n\n\n\n<p>Teraz, gdy skonfigurowali\u015bmy backend bloku, musimy poinformowa\u0107 WordPress, jak faktycznie wy\u015bwietli\u0107 dodawan\u0105 zawarto\u015b\u0107.<\/p>\n\n\n\n<p>Tutaj przyda si\u0119 ka\u017cda wcze\u015bniejsza znajomo\u015b\u0107 HTML lub CSS, kt\u00f3r\u0105 mo\u017cesz posiada\u0107.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1171\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS.jpg\" alt=\"Dostosuj znaczniki i CSS\" class=\"wp-image-41447 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-300x220.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-1024x749.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-768x562.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Markup-and-CSS-1536x1124.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-600x439.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1200x878.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-730x534.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1460x1069.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-784x574.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-1568x1148.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Markup-and-CSS-877x642.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1171;\" \/><\/figure>\n\n\n\n<p>W tym kolejnym kroku b\u0119dziesz w\u0142a\u015bciwie pisa\u0107 blok kodu, kt\u00f3ry b\u0119dzie dynamicznie generowany z konfiguracji wej\u015bciowych dla edytora blok\u00f3w.<\/p>\n\n\n\n<p>Mo\u017cesz to napisa\u0107 w czystym HTML i CSS.<\/p>\n\n\n\n<p>Mo\u017cesz r\u00f3wnie\u017c importowa\u0107 zmienne z edytora blok\u00f3w, u\u017cywaj\u0105c podw\u00f3jnych nawias\u00f3w klamrowych i nazwy pola (slug) z edytora. (Np.,\u201d{{button-text}}\u201d)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Krok 5: Dodaj Blok<\/h3>\n\n\n\n<p>Po skonfigurowaniu bloku za pomoc\u0105 wtyczki Genesis, powinien si\u0119 on pojawi\u0107 na li\u015bcie dost\u0119pnych blok\u00f3w w edytorze WordPress Gutenberg.<\/p>\n\n\n\n<p>Po prostu kliknij \u201e+\u201d, a nast\u0119pnie znajd\u017a nowy blok po nazwie.<\/p>\n\n\n\n<p>Po dodaniu powiniene\u015b zobaczy\u0107 ekran edytora blok\u00f3w Gutenberg z polami i opcjami, kt\u00f3re skonfigurowa\u0142e\u015b.<\/p>\n\n\n\n<p>To wszystko!<\/p>\n\n\n\n<p>Mo\u017cesz teraz u\u017cywa\u0107 swojego niestandardowego bloku, dodaj\u0105c go do stron, post\u00f3w, pask\u00f3w bocznych lub gdziekolwiek tego potrzebujesz.<\/p>\n\n\n\n<h2 id=\"custom\" class=\"wp-block-heading\">Jak stworzy\u0107 niestandardowe bloki WordPress bez dodatku<\/h2>\n\n\n\n<p>Je\u015bli chcesz zag\u0142\u0119bi\u0107 si\u0119 g\u0142\u0119biej i naprawd\u0119 nauczy\u0107 si\u0119 tworzenia nowych blok\u00f3w od podstaw, b\u0119dziesz potrzebowa\u0107 nieco bardziej zaawansowanej wiedzy.<\/p>\n\n\n\n<p>W tym samouczku przejdziemy przez podstawowe kroki korzystania z <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\" target=\"_blank\" rel=\"noopener\">narz\u0119dzia create-block<\/a>, kt\u00f3re pozwoli Ci stworzy\u0107 w pe\u0142ni niestandardowe bloki bez konieczno\u015bci u\u017cywania dodatku.<\/p>\n\n\n\n<p>Uwaga: To jest zaawansowany przep\u0142yw pracy. B\u0119dzie wymaga\u0142 od Ciebie pracy z lini\u0105 komend.<\/p>\n\n\n\n<p>B\u0119dziesz musia\u0142 zrozumie\u0107 PHP, JavaScript, HTML i CSS.<\/p>\n\n\n\n<p>Nie m\u00f3w, \u017ce Ci\u0119 nie ostrzegali\u015bmy!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Krok #1: Skonfiguruj Node.js, NPM i lokaln\u0105 instalacj\u0119 WordPress<\/h3>\n\n\n\n<p>Zanim b\u0119dziemy mogli u\u017cy\u0107 create-block, musimy mie\u0107 odpowiedni\u0105 konfiguracj\u0119 i dost\u0119p.<\/p>\n\n\n\n<p>Oto wymagania wst\u0119pne:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/learn.wordpress.org\/tutorial\/local-wordpress-installations-for-beginners\/\" target=\"_blank\" rel=\"noopener\">Lokalna instalacja WordPressa<\/a><\/li>\n\n\n\n<li>Konfiguracja terminala lub wiersza polece\u0144<\/li>\n\n\n\n<li><a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener\">Node.js i npm<\/a><\/li>\n\n\n<\/ul>\n\n\n\n<p>Mo\u017cesz r\u00f3wnie\u017c chcie\u0107 u\u017cy\u0107 <a href=\"https:\/\/github.com\/nvm-sh\/nvm\" target=\"_blank\" rel=\"noopener\">nvm<\/a> (mened\u017cer wersji Node) do instalacji lub aktualizacji kompatybilnej wersji Node.js<\/p>\n\n\n\n<p>Z tym ustawieniem u\u017cyjemy polecenia NPM \u201enpx\u201d, aby bezpo\u015brednio wykona\u0107 pakiet create-block z jego katalogu hostowanego w chmurze.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Krok #2: Uruchom Pakiet create-block<\/h3>\n\n\n\n<p>Teraz, \u0142atwy krok.<\/p>\n\n\n\n<p>Z terminala przejd\u017a do katalogu \/wp-content\/plugins na Twojej stronie na lokalnej maszynie.<\/p>\n\n\n\n<p>Nast\u0119pnie uruchom pakiet create-block za pomoc\u0105 NPX:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"693\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package.jpg\" alt=\"Uruchom pakiet create-block\" class=\"wp-image-41448 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-300x130.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-1024x444.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-768x333.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Run-the-create-block-Package-1536x665.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-600x260.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1200x520.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-730x316.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1460x632.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-784x340.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-1568x679.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Run-the-create-block-Package-877x380.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/693;\" \/><\/figure>\n\n\n\n<p><code>npx @wordpress\/create-block {{block-name}}<\/code><\/p>\n\n\n\n<p>Ten pakiet przeprowadzi przez proces konfiguracji tego, co znane jest jako \u201escaffolding bloku\u201d. Zarejestruje wszystkie istotne elementy, uruchomi odpowiedni\u0105 struktur\u0119 plik\u00f3w i katalog\u00f3w oraz wygeneruje domy\u015blny kod dla ca\u0142ego bloku, aby by\u0142 zar\u00f3wno edytowalny, jak i u\u017cyteczny.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Krok #3: Aktywuj Plugin<\/h3>\n\n\n\n<p>Nowy blok b\u0119dzie mia\u0142 form\u0119 pluginu.<\/p>\n\n\n\n<p>Gdy pakiet create-block zostanie zako\u0144czony, b\u0119dziesz musia\u0142 przej\u015b\u0107 do panelu administratora WP.<\/p>\n\n\n\n<p>Przejd\u017a na stron\u0119 Plugins i aktywuj nowy plugin, kt\u00f3ry zosta\u0142 utworzony, a kt\u00f3ry powinien mie\u0107 nazw\u0119 bloku, kt\u00f3rego u\u017cy\u0142e\u015b w swoim poleceniu npx.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Krok #4: Dostosuj Kod Bloku<\/h3>\n\n\n\n<p>Dostosujesz zawarto\u015b\u0107 i funkcjonalno\u015b\u0107 bloku w folderze <b>\/src\/<\/b> znajduj\u0105cym si\u0119 w katalogu plugin.<\/p>\n\n\n\n<p><b>Index.js<\/b> to miejsce, w kt\u00f3rym zarejestrujesz blok i zakodujesz g\u0142\u00f3wn\u0105 tre\u015b\u0107:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"871\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code.jpg\" alt=\"Dostosuj Kod Bloku\" class=\"wp-image-41449 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-300x163.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-1024x557.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-768x418.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/Customize-the-Block-Code-1536x836.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-600x327.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1200x653.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-730x397.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1460x795.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-784x427.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-1568x854.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/08\/Customize-the-Block-Code-877x477.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/871;\" \/><\/figure>\n\n\n\n<p>Zauwa\u017c, \u017ce funkcja registerBlockType jest ustawiona do obs\u0142ugi zar\u00f3wno wej\u015b\u0107 edytora blok\u00f3w (\u201eedit\u201d) jak i wy\u015bwietlania na froncie (\u201esave\u201d).<\/p>\n\n\n\n<p>To jest dopiero pocz\u0105tek tworzenia funkcjonalnego bloku.<\/p>\n\n\n\n<p>Prawdopodobnie b\u0119dziesz chcia\u0142 zapozna\u0107 si\u0119 z kompletn\u0105 dokumentacj\u0105 dotycz\u0105c\u0105 pisania funkcjonalnych blok\u00f3w za pomoc\u0105 <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/\" target=\"_blank\" rel=\"noopener\">WordPress Block API<\/a>.<\/p>\n\n\n\n<p>Gdy opanujesz podstawy, mo\u017cesz do\u0142\u0105czy\u0107 dodatkowe zale\u017cno\u015bci, korzysta\u0107 z zewn\u0119trznych \u017ar\u00f3de\u0142 danych i w\u0142a\u015bciwie robi\u0107 wszystko, czego zapragnie twoje serce.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Krok #5: Dodaj Blok z Edytora Gutenberg<\/h3>\n\n\n\n<p>Z aktywowan\u0105 wtyczk\u0105 mo\u017cesz doda\u0107 sw\u00f3j blok do dowolnej strony lub posta z edytora Gutenberg.<\/p>\n\n\n\n<p>Dost\u0119p do niego uzyskasz za pomoc\u0105 przycisku \u201e+\u201d lub komendy \u201e\/\u201d, tak jak w przypadku ka\u017cdego innego bloku.<\/p>\n\n\n\n<h2 id=\"summary\" class=\"wp-block-heading\">Nie ma ogranicze\u0144<\/h2>\n\n\n\n<p>Dobrze, przeszli\u015bmy od podstaw do zaawansowanych, ale dobra wiadomo\u015b\u0107 jest taka, \u017ce teraz jeste\u015b nie do zatrzymania.<\/p>\n\n\n\n<p>Pomi\u0119dzy domy\u015blnymi opcjami blok\u00f3w, wtyczk\u0105 Genesis i mo\u017cliwo\u015bci\u0105 budowania w\u0142asnych blok\u00f3w od podstaw \u2014 nie ma niczego, czego nie mo\u017cna zrobi\u0107!<\/p>\n\n\n\n<p>A poniewa\u017c bloki s\u0105 niezwykle pot\u0119\u017cne i elastyczne, praktycznie nie ma niczego, czego nie mo\u017cna by zbudowa\u0107. Twoja strona WordPress teraz posiada niemal niesko\u0144czon\u0105 funkcjonalno\u015b\u0107, i mo\u017cesz stworzy\u0107 stron\u0119, aplikacj\u0119 lub projekt swoich marze\u0144.<\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      WordPress + DreamHost\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Nasze automatyczne aktualizacje i silne zabezpieczenia obronne zdejmuj\u0105 z Twoich bark\u00f3w zarz\u0105dzanie serwerem, aby\u015b m\u00f3g\u0142 skupi\u0107 si\u0119 na tworzeniu \u015bwietnej strony internetowej.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pl\/wordpress\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Sprawd\u017a Plany                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Czy to by\u0142oby dziwne miejsce, \u017ceby wspomnie\u0107, jak moja \u017cona trzyma w idealnym stanie, nieotwarty, limitowany zestaw Lego Star Wars BB-8? Te rzeczy chodz\u0105 po oko\u0142o 500 dolar\u00f3w! Okej. To by\u0142oby dziwne. Zrozumia\u0142em, g\u0142o\u015bno i wyra\u017anie\u2026 Ale za chwil\u0119 wszystko stanie si\u0119 troch\u0119 bardziej zrozumia\u0142e. W tym po\u015bcie, [\u2026]<\/p>\n","protected":false},"author":1062,"featured_media":41439,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"definition\",\"Czym s\u0105 bloki WordPress?\"],[\"blocks\",\"Jakie Bloki Posiada Ju\u017c WordPress?\"],[\"create\",\"Jak tworzy\u0107 niestandardowe bloki za pomoc\u0105 wtyczki WordPress\"],[\"custom\",\"Jak stworzy\u0107 niestandardowe bloki WordPress bez dodatku\"],[\"summary\",\"Nie ma ogranicze\u0144\"]]","hide_toc":false,"footnotes":""},"categories":[14456,14466,14458],"tags":[],"class_list":["post-54880","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-projektowanie-stron-pl","category-rozpoczecie-pl","category-wordpress-pl"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Jak u\u017cywa\u0107 blok\u00f3w WordPress (+ jak stworzy\u0107 w\u0142asne!) - DreamHost Blog<\/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:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Jak u\u017cywa\u0107 blok\u00f3w WordPress (+ jak stworzy\u0107 w\u0142asne!)\" \/>\n<meta property=\"og:description\" content=\"Czy to by\u0142oby dziwne miejsce, \u017ceby wspomnie\u0107, jak moja \u017cona trzyma w idealnym stanie, nieotwarty, limitowany zestaw Lego Star Wars BB-8? Te rzeczy chodz\u0105 po oko\u0142o 500 dolar\u00f3w! Okej. To by\u0142oby dziwne. Zrozumia\u0142em, g\u0142o\u015bno i wyra\u017anie\u2026 Ale za chwil\u0119 wszystko stanie si\u0119 troch\u0119 bardziej zrozumia\u0142e. W tym po\u015bcie, [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-10T14:00:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T18:19:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Jak u\u017cywa\u0107 blok\u00f3w WordPress (+ jak stworzy\u0107 w\u0142asne!) - DreamHost Blog","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:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Jak u\u017cywa\u0107 blok\u00f3w WordPress (+ jak stworzy\u0107 w\u0142asne!)","og_description":"Czy to by\u0142oby dziwne miejsce, \u017ceby wspomnie\u0107, jak moja \u017cona trzyma w idealnym stanie, nieotwarty, limitowany zestaw Lego Star Wars BB-8? Te rzeczy chodz\u0105 po oko\u0142o 500 dolar\u00f3w! Okej. To by\u0142oby dziwne. Zrozumia\u0142em, g\u0142o\u015bno i wyra\u017anie\u2026 Ale za chwil\u0119 wszystko stanie si\u0119 troch\u0119 bardziej zrozumia\u0142e. W tym po\u015bcie, [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-08-10T14:00:06+00:00","article_modified_time":"2025-05-26T18:19:51+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Jak u\u017cywa\u0107 blok\u00f3w WordPress (+ jak stworzy\u0107 w\u0142asne!)","datePublished":"2023-08-10T14:00:06+00:00","dateModified":"2025-05-26T18:19:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/"},"wordCount":2032,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","articleSection":["Projektowanie Stron","Rozpocz\u0119cie","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/","name":"Jak u\u017cywa\u0107 blok\u00f3w WordPress (+ jak stworzy\u0107 w\u0142asne!) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","datePublished":"2023-08-10T14:00:06+00:00","dateModified":"2025-05-26T18:19:51+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/How-To-Use-WordPress-Blocks-Hero-Image.jpg","width":1460,"height":1095,"caption":"How To Use WordPress Blocks Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/jak-uzywac-blokow-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Jak u\u017cywa\u0107 blok\u00f3w WordPress (+ jak stworzy\u0107 w\u0142asne!)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"pl","translations":{"pl":54880,"es":41465,"en":41438,"de":52846,"pt":54873,"ru":54916,"uk":54919,"it":68363,"fr":70312,"nl":70333},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/54880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=54880"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/54880\/revisions"}],"predecessor-version":[{"id":62505,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/54880\/revisions\/62505"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/41439"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=54880"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=54880"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=54880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}