Jos olet käyttänyt WordPressiä^(WordPress) muutaman vuoden, muistat, kun WordPressin^(WordPress) työntekijät ottivat Gutenberg^(Gutenberg) - editorin käyttöön WordPress 5.0 :ssa vuonna 2018.

Tämä uusi oletuseditori oli suuri uudistus sekä sivustosi viestien että sivujen muokkaamiseen. Se muutti suuren tekstilaatikon, johon verkkosivustojen omistajat olivat tottuneet, hyvin erilaiseksi lohkopohjaiseksi muokkausalustaksi.

Jotkut verkkosivustojen omistajat vihasivat sitä niin paljon, että he välttelivät päivittämistä WordPress 5.0 :aan ja pysyivät perinteisessä oletuseditorissa niin kauan kuin mahdollista. Muut verkkosivustojen omistajat hyväksyivät muutoksen sen yksinkertaisuuden ja helppokäyttöisyyden vuoksi.

Jos olet tekemässä siirtymää ja olet utelias mitä odottaa, tämä WordPress Gutenberg -opastus opastaa sinut läpi tärkeimmät ominaisuudet, jotka sinun on tiedettävä ja ymmärrettävä. Tämän pitäisi tehdä siirtymisestäsi mahdollisimman helppoa.

Mitä odottaa WordPress Gutenbergissä^{(WordPress Gutenberg)}

Tärkein asia Gutenberg^(Gutenberg) -editorista on tietää, että se on lohkopohjainen. Tämä tarkoittaa, että kaikkea lisättävää hallitaan lohkojen kautta. Gutenbergin^(Gutenberg) lohkoja ovat (mutta eivät rajoitu):

• Kohta
• Otsikko
• Kuva
• Lista
• Lainata
• Koodi
• Esimuotoiltu
• Vedä lainaus
• Pöytä

On myös muutamia muita kehittyneitä lohkoja, joita käytetään harvoin. Saatat nähdä lisälohkoja, jos asennat editoriin uusia WordPress-laajennuksia .^{(new WordPress plugins)}

Lohkojen lisääminen on yhtä helppoa kuin nappaamalla +-kuvake oikealla viimeisimmän lisäämäsi lohkon alta.

Valitsemalla minkä tahansa lohkon ponnahdusikkunasta lisää kyseinen lohko sivusi tai viestisi seuraavaksi osaksi. 

Ennen kuin pääsemme näihin lohkoihin, aloitetaan alusta ja luodaan uusi viesti käyttämällä Gutenbergiä ^(Gutenberg)WordPressissä^(WordPress) .

Viestien luominen ja lohkojen lisääminen

Viestin lisääminen pysyy muuttumattomana WordPressin^(WordPress) viimeisimmästä versiosta . Valitse vain ^(Just)Viestit^(Posts) vasemmasta navigointipalkista ja valitse sen alta  Lisää uusi .^{(Add New)}

Tämä avaa tekstieditori-ikkunan. Tässä on myös kaikki toisin. Näet oletusarvoisen Gutenbergin WordPress^{(Gutenberg WordPress)} - editorin. 

Lohkokohteiden^{(Block Items)} lisääminen Gutenberg^{(Gutenberg Editor)} - editorissa

Voit kirjoittaa viestisi otsikon otsikkokenttään. Valitse sitten oikealla oleva +

Kappalelohkot^{(Paragraph Blocks)}

Yleisin ensimmäinen lohko, jonka ihmiset lisäävät otsikon jälkeen, on kappalelohko. Voit tehdä tämän valitsemalla ponnahdusikkunasta  Kappale .^(Paragraph)

Tämä lisää lohkokentän, johon voit alkaa kirjoittaa viestisi ensimmäistä kappaletta. Kappalelohkon^(Paragraph) muotoilu noudattaa sivustosi  kappalelohkojen oletusfonttia .^{(the default font)}

Tässä on joitain vinkkejä kappalelohkojen lisäämiseen Gutenberg - editorissa.

• Kappaleesi voi olla niin pitkä kuin haluat. Teksti rivittyy automaattisesti seuraavalle riville, aivan kuten perinteisessä editorissa.
• Jos painat Enter , Gutenberg - editori luo automaattisesti uuden kappalelohkon, mutta se näyttää vain toiselta kappaleelta, jossa on kappaleenvaihto.
• Kappaleen minkä tahansa tekstin korostaminen näyttää muotoiluikkunan, jossa voit muuttaa kyseisen tekstin muotoilua tai muokata lohkoa luetteloksi tai muuksi lohkotyypiksi.
• Valitse kolme pistettä ja valitse Poista lohko^{(Remove block)} poistaaksesi kappalelohkon ja korvataksesi sen jollain muulla.

Kuvalohkot^{(Image Blocks)}

Jos valitset Kuvalohkon^(Image) , näet Kuvaruudun^(Image) , jossa voit ladata kuvan julkaisuusi tietokoneeltasi valitsemalla Lataa -painikkeen. ^(Upload)Valitse Mediakirjasto^{(Media Library)} -linkki, jos haluat käyttää kuvaa olemassa olevasta mediakirjastostasi, tai Lisää URL^{(Insert from URL)} -osoitteesta linkittääksesi kuvaan toisesta sivustosta.

Tämä lisää kuvan artikkeliin, johon lisäsit uuden kuvalohkon^(Image) . Huomaat, että voit kirjoittaa kuvan kuvatekstin suoraan kuvan alle.

Voit käyttää samoja muotoiluvaihtoehtoja kuvatekstissä kuin tavallisessa kappaletekstissä.

Listaa lohkot^{(List Blocks)}

Kun lisäät uuden lohkon ja valitset Luettelo^(List) , se lisää luettelolohkon artikkelin kyseiseen kohtaan.

Siinä näkyy yksi luettelomerkki, mutta kun kirjoitat ja painat Enter , jokainen uusi luettelomerkki näkyy tarpeen mukaan.

Luettelon muotoilu noudattaa myös teemasi^{(your theme)} määrittelemää kirjasintyyliä ja kokoa , joten älä ihmettele, jos luettelosi kirjasin näyttää erilaiselta kuin kappalelohkot.

Voit korostaa tekstiä luettelolohkossa ja näet tämän tekstin muotoiluvaihtoehdot, jos haluat muuttaa sitä. Et voi muuttaa fonttityyliä tässä, mutta voit lihavoida, kursivoida, lisätä hyperlinkin tai muuttaa lohkotyyppiä kokonaan.

Muut lohkot^{(Other Blocks)}

Jos haluat nähdä kaikki saatavilla olevat lohkot, lisää lohko valitsemalla + ja katso sitten koko luettelo valitsemalla Selaa kaikkia .^{(Browse all)}

Tämä lista on itse asiassa melko pitkä. Kaikki mitä muistat olevan saatavilla klassisessa editorissa sen valikkojärjestelmän kautta, sisällytetään tähän. Näitä ovat muut yleisesti käytetyt lohkot, kuten:

• Taulukot
• Tiedostot ja media
• Videot
• "Lisää" -tunniste
• Sivunvaihdot ja erottimet
• Widgetit, kuten sosiaaliset kuvakkeet, tunnistepilvet, kalenteri^(calendar) ja WordPress-laajennuswidgetit
• Upota^(Embed) koodi sosiaalisiin sivustoihin, mediasivustoihin, kuten YouTube ja Spotify , ja muihin

Muita Gutenbergin ominaisuuksia

Sinun ei tarvitse pitää kiinni lisäämistäsi lohkoista minne tahansa olet lisännyt ne. Voit vierittää viestiäsi takaisin ylös ja valita + -kuvakkeen minkä tahansa olemassa olevan lohkon välissä. Näin voit lisätä uusia lohkoja olemassa olevien väliin.

Et myöskään ole jumissa lohkojen sijoittamisessa. Klassisessa WordPress - editorissa ei aina ollut helppoa siirtää asioita, kuten kuvia, tekstisi muihin osiin sotkematta toisinaan taustakoodausta.

Gutenbergissä elementtien, kuten kuvien^(Gutenberg) , siirtäminen on yhtä yksinkertaista kuin lohkon valitseminen ja sitten ponnahdusvalikkopalkin ylä- tai alanuoli siirtäminen viestissä ylös tai alas.

Joka kerta kun valitset nuolen, se liukuu lohkoa yhden kohdan valitsemaasi suuntaan.

Glutenberg- editorin^{(Glutenberg Editor)} käyttäminen WordPressissä^(WordPress)

Postialue ei ole ainoa paikka uusien lohkojen lisäämiseen. Huomaat, että editorin yläosassa on hyvin yksinkertainen kuvakevalikko, johon voit myös lisätä lohkoja +

Muut tämän valikon kuvakkeet antavat sinulle nopean pääsyn muihin Gutenbergin^(Gutenberg) ominaisuuksiin.

• Kynän muokkauskuvakkeen^(Edit) avulla voit vaihtaa valintatilaan lohkojen valitsemiseksi helpommin. Kaksoisnapsauta^{(Double-click)} lohkoa palataksesi muokkaustilaan^(Edit) .
• Kumoa-^(Undo) tai Tee uudelleen^(Redo) -kuvakkeet (vasen ja oikea kaarevat nuolet) kumoavat tai tekevät uudelleen viimeisimmän muokkauksen.
• i ( Tiedot) -kuvake näyttää viestissäsi olevien merkkien, sanojen, otsikoiden, kappaleiden ja lohkojen määrän.
• Outline - kuvakkeen avulla voit siirtyä nopeasti viestisi lohkoihin niiden järjestyksen perusteella viestisi ääriviivassa.

Monilta ihmisiltä WordPressin ^(WordPress)Gutenberg - editori vaatii totuttelua. Mutta kun olet kokenut, kuinka helppoa on luoda, muokata ja käsitellä elementtilohkoja viesteissäsi, huomaat, että viestien ja sivujen luontiprosessi on nopeampi ja tuottavampi.

WordPress Gutenberg Tutorial: How to Use the New Editor

If yоu’νe been using WordPress for quitе a few yeаrs, 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 pakollista lisäosaa uusia WordPress-asennuksia varten

• Kuinka siirtyä perinteisestä WordPress-editorista Gutenbergiin

• Pikalinkkien piilottaminen Edgen Uusi välilehti -sivulla rekisterieditorin avulla

• WordPress-sivuston siirtäminen isännästä toiseen

• Kuinka asentaa ja määrittää WordPress Microsoft Azuressa

• Kuinka perustaa oma Twitterin kaltainen verkkosivusto käyttämällä WordPressin P2-teemaa

• Kuinka nopeuttaa WordPress-sivustoa 11 vaiheessa

• Kuinka määrittää WordPress manuaalisesti verkkotunnuksessa

• Kuinka suojata salasanalla sivuja WordPress-sivustollasi

• Squarespace vs WordPress: kumpi on parempi sivustoalusta?

• Suojaa ja suojaa WordPress-verkkosivusto hakkereilta

• Kuinka päivittää PHP WordPressissä

• Must Have WordPress Yoast SEO -asetukset 2022

• Näytä ote WordPress-blogin etusivulla

• 10 välttämätöntä WordPress-laajennusta pienyrityssivustolle

• Ohjaa käyttäjät 404-sivulta WordPressissä

• Kuinka poistaa haittaohjelmat WordPress-sivustoltasi

• Tietosuojan määrittäminen WordPressissä ja miksi se on tärkeää

• 3 parasta SEO-laajennusta WordPressille

• Kuinka asentaa WordPress Google Cloud Platformiin