使用技巧

Gutenberg 10.2在导航列表中添加了空格,让用户可以对模板部件进行分类,并引入范围内的模式

昨天,该版本的10.2 古腾堡WordPress插件登陆。 现在,用户可以在导航项目之间添加一个Spacer块,对自定义模板零件进行分类,并在插入Query块时在模式之间进行选择。

用户体验在某些方面持续改善。 媒体和文本块,为数不多的保留之一,现在可以 转换成专栏。 转换产生两列,媒体和文本分开。 但是,这是单向转换。 对于写出其文本列的用户来说,这是一项必要的增强功能,使他们意识到他们只能添加上载的媒体,而不能将YouTube之类的内容嵌入到Media&Text块中。 快速切换到Columns可解决此问题。

仅“开始写或键入/选择一个块”提示 出现在第一个空白段落 当有后续段落时。 这是一个微不足道的更改,但它消除了一个小麻烦。

开发团队为Gutenberg 10.2压缩了30个bug。 他们还继续致力于改善实验性功能,例如站点编辑器,全局样式和基于块的导航菜单。 完整站点编辑正在形成,但是要知道它是否准备好包含在WordPress 5.8中还需要一段时间。

当我写这篇文章时,我也在一个坏的编辑器中这样做。 古腾堡10.2再次更改了其标记或CSS,这意味着我将不得不进行一些挖掘,以找出为什么我们所有的段落在编辑器中都未对齐。 但是,那是明天的工作。 这应该是特定于主题的修复程序,并且是一个单独的问题。

在导航列表中嵌套间隔块
gutenberg-10-2-在导航列表中添加空格,让用户分类模板部分,并引入范围内的样式Gutenberg 10.2将空格添加到导航列表中,让用户对模板零件进行分类,并介绍范围模式在导航列表中插入一个空格。

古腾堡(Gutenberg)项目带来的最糟糕的想法之一是,用户现在可以 插入间隔块 在水平导航块项目之间。 并且它们可以增加或减少像素的空间。 间隔的想法本身并没有坏处,但是使用的解决方案是。

据我所知,

标记不允许作为

    的直接子代。 这就是

  • 元素所在的位置。 也许这是我老派的HTML成长经历,但是在其他方面投入其他东西并不适合。 列表项是列表的子级。

    幸运的是,已经有数十年的网页设计师可以使用这种水平间距的解决方案了:边距和填充。

    自从将其引入古腾堡以来,间隔块从未感到过正确。 我一直认为这是垂直间距的权宜之计,直到我们获得适当的边距和填充块选项。 我从未想过我们会找到新的创造性方法来使用它来定义网站的标记。

    模板零件类别
    gutenberg-10-2-在导航列表中添加空格,让用户分类模板部分并引入范围模式1 Gutenberg 10.2将空格添加到导航列表中,让用户对模板零件进行分类,以及引入作用域模式选择模板零件的区域。

    用户现在可以 将模板零件保存到特定类别 或“区域”(在网站编辑器用户界面中称为它们)。 在 古腾堡10.1,开发团队为主题作者引入了一个新的分类系统,该系统将自动将模板部分放置在“页眉”,“页脚”,“侧边栏”或“常规”类别中。 现在可以为用户创建的模板零件打开相同的系统。

    通过站点编辑器保存模板零件时,用户必须打开“高级”块选项卡。 有一个新的“区域”选项。 此版本中缺少补充工具栏类别。 但是,这是迈向模板部分管理的可喜步骤。

    查询块模式
    gutenberg-10-2-在导航列表中添加空格,让用户分类模板部分并介绍范围模式2 Gutenberg 10.2将空格添加到导航列表中,让用户对模板零件进行分类,以及引入作用域模式处于初始状态的Query块的模式选择。

    查询块是整个站点编辑的核心。 它最终将成为开发人员和用户在构建网站时与之交互的主要组件之一。

    开发团队在首次插入Query块时为最终用户引入了新概念。 过去,用户看到了几种块形式的变化。 现在,他们可以 在模式之间选择 特定于该块的。

    开箱即用,有大,中和小模式。 用户还可以选择从空白开始。

    对于开发人员,此更改引入了作用域模式。 从长远来看,它是Block Patterns API的新层,应该提供大量的灵活性。 尽管该功能目前仅适用于查询块,但主题和插件作者可以为用户将来选择的块创建预定义的布局。

    想象一下,有几种您想要提供给用户的帖子循环风格。 使用几行代码,您可以将每行注册为可选查询模式。

    API的新部分添加了一个范围参数,如下所示:

    ‘范围’=> [ ‘inserter’ => false, // Whether to show in the main block inserter. ‘block’ => [ ‘core/query’ ] //模式的容器块。 ]

    这仍处于试验阶段,因此随着功能的进一步发展,情况可能会发生变化。

    按照核心示例,我使用以下代码创建了快速查询模式:

    add_action(’init’,function(){register_block_pattern(’tavern-query’, [ ‘title’ => ‘Tavern Query’, ‘scope’ => [ ‘inserter’ => false, ‘block’ => [ ‘core/query’ ],],’content’=>’<!-wp:post-title {“ isLink”:true} /-> <!-wp:post-featuredimage {“ isLink”:true,“ align” :“ wide”} /-> <!-wp:post-excerpt /-> <!-wp:separator->


    <!-/ wp:separator-> <!-wp:post-date /->‘]); });

    像这样:

    像载入中…

    来源