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-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>
}

弃用wordpress/nux

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

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