{"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

\"\"<\/a><\/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

\"\"<\/a><\/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

\"\"<\/a><\/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

\"\"<\/a><\/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

\"\"<\/a><\/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

\"\"<\/a><\/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

\"\"<\/a><\/p>\n

Jednodu\u0161e m\u016f\u017eete p\u0159ep\u00ednat mezi obsahem a html, jako to je i nyn\u00ed:<\/p>\n

\"\"<\/a><\/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

\"\"<\/a><\/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