Changes to gallery block and custom code inserter

blocks/lcp-gallery/lcp-gallery.php

@@ -335,8 +335,16 @@ 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) {
+function build_gallery_styles($attributes, $unique_class) {
+    // Extract background color and item spacing from attributes
+    $thumbs_background_color = isset($attributes['thumbsBackgroundColor']) ? esc_attr($attributes['thumbs_background_color']) : '#000000'; // Default to black if not set
+    $backdrop_background_color = isset($attributes['backdropBackgroundColor']) ? esc_attr($attributes['backdropBackgroundColor']) : '#000000'; // Default to black if not set
+    $item_spacing = isset($attributes['item_spacing']) ? esc_attr($attributes['item_spacing']) : '10px'; // Default spacing if not set
+
+    // Start generating styles
     $styles = "<style>";
+
+    // Gallery container styles
     $styles .= "
     .$unique_class {
         background-color: $background_color;
@@ -344,16 +352,27 @@ function build_gallery_styles($attributes,$unique_class) {
         flex-wrap: wrap;
         gap: $item_spacing;
         justify-content: center;
-        background:red;
+    }";
-    }
-    ";
 
+    // LightGallery thumbnail styles
+    $styles .= "
+    .$unique_class .lg-thumb-outer {
+        background-color: $thumbs_background_color
+    }";
+
+    $styles .= "
+    .$unique_class .lg-backdrop {
+        background-color: $backdrop_background_color
+    }";
+
+    // Close the style tag
     $styles .= "</style>";
 
     // Return the generated styles
     return $styles;
 }
 
+
 // Render the block
 function render_lcp_gallery_block($attributes) {
     // Generate a unique class for each gallery
@@ -427,7 +446,7 @@ function enqueue_lightgallery_scripts() {
       // Enqueue styles
       wp_enqueue_style('lcp-gallery', get_template_directory_uri() . '/blocks/lcp-gallery/assets/css/lcp-gallery.css');
       wp_enqueue_style('lightgallery-css', get_template_directory_uri() . '/blocks/lcp-gallery/assets/css/lightgallery-bundle.min.css');
-      wp_enqueue_style('lg-transitions-css', get_template_directory_uri() . '/blocks/gallery/assets/css/lg-transitions.css');
+      wp_enqueue_style('lg-transitions-css', get_template_directory_uri() . '/blocks/lcp-gallery/assets/css/lg-transitions.css');
 
       // Enqueue scripts
       wp_enqueue_script('lightgallery-js', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lightgallery.min.js', array(), null, true);

blocks/lcp-gallery/src/block.json

@@ -12,80 +12,7 @@
 		"html": false
 	},
 	"attributes": {
-		"lgSettingsOld" :{
+
-			"type": "object",
-			"default": {
-				"mode": "fade",
-				"cssEasing": "ease",
-				"loop": true,
-				"keyPress": true,
-				"controls": true,
-				"thumbs": false,
-				"zoom": true,
-				"slideEndAnimatoin": true,
-				"fullScreen": true,
-				"autoplay": false,
-				"slideShowAutoplay": false,
-				"autoplayControls": true,
-				"pauseOnHover": false,
-				"progressBar": false,
-				"exThumbImage": "data-exthumbimage",
-				"showThumbByDefault": false,
-				"currentPagerPosition": "middle",
-				"addClass": "",
-				"isMobile": false,
-				"mobileSettings": {
-				  "controls": false,
-				  "showCloseIcon": true,
-				  "enableTouch": true,
-				  "enableDrag": true
-				},
-				"imageAutoPlay": true,
-				"slideShowInterval": 5000,
-				"counter": true,
-				"closeOnEscape": true,
-				"showCloseIcon": true,
-				"swipeThreshold": 50,
-				"draggable": true,
-				"slideSpeed": 400,
-				"hideBarsDelay": 3000,
-				"dynamic": true,
-				"dynamicEl": [],
-				"captionDelay": 0,
-				"videoMaxWidth": "100%",
-				"videoAutoplay": true,
-				"videoJS": false,
-				"audio": false,
-				"audioJS": false,
-				"lightboxWidth": "auto",
-				"lightboxHeight": "auto",
-				"videojs": {
-				  "autoplay": true,
-				  "controls": true
-				},
-				"gestureSettings": {
-				  "zoom": true,
-				  "drag": true
-				},
-				"ariaLabelledby": "lightgallery-caption",
-				"ariaDescribedby": "lightgallery-description",
-				"thumbnailSelector": ".lg-thumbnail",
-				"galleryClass": "lg-gallery",
-				"selectableThumbs": false,
-				"slideTransition": "ease-in-out",
-				"share": false,
-				"hash": false,
-				"download": false,
-				"allowMediaOverlap": false,
-				"responsive": true,
-				"fullscreenBtn": true,
-				"prevHtml": "",
-				"nextHtml": "",
-				"closeHtml": "",
-				"playHtml": "<i class='lg-icon lg-icon-play'></i>",
-				"pauseHtml": "<i class='lg-icon lg-icon-pause'></i>"
-			  }
-	},
 	"parseElementForItems": {
 		"type": "boolean",
 		"default": false
@@ -119,6 +46,7 @@
 				"container": "",
 				"closable": true,
 				"zoomFromOrigin": false,
+				"showMaximizeIcon": false,
 				"plugins": []
 			}
 		},
@@ -263,6 +191,12 @@
 		  "thumbnailBordersSelected": {
 			"type": "object"
 		  },
+		  "thumbsBackgroundColor": {
+			"type": "string"
+		  },
+		  "backdropBackgroundColor": {
+			"type": "string"
+		  },
 		  "showCaptions": {
 			"type": "boolean"
 		  },
@@ -347,10 +281,6 @@
 			"type": "boolean",
 			"default": false
 		  },
-		  "thumbnail": {
-			"type": "boolean",
-			"default": true
-		  },
 		  "appendThumbnailsTo": {
 			"type": "string",
 			"default": ".lg-components"

blocks/lcp-gallery/src/edit.js

@@ -241,9 +241,8 @@ export default function Edit(props) {
 
 
 
-
+// Retrieve current post type, post ID, and check if it's a template mode using useSelect
-      // Retrieve current post type, post ID, and check if it's a template mode using useSelect
+const { isTemplate, postType, postId } = useSelect((select) => {
-      const { isTemplate, postType, postId } = useSelect((select) => {
     const editor = select('core/editor');
     const currentPostType = editor.getCurrentPostType();
     const currentPostId = editor.getCurrentPostId();
@@ -254,7 +253,7 @@ export default function Edit(props) {
         postType: currentPostType,
         postId: currentPostId
     };
-    }, []); // Empty array ensures the hook runs once during the component lifecycle
+}, []); // Empty array ensures the hook runs once during the component lifecycle
 
     let sourceOptions = [];
     
@@ -368,16 +367,37 @@ export default function Edit(props) {
                             initialLayout: newValue, 
                             lgSettings: { 
                                 ...attributes.lgSettings,  // Preserve existing lgSettings
-                                closable: false          // Set closable to false
+                                closable: false ,          // Inline gallery should not be closeable
+     
                             }
                         });
                     }}
                       options={[
                         { value: 'inline', label: __('Inline', metadata.textdomain) },
                         { value: 'grid', label: __('Grid', metadata.textdomain) },
-                        { value: 'justified', label: __('Justified', metadata.textdomain) },
+                        // { value: 'justified', label: __('Justified', metadata.textdomain) }, Add later version
                         { value: 'button', label: __('Button', metadata.textdomain) }
                       ]}
+                    />
+                      {/* Include option to show maximize icon if inline gallery */}
+                      {attributes.initialLayout === 'inline' && (
+                          <ToggleControl
+                              label={__('Show maximize icon', metadata.textdomain)}
+                              checked={attributes.lgSettings.showMaximizeIcon}
+                              onChange={(isChecked) => setAttributes({ 
+                                  lgSettings: { 
+                                      ...attributes.lgSettings,  // Preserve existing lgSettings
+                                      showMaximizeIcon: true, // Set the showMaximizeIcon based on the toggle
+                                  }
+                              })}
+                          />
+                      )}
+
+
+                    <ToggleControl
+                      onChange={(isChecked) => setAttributes({ includePostThumbnail: isChecked })}
+                      checked={includePostThumbnail}
+                      label={__('Include Post Thumbnail (Featured Image)', metadata.textdomain)}
                     />
                     {initialLayout === 'button' && (
                       <TextControl