WordPress 5.4计划于2020年3月31日发布。现在我们使用WordPress 5.4 RC1,不再需要提交和添加新功能请求。

因此,是时候该深入探究WordPress 5.4带来的最有趣的新功能和更改了。

首先,WordPress 5.4为块编辑器带来了许多功能,改进和错误修复,并且大量的Gutenberg插件版本合并到了内核中。这些更改会影响功能和用户界面,从而改善编辑人员的可访问性/可用性和总体上的编辑体验。

只需移至Kinsta,即可将WordPress网站的速度提高200%。
        
          今天免费迁移

除编辑器外,WordPress 5.4在站点运行状况工具和REST API中引入了有趣的改进,而WordPress 5.4预期提供的一些功能已延迟,应与下一版WordPress 5.5捆绑到Core中(请参阅Native Lazy)。正在加载图片和导航块)。

您可能要保存WordPress 5.4开发周期中的以下日期和链接:

  • 2020年2月11日:Beta 1
  • 2020年2月18日:Beta 2
  • 2020年2月25日:Beta 3
  • 2020年3月3日:RC 1
  • 2020年3月10日:RC 2
  • 2020年3月17日:RC 3
  • 2020年3月24日:RC 4
  • 2020年3月30日:试运行WordPress 5.4版本
  • 2020年3月31日:WordPress 5.4发布的目标日期

那么,使用WordPress 5.4的WordPress有哪些新功能?

块编辑器的新增功能

从6.6到7.5,大量的Gutenberg插件版本已合并到内核中。因此,如果您不使用Gutenberg插件,则在升级到WordPress 5.4时,您会在块编辑器中找到大量新功能,增强功能和错误修复。

但是,编辑器中的功能块和功能不止于此,据报告总体性能得到改善:

自WordPress 5.3以来,一个特别大的文章(〜36,000字,〜1,000个块)使块编辑器团队的加载时间减少了14%,打字时间减少了51%。

那是很多很棒的东西,所以让我们深入。

  • 块编辑器的新功能和增强功能
  • 主题和块开发人员的块编辑器更改
  • 附加功能

块编辑器的新功能和增强功能

我们可能会同意以下事实,即块编辑器仍在开发中,但是WordPress 5.4带来了许多更改,从而改善了编辑器在台式机和移动设备上的可用性。

其中一些更改与界面严格相关,包括默认情况下启用的全屏模式,改进的块选择,轻松在编辑模式和选择模式之间切换,固定的移动工具栏以及用于块导航的面包屑。两个新块和其他选项设置为编辑器增加了更多功能。

以下是WordPress 5.4附带的我们最喜欢的块编辑器的功能和改进的快速列表:

  • 新的社交图标块
  • 新按钮块
  • 欢迎指南模式
  • 默认启用全屏模式
  • RichText块中的内联文本颜色支持
  • 多个块的其他颜色选项
  • 最新帖子块中的特色图片
  • 用于块导航的新面包屑栏

新的社交图标块

最初称为“社交链接”,“社交图标”块使作者可以快速添加带有指向社交资料的链接的图标,并提供大量可供选择的社交图标子块。该块已经试验了一段时间,自古腾堡7.5开始稳定。

社会图标块

“社交图标”块提供了三种用于可视化自定义的预定义样式:默认,仅徽标和药丸形状。

社会图标样式

自从它们在Gutenberg 6.5中作为实验功能首次引入(并合并到WordPress 5.3中)以来,社交图标已添加到Gutenberg 7.5中,如果您运行的是过时的Gutenberg插件版本,它们可能无法按预期工作。

根据Jorge Costa所说,有两种方法可以防止“社交图标”出现问题:

  • 手动使用“社交图标”迁移任何内容:更新到WordPress 5.4,将帖子加载到块编辑器中并保存。社交图标将自动迁移到新版本。

  • 升级至WordPress 5.4时,请保持安装古腾堡(Gutenberg)插件:该插件具有向后兼容性,您应该不会遇到任何问题。

新按钮块

在Gutenberg 7.2中添加到块编辑器中的Buttons块替换了单个Button块,并允许WordPress用户在同一块容器中向其内容添加更多按钮。

新的按钮块

单个按钮具有两种预设样式供您选择,还有几个其他选项可用于微调按钮的外观。

WordPress 5.4中的按钮设置

使用WordPress 5.4,由于添加了渐变背景,网站所有者可以更深入地控制号召性用语的外观和感觉,并且还提供了一些渐变预设,可供站点管理员用作进一步自定义的起点。

改进了按钮的颜色功能

欢迎指南模式

WordPress 5.4添加了一个全新的Welcome幻灯片,其中提供了有关块编辑器的基本信息以及在线文档的链接(Gutenberg 7.1中已添加)。

欢迎指南模态

该模态仅在更新至5.4之后才可见。如果您想再次触发它,只需从右上方的按钮打开“更多工具和选项”菜单,然后找到“欢迎使用指南”链接。

欢迎光临

默认启用全屏模式

从WordPress 5.4开始,编辑器默认在新安装和新设备中以全屏模式打开。您可以通过单击“更多工具和选项”菜单来打开/关闭全屏模式,如下图所示。

在WordPress 5.4中默认启用全屏模式

目前,此首选项存储在本地,这意味着当您以隐身模式访问网站时,首选项会随时随地被覆盖。将来,此首选项将存储在数据库中,从而使用户选择在任何情况下都保持不变。

请注意,对于默认情况下将编辑器设置为全屏模式的决定,对于初学者和非高级用户而言,可能会造成混淆,因此并未获得一致通过。如果您想在全屏模式下更多地了解人们的担忧,请查看此帖子上的评论。

块编辑器开发人员可以使用几行JavaScript以编程方式控制全屏模式:

const isFullscreenMode = wp.data.select(’core / edit-post’).isFeatureActive(’fullscreenMode’);

如果(isFullscreenMode){
wp.​​data.dispatch(’core / edit-post’).toggleFeature(’fullscreenMode’);
}
RichText块中的内联文本颜色支持

如果您通常写长篇文章,则应该感谢内联文本颜色支持。在此更新之前,我们被迫在HTML模式下对富文本块进行硬编码,以更改单个单词和字符串的颜色。

RichText颜色选项

从WordPress 5.4开始,我们可以在RichText块中选择单词和子字符串,并使用内置的颜色选择器快速更改其颜色。

RichText颜色选择器

多个块的其他颜色选项

WordPress 5.4在块编辑器中添加了许多与颜色相关的功能和增强功能。如上所述,我们不再局限于纯色。现在有几个块支持渐变背景和预定义的渐变集。

这是一些与颜色相关的增强功能的快速列表:

  • 对Buttons块的渐变背景支持(Gutenberg 6.7)。
  • 对Cover块的渐变背景支持(Gutenberg 6.8)。
  • 支持Group块的文本颜色(Gutenberg 7.4和7.5):嵌套块现在可以从其父Group块继承文本颜色。
  • Columns块的文本和背景颜色支持(Gutenberg 7.4和7.5)。

带有预设渐变背景的封面

最新帖子块中的特色图片

块编辑器的另一个引人注目的新增功能是对“最新帖子”块(Gutenberg 7.5)中的特色图像的支持。

随着时间的推移,这只是对“最新帖子”功能块进行的多项改进中的最新功能,这标志着“更复杂的动态或全局功能块”又迈出了一步。

最新帖子块

使用WordPress 5.4,“最新帖子”块允许您从特定类别中提取帖子,但不允许您按类别/标签/帖子类型和/或包含/排除单个帖子来构建更高级的查询。

我们希望将来能在此模块上看到更多增强。

用于块导航的新面包屑栏

自6.7版起,古腾堡(Gutenberg)用户可用,现已合并到Core中,新的面包屑栏旨在简化嵌套块导航。

下图显示了几个嵌套块,并在底部显示了新的面包屑菜单。

新的面包屑菜单

主题和块开发人员的块编辑器更改

主题和块开发人员应注意WordPress 5.4带给块编辑器的许多更改。这些更改包括:

  • 块编辑器键盘快捷键
  • 渐变主题API
  • 块编辑器上的标记和样式更改
  • 砌块脚手架
  • 块集合
  • 块变体

块编辑器键盘快捷键

块开发人员和高级用户现在可以将自定义快捷方式添加到块编辑器中。

引入了一个名为@ wordpress / keyboard-shortcuts的新程序包,用于集中注册,删除和编辑编辑器快捷方式的文档。

开发人员可以通过以下方式调用registerShortcut操作来添加其自定义快捷方式:

wp.​​data.dispatch(’core / keyboard-shortcuts’).registerShortcut({

//快捷方式标识符
名称:“ plugin / shortcut-test”,

//快捷方式类别(可能的值是全局值,块,选择)
类别:“全球”,

//快捷方式说明
描述:“我的第一个捷径”,

//触发快捷键的组合键
keyCombination:{

//可用的修饰符:
// primary,primaryShift,primaryAlt,
//次要,access,ctrl,alt,
// ctrlShift,shift,shiftAlt
修饰符:“ alt”,
字符:“ w”,
},

//组合键的别名
别名: [
{
modifier: ‘primary’,
character: ‘q’,
},
],
});

这会将自定义快捷方式自动添加到编辑器右上角“更多工具和选项”按钮下可用的快捷方式模态。

自定义全局块编辑器快捷方式已添加

然后,我们可以使用useShortcut函数附加键盘快捷键处理程序:

从’@ wordpress / keyboard-shortcuts’导入{useShortcut};
从’@ wordpress / element’导入{useCallback};

const MyComponent =()=> {
useShortcut(

“插件/快捷测试”,

useCallback(
(事件)=> {
// 做点什么
},
[]

);
}

您可以在Make WordPress Core博客上阅读有关键盘快捷键的更多信息。

渐变主题API

WordPress 5.4引入了渐变背景以及一些Buttons和Cover块的预设。这要归功于新的Gradient Theme API。

新的API提供了editor-gradient-presets主题支持选项,该选项允许主题开发人员覆盖默认预设并定义自己的预设:

add_theme_support(
“编辑器梯度预设”,
数组(
数组(
‘name’=> __(’CadetBlue to Chartreuse’,’themeLangDomain’),
‘gradient’=>’linear-gradient(135deg,rgba(95,158,160,1)0%,rgb(127,255,0)100%)’,
‘slug’=>’cedetblue-chartreuse’
),
数组(
‘name’=> __(’Chocolate to Coral’,’themeLangDomain’),
‘gradient’=>’linear-gradient(135deg,rgba(210,105,30,1)0%,rgba(255,127,80,1)100%)’,
‘子弹’=>’巧克力到珊瑚’,
),
数组(
‘名称’=> __(’DarkMagenta到DarkOrchid’,’themeLangDomain’),
‘gradient’=>’linear-gradient(135deg,rgb(139,0,139)0%,rgb(153,50,204)100%)’,
‘slug’=>’darkmagenta-to-darkorchid’,
),
数组(
‘名称’=> __(’DeepSkyBlue到DodgerBlue’,’themeLangDomain’),
‘gradient’=>’linear-gradient(135deg,rgba(0,191,255,1)0%,rgba(30,144,255,1)100%)’,
‘slug’=>’deepskyblue-to-dodgerblue’,
),

);

WordPress 5.4中的自定义渐变预设

  • 名称:工具提示的有意义标签,提供有关渐变的信息。这对于屏幕阅读器和难以区分某些颜色的用户特别有用。

  • 渐变:渐变的CSS值。

  • slug:标识符,用于生成块编辑器中使用的CSS类。

自定义渐变预设

您可以使用disable-custom-gradients theme-support选项禁用自定义渐变:

add_theme_support(’disable-custom-gradients’);

可以使用disable-custom-gradients和editor-gradient-presets完全删除渐变功能:

add_theme_support(’disable-custom-gradients’);
add_theme_support(’editor-gradient-presets’,array());
块编辑器上的标记和样式更改

WordPress 5.4引入了主题开发人员应注意的一些DOM结构更改。

  • 传统的编辑器类前缀已从块编辑器脚本中删除,现在开发人员仅应使用block-editor-前缀。
  • edit-post-layout__content类已从块编辑器的DOM中删除。
  • 几个div包装器已从块和RicheText中移除,作为冗余。此更改带来了显着的性能改进,并简化了DOM树,块和主题开发人员应对此予以赞赏。
  • 块填充和负边距已消失。块样式应相应更改。

有关DOM和CSS更改的详细视图,请参阅WordPress 5.4中与标记和样式相关的更改

砌块脚手架

借助用于块脚手架的新@ wordpress / create-block软件包,开发人员拥有一种为块编辑器插件生成目录结构的新方法。该结构通常包括index.php,index.js和style.css。

块开发人员现在可以简单地运行以下命令:

$ npm init @ wordpress / block块名
块集合

块集合提供了一种在块编辑器插入程序中直观地分组块集合的方法。集合与类别不同,并且为分组块提供了另一种方式。

新的API提供了一个新功能:

registerBlockCollection(名称空间,{标题,​​图标});

  • 名称空间:与块前缀匹配。

  • 标题:这是块插入器中显示的标签。

  • 图标:这是在块插入器中带有标题显示的图标。

新的API在Gutenberg 7.3中引入,现已合并到核心中,使主题和块开发人员可以更好地组织块,从而使用户更容易发现内容并将其添加到内容中。

块变体

块变体API提供了一组功能,允许块开发人员添加/管理/删除将块添加到内容时用户可以选择的块变体。注册新版本非常简单(JS代码):

wp.​​blocks.registerBlockVariation(’core / heading’,{
名称:“绿色文字”,
标题:“绿色文字”,
描述:“此区块为绿色文字。它会覆盖默认描述。’,
属性:{
内容:“绿色文字”,
textColor:“鲜绿色青色”
},
图标:“ palmtree”,
范围: [ ‘inserter’ ]
});

  • blockName:块的名称(即核心/标题)。

  • 变体:描述块类型的变体的对象。

  • 名称:(字符串)变体的唯一标识符。

  • title :(字符串)人类可读的变体标题。

  • description :(字符串)详细描述。

  • [icon]:(WPIcon)在块插入器中显示的图标。
  • [isDefault]:(布尔值)当前版本是否为默认版本。默认为false。
  • [attributes]:覆盖块属性的(对象)值。
  • [innerBlocks]:(数组[])嵌套块的初始配置。
  • [example]:(对象)块预览的结构化数据。设置为undefined可禁用预览。
  • [scope]:((WPBlockVariationScope[])适用于该版本的范围的列表。如果未提供,则假定所有可用范围。可用选项:块,插入器。

标题栏变化

有关Block Variations API的详细信息,请参阅PR#20068。

WordPress 5.4附带的其他块编辑器功能

WordPress 5.4捆绑在核心中的其他显着功能包括:

  • 在编辑和导航模式之间直观切换的菜单(7.1)

在编辑选择模式之间切换

  • 为表格块添加了标题(7.1)

WordPress 5.4中带有标题的表

  • 将图像拖放到“特色图像”框中(7.1)

拖放特色图片

  • 固定版移动版工具栏(7.1)

固定块工具栏在手机上

  • 在图库块(7.2)中添加了图像尺寸选择器

图库块设置

  • 在媒体和文本块(7.2)中添加了指向图像的链接

在媒体和文本块中添加指向图像的链接

WordPress开发人员的功能和改进

开发人员应该从WordPress 5.4附带的几个新功能中受益。

我们最喜欢的更改包括:

  • 语义正确的日历小部件和新的CSS类
  • PHP脚本中的简码
  • WordPress 5.4中Favicon处理的增强
  • 新钩子将自定义字段添加到菜单项
  • 开发人员的其他变更

语义正确的日历小部件和新的CSS类

HTML 5.1规范更改了表中必须使用tfoot元素的方式。在HTML 5.1之前,tfoot元素可以在tbody元素之前。新的规范改变了事情,现在脚步必须跟随脚步。

旧日历小部件

WordPress日历小部件会相应更改。从WordPress 5.4开始,导航链接移至日历表之外的nav元素。

考虑到nav是任何比赛中导航链接的最合适的HTML元素,并且这有助于改善屏幕阅读器的可访问性,因此这是一个期待已久的更改。根据Mozilla文档:

一个文件可能有几个

此外,在get_calendar()中引入了以下CSS类,以便于定位:

  • 表元素的wp-calendar-table。

  • wp-calendar-nav用于nav元素。

  • 上个月的wp-calendar-nav-prev链接,替换为#prev ID。

  • 下个月的wp-calendar-nav-next链接,替换为#next ID。

下面的代码段显示了新日历的HTML结构:


2020年2月