Loading
0

WordPress 5.4 对古腾堡编辑器 Block Editor API 常规更新

弃用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.allowedTypes      Array with the types of media that can be uploaded, if unset all types are allowed.  * @param   {Array}    $0.filesList         List 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.onFileChange      Function 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