Jeśli korzystasz z WordPressa^(WordPress) od kilku lat, pamiętasz, jak w 2018 roku ludzie z WordPressa^(WordPress) wprowadzili edytor Gutenberg w ^(Gutenberg)WordPress 5.0 .

Ten nowy domyślny edytor był gruntowną przebudową w zakresie edycji postów i stron w Twojej witrynie. Przekształciło duże pole tekstowe, do którego przyzwyczajeni byli właściciele witryn, w zupełnie inną platformę do edycji opartą na blokach.

Niektórzy właściciele witryn tak bardzo go nienawidzili, że unikali aktualizacji do WordPress 5.0 i pozostawali przy klasycznym edytorze domyślnym tak długo, jak to możliwe. Inni właściciele witryn przyjęli tę zmianę ze względu na jej prostotę i łatwość użytkowania.

Jeśli dokonujesz przejścia i jesteś ciekawy, czego się spodziewać, ten samouczek WordPress Gutenberg przeprowadzi Cię przez główne funkcje, które musisz znać i rozumieć. Powinno to maksymalnie ułatwić przejście.

Czego można się spodziewać po WordPressie Gutenberg^{(WordPress Gutenberg)}

Najważniejszą rzeczą, którą należy wiedzieć o edytorze Gutenberga , jest to, że jest on oparty na blokach. ^(Gutenberg)Oznacza to, że wszystko, co musisz dodać, jest zarządzane przez bloki. Bloki w Gutenberg obejmują (ale nie ograniczają się do):

• Ustęp
• nagłówek
• Obraz
• Lista
• Cytat
• Kod
• Wstępnie sformatowany
• Cytat
• Stół

Istnieje również kilka innych zaawansowanych bloków, które są rzadko używane. Możesz zobaczyć dodatkowe bloki, jeśli zainstalujesz nowe wtyczki WordPress^{(new WordPress plugins)} do edytora.

Dodawanie bloków jest tak proste, jak wybranie ikony + po prawej stronie pod ostatnio dodanym blokiem.

Wybranie dowolnego bloku z wyskakującego okienka dodaje ten blok jako następną sekcję na stronie lub w poście. 

Zanim przejdziemy do tych bloków, zacznijmy od początku i stwórzmy nowy post za pomocą Gutenberga^(Gutenberg) w WordPressie^(WordPress) .

Tworzenie postów i dodawanie bloków

Dodawanie postu pozostaje niezmienione w stosunku do ostatniej wersji WordPressa^(WordPress) . Po prostu^(Just) wybierz Posty^(Posts) z lewego paska nawigacyjnego, a następnie wybierz Dodaj nowy^{(Add New)} pod nim. 

Otworzy się okno edytora postów. Tutaj też wszystko jest inne. Zobaczysz domyślny edytor  Gutenberg WordPress .

Dodawanie elementów bloku^{(Block Items)} w edytorze Gutenberg^{(Gutenberg Editor)}

Możesz wpisać tytuł swojego posta w polu tytułu. Następnie wybierz ikonę + po prawej stronie, aby dodać pierwszy blok.

Bloki akapitowe^{(Paragraph Blocks)}

Najczęstszym pierwszym blokiem, który ludzie dodają po tytule, jest blok akapitowy. Aby to zrobić, wybierz Akapit^(Paragraph) z wyskakującego okna. 

Spowoduje to wstawienie pola bloku, w którym możesz zacząć pisać pierwszy akapit swojego postu. Formatowanie bloku akapitu^(Paragraph) jest zgodne z domyślną czcionką^{(the default font)} bloków akapitu witryny. 

Oto kilka wskazówek dotyczących dodawania bloków akapitów w edytorze Gutenberg .

• Twój akapit może być tak długi, jak chcesz. Tekst automatycznie zawinie się do następnej linii, tak jak w klasycznym edytorze.
• Jeśli naciśniesz Enter , edytor Gutenberga^(Gutenberg) automatycznie utworzy nowy blok akapitu, jednak wygląda on po prostu jak drugi akapit z podziałem akapitu.
• Podświetlenie dowolnego tekstu w akapicie spowoduje wyświetlenie okna formatowania, w którym można zmienić formatowanie tego tekstu lub zmodyfikować blok do postaci listy lub innego typu bloku.
• Wybierz trzy kropki i wybierz Usuń blok,^{(Remove block)} aby usunąć blok akapitu i zastąpić go czymś innym.

Bloki obrazu^{(Image Blocks)}

Jeśli wybierzesz blok Obraz^(Image) , zobaczysz pole Obraz^(Image) , w którym możesz wybrać przycisk Prześlij^(Upload) , aby przesłać obraz do swojego posta z komputera. Wybierz łącze Biblioteka multimediów^{(Media Library)} , aby użyć obrazu z istniejącej biblioteki multimediów, lub Wstaw z adresu URL^{(Insert from URL)} , aby utworzyć link do obrazu z innej witryny.

Spowoduje to wstawienie obrazu do artykułu, w którym dodałeś nowy blok obrazu . ^(Image)Zauważysz, że możesz wpisać podpis do obrazu bezpośrednio pod samym obrazem.

Możesz użyć tych samych opcji formatowania w tekście podpisu, co w zwykłym tekście akapitu.

Lista bloków^{(List Blocks)}

Gdy dodasz nowy blok i wybierzesz Lista^(List) , wstawi on blok listy w tym miejscu artykułu.

Wyświetli jeden punktor, ale podczas pisania i naciskania klawisza Enter^(Enter) każdy nowy punktor będzie wyświetlany w razie potrzeby.

Formatowanie listy jest również zgodne ze stylem i rozmiarem czcionki określonym przez motyw^{(your theme)} , więc nie zdziw się, jeśli czcionka na liście wygląda inaczej niż bloki akapitów.

Możesz podświetlić tekst w bloku listy, a zobaczysz opcje formatowania tego tekstu, jeśli chcesz go zmienić. Nie możesz tutaj zmienić stylu czcionki, ale możesz pogrubić, pochylić, dodać hiperłącze lub całkowicie zmienić typ bloku.

Inne bloki^{(Other Blocks)}

Jeśli chcesz zobaczyć wszystkie dostępne bloki, wybierz + , aby dodać blok, a następnie wybierz Przeglądaj wszystko^{(Browse all)} , aby wyświetlić całą listę.

Ta lista jest właściwie dość długa. Wszystko, co pamiętasz, że jest dostępne w klasycznym edytorze za pośrednictwem systemu menu, zostanie tutaj uwzględnione. Należą do nich inne powszechnie używane bloki, takie jak:

• Stoły
• Pliki i multimedia
• Filmy
• Tag „Więcej”
• Podziały stron i separatory
• Widżety, takie jak ikony społecznościowe, chmury tagów, kalendarz^(calendar) i widżety wtyczek WordPress
• Umieść^(Embed) kod do serwisów społecznościowych, serwisów medialnych, takich jak YouTube i Spotify , i nie tylko

Inne funkcje Gutenberga

Nie musisz trzymać się bloków, które dodałeś, gdziekolwiek je dodałeś. Możesz przewinąć w górę posta i wybrać ikonę + między dowolnymi istniejącymi blokami. Umożliwi to wstawianie nowych bloków między już istniejące.

Nie utkniesz też w rozmieszczeniu swoich bloków. W klasycznym edytorze WordPress nie zawsze było łatwo przenosić takie rzeczy jak obrazy do innych sekcji posta bez czasami zepsucia kodowania w tle.

W Gutenberg przenoszenie elementów, takich jak obrazy, jest tak proste, jak wybranie bloku, a następnie wybranie strzałek w górę lub w dół na pasku menu podręcznego, aby przesunąć blok w górę lub w dół w poście.

Za każdym razem, gdy wybierzesz strzałkę, przesunie ona blok o jedną pozycję w wybranym przez Ciebie kierunku.

Korzystanie z edytora Glutenberg^{(Glutenberg Editor)} w WordPress

Obszar postu to nie jedyne miejsce, w którym można dodawać nowe bloki. Zauważysz, że w górnej części edytora znajduje się bardzo proste menu ikon, w którym możesz również użyć ikony + , aby dodać bloki.

Inne ikony w tym menu zapewniają szybki dostęp do innych funkcji Gutenberga^(Gutenberg) .

• Ikona edycji^(Edit) pióra pozwala przełączyć się do trybu zaznaczania, aby łatwiej wybierać bloki. Kliknij dwukrotnie^{(Double-click)} blok, aby wrócić do trybu edycji .^(Edit)
• Ikony Cofnij^(Undo) lub Ponów^(Redo) (zakrzywione strzałki w lewo i w prawo) cofną lub ponowią ostatnią edycję.
• Ikona i⁽ⁱ⁾ ( Szczegóły ) pokazuje liczbę znaków, słów, nagłówków, akapitów i bloków w Twoim poście.
• Ikona konspektu^(Outline) umożliwia szybkie nawigowanie do bloków w poście na podstawie ich kolejności w konspektu posta.

Wielu osobom przyzwyczajenie się do edytora Gutenberga w ^(Gutenberg)WordPressie wymaga trochę czasu. ^(WordPress)Ale po tym, jak przekonasz się, jak łatwo jest tworzyć, edytować i manipulować blokami elementów w swoich postach, przekonasz się, że proces tworzenia postów i stron jest szybszy i bardziej produktywny.

WordPress Gutenberg Tutorial: How to Use the New Editor

If уou’ve been using WоrdPress for quite a few yearѕ, then you remember when the folks аt 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 niezbędnych wtyczek do nowych instalacji WordPress

• Jak przejść z klasycznego edytora WordPress do Gutenberga?

• Jak ukryć szybkie łącza na stronie nowej karty w Edge za pomocą Edytora rejestru?

• Jak przenieść witrynę WordPress z jednego hosta na drugi?

• Jak zainstalować i skonfigurować WordPress na Microsoft Azure

• Najlepszy format pisania bloga, aby zdobyć punkty na całym świecie

• Jak zabezpieczyć hasłem strony w witrynie WordPress?

• Jak stworzyć bloga Wix, który jest tak samo dobry jak WordPress

• Squarespace vs WordPress: która jest lepsza platforma witryny?

• Jak przyspieszyć dowolną witrynę WordPress za pomocą .HTACCESS

• Jak usunąć wszystkie ślady wtyczki WordPress?

• Jak korzystać z Lumen5, aby zmienić post na blogu w wideo?

• Jak śledzić uszkodzone linki za pomocą Narzędzia Google dla webmasterów

• Przekieruj użytkowników ze strony 404 w WordPress

• Jak skonfigurować prywatność w WordPressie i dlaczego jest to ważne

• 7 wskazówek WordPress dla strony internetowej przyjaznej dla urządzeń mobilnych

• Jak stworzyć własne wyskakujące okienko z kuponem w WordPress

• Jak korzystać z WP Super Cache na blogu WordPress

• Jak znaleźć login administratora WordPress?

• WordPress pokazuje błąd HTTP podczas przesyłania obrazów