PluginProbe ʕ •ᴥ•ʔ
FrontBlocks for Gutenberg/GeneratePress / 1.0.3
FrontBlocks for Gutenberg/GeneratePress v1.0.3
trunk 0.2.0 0.2.1 0.2.2 0.2.3 0.2.4 0.2.5 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 1.1.0 1.2.0 1.2.1 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 ci-artifacts
frontblocks / includes / Frontend / Gallery.php
frontblocks / includes / Frontend Last commit date
Animations.php 9 months ago Carousel.php 9 months ago Gallery.php 9 months ago InsertPost.php 9 months ago StickyColumn.php 9 months ago Testimonials.php 9 months ago
Gallery.php
224 lines
1 <?php
2 /**
3 * Gallery module for FrontBlocks.
4 *
5 * @package FrontBlocks
6 * @author David Perez <david@close.technology>
7 * @copyright 2023 Closemarketing
8 * @version 1.0
9 */
10
11 namespace FrontBlocks\Frontend;
12
13 defined( 'ABSPATH' ) || exit;
14
15 /**
16 * Gallery class.
17 *
18 * @since 1.0.0
19 */
20 class Gallery {
21
22 /**
23 * Constructor.
24 */
25 public function __construct() {
26 $this->init_hooks();
27 }
28
29 /**
30 * Initialize hooks.
31 *
32 * @return void
33 */
34 private function init_hooks() {
35 add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ), 99 );
36 add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) );
37 add_filter( 'render_block_core/gallery', array( $this, 'add_custom_attributes_to_gallery_block' ), 10, 2 );
38 add_action( 'init', array( $this, 'register_custom_attributes' ), 5 );
39 }
40
41 /**
42 * Enqueue scripts and styles.
43 *
44 * @return void
45 */
46 public function enqueue_scripts() {
47 $dist_dir = WP_DEBUG ? 'gallery/' : 'dist/';
48
49 wp_enqueue_style(
50 'frontblocks-gallery',
51 FRBL_PLUGIN_URL . 'assets/' . $dist_dir . 'frontblocks-gallery.css',
52 array(),
53 FRBL_VERSION
54 );
55
56 // Enqueue Masonry library.
57 wp_enqueue_script(
58 'frontblocks-masonry',
59 FRBL_PLUGIN_URL . 'assets/dist/masonry.min.js',
60 array(),
61 '4.2.2',
62 true
63 );
64
65 wp_enqueue_script(
66 'frontblocks-gallery-custom',
67 FRBL_PLUGIN_URL . 'assets/' . $dist_dir . ( WP_DEBUG ? 'frontblocks-gallery.js' : 'frontblocks-gallery-min.js' ),
68 array( 'frontblocks-masonry' ),
69 FRBL_VERSION,
70 true
71 );
72 }
73
74 /**
75 * Enqueue block editor assets.
76 *
77 * @return void
78 */
79 public function enqueue_block_editor_assets() {
80 wp_enqueue_script(
81 'frontblocks-gallery-option',
82 FRBL_PLUGIN_URL . 'assets/dist/frontblocks-gallery-option.js',
83 array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-data', 'wp-edit-post' ),
84 FRBL_VERSION,
85 true
86 );
87 }
88
89 /**
90 * Add custom attributes to gallery block.
91 *
92 * @param string $block_content Block content.
93 * @param array $block Block attributes.
94 * @return string
95 */
96 public function add_custom_attributes_to_gallery_block( $block_content, $block ) {
97 $attrs = $block['attrs'] ?? array();
98 $gallery_layout = isset( $attrs['frblGalleryLayout'] ) ? sanitize_text_field( $attrs['frblGalleryLayout'] ) : 'grid';
99 $gutter_size = isset( $attrs['frblGutterSize'] ) ? (int) $attrs['frblGutterSize'] : 20;
100 $enable_lightbox = isset( $attrs['frblEnableLightbox'] ) ? (bool) $attrs['frblEnableLightbox'] : false;
101
102 // Use WordPress built-in columns setting.
103 $columns = isset( $attrs['columns'] ) ? (int) $attrs['columns'] : 3;
104
105 // Add data attributes to the figure element if masonry is enabled.
106 if ( 'masonry' === $gallery_layout ) {
107 $block_content = preg_replace(
108 '/<figure([^>]*)class="([^"]*wp-block-gallery[^"]*)"([^>]*)>/',
109 '<figure$1class="$2 frontblocks-gallery-masonry"$3' .
110 ' data-layout="' . esc_attr( $gallery_layout ) . '"' .
111 ' data-columns="' . esc_attr( $columns ) . '"' .
112 ' data-gutter="' . esc_attr( $gutter_size ) . '"' .
113 ' data-lightbox="' . esc_attr( $enable_lightbox ? 'true' : 'false' ) . '"' .
114 '>',
115 $block_content,
116 1 // Only replace the first occurrence.
117 );
118 } elseif ( 'grid' === $gallery_layout ) {
119 $block_content = preg_replace(
120 '/<figure([^>]*)class="([^"]*wp-block-gallery[^"]*)"([^>]*)>/',
121 '<figure$1class="$2 frontblocks-gallery-grid"$3' .
122 ' data-layout="' . esc_attr( $gallery_layout ) . '"' .
123 ' data-columns="' . esc_attr( $columns ) . '"' .
124 ' data-gutter="' . esc_attr( $gutter_size ) . '"' .
125 ' data-lightbox="' . esc_attr( $enable_lightbox ? 'true' : 'false' ) . '"' .
126 '>',
127 $block_content,
128 1 // Only replace the first occurrence.
129 );
130 }
131
132 return $block_content;
133 }
134
135 /**
136 * Register custom attributes for blocks.
137 *
138 * @return void
139 */
140 public function register_custom_attributes() {
141 // Register attributes before WordPress registers its blocks.
142 add_filter(
143 'register_block_type_args',
144 array( $this, 'register_custom_attributes_for_gallery_block' ),
145 9,
146 2
147 );
148
149 // Register attributes from the frontend side as well.
150 add_action(
151 'enqueue_block_editor_assets',
152 array( $this, 'add_inline_script_for_attributes' )
153 );
154 }
155
156 /**
157 * Register custom attributes for WordPress Gallery block.
158 *
159 * @param array $args The block arguments.
160 * @param string $name The name of the block.
161 * @return array Modified block arguments.
162 */
163 public function register_custom_attributes_for_gallery_block( $args, $name ) {
164 if ( 'core/gallery' !== $name ) {
165 return $args;
166 }
167
168 $args['attributes']['frblGalleryLayout'] = array(
169 'type' => 'string',
170 'default' => 'grid',
171 );
172 $args['attributes']['frblGutterSize'] = array(
173 'type' => 'number',
174 'default' => 20,
175 );
176 $args['attributes']['frblEnableLightbox'] = array(
177 'type' => 'boolean',
178 'default' => false,
179 );
180
181 return $args;
182 }
183
184 /**
185 * Add inline script for block attributes.
186 *
187 * @return void
188 */
189 public function add_inline_script_for_attributes() {
190 wp_add_inline_script(
191 'wp-blocks',
192 "
193 wp.hooks.addFilter(
194 'blocks.registerBlockType',
195 'frontblocks/gallery-attributes',
196 function( settings, name ) {
197 if ( name !== 'core/gallery' ) {
198 return settings;
199 }
200
201 settings.attributes = {
202 ...settings.attributes,
203 frblGalleryLayout: {
204 type: 'string',
205 default: 'grid'
206 },
207 frblGutterSize: {
208 type: 'number',
209 default: 20
210 },
211 frblEnableLightbox: {
212 type: 'boolean',
213 default: false
214 }
215 };
216
217 return settings;
218 }
219 );
220 "
221 );
222 }
223 }
224