WordPress 5.4 對(duì)古騰堡編輯器 Block Editor API 常規(guī)更新

棄用Meta 屬性源

WordPress 5.4棄用了Meta屬性源（Meta attribute sources）。

使用這些屬性的現(xiàn)有代碼仍然可以使用，但是有一種新的方式可以作為替換。

可使用EntityProvider和相關(guān)的掛鉤API來(lái)代替Meta屬性。 EntityProvider 以及相關(guān)的鉤子API提供了一種更靈活，更強(qiáng)大的方法來(lái)構(gòu)建塊，這些塊可從WordPress實(shí)體和數(shù)據(jù)的各種屬性中獲取數(shù)據(jù)。

這是您的圖塊對(duì)象如何允許讀取和寫(xiě)入文章的meta元數(shù)據(jù)的方法：

const [meta, setMeta] = useEntityProp('postType', 'post', 'meta')

簡(jiǎn)碼轉(zhuǎn)換：支持isMatch謂語(yǔ)

為了使簡(jiǎn)碼與其他類(lèi)型的塊轉(zhuǎn)換保持一致，您可以添加可選函數(shù)isMatch，以查看給定的短代碼是否應(yīng)轉(zhuǎn)換為特定的塊。

例如，此假設(shè)的南極天氣塊僅關(guān)心的簡(jiǎn)碼 [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，則簡(jiǎn)碼將不會(huì)成為南極洲天氣塊。那時(shí)，另一種塊類(lèi)型可以將其拾取（大概是與[weather]簡(jiǎn)碼匹配的一種），也可以保留簡(jiǎn)碼并封裝在簡(jiǎn)碼塊中。

新的AsyncModeProvider API

因?yàn)闆](méi)有人希望在編輯器中輸入緩慢的內(nèi)容，所以BlockEditor使用Async Rendering模式：每次更改都會(huì)同步重新渲染選定的塊-而未選定的塊僅在瀏覽器空閑時(shí)（即，當(dāng)它不主動(dòng)執(zhí)行某些任務(wù)時(shí)）刷新。

該行為來(lái)自于wordpress/data包中實(shí)現(xiàn)的  異步模式。

在WordPress 5.4中，您可以使用相同的異步行為來(lái)加快自己的React狀態(tài)樹(shù)中的速度，只要它們依賴數(shù)據(jù)模塊即可。

那是因?yàn)閃ordPress 5.4將  AsyncModeProvider  組件放在可以找到并使用它的位置，或者相反，不使用它，因?yàn)槟€可以使用它選擇退出塊異步呈現(xiàn)模式。

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>
    </>
  );
}

有關(guān)AsyncMode的更多信息，可以查看此  博客文章。

塊編輯器中的自定義媒體上載處理程序。在設(shè)置中！

你知道嗎？您可以單獨(dú)使用wordpress/block-editor包，就可以在幾乎任何位置添加塊編輯器頁(yè)面。可以將其用于自定義后臺(tái)頁(yè)面，甚至可以在完全與WordPress無(wú)關(guān)的上下文中使用。

這是古騰堡游樂(lè)場(chǎng)的一個(gè)例子。在這種情況下，WordPress 5.4允許您將自定義媒體上傳處理程序添加到塊編輯器中作為設(shè)置！（您的一個(gè)用戶現(xiàn)在可能想要這個(gè)。）

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

現(xiàn)在，認(rèn)識(shí)到這一點(diǎn)：如果將媒體上傳處理程序放在BlockEditor實(shí)例之外，那么編輯器將根本不支持媒體上傳。或者，它可能不允許當(dāng)前用戶使用其當(dāng)前權(quán)限上傳媒體。

您還可以在其edit方法中授予Media Blocks訪問(wèn)此設(shè)置的權(quán)限，以便它們可以支持上傳。

const MyBlockEdit = () => {
   const mediaUpload = useSelect( ( select ) => {
      return select( 'core/block-editor' ).getSettings().mediaUpload;
   }, [] );
 
   return (
      <>
           { !! mediaUpload && <MyMediaUploadComponent onUpload={ mediaUpload } /> }
       </>
   );
   <
}

輕松拖放

您是否會(huì)抱怨拖放就像搖擺與失誤？在WordPress 5.4中，拖放操作將變得更加容易。

這是因?yàn)樵?nbsp; DropZone 組件渲染的定位類(lèi)（is-close-to-top，  is-close-to-bottom，  is-close-to-left 和  is-close-to-right）都不見(jiàn)了。

實(shí)際上，拖放區(qū)已經(jīng)不存在。因此，用戶有一個(gè)更大的目標(biāo)來(lái)抓住要移動(dòng)的塊。更輕松的抓取，更輕松的拖動(dòng)。

隨著拖放區(qū)的退出，editor.BlockDropZone 組件過(guò)濾器也消失了。該過(guò)濾器原本應(yīng)該過(guò)濾通過(guò)拖放發(fā)生的媒體上傳，但是似乎做得不好。

富文本RichText：套用格式時(shí)不要設(shè)定焦點(diǎn)

當(dāng)您在RTF實(shí)例中設(shè)置文本格式時(shí)，看到焦點(diǎn)自動(dòng)返回到可編輯元素會(huì)感到煩惱嗎？您的用戶是否抱怨這種行為？

好吧，開(kāi)心點(diǎn)！為了支持更復(fù)雜的UI，為了使您的用戶更好地控制RTF實(shí)例（例如，顏色控件：誰(shuí)希望每次更改顏色都必須單擊回到顏色UI？），焦點(diǎn)將停留在您（或您的用戶）一直工作到所有顏色更改或其他操作完成。

當(dāng)然，這意味著如果您確實(shí)想繼續(xù)將焦點(diǎn)移回原處，例如，單擊按鈕后，則必須在注冊(cè)格式類(lèi)型時(shí)主動(dòng)實(shí)現(xiàn)這一點(diǎn)。

您將需要使用edit組件的新方法 onFocus 來(lái)完成此操作。

例如，這是使用粗體格式按鈕的方式：

https://github.com/WordPress/gutenberg/blob/c5eb9626dc1c73ad9bc543a5d171e9ab4a840996/packages/format-library/src/bold/index.js#L21-L53

新指南組件

新的Guide組件已添加到@wordpress/components包（wp.components.Guide）中。Guide使開(kāi)發(fā)人員可以輕松地創(chuàng)建逐步指南以向用戶顯示。塊編輯器用于Guide實(shí)現(xiàn)首次啟動(dòng)時(shí)出現(xiàn)的新歡迎模式。

Guide是一個(gè)React組件，以模式形式呈現(xiàn)用戶指南。該指南由幾個(gè)GuidePage組件組成，用戶可以一步一步地進(jìn)行操作。當(dāng)關(guān)閉模態(tài)或用戶單擊指南最后一頁(yè)上的“完成 ”時(shí)，指南完成。

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都已被棄用。導(dǎo)入軟件包將在瀏覽器控制臺(tái)中顯示警告。建議插件開(kāi)發(fā)者將wp.nux和DotTip都遷移到Guide。

更多WordPress 5.4 的更新，請(qǐng)看： http://www.ydqwiac.cn/tag/wordpress-5.4