◆◆0

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

黛云轩 2020/06/03 WordPress资讯 710 0 百度已收录

弃用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-top，is-close-to-bottom，is-close-to-left和is-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> }