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

发表评论

Crypto logo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus cursus rutrum est nec suscipit. Ut et ultrices nisi. Vivamus id nisl ligula. Nulla sed iaculis ipsum.

Contact

Company Name

Address