From c3cb7e2fb348aa950412d14627bcf34fb5eebf29 Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <mikhaelatapia@gmail.com>
Date: Tue, 30 Sep 2025 14:11:37 +0800
Subject: [PATCH 1/3] hide other disabled insert button

---
 .../design-library-list/design-library-list-item.js      | 9 ++++++++-
 src/components/modal-design-library/editor.scss          | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/design-library-list/design-library-list-item.js b/src/components/design-library-list/design-library-list-item.js
index b0b77dbcd..2750be67a 100644
--- a/src/components/design-library-list/design-library-list-item.js
+++ b/src/components/design-library-list/design-library-list-item.js
@@ -45,6 +45,7 @@ const DesignLibraryListItem = memo( props => {
 	const { hostRef, shadowRoot } = useShadowRoot( shouldRender )
 
 	const ref = useRef( null )
+	const insertButtonRef = useRef( null )
 
 	const {
 		blocks, enableBackground,
@@ -150,10 +151,16 @@ const DesignLibraryListItem = memo( props => {
 					{ selectedTab === 'patterns' ? <span className="stk-block-design__selected-num">{ selectedNum === 0 ? '' : selectedNum }</span>
 						: <div>
 							<Button
+								ref={ insertButtonRef }
 								label={ __( 'Insert', i18n ) }
 								className="ugb-modal-design-library__add-multi"
 								disabled={ isMultiSelectBusy }
-								onClick={ () => onClickDesign() }
+								onClick={ () => {
+									if ( insertButtonRef.current ) {
+										insertButtonRef.current.style.opacity = 1
+									}
+									onClickDesign()
+								} }
 							>
 								{ __( 'Insert', i18n ) }
 								{ isMultiSelectBusy && <Spinner /> }
diff --git a/src/components/modal-design-library/editor.scss b/src/components/modal-design-library/editor.scss
index ee5408980..3fadaa780 100644
--- a/src/components/modal-design-library/editor.scss
+++ b/src/components/modal-design-library/editor.scss
@@ -174,7 +174,7 @@
 		text-transform: uppercase;
 		&[disabled] {
 			background: #efefef;
-			opacity: 1;
+			// opacity: 1;
 		}
 		&:not([disabled]) {
 			background: linear-gradient(131.34deg, #ee006b -0.77%, #b300be 94.57%);

From 24fbf6bd7a53418121959ccd4bdbd0623fe5334a Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <mikhaelatapia@gmail.com>
Date: Tue, 30 Sep 2025 14:32:36 +0800
Subject: [PATCH 2/3] fix implementation

---
 .../design-library-list/design-library-list-item.js       | 8 +++-----
 src/components/design-library-list/editor.scss            | 3 +++
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/design-library-list/design-library-list-item.js b/src/components/design-library-list/design-library-list-item.js
index 2750be67a..db7fcb00d 100644
--- a/src/components/design-library-list/design-library-list-item.js
+++ b/src/components/design-library-list/design-library-list-item.js
@@ -41,11 +41,11 @@ const DesignLibraryListItem = memo( props => {
 		: 120
 
 	const [ isLoading, setIsLoading ] = useState( true )
+	const [ selected, setSelected ] = useState( false )
 
 	const { hostRef, shadowRoot } = useShadowRoot( shouldRender )
 
 	const ref = useRef( null )
-	const insertButtonRef = useRef( null )
 
 	const {
 		blocks, enableBackground,
@@ -151,14 +151,12 @@ const DesignLibraryListItem = memo( props => {
 					{ selectedTab === 'patterns' ? <span className="stk-block-design__selected-num">{ selectedNum === 0 ? '' : selectedNum }</span>
 						: <div>
 							<Button
-								ref={ insertButtonRef }
 								label={ __( 'Insert', i18n ) }
 								className="ugb-modal-design-library__add-multi"
 								disabled={ isMultiSelectBusy }
+								data-selected={ selected }
 								onClick={ () => {
-									if ( insertButtonRef.current ) {
-										insertButtonRef.current.style.opacity = 1
-									}
+									setSelected( true )
 									onClickDesign()
 								} }
 							>
diff --git a/src/components/design-library-list/editor.scss b/src/components/design-library-list/editor.scss
index 8f19e2843..e19d19a0a 100644
--- a/src/components/design-library-list/editor.scss
+++ b/src/components/design-library-list/editor.scss
@@ -50,6 +50,9 @@
 		@media (hover: none) {
 			opacity: 1;
 		}
+		&[data-selected="true"] {
+			opacity: 1;
+		}
 	}
 	&:hover {
 		// box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;

From d83a666863b2a49116a87f0a04007c50856e3748 Mon Sep 17 00:00:00 2001
From: Mikhaela Tapia <mikhaelatapia@gmail.com>
Date: Tue, 30 Sep 2025 14:41:03 +0800
Subject: [PATCH 3/3] use class

---
 src/components/design-library-list/design-library-list-item.js | 3 +--
 src/components/design-library-list/editor.scss                 | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/design-library-list/design-library-list-item.js b/src/components/design-library-list/design-library-list-item.js
index db7fcb00d..883abecd5 100644
--- a/src/components/design-library-list/design-library-list-item.js
+++ b/src/components/design-library-list/design-library-list-item.js
@@ -152,9 +152,8 @@ const DesignLibraryListItem = memo( props => {
 						: <div>
 							<Button
 								label={ __( 'Insert', i18n ) }
-								className="ugb-modal-design-library__add-multi"
+								className={ `ugb-modal-design-library__add-multi ${ selected ? 'stk--is-selected' : '' }` }
 								disabled={ isMultiSelectBusy }
-								data-selected={ selected }
 								onClick={ () => {
 									setSelected( true )
 									onClickDesign()
diff --git a/src/components/design-library-list/editor.scss b/src/components/design-library-list/editor.scss
index e19d19a0a..204230d52 100644
--- a/src/components/design-library-list/editor.scss
+++ b/src/components/design-library-list/editor.scss
@@ -50,7 +50,7 @@
 		@media (hover: none) {
 			opacity: 1;
 		}
-		&[data-selected="true"] {
+		&.stk--is-selected {
 			opacity: 1;
 		}
 	}