菜单可自由定制、区块可按设备隐藏！一文带你盘点 WordPress 7.0 的自定义创意新功能

WordPress 7.0 这次不仅在后台界面上大刀阔斧地重构，更通过一系列更强大的设计工具和全新的编辑功能，彻底解放和激发站长和设计者创造力。

在新版本中，大家在移动设备上自定义导航菜单，对单个区块的响应式进行精细和智能控制，甚至还能在不同的模式下玩转“模式级（Pattern-level）”的高级编辑！

用区块随意拼移动端汉堡菜单

以前手机版网站的汉堡菜单（点击后弹出的全屏导航层）非常死板，样式和内容完全被主题锁死，想加个按钮或改个布局比登天还难。

现在这个移动端遮罩层彻底解放了！可以直接在站点编辑器里，像拼积木一样用各种区块和模式（Patterns）去随意搭建你的手机端菜单。

全新专属“关闭”区块：新版本特意做了一个 “导航遮罩关闭区块（Navigation Overlay Close block）”。无论是站长还是主题作者，都可以把“关闭按钮”放在弹出菜单的任何地方，样式也能随便改，手机端的导航体验完全由你说了算。

所见即所得：支持“原位选择与预览”，改菜单不用再跳来跳去，改完直接看效果。同时主题还能自带默认模板，方便你一键快速套用。

💡 开发者避坑指南（关于手机菜单定制）：

根据 Customisable Navigation Overlays 文档，主题开发者现在可以通过 theme.json 的 templateParts 捆绑自定义遮罩层（切记：必须注册 area: "navigation-overlay" 区域，否则系统无法识别）。

这里有一个非常重要的暗坑： 不管你怎么设计这个遮罩层，里面一定要显式包含全新的关闭区块！如果你漏掉了，系统虽说为了无障碍体验（Accessibility）会自动在前端硬塞一个默认关闭按钮，但那绝对会彻底毁掉你原本精心调校好的排版样式。另外注意，目前第一版仅支持全屏遮罩，暂时无法实现侧边栏抽屉（Sidebar Drawer）效果。

区块响应式控制更聪明

虽然从 6.9 版本开始就能用代码完全隐藏某个区块，但以前在编辑器里没办法做到“电脑上显示，手机上隐藏”这种精细的响应式视觉操作。

7.0 终于加入了基于设备类型的区块可见性功能！你可以根据访客是用电脑、平板还是手机，来决定某个区块是显示还是隐藏，而且各个设备之间互不影响。

多入口 / 秒操作：可以直接在区块工具栏（Block Toolbar）、右侧的侧边栏检查器（Block Inspector），或者直接按下 ⌘K（Windows 下用 Ctrl+K）唤醒命令面板来一键切换。

列表视图一眼便知：为了防止大家搞混，在左侧的“列表视图（List View）”里，只要某个区块被设置了隐藏规则，它旁边就会显示一个小图标，明明白白地告诉你它在哪个屏幕下被藏起来了。做复杂响应式网页再也不怕迷路了。

💡 开发者干货点拨（关于设备隐藏机制）：

很多小伙伴担心按设备隐藏区块会不会影响 SEO？Block Visibility 的规范已经给出了明确答案：7.0 的设备隐藏是通过前端 CSS 实现的，区块依然会完美渲染在 DOM 树中！

这与以前直接干掉 DOM 的 blockVisibility: false 的逻辑完全不同，因此对搜索引擎极其友好。从标记来看，它只是在元数据里新增了 viewport 字段（如 {"viewport":{"mobile":false}}）。如果你写插件时有在服务端解析或转换区块标记的需求，记得做好对象兼容。

模式编辑和 contentOnly 交互性

把复杂的“模式（Patterns）”或者“模板部件（Template Parts）”交给客户或者新手编辑去改网站时，最怕他们不小心把精心设计好的排版、间距或者布局给改乱了。

7.0 极大地扩展了 contentOnly（仅限内容）编辑模式的范围，现在非同步模式（Unsynced Patterns）和模板部件也默认开启这个模式。也就是说，用户点进去只能改里面的文字和图片（内容），而深层的区块结构和样式控制被完美保护起来了。

不过别担心灵活性不够，WordPress 也给开发者留了以下几个强大的升级接口：

自由退出限制：如果你某些模式不需要这种保护，想要完全无限制地编辑内部所有区块，可以通过全新的 disableContentOnlyForUnsyncedPatterns 设置，或利用 block_editor_settings_all PHP 过滤器轻松让其“选择退出”。

区块角色声明：因为 contentOnly 模式应用变广了，如果你的自定义区块会被嵌套进去，记得在 block.json 里把代表内容的属性加上 "role": "content"。要不然，这个区块在只读模式下就无法编辑，甚至会在列表视图里被藏起来！

侧边栏新增“列表视图”：区块开发者现在可以在 block.json 中声明 "listView": true。这会在右侧检查器里开辟一个专属的“列表视图”标签页，给编辑者提供一个精简视图，修改和自定义区块变得更省心。

自定义区块全线支持“模式覆盖（Pattern Overrides）”：以前这个黑科技只能用在内置特定的几个核心区块上，现在彻底打通了！只要你的自定义区块属性支持区块绑定（Block Bindings），就都能玩转模式覆盖，开发者可以通过服务器端的 block_bindings_supported_attributes 过滤器有选择地开启。

💡 插件与主题开发避坑指南（关于模式覆盖与内容保护）：

根据 Pattern Editing 和 Pattern Overrides 规范，7.0 彻底重构了内容锁定逻辑。这里有两个极具价值的底层暗坑和新特性，开发者必须注意：

首先是非同步模式（Unsynced Patterns）的强制保护行为。在 7.0 中，非同步模式默认强制开启 contentOnly 模式，如果你的自定义区块会被嵌套进去，记得在 block.json 里把代表内容的属性加上 "role": "content"。要不然，这个区块在只读模式下就无法编辑，甚至会在列表视图里被藏起来！

其次就是自定义区块覆盖的底层标记大坑。模式覆盖的底层是通过 区块绑定 API（Block Bindings API） 实现的，属性值会自动动态渲染到前端的区块标记中。如果你的静态自定义区块属性太复杂（比如包含 HTML API 无法解析的深层嵌套 JSON 对象），必须在服务端配置 render_callback() 回调函数，否则前端绝对会直接渲染报错或干脆无法显示！

简单总结两句

总的来说，WordPress 7.0 在“自定义”这件事上，思路明显变得更成熟了。

它一方面用积木式的全屏菜单和精细的设备隐藏赋予了设计师极大的操作自由，另一方面又用强制的 contentOnly 机制帮新手和客户扎好了内容的“防卷栏”，让大家可以更安稳、不踩坑地去折腾网站。

这次的自定义创意新功能，你觉得哪一个最能切中你的刚需？欢迎在评论区里聊聊！