Changes to LCP Gallery Meta

includes/blocks/lcp-gallery/build/block.json

@@ -9,9 +9,16 @@
   "description": "A dynamic or static gallery based on the Lightgallery javascript plugin",
   "example": {},
   "supports": {
-    "html": false
+    "html": false,
+    "color": {
+      "background": true,
+      "text": false
+    }
   },
   "attributes": {
+    "backgroundColor": {
+      "type": "string"
+    },
     "parseElementForItems": {
       "type": "boolean",
       "default": false

includes/blocks/lcp-gallery/lcp-gallery.php

@@ -125,6 +125,30 @@ function validate_media_ids($input) {
 
 // Return an array of Media IDs
 function get_media_ids($attributes) {
+    // If post_gallery meta field
+    if (!$attributes['sources'] == "postGallery") {
+        $post_id = get_the_ID();
+        $lcp_post_gallery = get_post_meta( $post_id, 'lcp_gallery', true );
+
+        // Check if the meta field is not empty and unserialize the value
+        if ( ! empty( $lcp_post_gallery ) ) {
+            // Unserialize the meta field value to convert it into an array
+            $gallery_array = $lcp_post_gallery;
+
+            // Initialize an empty array to hold the media IDs
+            $media_ids = array();
+
+            // Loop through the gallery array and extract the media_id values
+            foreach ( $gallery_array as $item ) {
+                // Check if the 'media_id' key exists
+                if ( isset( $item['media_id'] ) ) {
+                    $media_ids[] = $item['media_id']; // Add the media_id to the array
+                }
+            }
+        }
+
+        return $media_ids;
+    }
     // Manual Source
     if ($attributes['source'] == "manual" && isset($attributes['galleryItems'])) {
         // Extract 'id' from each item in the 'galleryItems' array

includes/blocks/lcp-gallery/src/edit.js

@@ -2,7 +2,10 @@ import { __ } from '@wordpress/i18n';
 import { 
   InspectorControls, 
   MediaUpload, 
-  MediaUploadCheck 
+  MediaUploadCheck,
+  useBlockProps,
+  withColors,
+  PanelColorSettings 
 } from '@wordpress/block-editor';
 import { useState, 
   useEffect, 
@@ -65,9 +68,6 @@ const galleryElements = [
 ]
 
 
-
-
-
 // Aspect ratio options
 const aspectRatioOptions = [
   { value: '1-1', label: __('1:1', metadata.textdomain) },
@@ -125,8 +125,8 @@ const MultiMediaUpload = ({ onSelect }) => {
   );
 };
 
-export default function Edit(props) {
-  const { attributes, setAttributes } = props;
+function Edit(props) {
+  const { attributes, setAttributes, backgroundColor, setBackgroundColor } = props;
   const {
     galleryItems = [],
     source,
@@ -314,11 +314,17 @@ const { isTemplate, postType, postId } = useSelect((select) => {
       togglePlugin('lgZoom', value); // Add/Remove lgZoom plugin based on toggle value
     };
 
+  const blockProps = useBlockProps({
+    style: {
+      backgroundColor: backgroundColor?.color,
+    },
+  });
+
   return (
     <>
       
       {/* The Gallery */}
-       <LightGallery {...attributes.lgSettings} />
+       <LcpGallery {...attributes.lgSettings} />
  
       <InspectorControls>
         {/* Settings and Style Tabs */}
@@ -717,6 +723,16 @@ const { isTemplate, postType, postId } = useSelect((select) => {
             if (name === 'style') {
               return (
                 <PanelBody title={__('Style Settings')}>
+                  <PanelColorSettings
+                    title={__('Color settings', 'lcp')}
+                    colorSettings={[
+                      {
+                        value: backgroundColor?.color,
+                        onChange: setBackgroundColor,
+                        label: __('Background color', 'lcp'),
+                      },
+                    ]}
+                  />
                   {initialLayout === 'inline' && (
                     <>
                       <UnitControl
@@ -857,3 +873,4 @@ const { isTemplate, postType, postId } = useSelect((select) => {
   );
 }
 
+export default withColors('backgroundColor')(Edit);