feat (design library): save patterns

src/block/design-library/edit.js

@@ -116,7 +116,7 @@ const Edit = props => {
 	const spacingSize = ! presetMarks || ! Array.isArray( presetMarks ) ? 120 : presetMarks[ presetMarks.length - 2 ].value
 
 	// Replaces the current block with a block made out of attributes.
-	const createBlockWithAttributes = async ( category, blockName, attributes, innerBlocks, substituteBlocks, parentClientId ) => {
+	const createBlockWithAttributes = async ( category, blockName, attributes, innerBlocks, substituteBlocks, parentClientId, type ) => {
 		const disabledBlocks = settings.stackable_block_states || {} // eslint-disable-line camelcase
 
 		// Recursively substitute core blocks to disabled Stackable blocks
@@ -207,7 +207,7 @@ const Edit = props => {
 		innerBlocks = block[ 0 ].innerBlocks
 
 		const isDesignLibraryDevMode = devMode && localStorage.getItem( 'stk__design_library__dev_mode' ) === '1'
-		if ( ! isDesignLibraryDevMode ) {
+		if ( ! isDesignLibraryDevMode && type !== 'saved' ) {
 			if ( category !== 'Header' ) {
 				if ( ! parentClientId && attributes.hasBackground ) {
 					attributes.blockMargin = {
@@ -255,14 +255,16 @@ const Edit = props => {
 		const blocks = []
 
 		for ( const blockDesign of designs ) {
-			const { designData, category } = blockDesign
+			const {
+				designData, category, type,
+			} = blockDesign
 
 			for ( const patterns of designData ) {
 				const {
 					name, attributes, innerBlocks,
 				} = patterns
 				if ( name && attributes ) {
-					const block = await createBlockWithAttributes( category, name, applyFilters( 'stackable.design-library.attributes', attributes ), innerBlocks || [], substituteBlocks, parentClientId )
+					const block = await createBlockWithAttributes( category, name, applyFilters( 'stackable.design-library.attributes', attributes ), innerBlocks || [], substituteBlocks, parentClientId, type )
 					blocks.push( block )
 				} else {
 					console.error( 'Design library selection failed: No block data found' ) // eslint-disable-line no-console
@@ -336,14 +338,16 @@ const Edit = props => {
 
 		_designs.forEach( design => {
 			const {
-				designData, blocksForSubstitution, category,
+				designData, blocksForSubstitution, category, type: designType,
 			} = design
 
 			if ( blocksForSubstitution.size ) {
 				disabledBlocks = disabledBlocks.union( blocksForSubstitution )
 			}
 
-			designs.push( { designData, category } )
+			designs.push( {
+				designData, category, type: designType,
+			} )
 		} )
 
 		designsRef.current = designs

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

@@ -21,9 +21,11 @@ import { Tooltip } from '~stackable/components'
 import {
 	useState, useRef, memo,
 	useMemo,
+	Fragment,
 } from '@wordpress/element'
 import { Dashicon, Spinner } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
+import { applyFilters } from '@wordpress/hooks'
 
 const DesignLibraryListItem = memo( props => {
 	const {
@@ -86,20 +88,29 @@ const DesignLibraryListItem = memo( props => {
 
 	const onClickHost = e => {
 		e.stopPropagation()
-		if ( selectedTab === 'pages' ) {
-			return
-		}
 		onClickDesign()
 	}
 
+	const buttonAttributes = {
+		tabIndex: 0,
+		role: 'button',
+		onClick: onClickHost,
+		onKeyDown: e => {
+			if ( e.key === 'Enter' || e.key === ' ' ) {
+				e.preventDefault()
+				onClickHost( e )
+			}
+		},
+	}
+
 	return (
-		// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-		<button
+		// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+		<div
 			className={ mainClasses }
 			ref={ ref }
-			onClick={ onClickHost }
 			onMouseOut={ onMouseOut }
 			onMouseOver={ onMouseOver }
+			{ ...( selectedTab === 'patterns' ? buttonAttributes : {} ) }
 		>
 			{ ! isPro && plan !== 'free' && <span className="stk-pulsating-circle" role="presentation" /> }
 			<div style={ { position: 'relative' } } className={ `stk-block-design__design-container ${ designPreviewSize > 100 ? 'stk--design-preview-large' : 'stk--design-preview-small' }` }>
@@ -110,6 +121,7 @@ const DesignLibraryListItem = memo( props => {
 						showHideNote={ false }
 					/>
 				) }
+				{ isPro && applyFilters( 'stackable.design-library.pattern-actions', Fragment, previewProps ) }
 				<div className={ `stk-spinner-container ${ isLoading || ! shouldRender ? '' : 'stk-hide-spinner' }` }><Spinner /></div>
 				<div
 					className="stk-block-design__host-container"
@@ -133,9 +145,11 @@ const DesignLibraryListItem = memo( props => {
 				</div>
 			</div>
 
+			{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */ }
 			<footer
 				// Add the number if isToggle is a number, signifying an order instead of just an on/off.
 				data-selected-num={ selectedNum }
+				{ ...( selectedTab === 'saved' ? buttonAttributes : {} ) }
 			>
 				<div>
 					<h4> { label } </h4>
@@ -151,7 +165,7 @@ const DesignLibraryListItem = memo( props => {
 							<Dashicon icon="editor-help" size={ 16 } />
 						</Tooltip>
 					}
-					{ selectedTab === 'patterns' ? <span className="stk-block-design__selected-num">{ selectedNum === 0 ? '' : selectedNum }</span>
+					{ selectedTab !== 'pages' ? <span className="stk-block-design__selected-num">{ selectedNum === 0 ? '' : selectedNum }</span>
 						: <div>
 							<Button
 								label={ __( 'Insert', i18n ) }
@@ -169,7 +183,7 @@ const DesignLibraryListItem = memo( props => {
 					}
 				</div>
 			</footer>
-		</button>
+		</div>
 	)
 } )
 

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

@@ -55,7 +55,7 @@ export const DesignPreview = ( {
 
 	useEffect( () => {
 		const container = ref.current
-		if ( ! container || selectedTab === 'patterns' ) {
+		if ( ! container || selectedTab !== 'pages' ) {
 			return
 		}
 
@@ -90,6 +90,9 @@ export const DesignPreview = ( {
 
 		setIsLoading( true )
 
+		// Prevent interaction and focus within the preview content
+		wrapper.setAttribute( 'inert', '' )
+
 		const ric = window.requestIdleCallback ? ( cb => window.requestIdleCallback( cb, { timeout: 5000 } ) )
 			: ( cb => setTimeout( cb, designIndex * 20 ) )
 		const sanitizedHTML = safeHTML( blocks )
@@ -121,6 +124,7 @@ export const DesignPreview = ( {
 		>
 			<div
 				ref={ wrapperRef }
+				className="is-layout-constrained"
 				style={ { pointerEvents: 'none' } }	// prevent blocks from being clicked
 			/>
 		</body>

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

@@ -54,13 +54,51 @@
 			opacity: 1;
 		}
 	}
+	.stk-block-design__edit-btn-container {
+		opacity: 0;
+		z-index: 2;
+		transition: opacity 0.4s cubic-bezier(0.2, 0.6, 0.4, 1), visibility 0.4s cubic-bezier(0.2, 0.6, 0.4, 1);
+		position: absolute;
+		padding: 60px 30px 30px;
+		background: linear-gradient(180deg, transparent, #fffe 40px, #fff) !important;
+		top: auto;
+		bottom: -1px;
+		left: 0;
+		right: 0;
+		display: flex;
+		gap: 24px;
+		visibility: hidden;
+		@media (hover: none) {
+			opacity: 1;
+		}
+
+		.ugb-button-component {
+			width: 100%;
+			justify-content: center;
+			pointer-events: none;
+			@media (hover: none) {
+				pointer-events: auto;
+			}
+		}
+	}
 	&:hover {
 		// box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
 		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 		.ugb-button-component {
 			opacity: 1;
 		}
+
+		.stk-block-design__edit-btn-container {
+			visibility: visible;
+			opacity: 1;
+			transition-delay: 1s;
+
+			.ugb-button-component {
+				pointer-events: initial;
+			}
+		}
 	}
+
 	&.ugb--is-hidden {
 		opacity: 0;
 		pointer-events: none;
@@ -236,7 +274,6 @@
 	}
 }
 
-
 .ugb-design-library-items {
 	.stk-spinner-container {
 		height: 100%;
@@ -257,3 +294,10 @@
 		}
 	}
 }
+
+.stk-design-library__item-saved .ugb-design-library-item {
+	cursor: default;
+	footer {
+		cursor: pointer;
+	}
+}

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

@@ -6,7 +6,7 @@ import DesignLibraryListItem from './design-library-list-item'
 /**
  * External dependencies
  */
-import { i18n } from 'stackable'
+import { i18n, isPro } from 'stackable'
 import classnames from 'classnames'
 
 /**
@@ -19,12 +19,14 @@ import {
 } from '@wordpress/element'
 import { usePresetControls } from '~stackable/hooks'
 import { useDesignLibraryContext } from '../modal-design-library/modal'
+import ProControl from '../pro-control'
 
 const DesignLibraryList = memo( props => {
 	const {
 		className = '',
 		designs,
 		isBusy,
+		selectedTab,
 	} = props
 	const containerRef = useRef( null )
 
@@ -41,24 +43,27 @@ const DesignLibraryList = memo( props => {
 		className="ugb-modal-design-library__designs"
 		ref={ containerRef }
 	>
-		{ isBusy && <Spinner style={ { display: 'block', margin: '0 auto' } } /> }
-		{ ! isBusy && <>
-			<div className={ listClasses }>
-				{ ( designs || [] ).map( ( design, i ) => {
-					return (
-						<DesignLibraryItem
-							design={ design }
-							key={ design.id || design.designId }
-							designIndex={ i }
-						/>
-					)
-				} ) }
-
-				{ ! ( designs || [] ).length &&
-					<p className="components-base-control__help" data-testid="nothing-found-note">{ __( 'No designs found', i18n ) }</p>
-				}
-			</div>
-		</> }
+		{ selectedTab === 'saved' && ! isPro
+			? <ProControl type="design-library-saved-patterns" />
+			: <>
+				{ isBusy && <Spinner style={ { display: 'block', margin: '0 auto' } } /> }
+				{ ! isBusy && <div className={ listClasses }>
+					{ ( designs || [] ).map( ( design, i ) => {
+						return (
+							<DesignLibraryItem
+								design={ design }
+								key={ design.id || design.designId }
+								designIndex={ i }
+							/>
+						)
+					} ) }
+
+					{ ! ( designs || [] ).length &&
+						<p className="components-base-control__help" data-testid="nothing-found-note">{ __( 'No designs found', i18n ) }</p>
+					}
+				</div> }
+			</>
+		}
 	</div>
 } )
 

src/components/design-library-list/use-preview-renderer.js

@@ -70,7 +70,7 @@ export const usePreviewRenderer = (
 	const siteTitle = useSelect( select => select( 'core' ).getEntityRecord( 'root', 'site' )?.title || 'InnovateCo', [] )
 	const isDesignLibraryDevMode = devMode && localStorage.getItem( 'stk__design_library__dev_mode' ) === '1'
 
-	const addHasBackground = selectedTab === 'patterns'
+	const addHasBackground = selectedTab !== 'pages'
 
 	const updateShadowBodySize = _shadowBody => {
 		const shadowBody = _shadowBody || shadowRoot?.querySelector( 'body' )
@@ -117,7 +117,7 @@ export const usePreviewRenderer = (
 			const scaleFactor = cardWidth > 0 ? cardWidth / 1300 : 1 // Divide by 1300, which is the width of preview in the shadow DOM
 
 			let _bodyHeight = 1200
-			if ( selectedTab === 'patterns' ) {
+			if ( selectedTab !== 'pages' ) {
 				_bodyHeight = shadowBody.offsetHeight
 			}
 
@@ -224,13 +224,13 @@ export const usePreviewRenderer = (
 		let _parsedBlocksForInsertion = null
 		const initialize = async () => {
 			const _content = template
-			if ( selectedTab === 'patterns' ) {
+			if ( selectedTab !== 'pages' ) {
 				const categorySlug = getCategorySlug( designId )
 
 				// For preview: always replace placeholders (ignore dev mode)
-				const _contentForPreview = replacePlaceholders( _content, categorySlug, false )
+				const _contentForPreview = replacePlaceholders( _content, categorySlug, false, selectedTab )
 				// For insertion: only create separate content if dev mode is enabled
-				const _contentForInsertion = isDesignLibraryDevMode ? replacePlaceholders( _content, categorySlug, true ) : _contentForPreview
+				const _contentForInsertion = isDesignLibraryDevMode ? replacePlaceholders( _content, categorySlug, true, selectedTab ) : _contentForPreview
 
 				categoriesRef.current.push( categorySlug )
 
@@ -248,12 +248,12 @@ export const usePreviewRenderer = (
 
 				// For preview: always replace placeholders (ignore dev mode)
 				const designsContentForPreview = designs.map( ( design, i ) =>
-					replacePlaceholders( design.template || design.content, categorySlugs[ i ], false )
+					replacePlaceholders( design.template || design.content, categorySlugs[ i ], false, selectedTab )
 				).join( '\n' )
 				// For insertion: only create separate content if dev mode is enabled
 				const designsContentForInsertion = isDesignLibraryDevMode
 					? designs.map( ( design, i ) =>
-						replacePlaceholders( design.template || design.content, categorySlugs[ i ], true )
+						replacePlaceholders( design.template || design.content, categorySlugs[ i ], true, selectedTab )
 					).join( '\n' )
 					: designsContentForPreview
 

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

@@ -180,7 +180,11 @@ export const adjustPatternSpacing = ( attributes, category, spacingSize, isDesig
 	}
 }
 
-export const replacePlaceholders = ( designContent, designCategory, isDesignLibraryDevMode ) => {
+export const replacePlaceholders = ( designContent, designCategory, isDesignLibraryDevMode, type ) => {
+	if ( type === 'saved' ) {
+		return designContent
+	}
+
 	const defaultValues = DEFAULT_CONTENT[ designCategory ]
 
 	if ( defaultValues && ! isDesignLibraryDevMode ) {

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

@@ -464,3 +464,9 @@ div.ugb-modal-design-library__enable-background {
 		min-width: unset;
 	}
 }
+
+body:has(.stk-design-library__item-saved) {
+	.components-snackbar-list {
+		z-index: 100001;
+	}
+}