updates

- modal for adding designs with disabled blocks
- fix icon list substitution
- fix style options spacing
- hide design library modal header tabs
- fix php error if download fails

Author: kaeizen

src/block/design-library/edit.js

@@ -162,6 +162,22 @@ const createBlockWithAttributes = async ( blockName, attributes, innerBlocks, su
 	attributes = block[ 0 ].attributes
 	innerBlocks = block[ 0 ].innerBlocks
 
+	if ( attributes.hasBackground ) {
+		attributes.blockMargin = {
+			top: '',
+			right: '',
+			bottom: '0',
+			left: '',
+		}
+	} else {
+		attributes.blockMargin = {
+			top: '120',
+			right: '',
+			bottom: '120',
+			left: '',
+		}
+	}
+
 	return createBlock( blockName, attributes, createBlocksFromInnerBlocksTemplate( innerBlocks ) )
 }
 
@@ -305,7 +321,7 @@ const Edit = props => {
 			{ isDialogOpen &&
 				<Modal
 					className="ugb-design-library__confirm-dialog"
-					__experimentalHideHeader
+					title={ __( 'Stackable Design Library', i18n ) }
 					onRequestClose={ () => setIsDialogOpen( false ) }
 				>
 					<VStack spacing={ 8 }>
@@ -317,26 +333,26 @@ const Edit = props => {
 							<span> { __( 'These blocks can be enabled in the Stackable settings page. Do you want to keep the disabled blocks or substitute them with other Stackable or core blocks?', i18n ) }</span>
 						</div>
 						<Flex direction="column" align="flex-end">
-							<Button
-								__next40pxDefaultSize
-								variant="tertiary"
-								onClick={ () => onClickTertiary() }
-							>
-								{ __( 'Visit the settings page and enable the blocks', i18n ) }
-							</Button>
 							<Button
 								__next40pxDefaultSize
 								variant="primary"
 								onClick={ () => onClickPrimary() }
 							>
-								{ __( 'Add patterns and substitute missing blocks', i18n ) }
+								{ __( 'Add patterns and substitute blocks', i18n ) }
 							</Button>
 							<Button
 								__next40pxDefaultSize
 								variant="secondary"
 								onClick={ () => onClickSecondary() }
 							>
-								{ __( 'Add patterns without substituting missing blocks', i18n ) }
+								{ __( 'Add patterns only (no substitutes)', i18n ) }
+							</Button>
+							<Button
+								__next40pxDefaultSize
+								variant="tertiary"
+								onClick={ () => onClickTertiary() }
+							>
+								{ __( 'Enable blocks in settings', i18n ) }
 							</Button>
 						</Flex>
 					</VStack>

src/block/icon-list/substitute.js

@@ -1,14 +1,16 @@
 export const substitute = {
 	from: 'stackable/icon-list',
-	transform: () => {
+	transform: ( oldAttributes, innerBlocks ) => {
+		const newInnerBlocks = innerBlocks.reduce( ( newInnerBlocks, innerBlock ) => {
+			const attributes = innerBlock[ 1 ]
+
+			newInnerBlocks.push( [ 'core/list-item', { content: attributes.text } ] )
+			return newInnerBlocks
+		}, [] )
 		return [
 			'core/list',
 			{},
-			[
-				[ 'core/list-item', { content: 'First item list' } ],
-				[ 'core/list-item', { content: 'Second item list' } ],
-				[ 'core/list-item', { content: 'Third item list' } ],
-			],
+			newInnerBlocks,
 		]
 	},
 }

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

@@ -230,7 +230,7 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 		<button
 			className={ mainClasses }
 			ref={ ref }
-			data-stk-design-id={ props.testId }
+			data-stk-design-id={ props.designId }
 			onClick={ () => {
 				if ( ! isPro && plan !== 'free' ) {
 					return

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

@@ -63,8 +63,6 @@ const DesignLibraryList = props => {
 						backgroundScheme={ props.backgroundScheme }
 						enableBackground={ props.enableBackground }
 						selectedNum={ selectedNum }
-						testId={ design.testId }
-						testKey={ i }
 						isBusy={ isBusy }
 						forceUpdate={ forceUpdate }
 						onClick={ ( designId, parsedBlocks, hasDisabledBlocks ) => onSelectMulti( designId, parsedBlocks, hasDisabledBlocks ) }

src/components/modal-design-library/modal.js

@@ -1,12 +1,9 @@
 /**
  * Internal deprendencies
  */
-// import SVGViewSingle from './images/view-single.svg'
-// import SVGViewMany from './images/view-many.svg'
-// import SVGViewFew from './images/view-few.svg'
 import BlockList from './block-list'
 import Button from '../button'
-import AdvancedToolbarControl from '../advanced-toolbar-control'
+// import AdvancedToolbarControl from '../advanced-toolbar-control'
 import DesignLibraryList from '~stackable/components/design-library-list'
 import { getDesigns, filterDesigns } from '~stackable/design-library'
 
@@ -54,7 +51,7 @@ export const ModalDesignLibrary = props => {
 
 	const [ isMultiSelectBusy, setIsMultiSelectBusy ] = useState( false )
 
-	const [ selectedTab, setSelectedTab ] = useLocalStorage( 'stk__design_library__block-list__view_by', 'patterns' )
+	const [ selectedTab, _setSelectedTab ] = useLocalStorage( 'stk__design_library__block-list__view_by', 'patterns' )
 	const [ selectedCategory, setSelectedCategory ] = useLocalStorage( 'stk__design_library__block-list__selected', '' )
 	const [ selectedPlan, setSelectedPlan ] = useLocalStorage( 'stk__design_library__view-plan', PLAN_OPTIONS[ 0 ] )
 
@@ -104,6 +101,7 @@ export const ModalDesignLibrary = props => {
 			title={ __( 'Stackable Design Library', i18n ) }
 			headerActions={ (
 				<>
+					{ /* DEV NOTE: hide for now
 					<AdvancedToolbarControl
 						className="stk-design-library-tabs"
 						fullwidth={ false }
@@ -129,7 +127,7 @@ export const ModalDesignLibrary = props => {
 						onChange={ setSelectedTab }
 						isToggleOnly={ true }
 						allowReset={ false }
-					/>
+					/> */ }
 
 					<div className="stk-design-library__header-settings">
 						<Button
@@ -196,7 +194,7 @@ export const ModalDesignLibrary = props => {
 						/>
 					</div>
 					<div className="ugb-modal-design-library__style-options">
-						<h4 style={ { margin: '0' } }>{ __( 'Style Options', i18n ) }</h4>
+						<h4 style={ { margin: '0 0 1em ' } }>{ __( 'Style Options', i18n ) }</h4>
 						<ToggleControl
 							className="ugb-modal-design-library__enable-background"
 							label="Section Background"

src/design-library/index.js

@@ -1,6 +1,5 @@
 import apiFetch from '@wordpress/api-fetch'
 import { doAction, applyFilters } from '@wordpress/hooks'
-// import TEST_DESIGN from './test.json'
 
 const LATEST_API_VERSION = 'v4'
 
@@ -54,13 +53,7 @@ export const setDevModeDesignLibrary = async ( devMode = false ) => {
 export const getDesigns = async ( {
 	reset = false,
 } ) => {
-	let library = Object.values( await fetchDesignLibrary( reset ) )
-	library = library.map( ( item, index ) => {
-		return {
-			...item,
-			testId: `stk-design-${ index + 1 }`,
-		}
-	} )
+	const library = Object.values( await fetchDesignLibrary( reset ) )
 	return library
 }
 

src/design-library/init.php

@@ -146,7 +146,6 @@ public function get_design_library_image( $request ) {
 			$temp_filepath = download_url( $url );
 
 			if ( is_wp_error( $temp_filepath ) ) {
-				@unlink( $temp_filepath );
 				return new WP_REST_Response( array(
 					'success' => false,
 					'message' => 'Failed to retrieve image from the provided URL.'