如果您已经使用WordPress好几年了，那么您会记得 WordPress 的人们早在 2018 年就在WordPress 5.0(WordPress 5.0)中推出了Gutenberg编辑器。
这个新的默认编辑器对编辑您网站上的帖子和页面进行了重大改革。它将网站所有者习惯的大文本框变成了一个非常不同的基于块的编辑平台。
一些网站所有者非常讨厌它，以至于他们避免升级到WordPress 5.0，并尽可能长时间地使用经典的默认编辑器。其他网站所有者因其简单性和易用性而接受了这一变化。
如果您正在过渡并且很好奇会发生什么，这个WordPress Gutenberg教程将引导您了解您需要了解和理解的主要功能。这应该使您的过渡尽可能容易。
对WordPress 古腾堡(WordPress Gutenberg)有什么期待
关于Gutenberg编辑器的主要知识是它是基于块的。这意味着您需要添加的任何内容都通过块进行管理。古腾堡(Gutenberg)的街区包括（但不限于）：
还有一些很少使用的其他高级块。如果您将新的 WordPress 插件(new WordPress plugins)安装到编辑器，您可能会看到其他块。
添加块就像选择您最近添加的块下方右侧的 + 图标一样简单。
从弹出窗口中选择任何块将该块添加为页面或帖子中的下一部分。
在我们开始讨论这些块之前，让我们从头开始，在WordPress中使用(WordPress)Gutenberg创建一个新帖子。
创建帖子和添加块
添加帖子与WordPress(WordPress)的最新版本保持不变。只需(Just)从左侧导航栏中选择帖子(Posts)，然后在其下方 选择添加新内容。(Add New)
这将打开帖子编辑器窗口。这也是一切都不同的地方。您将看到默认的Gutenberg WordPress编辑器。
在Gutenberg 编辑器(Gutenberg Editor)中添加块项目(Block Items)
您可以在标题字段中键入帖子的标题。然后选择右侧的+
段落块(Paragraph Blocks)
人们在标题后添加的最常见的第一个块是段落块。为此，请从弹出窗口中 选择段落。(Paragraph)
这将插入一个块字段，您可以在其中开始输入帖子的第一段。段落(Paragraph)块的格式遵循站点段落块的默认字体(the default font)。
以下是在Gutenberg(Gutenberg)编辑器中添加段落块的一些提示。
- 您的段落可以随心所欲。文本将自动换行到下一行，就像在经典编辑器中一样。
- 如果您按Enter，古腾堡(Gutenberg)编辑器会自动创建一个新的段落块，但它看起来就像是带有分节符的第二个段落。
- 突出显示段落中的任何文本将显示一个格式窗口，您可以在其中更改该文本的格式，或将块修改为列表或其他块类型。
- 选择三个点并选择删除块(Remove block)以删除段落块并将其替换为其他内容。
图像块(Image Blocks)
如果您选择图像(Image)块，您将看到一个图像(Image)框，您可以在其中选择一个上传(Upload)按钮，将图像从您的计算机上传到您的帖子中。选择媒体库(Media Library)链接以使用现有媒体库中的图像，或从 URL 插入(Insert from URL)以链接到其他站点的图像。
这会将图像插入到您添加新图像(Image)块的文章中。您会注意到您可以直接在图像本身下方键入图像的标题。
您可以对标题文本使用与常规段落文本相同的格式选项。
列出块(List Blocks)
当您添加新块并选择List时，它将在文章中的该点插入列表块。
它会显示一个项目符号，但是当您键入并按Enter时，每个新项目符号都会在您需要时出现。
列表格式也遵循主题(your theme)定义的字体样式和大小，因此如果列表中的字体看起来与段落块不同，请不要感到惊讶。
您可以突出显示列表块中的文本，如果您想更改它，您将看到该文本的格式选项。您无法在此处更改字体样式，但您可以使用粗体、斜体、添加超链接或完全更改块类型。
其他块(Other Blocks)
如果您想查看所有可用的块，请选择+添加块，然后选择浏览全部(Browse all)以查看整个列表。
这个列表实际上很长。您记得通过其菜单系统在经典编辑器中可用的任何内容都将包含在此处。其中包括其他常用块，例如：
- 表
- 文件和媒体
- 视频
- “更多”标签
- 分页符和分隔符
- 社交图标、标签云、日历(calendar)和 WordPress 插件小部件等小部件
- (Embed)为社交网站、YouTube和Spotify等媒体网站等嵌入代码
其他古腾堡特色
无论您在何处添加它们，您都不必坚持使用已添加的块。您可以在帖子中向上滚动并选择任何现有块之间的+这将允许您在现有块之间插入新块。
你也不会被你的块的位置所困。在经典的WordPress编辑器中，将图像之类的内容移动到帖子的其他部分并不总是很容易，而且有时会弄乱背景编码。
在Gutenberg中，移动图像等元素就像选择块然后在弹出菜单栏中选择向上或向下箭头以在帖子中向上或向下移动块一样简单。
每次您选择箭头时，它都会在您选择的任何方向上滑动一个位置。
在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 yoυ’ve been using WordPress for quite a few years, then you remember when the folks at WordPress rolled out the Gutenberg editor in WordPreѕs 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.
