Ak používate WordPress už niekoľko rokov, pamätáte si, keď ľudia z WordPress v^(WordPress) roku 2018 spustili editor Gutenberg vo ^(Gutenberg)WordPress 5.0 .

Tento nový predvolený editor bol zásadným prepracovaním úprav príspevkov aj stránok na vašej lokalite. Premenil veľké textové pole, na ktoré boli majitelia webových stránok zvyknutí, na veľmi odlišnú platformu na úpravu založenú na blokoch.

Niektorí majitelia webov to tak nenávideli, že sa vyhýbali inovácii na WordPress 5.0 a zostali pri klasickom predvolenom editore tak dlho, ako sa len dalo. Ostatní vlastníci webových stránok túto zmenu prijali pre jej jednoduchosť a jednoduchosť používania.

Ak prechádzate a ste zvedaví, čo môžete očakávať, tento tutoriál WordPress Gutenberg vás prevedie hlavnými funkciami, ktoré potrebujete poznať a pochopiť. To by vám malo čo najviac uľahčiť prechod.

Čo môžete očakávať od WordPress Gutenberg

Hlavná vec, ktorú treba vedieť o editore Gutenberg , je, že je založený na blokoch. To znamená, že všetko, čo potrebujete pridať, je spravované prostredníctvom blokov. Bloky v Gutenberg zahŕňajú (ale nie sú obmedzené na):

• Odsek
• Hlavička
• Obrázok
• Zoznam
• Citovať
• kód
• Predformátovaný
• Vytiahnite citát
• Tabuľka

Existuje aj niekoľko ďalších pokročilých blokov, ktoré sa zriedka používajú. Ak do editora nainštalujete nové doplnky WordPress , môžete vidieť ďalšie bloky.^{(new WordPress plugins)}

Pridávanie blokov je také jednoduché ako výber ikony + vpravo pod posledným pridaným blokom.

Výberom ktoréhokoľvek z blokov z kontextového okna sa daný blok pridá ako ďalšia sekcia na vašej stránke alebo príspevku. 

Než sa dostaneme k týmto blokom, začnime od začiatku a vytvorte nový príspevok pomocou Gutenberga^(Gutenberg) vo WordPress .

Vytváranie príspevkov a pridávanie blokov

Pridanie príspevku zostáva nezmenené od poslednej verzie WordPress . Stačí^(Just) vybrať Príspevky^(Posts) z ľavého navigačného panela a pod ním vybrať Pridať nový^{(Add New)} . 

Tým sa otvorí okno editora príspevkov. Aj tu je všetko inak. Uvidíte predvolený editor  Gutenberg WordPress .

Pridanie blokových položiek^{(Block Items)} v editore Gutenberg^{(Gutenberg Editor)}

Do poľa názvu môžete zadať názov príspevku. Potom vyberte ikonu + vpravo a pridajte prvý blok.

Bloky odsekov^{(Paragraph Blocks)}

Najčastejším prvým blokom, ktorý ľudia pridávajú za nadpis, je odsek. Ak to chcete urobiť, v kontextovom okne  vyberte položku Odsek .^(Paragraph)

Tým sa vloží blokové pole, kde môžete začať písať prvý odsek svojho príspevku. Formátovanie bloku odseku sa riadi ^(Paragraph)predvoleným písmom^{(the default font)} pre bloky odsekov vašej lokality. 

Tu je niekoľko tipov na pridávanie blokov odsekov v editore Gutenberg .

• Váš odsek môže byť tak dlhý, ako chcete. Text sa automaticky zalomí do ďalšieho riadku, rovnako ako v klasickom editore.
• Ak stlačíte Enter , editor Gutenberg automaticky vytvorí nový blok odseku, ktorý však vyzerá len ako druhý odsek so zlomom odseku.
• Zvýraznením akéhokoľvek textu v odseku sa zobrazí okno formátovania, v ktorom môžete zmeniť formátovanie tohto textu alebo upraviť blok na zoznam alebo iný typ bloku.
• Vyberte tri bodky a vyberte Odstrániť blok^{(Remove block)} , ak chcete odstrániť blok odseku a nahradiť ho niečím iným.

Obrazové bloky^{(Image Blocks)}

Ak vyberiete blok Obrázok^(Image) , zobrazí sa pole Obrázok^(Image) , v ktorom môžete vybrať tlačidlo Nahrať^(Upload) a nahrať obrázok do príspevku z počítača. Vyberte prepojenie Knižnica médií^{(Media Library)} , ak chcete použiť obrázok z vašej existujúcej knižnice médií, alebo Vložiť z adresy URL^{(Insert from URL)} , ak chcete vytvoriť prepojenie na obrázok z inej lokality.

Tým sa obrázok vloží do článku, do ktorého ste pridali nový blok Obrázok . ^(Image)Všimnete si, že popis k obrázku môžete zadať priamo pod samotný obrázok.

Na text titulku môžete použiť rovnaké možnosti formátovania ako na bežný odsekový text.

Zoznam blokov^{(List Blocks)}

Keď pridáte nový blok a vyberiete Zoznam^(List) , vloží sa blok zoznamu do daného bodu článku.

Zobrazí sa jedna odrážka, ale počas písania a stláčania klávesu Enter sa každá nová odrážka zobrazí tak, ako potrebujete.

Formátovanie zoznamu sa riadi aj štýlom a veľkosťou písma, ktoré sú definované vašou témou^{(your theme)} , takže sa nečudujte, že písmo vo vašom zozname vyzerá inak ako bloky odsekov.

Text v bloku zoznamu môžete zvýrazniť a ak ho chcete zmeniť, zobrazia sa možnosti formátovania tohto textu. Tu nemôžete zmeniť štýl písma, ale môžete použiť tučné písmo, kurzívu, pridať hypertextový odkaz alebo úplne zmeniť typ bloku.

Ostatné bloky^{(Other Blocks)}

Ak chcete zobraziť všetky bloky, ktoré sú k dispozícii, vyberte + na pridanie bloku a potom vyberte Prehľadávať všetko^{(Browse all)} , aby ste videli celý zoznam.

Tento zoznam je skutočne dosť dlhý. Všetko, na čo si spomeniete, že je dostupné v klasickom editore prostredníctvom jeho systému menu, bude zahrnuté tu. Patria sem ďalšie bežne používané bloky, ako napríklad:

• Tabuľky
• Súbory a médiá
• Videá
• Značka „Viac“.
• Konce strán a oddeľovače
• Miniaplikácie, ako sú sociálne ikony, oblaky značiek, kalendár^(calendar) a miniaplikácie doplnkov WordPress
• Vložte^(Embed) kód pre sociálne stránky, mediálne stránky ako YouTube a Spotify a ďalšie

Ďalšie vlastnosti Gutenberg

Nemusíte sa držať blokov, ktoré ste pridali, kdekoľvek ste ich pridali. Vo svojom príspevku sa môžete posunúť späť a vybrať ikonu + medzi ktorýmkoľvek existujúcim blokom. To vám umožní vložiť nové bloky medzi existujúce.

Tiež nie ste prilepení na umiestnenie svojich blokov. V klasickom editore WordPress nebolo vždy ľahké presúvať veci, ako sú obrázky, do iných sekcií vášho príspevku bez toho, aby sa niekedy pokazilo kódovanie na pozadí.

V Gutenbergovi^(Gutenberg) je premiestňovanie prvkov, ako sú obrázky, také jednoduché, ako výber bloku a následný výber šípok nahor alebo nadol na paneli s kontextovou ponukou, čím sa blok presunie nahor alebo nadol v príspevku.

Zakaždým, keď vyberiete šípku, posunie sa blok o jednu pozíciu v akomkoľvek smere, ktorý ste vybrali.

Používanie editora Glutenberg^{(Glutenberg Editor)} vo WordPress

Oblasť príspevkov nie je jediným miestom na pridávanie nových blokov. Všimnite si, že v hornej časti editora je veľmi jednoduchá ponuka ikon, kde môžete pomocou ikony + pridať aj bloky.

Ostatné ikony v tejto ponuke vám umožňujú rýchly prístup k ďalším funkciám Gutenberg .

• Ikona úpravy^(Edit) pera vám umožňuje prepnúť do režimu výberu, aby ste mohli jednoduchšie vyberať bloky. Dvojitým kliknutím^{(Double-click)} na blok sa vrátite do režimu úprav .^(Edit)
• Ikony Späť^(Undo) alebo Znova^(Redo) (zahnuté šípky doľava a doprava) vrátia späť alebo zopakujú vašu poslednú úpravu.
• Ikona i (Podrobnosti) zobrazuje počet znakov, slov, nadpisov, odsekov a blokov vo vašom príspevku.
• Ikona Obrys^(Outline) vám umožňuje rýchlo prejsť na bloky vo vašom príspevku na základe ich poradia v prehľade príspevku.

Pre mnohých ľudí si na editor Gutenberg vo ^(Gutenberg)WordPress treba trochu zvyknúť. Keď si však vyskúšate, aké ľahké je vytvárať, upravovať a manipulovať s blokmi prvkov vo vašich príspevkoch, zistíte, že váš proces vytvárania príspevkov a stránok je rýchlejší a produktívnejší.

WordPress Gutenberg Tutorial: How to Use the New Editor

If you’ve been using WordPress for quite a few years, then you remember when the folks at WordPress rolled out the Gutenberg editor in WordPress 5.0 back in 2018.

This new default editor was a major overhaul for editing both posts and pages on your site. It transformed the large text box that website owners were accustomed to into a very different block-based editing platform.

Some website owners hated it so much that they avoided upgrading to WordPress 5.0 and stayed with the classic default editor as long as possible. Other website owners embraced the change for its simplicity and ease-of-use.

If you’re making the transition and are curious what to expect, this WordPress Gutenberg tutorial will walk you through the main features you need to know and understand. This should make your transition as easy as possible.

What to Expect in WordPress Gutenberg

The main thing to know about the Gutenberg editor is that it’s block based. This means anything you need to add is managed via blocks. Blocks in Gutenberg include (but are not limited to):

• Paragraph
• Header
• Image
• List
• Quote
• Code
• Preformatted
• Pullquote
• Table

There are also a few other advanced blocks that are rarely used. You may see additional blocks if you install new WordPress plugins to the editor.

Adding blocks is as simple as selecting the + icon to the right under the most recent block you’ve added.

Selecting any of the blocks from the pop-up window adds that block as the next section in your page or post. 

Before we get to these blocks, let’s start from the beginning and create a new post using Gutenberg in WordPress.

Creating Posts and Adding Blocks

Adding a post remains unchanged from the last version of WordPress. Just select Posts from the left navigation bar, and select Add New underneath it. 

This will open the post editor window. This is also where everything is different. You’ll see the default Gutenberg WordPress editor. 

Adding Block Items in the Gutenberg Editor

You can type the title for your post in the title field. Then select the + icon on the right to add the first block.

Paragraph Blocks

The most common first block people add after the title is a paragraph block. To do this, select Paragraph from the pop-up window. 

This will insert a block field where you can start typing the first paragraph of your post. Formatting for the Paragraph block follows the default font for your site’s paragraph blocks. 

Here are some tips for adding paragraph blocks in the Gutenberg editor.

• Your paragraph can be as long as you like. The text will automatically wrap into the next line, just like in the classic editor.
• If you press Enter, the Gutenberg editor automatically creates a new paragraph block, however it just looks like a second paragraph with a paragraph break.
• Highlighting any text in the paragraph will show a formatting window where you can alter the formatting for that text, or modify the block into a list or some other block type.
• Select the three dots and select Remove block to delete a paragraph block and replace it with something else.

Image Blocks

If you select the Image block, you’ll see an Image box where you can select an Upload button to upload an image into your post from your computer. Select the Media Library link to use an image from your existing media library, or Insert from URL to link to an image from another site.

This will insert the image into the article where you added the new Image block. You’ll notice that you can type the caption for the image directly under the image itself.

You can use the same formatting options on the caption text as you can on the regular paragraph text.

List Blocks

When you add a new block and select List, it’ll insert the list block at that point in the article.

It’ll show one bullet, but as you type and press Enter, each new bullet will appear as you need them.

List formatting also follows the font style and size as defined by your theme, so don’t be surprised if the font in your list looks different than your paragraph blocks.

You can highlight text in the list block and you’ll see formatting options for this text if you want to change it. You can’t change the font style here, but you can bold, italics, add a hyperlink, or change the block type entirely.

Other Blocks

If you want to see all the blocks that are available, select + to add a block, then select Browse all to see the entire list.

This list is actually quite long. Anything you remember being available in the classic editor via its menu system will be included here. These include other commonly used blocks like:

• Tables
• Files and media
• Videos
• The “More” tag
• Page breaks and separators
• Widgets like social icons, tag clouds, calendar, and WordPress plugin widgets
• Embed code for social sites, media sites like YouTube and Spotify, and more

Other Gutenberg Features

You don’t have to stick with the blocks you’ve added wherever you added them. You can scroll back up in your post and select the + icon between any of the existing blocks. This will let you insert new blocks between existing ones.

You also aren’t stuck with the placement of your blocks either. In the classic WordPress editor, it wasn’t always easy moving things like images to other sections of your post without sometimes messing up the background coding.

In Gutenberg, moving elements like images is as simple as selecting the block and then selecting the up or down arrows in the pop-up menu bar to move the block up or down in the post.

Each time you select the arrow it’ll slide that block one position in whatever direction you’ve selected.

Using the Glutenberg Editor in WordPress

The post area isn’t the only place to add new blocks. You’ll notice there’s a very simple icon menu at the top of the editor where you can use the + icon to add blocks as well.

The other icons in this menu give you quick access to other Gutenberg features.

• The pen Edit icon lets you switch to select mode to more easily select blocks. Double-click a block to go back to Edit mode.
• Undo or Redo icons (left and right curved arrows) will undo or redo your last edit.
• The i (Details) icon shows you the number of characters, words, headings, paragraphs, and blocks in your post.
• The Outline icon lets you quickly navigate to blocks in your post based on their order in your post outline.

For many people, the Gutenberg editor in WordPress does take some getting used to. But after experiencing how easy it is to create, edit, and manipulate blocks of elements in your posts, you’ll find that your process of creating posts and pages is faster and more productive.

Related posts

• 9 nutných doplnkov pre nové inštalácie WordPress

• Ako prejsť z klasického editora WordPress na Gutenberg

• Ako skryť rýchle prepojenia na stránke Nová karta v Edge pomocou Editora databázy Registry

• Ako presunúť web WordPress z jedného hostiteľa na druhého

• Ako nainštalovať a nastaviť WordPress na Microsoft Azure

• Ako manuálne nastaviť WordPress na doméne

• Ako skontrolovať, či je webová stránka zakázaná v službe AdSense

• Ako nájsť prihlasovacie meno správcu WordPress

• Ako nainštalovať testovaciu stránku WordPress do počítača

• Ako odstrániť malvér z vášho webu WordPress

• Musíte mať nastavenia WordPress Yoast SEO 2022

• Ako používať WP Super Cache na blogu WordPress

• 8 bezplatných prémiových tém WordPress na inštaláciu

• Recenzia knihy: Vytvorte si svoj vlastný web: Komiksový sprievodca HTML, CSS a Wordpress

• Ako zmeniť svoju prihlasovaciu adresu WordPress pre lepšiu bezpečnosť

• Najlepší formát na písanie blogu na získanie bodov

• Ako sledovať nefunkčné odkazy pomocou Nástroja správcu webu Google

• Squarespace vs WordPress: Ktorá je lepšia platforma stránok?

• Ako zvýšiť výkon vo WordPress prostredníctvom vyčistenia databázy

• Vytvorenie detskej témy vo WordPress