Ako koristite WordPress već nekoliko godina, onda se sjećate kada su ljudi u WordPressu^(WordPress) izbacili Gutenbergov^(Gutenberg) uređivač u WordPress 5.0 još 2018. godine.

Ovaj novi zadani uređivač bio je velika preinaka za uređivanje i postova i stranica na vašoj web-lokaciji. Pretvorio je veliki tekstni okvir na koji su vlasnici web stranica bili navikli u vrlo različitu platformu za uređivanje temeljenu na blokovima.

Neki vlasnici web stranica su ga toliko mrzili da su izbjegavali nadogradnju na WordPress 5.0 i ostali na klasičnom zadanom uređivaču što je dulje moguće. Ostali vlasnici web stranica prihvatili su promjenu zbog jednostavnosti i lakoće korištenja.

Ako radite prijelaz i znatiželjni ste što možete očekivati, ovaj vodič za WordPress Gutenberg će vas provesti kroz glavne značajke koje trebate znati i razumjeti. Ovo bi trebalo učiniti vaš prijelaz što lakšim.

Što očekivati ​​u WordPressu Gutenberg^{(WordPress Gutenberg)}

Glavna stvar koju treba znati o Gutenbergovom^(Gutenberg) uređivaču je da se temelji na blokovima. To znači da se svime što trebate dodati upravlja putem blokova. Blokovi u Gutenbergu^(Gutenberg) uključuju (ali nisu ograničeni na):

• Stavak
• Zaglavlje
• Slika
• Popis
• Citat
• Kodirati
• Unaprijed formatirano
• Povucite citat
• Stol

Postoji i nekoliko drugih naprednih blokova koji se rijetko koriste. Možda ćete vidjeti dodatne blokove ako instalirate nove WordPress dodatke^{(new WordPress plugins)} u uređivač.

Dodavanje blokova jednostavno je kao odabir ikone + s desne strane ispod posljednjeg bloka koji ste dodali.

Odabirom bilo kojeg bloka iz skočnog prozora taj se blok dodaje kao sljedeći odjeljak na vašoj stranici ili objavi. 

Prije nego što dođemo do ovih blokova, krenimo ispočetka i stvorimo novi post koristeći Gutenberg u WordPressu^(WordPress) .

Stvaranje postova i dodavanje blokova

Dodavanje objave ostaje nepromijenjeno u odnosu na posljednju verziju WordPressa^(WordPress) . Samo^(Just) odaberite Objave^(Posts) na lijevoj navigacijskoj traci i ispod nje  odaberite Dodaj novo .^{(Add New)}

Ovo će otvoriti prozor za uređivanje postova. Ovdje je također sve drugačije. Vidjet ćete zadani Gutenberg WordPress uređivač. 

Dodavanje blok stavki^{(Block Items)} u Gutenberg Editor

Možete upisati naslov svog posta u polje za naslov. Zatim odaberite ikonu + s desne strane da dodate prvi blok.

Blokovi paragrafa^{(Paragraph Blocks)}

Najčešći prvi blok koji ljudi dodaju nakon naslova je blok odlomka. Da biste to učinili, u skočnom prozoru  odaberite Paragraf .^(Paragraph)

Ovo će umetnuti blok polje u koje možete početi upisivati ​​prvi odlomak svoje objave. Formatiranje bloka paragrafa^(Paragraph) slijedi zadani font^{(the default font)} za blokove paragrafa vaše stranice. 

Evo nekoliko savjeta za dodavanje blokova odlomaka u Gutenbergov^(Gutenberg) uređivač.

• Vaš odlomak može biti koliko god želite. Tekst će se automatski premotati u sljedeći redak, baš kao u klasičnom uređivaču.
• Ako pritisnete Enter , Gutenbergov^(Gutenberg) uređivač automatski stvara novi blok odlomka, no on samo izgleda kao drugi odlomak s prijelomom odlomka.
• Označavanjem bilo kojeg teksta u odlomku prikazat će se prozor za oblikovanje u kojem možete izmijeniti oblikovanje tog teksta ili modificirati blok u popis ili neku drugu vrstu bloka.
• Odaberite tri točke i odaberite Ukloni blok^{(Remove block)} da biste izbrisali blok odlomka i zamijenili ga nečim drugim.

Blokovi slike^{(Image Blocks)}

Ako odaberete blok Slika^(Image) , vidjet ćete okvir za sliku^(Image) u kojem možete odabrati gumb Prenesi za prijenos slike u svoj post sa svog računala. ^(Upload)Odaberite vezu Biblioteka medija^{(Media Library)} da biste upotrijebili sliku iz svoje postojeće medijske biblioteke ili Umetni iz URL^{(Insert from URL)} -a da biste se povezali na sliku s druge stranice.

Ovo će umetnuti sliku u članak u koji ste dodali novi blok slika . ^(Image)Primijetit ćete da možete upisati naslov za sliku izravno ispod same slike.

Možete koristiti iste opcije oblikovanja za tekst naslova kao i za uobičajeni tekst odlomka.

Popis blokova^{(List Blocks)}

Kada dodate novi blok i odaberete Popis^(List) , on će umetnuti blok popisa na tom mjestu u članku.

Prikazat će se jedan znak, ali dok upišete i pritisnete Enter , svaki novi znak će se pojaviti prema potrebi.

Formatiranje popisa također prati stil i veličinu fonta kako je definirana vaša tema^{(your theme)} , stoga nemojte biti iznenađeni ako font na vašem popisu izgleda drugačije od blokova odlomka.

Možete istaknuti tekst u bloku popisa i vidjet ćete opcije oblikovanja za ovaj tekst ako ga želite promijeniti. Ovdje ne možete promijeniti stil fonta, ali možete podebljati, staviti kurziv, dodati hipervezu ili u potpunosti promijeniti vrstu bloka.

Ostali blokovi^{(Other Blocks)}

Ako želite vidjeti sve dostupne blokove, odaberite + za dodavanje bloka, a zatim odaberite Pregledaj sve^{(Browse all)} da vidite cijeli popis.

Ovaj popis je zapravo prilično dugačak. Sve čega se sjetite da je dostupno u klasičnom uređivaču putem sustava izbornika bit će uključeno ovdje. To uključuje druge često korištene blokove kao što su:

• Tablice
• Datoteke i mediji
• Videozapisi
• Oznaka "Više".
• Prijelomi stranica i separatori
• Widgeti poput društvenih ikona, oblaka oznaka, kalendara^(calendar) i dodataka za WordPress
• Ugradite^(Embed) kôd za društvene stranice, medijske stranice kao što su YouTube i Spotify i još mnogo toga

Ostale Gutenbergove značajke

Ne morate se držati blokova koje ste dodali gdje god da ste ih dodali. Možete se pomaknuti natrag u svom postu i odabrati ikonu + između bilo kojeg od postojećih blokova. To će vam omogućiti umetanje novih blokova između postojećih.

Također niste zaglavili s postavljanjem svojih blokova. U klasičnom uređivaču WordPress -a nije uvijek bilo lako premještati stvari poput slika u druge odjeljke vašeg posta, a da ponekad ne zabrljate pozadinsko kodiranje.

U Gutenbergu^(Gutenberg) , pokretni elementi kao što su slike je jednostavno kao odabir bloka, a zatim odabir strelica gore ili dolje u traci skočnog izbornika za pomicanje bloka gore ili dolje u postu.

Svaki put kada odaberete strelicu, ona će pomaknuti taj blok za jednu poziciju u bilo kojem smjeru koji ste odabrali.

Korištenje Glutenberg Editora^{(Glutenberg Editor)} u WordPressu^(WordPress)

Područje postova nije jedino mjesto za dodavanje novih blokova. Primijetit ćete da postoji vrlo jednostavan izbornik ikona na vrhu uređivača gdje možete koristiti i ikonu + za dodavanje blokova.

Ostale ikone u ovom izborniku omogućuju vam brz pristup ostalim Gutenbergovim^(Gutenberg) značajkama.

• Ikona za uređivanje^(Edit) olovke omogućuje vam prebacivanje na način odabira kako biste lakše odabrali blokove. Dvaput kliknite^{(Double-click)} blok da biste se vratili u način uređivanja^(Edit) .
• Ikone Poništi^(Undo) ili Ponovi^(Redo) (lijevo i desno zakrivljene strelice) poništit će ili ponoviti vaše posljednje uređivanje.
• Ikona i (Detalji) prikazuje vam broj znakova, riječi, naslova, odlomaka i blokova u vašem postu.
• Ikona Outline omogućuje vam brzu navigaciju do blokova u vašem postu na temelju njihovog redoslijeda u obrisu vašeg posta.

Mnogima je potrebno naviknuti se na Gutenbergov^(Gutenberg) urednik u WordPressu . ^(WordPress)Ali nakon što ste iskusili koliko je jednostavno stvoriti, uređivati ​​i manipulirati blokovima elemenata u svojim objavama, otkrit ćete da je vaš proces stvaranja postova i stranica brži i produktivniji.

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 editоr 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 Mora imati dodataka za nove instalacije WordPressa

• Kako prijeći s klasičnog WordPress uređivača na Gutenberg

• Kako sakriti brze veze na stranici Nova kartica u Edgeu pomoću uređivača registra

• Kako premjestiti WordPress stranicu s jednog hosta na drugi

• Kako instalirati i postaviti WordPress na Microsoft Azure

• Najbolji format pisanja bloga za stjecanje bodova

• 8 besplatnih Premium WordPress tema za instalaciju

• Izrada dječje teme u WordPressu

• Kako konfigurirati privatnost u WordPressu i zašto je to važno

• Prikažite izvadak na početnoj stranici WordPress bloga

• WordPress prikazuje HTTP pogrešku prilikom učitavanja slika

• Kako ručno postaviti WordPress na domenu

• 11 najboljih WordPress podcast dodataka

• WordPress Jetpack: što je to i isplati li se instalirati?

• Kako pratiti neispravne veze s Google Webmaster Toolom

• Squarespace vs WordPress: Koja je bolja platforma stranice?

• Kako ubrzati WordPress stranicu u 11 koraka

• Kako promijeniti URL za prijavu na WordPress za bolju sigurnost

• Kako povećati performanse u WordPress-u kroz čišćenje baze podataka

• 7 WordPress savjeta za web stranicu prilagođenu mobilnim uređajima