您现在的位置是：首页 > WordPress教程WordPress教程

WordPress Gutenberg与经典编辑器对比

WP集市 2025-08-28 【WordPress教程】 638人已围观

咱们先唠唠WordPress里这两个编辑器的区别。Gutenberg是2018年之后默认的块编辑器（Block Editor），经典编辑器（Classic Editor）则是老版本那个像Word一样的文本栏。简单说，Gutenberg把内容拆成积木块，经典编辑器就是一整张大白纸。

用代码看区别最直接。经典编辑器的文章数据存成这样：

$post_content = '<p>一段文字</p><img src="image.jpg">';

而Gutenberg会存成带块包装的JSON结构：

<!-- wp:paragraph -->
<p>一段文字</p>
<!-- /wp:paragraph -->
<!-- wp:image -->
<img src="image.jpg"/>
<!-- /wp:image -->

新手用经典编辑器就像开老式汽车——功能简单但直接。安装插件后加个表格只需要点图标：
```
[table style="1"][tr][td]内容[/td][/tr][/table]
```
但Gutenberg得先找“表格”块，再填数据，虽然步骤多但能单独设置每列颜色。
有时候你会觉得Gutenberg的逻辑有点跳。比如想给某段落加自定义CSS类，得先选中块，点高级选项卡，再输入类名。而经典编辑器直接切换文本模式加class就行：
```
<p class="2cf0-1525-9770-1535 my-style">文字</p>
```
但Gutenberg能实时预览啊，一边改一边看效果。

插件开发也不同。给经典编辑器加个按钮要用古老的TinyMCE API：

QTags.addButton('my_button', '提示', '<span>自定义内容</span>');

而Gutenberg得用React组件：

registerBlockType('my-plugin/button', {
title: '自定义按钮',
edit: () => <Button variant="primary">点击我</Button>,
save: () => <span>自定义内容</span>
});

为啥Gutenberg更未来？因为它能拖拽调整结构。比如把视频块拖到专栏块左边，文章排版立马变杂志风。经典编辑器要实现得写短代码：
```
[column layout="left"]视频内容[/column]
[column layout="right"]文字内容[/column]
```
但Gutenberg直接鼠标拽就行，对手机编辑特别友好。
最后给个建议：如果你文章多是纯文字且习惯HTML编码，经典编辑器加SyntaxHighlighter插件够用。但要是常做图文混排、产品展示或团队协作，Gutenberg的块管理确实更省时间——虽然刚开始会觉得它像过度设计的乐高架。