Ha jó néhány éve használja a WordPress -t, akkor emlékszik arra, amikor a ^(WordPress)WordPress munkatársai 2018-ban bemutatták a Gutenberg -szerkesztőt a WordPress 5.0 -ban.^{(WordPress 5.0)}

Ez az új alapértelmezett szerkesztő jelentős átalakítást jelentett webhelye bejegyzéseinek és oldalainak szerkesztésében. A webhelytulajdonosok által megszokott nagy szövegdobozt egy egészen más blokkalapú szerkesztőplatformmá alakította át.

Egyes webhely-tulajdonosok annyira utálták, hogy elkerülték a WordPress 5.0 -ra való frissítést, és a klasszikus alapértelmezett szerkesztőnél maradtak, ameddig csak lehetett. Más webhelytulajdonosok az egyszerűség és a könnyű használhatóság miatt fogadták el a változtatást.

Ha az átállás előtt áll, és kíváncsi, mire számíthat, ez a WordPress Gutenberg oktatóanyag végigvezeti Önt azokon a főbb funkciókon, amelyeket ismernie és megértenie kell. Ennek a lehető legkönnyebbé kell tennie az átállást.

Mire számíthatunk a WordPress Gutenbergben ?^{(WordPress Gutenberg)}

A legfontosabb tudnivaló a Gutenberg szerkesztőről, hogy blokk alapú. Ez azt jelenti, hogy bármi, amit hozzá kell adni, blokkon keresztül kezelhető. A Gutenbergben^(Gutenberg) található blokkok a következők (de nem kizárólagosan):

• Bekezdés
• Fejléc
• Kép
• Lista
• Idézet
• Kód
• Előre formázott
• Pullquote
• asztal

Van néhány más speciális blokk is, amelyeket ritkán használnak. További blokkokat láthat, ha új WordPress beépülő modulokat^{(new WordPress plugins)} telepít a szerkesztőbe.

A blokkok hozzáadása olyan egyszerű, mint a + ikon jobb oldalán, a legutóbb hozzáadott blokk alatt.

Ha a felugró ablakban kiválasztja a blokkok bármelyikét, az adott blokkot az oldal vagy bejegyzés következő szakaszaként adja hozzá. 

Mielőtt rátérnénk ezekre a blokkokra, kezdjük elölről, és hozzunk létre egy új bejegyzést a Gutenberg használatával a WordPressben^(WordPress) .

Bejegyzések létrehozása és blokkok hozzáadása

A bejegyzés hozzáadása változatlan marad a WordPress legutóbbi verziójához képest . Csak^(Just) válassza ki a Bejegyzések^(Posts) lehetőséget a bal oldali navigációs sávban, és válassza az alatta lévő  Új hozzáadása lehetőséget.^{(Add New)}

Ezzel megnyílik a bejegyzésszerkesztő ablak. Itt is minden más. Látni fogja az alapértelmezett Gutenberg WordPress szerkesztőt. 

Blokkelemek^{(Block Items)} hozzáadása a Gutenberg-szerkesztőben^{(Gutenberg Editor)}

A cím mezőbe beírhatja a bejegyzés címét. Ezután válassza ki a + ikont a jobb oldalon az első blokk hozzáadásához.

Bekezdésblokkok^{(Paragraph Blocks)}

A leggyakoribb első blokk, amelyet az emberek a cím után adnak hozzá, egy bekezdésblokk. Ehhez válassza a Bekezdés^(Paragraph) lehetőséget a felugró ablakban. 

Ezzel beszúr egy blokkmezőt, ahol elkezdheti beírni a bejegyzés első bekezdését. A bekezdésblokk^(Paragraph) formázása a webhelye bekezdésblokkjainak  alapértelmezett betűtípusát^{(the default font)} követi .

Íme néhány tipp a bekezdésblokkok hozzáadásához a Gutenberg - szerkesztőben.

• A bekezdés olyan hosszú lehet, amennyit csak akar. A szöveg automatikusan a következő sorba kerül, akárcsak a klasszikus szerkesztőben.
• Ha megnyomja az Enter billentyűt , a Gutenberg - szerkesztő automatikusan létrehoz egy új bekezdésblokkot, de az csak úgy néz ki, mint egy második bekezdés bekezdéstöréssel.
• Ha a bekezdésben bármelyik szöveget kiemeli, megjelenik egy formázási ablak, ahol módosíthatja az adott szöveg formázását, vagy módosíthatja a blokkot listává vagy más blokktípusba.
• Jelölje ki a három pontot, és válassza a Blokk eltávolítása^{(Remove block)} lehetőséget egy bekezdésblokk törléséhez és valami másra cseréléséhez.

Képblokkok^{(Image Blocks)}

Ha kiválasztja a Képblokkot^(Image) , megjelenik egy Kép^(Image) mező, ahol a Feltöltés^(Upload) gombra kattintva képet tölthet fel a bejegyzésébe a számítógépéről. Válassza a Médiatár^{(Media Library)} hivatkozást, ha egy képet szeretne használni a meglévő médiakönyvtárából, vagy a Beszúrás az URL^{(Insert from URL)} -ből lehetőséget, ha egy másik webhelyről származó képre szeretne hivatkozni.

Ezzel beszúrja a képet abba a cikkbe, amelybe az új képblokkot hozzáadta^(Image) . Észreveheti, hogy közvetlenül a kép alá írhatja be a kép feliratát.

Ugyanazokat a formázási beállításokat használhatja a feliratszövegnél, mint a normál bekezdésszövegnél.

Blokkok listázása^{(List Blocks)}

Ha új blokkot ad hozzá, és a Lista^(List) elemet választja , a rendszer beszúrja a listablokkot a cikk azon pontjára.

Egy pont jelenik meg, de ahogy gépel, és megnyomja az Enter billentyűt , minden új pont akkor jelenik meg, amikor szüksége van rájuk.

A lista formázása is követi a témája^{(your theme)} által meghatározott betűstílust és -méretet , ezért ne lepődjön meg, ha a listában szereplő betűtípus eltér a bekezdésblokkoktól.

Kijelölheti a szöveget a listablokkban, és látni fogja a szöveg formázási lehetőségeit, ha módosítani szeretné. Itt nem módosíthatja a betűstílust, de félkövér, dőlt betűvel, hiperhivatkozás hozzáadásával vagy a blokktípus teljes megváltoztatásával.

Egyéb blokkok^{(Other Blocks)}

Ha meg szeretné tekinteni az összes elérhető blokkot, kattintson a + gombra egy blokk hozzáadásához, majd válassza az Összes tallózása^{(Browse all)} lehetőséget a teljes lista megtekintéséhez.

Ez a lista valójában elég hosszú. Minden, amire emlékszik, hogy elérhető volt a klasszikus szerkesztőben a menürendszerén keresztül, ide fog kerülni. Ide tartoznak az egyéb gyakran használt blokkok, mint például:

• Táblázatok
• Fájlok és média
• Videók
• A „Tovább” címke
• Oldaltörések és elválasztók
• Widgetek, például közösségi ikonok, címkefelhők, naptár^(calendar) és WordPress beépülő modulok
• Kód beágyazása^(Embed) közösségi oldalakhoz, médiaoldalakhoz, például YouTube és Spotify stb

Egyéb Gutenberg jellemzők

Nem kell ragaszkodnia a hozzáadott blokkokhoz, bárhová is adta őket. Visszafelé görgethet a bejegyzésben, és bármelyik meglévő blokk között kiválaszthatja a +Ez lehetővé teszi új blokkok beszúrását a meglévő blokkok közé.

Ön sem ragadt meg a blokkjainak elhelyezésével. A klasszikus WordPress -szerkesztőben nem mindig volt egyszerű dolgokat, például képeket a bejegyzés más részeibe áthelyezni anélkül, hogy időnként elrontotta volna a háttérkódolást.

A Gutenbergben^(Gutenberg) az elemek, például a képek mozgatása olyan egyszerű, mint a blokk kijelölése, majd a felfelé vagy lefelé mutató nyilak kiválasztása az előugró menüsorban a blokk felfelé vagy lefelé mozgatásához a bejegyzésben.

Minden alkalommal, amikor kiválasztja a nyilat, a blokk egy pozíciót elcsúsztat a kiválasztott irányba.

A Glutenberg szerkesztő^{(Glutenberg Editor)} használata a WordPressben^(WordPress)

Nem a bejegyzési terület az egyetlen hely új blokkok hozzáadására. Észreveheti, hogy van egy nagyon egyszerű ikonmenü a szerkesztő tetején, ahol a + ikonnal blokkokat is hozzáadhat.

A menü többi ikonja gyors hozzáférést biztosít a Gutenberg többi funkciójához.

• A toll Szerkesztés^(Edit) ikonja lehetővé teszi, hogy kiválasztási módra váltson a blokkok könnyebb kiválasztásához. Kattintson duplán egy blokkra a ^{(Double-click)}Szerkesztés^(Edit) módba való visszatéréshez .
• A Visszavonás^(Undo) vagy Újra^(Redo) ikonok (balra és jobbra ívelt nyilak) visszavonják vagy újra végrehajtják a legutóbbi szerkesztést.
• Az i (Részletek) ikon mutatja a bejegyzésben szereplő karakterek, szavak, címsorok, bekezdések és blokkok számát.
• A Vázlat^(Outline) ikon segítségével gyorsan navigálhat a bejegyzés blokkjaihoz a bejegyzés vázlatában lévő sorrend alapján.

Sok ember számára a WordPress Gutenberg -szerkesztője némi megszokást igényel. De miután megtapasztalta, milyen egyszerű elemblokkokat létrehozni, szerkeszteni és manipulálni a bejegyzésekben, rá fog jönni, hogy a bejegyzések és oldalak létrehozásának folyamata gyorsabb és produktívabb.

WordPress Gutenberg Tutorial: How to Use the New Editor

If you’ve been using WordРress for quite a few years, then you remеmber 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 kötelező beépülő modul az új WordPress telepítésekhez

• Hogyan lehet áttérni a klasszikus WordPress szerkesztőről a Gutenbergre

• A gyorshivatkozások elrejtése az Edge új lapján a Rendszerleíróadatbázis-szerkesztővel

• A WordPress webhely áthelyezése egyik gazdagépről a másikra

• A WordPress telepítése és beállítása a Microsoft Azure-ban

• Oldal másolása a WordPressben

• Hogyan készítsünk egy WordPress webhelyet biztonságossá

• Squarespace vs WordPress: melyik a jobb webhelyplatform?

• A 11 legjobb WordPress podcast bővítmény

• A 3 legjobb SEO bővítmény a WordPresshez

• 8 ingyenesen telepíthető prémium WordPress téma

• WordPress Jetpack: mi ez, és érdemes-e telepíteni?

• Hogyan készítsünk Wix-blogot, amely ugyanolyan jó, mint a WordPress

• Kell rendelkeznie a WordPress Yoast SEO beállításaival 2022

• Mi az AMP for WordPress és hogyan kell telepíteni?

• 7 WordPress-tipp a mobilbarát webhelyhez

• A rosszindulatú programok eltávolítása a WordPress webhelyről

• A WordPress telepítése a Google Cloud Platformon

• A Lumen5 használata blogbejegyzésének videóvá alakításához

• Hogyan futtassuk a hihetetlenül gyors WordPress-t a Microsoft Azure-on