Skip to content

Commit 7071ec5

Browse files
kaeizenkaeizen
committed
update design library
- use two json files - add append only option
1 parent 6d9170b commit 7071ec5

File tree

6 files changed

+114
-81
lines changed

6 files changed

+114
-81
lines changed

‎src/block/design-library/edit.js‎

Lines changed: 55 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import {
3434
} from '@wordpress/components'
3535
import { useBlockProps } from '@wordpress/block-editor'
3636
import apiFetch from '@wordpress/api-fetch'
37+
3738
const convertBlocksToArray = block => {
3839
const innerBlocks = block.innerBlocks.map( innerBlock => convertBlocksToArray( innerBlock ) )
3940
return [ block.name, block.attributes, innerBlocks ]
@@ -99,6 +100,7 @@ const Edit = props => {
99100
const disabledBlocksRef = useRef( [] )
100101
const callbackRef = useRef( null )
101102
const blocksToRemoveRef = useRef( [] )
103+
const insertIndexRef = useRef( -1 )
102104

103105
const blockProps = useBlockProps( {
104106
className: 'ugb-design-library-block',
@@ -261,11 +263,23 @@ const Edit = props => {
261263
}
262264
}
263265

264-
if ( blocks.length ) {
266+
if ( ! blocks.length ) {
267+
return
268+
}
269+
270+
if ( insertIndexRef.current !== -1 ) {
271+
dispatch( 'core/block-editor' ).insertBlocks( blocks, insertIndexRef.current )
272+
} else {
265273
dispatch( 'core/block-editor' ).replaceBlocks( clientId, blocks )
266-
if ( callbackRef.current ) {
267-
callbackRef.current()
268-
}
274+
}
275+
276+
if ( blocksToRemoveRef.current.length ) {
277+
dispatch( 'core/block-editor' ).removeBlocks( blocksToRemoveRef.current )
278+
blocksToRemoveRef.current = []
279+
}
280+
281+
if ( callbackRef.current ) {
282+
callbackRef.current()
269283
}
270284
}
271285

@@ -294,18 +308,10 @@ const Edit = props => {
294308
}
295309
}
296310

297-
const removeBlocks = () => {
298-
if ( blocksToRemoveRef.current.length ) {
299-
dispatch( 'core/block-editor' ).removeBlocks( blocksToRemoveRef.current )
300-
}
301-
}
302-
303311
const onClickSecondary = async () => {
304-
removeBlocks()
305312
await addDesigns( false )
306313
}
307314
const onClickPrimary = async () => {
308-
removeBlocks()
309315
await addDesigns( true )
310316
}
311317

@@ -363,10 +369,11 @@ const Edit = props => {
363369
callbackRef.current = callback
364370

365371
if ( type === 'pages' ) {
366-
const currentBlocks = select( 'core/block-editor' ).getBlockOrder().filter( id => id !== clientId )
372+
const allBlocks = select( 'core/block-editor' ).getBlockOrder()
373+
const blocksToRemove = allBlocks.filter( id => id !== clientId )
367374

368-
if ( currentBlocks.length ) {
369-
blocksToRemoveRef.current = currentBlocks
375+
if ( blocksToRemove.length ) {
376+
blocksToRemoveRef.current = allBlocks
370377
setIsDialogOpen( DIALOG_OPTIONS.REMOVE_BLOCKS )
371378
return
372379
}
@@ -394,33 +401,53 @@ const Edit = props => {
394401
{ __( 'Adding this page design will replace all existing blocks in the editor. Are you sure you want to continue?', i18n ) }
395402
</span>
396403
</div>
397-
<Flex justify="flex-end">
404+
<Flex direction="column" align="flex-end">
398405
<Button
399406
__next40pxDefaultSize
400-
variant="secondary"
407+
variant="primary"
401408
onClick={ () => {
402-
blocksToRemoveRef.current = []
403-
setIsDialogOpen( DIALOG_OPTIONS.CLOSE )
404-
} }
409+
insertIndexRef.current = 0
410+
if ( disabledBlocksRef.current.size ) {
411+
// Close this dialog and reopen after a while to show the notice for disabled blocks
412+
// The existing blocks will be removed later
413+
setIsDialogOpen( DIALOG_OPTIONS.CLOSE )
414+
setTimeout( () => setIsDialogOpen( DIALOG_OPTIONS.DISABLED_BLOCKS ), 500 )
415+
return
416+
}
417+
418+
addDesigns( false )
419+
} }
405420
>
406-
{ __( 'Cancel', i18n ) }
421+
{ __( 'Replace existing content with page design', i18n ) }
407422
</Button>
408423
<Button
409424
__next40pxDefaultSize
410-
variant="primary"
425+
variant="secondary"
411426
onClick={ () => {
427+
insertIndexRef.current = blocksToRemoveRef.current.length
428+
// When appending the page design, only remove the design library block
429+
blocksToRemoveRef.current = [ clientId ]
430+
412431
if ( disabledBlocksRef.current.size ) {
413-
// Close this dialog and reopen after a while to show the notice for disabled blocks
414-
// The existing blocks will be removed later
415432
setIsDialogOpen( DIALOG_OPTIONS.CLOSE )
416433
setTimeout( () => setIsDialogOpen( DIALOG_OPTIONS.DISABLED_BLOCKS ), 500 )
417-
} else {
418-
removeBlocks()
419-
addDesigns( false )
434+
435+
return
420436
}
437+
addDesigns( false )
421438
} }
422439
>
423-
{ __( 'Insert page design', i18n ) }
440+
{ __( 'Append page design only', i18n ) }
441+
</Button>
442+
<Button
443+
__next40pxDefaultSize
444+
variant="tertiary"
445+
onClick={ () => {
446+
blocksToRemoveRef.current = []
447+
setIsDialogOpen( DIALOG_OPTIONS.CLOSE )
448+
} }
449+
>
450+
{ __( 'Cancel', i18n ) }
424451
</Button>
425452
</Flex>
426453
</> }

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
236236
for ( let i = 0; i < _content.length; i++ ) {
237237
const section = _content[ i ]
238238
const design = await fetchDesign( section.id )
239-
const designContent = replacePlaceholders( design.content, design.category )
239+
const designContent = replacePlaceholders( design.template, design.category )
240240

241241
categoriesRef.current.push( design.category )
242242

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,10 @@ const DesignLibraryList = props => {
5656
return (
5757
<DesignLibraryItem
5858
key={ i }
59-
template={ design.content }
59+
template={ design.template }
6060
plan={ design.plan }
6161
designId={ design.designId }
62-
label={ design.title }
62+
label={ design.label }
6363
category={ design.category }
6464
containerScheme={ props.containerScheme }
6565
backgroundScheme={ props.backgroundScheme }

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,7 @@ import {
2828
Spinner,
2929
ToggleControl,
3030
} from '@wordpress/components'
31-
import {
32-
useEffect, useRef, useState,
33-
} from '@wordpress/element'
31+
import { useEffect, useState } from '@wordpress/element'
3432
import { sprintf, __ } from '@wordpress/i18n'
3533
import { useBlockColorSchemes } from '~stackable/hooks'
3634
import ColorSchemePreview from '../color-scheme-preview'
@@ -69,8 +67,6 @@ export const ModalDesignLibrary = props => {
6967
// The display designs are used to list the available designs the user can choose.
7068
const [ displayDesigns, setDisplayDesigns ] = useState( [] )
7169

72-
const designLibrary = useRef( {} )
73-
7470
const [ enableBackground, setEnableBackground ] = useState( false )
7571
const [ selectedContainerScheme, setSelectedContainerScheme ] = useState( '' )
7672
const [ selectedBackgroundScheme, setSelectedBackgroundScheme ] = useState( '' )
@@ -93,9 +89,9 @@ export const ModalDesignLibrary = props => {
9389

9490
getDesigns( {
9591
reset: doReset,
92+
type: selectedTab,
9693
} ).then( designs => {
97-
designLibrary.current = designs.patterns
98-
setSidebarDesigns( Object.values( designs[ selectedTab ] ) )
94+
setSidebarDesigns( designs )
9995
} ).finally( () => {
10096
setDoReset( false )
10197
setIsBusy( false )

‎src/design-library/index.js‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,43 @@
11
import apiFetch from '@wordpress/api-fetch'
22
import { doAction, applyFilters } from '@wordpress/hooks'
33

4-
const LATEST_API_VERSION = 'v5'
4+
const LATEST_API_VERSION = 'v4'
55

6-
let designLibrary = null
7-
let designs = []
6+
let designLibrary = {}
7+
let designs = {}
8+
let pages = {}
89

910
export const getBlockName = block => block.replace( /^[\w-]+\//, '' )
1011

11-
export const fetchDesignLibrary = async ( forceReset = false, version = '' ) => {
12-
if ( ! designLibrary || forceReset ) {
12+
export const fetchDesignLibrary = async ( forceReset = false, version = '', type = 'patterns' ) => {
13+
if ( forceReset ) {
14+
doAction( 'stackable.design-library.reset-cache' )
15+
designLibrary = {}
16+
designs = {}
17+
pages = {}
18+
}
19+
20+
if ( ( type === 'patterns' && ! Object.keys( designs ).length ) ||
21+
( type === 'pages' && ! Object.keys( pages ).length )
22+
) {
1323
const results = await apiFetch( {
14-
path: `/stackable/v2/design_library${ forceReset ? '/reset' : '' }`,
24+
path: `/stackable/v2/design_library/${ type }${ forceReset ? '/reset' : '' }`,
1525
method: 'GET',
1626
} )
17-
designLibrary = await results
27+
const designsPerType = await results
1828

19-
designs = designLibrary[ LATEST_API_VERSION ]?.patterns
29+
designLibrary[ type ] = designsPerType
2030

21-
// Reset all designs that we already have cached.
22-
if ( forceReset ) {
23-
doAction( 'stackable.design-library.reset-cache' )
24-
designs = []
31+
if ( type === 'patterns' ) {
32+
designs = designsPerType[ LATEST_API_VERSION ]
33+
} else {
34+
pages = designsPerType[ LATEST_API_VERSION ]
2535
}
2636
}
2737

28-
return designLibrary[ version || LATEST_API_VERSION ]
38+
return designLibrary[ type ][ version || LATEST_API_VERSION ]
2939
}
3040

31-
// TODO: to remove
3241
export const fetchDesign = async designId => {
3342
if ( ! designs[ designId ] ) {
3443
await fetchDesignLibrary()
@@ -50,10 +59,11 @@ export const setDevModeDesignLibrary = async ( devMode = false ) => {
5059

5160
export const getDesigns = async ( {
5261
reset = false,
62+
type = 'patterns',
5363
} ) => {
54-
const designLibrary = await fetchDesignLibrary( reset )
64+
const designLibrary = await fetchDesignLibrary( reset, LATEST_API_VERSION, type )
5565

56-
return designLibrary
66+
return Object.values( designLibrary )
5767
}
5868

5969
export const filterDesigns = async ( {

0 commit comments

Comments
 (0)