弃用Meta 属性源

WordPress 5.4弃用了Meta属性源(Meta attribute sources)。

使用这些属性的现有代码仍然可以使用,但是有一种新的方式可以作为替换。

可使用EntityProvider和相关的挂钩API来代替Meta属性EntityProvider以及相关的钩子API提供了一种更灵活,更强大的方法来构建块,这些块可从WordPress实体和数据的各种属性中获取数据。

这是您的图块对象如何允许读取和写入文章的meta元数据的方法:

const [meta, setMeta] = useEntityProp(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'postType\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'post\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'meta\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

简码转换:支持isMatch谓语

为了使简码与其他类型的块转换保持一致,您可以添加可选函数isMatch,以查看给定的短代码是否应转换为特定的块。

例如,此假设的南极天气块仅关心的简码 [weather] :

transforms: {  from: [{ type: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'shortcode\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', tag: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'weather\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', isMatch( { named: { latitude } } ) {  return parseInt( latitude, 10 ) < -70; }, attributes: {  latitude: {type: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'number\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',shortcode: ( { named: { latitude } } ) => parseInt( latitude, 10 ),  },  longitude: {type: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'number\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',shortcode: ( { named: { longitude } } ) => parseInt( longitude, 10 ),  }, },},  ], },

如果isMatch返回false,则简码将不会成为南极洲天气块。那时,另一种块类型可以将其拾取(大概是与[weather]简码匹配的一种),也可以保留简码并封装在简码块中。

新的AsyncModeProvider API

因为没有人希望在编辑器中输入缓慢的内容,所以BlockEditor使用Async Rendering模式:每次更改都会同步重新渲染选定的块-而未选定的块仅在浏览器空闲时(即,当它不主动执行某些任务时)刷新。

该行为来自于wordpress/data包中实现的异步模式

在WordPress 5.4中,您可以使用相同的异步行为来加快自己的React状态树中的速度,只要它们依赖数据模块即可。

那是因为WordPress 5.4将AsyncModeProvider组件放在可以找到并使用它的位置,或者相反,使用它,因为您还可以使用它选择退出块异步呈现模式。

import { AsyncModeProvider } from \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'@wordpress/data\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'; const MyComponent = () => {return (  <>The following component updates synchronously on data store changes<MySyncComponent /><AsyncModeProvider value={ true }> The following component updates asynchronously on data store changes <MyAsyncComponent /></AsyncModeProvider>  </>); }

有关AsyncMode的更多信息,可以查看此博客文章。

块编辑器中的自定义媒体上载处理程序。在设置中!

你知道吗?您可以单独使用wordpress/block-editor包,就可以在几乎任何位置添加块编辑器页面。可以将其用于自定义后台页面,甚至可以在完全与WordPress无关的上下文中使用。

这是古腾堡游乐场的一个例子。在这种情况下,WordPress 5.4允许您将自定义媒体上传处理程序添加到块编辑器中作为设置!(您的一个用户现在可能想要这个

import { BlockEditorProvider } from \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'@wordpress/block-editor\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\';/**  * Media Upload Handler  *  * @param{Object}$0 Parameters object passed to the function.  * @param{?Object}  $0.additionalData Additional data to include in the request.  * @param{string}$0.allowedTypesArray with the types of media that can be uploaded, if unset all types are allowed.  * @param{Array} $0.filesListList of files.  * @param{?number}  $0.maxUploadFileSize Maximum upload size in bytes allowed for the site.  * @param{Function} $0.onError  Function called when an error happens.  * @param{Function} $0.onFileChangeFunction called each time a file or a temporary representation of the file is available.  */ const myMediaUploadHandler = ( settings ) => { const mediaObject = { id, alt, caption, title, url, };  settings.onFileChange([mediaObject]); }const MyCustomEditor = () => {return (<BlockEditorProvider settings={ { mediaUpload: myMediaUploadHandler  } }> <MyEditorLayout /></BlockEditorProvider>); }

现在,认识到这一点:如果将媒体上传处理程序放在BlockEditor实例之外,那么编辑器将根本不支持媒体上传。或者,它可能不允许当前用户使用其当前权限上传媒体。

您还可以在其edit方法中授予Media Blocks访问此设置的权限,以便它们可以支持上传。

const MyBlockEdit = () => { const mediaUpload = useSelect( ( select ) => { return select( \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'core/block-editor\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' ).getSettings().mediaUpload; }, [] );return ( <>{ !! mediaUpload && <MyMediaUploadComponent onUpload={ mediaUpload } /> }  </> ); < }

轻松拖放

您是否会抱怨拖放就像摇摆与失误?在WordPress 5.4中,拖放操作将变得更加容易。

这是因为在DropZone组件渲染的定位类(is-close-to-topis-close-to-bottomis-close-to-leftis-close-to-right)都不见了。

实际上,拖放区已经不存在。因此,用户有一个更大的目标来抓住要移动的块。更轻松的抓取,更轻松的拖动。

随着拖放区的退出,editor.BlockDropZone组件过滤器也消失了。该过滤器原本应该过滤通过拖放发生的媒体上传,但是似乎做得不好。

富文本RichText:套用格式时不要设定焦点

当您在RTF实例中设置文本格式时,看到焦点自动返回到可编辑元素会感到烦恼吗?您的用户是否抱怨这种行为?

好吧,开心点!为了支持更复杂的UI,为了使您的用户更好地控制RTF实例(例如,颜色控件:谁希望每次更改颜色都必须单击回到颜色UI?),焦点将停留在您(或您的用户)一直工作到所有颜色更改或其他操作完成。

当然,这意味着如果您确实想继续将焦点移回原处,例如,单击按钮后,则必须在注册格式类型时主动实现这一点。

您将需要使用edit组件的新方法 onFocus 来完成此操作。

例如,这是使用粗体格式按钮的方式:

https://github.com/WordPress/gutenberg/blob/c5eb9626dc1c73ad9bc543a5d171e9ab4a840996/packages/format-library/src/bold/index.js#L21-L53

新指南组件

新的Guide组件已添加到@wordpress/components包(wp.components.Guide)中。Guide使开发人员可以轻松地创建逐步指南以向用户显示。块编辑器用于Guide实现首次启动时出现的新欢迎模式。

Guide是一个React组件,以模式形式呈现用户指南。该指南由几个GuidePage组件组成,用户可以一步一步地进行操作。当关闭模态或用户单击指南最后一页上的“完成”时,指南完成。

function MyTutorial() {  const [ isOpen, setIsOpen ] = useState( true ); if ( ! isOpen ) {return null;  } <Guide onFinish={ () => setIsOpen( false ) }><GuidePage> <p>Welcome to the ACME Store! Select a category to begin browsing our wares.</p></GuidePage><GuidePage> <p>When you find something you love, click <i>Add to Cart</i> to add the product to your shopping cart.</p></GuidePage>  </Guide> }

弃用wordpress/nux

@wordpress/nux封装的(wp.nux),以及和它一起的DotTip都已被弃用。导入软件包将在浏览器控制台中显示警告。建议插件开发者将wp.nuxDotTip都迁移到Guide

更多WordPress 5.4 的更新,请看: https://www.wpdaxue.com/tag/wordpress-5.4

相关新闻

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

151-1101-0018

在线咨询:
邮件:30115776@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部