{"id":541,"date":"2023-10-04T09:50:38","date_gmt":"2023-10-04T09:50:38","guid":{"rendered":"https:\/\/smultron.software\/gutenberg-vs-page-builders\/"},"modified":"2024-06-12T09:40:12","modified_gmt":"2024-06-12T09:40:12","slug":"gutenberg-vs-page-builders","status":"publish","type":"post","link":"https:\/\/smultron.software\/pl\/blog\/gutenberg-vs-page-builders","title":{"rendered":"Gutenberg vs Page Builders"},"content":{"rendered":"\n<p>Gutenberg to edytor tre\u015bci, kt\u00f3ry od grudnia 2018 roku jest domy\u015blnym edytorem WordPress. Od wersji WordPress 5.0 zast\u0105pi\u0142 on klasyczny edytor WYSIWYG (\u201cWhat you see, is what you get\u201d) przenosz\u0105c edycj\u0119 tre\u015bci na niespotykany dot\u0105d poziom, bez konieczno\u015bci instalacji dodatkowych wtyczek.<\/p>\n\n\n\n<p>Teksty tworzone s\u0105 na bazie blok\u00f3w, kt\u00f3re pozwalaj\u0105 nam bezpo\u015brednio, w czasie rzeczywistym, \u201cpodgl\u0105da\u0107\u201d docelowy wygl\u0105d strony. W edytorze mo\u017cna dodawa\u0107 przyciski, kolumny, tabele, osadza\u0107 zewn\u0119trzne tre\u015bci, jak filmy z YouTube.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"gutenberg-vs-page-builders\">Gutenberg vs Page Builders<\/h2>\n\n\n\n<p>Page Buildery (takie jak Elementor, WPBakery, Divi) to pluginy, kt\u00f3re tworz\u0105 graficzny interfejs i mog\u0105 zast\u0119powa\u0107 klasyczny edytor tre\u015bci WordPressa. Powsta\u0142y one w celu usprawnienia tworzenia i edytowania zaawansowanych post\u00f3w i podstron bez posiadania wiedzy programistycznej. U\u017cytkownik za pomoc\u0105 metody \u201cprzeci\u0105gnij i upu\u015b\u0107\u201d (drag&amp;drop) mo\u017ce budowa\u0107 tre\u015bci wybieraj\u0105c z wielu dost\u0119pnych element\u00f3w, jak galerie, przyciski, obszary tekstowe itp.<\/p>\n\n\n\n<p>Przez ostatnie lata narz\u0119dzia te dynamicznie rozwija\u0142y si\u0119 uzyskuj\u0105c kolejne funkcje. Obecnie, gdy WordPress przedstawi\u0142 now\u0105 wersj\u0119 natywnego edytora tre\u015bci &#8211; Gutenberg, mo\u017ce on stopniowo, na sta\u0142e zaj\u0105\u0107 miejsce Page Builder\u00f3w.<\/p>\n\n\n\n<p>Najwi\u0119ksz\u0105 zalet\u0105 Gutenberg podczas tworzenia tre\u015bci jest <strong>bie\u017c\u0105cy podgl\u0105d edytowanych tre\u015bci<\/strong>. W szczeg\u00f3lno\u015bci przydatne jest to w tworzeniu z\u0142o\u017conych layout\u00f3w, gdy chcemy wykorzystywa\u0107 np. podzia\u0142 na kolumny. W klasycznym edytorze, tworz\u0105c tego typu tre\u015bci, musimy korzysta\u0107 z <strong>shortcod\u00f3w<\/strong> (kt\u00f3re wcze\u015bniej musz\u0105 zosta\u0107 zaprogramowane) &#8211; co powoduje, \u017ce tre\u015b\u0107 podczas edycji jest ma\u0142o czytelna. Rozwi\u0105zaniami pozwalaj\u0105cymi poprawi\u0107 czytelno\u015b\u0107 bie\u017c\u0105co edytowanej tre\u015bci s\u0105 dodatkowo instalowane w WordPress pluginy typu <strong>Page Builder<\/strong>, jak np. Divi, Elementor czy WPBakery. Tego typu rozwi\u0105zania s\u0105 tylko graficznym przedstawieniem powy\u017cej opisanych shortcod\u00f3w, wi\u0119c w istocie kontent strony nadal jest generowany na bazie shortcod\u00f3w, a konieczno\u015b\u0107 u\u017cywania ich w du\u017cej ilo\u015bci powodem wolniejszego \u0142adowania strony.<\/p>\n\n\n\n<p>Gutenberg rozwi\u0105zuje ten problem i pozwala w wygodny spos\u00f3b tworzy\u0107 tre\u015bci wykorzystuj\u0105c interfejs graficzny do bie\u017c\u0105cego podgl\u0105du tre\u015bci.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"edycja-tresci-w-gutenberg\">Edycja tre\u015bci w Gutenberg<\/h2>\n\n\n\n<p>Wygl\u0105d edytora Gutenberg jest prosty i czytelny.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"500\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-basic-view-1.png\" alt=\"\" class=\"wp-image-609 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-basic-view-1.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-basic-view-1-300x188.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-basic-view-1-768x480.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-basic-view-1-46x29.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-basic-view-1-56x35.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-basic-view-1-528x330.png 528w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/500;\" \/><figcaption class=\"wp-element-caption\">Podstawowy widok edytora Gutenberg<\/figcaption><\/figure>\n\n\n\n<p>Bloki maj\u0105 r\u00f3wnie\u017c opcje pozwalaj\u0105ce, mi\u0119dzy innymi, na edycj\u0119 styl\u00f3w, kolor\u00f3w, t\u0142a. Po zaznaczeniu bloku po prawej stronie mo\u017cemy edytowa\u0107 opcje danego bloku. Ka\u017cdy blok ma swoje specyficzne opcje.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"500\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-block-options-1.png\" alt=\"\" class=\"wp-image-611 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-block-options-1.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-block-options-1-300x188.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-block-options-1-768x480.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-block-options-1-46x29.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-block-options-1-56x35.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-block-options-1-528x330.png 528w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/500;\" \/><figcaption class=\"wp-element-caption\">Widok opcji bloku<\/figcaption><\/figure>\n\n\n\n<p>Zapisana strona b\u0119dzie wygl\u0105da\u0107 dok\u0142adnie tak jak jej podgl\u0105d podczas edycji.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"500\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-page-view-1.png\" alt=\"\" class=\"wp-image-623 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-page-view-1.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-page-view-1-300x188.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-page-view-1-768x480.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-page-view-1-46x29.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-page-view-1-56x35.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-page-view-1-528x330.png 528w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/500;\" \/><figcaption class=\"wp-element-caption\">Widok zapisanej strony<\/figcaption><\/figure>\n\n\n\n<p>Do tworzenia strony mo\u017cemy wykorzysta\u0107 bardzo du\u017co ju\u017c istniej\u0105cych, <strong>domy\u015blnie zdefiniowanych blok\u00f3w<\/strong>, takich jak:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>cytat,<\/li>\n\n\n\n<li>tabela,<\/li>\n\n\n\n<li>nag\u0142\u00f3wek,<\/li>\n\n\n\n<li>wypunktowanie,<\/li>\n\n\n\n<li>galeria,<\/li>\n\n\n\n<li>FAQ,<\/li>\n\n\n\n<li>ostatnie posty,<\/li>\n\n\n\n<li>osadzanie zewn\u0119trznych tre\u015bci: YouTube, Twitter, Spotify.<\/li>\n<\/ul>\n\n\n\n<p>Natywnie Gutenberg pozwala r\u00f3wnie\u017c na uk\u0142adanie tre\u015bci w kolumnach.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"500\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-column-layout-1.png\" alt=\"\" class=\"wp-image-613 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-column-layout-1.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-column-layout-1-300x188.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-column-layout-1-768x480.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-column-layout-1-46x29.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-column-layout-1-56x35.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-column-layout-1-528x330.png 528w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/500;\" \/><figcaption class=\"wp-element-caption\">Przyk\u0142ad zastosowania w trakcie edycji bloku z kolumnami<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bloki-wielokrotnego-uzytku\">Bloki wielokrotnego u\u017cytku<\/h2>\n\n\n\n<p>Tworz\u0105c du\u017ce ilo\u015bci tre\u015bci z czasem okazuje si\u0119, \u017ce wiele stron wykorzystuje te same schematy blok\u00f3w. Gutenberg pozwala nam na tworzenie <strong>blok\u00f3w wielokrotnego u\u017cytku<\/strong>, co znacz\u0105co mo\u017ce przyspieszy\u0107 prace.<\/p>\n\n\n\n<p>Je\u015bli w naszym serwisie cz\u0119sto wykorzystujemy tabele, kt\u00f3re maj\u0105 z g\u00f3ry okre\u015blon\u0105 struktur\u0119, ale r\u00f3\u017cn\u0105 zawarto\u015b\u0107, mo\u017cemy utworzy\u0107 tabel\u0119, a nast\u0119pnie zapisa\u0107 j\u0105 jako blok wielokrotnego u\u017cycia.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"500\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-save-as-reusable-block-1.png\" alt=\"\" class=\"wp-image-617 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-save-as-reusable-block-1.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-save-as-reusable-block-1-300x188.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-save-as-reusable-block-1-768x480.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-save-as-reusable-block-1-46x29.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-save-as-reusable-block-1-56x35.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-save-as-reusable-block-1-528x330.png 528w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/500;\" \/><figcaption class=\"wp-element-caption\">Widok tworzenia bloku wielokrotnego u\u017cytku<\/figcaption><\/figure>\n\n\n\n<p>Taki blok mo\u017cna u\u017cy\u0107 w ka\u017cdym innym miejscu strony, a nast\u0119pnie wystarczy tylko uzupe\u0142ni\u0107 dane.<\/p>\n\n\n\n<p>Gutenberg umo\u017cliwia tworzenie du\u017co bardziej z\u0142o\u017conych layout\u00f3w wielokrotnego u\u017cytku przy u\u017cyciu <strong>grupowania blok\u00f3w<\/strong>.<\/p>\n\n\n\n<div class=\"py-[32px] px-[24px] tablet:px-[32px] bg-gray-1 rounded-[8px]\ncta-small\">\n\t<div class=\"flex flex-wrap gap-[24px] justify-between\n\titems-center\">\n\t\t<div class=\"hm5 desktop:h5 basis-[417px] max-w-[496px]\">\n\t\t\tSzukasz do\u015bwiadczonego zespo\u0142u programistycznego? Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t<div>\n\t\t\t\n<div class=\"person-contact flex gap-[16px] items-center\">\n\t<div class=\"person-contact__image\">\n\t\t\t\t\t<img decoding=\"async\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/marcin-stawowiak-56x56.jpeg\"\n\t\t\t\tclass=\"size-[56px] rounded-full object-cover lazyload\"\n\t\t\t\talt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 56px; --smush-placeholder-aspect-ratio: 56\/56;\">\n\t\t\t<\/div>\n\t<div class=\"person-contact__details label-md\">\n\t\t<div class=\"person-contact__email\">\n\t\t\t<a href=\"mailto:hello@smultron.pl\">\n\t\t\t\thello@smultron.pl\t\t\t<\/a>\n\t\t<\/div>\n\t\t<div class=\"person-contact__phone\">\n\t\t\t<a href=\"tel:+48 791 991 797\">\n\t\t\t\t+48 791 991 797\t\t\t<\/a>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"programowanie-blokow-gutenberg\">Programowanie blok\u00f3w Gutenberg<\/h2>\n\n\n\n<p>Co je\u015bli domy\u015blne bloki nie spe\u0142niaj\u0105 naszych wymaga\u0144?<\/p>\n\n\n\n<p>Mo\u017cna zleci\u0107 <strong>zaprojektowanie i zaprogramowanie nowych, dedykowanych blok\u00f3w<\/strong>. Dzi\u0119ki temu mo\u017cemy poszerzy\u0107 mo\u017cliwo\u015bci edytora.<\/p>\n\n\n\n<p><strong>Przyk\u0142adowy scenariusz:<\/strong> na stronie firmowej na stronach opisuj\u0105cych poszczeg\u00f3lne dzia\u0142y chcemy zamie\u015bci\u0107 informacje o pracownikach wraz z kr\u00f3tkim opisem i linkami do ich social medi\u00f3w.<\/p>\n\n\n\n<p>Gutenberg pozwala nam zaprogramowa\u0107 blok w taki spos\u00f3b, aby ju\u017c podczas edycji odwzorowywa\u0142 to, co zobaczymy na stronie. Na przyk\u0142adzie poni\u017cej mo\u017cemy zobaczy\u0107 nowo zaprojektowany i zakodowany blok podczas edycji:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"500\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-custom-block.png\" alt=\"\" class=\"wp-image-615 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-custom-block.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-custom-block-300x188.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-custom-block-768x480.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-custom-block-46x29.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-custom-block-56x35.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-custom-block-528x330.png 528w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/500;\" \/><figcaption class=\"wp-element-caption\">Widok edycji nowo zaprojektowanego bloku<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"500\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-team-members.png\" alt=\"\" class=\"wp-image-619 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-team-members.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-team-members-300x188.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-team-members-768x480.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-team-members-46x29.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-team-members-56x35.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-editor-team-members-528x330.png 528w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/500;\" \/><figcaption class=\"wp-element-caption\">Interfejs graficzny dodawania informacji o kolejnej osobie<\/figcaption><\/figure>\n\n\n\n<p>Powy\u017cszy screen obrazuje, jak mo\u017ce by\u0107 zaprojektowany i zaprogramowany interfejs edycji bloku.<\/p>\n\n\n\n<p>Taki blok mo\u017ce posiada\u0107 w\u0142asne ustawienia, w tym przypadku zosta\u0142a dodana mo\u017cliwo\u015b\u0107 zmiany ilo\u015bci os\u00f3b w rz\u0119dzie:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"379\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-custom-block-options.png\" alt=\"\" class=\"wp-image-607 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-custom-block-options.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-custom-block-options-300x142.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-custom-block-options-768x364.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-custom-block-options-46x22.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-custom-block-options-56x27.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-custom-block-options-528x250.png 528w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/379;\" \/><figcaption class=\"wp-element-caption\">Widok ustawie\u0144 bloku<\/figcaption><\/figure>\n\n\n\n<p>W trakcie edycji ju\u017c widzimy, jak b\u0119dzie wygl\u0105da\u0107 efekt ko\u0144cowy:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"500\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-page-view-team-members-block.png\" alt=\"\" class=\"wp-image-621 lazyload\" data-srcset=\"https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-page-view-team-members-block.png 800w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-page-view-team-members-block-300x188.png 300w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-page-view-team-members-block-768x480.png 768w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-page-view-team-members-block-46x29.png 46w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-page-view-team-members-block-56x35.png 56w, https:\/\/smultron.software\/content\/uploads\/2024\/02\/gutenberg-page-view-team-members-block-528x330.png 528w\" data-sizes=\"(max-width: 800px) 100vw, 800px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/500;\" \/><figcaption class=\"wp-element-caption\">Widok zapisanego bloku na stronie docelowej<\/figcaption><\/figure>\n\n\n\n<p>Powy\u017cszy przyk\u0142ad to tylko jedna z wielu mo\u017cliwo\u015bci jakie niesie ze sob\u0105 edytor Gutenberg. Ten edytor pozwala na projektowanie, programowanie i wdra\u017canie blok\u00f3w, kt\u00f3re b\u0119d\u0105 spe\u0142nia\u0107 dok\u0142adnie nasze potrzeby, a jednocze\u015bnie pozwalaj\u0105 na uzupe\u0142nianie tre\u015bci w intuicyjny spos\u00f3b.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"podsumowanie\">Podsumowanie<\/h2>\n\n\n\n<p>Edytor Gutenberg przenosi edycj\u0119 tre\u015bci na niespotykany dot\u0105d poziom. Tw\u00f3rcom tre\u015bci pozwala skupi\u0107 si\u0119 przede wszystkim na tworzeniu. Budowanie kontentu z element\u00f3w jest proste i intuicyjne.<\/p>\n\n\n\n<p><strong>Jest rozwi\u0105zaniem alternatywnym dla obecnych na rynku Page Builder\u00f3w<\/strong> typu Divi, Elementor czy WPBakery, a jednocze\u015bnie pozbawionym ich wad takich jak:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>nadmierna ilo\u015b\u0107 u\u017cytych shortcod\u00f3w,<\/li>\n\n\n\n<li>du\u017ca czasoch\u0142onno\u015b\u0107 stylowania element\u00f3w zgodnie z projektem (w Page Builderach znajduj\u0105 si\u0119 z g\u00f3ry narzucone domy\u015blne style oraz markup HTML),<\/li>\n\n\n\n<li>bardzo du\u017ca ilo\u015b\u0107 zb\u0119dnych element\u00f3w w kodzie; funkcjonalno\u015bci, animacji, kt\u00f3re mog\u0105 powodowa\u0107 du\u017cy rozmiar plik\u00f3w CSS i JS,<\/li>\n\n\n\n<li>trudno\u015b\u0107 w dobrym zoptymalizowaniu pod k\u0105tem SEO.<\/li>\n<\/ul>\n\n\n\n<p>Je\u015bli opr\u00f3cz natywnych blok\u00f3w Gutenberga s\u0105 wymagane dodatkowe elementy, to wyspecjalizowane w WordPress studia Web Development, takie jak Smultron mog\u0105 zaprojektowa\u0107, zaprogramowa\u0107 i wdro\u017cy\u0107 nowe bloki zgodne z potrzebami klienta. Dzi\u0119ki czemu autorzy stron nie musz\u0105 si\u0119 przejmowa\u0107 b\u0142\u0119dami w shortcodach lub kodzie HTML, a optymalizacja i rozw\u00f3j tego typu witryn s\u0105 znacznie \u0142atwiejsze i efektywniejsze.<\/p>\n<div class=\"full-width container-grid gap-y-[32px] section-scrollspy  bg-gray-1 pt-[60px] desktop:pt-[120px] pb-[60px] desktop:pb-[120px]\"\n\tid=\"skontaktuj-sie\">\n\t<div class=\"hm2 desktop:h2\"\n\t\tdata-aos=\"animate__fadeInUp\"\n\t>\n\t\tSkontaktuj si\u0119 z nami\t<\/div>\n\t<div class=\"grid desktop:grid-cols-12 gap-y-[60px] items-start\">\n\t\t\n<div class=\"desktop:col-span-6 grid tablet:grid-cols-2\n\t\ttablet:gap-x-[24px] tablet:gap-y-[32px]\">\n\t<div class=\"\">\n\t\t<div class=\"\">\n\t\t\t<img decoding=\"async\" data-src=\"https:\/\/smultron.software\/content\/uploads\/2024\/01\/681c046dafbd67a84a6a2820a207caa9-e1706629988730-768x515.jpeg\"\n\t\t\t\twidth=\"327\"\n\t\t\t\theight=\"204\"\n\t\t\t\tclass=\"w-full aspect-[390\/243] object-cover rounded-t-[10px] lazyload\"\n\t\t\t\talt=\"Marcin Stawowiak\"\n\t\t\t\tdata-aos=\"animate__fadeInUp\"\n\t\t\t src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 327px; --smush-placeholder-aspect-ratio: 327\/204;\" \/>\n\t\t\t<div class=\"p-[24px] tablet:border-l-[1px] tablet:border-b-[1px]\n\t\t\tborder-gray-2 tablet:rounded-bl-[10px] max-tablet:border-x-[1px]\n\t\t\tgrid gap-[16px]\">\n\t\t\t\t<div class=\"h6\"\n\t\t\t\t\tdata-aos=\"animate__fadeInUp\"\n\t\t\t\t>Marcin Stawowiak<\/div>\n\t\t\t\t<div class=\"label-xs font-bold\"\n\t\t\t\t\tdata-aos=\"animate__fadeInUp\"\n\t\t\t\t>\n\t\t\t\t\tCo-founder, Executive Manager\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"pl-[24px] pb-[24px] pr-[24px] tablet:ml-[-24px]\n\t\t\ttablet:pt-[24px] grid gap-[16px] tablet:self-end tablet:border-[1px] tablet:border-l-0\n\t\t\tborder-gray-2 tablet:rounded-r-[10px] max-tablet:border-x-[1px]\n\t\t\tmax-tablet:border-b-[1px] max-tablet:rounded-b-[10px]\n\t\t\tgap-y-[60px]\">\n\t\t<div class=\"label-md max-tablet:hidden\" data-aos=\"animate__fadeInUp\">\n\t\t\tSzukasz do\u015bwiadczonego zespo\u0142u programistycznego? <br \/>Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t<div class=\"grid body-md\" data-aos=\"animate__fadeInUp\">\n\t\t\t<a href=\"mailto:hello@smultron.pl\">hello@smultron.pl<\/a>\n\t\t\t<a href=\"tel:+48 791 991 797\">+48 791 991 797<\/a>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"tablet:col-span-2 body-md grid gap-[16px] mt-[32px]\n\ttablet:mt-0\" data-aos=\"animate__fadeInUp\">\n\t\t<div class=\"label-md\">\n\t\t\tSmultron Web Development\t\t<\/div>\n\t\t<div class=\"\">\n\t\t\tul. S\u0142awkowska 12\t\t\t<br\/>\n\t\t\t31-014 Krak\u00f3w\t\t<\/div>\n\t\t<div>\n\t\t\tNIP:&nbsp;6762482785\t\t<\/div>\n\t<\/div>\n<\/div>\n\t\t\n<div class=\"desktop:col-start-8 desktop:col-span-5 contact-form-footer\">\n\t\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f224-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"224\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/pl\/wp-json\/wp\/v2\/posts\/541#wpcf7-f224-o1\" method=\"post\" class=\"wpcf7-form init wpcf7-acceptance-as-validation\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"224\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f224-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<div class=\"desktop:col-start-8 desktop:col-span-5\">\n  <div class=\"grid gap-[32px]\">\n    <div class=\"label-md\">\n\t\t\tWype\u0142nij poni\u017cszy formularz\n    <\/div>\n    <div class=\"grid gap-[24px]\">\n      <div class=\"form-row\">\n        <label class=\"label-xs\" for=\"msg-email\">Tw\u00f3j e-mail*<\/label>\n        <span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email form-control\" id=\"msg-email\" aria-required=\"true\" aria-invalid=\"false\" value=\"\" type=\"email\" name=\"email\" \/><\/span>\n      <\/div>\n      <div class=\"form-row\">\n        <label class=\"label-xs\" for=\"msg-content\">Twoja wiadomo\u015b\u0107*<\/label>\n        <span class=\"wpcf7-form-control-wrap\" data-name=\"message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2500\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required form-control form-control-textarea\" id=\"msg-content\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Podziel si\u0119 szczeg\u00f3\u0142ami swojego projektu\" name=\"message\"><\/textarea><\/span>\n        <div class=\"form-text\">\n          Max. 2500 znak\u00f3w\n        <\/div>\n      <\/div>\n      <div class=\"form-row label-sm\">\n<span class=\"wpcf7-form-control-wrap\" data-name=\"acceptance-69\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"acceptance-69\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\"><span><\/span><span>Zapozna\u0142em si\u0119 i akceptuj\u0119 <a href=\"\/pl\/polityka-prywatnosci\/\" class=\"underline\" target=\"_blank\" rel=\"nofollow\">Regulamin i Polityk\u0119 Prywatno\u015bci Smultron<\/a>.*<\/span><\/span><\/label><\/span><\/span><\/span>\n      <\/div>\n      <div>\n        <button type=\"submit\" class=\"button button--gradient-red\n                button--with-icon\">\n                    <span>Wy\u015blij<\/span>\n                    <span class=\"icon-arrow-right\"><\/span>\n                <\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\t<div class=\"contact-form-footer__success flex bg-green-2\n\t\t\t\t\t\tborder-green-3 p-[16px] gap-[16px] rounded-[8px]\n\t\t\t\t\t\tmt-[30px]\">\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\"\n\t\t\tviewBox=\"0 0 24 24\" fill=\"none\">\n\t\t\t<path d=\"M12 2C17.51 2 22 6.49 22 12C22 17.51 17.51 22 12 22C6.49 22 2 17.51 2 12C2 6.49 6.49 2 12 2ZM12 0C5.37 0 0 5.37 0 12C0 18.63 5.37 24 12 24C18.63 24 24 18.63 24 12C24 5.37 18.63 0 12 0ZM18.25 8.89L16.83 7.48L10.73 13.7L7.65 10.76L6.25 12.2L10.75 16.52L18.25 8.89Z\"\n\t\t\t\t\tfill=\"#104121\"><\/path>\n\t\t<\/svg>\n\t\t<div class=\"body-md text-green-4\">\n\t\t\t<strong>Dzi\u0119kujemy za przes\u0142anie formularza!<\/strong> Odpowiemy w ci\u0105gu 24 godzin.\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\t<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg to edytor tre\u015bci, kt\u00f3ry od grudnia 2018 roku jest domy\u015blnym edytorem WordPress. Od wersji WordPress 5.0 zast\u0105pi\u0142 on klasyczny edytor WYSIWYG (\u201cWhat you see, is what you get\u201d) przenosz\u0105c edycj\u0119 tre\u015bci na niespotykany dot\u0105d poziom, bez konieczno\u015bci instalacji dodatkowych wtyczek. Teksty tworzone s\u0105 na bazie blok\u00f3w, kt\u00f3re pozwalaj\u0105 nam bezpo\u015brednio, w czasie rzeczywistym, \u201cpodgl\u0105da\u0107\u201d [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":565,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[40,3],"tags":[],"class_list":["post-541","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technologie","category-programowanie"],"acf":[],"_links":{"self":[{"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/posts\/541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/comments?post=541"}],"version-history":[{"count":0,"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/posts\/541\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/media\/565"}],"wp:attachment":[{"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/media?parent=541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/categories?post=541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/smultron.software\/pl\/wp-json\/wp\/v2\/tags?post=541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}