WordPress 5.7 中新的區(qū)塊變體API

新屬性 isActive

塊變體設(shè)置現(xiàn)在可以包含一個(gè)新屬性 isActive。此可選屬性是一個(gè)功能，古騰堡編輯器使用該功能來確定給定塊的變化形式。這意味著諸如的塊編輯器界面，比如BlockCard可以顯示塊變體的標(biāo)題和描述，而不是塊的標(biāo)題和描述。

我們需要此功能由塊/插件作者顯式實(shí)現(xiàn)，因?yàn)樵谠S多情況下，通過動(dòng)態(tài)檢查所有塊屬性來嘗試找到匹配項(xiàng)是沒有意義的。一個(gè)例子是 embed 我們可能已經(jīng)更改了響應(yīng)屬性塊，因此找不到匹配項(xiàng)。

單個(gè)塊變體中的示例：

const variations = [
     {
         name: 'wordpress',
         title: 'WordPress',
         keywords: [ ( 'post' ), ( 'blog' ) ],
         description: __( 'Embed a WordPress post.' ),
         attributes: { providerNameSlug: 'wordpress' },
         isActive: ( blockAttributes, variationAttributes ) =>
             blockAttributes.providerNameSlug ===
             variationAttributes.providerNameSlug,
     },
 ];

所有變體都使用相同的匹配函數(shù)時(shí)的示例：

const variations = [
     {
         name: 'twitter',
         title: 'Twitter',
         icon: embedTwitterIcon,
         keywords: [ 'tweet', ( 'social' ) ],         description: ( 'Embed a tweet.' ),
         patterns: [ /^https?:\/\/(www.)?twitter.com\/.+/i ],
         attributes: { providerNameSlug: 'twitter', responsive: true },
     },
     {
         name: 'wordpress',
         title: 'WordPress',
         icon: embedWordPressIcon,
         keywords: [ ( 'post' ), ( 'blog' ) ],
         description: __( 'Embed a WordPress post.' ),
         attributes: { providerNameSlug: 'wordpress' },
     },
 ];
 variations.forEach( ( variation ) => {
     if ( variation.isActive ) return;
     variation.isActive = ( blockAttributes, variationAttributes ) =>
         blockAttributes.providerNameSlug ===
         variationAttributes.providerNameSlug;
 } );
 export default variations;

新鉤子 useBlockDisplayInformation

useBlockDisplayInformation 是一個(gè)新的掛鉤，它返回有關(guān)塊的顯示信息。它考慮了每個(gè)塊變量的isActive屬性。它返回塊變化或塊的 title， icon 和 description。

如果找不到塊變化匹配，則返回的信息將來自塊類型。如果未找到塊類型，則返回null。

用法示例：

import { useBlockDisplayInformation, BlockIcon } from '@wordpress/block-editor';
 function myBlockInformation( clientId ) {
     const blockInformation = useBlockDisplayInformation( clientId );
     if ( ! blockInformation ) return null;
     const { title, icon, description } = blockInformation;
     return (
         
                          { title }
             { description }         

     );
 }