WordPress Gutenberg - 以编程方式打开“块模式资源管理器”

Question

我想在单击“添加块”按钮（屏幕 1）时以编程方式打开“模式资源管理器”。

默认情况下，单击此按钮会打开“块插入器”（屏幕 2）。 组合浏览器位于“模式”选项卡中，点击“探索”。（参见屏幕 3 和屏幕 4）

我设法使用以下 JS 以编程方式打开“块插入器”：

wp.data.dispatch('core/edit-post').setIsInserterOpened(true);

但是我找不到任何东西来打开“Block Pattern Explorer”。

屏幕

Answer 1

用 JS 怎么样？

wp.data.dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block-patterns' );

对于单击

Add Block

时的触发器，您可以使用像这样的侦听器：

const addButton = document.querySelector( '.editor-inserter__toggle' );
addButton.addEventListener( 'click', () => {
    wp.data.dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block-patterns' );
} );

注：

openGeneralSidebar

操作打开包含块模式的侧边栏。参数

edit-post/block-patterns

指定打开哪个侧边栏。