From d4a1ec8299c4dc61eea101428979c261415e378f Mon Sep 17 00:00:00 2001
From: Alquen Sarmiento <sarmientoalquen@gmail.com>
Date: Tue, 11 Aug 2026 09:56:22 +0800
Subject: [PATCH] fix: when show template is enabled, insert in post content
 area instead

---
 e2e/tests/design-library.spec.ts                   | 14 ++++++++++++++
 .../design-library-button/design-library-button.js | 13 +++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/e2e/tests/design-library.spec.ts b/e2e/tests/design-library.spec.ts
index 505bbaa2a0..77c3a4760a 100644
--- a/e2e/tests/design-library.spec.ts
+++ b/e2e/tests/design-library.spec.ts
@@ -71,6 +71,20 @@ test.describe( 'Design Library', () => {
 		await expect( page.locator( '.ugb-modal-design-library__designs' ).getByText( 'An error has occurred:' ) ).toHaveCount( 0 )
 	} )
 
+	test( 'opens while the page template is shown', async ( { page } ) => {
+		await page.evaluate( () => {
+			window.wp.data.dispatch( 'core/editor' ).setRenderingMode( 'template-locked' )
+		} )
+
+		await expect.poll( async () => {
+			return page.evaluate( () => window.wp.data.select( 'core/editor' ).getRenderingMode() )
+		} ).toBe( 'template-locked' )
+
+		await openDesignLibrary( page )
+
+		await expect( page.locator( '.ugb-modal-design-library' ) ).toBeVisible()
+	} )
+
 	test( 'lazy-renders design previews for visible items', async ( {
 		page,
 	} ) => {
diff --git a/src/plugins/design-library-button/design-library-button.js b/src/plugins/design-library-button/design-library-button.js
index 85536ab86e..4645983ca7 100644
--- a/src/plugins/design-library-button/design-library-button.js
+++ b/src/plugins/design-library-button/design-library-button.js
@@ -8,7 +8,9 @@ import { SVGStackableIcon } from '~stackable/icons'
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks'
-import { dispatch, useSelect } from '@wordpress/data'
+import {
+	dispatch, select, useSelect,
+} from '@wordpress/data'
 import { __ } from '@wordpress/i18n'
 import { useCallback } from '@wordpress/element'
 import { ToolbarButton } from '@wordpress/components'
@@ -31,7 +33,14 @@ const DesignLibraryButton = () => {
 		// Insert a design library block.
 		const block = createBlock( 'stackable/design-library' )
 
-		dispatch( 'core/block-editor' ).insertBlocks( block )
+		// "Show Template" locks the template root, so insert into its editable
+		// post content area instead.
+		const isTemplateShown = select( 'core/editor' )?.getRenderingMode?.() === 'template-locked'
+		const rootClientId = isTemplateShown
+			? select( 'core/block-editor' ).getBlocksByName( 'core/post-content' )?.[ 0 ]
+			: undefined
+
+		dispatch( 'core/block-editor' ).insertBlocks( block, undefined, rootClientId )
 			.then( () => {
 				const button = getEditorDom()?.querySelector( `[data-block="${ block.clientId }"] button` )
 				// Open the design library.