WordPress 5.3 新增古騰堡區(qū)塊樣式和示例 API

除了針對古騰堡編輯器的許多改進和功能外，WordPress 5.3還為開發(fā)人員提供了新的與區(qū)塊相關的API。

服務器端塊樣式變化API

包含了服務器端幫助程序來簡化注冊和取消注冊區(qū)塊樣式。

以前，為了注冊區(qū)塊樣式，需要編寫一個JavaScript腳本來執(zhí)行注冊并確保腳本已正確排隊引入。在WordPress 5.3，你可以在整個過程中使用PHP函數(shù)register_block_style和unregister_block_style來操作。

register_block_style

register_block_style 函數(shù)將區(qū)塊的名稱作為第一個參數(shù)，將描述樣式屬性的數(shù)組作為第二個參數(shù)。

樣式數(shù)組的屬性必須包含名稱和標簽（ label ）：

• name：用于計算CSS類的樣式的標識符。
• label：可供人識別的名稱。

除了兩個必需屬性之外，styles 屬性數(shù)組還應包括 inline_style 或 style_handle 屬性：

• inline_style：包含內聯(lián)CSS代碼，用于注冊樣式所需的CSS類。
• style_handle：包含已注冊樣式的句柄（handle），該樣式應在需要區(qū)塊樣式的地方排隊引入。

下面的代碼示例為名為“ Blue Quote”的引用區(qū)塊注冊了一種樣式，并提供了一種內聯(lián)樣式，使“ Blue Quote”樣式的引用區(qū)塊具有藍色：

register_block_style(
    'core/quote',
    array(
        'name'         => 'blue-quote',
        'label'        => __( 'Blue Quote' ),
        'inline_style' => '.wp-block-quote.is-style-blue-quote { color: blue; }',
    )
);

或者，如果已經(jīng)注冊了包含樣式變化CSS的樣式表，則可以僅傳遞樣式表的句柄，以便 register_block_style 函數(shù)可以確保其正確引入。

wp_register_style( 'myguten-style', get_template_directory_uri() . '/custom-style.css' );
 
register_block_style(
    'core/quote',
    array(
        'name'         => 'fancy-quote',
        'label'        => 'Fancy Quote',
        'style_handle' => 'myguten-style',
    )
);

unregister_block_style

unregister_block_style 允許注銷先前使用 register_block_style 在服務器上注冊的區(qū)塊樣式。

該函數(shù)的第一個參數(shù)是區(qū)塊的注冊名稱，而樣式的名稱則作為第二個參數(shù)。

下面的代碼示例從引用區(qū)塊中注銷名為“ fancy-quote”的樣式：

unregister_block_style( 'core/quote', 'fancy-quote' );

重要提示：函數(shù) unregister_block_style 僅注銷使用 register_block_style 在服務器上注冊的樣式。該函數(shù)不會取消注冊使用客戶端代碼注冊的樣式。

區(qū)塊示例 API

WordPress 5.3 還新增了在插入庫之前預覽庫中塊的功能。這可以幫助用戶一目了然地確定要插入的塊。

要在自定義塊中支持此功能，請確保在塊設置中定義example屬性。

const blockSettings = {
  // ... other settings
 
  example: {
      attributes: { 
          content: __( 'Content of the block' )
      },
      innerBlocks: []
  }
 
}
 
registerBlockType( name, settings );

更多信息請看： https://make.wordpress.org/core/2019/09/24/new-block-apis-in-wordpress-5-3/

拓展閱讀：WordPress Gutenberg Block API