如何禁用和鎖定古騰堡區塊

如何禁用和鎖定古騰堡區塊

Gutenberg 可讓您輕鬆使用區塊建立內容,但有時您需要控制哪些區塊可用。也許你正在為一個客戶網站工作,想阻止他們使用某些區塊。或者,您想通過刪除不必要的選項來簡化編輯體驗。

在本指南中,我們將探討禁用 Gutenberg 區塊的不同方法,包括:

  • 使用 WordPress 使用者介面(UI)隱藏插入器中的區塊
  • 鎖定區塊以防止其被移動或刪除
  • 使用 PHP 強化區塊限制,包括基於角色的訪問許可權

也就是說,我們不會討論區塊的可見性(根據條件顯示/隱藏內容)或禁用特定的區塊設定(如文字或背景顏色),這些在 theme.json 中處理。不過,我們將討論區塊鎖定,因為它與禁用區塊密切相關。

本指南中的所有方法都無需外掛即可使用,並且適用於任何基於區塊的主題

使用PHP禁用區塊

允許或阻止在 WordPress 中使用區塊有兩種截然不同的基本方法。您可以根據自己的需要,選擇允許或拒絕在插入器中使用區塊。

這兩種方法都可以使用 PHP 或 JavaScript 來實現,各有利弊。在允許列出區塊時,PHP 通常更簡單,而在拒絕列出區塊時,JavaScript 通常更有效。

我們將在所有示例中使用 PHP 來演示各種用例。

允許列出區塊

要在插入器中只允許特定的區塊,請使用以下過濾器。這將確保所有使用者只能使用指定的區塊:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_filter('allowed_block_types_all', 'allowed_block_types_all_users', 10, 2 );
function allowed_block_types_all_users( $allowed_blocks, $block_editor_context ) {
return array(
'core/paragraph',
'core/heading',
'core/image',
'core/cover',
'core/list',
'core/list-item'
);
}
add_filter('allowed_block_types_all', 'allowed_block_types_all_users', 10, 2 ); function allowed_block_types_all_users( $allowed_blocks, $block_editor_context ) { return array( 'core/paragraph', 'core/heading', 'core/image', 'core/cover', 'core/list', 'core/list-item' ); }
add_filter('allowed_block_types_all', 'allowed_block_types_all_users', 10, 2 );
function allowed_block_types_all_users( $allowed_blocks, $block_editor_context ) {
return array(
'core/paragraph',
'core/heading',
'core/image',
'core/cover',
'core/list',
'core/list-item'
);
}

應將此程式碼新增到子主題functions.php檔案中,以防止更新主題時丟失更改。

使用此方法時,請確保包含所有必要的子程式碼區塊。例如,如果允許使用 core/list 區塊,則必須同時包含 core/list-item 以防止出錯。

允許列表區塊

允許列表區塊

allowed_block_types_all 過濾器可讓開發人員控制插入器中可用的區塊。它接受兩個引數:

  • $allowed_block_types – 一個陣列或布林值,用於定義允許插入的區塊(預設值:true)。
  • $block_editor_context – 提供有關當前區塊編輯器狀態的資訊,包括正在編輯的文章。

允許貢獻者和作者使用特定區塊

以下程式碼限制了不具備 publish_pages 功能的使用者(貢獻者和作者)的可用區塊:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_filter('allowed_block_types_all', 'allowed_block_types_for_non_admins', 10, 2);
function allowed_block_types_for_non_admins($allowed_blocks, $block_editor_context) {
// Apply restrictions if the user does not have the 'publish_pages' capability
if (!current_user_can('publish_pages')) {
// Define the allowed blocks for users without 'publish_pages' capability
$allowed_blocks = array(
'core/paragraph',
'core/heading',
'core/image',
'core/cover',
'core/list',
'core/list-item'
);
}
return $allowed_blocks;
}
add_filter('allowed_block_types_all', 'allowed_block_types_for_non_admins', 10, 2); function allowed_block_types_for_non_admins($allowed_blocks, $block_editor_context) { // Apply restrictions if the user does not have the 'publish_pages' capability if (!current_user_can('publish_pages')) { // Define the allowed blocks for users without 'publish_pages' capability $allowed_blocks = array( 'core/paragraph', 'core/heading', 'core/image', 'core/cover', 'core/list', 'core/list-item' ); } return $allowed_blocks; }
add_filter('allowed_block_types_all', 'allowed_block_types_for_non_admins', 10, 2);
function allowed_block_types_for_non_admins($allowed_blocks, $block_editor_context) {
// Apply restrictions if the user does not have the 'publish_pages' capability
if (!current_user_can('publish_pages')) {
// Define the allowed blocks for users without 'publish_pages' capability
$allowed_blocks = array(
'core/paragraph',
'core/heading',
'core/image',
'core/cover',
'core/list',
'core/list-item'
);
}
return $allowed_blocks;
}

在上例中,投稿人和作者只能使用段落、標題、圖片、封面和列表區塊。

允許特定文章型別和使用者使用區塊

以下程式碼在編輯頁面時將 Shortcode 區塊新增到插入器中,但其他文章型別則無法使用:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_filter('allowed_block_types_all', 'allowed_block_types', 25, 2);
function allowed_block_types($allowed_blocks, $editor_context) {
$allowed_blocks = array(
'core/paragraph',
'core/heading',
'core/image',
'core/cover',
'core/list',
'core/list-item'
);
// Check if the editor context has a post object and if its type is 'page'
if (!empty($editor_context->post) && 'page' === $editor_context->post->post_type) {
$allowed_blocks[] = 'core/shortcode';
}
return $allowed_blocks;
}
add_filter('allowed_block_types_all', 'allowed_block_types', 25, 2); function allowed_block_types($allowed_blocks, $editor_context) { $allowed_blocks = array( 'core/paragraph', 'core/heading', 'core/image', 'core/cover', 'core/list', 'core/list-item' ); // Check if the editor context has a post object and if its type is 'page' if (!empty($editor_context->post) && 'page' === $editor_context->post->post_type) { $allowed_blocks[] = 'core/shortcode'; } return $allowed_blocks; }
add_filter('allowed_block_types_all', 'allowed_block_types', 25, 2);
function allowed_block_types($allowed_blocks, $editor_context) {
$allowed_blocks = array(
'core/paragraph',   
'core/heading',    
'core/image',      
'core/cover',      
'core/list',       
'core/list-item'
);
// Check if the editor context has a post object and if its type is 'page'
if (!empty($editor_context->post) && 'page' === $editor_context->post->post_type) {
$allowed_blocks[] = 'core/shortcode';
}
return $allowed_blocks;
}

請記住,由於撰稿人新增作者不能建立或修改頁面,因此結果只會出現在文章中。

所有使用者將只看到六個區塊,但管理員和編輯也將看到僅適用於頁面的簡碼區塊。

簡碼區塊

該簡碼區塊僅適用於頁面的管理員和編輯

在我們的示例中,這對貢獻者和作者的影響是無效的,因為預設情況下,他們不能新增新頁面。不過,使用角色管理器外掛可以改變這一功能。

允許基於文章ID的區塊

如果在某些情況下,您希望只允許某些文章使用一組區塊,可以通過以下方法實現:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_filter('allowed_block_types_all', 'allowed_block_types', 10, 2);
function allowed_block_types($allowed_blocks, $editor_context) {
// Check if the editor context has a post object
if (!empty($editor_context->post)) {
$post_id = $editor_context->post->ID;
// Define allowed blocks for specific post IDs
$allowed_blocks_by_post = array(
2 => array('core/paragraph', 'core/heading', 'core/image'),
3 => array('core/paragraph', 'core/heading', 'core/image')
);
// Check if the current post ID has a defined allowed blocks array
if (array_key_exists($post_id, $allowed_blocks_by_post)) {
return $allowed_blocks_by_post[$post_id];
}
}
return $allowed_blocks;
}
add_filter('allowed_block_types_all', 'allowed_block_types', 10, 2); function allowed_block_types($allowed_blocks, $editor_context) { // Check if the editor context has a post object if (!empty($editor_context->post)) { $post_id = $editor_context->post->ID; // Define allowed blocks for specific post IDs $allowed_blocks_by_post = array( 2 => array('core/paragraph', 'core/heading', 'core/image'), 3 => array('core/paragraph', 'core/heading', 'core/image') ); // Check if the current post ID has a defined allowed blocks array if (array_key_exists($post_id, $allowed_blocks_by_post)) { return $allowed_blocks_by_post[$post_id]; } } return $allowed_blocks; }
add_filter('allowed_block_types_all', 'allowed_block_types', 10, 2);
function allowed_block_types($allowed_blocks, $editor_context) {
// Check if the editor context has a post object
if (!empty($editor_context->post)) {
$post_id = $editor_context->post->ID;
// Define allowed blocks for specific post IDs
$allowed_blocks_by_post = array(
2 => array('core/paragraph', 'core/heading', 'core/image'),
3 => array('core/paragraph', 'core/heading', 'core/image')
);
// Check if the current post ID has a defined allowed blocks array
if (array_key_exists($post_id, $allowed_blocks_by_post)) {
return $allowed_blocks_by_post[$post_id];
}
}
return $allowed_blocks;
}

在本例中,只有段落、標題和影象區塊可用於文章 ID 2 和 3。

這三個區塊僅適用於兩個 ID

這三個區塊僅適用於兩個 ID

這對一小部分文章 ID 來說沒有問題。但如果您需要不斷新增頁面或文章的動態情況,則應考慮對分類標準和自定義欄位進行過濾。

拒絕列出區塊

允許列表是拒絕列表的一種形式,因為不可用的區塊會被拒絕。不過,如果你想允許除少數區塊外的大多數區塊,也可以採取相反的方法。在本例中,標題和封面區塊不再對任何使用者開放。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_filter('allowed_block_types_all', 'deny_blocks');
function deny_blocks($allowed_blocks) {
// Get all registered blocks
$blocks = WP_Block_Type_Registry::get_instance()->get_all_registered();
// Disable two specific blocks
unset($blocks['core/heading']);
unset($blocks['core/cover']);
return array_keys($blocks);
}
add_filter('allowed_block_types_all', 'deny_blocks'); function deny_blocks($allowed_blocks) { // Get all registered blocks $blocks = WP_Block_Type_Registry::get_instance()->get_all_registered(); // Disable two specific blocks unset($blocks['core/heading']); unset($blocks['core/cover']); return array_keys($blocks); }
add_filter('allowed_block_types_all', 'deny_blocks');
function deny_blocks($allowed_blocks) {
// Get all registered blocks
$blocks = WP_Block_Type_Registry::get_instance()->get_all_registered();
// Disable two specific blocks
unset($blocks['core/heading']);
unset($blocks['core/cover']);
return array_keys($blocks);
}

基本上,我們會找到所有已註冊的區塊,然後刪除標題和封面區塊。

如果你認為可以用這種方法取消設定任何區塊,那就要小心了。如果某個區塊(核心區塊或其他區塊)已通過 JavaScript 註冊,則必須通過 JavaScript 取消註冊。

拒絕列出整個區塊類別

如果您想移除整個區塊類別,例如小部件、嵌入或主題區塊,請使用此方法:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_filter('allowed_block_types_all', 'disable_blocks_by_categories', 10, 2);
function disable_blocks_by_categories($allowed_blocks, $editor_context) {
// Get all registered blocks
$registered_blocks = WP_Block_Type_Registry::get_instance()->get_all_registered();
// Specify the categories to disable
$categories_to_disable = array('widgets', 'embed', 'theme');
// Initialize an array to hold allowed block names
$allowed_block_names = array();
// Loop through registered blocks
foreach ($registered_blocks as $block_name => $block_type) {
// Check if the block has categories defined
if (isset($block_type->category)) {
// If the block's category is NOT in the disabled list, allow it
if (!in_array($block_type->category, $categories_to_disable, true)) {
$allowed_block_names[] = $block_name;
}
} else {
// If the block has no category defined, allow it by default
$allowed_block_names[] = $block_name;
}
}
return $allowed_block_names;
}
add_filter('allowed_block_types_all', 'disable_blocks_by_categories', 10, 2); function disable_blocks_by_categories($allowed_blocks, $editor_context) { // Get all registered blocks $registered_blocks = WP_Block_Type_Registry::get_instance()->get_all_registered(); // Specify the categories to disable $categories_to_disable = array('widgets', 'embed', 'theme'); // Initialize an array to hold allowed block names $allowed_block_names = array(); // Loop through registered blocks foreach ($registered_blocks as $block_name => $block_type) { // Check if the block has categories defined if (isset($block_type->category)) { // If the block's category is NOT in the disabled list, allow it if (!in_array($block_type->category, $categories_to_disable, true)) { $allowed_block_names[] = $block_name; } } else { // If the block has no category defined, allow it by default $allowed_block_names[] = $block_name; } } return $allowed_block_names; }
add_filter('allowed_block_types_all', 'disable_blocks_by_categories', 10, 2);
function disable_blocks_by_categories($allowed_blocks, $editor_context) {
// Get all registered blocks
$registered_blocks = WP_Block_Type_Registry::get_instance()->get_all_registered();
// Specify the categories to disable
$categories_to_disable = array('widgets', 'embed', 'theme');
// Initialize an array to hold allowed block names
$allowed_block_names = array();
// Loop through registered blocks
foreach ($registered_blocks as $block_name => $block_type) {
// Check if the block has categories defined
if (isset($block_type->category)) {
// If the block's category is NOT in the disabled list, allow it
if (!in_array($block_type->category, $categories_to_disable, true)) {
$allowed_block_names[] = $block_name;
}
} else {
// If the block has no category defined, allow it by default
$allowed_block_names[] = $block_name;
}
}
return $allowed_block_names;
}

這種方法可以過濾掉整個類別的區塊,簡化圖區塊編輯器的使用體驗。

刪除了小工具、嵌入式和主題區塊類別

刪除了小工具、嵌入式和主題區塊類別。

使用WordPress使用者介面禁用區塊

移除不必要的區塊有助於簡化編輯體驗,並可略微提高後臺效能,因為禁用的區塊不會載入到記憶體中。

任何使用者都可以通過區塊編輯器中的首選項選單禁用區塊。點選右上角的三點設定(⋮)選單,編輯器首選項就會開啟。然後,在“區塊”選項卡下,使用者可以取消選中任何區塊,將其從區塊插入器中移除。

例如,只需取消選中“Quote區塊的覈取方塊,就可以禁用該區塊,如下圖所示。

“Quote”區塊已被禁用

區塊首選項模式檢視顯示,“Quote”區塊已被禁用。

如果想更進一步,可以禁用整個區塊類別。例如,取消選中“文字”類別將從插入器中移除所有與文字相關的區塊,確保它們不再可用。這有助於簡化編輯器,防止使用者訪問不必要的區塊。

區塊首選項模式檢視顯示文字類別已被禁用

區塊首選項模式檢視顯示文字類別已被禁用

注:這同時適用於“文章編輯器”和“網站編輯器”。此外,禁用區塊不會影響現有內容,這意味著之前新增到文章或頁面中的任何區塊例項都將保持不變。

使用WordPress使用者介面鎖定區塊

鎖定區塊可以防止其被移動或刪除,同時仍允許內容編輯。任何使用者都可以隨時使用區塊工具欄上的鎖定選項鎖定或解鎖區塊。

要鎖定或解鎖一個區塊,請單擊區塊上的三點設定 (⋮),單擊鎖定,然後選擇鎖定全部選項,就會自動啟用防止移動防止刪除,但這些選項也可以單獨應用。

鎖定模式會顯示單個區塊的可用選項

鎖定模式會顯示單個區塊的可用選項

需要注意的是,即使區塊被鎖定,使用者仍可更改其內容和樣式,除非應用了進一步的限制。

僅通過鎖定功能無法防止樣式更改。要限制區塊樣式,必須修改 theme.json 檔案。

對於包含巢狀元素的區塊,還可以選擇只鎖定父區塊或鎖定所有內部區塊。這可以確保分組元素保持結構化,同時允許在其中進行受控編輯。

鎖定模式會顯示父區塊的可用選項

鎖定模式會顯示父區塊的可用選項

使用PHP鎖定區塊

雖然 WordPress 使用者介面提供了基本的區塊鎖定功能,但它並不能在整個網站範圍內實施限制。任何有編輯器訪問許可權的使用者都可以解鎖區塊,從而輕鬆覆蓋鎖定的內容。要永久限制區塊鎖定,PHP 是最好的解決方案。

使用 PHP,你可以完全取消鎖定和解鎖區塊的功能,確保任何使用者都無法繞過限制。在 WordPress 5.9 版本推出區塊鎖定之前,WordPress 就是這樣執行的。

區塊鎖定在很多情況下都很有用,尤其是在維護結構化內容時。通過使用 PHP 執行區塊限制,您可以

  • 防止使用者修改關鍵程式碼區塊,從而保持設計的完整性。
  • 防止可能破壞佈局的意外編輯。
  • 通過減少不必要的選項來簡化內容建立。
  • 確保模式和模板的一致性,尤其是客戶專案。

為所有使用者移除區塊鎖定功能

以下 PHP 程式碼段可完全禁用區塊鎖定功能,防止任何使用者鎖定或解鎖區塊:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_filter('block_editor_settings_all', 'example_disable_block_locking', 10, 2);
function example_disable_block_locking($settings, $context) {
$settings['canLockBlocks'] = false;
return $settings;
}
add_filter('block_editor_settings_all', 'example_disable_block_locking', 10, 2); function example_disable_block_locking($settings, $context) { $settings['canLockBlocks'] = false; return $settings; }
add_filter('block_editor_settings_all', 'example_disable_block_locking', 10, 2);
function example_disable_block_locking($settings, $context) {
$settings['canLockBlocks'] = false; 
return $settings;
}

使用此功能後,區塊編輯器中的區塊鎖定功能將被完全移除。使用者將看不到鎖定選項,而且無論誰都無法鎖定或解鎖區塊。

根據使用者角色限制區塊鎖定

您可能想限制誰可以鎖定和解鎖區塊,而不是完全刪除區塊鎖定。下面的 PHP 程式碼段只允許管理員和編輯修改區塊鎖,而作者和貢獻者則不能解鎖管理員或編輯設定的任何區塊。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_filter('block_editor_settings_all', 'example_disable_block', 10, 2);
function example_disable_block ($settings, $context ) {
if (
isset( $context->post ) &&
'post' === $context->post->post_type &&
! current_user_can( 'edit_theme_options' )
) {
$settings['canLockBlocks'] = false;
$settings['codeEditingEnabled'] = false;
}
return $settings;
}
add_filter('block_editor_settings_all', 'example_disable_block', 10, 2); function example_disable_block ($settings, $context ) { if ( isset( $context->post ) && 'post' === $context->post->post_type && ! current_user_can( 'edit_theme_options' ) ) { $settings['canLockBlocks'] = false; $settings['codeEditingEnabled'] = false; } return $settings; }
add_filter('block_editor_settings_all', 'example_disable_block', 10, 2);
function example_disable_block ($settings, $context ) {
if (
isset( $context->post ) &&
'post' === $context->post->post_type &&
! current_user_can( 'edit_theme_options' )
) {
$settings['canLockBlocks'] = false; 
$settings['codeEditingEnabled'] = false;   
}
return $settings;
}

這種方法將區塊控制許可權制在具有 edit_theme_options 功能的使用者,通常是管理員和編輯。作者和貢獻者將無法解鎖上級使用者設定的區塊。

此外,程式碼編輯器的訪問許可權也被禁用,使用者無法通過手動修改區塊標記來繞過限制。這樣可以確保鎖定的區塊保持不變,即使具有編碼知識的使用者也無法更改。

注:除了 PHP 和 JavaScript 之外,你可能還想知道是否存在其他禁用區塊的方法。

目前,theme.json不支援鎖定、解鎖或禁用區塊,這意味著你無法使用它來執行區塊限制。

那麼 WP-CLI 呢?由於 WP-CLI 操作的是伺服器端資料,因此不包括啟用或禁用特定區塊的命令。

目前,PHP 和 JavaScript 仍是 WordPress 中管理區塊可用性的唯一可靠方法。

小結

選擇允許還是禁用區塊(或兩者結合)取決於您的具體需求。您可能希望限制某些區塊,以獲得更簡潔的編輯體驗,強制執行設計一致性,或根據使用者角色控制訪問許可權。

說到使用者角色,可以通過修改功能來進一步定製塊的管理方式。這為我們提供了更多的可能性。

請記住,WordPress 會隨著時間不斷髮展。未來的更新可能會引入新的區塊管理方式或修改現有功能,因此與 WordPress 開發保持同步對於確保您的方法始終有效非常重要。

評論留言