Minor changes
This commit is contained in:
Jeremy Rangel
@ -207,7 +207,7 @@ function build_gallery_items_html($gallery_items_data, $attributes) {
|
||||
|
||||
// Create the HTML structure for each item, including data-responsive
|
||||
$html .= '
|
||||
<a data-lg-size="' . esc_attr($lg_size) . '"
|
||||
<a class="lcp-gallery-item" data-lg-size="' . esc_attr($lg_size) . '"
|
||||
data-responsive="' . esc_attr($responsive) . '"
|
||||
class="lcp-gallery-item"
|
||||
data-src="' . esc_url($src) . '"
|
||||
@ -279,8 +279,9 @@ function build_dynamic_elements_array($gallery_items_data) {
|
||||
}
|
||||
|
||||
// Build the gallery settings JSON
|
||||
function build_gallery_settings_json($attributes,$unique_class) {
|
||||
$container_class = ".". $unique_class;
|
||||
function build_gallery_settings_json($attributes, $unique_class) {
|
||||
$container_class = "." . $unique_class;
|
||||
|
||||
// Step 1: Get the media IDs based on the attributes
|
||||
$media_ids = get_media_ids($attributes);
|
||||
if (empty($media_ids)) {
|
||||
@ -312,10 +313,18 @@ function build_gallery_settings_json($attributes,$unique_class) {
|
||||
$lgSettings['dynamicEl'] = $dynamic_elements;
|
||||
}
|
||||
|
||||
// Step 7: Return the modified lgSettings object as JSON
|
||||
// Step 7: Get the plugins array
|
||||
$plugins = build_plugins_json($attributes);
|
||||
|
||||
// Step 8: Add plugins to lgSettings
|
||||
if (!empty($plugins)) {
|
||||
$lgSettings['plugins'] = $plugins;
|
||||
}
|
||||
|
||||
// Step 9: Return the modified lgSettings object as JSON
|
||||
$json = json_encode($lgSettings);
|
||||
|
||||
// Step 8: Check for JSON encoding errors
|
||||
// Step 10: Check for JSON encoding errors
|
||||
if ($json === false) {
|
||||
return json_encode(['error' => 'JSON encoding failed', 'error_details' => json_last_error_msg()]);
|
||||
}
|
||||
@ -324,6 +333,7 @@ function build_gallery_settings_json($attributes,$unique_class) {
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Build the gallery styles based on $attributes and a unique class for rendering multiple galleries on the same page
|
||||
function build_gallery_styles($attributes,$unique_class) {
|
||||
$styles = "<style>";
|
||||
@ -346,7 +356,8 @@ function build_gallery_styles($attributes,$unique_class) {
|
||||
|
||||
// Render the block
|
||||
function render_lcp_gallery_block($attributes) {
|
||||
$unique_class = lcp_random_string(8, true);
|
||||
// Generate a unique class for each gallery
|
||||
$unique_class = lcp_random_string(12, true);
|
||||
// Get the media IDs based on the attributes
|
||||
$media_ids = get_media_ids($attributes);
|
||||
|
||||
@ -363,7 +374,8 @@ function render_lcp_gallery_block($attributes) {
|
||||
|
||||
|
||||
// Generate styles for the gallery based on the unique class
|
||||
$classes = 'lcp-gallery'; // Start with lcp-gallery class
|
||||
$classes = 'lcp-gallery '; // Start with lcp-gallery class
|
||||
$classes .= $unique_class;
|
||||
|
||||
// Check if 'initialLayout' is set to 'grid' and add grid column classes if applicable
|
||||
if (isset($attributes['initialLayout']) && $attributes['initialLayout'] === 'grid') {
|
||||
@ -385,15 +397,16 @@ if (isset($attributes['initialLayout']) && $attributes['initialLayout'] === 'gri
|
||||
|
||||
// Add 'initialLayout' class if it exists and isn't 'grid'
|
||||
if (isset($attributes['initialLayout']) && !empty($attributes['initialLayout']) && $attributes['initialLayout'] !== 'grid') {
|
||||
$classes .= ' ' . esc_attr($attributes['initialLayout']);
|
||||
$classes .= ' ' . "lcp-inline-gallery";
|
||||
}
|
||||
|
||||
|
||||
// Build the styles using the unique class (if necessary)
|
||||
$styles = build_gallery_styles($attributes, $unique_class);
|
||||
|
||||
// Return the complete gallery HTML with the unique class and the settings as a JSON string
|
||||
return "
|
||||
<div class= '{$classes}' data-lgSettings='" . esc_attr($gallery_settings_json) . "'>
|
||||
<div class= '{$classes}' data-lgSettings='" . esc_attr($gallery_settings_json) . "'>
|
||||
{$gallery_items_html}
|
||||
</div>";
|
||||
}
|
||||
|
||||
@ -117,7 +117,7 @@
|
||||
"autoplay": false,
|
||||
"download": false,
|
||||
"container": "",
|
||||
"closeable": true,
|
||||
"closable": true,
|
||||
"zoomFromOrigin": false,
|
||||
"plugins": []
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useBlockProps, InspectorControls, MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useSelect } from '@wordpress/data';
|
||||
import {
|
||||
PanelBody,
|
||||
SelectControl,
|
||||
@ -22,8 +23,16 @@ import 'lightgallery/css/lg-thumbnail.css';
|
||||
import lgThumbnail from 'lightgallery/plugins/thumbnail';
|
||||
import lgZoom from 'lightgallery/plugins/zoom';
|
||||
|
||||
|
||||
|
||||
// Aspect ratio options
|
||||
const aspectRatioOptions = [
|
||||
{ value: '1-1', label: __('1:1', metadata.textdomain) },
|
||||
{ value: '16-9', label: __('16:9', metadata.textdomain) },
|
||||
{ value: '3-2', label: __('3:2', metadata.textdomain) },
|
||||
{ value: '5-7', label: __('5:7', metadata.textdomain) },
|
||||
{ value: '3-4', label: __('3:4', metadata.textdomain) },
|
||||
{ value: '4-5', label: __('4:5', metadata.textdomain) },
|
||||
{ value: '2-3', label: __('2:3', metadata.textdomain) }
|
||||
];
|
||||
// Check if JetEngine or ACF/SCF are activated and get their gallery field data
|
||||
const { apiFetch } = wp;
|
||||
|
||||
@ -228,8 +237,49 @@ export default function Edit(props) {
|
||||
});
|
||||
}, [lgSettings.zoom, lgSettings.thumbnail, lgSettings.rotate, lgSettings.autoplay, lgSettings.fullScreen, lgSettings.download, setAttributes]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Retrieve current post type, post ID, and check if it's a template mode using useSelect
|
||||
const { isTemplate, postType, postId } = useSelect((select) => {
|
||||
const editor = select('core/editor');
|
||||
const currentPostType = editor.getCurrentPostType();
|
||||
const currentPostId = editor.getCurrentPostId();
|
||||
const isTemplateMode = currentPostType === 'wp_template';
|
||||
|
||||
return {
|
||||
isTemplate: isTemplateMode,
|
||||
postType: currentPostType,
|
||||
postId: currentPostId
|
||||
};
|
||||
}, []); // Empty array ensures the hook runs once during the component lifecycle
|
||||
|
||||
let sourceOptions = [];
|
||||
|
||||
if (isTemplate) {
|
||||
sourceOptions = [
|
||||
{ value: 'manual', label: __('Manually Select', metadata.textdomain) },
|
||||
{ value: 'lcp_post_gallery', label: __('Post Gallery', metadata.textdomain) },
|
||||
{ value: 'meta_field', label: __('Meta field of current post', metadata.textdomain) },
|
||||
{ value: 'linked_table', label: __('Linked Table', metadata.textdomain) } ];
|
||||
// Add logic to adjust block's behavior when editing a template
|
||||
} else {
|
||||
sourceOptions = [
|
||||
{ value: 'manual', label: __('Manually Select', metadata.textdomain) },
|
||||
{ value: 'lcp_post_gallery', label: __('Post Gallery', metadata.textdomain) }
|
||||
];
|
||||
// Add logic for post/page editing mode
|
||||
}
|
||||
|
||||
// Now you can use sourceOptions as needed in your block rendering logic
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<InspectorControls>
|
||||
{/* Settings and Style Tabs */}
|
||||
<TabPanel
|
||||
@ -258,12 +308,7 @@ export default function Edit(props) {
|
||||
label={__('Gallery Items Source', metadata.textdomain)}
|
||||
value={source}
|
||||
onChange={(newValue) => setAttributes({ source: newValue })}
|
||||
options={[
|
||||
{ value: 'manual', label: __('Manually Select', metadata.textdomain) },
|
||||
{ value: 'lcp_post_gallery', label: __('Post Gallery', metadata.textdomain) },
|
||||
{ value: 'meta_field', label: __('Meta field of current post', metadata.textdomain) },
|
||||
{ value: 'linked_table', label: __('Linked Table', metadata.textdomain) }
|
||||
]}
|
||||
options={sourceOptions}
|
||||
/>
|
||||
{source === 'manual' && <MultiMediaUpload onSelect={handleSelectMedia} />}
|
||||
{source === 'meta_field' && (
|
||||
@ -317,7 +362,16 @@ export default function Edit(props) {
|
||||
<SelectControl
|
||||
label={__('Initial Layout', metadata.textdomain)}
|
||||
value={initialLayout}
|
||||
onChange={(newValue) => setAttributes({ initialLayout: newValue })}
|
||||
onChange={(newValue) => {
|
||||
// Update the initialLayout attribute
|
||||
setAttributes({
|
||||
initialLayout: newValue,
|
||||
lgSettings: {
|
||||
...attributes.lgSettings, // Preserve existing lgSettings
|
||||
closable: false // Set closable to false
|
||||
}
|
||||
});
|
||||
}}
|
||||
options={[
|
||||
{ value: 'inline', label: __('Inline', metadata.textdomain) },
|
||||
{ value: 'grid', label: __('Grid', metadata.textdomain) },
|
||||
@ -333,11 +387,20 @@ export default function Edit(props) {
|
||||
/>
|
||||
)
|
||||
}
|
||||
<ToggleControl
|
||||
onChange={(isChecked) => setAttributes({ thumbnail: isChecked })}
|
||||
checked={thumbnail}
|
||||
label={__('Show Thumbnails', metadata.textdomain)}
|
||||
/>
|
||||
<ToggleControl
|
||||
onChange={(isChecked) => {
|
||||
// Check if lgSettings exists, then update thumbnail value
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...attributes.lgSettings, // Keep the existing lgSettings intact
|
||||
thumbnail: isChecked, // Update the thumbnail value
|
||||
}
|
||||
});
|
||||
}}
|
||||
checked={attributes.lgSettings?.thumbnail} // Ensure the checkbox reflects the current thumbnail setting
|
||||
label={__('Show Thumbnails', metadata.textdomain)}
|
||||
/>
|
||||
|
||||
{thumbnail && (
|
||||
<>
|
||||
<SelectControl
|
||||
@ -380,14 +443,7 @@ export default function Edit(props) {
|
||||
label={__('Items Aspect Ratio', metadata.textdomain)}
|
||||
value={itemsAspectRatio}
|
||||
onChange={(newValue) => setAttributes({ itemsAspectRatio: newValue })}
|
||||
options={[
|
||||
{ value: '1-1', label: __('1:1', metadata.textdomain) },
|
||||
{ value: '16-9', label: __('16:9', metadata.textdomain) },
|
||||
{ value: '3-2', label: __('3:2', metadata.textdomain) },
|
||||
{ value: '3-4', label: __('3:4', metadata.textdomain) },
|
||||
{ value: '4-5', label: __('4:5', metadata.textdomain) },
|
||||
{ value: '2-3', label: __('2:3', metadata.textdomain) }
|
||||
]}
|
||||
options={aspectRatioOptions}
|
||||
/>
|
||||
)}
|
||||
{initialLayout !== 'inline' && (
|
||||
@ -581,6 +637,7 @@ export default function Edit(props) {
|
||||
}}
|
||||
/>
|
||||
{/* Add the TextControl for specific container to open the gallery in*/}
|
||||
{/* If the initial layout is inline, the gallery opens in .lcp-gallery */}
|
||||
{initialLayout != "inline"}{
|
||||
<TextControl
|
||||
label={__('Open gallery in container')}
|
||||
|
||||
@ -16,13 +16,13 @@
|
||||
|
||||
|
||||
|
||||
.lcp-gallery.inline {
|
||||
.lcp-inline-gallery {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lcp-gallery.inline .gallery-item {
|
||||
.lcp-inline-gallery .lcp-gallery-item .img-fluid {
|
||||
display:none
|
||||
}
|
||||
|
||||
@ -58,6 +58,7 @@ span.gallery-more {position: absolute;
|
||||
.lcp-gallery.aspect-2-3 .lcp-gallery-item {aspect-ratio:2/3}
|
||||
.lcp-gallery.aspect-3-4 .lcp-gallery-item {aspect-ratio:3/4}
|
||||
.lcp-gallery.aspect-4-5 .lcp-gallery-item {aspect-ratio:4/5}
|
||||
.lcp-gallery.aspect-5-7 .lcp-gallery-item {aspect-ratio:5/7}
|
||||
.lcp-gallery.aspect-3-2 .lcp-gallery-item {aspect-ratio:3/2}
|
||||
.lcp-gallery.aspect-16-9 .lcp-gallery-item {aspect-ratio:16/9}
|
||||
|
||||
|
||||
@ -7,6 +7,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
galleryContainers.forEach(galleryContainer => {
|
||||
// Retrieve the JSON string from the data-lgsettings attribute
|
||||
const lgSettingsAttr = galleryContainer.getAttribute('data-lgsettings');
|
||||
const initOnLoad = galleryContainer.getAttribute('data-gallery-settings') === 'init-on-load'; // Check for the 'init-on-load' setting
|
||||
const isInlineGallery = galleryContainer.classList.contains('lcp-inline-gallery'); // Check if it's an inline gallery
|
||||
|
||||
if (lgSettingsAttr) {
|
||||
try {
|
||||
@ -39,10 +41,16 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialize LightGallery for the gallery container (only once)
|
||||
let galleryInstance = null;
|
||||
|
||||
// Initialize the gallery only once per container
|
||||
if (!galleryContainer.classList.contains('lg-initialized')) {
|
||||
// Initialize the gallery immediately if 'init-on-load' is set or it's an inline gallery
|
||||
if (!galleryContainer.classList.contains('lcp-inline-gallery') || initOnLoad || isInlineGallery) {
|
||||
galleryInstance = lightGallery(galleryContainer, lgSettings);
|
||||
galleryContainer.classList.add('lg-initialized'); // Mark the gallery as initialized
|
||||
|
||||
// If it's an inline gallery, immediately open the first item (index 0)
|
||||
if (isInlineGallery) {
|
||||
galleryInstance.openGallery(0);
|
||||
galleryContainer.classList.add('initialized'); // Mark the gallery as initialized
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Add click event listener to the gallery items
|
||||
|
||||
Reference in New Issue
Block a user