作者： 元素设备

• Gutenberg 15.1 添加了 Openverse 集成，新增区块自定义CSS

  Gutenberg 15.1于本周发布，在“媒体”选项卡中集成了 Openverse，新增基于每个区块的自定义CSS等。

  文章目录

  在“媒体”选项卡中集成了 Openverse

  开放许可和公共领域作品的 Openverse 资源库也已通过更新的设计移至其自己的网站。它包含超过 6 亿个免费使用的图像和音频文件，现在可以在 WordPress 的编辑器中使用：

  

  单击 Openverse 图像将立即将其作为图像块插入，并自动将适当的属性和许可添加到标题中。这种体验比从 Openverse 网站下载然后上传到媒体库要快得多。

  

  在每个块的基础上添加自定义 CSS

  15.1 的另一个主要亮点是能够在每个块的基础上添加自定义 CSS。这可以通过站点编辑器中的全局样式菜单来完成。对于每个块，您可以添加自己的 CSS 以自定义块外观，方法是滚动到面板底部的“附加块 CSS”按钮。这些 CSS 编辑将应用于网站上块的所有实例。

  

  引入了对全局样式中阴影预设的支持

  Gutenberg 15.1 还引入了对全局样式中阴影预设的支持，有四种默认值（Natural、Crisp、Sharp 和 Softy），主题作者可以通过“theme.json”添加自定义预设。公告帖子包含一个演示新 UI 的视频：

  导航已添加到站点编辑器中的浏览模式侧栏

  在 15.1 中，导航已添加到站点编辑器中的浏览模式侧栏，因此用户可以快速访问他们的菜单和菜单项，通过拖放重新排列它们，或导航链接。

  此版本对版本 15.0中引入的“粘贴样式”功能进行了一些更改。块工具栏中的选项菜单现在显示“复制样式”和“粘贴样式”，以便更容易理解如何使用该功能，因为以前只有“复制样式”选项可用时不清楚。

  

  改进了站点编辑器加载状态

  Gutenberg 15.2改进了站点编辑器加载状态以实现更好的初始化。这是使站点编辑器准备好退出 Beta 的重要更新。它不是一个完整的解决方案，但通过以下更改使其更加完善，如 Riad Benguella 在 PR 中概述的那样：

  • 可以在具有“就绪”状态的组件中使用的 CanvasSpinner。因此，当这些组件未准备好时，将呈现微调器，而不是呈现空白页面。
  • 确保 iframe 默认具有“白色”背景，以避免在初始化期间切换太多背景颜色。

  这些只是其中的几个亮点。查看15.1 发布帖子，了解增强功能、错误修复、性能改进和工具更改的完整列表。

  声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

  2023年3月17日

• Gutenberg 15.1 添加了 Openverse 集成，新增区块自定义CSS

  Gutenberg 15.1于本周发布，在“媒体”选项卡中集成了 Openverse，新增基于每个区块的自定义CSS等。

  文章目录

  在“媒体”选项卡中集成了 Openverse

  开放许可和公共领域作品的 Openverse 资源库也已通过更新的设计移至其自己的网站。它包含超过 6 亿个免费使用的图像和音频文件，现在可以在 WordPress 的编辑器中使用：

  

  单击 Openverse 图像将立即将其作为图像块插入，并自动将适当的属性和许可添加到标题中。这种体验比从 Openverse 网站下载然后上传到媒体库要快得多。

  

  在每个块的基础上添加自定义 CSS

  15.1 的另一个主要亮点是能够在每个块的基础上添加自定义 CSS。这可以通过站点编辑器中的全局样式菜单来完成。对于每个块，您可以添加自己的 CSS 以自定义块外观，方法是滚动到面板底部的“附加块 CSS”按钮。这些 CSS 编辑将应用于网站上块的所有实例。

  

  引入了对全局样式中阴影预设的支持

  Gutenberg 15.1 还引入了对全局样式中阴影预设的支持，有四种默认值（Natural、Crisp、Sharp 和 Softy），主题作者可以通过“theme.json”添加自定义预设。公告帖子包含一个演示新 UI 的视频：

  导航已添加到站点编辑器中的浏览模式侧栏

  在 15.1 中，导航已添加到站点编辑器中的浏览模式侧栏，因此用户可以快速访问他们的菜单和菜单项，通过拖放重新排列它们，或导航链接。

  此版本对版本 15.0中引入的“粘贴样式”功能进行了一些更改。块工具栏中的选项菜单现在显示“复制样式”和“粘贴样式”，以便更容易理解如何使用该功能，因为以前只有“复制样式”选项可用时不清楚。

  

  改进了站点编辑器加载状态

  Gutenberg 15.2改进了站点编辑器加载状态以实现更好的初始化。这是使站点编辑器准备好退出 Beta 的重要更新。它不是一个完整的解决方案，但通过以下更改使其更加完善，如 Riad Benguella 在 PR 中概述的那样：

  • 可以在具有“就绪”状态的组件中使用的 CanvasSpinner。因此，当这些组件未准备好时，将呈现微调器，而不是呈现空白页面。
  • 确保 iframe 默认具有“白色”背景，以避免在初始化期间切换太多背景颜色。

  这些只是其中的几个亮点。查看15.1 发布帖子，了解增强功能、错误修复、性能改进和工具更改的完整列表。

  声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

  2023年3月17日

• Gutenberg 15.2 引入了模板编辑的修订

  Gutenberg 15.2 对模板编辑体验进行了经常要求的改进，让用户可以通过更高效、更直观的控件享受更好的编辑体验。可访问性改进和对块的额外控制支持也是值得注意的补充。

  编辑模板和模板部分时支持修订

  Gutenberg 15.2现在可以在编辑模板和模板部分时支持修订。如果您不熟悉站点编辑器，那么站点编辑器可能是一个令人生畏的地方。几次点击就会产生巨大的影响，一些用户将不知道如何返回到他们开始的地方。显示修订面板为用户提供了一个安全网。

  

  修订面板与内容编辑器的工作方式相同，因此它还没有提供用户添加、删除和更改的可视化表示。如果用户能够阅读块标记，则他们可以恢复模板的以前版本。

  对站点编辑器的导航进行了改进

  Gutenberg 15.2 还对站点编辑器的导航进行了改进。现在，只需在站点编辑器侧边栏中单击几下，就可以更轻松地深入到要编辑的确切模板，全局保存对导航、模板和模板部分的编辑，并更轻松地返回到仪表板。这些更改在发布帖子中发布的 GIF 中得到了最好的说明；

  

  此版本中的其他亮点包括：

  • 新增内容：发布特色图片块的 CSS 长宽比控制
  • Button 块中的新功能：支持边框颜色、样式和宽度
  • 辅助功能改进：改进标签、优化选项卡和箭头键导航，并确保标题的正确层次结构
  • Post Excerpt 块中的新功能：用于控制摘录长度的 UI
  • 最新评论块：添加排版支持

  查看15.2 发布帖子中的更改和错误修复的完整列表。此版本的 Gutenberg 将不会包含在即将发布的 WordPress 6.2 版本中。如果您等不及 6.3，现在可以通过安装Gutenberg 插件来获得这些功能。

  声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

  2023年3月17日

• Gutenberg 15.2 引入了模板编辑的修订

  Gutenberg 15.2 对模板编辑体验进行了经常要求的改进，让用户可以通过更高效、更直观的控件享受更好的编辑体验。可访问性改进和对块的额外控制支持也是值得注意的补充。

  编辑模板和模板部分时支持修订

  Gutenberg 15.2现在可以在编辑模板和模板部分时支持修订。如果您不熟悉站点编辑器，那么站点编辑器可能是一个令人生畏的地方。几次点击就会产生巨大的影响，一些用户将不知道如何返回到他们开始的地方。显示修订面板为用户提供了一个安全网。

  

  修订面板与内容编辑器的工作方式相同，因此它还没有提供用户添加、删除和更改的可视化表示。如果用户能够阅读块标记，则他们可以恢复模板的以前版本。

  对站点编辑器的导航进行了改进

  Gutenberg 15.2 还对站点编辑器的导航进行了改进。现在，只需在站点编辑器侧边栏中单击几下，就可以更轻松地深入到要编辑的确切模板，全局保存对导航、模板和模板部分的编辑，并更轻松地返回到仪表板。这些更改在发布帖子中发布的 GIF 中得到了最好的说明；

  

  此版本中的其他亮点包括：

  • 新增内容：发布特色图片块的 CSS 长宽比控制
  • Button 块中的新功能：支持边框颜色、样式和宽度
  • 辅助功能改进：改进标签、优化选项卡和箭头键导航，并确保标题的正确层次结构
  • Post Excerpt 块中的新功能：用于控制摘录长度的 UI
  • 最新评论块：添加排版支持

  查看15.2 发布帖子中的更改和错误修复的完整列表。此版本的 Gutenberg 将不会包含在即将发布的 WordPress 6.2 版本中。如果您等不及 6.3，现在可以通过安装Gutenberg 插件来获得这些功能。

  声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

  2023年3月17日

• WordPress 6.2 引入 search_columns 参数来控制在搜索查询中搜索哪些字段

  以前，WP_Query::parse_query()方法的s参数搜索post_title, post_excerpt, 和post_content字段，除了使用posts_search过滤器和手动调整 SQL外，无法控制这一点。

  WordPress 6.2 添加了使用search_columns参数指定在执行查询时搜索哪些字段的功能。

  目前，只允许使用默认的 post_title, post_excerpt 和 post_content 列，但它可能会在 WordPress 的后续版本中得到扩展。

  search_columns 参数的默认值为：array( 'post_title', 'post_excerpt', 'post_content' )。

  下面的示例将搜索在其摘要（post_excerp列）中包含 foo 的帖子，排除post_title和post_content列。

   'foo',
          'post_type'      => 'post',
          'search_columns' => array( 'post_excerpt' ),
      )
  );

  要了解更多信息，请查看这里。

  声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

  2023年3月17日

• WordPress 6.2 引入 search_columns 参数来控制在搜索查询中搜索哪些字段

  以前，WP_Query::parse_query()方法的s参数搜索post_title, post_excerpt, 和post_content字段，除了使用posts_search过滤器和手动调整 SQL外，无法控制这一点。

  WordPress 6.2 添加了使用search_columns参数指定在执行查询时搜索哪些字段的功能。

  目前，只允许使用默认的 post_title, post_excerpt 和 post_content 列，但它可能会在 WordPress 的后续版本中得到扩展。

  search_columns 参数的默认值为：array( 'post_title', 'post_excerpt', 'post_content' )。

  下面的示例将搜索在其摘要（post_excerp列）中包含 foo 的帖子，排除post_title和post_content列。

   'foo',
          'post_type'      => 'post',
          'search_columns' => array( 'post_excerpt' ),
      )
  );

  要了解更多信息，请查看这里。

  声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

  2023年3月17日

• WordPress 6.2 引入 HTML API 修改HTML标签和属性

  WordPress 6.2 引入了WP_HTML_Tag_Processor –一个供块作者在PHP中调整块标记中的HTML 标签属性的工具。它是新 HTML 处理API中的第一个组件。

  在 WordPress 中更新 HTML 一直需要使用不舒服的工具。正则表达式很困难并且容易出现各种错误。DOMDocument占用大量资源，无法正确处理现代 HTML，并且在许多托管平台上不可用。

  WP_HTML_Tag_Processor（标签处理器）迈出了弥合这一差距的第一步。

  标签处理器可以可靠地更新 HTML 属性

  标签处理器找到特定的标签并可以更改其属性。下面是在 HTML 块中的第一个img标签上设置alt属性的示例。

  $html = '';
   
  $p = new WP_HTML_Tag_Processor( $html );
   
  if ( $p->next_tag() ) {
      $p->set_attribute( 'alt', 'Husky in the snow' );
  }
   
  echo $p->get_updated_html();
   
  // Output:
  // 

  该next_tag()方法移动到 HTML 中的下一个可用标签，但也接受标签名称、CSS类或两者以查找特定标签。根据 HTML 规范，标签和属性名称的查找不区分大小写，但 CSS 类名称区分。

  if ( $p->next_tag( array( 'tag_name' => 'DIV', 'class_name' => 'block-GROUP' ) ) ) {
      $p->remove_class( 'block-group' );
      $p->add_class( 'wp-block-group' );
  }

  默认情况下操作是安全的：

  • 删除一个属性而不首先检查它是否存在，
  • 添加一个可能已经存在的 CSS 类，
  • 设置一个属性值而不确保它不会复制现有的值。

  您不再需要担心您的代码会将</code>, 和属性值中的内容，甚至是 HTML 注释中的内容误认为是真正的标签。</p> <p>标签处理器符合 HTML5 规范，因此您不必这样做。它会在必要时自动转义和解码值，并且知道如何处理格式错误的标签。</p> <pre class="wp-block-code"><code>$ugly_html = <<<HTML <textarea title='<div> elements are semantically void'> <div><!--<div attr-->="</div>"></div>">

  HTML; $p = new WP_HTML_Tag_Processor( $ugly_html ); if ( $p->next_tag( 'div' ) ) { $p->add_class( 'bold' ); } echo $p->get_updated_html(); // Output: // // <div><!--<div attr-->="</div>"></div>"> // //

  标签处理器的运行速度足以在关键的热代码路径中运行，并且几乎不会产生内存开销。在 WordPress 6.2 中，它取代了依赖正则表达式和字符串搜索来执行类似更新的容易出错的代码。

  要更高级地使用标签处理器，请阅读大量的课堂文档并学习如何……

  • …设置书签以重新访问已扫描和修改的文档部分。
  • …

  除了开始标签之外，还可以访问结束标签。

• …通过访问文档中的每个标签来运行高级和有状态的查询。

进一步的考虑

Tag Processor 不做很多事情：它不构建 DOM 文档树、查找嵌套标签或更新标签的内部 HTML 或内部文本。继续开发与 HTML 相关的新 API，未来的 WordPress 版本将建立在这项工作的基础上，以允许从 PHP 中访问块的所有属性（如果块提供block.json文件），使用 CSS 选择器查找标签，并修改HTML具有新标签、删除标签和更新的内部标记的结构。

您可以通过Gutenberg GitHub Repo上的这个概述问题跟上进一步的发展。