かなりの数年間WordPress(WordPress)を使用している場合は、 WordPressの人々が2018年にWordPress5.0で(WordPress 5.0)Gutenbergエディターを公開したときのことを覚えています。
この新しいデフォルトのエディターは、サイトの投稿とページの両方を編集するための大幅な見直しでした。これにより、Webサイトの所有者が慣れている大きなテキストボックスが、まったく異なるブロックベースの編集プラットフォームに変わりました。
一部のWebサイト所有者は、 WordPress 5.0(WordPress 5.0)へのアップグレードを避け、可能な限り従来のデフォルトエディターを使用することを非常に嫌っていました。他のウェブサイトの所有者は、そのシンプルさと使いやすさのために変更を受け入れました。
移行を行っていて、何を期待できるか知りたい場合は、このWordPress Gutenbergチュートリアルで、知って理解する必要のある主な機能について説明します。これにより、移行が可能な限り簡単になります。
WordPressGutenbergで何を期待するか
グーテンベルク(Gutenberg)エディタについて知っておくべき主なことは、それがブロックベースであるということです。これは、追加する必要があるものはすべてブロックを介して管理されることを意味します。グーテンベルク(Gutenberg)のブロックには次のものが含まれます（ただし、これらに限定されません）。
- 段落
- ヘッダ
- 画像
- リスト
- 引用
- コード
- 事前フォーマット済み
- プルクォート
- テーブル
めったに使用されない他のいくつかの高度なブロックもあります。新しいWordPressプラグイン(new WordPress plugins)をエディターにインストールすると、追加のブロックが表示される場合があります。
ブロックの追加は、追加した最新のブロックの下の右側にある+アイコンを選択するのと同じくらい簡単です。
ポップアップウィンドウからブロックのいずれかを選択すると、そのブロックがページまたは投稿の次のセクションとして追加されます。
これらのブロックに到達する前に、最初から始めて、WordPressで(WordPress)Gutenbergを使用して新しい投稿を作成しましょう。
投稿の作成とブロックの追加
投稿の追加は、WordPressの最後のバージョンから変更されていません。左側のナビゲーションバーから[投稿]を選択し、その下にある[新規追加]を選択する(Posts)だけ です(Add New)。(Just)
これにより、投稿エディタウィンドウが開きます。これはまた、すべてが異なるところです。デフォルトのGutenbergWordPressエディターが表示されます。
グーテンベルクエディター(Gutenberg Editor)でのブロックアイテム(Block Items)の追加
タイトルフィールドに投稿のタイトルを入力できます。次に、右側の+
段落ブロック(Paragraph Blocks)
タイトルの後に追加される最も一般的な最初のブロックは段落ブロックです。これを行うには、ポップアップウィンドウから [段落]を選択します。(Paragraph)
これにより、投稿の最初の段落の入力を開始できるブロックフィールドが挿入されます。段落(Paragraph)ブロックの書式設定は、サイトの段落ブロックの デフォルトフォント(the default font)に従います。
グーテンベルク(Gutenberg)エディタで段落ブロックを追加するためのヒントを次に示します。
- 段落は好きなだけ長くすることができます。従来のエディタと同様に、テキストは自動的に次の行に折り返されます。
- Enterキー(Enter)を押すと、Gutenbergエディターは自動的に新しい段落ブロックを作成しますが、段落区切りのある2番目の段落のように見えます。
- 段落内のテキストを強調表示すると、そのテキストのフォーマットを変更したり、ブロックをリストまたはその他のブロックタイプに変更したりできるフォーマットウィンドウが表示されます。
- 3つのドットを選択し、[ブロック(Remove block)の削除]を選択して段落ブロックを削除し、別のブロックに置き換えます。
画像ブロック(Image Blocks)
[画像(Image)]ブロックを選択すると、[画像]ボックスが表示されます。このボックスで、[(Image)アップロード(Upload)]ボタンを選択して、コンピューターから投稿に画像をアップロードできます。[メディアライブラリ(Media Library)]リンクを選択して既存のメディアライブラリの画像を使用するか、[ URLから挿入]を(Insert from URL)選択して別のサイトの画像にリンクします。
これにより、新しいImage(Image)ブロックを追加した記事に画像が挿入されます。画像のすぐ下に画像のキャプションを入力できることに気付くでしょう。
キャプションテキストでは、通常の段落テキストと同じフォーマットオプションを使用できます。
リストブロック(List Blocks)
新しいブロックを追加して[リスト(List)]を選択すると、記事のその時点でリストブロックが挿入されます。
1つの箇条書きが表示されますが、 Enterキー(Enter)を押して入力すると、必要に応じて新しい箇条書きが表示されます。
リストの書式設定も、テーマ(your theme)で定義されているフォントのスタイルとサイズに従うため、リスト内のフォントが段落ブロックと異なって見えても驚かないでください。
リストブロックでテキストを強調表示すると、テキストを変更する場合にこのテキストの書式設定オプションが表示されます。ここでフォントスタイルを変更することはできませんが、太字、斜体、ハイパーリンクの追加、またはブロックタイプの完全な変更は可能です。
その他のブロック(Other Blocks)
使用可能なすべてのブロックを表示する場合は、[ +を選択してブロックを追加し、[すべて(Browse all)参照]を選択してリスト全体を表示します。
このリストは実際にはかなり長いです。メニューシステムを介してクラシックエディタで利用できることを覚えているものはすべてここに含まれます。これらには、次のような他の一般的に使用されるブロックが含まれます。
- テーブル
- ファイルとメディア
- ビデオ
- 「More」タグ
- ページ分割と区切り文字
- ソーシャルアイコン、タグクラウド、カレンダー(calendar)、WordPressプラグインウィジェットなどのウィジェット
- (Embed)ソーシャルサイト、 YouTube(YouTube)やSpotifyなどのメディアサイトなどのコードを埋め込む
その他のグーテンベルクの特徴
追加したブロックをどこに追加しても、それを維持する必要はありません。投稿を上にスクロールして、既存のブロックの間にある+これにより、既存のブロックの間に新しいブロックを挿入できます。
また、ブロックの配置に固執することもありません。従来のWordPressエディターでは、背景のコーディングを台無しにすることなく、画像などを投稿の他のセクションに移動するのは必ずしも簡単ではありませんでした。
グーテンベルク(Gutenberg)では、画像などの要素の移動は、ブロックを選択してから、ポップアップメニューバーで上矢印または下矢印を選択して、投稿内でブロックを上下に移動するだけです。
矢印を選択するたびに、選択した方向に1つの位置をブロックするようにスライドします。
WordPressで(WordPress)Glutenbergエディター(Glutenberg Editor)を使用する
新しいブロックを追加する場所は投稿エリアだけではありません。エディターの上部に非常にシンプルなアイコンメニューがあり、+アイコンを使用してブロックを追加することもできます。
このメニューの他のアイコンを使用すると、他のグーテンベルク(Gutenberg)の機能にすばやくアクセスできます。
- ペンの編集(Edit)アイコンを使用すると、選択モードに切り替えて、ブロックをより簡単に選択できます。ブロックをダブルクリックして、(Double-click)編集(Edit)モードに戻ります。
- 元に戻す(Undo)またはやり直し(Redo)アイコン（左右の曲線矢印）は、最後の編集を元に戻すかやり直します。
- i （詳細）アイコンは、投稿内の文字、単語、見出し、段落、およびブロックの数を示します。
- アウトライン(Outline)アイコンを使用すると、投稿のアウトラインでの順序に基づいて、投稿内のブロックにすばやく移動できます。
多くの人にとって、 WordPressの(WordPress)Gutenbergエディターはある程度慣れが必要です。しかし、投稿内の要素のブロックを作成、編集、操作するのがいかに簡単であるかを体験した後、投稿やページを作成するプロセスがより速く、より生産的になることがわかります。
WordPress Gutenberg Tutorial: How to Use the New Editor
If you’ve been using WordPrеss for qυite a few years, then you remember when the folks at WordPress rolled out the Gutenberg editor іn 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.
