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.nuxDotTip都迁移到Guide

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

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
欢迎关注我们的微信公众号:WPDAXUE

倡萌

一个文科IT宅男,喜欢折腾WordPress和被它折腾 ^_^

2 条评论

  1. 更新失败。错误信息:此响应不是合法的JSON响应。
    有什么办法不禁用古腾堡编辑器,仍然可以解决此问题

    1. 出现这个问题,首先你要排除插件和主题的兼容问题,也就是禁用所有插件,然后看下问题是否解决;如果没有,切换为WP自带主题,看是否解决。如何其中某一步解决了,说明是插件或主题的问题,逐一排查;如果这些操作都不能解决,自己回想下是否问题出在了启用https以后,如果是,可能是你没有彻底将http切换为https

发表评论