{"id":5061,"date":"2024-01-29T06:27:17","date_gmt":"2024-01-29T06:27:17","guid":{"rendered":"https:\/\/musilda.cz\/?p=5061"},"modified":"2024-01-29T06:27:17","modified_gmt":"2024-01-29T06:27:17","slug":"wordpress-gutenberg-zakladni-bloky-prvni-cast","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/wordpress-gutenberg-zakladni-bloky-prvni-cast\/","title":{"rendered":"WordPress Gutenberg – z\u00e1kladn\u00ed bloky prvn\u00ed \u010d\u00e1st"},"content":{"rendered":"\n
Aktualizov\u00e1no 29.01.2024<\/em><\/p>\n\n\n\n Gutenberg zcela zm\u011bn\u00ed pr\u00e1ci s obsahem ve WordPressu a proto se pod\u00edv\u00e1me, co n\u00e1s ve sv\u011bt\u011b blok\u016f \u010dek\u00e1.<\/p>\n\n\n\n Po instalaci, nebo aktivaci editoru, m\u00e1te k dispozici okam\u017eit\u011b sadu z\u00e1kladn\u00edch blok\u016f, jen\u017e v\u00e1m umo\u017en\u00ed vytv\u00e1\u0159et obsah na str\u00e1nce. Jsou rozd\u011bleny podle druhu pou\u017eit\u00ed do \u0161esti skupin a ka\u017ed\u00fd z nich obsahuje vlastn\u00ed nastaven\u00ed.<\/p>\n\n\n Paragraph rovn\u00e1 se odstavec a v HTML jej prezentuj\u00ed zna\u010dky „p“. Tak jako ka\u017ed\u00fd blok, m\u00e1 i paragraph prvky, kter\u00e9 se zv\u00fdrazn\u00ed po najet\u00ed my\u0161i, nebo po kliknut\u00ed. V\u011bt\u0161ina z t\u011bchto prvk\u016f je spole\u010dn\u00e1 pro v\u0161echny bloky, proto je pr\u00e1v\u011b odstavec ide\u00e1ln\u00ed pro jejich popis. Po najet\u00ed my\u0161i na odstavec, or\u00e1muje se blok r\u00e1me\u010dkem, v horn\u00edm prav\u00e9m rohu se zobraz\u00ed jeho n\u00e1zev a po lev\u00e9 stran\u011b se zobraz\u00ed mo\u017enost pro p\u0159esouv\u00e1n\u00ed bloku v hierarchii str\u00e1nky:<\/p>\n\n\n \u0160ipkami m\u016f\u017eete posouvat blok nahoru a dol\u016f. Kdy\u017e najedete na \u0161est te\u010dek mezi \u0161ipkami, zm\u011bn\u00ed se kurzor na ru\u010di\u010dku a m\u016f\u017eete blok p\u0159esunout ta\u017een\u00edm my\u0161i.<\/p>\n\n\n\n Jakmile kliknete do bloku, zobraz\u00ed se menu s mo\u017enostmi \u00faprav bloku:<\/p>\n\n\n V\u0161imn\u011bte si, \u017ee v lev\u00e9m horn\u00edm rohu roletky, kter\u00e1 umo\u017e\u0148uje jednodu\u0161e p\u0159epnout pragraf do jin\u00e9ho bloku. D\u00e1le m\u016f\u017eete zarovnat text do st\u0159edu, nebo vpravo, ozna\u010dit \u010d\u00e1st textu tu\u010dn\u011b, nebo kurz\u00edvou, vlo\u017eit odkaz a pod malou \u0161ipe\u010dkou najdete mo\u017enosti, jako je horn\u00ed a doln\u00ed index, p\u0159e\u0161krtnut\u00ed textu…. <\/p>\n\n\n\n Posledn\u00ed t\u0159i te\u010dky skr\u00fdvaj\u00ed dal\u0161\u00ed menu, jen\u017e umo\u017e\u0148uje kop\u00edrovat a duplikovat blok, vlo\u017eit jin\u00fd blok p\u0159ed a za aktu\u00e1ln\u00ed, kop\u00edrovat a vkl\u00e1dat styly, seskupit, zamknout, vytvo\u0159it vzor, p\u0159em\u00edstit do, upravovat jej jako html a odstranit jej.<\/p>\n\n\n\n Nesm\u00edme ale zapomenout na mo\u017enosti, kter\u00e9 se n\u00e1m u ka\u017ed\u00e9ho bloku zobraz\u00ed po prav\u00e9 stran\u011b. Ty umo\u017e\u0148uj\u00ed d\u011blat dal\u0161\u00ed \u00fapravy, jako t\u0159eba nastavit velikost p\u00edsma, d\u00e1t odstavci prvn\u00ed p\u00edsmo v\u011bt\u0161\u00ed (dropcap) a m\u011bnit barvu textu a pozad\u00ed.<\/p>\n\n\n Roletka Advanced ukr\u00fdv\u00e1 mo\u017enost p\u0159id\u00e1n\u00ed bloku vlastn\u00ed css t\u0159\u00eddu. Toto nastaven\u00ed je u ka\u017ed\u00e9ho bloku v Gutenbergu.<\/p>\n\n\n Blok pro vytv\u00e1\u0159en\u00ed nadpis\u016f je podobn\u00fd bloku pro odstavec, jako mo\u017enosti vid\u00edte na obr\u00e1zku:<\/p>\n\n\n Postrann\u00ed menu nab\u00edz\u00ed t\u00e9m\u011b\u0159 identick\u00e9 nastaven\u00ed, jako m\u00e1 paragraf blok. D\u016fle\u017eitou funkc\u00ed jsou tzv. HTML z\u00e1lo\u017eky, d\u00edky kter\u00fdm je mo\u017en\u00e9 vytv\u00e1\u0159et odkazy na konkr\u00e9tn\u00ed m\u00edsto ve str\u00e1nce.<\/p>\n\n\n Vlo\u017een\u00ed obr\u00e1zku pomoc\u00ed bloku je stejn\u011b jednoduch\u00e9, jako vytvo\u0159en\u00ed nadpisu. V horn\u00edm panelu znamen\u00e1 troj\u00faheln\u00edk nastaven\u00ed dvojit\u00e9ho filtru a ikonka s te\u010dkami je pro p\u0159id\u00e1n\u00ed titulku. D\u00e1le u\u017e je zde jen nastaven\u00ed odkazu, o\u0159\u00edznut\u00ed obr\u00e1zku, a posledn\u00ed skv\u011blou funkc\u00ed je i p\u0159id\u00e1n\u00ed textu p\u0159es obr\u00e1zek. <\/p>\n\n\n\n Blok pro obr\u00e1zek m\u00e1 ale jednu zaj\u00edmavou vlastnost, a tou je mo\u017enost jej zmen\u0161it tahem my\u0161i. V\u0161imn\u011bte si modr\u00fdch te\u010dek na kraj\u00edch obr\u00e1zku:<\/p>\n\n\n V\u00fdsledek:<\/p>\n\n\n Samoz\u0159ejm\u011b, i obr\u00e1zek m\u00e1 nastaven\u00ed po prav\u00e9 stran\u011b, tam m\u016f\u017eete upravovat tak\u00e9 styly, m\u011bnit alt text, pom\u011br stran, \u0161\u00ed\u0159ku a v\u00fd\u0161ku, rozli\u0161en\u00ed, rozbalen\u00ed obr\u00e1zku po kliknut\u00ed:<\/p>\n\n\n Jednoduch\u00fd blok, jen\u017e umo\u017e\u0148uje vytvo\u0159it \u010d\u00edslovan\u00fd s ne\u010d\u00edslovan\u00fd seznam. Krom\u011b mo\u017enost\u00ed, viditeln\u00fdch na obr\u00e1zku, m\u00e1 pouze p\u00e1r mo\u017enost\u00ed v lev\u00e9m panelu pro zm\u011bnu typologie.<\/p>\n\n\n Galerie byla a je sou\u010d\u00e1st\u00ed WordPressu u\u017e hodn\u011b dlouho a proto v Gutenbergu nesm\u00ed chyb\u011bt ani tento blok.<\/p>\n\n\n P\u0159i v\u00fdb\u011bru obr\u00e1zk\u016f do galerie si zvol\u00edte i po\u010det sloupc\u016f, pro obr\u00e1zky. J\u00e1 sem vybral dva sloupce, av\u0161ak, proto\u017ee jsem vybral obr\u00e1zky t\u0159i, ten posledn\u00ed se rozt\u00e1hne do voln\u00e9ho m\u00edsta:<\/p>\n\n\n Na\u0161t\u011bst\u00ed m\u016f\u017eete po\u010det sloupc\u016f m\u011bnit jednodu\u0161e v postrann\u00edm panelu:<\/p>\n\n\n Tro\u0161ku hran\u00ed s galeri\u00ed – p\u0159idal jsem \u010dtvrt\u00fd obr\u00e1zek:<\/p>\n\n\n a zm\u011bnil jsem layout na \u010dty\u0159i sloupce:<\/p>\n\n\n To by pro za\u010d\u00e1tek mohlo sta\u010dit a p\u0159\u00ed\u0161t\u011b se pod\u00edv\u00e1me na vkl\u00e1d\u00e1n\u00ed multim\u00e9di\u00ed.<\/p>\n\n\n\n<\/a><\/figure><\/div>\n\n\n
Nejz\u00e1kladn\u011bj\u0161\u00ed Gutenberg bloky – Common Blocks<\/h2>\n\n\n\n
\n
Paragraph blok<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n
<\/figure><\/div>\n\n\n
<\/figure><\/div>\n\n
<\/figure><\/div>\n\n\n
<\/figure><\/div>\n\n\n
Nadpis blok<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n
<\/figure><\/div>\n\n\n
Blok obr\u00e1zek<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n
<\/figure><\/div>\n\n\n
<\/figure><\/div>\n\n\n
Blok seznam<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n
Blok galerie<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n
<\/figure><\/div>\n\n\n
<\/figure><\/div>\n\n\n
<\/figure><\/div>\n\n\n
<\/figure><\/div>\n\n\n
\n