fix (design library): hide disabled insert button except for the selected design (#3604)

* hide other disabled insert button

* fix implementation

* use class

Author: kaeizen

src/components/design-library-list/design-library-list-item.js

@@ -41,6 +41,7 @@ const DesignLibraryListItem = memo( props => {
 		: 120
 
 	const [ isLoading, setIsLoading ] = useState( true )
+	const [ selected, setSelected ] = useState( false )
 
 	const { hostRef, shadowRoot } = useShadowRoot( shouldRender )
 
@@ -151,9 +152,12 @@ 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 }
-								onClick={ () => onClickDesign() }
+								onClick={ () => {
+									setSelected( true )
+									onClickDesign()
+								} }
 							>
 								{ __( 'Insert', i18n ) }
 								{ isMultiSelectBusy && <Spinner /> }

src/components/design-library-list/editor.scss

@@ -50,6 +50,9 @@
 		@media (hover: none) {
 			opacity: 1;
 		}
+		&.stk--is-selected {
+			opacity: 1;
+		}
 	}
 	&:hover {
 		// box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;

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%);