How to Adapt Your WordPress Site to the New Block Editor (a.k.a. Gutenberg)

在2019年创建引人入胜的Web内容意味着构建多媒体丰富的页面，这需要更强大，更广泛的内容编辑器。

In December 2018, WordPresslaunched一位新编辑（在德国发明家之后称为古腾堡块印刷机) that relies on blocks instead of custom code and plugins to develop media-rich pages. Blocks give you more control over the style and arrangement of your WordPress blog posts and pages, letting you build more customized content without a ton of advanced technical knowledge. Basically, the new editor makes creating beautiful content a lot easier and accessible to teams without the budget for a professional web designer.

So, if you're not on the new editor yet, I have one question: why not?

我明白了 - 改变很难。而且，如果您和您的团队对经典的WordPress编辑进行了深入的投资，那么搬到Gutenberg似乎会令人生畏。

但是请考虑一下：如果您不将WordPress网站更新为新编辑器，那么您会错过为访问者提供改进的体验（并为您自己提供更好的网络编辑体验）。这篇文章将引导您了解如何使WordPress网站更加友好。

但是，古腾堡编辑器与经典的WordPress编辑器有何不同？

The classic editorused something calledTinymce, an online rich-text editing tool that looks and functions a lot like a Microsoft Word document. If you wanted to add elements beyond text and simple visuals, you'd need to incorporate custom code or plugins to get the job done. If you didn't have coding experience or resources to hire help, you were pretty limited in what you could accomplish with the old editor.

Gutenberg编辑uses blocks instead of TinyMCE to create posts and pages. Blocks are drag-and-drop elements you can insert to build pages, and WordPress offers a wide variety of different blocks you can customize and arrange to your liking, e.g., text blocks, image blocks, gallery blocks, layout elements, etc.

While the new block editor hasn't been pushed to all websites yet — the core developers are leaving room for people to get used to it, try it, and gradually adopt the change — it is coming. Once Gutenberg is officially rolled out, you won't be able to switch back. However, there is a经典编辑器的插件您可以下载以继续在Tinymce工作。

Why Switch to Gutenberg?

块编辑是WordPress的未来。所有现代工具和插件将在几年内围绕Gutenberg旋转。目前，开发人员正在通过在其产品中实现与块的兼容性，包括插件，主题，框架，工具，模板等，将其转向此新功能。

如果您在WordPress市场上偷看，您会注意到Gutenberg到处都是。最受欢迎的主题和插件已经进行了修改以满足新要求。同时，大多数新建的主题和插件都使用专门为古腾堡开发的自定义块和模块。

Gutenberg编辑will replace the classic WordPress editor. It will soon be the main method of customizing your entire site (pages, widgets, menus, headers, footers, and other website areas), so adapting now will give you time to get used to the change.

如何使您的WordPress网站适应Gutenberg的块编辑器

当您切换到Gutenberg时，您需要确保您的内容和数据通过过渡安全和保护。这是一份清单，提供了您需要平稳过渡到新块编辑器所需的一切。

1.备份您的WordPress网站

Before switching to the latest version of WordPress, don’t forget toback up your WordPress site并检查您的主题和插件是否支持最新版本。这些步骤在此过程中非常重要。

In the event that any info is lost during the transition, you can use your backup to revert back to an earlier version of your site. Free backup plugins, likeUpdraftPlus或者backwpup, make it easy to retrieve any lost data in one click.

To check if your themes and plugins support the latest WordPress version, you can go to either the official site or to WordPress.org and verify the latest updates, tests, and what version of WordPress they support. Check the “Tested up to” line on the plugin's or theme’s page.

2. Update WordPress

这听起来可能是显而易见的事情，但是许多人仍然在其网站上使用旧版本的WordPress。在5.0岁以上的WordPress版本上安装Gutenberg是行不通的。

Once you update to a recent WordPress version (which has to be at least 5.0), the editor will change by default. To update the WordPress version, go toDashboard>Updatesand follow the instructions.

3. Choose a Theme That’s Compatible with the Block Editor

即使大多数受欢迎的主题都带有Gutenberg集成，但仍有主题没有定期更新。确保您的主题已准备好进行更改。如果您更新到WordPress 5.0，并且该主题不支持或未对其进行测试，则会遇到几个错误。

其中一些错误包括各种站点元素，这些元素无法正确显示前端，某些块不起作用以及无法自定义的模板。简而言之，您将在过时的主题上遇到很多麻烦。

To check if your theme is compatible with the block editor, go to the official homepage of the theme and check the changelog. The changelog provides the date of the latest update and the new features. You can also search for Gutenberg compatibility in the theme's features list.

主题描述可能不是特别国家that it's compatible with Gutenberg but that it has been updated recently and tested with WordPress 5.0 — that means that it will work with the block editor. But if you choose a theme that was built为了Gutenberg, it will come with extra benefits that will empower your site toward blocks.

If a theme you've chosen is not compatible, no worries, there are several great Gutenberg-ready themes that offer a set of top-notch features adapted to the block editor.

Gutenberg友好的WordPress主题

尼夫是一个完全适合新WordPress编辑器的免费主题的一个很好的例子。除了与Gutenberg和Page Builders一起建造外，它还针对站点性能。这是一个快速的主题，可在不到一秒钟内加载，可针对加速移动页面（AMP）进行优化，并配备了大量的利基模板为您的企业。关于Neve的所有内容都是自定义的，因此您可以轻松地对其进行重新设计以适合您品牌的风格。

来源

Zakrais another strong WordPress theme, known for its fast page loading times and the flexibility that it offers when it comes to customization. It also comes with a bunch of free and premium starter sites for all sorts of businesses, and it’s friendly with page builders. With Zakra, you can build almost anything you have in mind, and most of its features are free.

来源

OceanWPis a good choice for both developers and casual users who want to build great sites with WordPress. It’s made for the block editor and drag-and-drop functionality. It comes with both free and premium niche features that you can import in one click. Moreover, OceanWP is optimized for speed, mobile, and e-commerce. If you want to enrich your site, you can add extensions to increase conversions and improve the user experience.

来源

4.更新您的插件并检查Gutenberg兼容性

小细节可以使成功的网站过渡和麻烦的网站之间有所不同。与Gutenberg不兼容的网站上的任何活动插件都会对您的后端和设计产生负面影响。

For instance, if you’re using plugin shortcodes, they might not show up properly after switching to Gutenberg.

第一步是更新所有现有插件（请转到Dashboard>Updates). There’s a good chance that many of your plugins are block-compatible since most developers are invested in making their tools Gutenberg-friendly.

Next, pay attention to the new plugins that you intend to install and check their compatibility with the block editor. If they’re not compatible, you might not be able to use them properly.

5.检查您的现场健康状况

Site Health is a feature that was introduced recently in WordPress to show you critical information and general details about your site. So, if any tool requires an urgent update or if there are errors, you will see them in the Site Health tab on your WordPress dashboard. Any feature that is not working properly on your site will be reported on that page, along with suggestions on how to improve or fix them.

在现场健康中，您将主要获得有关性能和安全问题的信息。

在切换到古腾堡之前和之后，请咨询现场健康，以便能够发现传入的错误。

6. Convert the Old Posts to Blocks

So, you've migrated to Gutenberg safely, your tools are working in perfect harmony, and your site is functioning according to plan. You can now create posts and pages using blocks. But what about the old posts that you created with the classic editor? Will they be affected by this change?

The answer is no, your old content won’t be affected by the change. Of course, double-checking your posts to see if everything looks as before won’t hurt. But normally, as long as there were no conflicts during the transition, the content should look the same.

However, you will still need to convert the classic editor posts to blocks since the swap doesn't happen automatically once you switch to Gutenberg.

将会发生的是，通过经典编辑器创建的所有内容都将成为Gutenberg编辑中的一个块。

那么如何将这些帖子转换为古腾堡块？

ClickEditon a post you want to convert. Click on更多的选择在块的左角（三个点），然后在下拉菜单中单击“转换为块”。

WordPress将扫描整个帖子，并将其分为相应的块。例如，每个带有文本的段落都将放在段落块中，将图像放在图像块中，画廊中的照片库等等。

现在，您的帖子由许多块组成，每种类型的内容都被分配给其自己的单独块。重复您要转换的每个现有帖子的步骤。

If you do not want to convert all the posts, you don’t have to. This step is not mandatory. You can keep your old posts as they were with no adverse consequences.

7. Boost Gutenberg With More Blocks

The block editor comes with a diverse set of blocks from various categories, but you don’t have to stick with the default options. If you want to grow your blocks library, you can always add new ones via free plugins that come up with extended block editor functionality.

Here are a few free block editor plugins to try.

Otter Blocksis a lightweight plugin that brings you a nice package of 12 new blocks and templates to make your Gutenberg army more powerful.

The blocks and templates can be easily personalized and turned into fully functional sections.

Gutenberg Blocksis an alternative to Otter Blocks and comes with 20 useful blocks for posts and pages.

CoBlockshas 30 blocks for many purposes and a separate category for galleries that lets you create beautiful layouts for your photo galleries.

Stackable有一组有趣的块，可为更具吸引力的视觉展示提供出色的布局解决方案。

Wrapping Up

将您的网站调整为块编辑器不是可选的，这是必须的。从现在开始的两年后，经典的编辑将不再存在，WordPress将与Gutenberg有关。在开关角色时，开始涉足界面，学习技巧，并成为Gutenberg Pro。