Skip to content

Commit 8966428

Browse files
kaeizenkaeizen
committed
init
1 parent 1e56ba3 commit 8966428

File tree

19 files changed

+654
-71
lines changed

19 files changed

+654
-71
lines changed

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ const Edit = props => {
116116
const spacingSize = ! presetMarks || ! Array.isArray( presetMarks ) ? 120 : presetMarks[ presetMarks.length - 2 ].value
117117

118118
// Replaces the current block with a block made out of attributes.
119-
const createBlockWithAttributes = async ( category, blockName, attributes, innerBlocks, substituteBlocks, parentClientId ) => {
119+
const createBlockWithAttributes = async ( category, blockName, attributes, innerBlocks, substituteBlocks, parentClientId, type ) => {
120120
const disabledBlocks = settings.stackable_block_states || {} // eslint-disable-line camelcase
121121

122122
// Recursively substitute core blocks to disabled Stackable blocks
@@ -207,7 +207,7 @@ const Edit = props => {
207207
innerBlocks = block[ 0 ].innerBlocks
208208

209209
const isDesignLibraryDevMode = devMode && localStorage.getItem( 'stk__design_library__dev_mode' ) === '1'
210-
if ( ! isDesignLibraryDevMode ) {
210+
if ( ! isDesignLibraryDevMode && type !== 'saved' ) {
211211
if ( category !== 'Header' ) {
212212
if ( ! parentClientId && attributes.hasBackground ) {
213213
attributes.blockMargin = {
@@ -255,14 +255,16 @@ const Edit = props => {
255255
const blocks = []
256256

257257
for ( const blockDesign of designs ) {
258-
const { designData, category } = blockDesign
258+
const {
259+
designData, category, type,
260+
} = blockDesign
259261

260262
for ( const patterns of designData ) {
261263
const {
262264
name, attributes, innerBlocks,
263265
} = patterns
264266
if ( name && attributes ) {
265-
const block = await createBlockWithAttributes( category, name, applyFilters( 'stackable.design-library.attributes', attributes ), innerBlocks || [], substituteBlocks, parentClientId )
267+
const block = await createBlockWithAttributes( category, name, applyFilters( 'stackable.design-library.attributes', attributes ), innerBlocks || [], substituteBlocks, parentClientId, type )
266268
blocks.push( block )
267269
} else {
268270
console.error( 'Design library selection failed: No block data found' ) // eslint-disable-line no-console
@@ -336,14 +338,16 @@ const Edit = props => {
336338

337339
_designs.forEach( design => {
338340
const {
339-
designData, blocksForSubstitution, category,
341+
designData, blocksForSubstitution, category, type: designType,
340342
} = design
341343

342344
if ( blocksForSubstitution.size ) {
343345
disabledBlocks = disabledBlocks.union( blocksForSubstitution )
344346
}
345347

346-
designs.push( { designData, category } )
348+
designs.push( {
349+
designData, category, type: designType,
350+
} )
347351
} )
348352

349353
designsRef.current = designs

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

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
} from '@wordpress/element'
2525
import { Dashicon, Spinner } from '@wordpress/components'
2626
import { __ } from '@wordpress/i18n'
27+
import { applyFilters } from '@wordpress/hooks'
2728

2829
const DesignLibraryListItem = memo( props => {
2930
const {
@@ -86,20 +87,23 @@ const DesignLibraryListItem = memo( props => {
8687

8788
const onClickHost = e => {
8889
e.stopPropagation()
89-
if ( selectedTab === 'pages' ) {
90-
return
91-
}
9290
onClickDesign()
9391
}
9492

93+
const buttonAttributes = {
94+
tabIndex: 0,
95+
role: 'button',
96+
onClick: onClickHost,
97+
}
98+
9599
return (
96-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
97-
<button
100+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
101+
<div
98102
className={ mainClasses }
99103
ref={ ref }
100-
onClick={ onClickHost }
101104
onMouseOut={ onMouseOut }
102105
onMouseOver={ onMouseOver }
106+
{ ...( selectedTab === 'patterns' ? buttonAttributes : {} ) }
103107
>
104108
{ ! isPro && plan !== 'free' && <span className="stk-pulsating-circle" role="presentation" /> }
105109
<div style={ { position: 'relative' } } className={ `stk-block-design__design-container ${ designPreviewSize > 100 ? 'stk--design-preview-large' : 'stk--design-preview-small' }` }>
@@ -110,6 +114,7 @@ const DesignLibraryListItem = memo( props => {
110114
showHideNote={ false }
111115
/>
112116
) }
117+
{ isPro && applyFilters( 'stackable.design-library.pattern-actions', previewProps ) }
113118
<div className={ `stk-spinner-container ${ isLoading || ! shouldRender ? '' : 'stk-hide-spinner' }` }><Spinner /></div>
114119
<div
115120
className="stk-block-design__host-container"
@@ -133,9 +138,11 @@ const DesignLibraryListItem = memo( props => {
133138
</div>
134139
</div>
135140

141+
{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */ }
136142
<footer
137143
// Add the number if isToggle is a number, signifying an order instead of just an on/off.
138144
data-selected-num={ selectedNum }
145+
{ ...( selectedTab === 'saved' ? buttonAttributes : {} ) }
139146
>
140147
<div>
141148
<h4> { label } </h4>
@@ -151,7 +158,7 @@ const DesignLibraryListItem = memo( props => {
151158
<Dashicon icon="editor-help" size={ 16 } />
152159
</Tooltip>
153160
}
154-
{ selectedTab === 'patterns' ? <span className="stk-block-design__selected-num">{ selectedNum === 0 ? '' : selectedNum }</span>
161+
{ selectedTab !== 'pages' ? <span className="stk-block-design__selected-num">{ selectedNum === 0 ? '' : selectedNum }</span>
155162
: <div>
156163
<Button
157164
label={ __( 'Insert', i18n ) }
@@ -169,7 +176,7 @@ const DesignLibraryListItem = memo( props => {
169176
}
170177
</div>
171178
</footer>
172-
</button>
179+
</div>
173180
)
174181
} )
175182

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const DesignPreview = ( {
5555

5656
useEffect( () => {
5757
const container = ref.current
58-
if ( ! container || selectedTab === 'patterns' ) {
58+
if ( ! container || selectedTab !== 'pages' ) {
5959
return
6060
}
6161

@@ -121,6 +121,7 @@ export const DesignPreview = ( {
121121
>
122122
<div
123123
ref={ wrapperRef }
124+
className="is-layout-constrained"
124125
style={ { pointerEvents: 'none' } } // prevent blocks from being clicked
125126
/>
126127
</body>

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

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,38 @@
5454
opacity: 1;
5555
}
5656
}
57+
.stk-block-design__edit-btn-container {
58+
opacity: 0;
59+
z-index: 2;
60+
transition: opacity 0.4s cubic-bezier(0.2, 0.6, 0.4, 1);
61+
position: absolute;
62+
padding: 60px 30px 30px;
63+
background: linear-gradient(180deg, transparent, #fffe 40px, #fff) !important;
64+
top: auto;
65+
bottom: -1px;
66+
left: 0;
67+
right: 0;
68+
display: flex;
69+
gap: 24px;
70+
71+
.ugb-button-component {
72+
width: 100%;
73+
justify-content: center;
74+
}
75+
}
5776
&:hover {
5877
// box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
5978
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
6079
.ugb-button-component {
6180
opacity: 1;
6281
}
82+
83+
.stk-block-design__edit-btn-container {
84+
opacity: 1;
85+
transition-delay: 1s;
86+
}
6387
}
88+
6489
&.ugb--is-hidden {
6590
opacity: 0;
6691
pointer-events: none;
@@ -236,7 +261,6 @@
236261
}
237262
}
238263

239-
240264
.ugb-design-library-items {
241265
.stk-spinner-container {
242266
height: 100%;
@@ -257,3 +281,10 @@
257281
}
258282
}
259283
}
284+
285+
.stk-design-library__item-saved .ugb-design-library-item {
286+
cursor: default;
287+
footer {
288+
cursor: pointer;
289+
}
290+
}

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

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import DesignLibraryListItem from './design-library-list-item'
66
/**
77
* External dependencies
88
*/
9-
import { i18n } from 'stackable'
9+
import { i18n, isPro } from 'stackable'
1010
import classnames from 'classnames'
1111

1212
/**
@@ -19,12 +19,14 @@ import {
1919
} from '@wordpress/element'
2020
import { usePresetControls } from '~stackable/hooks'
2121
import { useDesignLibraryContext } from '../modal-design-library/modal'
22+
import ProControl from '../pro-control'
2223

2324
const DesignLibraryList = memo( props => {
2425
const {
2526
className = '',
2627
designs,
2728
isBusy,
29+
selectedTab,
2830
} = props
2931
const containerRef = useRef( null )
3032

@@ -41,24 +43,27 @@ const DesignLibraryList = memo( props => {
4143
className="ugb-modal-design-library__designs"
4244
ref={ containerRef }
4345
>
44-
{ isBusy && <Spinner style={ { display: 'block', margin: '0 auto' } } /> }
45-
{ ! isBusy && <>
46-
<div className={ listClasses }>
47-
{ ( designs || [] ).map( ( design, i ) => {
48-
return (
49-
<DesignLibraryItem
50-
design={ design }
51-
key={ design.id || design.designId }
52-
designIndex={ i }
53-
/>
54-
)
55-
} ) }
56-
57-
{ ! ( designs || [] ).length &&
58-
<p className="components-base-control__help" data-testid="nothing-found-note">{ __( 'No designs found', i18n ) }</p>
59-
}
60-
</div>
61-
</> }
46+
{ selectedTab === 'saved' && ! isPro
47+
? <ProControl type="design-library-saved-patterns" />
48+
: <>
49+
{ isBusy && <Spinner style={ { display: 'block', margin: '0 auto' } } /> }
50+
{ ! isBusy && <div className={ listClasses }>
51+
{ ( designs || [] ).map( ( design, i ) => {
52+
return (
53+
<DesignLibraryItem
54+
design={ design }
55+
key={ design.id || design.designId }
56+
designIndex={ i }
57+
/>
58+
)
59+
} ) }
60+
61+
{ ! ( designs || [] ).length &&
62+
<p className="components-base-control__help" data-testid="nothing-found-note">{ __( 'No designs found', i18n ) }</p>
63+
}
64+
</div> }
65+
</>
66+
}
6267
</div>
6368
} )
6469

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export const usePreviewRenderer = (
7070
const siteTitle = useSelect( select => select( 'core' ).getEntityRecord( 'root', 'site' )?.title || 'InnovateCo', [] )
7171
const isDesignLibraryDevMode = devMode && localStorage.getItem( 'stk__design_library__dev_mode' ) === '1'
7272

73-
const addHasBackground = selectedTab === 'patterns'
73+
const addHasBackground = selectedTab !== 'pages'
7474

7575
const updateShadowBodySize = _shadowBody => {
7676
const shadowBody = _shadowBody || shadowRoot?.querySelector( 'body' )
@@ -117,7 +117,7 @@ export const usePreviewRenderer = (
117117
const scaleFactor = cardWidth > 0 ? cardWidth / 1300 : 1 // Divide by 1300, which is the width of preview in the shadow DOM
118118

119119
let _bodyHeight = 1200
120-
if ( selectedTab === 'patterns' ) {
120+
if ( selectedTab !== 'pages' ) {
121121
_bodyHeight = shadowBody.offsetHeight
122122
}
123123

@@ -224,13 +224,13 @@ export const usePreviewRenderer = (
224224
let _parsedBlocksForInsertion = null
225225
const initialize = async () => {
226226
const _content = template
227-
if ( selectedTab === 'patterns' ) {
227+
if ( selectedTab !== 'pages' ) {
228228
const categorySlug = getCategorySlug( designId )
229229

230230
// For preview: always replace placeholders (ignore dev mode)
231-
const _contentForPreview = replacePlaceholders( _content, categorySlug, false )
231+
const _contentForPreview = replacePlaceholders( _content, categorySlug, false, selectedTab )
232232
// For insertion: only create separate content if dev mode is enabled
233-
const _contentForInsertion = isDesignLibraryDevMode ? replacePlaceholders( _content, categorySlug, true ) : _contentForPreview
233+
const _contentForInsertion = isDesignLibraryDevMode ? replacePlaceholders( _content, categorySlug, true, selectedTab ) : _contentForPreview
234234

235235
categoriesRef.current.push( categorySlug )
236236

@@ -248,12 +248,12 @@ export const usePreviewRenderer = (
248248

249249
// For preview: always replace placeholders (ignore dev mode)
250250
const designsContentForPreview = designs.map( ( design, i ) =>
251-
replacePlaceholders( design.template || design.content, categorySlugs[ i ], false )
251+
replacePlaceholders( design.template || design.content, categorySlugs[ i ], false, selectedTab )
252252
).join( '\n' )
253253
// For insertion: only create separate content if dev mode is enabled
254254
const designsContentForInsertion = isDesignLibraryDevMode
255255
? designs.map( ( design, i ) =>
256-
replacePlaceholders( design.template || design.content, categorySlugs[ i ], true )
256+
replacePlaceholders( design.template || design.content, categorySlugs[ i ], true, selectedTab )
257257
).join( '\n' )
258258
: designsContentForPreview
259259

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,11 @@ export const adjustPatternSpacing = ( attributes, category, spacingSize, isDesig
180180
}
181181
}
182182

183-
export const replacePlaceholders = ( designContent, designCategory, isDesignLibraryDevMode ) => {
183+
export const replacePlaceholders = ( designContent, designCategory, isDesignLibraryDevMode, type ) => {
184+
if ( type === 'saved' ) {
185+
return designContent
186+
}
187+
184188
const defaultValues = DEFAULT_CONTENT[ designCategory ]
185189

186190
if ( defaultValues && ! isDesignLibraryDevMode ) {

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -464,3 +464,9 @@ div.ugb-modal-design-library__enable-background {
464464
min-width: unset;
465465
}
466466
}
467+
468+
body:has(.stk-design-library__item-saved) {
469+
.components-snackbar-list {
470+
z-index: 100001;
471+
}
472+
}

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Button from '../button'
55
* External deprendencies
66
*/
77
import {
8-
i18n, isPro, devMode,
8+
i18n, isPro, devMode, showProNotice,
99
} from 'stackable'
1010

1111
/**
@@ -30,21 +30,29 @@ export const HeaderActions = props => {
3030
setDoReset,
3131
onClose,
3232
} = props
33+
34+
let controls = [
35+
{
36+
value: 'patterns',
37+
title: __( 'Patterns', i18n ),
38+
},
39+
{
40+
value: 'pages',
41+
title: __( 'Pages', i18n ),
42+
},
43+
]
44+
45+
controls = ! isPro && ! showProNotice ? controls : [ ...controls, {
46+
value: 'saved',
47+
title: __( 'Saved', i18n ),
48+
} ]
49+
3350
return <>
3451
{ /* DEV NOTE: hide for now */ }
3552
<AdvancedToolbarControl
3653
className="stk-design-library-tabs"
3754
fullwidth={ false }
38-
controls={ [
39-
{
40-
value: 'patterns',
41-
title: __( 'Patterns', i18n ),
42-
},
43-
{
44-
value: 'pages',
45-
title: __( 'Pages', i18n ),
46-
},
47-
] }
55+
controls={ controls }
4856
value={ selectedTab }
4957
onChange={ setSelectedTab }
5058
isToggleOnly={ true }

0 commit comments

Comments
 (0)