{"id":4759,"date":"2017-11-25T09:34:20","date_gmt":"2017-11-25T09:34:20","guid":{"rendered":"https:\/\/musilda.cz\/?p=4759"},"modified":"2017-11-25T09:34:20","modified_gmt":"2017-11-25T09:34:20","slug":"gutenberg-editor-pro-wordpress-a-co-od-nej-cekat","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/gutenberg-editor-pro-wordpress-a-co-od-nej-cekat\/","title":{"rendered":"Gutenberg editor pro WordPress a co od n\u011bj m\u016f\u017eete \u010dekat"},"content":{"rendered":"
Aktu\u00e1ln\u00ed TinyMce editor, kter\u00fd WordPress pou\u017e\u00edv\u00e1, je ji\u017e celkem star\u0161\u00edho data a v sou\u010dasn\u00e9 dob\u011b je na spadnut\u00ed, jeho nahrazen\u00ed editorem s n\u00e1zvem Gutenberg.<\/p>\n
Nov\u00fd editor by m\u011bl fungovat naprosto odli\u0161n\u00fdm zp\u016fsobem, ne\u017e dosavadn\u00ed, jen\u017e pracuje na b\u00e1zi textov\u00e9ho editoru. Naproti tomu, Gutenberg bude pou\u017e\u00edvat takzvan\u00e9 bloky, z nich\u017e m\u016f\u017eete sestavit kompletn\u00ed webovou str\u00e1nku.<\/p>\n
A te\u010f p\u0159ich\u00e1z\u00ed „aha“ moment. Kde j\u00e1 jsem to jen u\u017e vid\u011bl? Jasn\u011b, blokov\u00fdch editor\u016f je na trhu cel\u00e1 \u0159ada. Nam\u00e1tkou uve\u010fme Elementor, Visual Composer, Divi Builder a dal\u0161\u00ed. \u0158ada \u0161ablon, jako nap\u0159\u00edklad Avada, m\u00e1 vlastn\u00ed blokov\u00fd builder.<\/p>\n
Na obr\u00e1zku je Divi builder, z kter\u00e9ho je na prvn\u00ed pohled vid\u011bt, jak\u00fdm zp\u016fsobem takov\u00fd editor pracuje. Obsah webov\u00e9 str\u00e1nky ji\u017e d\u00e1vno nen\u00ed textov\u00fd dokument, ale \u0159ada \u010d\u00e1st\u00ed, blok\u016f, chcete li, ze kter\u00fdch se skl\u00e1d\u00e1.<\/p>\n Mo\u017en\u00e1 je to shoda okolnost\u00ed, ale pr\u00e1v\u011b tyto buildery, jako prvn\u00ed p\u0159inesly to co by m\u011bl Gutenberg obsahovat tak\u00e9 a co se zmi\u0148uje v ka\u017ed\u00e9m \u010dl\u00e1nku o n\u011bm.<\/p>\n T\u00edm je editace obsahu p\u0159\u00edmo na str\u00e1nce.<\/p>\n Na obr\u00e1zku m\u016f\u017eete vid\u011bt, jak se u jednotliv\u00fdch prvk\u016f zobrazuj\u00ed kontextov\u00e9 dialogy a umo\u017e\u0148uj\u00ed editaci prvk\u016f. Obr\u00e1zek je op\u011bt z Divi Builderu.<\/p>\n A p\u0159esn\u011b toto by m\u011bl Gutenberg umo\u017enit ji\u017e v z\u00e1kladu, po nainstalov\u00e1n\u00ed WordPressu. Dostupn\u00fd by m\u011bl b\u00fdt od verze 5.0, jen\u017e bude vyd\u00e1na b\u011bhem p\u0159\u00ed\u0161t\u00e9ho roku.<\/p>\n Pokud si chcete Gutenberg vyzkou\u0161et, m\u016f\u017eete si jej v sou\u010dasn\u00e9 dob\u011b nainstalovat jako plugin, ale m\u011bjte na pam\u011bti, \u017ee to je beta verze a na produk\u010dn\u00ed web si jej ned\u00e1vejte.<\/p>\n Vid\u00edte ty hv\u011bzdi\u010dky? V\u011bt\u0161ina produkt\u016f, na kter\u00fdch se pod\u00edl\u00ed v\u00fdvoj\u00e1\u0159i z Automattic m\u00e1 v\u011bt\u0161inou daleko lep\u0161\u00ed hodnocen\u00ed. Ale k tomu se je\u0161t\u011b dostaneme. Nyn\u00ed se pod\u00edv\u00e1me, co se stane po instalaci.<\/p>\n P\u016fvodn\u00ed editor se zm\u011bn\u00ed:<\/p>\n Vypad\u00e1 to dost podobn\u011b, jako, kdy\u017e jste v customiz\u00e9ru, jen je kontextov\u00e9 menu vpravo.<\/p>\n Jako prvn\u00ed v obsahu n\u00e1m z\u016fstal titulek str\u00e1nky, kter\u00fd po kliknut\u00ed nab\u00eddne mo\u017enost zm\u011bnit url p\u0159\u00edsp\u011bvku:<\/p>\n Samotn\u00fd obsah je v tuto chv\u00edli v jednom „bloku“, jen\u017e umo\u017e\u0148uje editovat obsah podobn\u011b, jako textov\u00fd editor:<\/p>\n Podobn\u00e9 p\u016fvodn\u00edmu editoru, \u017ee? V\u0161imn\u011bte si ale t\u0159\u00ed te\u010dek vpravo. Skr\u00fdvaj\u00ed dal\u0161\u00ed nab\u00eddku:<\/p>\n Jednodu\u0161e m\u016f\u017eete p\u0159ep\u00ednat mezi obsahem a html, jako to je i nyn\u00ed:<\/p>\n A ta prav\u00e1 z\u00e1bava za\u010d\u00edn\u00e1, kdy\u017e kliknete na „P\u0159ev\u00e9st do blok\u016f“. Obsah se v\u00e1m rozlo\u017e\u00ed do jednotliv\u00fdch prvk\u016f, samostatn\u011b editovateln\u00fdch:<\/p>\n Pro lep\u0161\u00ed p\u0159edstavu jsem p\u0159epnul dva bloky – h1 a ne\u010d\u00edslovan\u00fd seznam do html. Ka\u017edou \u010d\u00e1st m\u016f\u017eete editovat samostatn\u011b. A v\u0161imn\u011bte si \u0161ipek na lev\u00e9 stran\u011b bloku. D\u00edky nim m\u016f\u017eete posouvat um\u00edst\u011bn\u00ed bloku. Takto mi to p\u0159ijde pohodln\u011bj\u0161\u00ed, ne\u017e u st\u00e1vaj\u00edc\u00edch builder\u016f, kde bloky p\u0159etahujete my\u0161\u00ed a kdy\u017e se spr\u00e1vn\u011b netref\u00edte, tak v\u00e1m zdrhne kdov\u00ed kam.<\/p>\n krom\u011b \u00faprav samotn\u00fdch blok\u016f se mus\u00edme v\u011bnovat i dal\u0161\u00edm prvk\u016fm, jen\u017e Gutenberg obsahuje. Na prav\u00e9 stran\u011b je sloupec, kter\u00fd obsahuje dv\u011b z\u00e1lo\u017eky:<\/p>\n P\u0159id\u00e1n\u00ed n\u00e1hledov\u00e9ho obr\u00e1zku:<\/strong><\/p>\n Editace ozna\u010den\u00e9ho bloku:<\/strong><\/p>\n P\u0159id\u00e1n\u00ed dal\u0161\u00edho prvku:<\/strong><\/p>\n Mus\u00edm \u0159\u00edct, \u017ee toto mi p\u0159ijde jako velmi neohraban\u00e9. Ocenil bych, kdyby \u0161lo, p\u0159idat blok, p\u0159\u00edmo za jin\u00fd blok, proto\u017ee takto mus\u00edte scrolovat str\u00e1nkou a\u017e dol\u016f, kde je plus, pro p\u0159id\u00e1n\u00ed bloku. V\u00fdb\u011br je pom\u011brn\u011b intuitivn\u00ed, na prvn\u00ed pokus jsem pohopil, jak\u00e9 jsou mo\u017enosti.<\/p>\n Super je i mo\u017enost vlo\u017eit do str\u00e1nky shortcode, co\u017e ocen\u00ed v\u0161ichni v\u00fdvoj\u00e1\u0159i, kte\u0159\u00ed shortcody pou\u017e\u00edvaj\u00ed:<\/p>\n Mo\u017en\u00e1 jste si \u0159\u00edkali – to je super, ale kde jsou metaboxy, jen\u017e jsem pou\u017e\u00edval, jako je nap\u0159\u00edklad YOAST? Dobr\u00e1 zpr\u00e1va je, \u017ee Gutenberg umo\u017en\u00ed tyto metaboxy integrovat, tak\u017ee o sv\u00e9 obl\u00edben\u00e9 pluginy nep\u0159\u00edjdete. Na obr\u00e1zku je vid\u011bt, \u017ee budou um\u00edst\u011bny pod obsahem:<\/p>\n Zat\u00edm to vypad\u00e1 dob\u0159e, ne?<\/strong><\/p>\n M\u016fj osobn\u00ed n\u00e1zor je, \u017ee Gutenberg je krok spr\u00e1vn\u00fdm sm\u011brem a nez\u00e1le\u017e\u00ed na tom, zda se n\u011bkomu l\u00edb\u00ed, nebo ne, pokud se bude dob\u0159e pou\u017e\u00edvat u\u017eivatel\u016fm, jeho n\u00e1stup nikdo nezastav\u00ed.<\/p>\n V sou\u010dasn\u00e9 dob\u011b mi p\u0159ipad\u00e1, \u017ee implementace do WordPressu, prob\u00edh\u00e1 dost „nadivoko“.<\/p>\n P\u0159\u00edkladem je to, \u017ee po aktualizaci na WordPress 4.9, m\u011blo b\u00fdt v administraci ozn\u00e1men\u00ed pro u\u017eivatele, aby si vyzkou\u0161eli Gutenberg. Na WordPressu b\u011b\u017e\u00ed \u0159ada str\u00e1nek a u\u017eivatel\u00e9 jsou ochotn\u00ed zkou\u0161et nov\u00e9 v\u011bci i na provozn\u00edch webech. Po vln\u011b odporu, jen\u017e se v\u016f\u010di tomu zvedla, to bylo zru\u0161eno.<\/p>\n Cel\u00fd editor m\u011bl b\u00fdt postaven na javascriptov\u00e9 knihovn\u011b React. Pot\u00e9, co se vyno\u0159il probl\u00e9m s patentn\u00ed klauzul\u00ed v licenci knihovny, bylo nutn\u00e9, uprost\u0159ed v\u00fdvoje zm\u011bnit knihovnu, jen\u017e bude Gutenberg poh\u00e1n\u011bt.<\/p>\n Po dlouhou dobu, nepodporoval Gutenber shortcody a ani se nikde nemluvilo o tom, zda bude v\u016fbec jejich podpora zapracov\u00e1na. Po mnoha negativn\u00edch ohlasech se podpora shortcod\u016f doplnila. Co je ale st\u00e1le velk\u00e1 nezn\u00e1m\u00e1, je, jak budou fungovat vno\u0159en\u00e9 shortc\u00f3dy. Co\u017e jsou typicky shortc\u00f3dy, pro rozd\u011blov\u00e1n\u00ed obsahu do sloupc\u016f.<\/p>\n Stejn\u011b jako o shortcodech, i o metaboxech se na za\u010d\u00e1tku v\u016fbec nemluvilo. I kdy\u017e je to je\u0161t\u011b v\u011bt\u0161\u00ed probl\u00e9m, ne\u017e shortcody. Velmi mnoho plugin\u016f, nap\u0159\u00edklad m\u00e1 obl\u00edben\u00e1 WooCommerce, pou\u017e\u00edv\u00e1 vlastn\u00ed metaboxy. Spousta pr\u00e9miov\u00fdch \u0161ablon pou\u017e\u00edv\u00e1 vlastn\u00ed metaboxy. Podpora pro metaboxy v sou\u010dasn\u00e9 dob\u011b, je takov\u00e1, \u017ee v\u0161echny by m\u011bly b\u00fdt p\u0159eps\u00e1ny na bloky. Nejsem si jist, \u017ee to je re\u00e1ln\u00e9. P\u0159i po\u010dtu free a pr\u00e9miov\u00fdch plugin\u016f, nebo \u0161ablon, to bude neuv\u011b\u0159iteln\u00fd po\u010det hodin, kter\u00e9 budou muset program\u00e1to\u0159i str\u00e1vit na \u00faprav\u00e1ch.<\/p>\n Roadmap je ozna\u010den\u00ed pl\u00e1nu v\u00fdvoje, pro projekt. A u projektu takov\u00e9ho rozsahu, obsahuje roadmap, jen dva body, kter\u00e9 jsou napl\u00e1nov\u00e1ny pro rok 2017 a 2018. z toho se d\u00e1 usoudit jedinn\u00e9, nikdo netu\u0161\u00ed, co se bude d\u00edt d\u00e1l. Aktualizovan\u00e1 roadmapa.<\/a><\/p>\n Chcete vy\u0159e\u0161it probl\u00e9m s kompatiblitou va\u0161eho pluginu? Hodn\u011b \u0161t\u011bst\u00ed. A tak\u00e9 hodn\u011b \u010dasu. Dostupn\u00e1 dokumentace nem\u00e1 \u017e\u00e1dn\u00fd koncept, neexistuje \u017e\u00e1dn\u00fd guide, nebo pokyny pro v\u00fdvoj\u00e1\u0159e. P\u0159\u00edklad dokumentace k vytv\u00e1\u0159en\u00ed vlastn\u00edch blok\u016f\u00a0https:\/\/github.com\/WordPress\/gutenberg\/blob\/master\/docs\/blocks.md<\/a>.<\/p>\n Kdy\u017e si vzpomenete, jak dlouho trvala implementace Rest API do j\u00e1dra a co v\u0161e se \u0159e\u0161ilo, ne\u017e k tomu opravdu do\u0161lo, m\u016f\u017ee v\u00e1s p\u0159ekvapit, \u017ee editor, jen\u017e nen\u00ed v \u017e\u00e1dn\u00e9m p\u0159\u00edpad\u011b hotov\u00fd, m\u00e1 b\u00fdt sou\u010d\u00e1st\u00ed WordPressu 5.0. Budu velmi zv\u011bdav\u00fd, jak bude cel\u00fd proces pokra\u010dovat.<\/p>\n Jedna z nejv\u011bt\u0161\u00edch v\u00fdhod WordPressu je jeho zp\u011btn\u00e1 kompatibilita. Kdy\u017e nebudete dva roky aktualizovat, stejn\u011b v\u00e1m bude web tak n\u011bjak, st\u00e1le fungovat. Probl\u00e9mem je, \u017ee u Gutenbergu jde nejenom o zm\u011bnu pou\u017e\u00edvan\u00e9 technologie, ale celkov\u00e9ho konceptu vytv\u00e1\u0159en\u00ed obsahu a \u017ee nikdo nen\u00ed schopen dop\u0159edu \u0159\u00edci, jak to bude. Co se stane, kdy\u017e si n\u011bkdo zaktualizuje WordPress a p\u0159estane mu fungovat firemn\u00ed web? Proto\u017ee nebude fungovat \u0161ablona, nebo n\u011bjak\u00fd plugin?<\/p>\n Ani toto nen\u00ed zat\u00edm jasn\u00e9. Sp\u00ed\u0161e to vypad\u00e1, \u017ee ne. D\u016fvod je podle mne z\u0159ejm\u00fd. Automattic m\u00e1 tendenci, ostatn\u011b pochopitelnou, sm\u011b\u0159ovat k modern\u00edm webov\u00fdm technologi\u00edm. P\u0159\u00edkladem m\u016f\u017ee b\u00fdt Calypso<\/a>, co\u017e m\u011bla b\u00fdt kompletn\u011b p\u0159epsan\u00e1 administrace do Reactu. Pamatujete si na to? Ne? Nen\u00ed divu, hromadn\u011b se to neroz\u0161\u00ed\u0159ilo. A tomu se chce Automattic nyn\u00ed vyhnout a donutit u\u017eivatele Gutenberg pou\u017e\u00edvat. Proto\u017ee bez pou\u017e\u00edv\u00e1n\u00ed se v\u00fdvoj zastav\u00ed a WordPress bude p\u0159e\u0161lapovat na m\u00edst\u011b.<\/p>\n Aby nedo\u0161lo k omylu. Gutenberg je krok spr\u00e1vn\u00fdm sm\u011brem a WordPress takov\u00fd impuls pot\u0159ebuje. Probl\u00e9mem je, \u017ee syst\u00e9m vyrostl z blogov\u00e1tka do komplexn\u00edho \u0159e\u0161en\u00ed a na n\u011bj se nabalila vlastn\u00ed ekonomika.<\/p>\n Existuje spousta v\u00fdvoj\u00e1\u0159\u016f \u0161ablon, v\u00fdvoj\u00e1\u0159\u016f roz\u0161\u00ed\u0159en\u00ed, firem, kter\u00e9 se staraj\u00ed o \u00fadr\u017ebu webu, specializovan\u00e9 hostingy, marketingov\u00e9 slu\u017eby zam\u011b\u0159en\u00e9 jen na WordPress a v neposledn\u00ed \u0159ad\u011b, i \u0159ada firem si vlastn\u00ed webov\u00e9 sr\u00e1nky nechala p\u0159ev\u00e9st do WordPressu, proto\u017ee se velmi jednodu\u0161e spravuj\u00ed.<\/p>\n A v tu chv\u00edli, kdy m\u016f\u017ee b\u00fdt pom\u011brn\u011b velk\u00e9 mno\u017estv\u00ed firem finan\u010dn\u011b ovlivn\u011bno t\u00edm, \u017ee od verze 5.0 bude m\u00edt WordPress nov\u00fd editor a te\u010dka, vzniknou dost velk\u00e9 n\u00e1roky na p\u0159epracov\u00e1n\u00ed st\u00e1vaj\u00edc\u00edch pou\u017e\u00edvan\u00fdch produkt\u016f.<\/p>\n Nedovedu si p\u0159edstavit, jak budu vysv\u011btlovat majiteli firmy, kter\u00e1 si nechala postavit web, \u017ee bude aktualizace a \u017ee se mus\u00ed zkontorolovat pluginy a \u0161ablony, p\u0159\u00edpadn\u011b kontaktovat v\u00fdvoj\u00e1\u0159e t\u011bch dopl\u0148k\u016f, proto\u017ee jinak m\u016f\u017ee p\u0159estat web fungovat. A \u017ee to bude st\u00e1t t\u0159eba 15 tis\u00edc.<\/p>\n A pokud si p\u0159e\u010dtete koment\u00e1\u0159e u \u010dl\u00e1nk\u016f o Gutenbergu, uvid\u00edte, \u017ee podobnou obavu m\u00e1 spousta lid\u00ed, jen\u017e se WordPressem \u017eiv\u00ed.<\/p>\n Tak\u017ee uvid\u00edme, co n\u00e1m budoucnost p\u0159inese.<\/p>\n Zaj\u00edmav\u00e9 \u010dl\u00e1nky:<\/p>\n Na z\u00e1v\u011br odkaz na \u010dl\u00e1nek, kter\u00fd zmi\u0148uje prvn\u00ed v\u00fdvoj\u00e1\u0159k\u00e9 studio, jen\u017e ukon\u010dilo v\u00fdvoj page builderu, proto\u017ee p\u0159edpokl\u00e1daj\u00ed pokles tr\u017eeb po implementaci Gutenbergu do WordPressu.<\/p>\n<\/a><\/p>\n
<\/a><\/p>\n
<\/a><\/p>\n
<\/a><\/p>\n
<\/a><\/p>\n
<\/a><\/p>\n
<\/a><\/p>\n
<\/a><\/p>\n
<\/a><\/p>\n
\n
<\/a><\/p>\n
<\/a><\/p>\n
<\/a><\/p>\n
<\/a><\/p>\n
<\/a><\/p>\n
Av\u0161ak, je tu n\u011bkolik ale, kter\u00e9 mus\u00ed b\u00fdt naps\u00e1ny.<\/strong><\/h2>\n
Ozn\u00e1men\u00ed o\u00a0vyzkou\u0161en\u00ed editoru bylo odstran\u011bno<\/strong><\/h2>\n
V pr\u016fb\u011bhu v\u00fdvoje byla zm\u011bn\u011bna technologie<\/strong><\/h2>\n
Nen\u00ed jasn\u00e9, jak budou fungovat shortcodes<\/h2>\n
Dal\u0161\u00ed ot\u00e1zkou jsou metaboxy<\/h2>\n
\u00a0Naprosto sm\u011b\u0161n\u00e1 roadmapa<\/h2>\n
Nedostate\u010dn\u00e1 dokumentace<\/h2>\n
Tlak na brzkou implementaci<\/h2>\n
Bude WordPress 5.0 zp\u011btn\u011b nekompatibiln\u00ed?<\/h2>\n
Bude mo\u017en\u00e9 si zvolit, jak\u00fd editor chci pou\u017e\u00edvat?<\/h2>\n
\n