Loading
0

WordPress插件 古騰堡插件7.8添加Patterns API并繼續進行接口清理

古騰堡編輯器插件的7.8版昨天發布了。該團隊繼續使用從7.7版開始的刷新界面工作來改進編輯器。此插件更新中最有用的功能是包括用于插件和主題開發人員的Patterns API。

此版本不是我們在某些較早版本中遇到的大量功能版本。它是許多較小改進的最終結果,特別是在改進用戶界面和體驗方面。該更新包括20多個錯誤修復,一些實驗性功能(如站點編輯器)的持續工作以及代碼質量的多項改進。

在無需保存的情況下編輯文章永久鏈接應該可以正常工作,一年多來這一直是一個突出的問題。用戶現在可以為最新文章塊選擇多個類別,而不是單個類別。并且,實驗性全站點編輯功能現在支持全屏模式。

用戶界面不斷改進

WordPress插件 古騰堡插件7.8添加Patterns API并繼續進行接口清理

隊在Gutenberg 7.7中開始了用戶界面的大規模刷新。在此發行版中,他們繼續在最初的工作上進行開發。設計師已經微調了編輯器工具欄上的幾個圖標,其中包括粗體、斜體、刪除線、縮進、凸出和間隔圖標。

最顯著的差異之一是文章預覽按鈕的面向用戶文本的更新。在以前的版本中,有一個按鈕僅顯示為“桌面”。單擊后,它將打開一個下拉列表,以在臺式機、平板電腦或移動模式下預覽文章。在7.8版中,該按鈕的文本現在顯示為“預覽”,這是急需的更改,不再引起混淆。

總體而言,在編輯器上完成的細節工作看起來不錯。

建立自定義塊模式( Patterns )

WordPress插件 古騰堡插件7.8添加Patterns API并繼續進行接口清理

之前已經說過,但是需要重復:我對塊模式( Patterns )感到興奮。對于插件和主題作者能夠通過構建自己的自定義模式來開始測試此功能,我感到更加興奮。我預計在接下來的幾個月及以后,創意會激增。

模式是一個或多個塊的HTML注冊。插件和主題作者可以進一步定義這些塊的設置。Gutenberg團隊提供了一個簡單的PHP函數register_pattern(), 供開發人員注冊稱為的自定義模式 。

自從昨天晚上更新以來,我已經修補了許多模式創意。建立模式的最簡單方法是在可視化編輯器上進行。打開編輯器,然后創建您喜歡的一組獨特的塊。然后,切換到代碼編輯器并復制代碼。從那時起,您可以通過PHP注冊模型并粘貼復制的代碼。該過程實際上并沒有涉及多少實際編碼。甚至具有足夠DIY技巧的高級用戶也可以在主題functions.php文件中注冊他們。

以下是一個簡單的“英雄”模式,如上面的屏幕快照所示,它使用了封面、標題、段落和按鈕組(我在復制和粘貼后略微格式化了代碼以提高可讀性):

add_action( 'init', function() {  	register_pattern( 'tavern/hero-1', [ 		'title'   => __( 'Hero 1' ), 		'content' => 			'<!-- wp:cover {"customOverlayColor":"#273f60","align":"full"} --> 			<div class="wp-block-cover alignfull has-background-dim"> 				<div class="wp-block-cover__inner-container"> 					<!-- wp:heading {"align":"center"} --> 					<h2 class="has-text-align-center">Heading Title Here</h2> 					<!-- /wp:heading -->  					<!-- wp:paragraph {"align":"center"} --> 					<p class="has-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 					<!-- /wp:paragraph -->  					<!-- wp:buttons {"align":"center"} --> 					<div class="wp-block-buttons aligncenter"> 						<!-- wp:button {"className":"is-style-outline"} --> 						<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Button A</a></div> 						<!-- /wp:button --> 						<!-- wp:button {"className":"is-style-outline"} --> 						<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Button B</a></div> 						<!-- /wp:button --> 					</div> 					<!-- /wp:buttons --> 				</div> 			</div> 			<!-- /wp:cover -->' 	] ); } );

免責聲明:前面的代碼是針對實驗性功能的,可能會在更高版本的Gutenberg插件中或在API正式添加到核心WordPress之前進行更改。

要了解更多古騰堡插件7.8的更新,請查看官方文檔: https://make.wordpress.org/core/2020/03/26/whats-new-in-gutenberg-25-march/

注:文本出自WordPress Tavern,由WordPress大學翻譯整理。