|
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.