33 */
44import { __ } from '@wordpress/i18n' ;
55
6- import { BlockControls , InspectorControls } from '@wordpress/block-editor' ;
6+ import {
7+ BlockControls ,
8+ InspectorControls ,
9+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
10+ __experimentalBlockVariationPicker as BlockVariationPicker ,
11+ } from '@wordpress/block-editor' ;
712
813import {
914 Button ,
@@ -13,9 +18,10 @@ import {
1318 SelectControl ,
1419 ToolbarButton ,
1520 ToolbarGroup ,
21+ TextControl ,
1622} from '@wordpress/components' ;
1723
18- import { useState } from '@wordpress/element' ;
24+ import { Fragment , useState } from '@wordpress/element' ;
1925
2026/**
2127 * Internal dependencies.
@@ -32,9 +38,20 @@ const Controls = ({
3238 onChangeQuery,
3339 setIsEditing,
3440 setIsPreviewing,
41+ variations,
42+ setVariations,
3543} ) => {
3644 const [ isPatternModalOpen , setIsPatternModalOpen ] = useState ( false ) ;
3745
46+ const decodeHtmlEntities = ( str ) => {
47+ if ( typeof str !== 'string' ) {
48+ return str ;
49+ }
50+ const textarea = document . createElement ( 'textarea' ) ;
51+ textarea . innerHTML = str ;
52+ return textarea . value ;
53+ } ;
54+
3855 return (
3956 < >
4057 { isPatternModalOpen && (
@@ -87,6 +104,78 @@ const Controls = ({
87104 </ PanelBody >
88105 ) }
89106
107+ { ! isEditing && (
108+ < PanelBody
109+ initialOpen = { false }
110+ title = { __ ( 'Feed Layout' , 'feedzy-rss-feeds' ) }
111+ key = "source"
112+ >
113+ < BlockVariationPicker
114+ variations = { variations }
115+ onSelect = { setVariations }
116+ />
117+ </ PanelBody >
118+ ) }
119+
120+ < PanelBody
121+ title = { [
122+ __ ( 'Referral URL' , 'feedzy-rss-feeds' ) ,
123+ ! window . feedzyjs . isPro && (
124+ < span className = "fz-pro-label" >
125+ Pro
126+ </ span >
127+ ) ,
128+ ] }
129+ initialOpen = { false }
130+ className = {
131+ window . feedzyjs . isPro
132+ ? 'feedzy-pro-options'
133+ : 'feedzy-pro-options fz-locked'
134+ }
135+ >
136+ { ! window . feedzyjs . isPro && (
137+ < div className = "fz-upsell-notice" >
138+ { __ (
139+ 'Unlock this feature and more advanced options with' ,
140+ 'feedzy-rss-feeds'
141+ ) } { ' ' }
142+ < ExternalLink href = "https://themeisle.com/plugins/feedzy-rss-feeds/upgrade/?utm_source=wpadmin& utm_medium = blockeditor & utm_campaign = refferal & utm_content = feedzy - rss - feeds " >
143+ { __ (
144+ 'Feedzy Pro' ,
145+ 'feedzy-rss-feeds'
146+ ) }
147+ </ ExternalLink >
148+ </ div >
149+ ) }
150+ < TextControl
151+ label = { __ (
152+ 'Referral URL parameters.' ,
153+ 'feedzy-rss-feeds'
154+ ) }
155+ help = { __ (
156+ 'Without ("?")' ,
157+ 'feedzy-rss-feeds'
158+ ) }
159+ placeholder = { decodeHtmlEntities (
160+ '(' +
161+ sprintf (
162+ // translators: %s is the list of examples.
163+ __ (
164+ 'eg: %s' ,
165+ 'feedzy-rss-feeds'
166+ ) ,
167+ 'promo_code=feedzy_is_awesome'
168+ ) +
169+ ')'
170+ ) }
171+ value = { attributes . referral_url }
172+ onChange = { ( value ) => {
173+ window . tiTrk ?. with ( 'feedzy' ) . add ( { feature : 'block-referral-url' } ) ;
174+ setAttributes ( { referral_url : value } ) ;
175+ } }
176+ />
177+ </ PanelBody >
178+
90179 < PanelBody
91180 title = { __ ( 'Settings' , 'feedzy-rss-feeds' ) }
92181 key = "settings"
@@ -117,79 +206,6 @@ const Controls = ({
117206 >
118207 { __ ( 'Feedzy Loop Documentation' , 'feedzy-rss-feeds' ) }
119208 </ ExternalLink >
120-
121- < SelectControl
122- label = { __ ( 'Sorting Order' , 'feedzy-rss-feeds' ) }
123- value = { attributes ?. query ?. sort }
124- options = { [
125- {
126- label : __ ( 'Default' , 'feedzy-rss-feeds' ) ,
127- value : 'default' ,
128- } ,
129- {
130- label : __ (
131- 'Date Descending' ,
132- 'feedzy-rss-feeds'
133- ) ,
134- value : 'date_desc' ,
135- } ,
136- {
137- label : __ ( 'Date Ascending' , 'feedzy-rss-feeds' ) ,
138- value : 'date_asc' ,
139- } ,
140- {
141- label : __ (
142- 'Title Descending' ,
143- 'feedzy-rss-feeds'
144- ) ,
145- value : 'title_desc' ,
146- } ,
147- {
148- label : __ (
149- 'Title Ascending' ,
150- 'feedzy-rss-feeds'
151- ) ,
152- value : 'title_asc' ,
153- } ,
154- ] }
155- onChange = { ( value ) =>
156- onChangeQuery ( { type : 'sort' , value } )
157- }
158- />
159-
160- < SelectControl
161- label = { __ ( 'Feed Caching Time' , 'feedzy-rss-feeds' ) }
162- value = { attributes ?. query ?. refresh || '12_hours' }
163- options = { [
164- {
165- label : __ ( '1 Hour' , 'feedzy-rss-feeds' ) ,
166- value : '1_hours' ,
167- } ,
168- {
169- label : __ ( '2 Hours' , 'feedzy-rss-feeds' ) ,
170- value : '3_hours' ,
171- } ,
172- {
173- label : __ ( '12 Hours' , 'feedzy-rss-feeds' ) ,
174- value : '12_hours' ,
175- } ,
176- {
177- label : __ ( '1 Day' , 'feedzy-rss-feeds' ) ,
178- value : '1_days' ,
179- } ,
180- {
181- label : __ ( '3 Days' , 'feedzy-rss-feeds' ) ,
182- value : '3_days' ,
183- } ,
184- {
185- label : __ ( '15 Days' , 'feedzy-rss-feeds' ) ,
186- value : '15_days' ,
187- } ,
188- ] }
189- onChange = { ( value ) =>
190- onChangeQuery ( { type : 'refresh' , value } )
191- }
192- />
193209 </ PanelBody >
194210
195211 < PanelBody
@@ -239,6 +255,81 @@ const Controls = ({
239255 />
240256 </ PanelBody >
241257 </ InspectorControls >
258+
259+ < InspectorControls group = 'advanced' >
260+ < SelectControl
261+ label = { __ ( 'Sorting Order' , 'feedzy-rss-feeds' ) }
262+ value = { attributes ?. query ?. sort }
263+ options = { [
264+ {
265+ label : __ ( 'Default' , 'feedzy-rss-feeds' ) ,
266+ value : 'default' ,
267+ } ,
268+ {
269+ label : __ (
270+ 'Date Descending' ,
271+ 'feedzy-rss-feeds'
272+ ) ,
273+ value : 'date_desc' ,
274+ } ,
275+ {
276+ label : __ ( 'Date Ascending' , 'feedzy-rss-feeds' ) ,
277+ value : 'date_asc' ,
278+ } ,
279+ {
280+ label : __ (
281+ 'Title Descending' ,
282+ 'feedzy-rss-feeds'
283+ ) ,
284+ value : 'title_desc' ,
285+ } ,
286+ {
287+ label : __ (
288+ 'Title Ascending' ,
289+ 'feedzy-rss-feeds'
290+ ) ,
291+ value : 'title_asc' ,
292+ } ,
293+ ] }
294+ onChange = { ( value ) =>
295+ onChangeQuery ( { type : 'sort' , value } )
296+ }
297+ />
298+
299+ < SelectControl
300+ label = { __ ( 'Feed Caching Time' , 'feedzy-rss-feeds' ) }
301+ value = { attributes ?. query ?. refresh || '12_hours' }
302+ options = { [
303+ {
304+ label : __ ( '1 Hour' , 'feedzy-rss-feeds' ) ,
305+ value : '1_hours' ,
306+ } ,
307+ {
308+ label : __ ( '2 Hours' , 'feedzy-rss-feeds' ) ,
309+ value : '3_hours' ,
310+ } ,
311+ {
312+ label : __ ( '12 Hours' , 'feedzy-rss-feeds' ) ,
313+ value : '12_hours' ,
314+ } ,
315+ {
316+ label : __ ( '1 Day' , 'feedzy-rss-feeds' ) ,
317+ value : '1_days' ,
318+ } ,
319+ {
320+ label : __ ( '3 Days' , 'feedzy-rss-feeds' ) ,
321+ value : '3_days' ,
322+ } ,
323+ {
324+ label : __ ( '15 Days' , 'feedzy-rss-feeds' ) ,
325+ value : '15_days' ,
326+ } ,
327+ ] }
328+ onChange = { ( value ) =>
329+ onChangeQuery ( { type : 'refresh' , value } )
330+ }
331+ />
332+ </ InspectorControls >
242333 </ >
243334 ) ;
244335} ;
0 commit comments