68 isset( $lightbox_settings ) && |
68 isset( $lightbox_settings ) && |
69 'none' === $link_destination && |
69 'none' === $link_destination && |
70 isset( $lightbox_settings['enabled'] ) && |
70 isset( $lightbox_settings['enabled'] ) && |
71 true === $lightbox_settings['enabled'] |
71 true === $lightbox_settings['enabled'] |
72 ) { |
72 ) { |
73 $suffix = wp_scripts_get_suffix(); |
73 wp_enqueue_script_module( '@wordpress/block-library/image/view' ); |
74 if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) { |
|
75 $module_url = gutenberg_url( '/build/interactivity/image.min.js' ); |
|
76 } |
|
77 |
|
78 wp_register_script_module( |
|
79 '@wordpress/block-library/image', |
|
80 isset( $module_url ) ? $module_url : includes_url( "blocks/image/view{$suffix}.js" ), |
|
81 array( '@wordpress/interactivity' ), |
|
82 defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' ) |
|
83 ); |
|
84 |
|
85 wp_enqueue_script_module( '@wordpress/block-library/image' ); |
|
86 |
74 |
87 /* |
75 /* |
88 * This render needs to happen in a filter with priority 15 to ensure that |
76 * This render needs to happen in a filter with priority 15 to ensure that |
89 * it runs after the duotone filter and that duotone styles are applied to |
77 * it runs after the duotone filter and that duotone styles are applied to |
90 * the image in the lightbox. Lightbox has to work with any plugins that |
78 * the image in the lightbox. Lightbox has to work with any plugins that |
159 } |
147 } |
160 if ( ! $p->next_tag( 'img' ) ) { |
148 if ( ! $p->next_tag( 'img' ) ) { |
161 return $block_content; |
149 return $block_content; |
162 } |
150 } |
163 |
151 |
164 $alt = $p->get_attribute( 'alt' ); |
152 $alt = $p->get_attribute( 'alt' ); |
165 $img_uploaded_src = $p->get_attribute( 'src' ); |
153 $img_uploaded_src = $p->get_attribute( 'src' ); |
166 $img_class_names = $p->get_attribute( 'class' ); |
154 $img_class_names = $p->get_attribute( 'class' ); |
167 $img_styles = $p->get_attribute( 'style' ); |
155 $img_styles = $p->get_attribute( 'style' ); |
168 $img_width = 'none'; |
156 $img_width = 'none'; |
169 $img_height = 'none'; |
157 $img_height = 'none'; |
170 $aria_label = __( 'Enlarge image' ); |
158 $aria_label = __( 'Enlarge' ); |
171 |
159 $dialog_aria_label = __( 'Enlarged image' ); |
172 if ( $alt ) { |
|
173 /* translators: %s: Image alt text. */ |
|
174 $aria_label = sprintf( __( 'Enlarge image: %s' ), $alt ); |
|
175 } |
|
176 |
160 |
177 if ( isset( $block['attrs']['id'] ) ) { |
161 if ( isset( $block['attrs']['id'] ) ) { |
178 $img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] ); |
162 $img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] ); |
179 $img_metadata = wp_get_attachment_metadata( $block['attrs']['id'] ); |
163 $img_metadata = wp_get_attachment_metadata( $block['attrs']['id'] ); |
180 $img_width = $img_metadata['width'] ?? 'none'; |
164 $img_width = $img_metadata['width'] ?? 'none'; |
183 |
167 |
184 // Figure. |
168 // Figure. |
185 $p->seek( 'figure' ); |
169 $p->seek( 'figure' ); |
186 $figure_class_names = $p->get_attribute( 'class' ); |
170 $figure_class_names = $p->get_attribute( 'class' ); |
187 $figure_styles = $p->get_attribute( 'style' ); |
171 $figure_styles = $p->get_attribute( 'style' ); |
|
172 |
|
173 // Create unique id and set the image metadata in the state. |
|
174 $unique_image_id = uniqid(); |
|
175 |
|
176 wp_interactivity_state( |
|
177 'core/image', |
|
178 array( |
|
179 'metadata' => array( |
|
180 $unique_image_id => array( |
|
181 'uploadedSrc' => $img_uploaded_src, |
|
182 'figureClassNames' => $figure_class_names, |
|
183 'figureStyles' => $figure_styles, |
|
184 'imgClassNames' => $img_class_names, |
|
185 'imgStyles' => $img_styles, |
|
186 'targetWidth' => $img_width, |
|
187 'targetHeight' => $img_height, |
|
188 'scaleAttr' => $block['attrs']['scale'] ?? false, |
|
189 'ariaLabel' => $dialog_aria_label, |
|
190 'alt' => $alt, |
|
191 ), |
|
192 ), |
|
193 ) |
|
194 ); |
|
195 |
188 $p->add_class( 'wp-lightbox-container' ); |
196 $p->add_class( 'wp-lightbox-container' ); |
189 $p->set_attribute( 'data-wp-interactive', 'core/image' ); |
197 $p->set_attribute( 'data-wp-interactive', 'core/image' ); |
190 $p->set_attribute( |
198 $p->set_attribute( |
191 'data-wp-context', |
199 'data-wp-context', |
192 wp_json_encode( |
200 wp_json_encode( |
193 array( |
201 array( |
194 'uploadedSrc' => $img_uploaded_src, |
202 'imageId' => $unique_image_id, |
195 'figureClassNames' => $figure_class_names, |
|
196 'figureStyles' => $figure_styles, |
|
197 'imgClassNames' => $img_class_names, |
|
198 'imgStyles' => $img_styles, |
|
199 'targetWidth' => $img_width, |
|
200 'targetHeight' => $img_height, |
|
201 'scaleAttr' => $block['attrs']['scale'] ?? false, |
|
202 'ariaLabel' => $aria_label, |
|
203 'alt' => $alt, |
|
204 ), |
203 ), |
205 JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP |
204 JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP |
206 ) |
205 ) |
207 ); |
206 ); |
208 |
207 |
213 $p->set_attribute( 'data-wp-on-async-window--resize', 'callbacks.setButtonStyles' ); |
212 $p->set_attribute( 'data-wp-on-async-window--resize', 'callbacks.setButtonStyles' ); |
214 // Sets an event callback on the `img` because the `figure` element can also |
213 // Sets an event callback on the `img` because the `figure` element can also |
215 // contain a caption, and we don't want to trigger the lightbox when the |
214 // contain a caption, and we don't want to trigger the lightbox when the |
216 // caption is clicked. |
215 // caption is clicked. |
217 $p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' ); |
216 $p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' ); |
|
217 $p->set_attribute( 'data-wp-class--hide', 'state.isContentHidden' ); |
|
218 $p->set_attribute( 'data-wp-class--show', 'state.isContentVisible' ); |
218 |
219 |
219 $body_content = $p->get_updated_html(); |
220 $body_content = $p->get_updated_html(); |
220 |
221 |
221 // Adds a button alongside image in the body content. |
222 // Adds a button alongside image in the body content. |
222 $img = null; |
223 $img = null; |
229 type="button" |
230 type="button" |
230 aria-haspopup="dialog" |
231 aria-haspopup="dialog" |
231 aria-label="' . esc_attr( $aria_label ) . '" |
232 aria-label="' . esc_attr( $aria_label ) . '" |
232 data-wp-init="callbacks.initTriggerButton" |
233 data-wp-init="callbacks.initTriggerButton" |
233 data-wp-on-async--click="actions.showLightbox" |
234 data-wp-on-async--click="actions.showLightbox" |
234 data-wp-style--right="context.imageButtonRight" |
235 data-wp-style--right="state.imageButtonRight" |
235 data-wp-style--top="context.imageButtonTop" |
236 data-wp-style--top="state.imageButtonTop" |
236 > |
237 > |
237 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"> |
238 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"> |
238 <path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /> |
239 <path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" /> |
239 </svg> |
240 </svg> |
240 </button>'; |
241 </button>'; |
283 data-wp-on--touchmove="actions.handleTouchMove" |
284 data-wp-on--touchmove="actions.handleTouchMove" |
284 data-wp-on-async--touchend="actions.handleTouchEnd" |
285 data-wp-on-async--touchend="actions.handleTouchEnd" |
285 data-wp-on-async--click="actions.hideLightbox" |
286 data-wp-on-async--click="actions.hideLightbox" |
286 data-wp-on-async-window--resize="callbacks.setOverlayStyles" |
287 data-wp-on-async-window--resize="callbacks.setOverlayStyles" |
287 data-wp-on-async-window--scroll="actions.handleScroll" |
288 data-wp-on-async-window--scroll="actions.handleScroll" |
|
289 data-wp-bind--style="state.overlayStyles" |
288 tabindex="-1" |
290 tabindex="-1" |
289 > |
291 > |
290 <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button"> |
292 <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button"> |
291 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg> |
293 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"></path></svg> |
292 </button> |
294 </button> |
293 <div class="lightbox-image-container"> |
295 <div class="lightbox-image-container"> |
294 <figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.currentImage.figureStyles"> |
296 <figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.figureStyles"> |
295 <img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.currentImage.currentSrc"> |
297 <img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.currentImage.currentSrc"> |
296 </figure> |
298 </figure> |
297 </div> |
299 </div> |
298 <div class="lightbox-image-container"> |
300 <div class="lightbox-image-container"> |
299 <figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.currentImage.figureStyles"> |
301 <figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.figureStyles"> |
300 <img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.enlargedSrc"> |
302 <img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.enlargedSrc"> |
301 </figure> |
303 </figure> |
302 </div> |
304 </div> |
303 <div class="scrim" style="background-color: $background_color" aria-hidden="true"></div> |
305 <div class="scrim" style="background-color: $background_color" aria-hidden="true"></div> |
304 <style data-wp-text="state.overlayStyles"></style> |
|
305 </div> |
306 </div> |
306 HTML; |
307 HTML; |
307 } |
308 } |
308 |
309 |
309 /** |
310 /** |