1
|
|
|
<?php |
2
|
|
|
/** |
3
|
|
|
* FooGallery Blocks Initializer |
4
|
|
|
* |
5
|
|
|
* Enqueue CSS/JS of all the FooGallery blocks. |
6
|
|
|
* |
7
|
|
|
* @since 1.0.0 |
8
|
|
|
* @package CGB |
9
|
|
|
*/ |
10
|
|
|
|
11
|
|
|
if ( ! class_exists( 'FooGallery_Blocks' ) ) { |
12
|
|
|
class FooGallery_Blocks { |
|
|
|
|
13
|
|
|
|
14
|
|
|
function __construct() { |
|
|
|
|
15
|
|
|
//Frontend block assets. |
16
|
|
|
add_action( 'enqueue_block_assets', array( $this, 'enqueue_block_assets' ) ); |
17
|
|
|
|
18
|
|
|
//Backend editor block assets. |
19
|
|
|
add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) ); |
20
|
|
|
|
21
|
|
|
add_action( 'init', array( $this, 'php_block_init' ) ); |
22
|
|
|
} |
23
|
|
|
|
24
|
|
|
/** |
25
|
|
|
* Enqueue Gutenberg block assets for backend editor. |
26
|
|
|
* |
27
|
|
|
* `wp-blocks`: includes block type registration and related functions. |
28
|
|
|
* `wp-element`: includes the WordPress Element abstraction for describing the structure of your blocks. |
29
|
|
|
* `wp-i18n`: To internationalize the block's text. |
30
|
|
|
* |
31
|
|
|
* @since 1.0.0 |
32
|
|
|
*/ |
33
|
|
|
function enqueue_block_editor_assets() { |
|
|
|
|
34
|
|
|
|
35
|
|
|
$js_url = plugins_url( 'gutenberg/dist/blocks.build.js', dirname( __FILE__ ) ); |
36
|
|
|
|
37
|
|
|
foogallery_enqueue_core_gallery_template_script(); |
38
|
|
|
|
39
|
|
|
// Scripts. |
40
|
|
|
wp_enqueue_script( |
41
|
|
|
'foogallery-block-js', // Handle. |
42
|
|
|
$js_url, // Block.build.js: We register the block here. Built with Webpack. |
43
|
|
|
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'foogallery-core' ), // Dependencies, defined above. |
44
|
|
|
// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: filemtime — Gets file modification time. |
|
|
|
|
45
|
|
|
true // Enqueue the script in the footer. |
46
|
|
|
); |
47
|
|
|
|
48
|
|
|
foogallery_enqueue_core_gallery_template_style(); |
49
|
|
|
|
50
|
|
|
// Styles. |
51
|
|
|
wp_enqueue_style( |
52
|
|
|
'foogallery-block-editor-css', // Handle. |
53
|
|
|
plugins_url( 'gutenberg/dist/blocks.editor.build.css', dirname( __FILE__ ) ), // Block editor CSS. |
54
|
|
|
array( 'wp-edit-blocks', 'foogallery-core' ) // Dependency to include the CSS after it. |
55
|
|
|
// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: filemtime — Gets file modification time. |
|
|
|
|
56
|
|
|
); |
57
|
|
|
|
58
|
|
|
add_action( 'admin_footer', array( $this, 'render_gallery_modal' ) ); |
59
|
|
|
} |
60
|
|
|
|
61
|
|
|
/** |
62
|
|
|
* Enqueue Gutenberg block assets for both frontend + backend. |
63
|
|
|
* |
64
|
|
|
* `wp-blocks`: includes block type registration and related functions. |
65
|
|
|
* |
66
|
|
|
* @since 1.0.0 |
67
|
|
|
*/ |
68
|
|
|
function enqueue_block_assets() { |
|
|
|
|
69
|
|
|
// Styles. |
70
|
|
|
wp_enqueue_style( |
71
|
|
|
'foogallery-block-css', |
72
|
|
|
plugins_url( 'gutenberg/dist/blocks.style.build.css', dirname( __FILE__ ) ), |
73
|
|
|
array( 'wp-blocks' ) |
74
|
|
|
); |
75
|
|
|
} |
76
|
|
|
|
77
|
|
|
/** |
78
|
|
|
* Register our block and shortcode. |
79
|
|
|
*/ |
80
|
|
|
function php_block_init() { |
|
|
|
|
81
|
|
|
if ( function_exists( 'register_block_type' ) ) { |
82
|
|
|
// Register our block, and explicitly define the attributes we accept. |
83
|
|
|
register_block_type( |
84
|
|
|
'foogallery/responsive-gallery', array( |
85
|
|
|
'attributes' => array( |
86
|
|
|
'foo' => array( |
87
|
|
|
'type' => 'string', |
88
|
|
|
), |
89
|
|
|
), |
90
|
|
|
'render_callback' => array( $this, 'render_block' ), |
91
|
|
|
)); |
92
|
|
|
} |
93
|
|
|
} |
94
|
|
|
|
95
|
|
|
function render_block( $attributes ) { |
|
|
|
|
96
|
|
|
$foogallery_id = $attributes['foo']; |
97
|
|
|
$args = array( |
98
|
|
|
'id' => $foogallery_id |
99
|
|
|
); |
100
|
|
|
//create new instance of template engine |
101
|
|
|
$engine = new FooGallery_Template_Loader(); |
102
|
|
|
|
103
|
|
|
ob_start(); |
104
|
|
|
|
105
|
|
|
$engine->render_template( $args ); |
106
|
|
|
|
107
|
|
|
$output_string = ob_get_contents(); |
108
|
|
|
ob_end_clean(); |
109
|
|
|
return $output_string; |
110
|
|
|
//"<script type='text/javascript'>setTimeout(function(){ jQuery('#foogallery-gallery-{$foogallery_id}').foogallery(); }, 5000);</script>"; |
111
|
|
|
} |
112
|
|
|
|
113
|
|
|
/** |
114
|
|
|
* Renders the gallery modal for use in the editor |
115
|
|
|
*/ |
116
|
|
|
public function render_gallery_modal() { |
117
|
|
|
|
118
|
|
|
?> |
119
|
|
|
<style> |
120
|
|
|
.foogallery-modal-reload-container { |
121
|
|
|
display: inline-block; |
122
|
|
|
margin-left: 10px; |
123
|
|
|
} |
124
|
|
|
.foogallery-modal-reload-container a.button { |
125
|
|
|
margin-top:10px !important; |
126
|
|
|
} |
127
|
|
|
.foogallery-modal-reload-container a span { |
128
|
|
|
margin-top: 3px; |
129
|
|
|
} |
130
|
|
|
.foogallery-modal-reload-container .spinner { |
131
|
|
|
position: absolute; |
132
|
|
|
top: 15px; |
133
|
|
|
display: inline-block; |
134
|
|
|
margin-left: 5px; |
135
|
|
|
} |
136
|
|
|
|
137
|
|
|
.foogallery-pile { |
138
|
|
|
position: relative; |
139
|
|
|
z-index: 10; |
140
|
|
|
float: left; |
141
|
|
|
margin: 10px 20px 30px 20px !important; |
142
|
|
|
} |
143
|
|
|
|
144
|
|
|
.foogallery-pile .foogallery-gallery-select { |
145
|
|
|
max-width: 100%; |
146
|
|
|
vertical-align: bottom; |
147
|
|
|
border: 8px solid #fff; |
148
|
|
|
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); |
149
|
|
|
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); |
150
|
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); |
151
|
|
|
overflow: hidden; |
152
|
|
|
width: 200px; |
153
|
|
|
height: 200px; |
154
|
|
|
cursor: pointer; |
155
|
|
|
background-position: center center; |
156
|
|
|
background-size: cover !important; |
157
|
|
|
} |
158
|
|
|
|
159
|
|
|
/* Stacks creted by the use of generated content */ |
160
|
|
|
.foogallery-pile:before, .foogallery-pile:after { |
161
|
|
|
content: ""; |
162
|
|
|
width: 100%; |
163
|
|
|
height: 100%; |
164
|
|
|
position: absolute; |
165
|
|
|
border: 8px solid #fff; |
166
|
|
|
left: 0; |
167
|
|
|
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); |
168
|
|
|
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); |
169
|
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); |
170
|
|
|
-webkit-box-sizing: border-box; |
171
|
|
|
-moz-box-sizing: border-box; |
172
|
|
|
box-sizing: border-box; |
173
|
|
|
} |
174
|
|
|
/* 1st element in stack (behind image) */ |
175
|
|
|
.foogallery-pile:before { |
176
|
|
|
top: -3px; z-index: -10; |
177
|
|
|
-webkit-transform: rotate(2deg); |
178
|
|
|
-moz-transform: rotate(2deg); |
179
|
|
|
transform: rotate(2deg); |
180
|
|
|
} |
181
|
|
|
/* 2nd element in stack (behind image) */ |
182
|
|
|
.foogallery-pile:after { |
183
|
|
|
top: -2px; z-index: -20; |
184
|
|
|
-webkit-transform: rotate(-2deg); |
185
|
|
|
-moz-transform: rotate(-2deg); |
186
|
|
|
transform: rotate(-2deg); |
187
|
|
|
} |
188
|
|
|
|
189
|
|
|
.foogallery-gallery-select.selected { |
190
|
|
|
border-color: #1E8CBE; |
191
|
|
|
} |
192
|
|
|
|
193
|
|
|
.foogallery-gallery-select.selected::before { |
194
|
|
|
content: "\f147"; |
195
|
|
|
display: inline-block; |
196
|
|
|
font: normal 100px/110px 'dashicons'; |
197
|
|
|
position: absolute; |
198
|
|
|
color: #FFF; |
199
|
|
|
top: 40%; |
200
|
|
|
left: 50%; |
201
|
|
|
margin-left: -50px; |
202
|
|
|
margin-top: -50px; |
203
|
|
|
speak: none; |
204
|
|
|
-webkit-font-smoothing: antialiased; |
205
|
|
|
background: #1E8CBE; |
206
|
|
|
border-radius: 50%; |
207
|
|
|
width: 100px; |
208
|
|
|
height: 100px; |
209
|
|
|
z-index: 4; |
210
|
|
|
} |
211
|
|
|
|
212
|
|
|
.foogallery-gallery-select-inner { |
213
|
|
|
opacity: 0.8; |
214
|
|
|
position: absolute; |
215
|
|
|
bottom: 8px; |
216
|
|
|
left:8px; |
217
|
|
|
right:8px; |
218
|
|
|
padding: 5px; |
219
|
|
|
background: #FFF; |
220
|
|
|
text-align: center; |
221
|
|
|
} |
222
|
|
|
|
223
|
|
|
.foogallery-gallery-select-inner h3 { |
224
|
|
|
display: block; |
225
|
|
|
margin: 0; |
226
|
|
|
} |
227
|
|
|
|
228
|
|
|
.foogallery-gallery-select-inner span { |
229
|
|
|
display: block; |
230
|
|
|
font-size: 0.9em; |
231
|
|
|
} |
232
|
|
|
|
233
|
|
|
.foogallery-add-gallery { |
234
|
|
|
background: #444; |
235
|
|
|
} |
236
|
|
|
|
237
|
|
|
.foogallery-add-gallery span::after { |
238
|
|
|
background: #ddd; |
239
|
|
|
-webkit-border-radius: 50%; |
240
|
|
|
border-radius: 50%; |
241
|
|
|
display: inline-block; |
242
|
|
|
content: '\f132'; |
243
|
|
|
-webkit-font-smoothing: antialiased; |
244
|
|
|
font: normal 75px/115px 'dashicons'; |
245
|
|
|
width: 100px; |
246
|
|
|
height: 100px; |
247
|
|
|
vertical-align: middle; |
248
|
|
|
text-align: center; |
249
|
|
|
color: #999; |
250
|
|
|
position: absolute; |
251
|
|
|
top: 40%; |
252
|
|
|
left: 50%; |
253
|
|
|
margin-left: -50px; |
254
|
|
|
margin-top: -50px; |
255
|
|
|
padding: 0; |
256
|
|
|
text-shadow: none; |
257
|
|
|
z-index: 4; |
258
|
|
|
text-indent: -4px; |
259
|
|
|
} |
260
|
|
|
|
261
|
|
|
.foogallery-add-gallery:hover span::after { |
262
|
|
|
background: #1E8CBE; |
263
|
|
|
color: #444; |
264
|
|
|
} |
265
|
|
|
|
266
|
|
|
</style> |
267
|
|
|
<?php wp_nonce_field( 'foogallery_load_galleries', 'foogallery_load_galleries', false ); ?> |
268
|
|
|
<div class="foogallery-modal-wrapper" style="display: none;"> |
269
|
|
|
<div class="media-modal wp-core-ui"> |
270
|
|
|
<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text">Close media panel</span></span></button> |
271
|
|
|
<div class="media-modal-content"> |
272
|
|
|
<div class="media-frame wp-core-ui hide-menu hide-router foogallery-meta-wrap"> |
273
|
|
|
<div class="media-frame-title"> |
274
|
|
|
<h1> |
275
|
|
|
<?php _e( 'Choose a gallery to insert', 'foogallery' ); ?> |
276
|
|
|
<div class="foogallery-modal-reload-container"> |
277
|
|
|
<div class="spinner"></div> |
278
|
|
|
<a class="foogallery-modal-reload button" href="#"><span class="dashicons dashicons-update"></span> <?php _e( 'Reload', 'foogallery' ); ?></a> |
279
|
|
|
</div> |
280
|
|
|
</h1> |
281
|
|
|
</div> |
282
|
|
|
<div class="media-frame-content"> |
283
|
|
|
<div class="attachments-browser"> |
284
|
|
|
<ul class="foogallery-attachment-container attachments" style="padding-left: 8px; top: 1em;"> |
285
|
|
|
<div class="foogallery-modal-loading"><?php _e( 'Loading galleries...', 'foogallery' ); ?></div> |
286
|
|
|
</ul> |
287
|
|
|
<!-- end .foogallery-meta --> |
288
|
|
|
<div class="media-sidebar"> |
289
|
|
|
<div class="foogallery-modal-sidebar"> |
290
|
|
|
<h3><?php _e( 'Select A Gallery', 'foogallery' ); ?></h3> |
291
|
|
|
<p> |
292
|
|
|
<?php _e( 'Select a gallery by clicking it, and then click the "Insert Gallery" button to insert it into your content.', 'foogallery' ); ?> |
293
|
|
|
</p> |
294
|
|
|
<h3><?php _e( 'Add A Gallery', 'foogallery' ); ?></h3> |
295
|
|
|
<p> |
296
|
|
|
<?php _e( 'You can add a new gallery by clicking the "Add New Gallery" tile on the left. It will open in a new window.', 'foogallery' ); ?> |
297
|
|
|
</p> |
298
|
|
|
<p> |
299
|
|
|
<?php _e( 'Once you have finished adding a gallery, come back to this dialog and click the "Reload" button to see your newly created gallery.', 'foogallery' ); ?> |
300
|
|
|
</p> |
301
|
|
|
</div> |
302
|
|
|
<!-- end .foogallery-meta-sidebar --> |
303
|
|
|
</div> |
304
|
|
|
<!-- end .media-sidebar --> |
305
|
|
|
</div> |
306
|
|
|
<!-- end .attachments-browser --> |
307
|
|
|
</div> |
308
|
|
|
<!-- end .media-frame-content --> |
309
|
|
|
<div class="media-frame-toolbar"> |
310
|
|
|
<div class="media-toolbar"> |
311
|
|
|
<div class="media-toolbar-secondary"> |
312
|
|
|
<a href="#" class="foogallery-modal-cancel button media-button button-large button-secondary media-button-insert" title="<?php esc_attr_e( 'Cancel', 'foogallery' ); ?>"><?php _e( 'Cancel', 'foogallery' ); ?></a> |
313
|
|
|
</div> |
314
|
|
|
<div class="media-toolbar-primary"> |
315
|
|
|
<a href="#" class="foogallery-modal-insert button media-button button-large button-primary media-button-insert" disabled="disabled" |
316
|
|
|
title="<?php esc_attr_e( 'Insert Gallery', 'foogallery' ); ?>"><?php _e( 'Insert Gallery', 'foogallery' ); ?></a> |
317
|
|
|
</div> |
318
|
|
|
<!-- end .media-toolbar-primary --> |
319
|
|
|
</div> |
320
|
|
|
<!-- end .media-toolbar --> |
321
|
|
|
</div> |
322
|
|
|
<!-- end .media-frame-toolbar --> |
323
|
|
|
</div> |
324
|
|
|
<!-- end .media-frame --> |
325
|
|
|
</div> |
326
|
|
|
<!-- end .media-modal-content --> |
327
|
|
|
</div> |
328
|
|
|
<!-- end .media-modal --> |
329
|
|
|
<div class="media-modal-backdrop"></div> |
330
|
|
|
</div> |
331
|
|
|
<?php |
332
|
|
|
} |
333
|
|
|
|
334
|
|
|
} |
335
|
|
|
} |
336
|
|
|
|
You can fix this by adding a namespace to your class:
When choosing a vendor namespace, try to pick something that is not too generic to avoid conflicts with other libraries.