Gutenberg Hub 使用 WordPress 模式启动在线页面构建器应用程序

在这一点上,我一直对模式的力量赞不绝口。 而且,就在我开始想知道这个功能接下来会是什么样子时,有人用一个新想法让我感到惊讶。 通常那个人就是穆尼尔·卡迈勒。

他提到他将在本周早些时候分享一个与 WordPress 模式库相关的“小”页面生成应用程序。 今天,他公开宣布, 住在古腾堡中心.

该应用程序仍处于概念阶段,但当前的在线版本运行良好。 从本质上讲,它是一个允许用户拼凑模式以构建整个页面的界面。 与块编辑器本身不同,用户不能直接编辑内容。 相反,他们可以混合和匹配模式,复制块代码,并将其粘贴到 WordPress 安装的编辑器中。

首次访问 Gutenberg Hub 上的 Builder 子站点时,用户将在左侧边栏面板中看到一个带有核心模式类别列表的空白画布。 将新模式插入页面就像选择一个类别、搜索首选设计并单击它一样简单:

gutenberg-hub-launches-an-online-page-builder-app-using-wordpress-patterns Gutenberg Hub 使用 WordPress 模式启动在线页面构建器应用程序将模式插入 Builder 应用程序。

用户在插入单个图案后无需停止。 这个项目背后的想法是从多种模式构建一个完整的网页。 然后,通过“复制代码”按钮获取生成的块代码并将其粘贴到 WordPress 的编辑器中。 这是一种玩耍和尝试新想法的便捷方式。

默认情况下,模式是针对桌面视图呈现的。 但是,用户可以检查设计如何响应平板电脑和移动设备。

Builder 直接从 WordPress 模式目录. 这 API 是公开的 并允许其他人在它之上构建应用程序。

虽然 Kamal 没有表示他会展示官方目录之外的模式,但这可能不是不可能的。 Builder UI 在侧边栏中有一个标记为“Core”的部分。 我只是在猜测,但我认为他计划在未来扩展这一点。

菜单按钮位于 Builder 界面的右上角。 这将打开导航器界面。 它允许访问者自定义页面布局:

gutenberg-hub-launches-an-online-page-builder-app-using-wordpress-patterns-1 Gutenberg Hub 使用 WordPress 模式启动在线页面构建器应用程序右侧的导航面板。

有向上或向下移动整个图案、丢弃它们或复制它们的选项。 根据我迄今为止的经验,与尝试在 WordPress 编辑器中选择大量块相比,这是一种更容易进行调整的方法。

我要求的唯一功能是“返回”按钮。 打开导航器并删除插入的模式很容易,但通过工具栏区域中的专用按钮撤消该操作会更快。

Gutenberg Hub 的 Builder 不允许访问者自定义模式的内容。 它的目的更倾向于布局创建。 当用户将其全部粘贴回自己的 WordPress 编辑器时,就会发生自定义。

也许我最喜欢该应用程序的功能是用户可以与他人分享他们的创作。 Builder 为每个变体创建一个自定义 URL,并使其易于在社交媒体上共享:

gutenberg-hub-launches-an-online-page-builder-app-using-wordpress-patterns-2 Gutenberg Hub 使用 WordPress 模式启动在线页面构建器应用程序单击共享按钮后弹出窗口。

共享的概念几乎内置于 WordPress 的块系统中。 因为一切都建立在一套完善的标准之上,其他人在此基础上构建的工具使继续支付它变得容易。

虽然这个项目仍处于概念阶段,但我很想看看 Kamal 将来会把它带到哪里。 他还分享了一个 YouTube 短片 的插件在行动。

来源

相关文章