Minor changes

blocks/lcp-gallery/lcp-gallery.php

@@ -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) {
+function build_gallery_settings_json($attributes, $unique_class) {
-    $container_class = ".". $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>";
 }

blocks/lcp-gallery/src/block.json

@@ -117,7 +117,7 @@
 				"autoplay": false,
 				"download": false,
 				"container": "",
-				"closeable": true,
+				"closable": true,
 				"zoomFromOrigin": false,
 				"plugins": []
 			}

blocks/lcp-gallery/src/edit.js

@@ -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={[
+                      options={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) }
-                      ]}
                     />
                     {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
+              <ToggleControl
-                      onChange={(isChecked) => setAttributes({ thumbnail: isChecked })}
+                onChange={(isChecked) => {
-                      checked={thumbnail}
+                  // Check if lgSettings exists, then update thumbnail value
-                      label={__('Show Thumbnails', metadata.textdomain)}
+                  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={[
+                        options={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: '3-4', label: __('3:4', metadata.textdomain) },
-                          { value: '4-5', label: __('4:5', metadata.textdomain) },
-                          { value: '2-3', label: __('2:3', metadata.textdomain) }
-                        ]}
                       />
                     )}
                     {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')}

blocks/lcp-gallery/src/style.scss

@@ -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}
 

blocks/lcp-gallery/src/view.js

@@ -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
+                    // Initialize the gallery immediately if 'init-on-load' is set or it's an inline gallery
-                    if (!galleryContainer.classList.contains('lg-initialized')) {
+                    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