Skip to content

Commit 70a4a38

Browse files
preda-bogdanpreda-bogdan
authored
release: small fixes
### New Features - **New button** to import a TPC template directly into a post, page, or custom layout ### Improvements - **Updated dependencies** ### Bug Fixes - **Fixed Elementor content** on template import. - **Fixed typo** in onboarding text.
2 parents 4ca92b0 + e29d720 commit 70a4a38

38 files changed

+1285
-543
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ vendor
77
languages/*.pot
88
**/build/*
99
**/.DS_Store
10-
.phpunit.result.cache
10+
.phpunit.result.cache
11+
.vscode

‎assets/src/Components/CategorySelector.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const CategorySelector = ( {
3232
<Popover
3333
position="bottom center"
3434
onClose={ toggleDropdown }
35+
inline
3536
noArrow
3637
>
3738
{ open && (

‎assets/src/Components/CloudLibrary/Filters.js‎

Lines changed: 92 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,102 @@
1+
/* global tiobDash */
12
import classnames from 'classnames';
23
import { alignJustify, closeSmall, grid, search } from '@wordpress/icons';
34
import { ENTER } from '@wordpress/keycodes';
45
import { __ } from '@wordpress/i18n';
5-
import { Button } from '@wordpress/components';
6+
import { Button, Dashicon, Popover } from '@wordpress/components';
7+
import {useState} from "@wordpress/element";
68

79
const sortByOptions = {
810
date: __( 'Date' ),
911
template_name: __( 'Name' ),
1012
modified: __( 'Last Modified' ),
1113
};
1214

15+
const EditorSelector = ( { type, setType } ) => {
16+
const [ open, setOpen ] = useState( false );
17+
const toggleDropdown = () => setOpen( ! open );
18+
19+
const EDITOR_MAP = {
20+
gutenberg: {
21+
label: __( 'Gutenberg', 'templates-patterns-collection' ),
22+
icon: 'gutenberg.jpg',
23+
},
24+
elementor: {
25+
label: __( 'Elementor', 'templates-patterns-collection' ),
26+
icon: 'elementor.jpg',
27+
},
28+
beaver: {
29+
label: __( 'Beaver', 'templates-patterns-collection' ),
30+
icon: 'beaver.jpg',
31+
},
32+
};
33+
34+
const editorMapFiltered = Object.keys( EDITOR_MAP ).filter( ( key ) => {
35+
return key !== type;
36+
});
37+
38+
const wrapClasses = classnames( [
39+
'ob-dropdown',
40+
'editor-selector',
41+
'filter-selector',
42+
] );
43+
return (
44+
<div className={ wrapClasses }>
45+
<Button onClick={ toggleDropdown } className="select ob-dropdown">
46+
<Dashicon
47+
size={ 14 }
48+
icon={ open ? 'arrow-up-alt2' : 'arrow-down-alt2' }
49+
/>
50+
<img
51+
className="editor-icon"
52+
src={ tiobDash.assets + 'img/' + EDITOR_MAP[ type ].icon }
53+
alt={ __(
54+
'Builder Logo',
55+
'templates-patterns-collection'
56+
) }
57+
/>
58+
{ open && (
59+
<Popover
60+
position="bottom center"
61+
onClose={ toggleDropdown }
62+
noArrow
63+
inline
64+
>
65+
{ open && (
66+
<ul className="options">
67+
{ editorMapFiltered.map( ( key, index ) => {
68+
return (
69+
<li key={ index }>
70+
<a
71+
href="#"
72+
onClick={ ( e ) => {
73+
e.preventDefault();
74+
setType( key );
75+
setOpen( false );
76+
} }
77+
>
78+
<img
79+
className="editor-icon"
80+
src={
81+
tiobDash.assets +
82+
'img/' +
83+
EDITOR_MAP[ key ].icon
84+
}
85+
alt={ EDITOR_MAP[ key ].label }
86+
/>
87+
</a>
88+
</li>
89+
);
90+
} ) }
91+
</ul>
92+
) }
93+
</Popover>
94+
) }
95+
</Button>
96+
</div>
97+
);
98+
}
99+
13100
const Filters = ( {
14101
isGrid,
15102
setGrid,
@@ -20,6 +107,9 @@ const Filters = ( {
20107
sortingOrder,
21108
setSortingOrder,
22109
changeOrder,
110+
EDITOR_MAP,
111+
type,
112+
setType,
23113
} ) => {
24114
return (
25115
<div className="filters">
@@ -106,6 +196,7 @@ const Filters = ( {
106196
onClick={ () => setGrid( true ) }
107197
isPressed={ isGrid }
108198
/>
199+
<EditorSelector EDITOR_MAP={EDITOR_MAP} type={ type } setType={ setType } />
109200
</div>
110201
</div>
111202
</div>

‎assets/src/Components/CloudLibrary/ImportTemplatesModal.js‎

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -179,12 +179,12 @@ const ImportTemplatesModal = ( {
179179
<p className="description">
180180
{ isSingle
181181
? __(
182-
'Template was successfully imported!',
183-
'templates-patterns-collection'
182+
'Template was successfully imported!',
183+
'templates-patterns-collection'
184184
)
185185
: __(
186-
'Templates were successfully imported!',
187-
'templates-patterns-collection'
186+
'Templates were successfully imported!',
187+
'templates-patterns-collection'
188188
) }
189189
</p>
190190
</div>
@@ -197,7 +197,9 @@ const ImportTemplatesModal = ( {
197197
icon={ pageIcon }
198198
className="active"
199199
/>
200-
<span>{ parseEntities( page.title ) }</span>
200+
<span>
201+
{ parseEntities( page.title ) }
202+
</span>
201203
<div className="actions">
202204
<Button
203205
isTertiary
@@ -274,16 +276,16 @@ const ImportTemplatesModal = ( {
274276

275277
const text = isSingle
276278
? sprintf(
277-
/* translators: %s the name of the template */
278-
__(
279-
'The %s template will be imported as a page into your site. This import will install & activate the page builder plugin if not already installed.',
280-
'templates-patterns-collection'
281-
),
282-
templatesData[ 0 ].template_name
279+
/* translators: %s the name of the template */
280+
__(
281+
'The %s template will be imported as a page into your site. This import will install & activate the page builder plugin if not already installed.',
282+
'templates-patterns-collection'
283+
),
284+
templatesData[ 0 ].template_name
283285
)
284286
: __(
285-
'All the templates that are included in this starter site, will be imported as pages. This import will install & activate the page builder plugin if not already installed.',
286-
'templates-patterns-collection'
287+
'All the templates that are included in this starter site, will be imported as pages. This import will install & activate the page builder plugin if not already installed.',
288+
'templates-patterns-collection'
287289
);
288290

289291
return text;
@@ -307,13 +309,13 @@ const ImportTemplatesModal = ( {
307309
isSingle
308310
? /* translators: name of starter site */
309311
__(
310-
'Import the %s template',
311-
'templates-patterns-collection'
312+
'Import the %s template',
313+
'templates-patterns-collection'
312314
)
313315
: /* translators: name of template */
314316
__(
315-
'Import all templates from %s',
316-
'templates-patterns-collection'
317+
'Import all templates from %s',
318+
'templates-patterns-collection'
317319
),
318320
isSingle
319321
? templatesData[ 0 ].template_name
@@ -346,8 +348,8 @@ const ImportTemplatesModal = ( {
346348
{ importing
347349
? __( 'Importing' ) + '...'
348350
: isSingle
349-
? __( 'Import' )
350-
: __( 'Import All Pages' ) }
351+
? __( 'Import' )
352+
: __( 'Import All Pages' ) }
351353
</Button>
352354
</div>
353355
</>
@@ -358,8 +360,12 @@ const ImportTemplatesModal = ( {
358360
<Modal
359361
className={ classnames( [ 'ob-import-modal', { fetching } ] ) }
360362
onRequestClose={ cancel }
361-
shouldCloseOnClickOutside={ ( ! importing || importing === 'done' ) && ! fetching }
362-
isDismissible={ ( ! importing || importing === 'done' ) && ! fetching }
363+
shouldCloseOnClickOutside={
364+
( ! importing || importing === 'done' ) && ! fetching
365+
}
366+
isDismissible={
367+
( ! importing || importing === 'done' ) && ! fetching
368+
}
363369
>
364370
{ importing === 'done' ? <ImportDone /> : <ModalContent /> }
365371
</Modal>
@@ -375,10 +381,9 @@ export default compose(
375381
};
376382
} ),
377383
withDispatch( ( dispatch ) => {
378-
const {
379-
setTemplateModal,
380-
setImportModalStatus,
381-
} = dispatch( 'neve-onboarding' );
384+
const { setTemplateModal, setImportModalStatus } = dispatch(
385+
'neve-onboarding'
386+
);
382387

383388
return {
384389
cancel: () => {

‎assets/src/Components/CloudLibrary/Library.js‎

Lines changed: 8 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import ImportTemplatesModal from './ImportTemplatesModal';
1717
import Logo from '../Icon';
1818
import { LicensePanelContext } from '../LicensePanelContext';
1919
import FeedbackNotice from "./FeedbackNotice";
20+
import {EDITOR_MAP} from "../../utils/common";
21+
import EditorSelector from "../EditorSelector";
2022

2123
const Library = ( {
2224
isGeneral,
@@ -61,6 +63,8 @@ const Library = ( {
6163
},
6264
} );
6365

66+
67+
6468
useEffect( () => {
6569
setLoading( true );
6670
setSearchQuery( '' );
@@ -328,7 +332,7 @@ const Library = ( {
328332
) }
329333

330334
{ showLicenseToggle && (
331-
<Button isLink style={{ marginLeft: '12px' }} onClick={ () => { setLicenseOpen(true) } }>
335+
<Button isLink style={{ marginLeft: '12px' }} href={ tiobDash?.tiobSettings }>
332336
{ __( 'I already have a key', 'template-patterns-collection' ) }
333337
</Button>
334338
) }
@@ -358,36 +362,7 @@ const Library = ( {
358362
return (
359363
<div className={ wrapClasses }>
360364
<>
361-
<div className="editor-tabs">
362-
{ Object.keys( EDITORS ).map( ( key ) => (
363-
// eslint-disable-next-line jsx-a11y/anchor-is-valid
364-
<a
365-
key={ key }
366-
href="#"
367-
onClick={ () => {
368-
setType( key );
369-
setSearch( false );
370-
} }
371-
className={ classnames( 'tab', {
372-
active: type === key,
373-
} ) }
374-
>
375-
<span className="icon-wrap">
376-
<img
377-
className="editor-icon"
378-
src={
379-
window.tiobDash.assets +
380-
'img/' +
381-
EDITORS[ key ].icon
382-
}
383-
alt={ EDITORS[ key ].label }
384-
/>
385-
</span>
386-
<span className="editor">
387-
{ EDITORS[ key ].label }
388-
</span>
389-
</a>
390-
) ) }
365+
<div style={ { display: "flex" } }>
391366
<FeedbackNotice importTemplate={templateModal} />
392367
</div>
393368
<Filters
@@ -401,6 +376,8 @@ const Library = ( {
401376
sortingOrder={ getOrder() }
402377
setSortingOrder={ setSorting }
403378
changeOrder={ changeOrder }
379+
type={ type }
380+
setType={ setType }
404381
/>
405382
{ isLoading && <Loading isGrid={ isGrid } /> }
406383
{ ! isLoading &&

‎assets/src/Components/CloudLibrary/common.js‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import apiFetch from '@wordpress/api-fetch';
44
import { stringifyUrl } from 'query-string';
55
import { v4 as uuidv4 } from 'uuid';
66
import { models, loadPromise } from '@wordpress/api';
7+
import { cleanTemplateContent } from '../../../../shared/utils';
78

89
export const changeOption = ( option, value ) => {
910
const model = new models.Settings( {
@@ -23,10 +24,10 @@ export const changeOption = ( option, value ) => {
2324

2425
export const fetchOptions = () => {
2526
let settings;
26-
return loadPromise.then(() => {
27+
return loadPromise.then( () => {
2728
settings = new models.Settings();
2829
return settings.fetch();
29-
});
30+
} );
3031
};
3132

3233
export const fetchLibrary = async (
@@ -143,14 +144,17 @@ export const deleteTemplate = async ( id ) => {
143144
};
144145

145146
export const fetchBulkData = async ( templates ) => {
146-
const url = stringifyUrl( {
147-
url: `${ tiobDash.endpoint }templates/bulk-import`,
148-
query: {
149-
templates,
150-
cache: localStorage.getItem( 'tpcCacheBuster' ),
151-
...tiobDash.params,
147+
const url = stringifyUrl(
148+
{
149+
url: `${ tiobDash.endpoint }templates/bulk-import`,
150+
query: {
151+
templates,
152+
cache: localStorage.getItem( 'tpcCacheBuster' ),
153+
...tiobDash.params,
154+
},
152155
},
153-
}, {arrayFormat: 'index'} );
156+
{ arrayFormat: 'index' }
157+
);
154158

155159
try {
156160
const response = await apiFetch( { url, method: 'GET', parse: false } );
@@ -165,6 +169,17 @@ export const fetchBulkData = async ( templates ) => {
165169
return { success: false, message: data.message };
166170
}
167171

172+
if ( Array.isArray( data ) ) {
173+
data.forEach( ( template ) => {
174+
cleanTemplateContent( template, ( element ) => {
175+
// Remove imported images ID since they are not available on the current site via Media Library.
176+
delete element?.settings?.image?.id;
177+
delete element?.settings?.background_image?.id;
178+
delete element?.settings?.background_overlay_image?.id;
179+
} );
180+
} );
181+
}
182+
168183
return { success: true, templates: data };
169184
}
170185
} catch ( error ) {

‎assets/src/Components/EditorSelector.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const EditorSelector = ( {
4343
position="bottom center"
4444
onClose={ toggleDropdown }
4545
noArrow
46+
inline
4647
>
4748
{ open && (
4849
<ul className="options">

0 commit comments

Comments
 (0)