WordPress有了新的Gutenberg编辑器:作为开发者你应该做什么[更新]

Wordpress大师

    

WordPress，这个已经有15年历史的内容管理系统（CMS），仍然在增长，经历着重大的变化和改进。

在过去的两年中，已经发布了5个主要版本。他们的重点是编辑器、定制器、小部件和其他UX的小改进。我将描述这些在WP 4.4中REST API之后发布的改进，它们深受普通用户和开发人员的喜爱。然而，即将发布的版本对WP的核心体验——内容编辑——是一个重大的根本性改变。此更改影响每个WP用户。多年来，WP依赖于tinyMCE编辑器，这是一个类所见即得编辑器，具有可扩展的按钮列表，可添加和编辑丰富的内容。现在，WP背后的核心团队已经设定了一个启动目标:创建一个全新的帖子和页面编辑体验。作为插件或主题开发人员，您可能会考虑这将如何影响您的业务，特别是您的产品。Gutenberg编辑器的引入引起了许多WP用户，特别是开发人员的极大关注。它把社区分裂成对立的阵营。很少有开发人员或WP社区的人对Gutenberg有一个平衡的看法。WP插件库中古登堡插件的评论清楚地证明了这一点:虽然古登堡插件在4月份只有4000个活跃安装，但现在这个数字已经上升到100000+，超过300个评论（截至2017年2月）已经被945个评论所取代，其中57%是1星，21%是5星。通过检查这些评论，我们可以得出这样的结论:在那些批评新编辑器的人当中，有许多开发人员的动机是出于对业务的关注。因此，考虑插件和主题开发人员如何通过使他们的产品与这种新编辑器兼容来适应它是至关重要的。此外，我们如何真正充分利用新的编辑器，并基于Gutenberg创建漂亮而流行的解决方案?     



是的，与其把Gutenberg看作是一个恼人的、痛苦的更新，迫使我们走出舒适区去适应它，为什么不把它看作是一个超越竞争对手的真正机会呢?为什么不让你的产品达到下一个质量和性能的水平呢?随着时间的推移，只有紧跟时代潮流的人才能生存和发展。让我们讨论一下这些要点。首先，我们将看到Gutenberg如何影响WordPress核心、插件和主题。然后我们将考虑技术细节，最后，尝试展望WordPress及其生态系统的长远未来。古登堡将如何改变游戏?

Gutenberg是WordPress的新编辑器，正如开发者团队承诺的那样，“未来12年的新编辑器”。引入新编辑器的意图是保持WordPress在其他CMS平台中的创新性和竞争力。目标是为所有用户提供直观和愉快的核心WP体验。Gutenberg不是一个页面构建器，但它绝对不仅仅是一个内容编辑器。它的用户体验是基于块而不是文本，就像在当前的tinyMCE编辑器中那样。

编辑器将创建一个新的页面和帖子构建体验，使编写丰富的帖子变得毫不费力，并有“块”使今天可能需要短代码、自定义HTML或“神秘的肉”嵌入发现变得容易。

块是内容的基本部分。它们可以包含文本、HTML、媒体、短代码、小部件和其他结构。区块试图将多个不同的内容创建接口统一为一个标准化的接口。有了创建任何类型内容的通用的、可靠的流程，就不需要学习如何创建短代码了并编写自定义HTML或插入小部件。

块比带有嵌入式媒体或短代码的文本更容易处理。虽然这不是一个完整的所见即所得体验，但如果与后端样式适当集成，它是相当直观的。使用块而不是文本编辑器更容易实现布局定制。值得注意的是，Gutenberg不是一个拖放编辑器，这与WIX编辑器或大多数页面构建器类似。它的使用体验也不同于传统办公编辑器的用户体验，比如MS Word。

<！——/ wp:图像- ><！——wp:短码- - - >（my_shortcode）<！——/ wp:短码- - - ><！——wp:最新博文- - - >这些内容通过PHP和JS解析器在前端和编辑器中呈现。创建块的详细指南可在Gutenberg手册中找到。这里我们只讨论要点和应用。我们可以使用registerBlockType PHP函数创建块，并在前端传递用于呈现块的回调作为参数之一。JS函数registerBlockType用于在编辑器中控制块的外观和与它的交互。传递块属性title、icon和其他参数作为参数。我们可以让短代码保持原样而不进行转换，因为在默认情况下，新的编辑器有一个名为“shortcode”的块。基本上，它是一个输入字段，用户可以在其中粘贴任何短代码，它将在前端正常呈现。然而，为了更好地利用Gutenberg块，最好将短码转换为块。每个短代码变成一个块，它的属性转换为块属性，并具有相应的输入字段进行编辑。</p> <p>这样短码就不会被隐藏为匿名短码，而是会出现在块列表中。<p>Gutenberg不包括tinyMCE编辑器。它只有一个带有一些基本格式按钮的段落块、媒体嵌入块以及自定义HTML块。最后一个只是用于粘贴HTML代码的文本区域。因此，旧编辑器的编辑器按钮和媒体按钮消失了。将通过这些按钮生成的内容转换为块是最简单和推荐的解决方案。在10Web上，我们有几十个使用编辑器或媒体按钮生成短代码的插件。在点击时，它们通常呈现一个带有表单的iframe。例如，我们的Photo Gallery有一个很大的表单，其中有许多输入和按钮来定制短代码参数。Instagram Feed WD有一个小弹出框，里面有一个可供选择的Feed列表。在这两种情况下，我们将它们转换为块。当单击块时，旧的iframe仍然在弹出窗口中打开表单，但它不是在表单提交时将短代码粘贴到编辑器的内容中，而是将短代码作为块参数返回，然后块将其保存。Gutenberg支持元框，尽管它可能破坏其中的一些。元框，以前放置在侧区，已经移动到侧栏→文档→扩展设置区域。如果一个元框在内容下面，它就会留在那里。首先检查元框是否在所有的帖子类型中都是可见的，就像以前一样。每个元框可以显式声明或不显式声明其对新编辑器的支持。</p><p>元框与Gutenberg冲突，并未声明其支持，允许强制回退，即恢复到旧的经典编辑器，在那里它们将继续像以前一样工作。当然，我们想要保持向后兼容性，因为万一几个元框中的一个将WordPress屏幕逆转到经典编辑器，其他的应该继续支持旧的编辑器。</p><img class=“aligncenter“ src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/9208978454444684598.jpg“><img class=“aligncenter“ src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/9208978454444684598.jpg“></p><p>一些插件在“提交”或“保存”时更新编辑器页面DOM可能会崩溃，因为Gutenberg有不同的保存元框数据的机制。此外，如果你有一个插件，目标是旧编辑器的任何选择器或屏幕上的任何特定元素，那么要小心。这些元素可能不再存在，或者可能有另一个选择器。因为小部件的呈现是特定于主题和模板的，所以它们将继续正常工作。然而，Gutenberg编辑器提供了一个很好的机会，可以使小部件更容易被发现，并方便它们转移到内容。将小部件转换为可呈现的块也有助于实现这一目标。编辑器中的块样式是可定制的。块可以有自己可覆盖的管理样式或依赖on主题风格。主题使用编辑器样式功能提供样式，这在WordPress中已经存在。在新的编辑器中，这个样式表比在经典编辑器中更重要，因为Gutenberg也可能在后端呈现块。当然，您希望编辑器中的块看起来与用户在前端看到的类似。实际上，更好的内容编辑UX（类似于前端构建器所提供的）将是您的主题的一项资产。<p>Gutenberg已经支持自定义邮件类型（CPT），但是这个特性需要改进。关于与核心、自定义分类法、自定义帖子状态和REST API的合并，仍然有一些开放的问题。你可以考虑在你的插件中对CPT的Gutenberg支持，原因有几个:</p>允许CPT内容中的块;即使CPT不使用编辑器，您也可以从Gutenberg中改进的metaboxes性能中受益;在编辑CPT时提供统一的用户体验。Gutenberg使用块API来创建、扩展和自定义块。你可以检查插件创建的所有内容元素，看看将它们转换成块是否有益。如果元素在前端内容中可见，则可以将其视为块。例如，即使图库通常不放在发布/页面内容中，它也可能变成块。另一个例子是小部件或菜单，通常显示在页眉、侧边栏或页脚。什么应该防止在内容中插入类似的元素?还要考虑一些特定于页面的元素，比如特色图片。它们通常可以使用metaboxes进行定制，但是将它们转换为块可以让您以用户友好的方式将它们放置在任何您想要的地方。Gutenberg的一个未解决的问题是Fields API，这是一个用于创建标准化字段的工具集，用于自定义块属性、文档属性或元箱。</p><p>现在每个插件都负责渲染块编辑体验，这会导致界面不一致，用户体验肯定不愉快。基本上，大多数可定制块都有某种形式，将字段组织成组、节或选项卡。通过可能引入的字段API，我们最终可以创建统一的编辑体验、可扩展的字段和更多依赖于REST API的块。在Facebook根据MIT的许可重新授权React之后，Gutenberg的框架选择问题已经解决了。尽管开发人员声明他们的意图是保持Gutenberg框架的不可知论性，但它使用React来呈现块。因此，考虑到Gutenberg仍在开发中，需要更多的时间才能成为WP的一个稳定和成熟的组件，我们建议只使用React来使您的产品与Gutenberg兼容。</p> <p>Gutenberg已经有了可重用块特性。等待的下一个主要步骤是允许可重用的页面或模板。不兼容的插件在WordPress 5.0发布后，我们预计许多插件仍然与Gutenberg不兼容。不让你的插件保持最新将会对它的使用产生严重的负面影响。在更新WordPress到最新版本后，用户可能会突然发现一些插件失败了，失败得很严重。他们得换新的了。还有一个额外的因素:WordPress目录中的插件有一个“测试到”参数，表示它们与最新的WordPress版本的兼容性，这将影响它们的搜索排名。不兼容的插件不仅会失去安装，还会在搜索结果中落后，加速它们的废弃。Gutenberg的发布将引发新的免费和付费插件的开发，用于创建块和模板。</p><p>在最后阶段of古腾堡开发，当主题将完全支持古腾堡模板和块，我们将看到一个新的基于块的WordPress主题的崛起。Gutenberg绝对是WordPress的一个巨大飞跃。在用户体验完善之后，Gutenberg将最终被WordPress社区所采用。它是默认编辑器。无论人们是否认可它，Gutenberg都将是数百万WP用户中使用最多的编辑器。</p><p>几周前，谷歌的Web内容生态系统团队的开发者倡导者Alberto Medina宣布了谷歌的WordPress愿景，它强调了对Gutenberg开发的贡献，以及密切参与支持和开发基于WordPress的工具和平台。我们必须应付新来的编辑。从长远来看，跟不上新编辑器的产品将被抛弃，为新玩家让路。Gutenberg将保持WordPress的创新性，并为基于WordPress的新产品和内容创作服务敞开大门。你喜欢这篇文章吗?传播这个词!</p>留言取消回复<p>您的电子邮件地址将不会被公布。必填字段标记为*</p> <p>您的电子邮件地址将永远不会被发布或共享。必填字段标记为*</p> <p>COMMENT*</p> <p>NAME *</p> <p>EMAIL ADDRESS *</p> <p>WEBSITE</p> <p>在此浏览器中保存我的姓名、电子邮件和网站，以便下次评论时使用。</p> </p> <p></p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> 7评论按最近最近最多的回复<img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/825218014507095030“ class=“aligncenter“> <img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/825218014507095030“ class=“aligncenter“> nilesh 2019年9月18日<p>安装经典编辑器插件</p> <img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/6680107596995929632.gif“ class=“aligncenter“> <img class=“aligncenter“ src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/6680107596995929632.gif“>安装经典编辑器插件“保存取消删除回复<img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/660922565351710187“ class=“aligncenter“> <img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/660922565351710187“ class=“aligncenter“> Ravi 2019年4月8日<p>你好Jeremy，</p> <p>我希望你是好的。我想在新的WordPress版本中添加页面编辑器和post文本编辑器上的按钮</p><p>我使用这个代码添加页面的按钮和post编辑器在word press。<p></p>add_action（“media_buttons”、“wpbeautify_add_sc_select”,11）;函数wpbeautify_add_sc_select（）{echo \“ FotoPress \“;你能帮我解决这个问题吗?</p><p>谢谢。你好杰瑞米，我希望你一切都好。我想在新的WordPress版本中添加页面编辑器和post文本编辑器上的按钮，我使用这个代码添加页面的按钮和post编辑器在word press。add_action（“media_buttons”、“wpbeautify_add_sc_select”,11）;函数wpbeautify_add_sc_select（）{echo \“ FotoPress\“;你能帮我解决这个问题吗?谢谢你！保存取消删除回复<img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/2900792505930372976“ class=“aligncenter“> <img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/2900792505930372976“ class=“aligncenter“> Alex 2月26日2019 <p>你能帮我为自定义帖子启用古腾堡编辑器吗?我试图做，但我有一个错误的代码。</p> <p>函数custom_post_type（） {register_post_type（\“ personal \“，</p> <p>array（\“ labels \“ => array（\“ name \“ => __（\“ personal \“）， \“ singular_name \“ => __（\“ personal \“））， \“ has_archive \“ => true， \“ public \“ => true， \“ rewrite \“ => array（\“ slug \“ => \“ personal \“），</p> <p>））;}</p> <p>add_action（\“ init \“， \“ custom_post_type \“）;</p> <p>我已经看到这里的代码https://www.cloudways.com/blog/gutenberg-wordpress-custom-post-type/</p> <img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/6680107596995929632.gif“ class=“aligncenter“> <img class=“aligncenter“ src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/6680107596995929632.gif“>你能帮我启用一个自定义帖子的古腾堡编辑器吗?我试图做，但我有一个错误的代码。函数custom_post_type（） {register_post_type（\“ personal \“， array（\“ labels \“ =>阵列（“名字”=比;__（\“ Personal \“）， \“ singular_name \“ =>__（\“ Personal \“））， \“ has_archive \“ =>诚然,“公共”=比;诚然,“重写”=比;阵列（“鼻涕虫”=比;“个人”）））;} add_action（\“ init \“， \“ custom_post_type \“）;我已经看到这里的代码https://www.cloudways.com/blog/gutenberg-wordpress-custom-post-type/保存、取消、删除、回复<img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/3157039418983880821“ class=“aligncenter“><img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/3157039418983880821“ class=“aligncenter“>John_B 2018年12月5日<p>这将是不诚实的做一个古登堡网站除非我们先向他们指出样式、块和内容之间缺乏分离，这意味着他们的内容几乎不可能从WordPress迁移出去。对于那些没有人希望保存或存档的时间比WP更长，而客户端希望使用的短暂内容，并且不需要可移植和可重用的内容，人们仍然可以问心无愧地向客户端推荐WP。对于那些内容太有价值而不能被锁定在Gutenberg中的客户来说，现在有商业机会将它们从WP迁移到一些CMS中，这些CMS将继续支持内容和样式的分离，以及良好的桌面编辑体验。为客户做一个古腾堡网站是不诚实的，除非我们首先向他们指出，风格、块和内容之间缺乏分离，这意味着他们的内容几乎不可能从WordPress迁移出去。对于那些没有人希望保存或存档的时间比WP更长，而客户端希望使用的短暂内容，并且不需要可移植和可重用的内容，人们仍然可以问心无愧地向客户端推荐WP。对于那些内容太有价值而不能被锁定在Gutenberg中的客户来说，现在有商业机会将它们从WP迁移到一些CMS中，这些CMS将继续支持内容和样式的分离，以及良好的桌面编辑体验。保存取消删除回复<img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/8724306586526165771“ class=“aligncenter“><img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/8724306586526165771“ class=“aligncenter“><p>我是一个博主，最近开始使用古腾堡，我有很多喜欢它的地方。但目前它真的无法创建合适的页面;这些页面就像博客文章，甚至在发布时触发订阅者提醒!这是不应该发生的。希望在不久的将来，这个问题能得到解决。此外，我发现我在Gutenberg帖子中的脚注链接不起作用，只有在经典编辑器中才起作用。在Gutenberg成为WordPress的主编辑器之前，这些问题和其他问题都需要解决。特别是，因为经典的编辑器插件打破了Gutenberg插件;我不得不关闭它。我不确定该如何纠正这个问题，但一旦WP 5.0推出，经典的编辑器可能将无法使用，除非通过插件，所以这让我担心。</p><img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/6680107596995929632.gif“ class=“aligncenter“><img class=“aligncenter“ src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/6680107596995929632.gif“>我是一个博主，最近开始使用Gutenberg，我喜欢它的很多地方。但目前它真的无法创建合适的页面;这些页面就像博客文章，甚至在发布时触发订阅者提醒!这是不应该发生的。希望在不久的将来，这个问题能得到解决。此外，我发现我在Gutenberg帖子中的脚注链接不起作用，只有在经典编辑器中才起作用。在他们让Gutenberg成为Wordpress的主编辑器之前，这些问题和其他问题都需要解决。特别是，因为经典的编辑器插件打破了Gutenberg插件;我不得不关闭它。我不确定该如何纠正这个问题，但一旦WP 5.0推出，经典的编辑器可能将无法使用，除非通过插件，所以这让我担心。保存取消删除回复<img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/7846294898348380874“ class=“aligncenter“><img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/7846294898348380874“ class=“aligncenter“>Subrata Sarkar 2018年9月6日<p>我最近开始尝试Gutenberg，作为一名开发人员，我的第一件事是搜索metabox是如何工作的。我正在寻找一个非常简单的事情-如何声明元框和保存它时创建一个古登堡插件。但令人惊讶的是，我还没有找到一篇有正确编写的代码示例的紧凑文章，特别是当Gutenberg说它现在完全支持metabox时!我在这里创建了一个线程https://stackoverflow.com/questions/52167808/gutenberg-meta-information-is-saved-as-html-comment-in-post-content-field 2天前，但不幸的是还没有回复!我可以请您分享一个工作的例子和一步一步的过程吗?</p><p>谢谢!</p><img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/6680107596995929632.gif“ class=“aligncenter“><img class=“aligncenter“ src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/6680107596995929632.gif“>我最近开始尝试Gutenberg，作为一名开发人员，我的第一件事就是搜索metabox是如何工作的。我正在寻找一个非常简单的事情-如何声明元框和保存I当创建Gutenberg插件时。但令人惊讶的是，我还没有找到一篇有正确编写的代码示例的紧凑文章，特别是当Gutenberg说它现在完全支持metabox时!我在这里创建了一个线程https://stackoverflow.com/questions/52167808/gutenberg-meta-information-is-saved-as-html-comment-in-post-content-field 2天前，但不幸的是还没有回复!我可以请您分享一个工作的例子和一步一步的过程吗?谢谢你！保存取消删除回复<img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/1607334362540569231“ class=“aligncenter“> <img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/1607334362540569231“ class=“aligncenter“> Jeremy Ratliff 2018年8月22日<p>Gutenberg Sucks</p> <img src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/6680107596995929632.gif“ class=“aligncenter“> <img class=“aligncenter“ src=“https://www.gv123.net/blog/wp-content/uploads/2022/10/6680107596995929632.gif“> Gutenberg Sucks“保存取消删除回复相关帖子博主面临的十大问题以及如何解决它们我能从10Web得到什么?WordPress 5.0:让你的网站为Gutenberg插件做好准备