From ae31fec647f9c92c5e288973e8fd20a13b920c4a Mon Sep 17 00:00:00 2001
From: Jeremy Rangel <jeremy.rangel@rangeldigital.com>
Date: Thu, 9 Jan 2025 17:50:32 -0800
Subject: [PATCH] Changes to LCP Gallery Meta

---
 functions.php                                 | 473 ++++++++++++++++++
 .../build/index.asset.php                     |   2 +-
 .../lcp-dynamic-container/build/index.js      |   2 +-
 .../build/style-index-rtl.css                 |   2 +-
 .../build/style-index.css                     |   2 +-
 .../lcp-dynamic-container.php                 |  36 +-
 .../blocks/lcp-dynamic-container/src/save.js  |  16 +-
 .../lcp-dynamic-container/src/style.scss      |  17 +
 includes/blocks/lcp-gallery/build/block.json  |   9 +-
 includes/blocks/lcp-gallery/lcp-gallery.php   |  24 +
 includes/blocks/lcp-gallery/src/edit.js       |  31 +-
 includes/classes/wp-hooks.php                 |  29 +-
 patterns/post-content.php                     |  27 +
 theme.json                                    |  16 +-
 14 files changed, 651 insertions(+), 35 deletions(-)
 create mode 100644 patterns/post-content.php

diff --git a/functions.php b/functions.php
index 15736e4..e34517c 100644
--- a/functions.php
+++ b/functions.php
@@ -692,3 +692,476 @@ function lcp_register_custom_image_sizes() {
 
 // Hook into WordPress to register custom sizes
 add_action('after_setup_theme', 'lcp_register_custom_image_sizes');
+
+
+/* CUSTOM POST TYPES */
+
+
+// Register the post meta field for the gallery
+function to_register_meta_fields() {
+    register_post_meta('post', 'lcp_post_gallery', [
+        'type' => 'array',
+        'description' => 'Custom post gallery',
+        'single' => true,
+        'show_in_rest' => true,
+    ]);
+}
+add_action('init', 'to_register_meta_fields');
+
+// Add meta box for the gallery
+function add_lcp_gallery_meta_box() {
+    add_meta_box(
+        'lcp_gallery_meta_box',
+        __('Post Gallery', 'textdomain'),
+        'render_lcp_gallery_meta_box',
+        'post',
+        'normal',
+        'high'
+    );
+}
+add_action('add_meta_boxes', 'add_lcp_gallery_meta_box');
+
+// Render the meta box
+function render_lcp_gallery_meta_box($post) {
+    // Add nonce for security
+    wp_nonce_field('lcp_gallery_meta_box', 'lcp_gallery_meta_box_nonce');
+    
+    // Get existing gallery items
+    $gallery_items = get_post_meta($post->ID, 'lcp_gallery', true);
+    if (!is_array($gallery_items)) {
+        $gallery_items = array();
+    }
+    ?>
+    <style>
+        #lcp-gallery-list li {
+            cursor: move;
+            padding: 10px;
+            margin-bottom: 10px;
+            background: #fff;
+            border: 1px solid #ddd;
+            position: relative;
+        }
+        #lcp-gallery-list li.dragging {
+            opacity: 0.5;
+            border: 2px dashed #999;
+        }
+        .drag-handle {
+            cursor: move;
+            padding: 5px;
+            margin-right: 10px;
+            color: #999;
+        }
+        #lcp-media-source-selector {
+            margin-bottom: 15px;
+        }
+        .gallery-item-fields {
+            margin-top: 10px;
+        }
+        .gallery-item-fields input[type="text"],
+        .gallery-item-fields textarea {
+            width: 100%;
+            margin-bottom: 5px;
+        }
+        .gallery-item-fields label {
+            display: block;
+            margin-top: 5px;
+            font-weight: bold;
+        }
+        .color-picker-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-top: 5px;
+        }
+        .color-picker-wrapper input[type="color"] {
+            padding: 0;
+            width: 50px;
+            height: 30px;
+        }
+    </style>
+    <div id="lcp-gallery-container">
+        <div id="lcp-media-source-selector">
+            <select id="lcp-media-source">
+                <option value="media_library">Media Library</option>
+                <option value="youtube">YouTube</option>
+                <option value="vimeo">Vimeo</option>
+            </select>
+            <button type="button" class="button" id="add-to-gallery">Add Media</button>
+        </div>
+        <ul id="lcp-gallery-list">
+            <?php
+            foreach ($gallery_items as $item) {
+                $media_source = isset($item['media_source']) ? $item['media_source'] : '';
+                $media_id = isset($item['media_id']) ? $item['media_id'] : '';
+                $url = isset($item['url']) ? $item['url'] : '';
+                $title = isset($item['title']) ? $item['title'] : '';
+                $caption = isset($item['caption']) ? $item['caption'] : '';
+                $background_color = isset($item['background_color']) ? $item['background_color'] : '';
+                
+                echo '<li draggable="true" style="background-color: ' . esc_attr($background_color) . ';">';
+                echo '<span class="drag-handle dashicons dashicons-menu"></span>';
+                echo '<input type="hidden" name="lcp_gallery[]" value="' . esc_attr(json_encode($item)) . '">';
+                
+                if ($media_source === 'media_library' && $media_id) {
+                    $image = wp_get_attachment_image_src($media_id, 'thumbnail');
+                    if ($image) {
+                        echo '<img src="' . esc_url($image[0]) . '" alt="" style="max-width: 150px; height: auto;">';
+                    }
+                } elseif ($media_source === 'youtube' && $url) {
+                    echo '<div class="youtube-thumbnail" style="width: 150px; height: 150px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">';
+                    echo '<span class="dashicons dashicons-youtube"></span>';
+                    echo '</div>';
+                }
+
+                // Add fields for title, caption, and background color
+                echo '<div class="gallery-item-fields">';
+                echo '<label>Title</label>';
+                echo '<input type="text" class="gallery-item-title" value="' . esc_attr($title) . '" placeholder="Enter title">';
+                
+                echo '<label>Caption</label>';
+                echo '<textarea class="gallery-item-caption" rows="3" placeholder="Enter caption">' . esc_textarea($caption) . '</textarea>';
+                
+                echo '<label>Background Color</label>';
+                echo '<div class="color-picker-wrapper">';
+                echo '<input type="color" class="gallery-item-bgcolor" value="' . esc_attr($background_color) . '">';
+                echo '<button type="button" class="button update-bgcolor">Update Background</button>';
+                echo '</div>';
+                echo '</div>';
+                
+                echo '<button type="button" class="button remove-gallery-item">Remove</button>';
+                echo '</li>';
+            }
+            ?>
+        </ul>
+    </div>
+
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Initialize gallery items array from PHP
+        let galleryItems = <?php echo json_encode($gallery_items); ?>;
+        console.log('Initial gallery items:', galleryItems);
+        
+        // Function to update hidden input values and maintain state
+        function updateHiddenInputs() {
+            const list = document.querySelector('#lcp-gallery-list');
+            list.innerHTML = ''; // Clear the list
+            
+            console.log('Updating gallery items:', galleryItems);
+            
+            // Rebuild the list with current items
+            galleryItems.forEach((item, index) => {
+                const li = document.createElement('li');
+                li.draggable = true;
+                if (item.background_color) {
+                    li.style.backgroundColor = item.background_color;
+                }
+                
+                // Add drag handle
+                const dragHandle = document.createElement('span');
+                dragHandle.className = 'drag-handle dashicons dashicons-menu';
+                li.appendChild(dragHandle);
+                
+                // Add hidden input with item data
+                const input = document.createElement('input');
+                input.type = 'hidden';
+                input.name = 'lcp_gallery[]';
+                input.value = JSON.stringify(item);
+                li.appendChild(input);
+                
+                // Add thumbnail
+                if (item.media_source === 'media_library' && item.media_id) {
+                    wp.media.attachment(item.media_id).fetch().then(function() {
+                        const img = document.createElement('img');
+                        img.src = wp.media.attachment(item.media_id).get('url');
+                        img.style = 'max-width: 150px; height: auto;';
+                        li.appendChild(img);
+                    });
+                } else if (item.media_source === 'youtube' && item.url) {
+                    const div = document.createElement('div');
+                    div.className = 'youtube-thumbnail';
+                    div.style = 'width: 150px; height: 150px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;';
+                    div.innerHTML = '<span class="dashicons dashicons-youtube"></span>';
+                    li.appendChild(div);
+                }
+
+                // Add fields container
+                const fields = document.createElement('div');
+                fields.className = 'gallery-item-fields';
+
+                // Title field
+                const titleLabel = document.createElement('label');
+                titleLabel.textContent = 'Title';
+                fields.appendChild(titleLabel);
+
+                const titleInput = document.createElement('input');
+                titleInput.type = 'text';
+                titleInput.className = 'gallery-item-title';
+                titleInput.value = item.title || '';
+                titleInput.placeholder = 'Enter title';
+                titleInput.addEventListener('input', () => {
+                    item.title = titleInput.value;
+                    updateItemData(index, item);
+                });
+                fields.appendChild(titleInput);
+
+                // Caption field
+                const captionLabel = document.createElement('label');
+                captionLabel.textContent = 'Caption';
+                fields.appendChild(captionLabel);
+
+                const captionInput = document.createElement('textarea');
+                captionInput.className = 'gallery-item-caption';
+                captionInput.rows = 3;
+                captionInput.value = item.caption || '';
+                captionInput.placeholder = 'Enter caption';
+                captionInput.addEventListener('input', () => {
+                    item.caption = captionInput.value;
+                    updateItemData(index, item);
+                });
+                fields.appendChild(captionInput);
+
+                // Background color field
+                const colorLabel = document.createElement('label');
+                colorLabel.textContent = 'Background Color';
+                fields.appendChild(colorLabel);
+
+                const colorWrapper = document.createElement('div');
+                colorWrapper.className = 'color-picker-wrapper';
+
+                const colorInput = document.createElement('input');
+                colorInput.type = 'color';
+                colorInput.className = 'gallery-item-bgcolor';
+                colorInput.value = item.background_color || '#ffffff';
+
+                const updateColorBtn = document.createElement('button');
+                updateColorBtn.type = 'button';
+                updateColorBtn.className = 'button update-bgcolor';
+                updateColorBtn.textContent = 'Update Background';
+                updateColorBtn.addEventListener('click', () => {
+                    const newColor = colorInput.value;
+                    item.background_color = newColor;
+                    li.style.backgroundColor = newColor;
+                    updateItemData(index, item);
+                    console.log('Color updated for item', index, ':', item);
+                });
+
+                colorInput.addEventListener('input', () => {
+                    // Preview the color as user picks
+                    li.style.backgroundColor = colorInput.value;
+                });
+
+                colorWrapper.appendChild(colorInput);
+                colorWrapper.appendChild(updateColorBtn);
+                fields.appendChild(colorWrapper);
+
+                li.appendChild(fields);
+                
+                // Add remove button
+                const removeBtn = document.createElement('button');
+                removeBtn.type = 'button';
+                removeBtn.className = 'button remove-gallery-item';
+                removeBtn.textContent = 'Remove';
+                removeBtn.onclick = function() {
+                    galleryItems.splice(index, 1);
+                    console.log('Removed item at index', index, '. New gallery items:', galleryItems);
+                    updateHiddenInputs();
+                };
+                li.appendChild(removeBtn);
+                
+                // Add drag and drop event listeners
+                li.addEventListener('dragstart', handleDragStart);
+                li.addEventListener('dragend', handleDragEnd);
+                li.addEventListener('dragover', handleDragOver);
+                li.addEventListener('drop', handleDrop);
+                
+                list.appendChild(li);
+            });
+        }
+
+        // Function to update a specific item's data
+        function updateItemData(index, item) {
+            galleryItems[index] = item;
+            const input = document.querySelector(`#lcp-gallery-list li:nth-child(${index + 1}) input[name^="lcp_gallery"]`);
+            if (input) {
+                input.value = JSON.stringify(item);
+                console.log('Updated item at index', index, ':', item);
+                console.log('Current gallery items:', galleryItems);
+            }
+        }
+
+        // Initialize the list with existing items
+        if (galleryItems.length > 0) {
+            console.log('Initializing gallery with existing items:', galleryItems);
+            updateHiddenInputs();
+        }
+
+        // Handle drag and drop
+        let draggedItem = null;
+        let draggedIndex = null;
+
+        function handleDragStart(e) {
+            draggedItem = this;
+            draggedIndex = Array.from(draggedItem.parentNode.children).indexOf(draggedItem);
+            this.classList.add('dragging');
+            e.dataTransfer.effectAllowed = 'move';
+            console.log('Started dragging item at index:', draggedIndex);
+        }
+
+        function handleDragEnd(e) {
+            this.classList.remove('dragging');
+            draggedItem = null;
+            draggedIndex = null;
+        }
+
+        function handleDragOver(e) {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'move';
+        }
+
+        function handleDrop(e) {
+            e.preventDefault();
+            if (draggedItem === this) return;
+
+            const droppedIndex = Array.from(this.parentNode.children).indexOf(this);
+            console.log('Dropping item from index', draggedIndex, 'to index', droppedIndex);
+
+            // Reorder galleryItems array
+            const [movedItem] = galleryItems.splice(draggedIndex, 1);
+            galleryItems.splice(droppedIndex, 0, movedItem);
+
+            console.log('Reordered gallery items:', galleryItems);
+            updateHiddenInputs();
+        }
+
+        // Initialize the media frame
+        let mediaFrame;
+        document.getElementById('add-to-gallery').addEventListener('click', function(e) {
+            e.preventDefault();
+            const source = document.getElementById('lcp-media-source').value;
+
+            if (source === 'media_library') {
+                if (mediaFrame) {
+                    mediaFrame.open();
+                    return;
+                }
+
+                mediaFrame = wp.media({
+                    title: 'Select Media',
+                    button: {
+                        text: 'Add to Gallery'
+                    },
+                    multiple: false
+                });
+
+                mediaFrame.on('select', function() {
+                    const attachment = mediaFrame.state().get('selection').first().toJSON();
+                    const item = {
+                        media_source: 'media_library',
+                        media_id: attachment.id,
+                        title: '',
+                        caption: '',
+                        background_color: ''
+                    };
+                    galleryItems.push(item);
+                    console.log('Added new media library item:', item);
+                    console.log('Current gallery items:', galleryItems);
+                    updateHiddenInputs();
+                });
+
+                mediaFrame.open();
+            } else {
+                const url = prompt('Enter ' + source + ' URL:');
+                if (url) {
+                    const item = {
+                        media_source: source,
+                        url: url,
+                        title: '',
+                        caption: '',
+                        background_color: ''
+                    };
+                    galleryItems.push(item);
+                    console.log('Added new URL item:', item);
+                    console.log('Current gallery items:', galleryItems);
+                    updateHiddenInputs();
+                }
+            }
+        });
+    });
+    </script>
+    <?php
+}
+
+// Save the gallery meta data
+function save_lcp_gallery_meta_box($post_id) {
+    // Check if our nonce is set
+    if (!isset($_POST['lcp_gallery_meta_box_nonce'])) {
+        return;
+    }
+
+    // Verify that the nonce is valid
+    if (!wp_verify_nonce($_POST['lcp_gallery_meta_box_nonce'], 'lcp_gallery_meta_box')) {
+        return;
+    }
+
+    // If this is an autosave, our form has not been submitted, so we don't want to do anything
+    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
+        return;
+    }
+
+    // Check the user's permissions
+    if (isset($_POST['post_type']) && 'page' == $_POST['post_type']) {
+        if (!current_user_can('edit_page', $post_id)) {
+            return;
+        }
+    } else {
+        if (!current_user_can('edit_post', $post_id)) {
+            return;
+        }
+    }
+
+    // Save the gallery data
+    if (isset($_POST['lcp_gallery'])) {
+        $gallery_items = array_map(function($item) {
+            return is_string($item) ? json_decode(wp_unslash($item), true) : $item;
+        }, $_POST['lcp_gallery']);
+        
+        update_post_meta($post_id, 'lcp_gallery', $gallery_items);
+    } else {
+        delete_post_meta($post_id, 'lcp_gallery');
+    }
+}
+add_action('save_post', 'save_lcp_gallery_meta_box');
+
+// Enqueue color picker
+function lcp_gallery_admin_enqueue($hook) {
+    if ('post.php' != $hook && 'post-new.php' != $hook) {
+        return;
+    }
+    wp_enqueue_style('wp-color-picker');
+    wp_enqueue_script('wp-color-picker');
+}
+add_action('admin_enqueue_scripts', 'lcp_gallery_admin_enqueue');
+
+// Add AJAX handler for gallery updates
+add_action('wp_ajax_update_gallery_meta', 'handle_gallery_meta_update');
+add_action('wp_ajax_nopriv_update_gallery_meta', 'handle_gallery_meta_update');
+
+function handle_gallery_meta_update() {
+    // Verify nonce for security
+    if (!current_user_can('edit_posts')) {
+        wp_send_json_error('Permission denied');
+        return;
+    }
+
+    $post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;
+    $gallery_items = isset($_POST['gallery_items']) ? json_decode(stripslashes($_POST['gallery_items']), true) : array();
+
+    // Update the post meta
+    $updated = update_post_meta($post_id, 'lcp_gallery', $gallery_items);
+
+    if ($updated) {
+        wp_send_json_success(array('message' => 'Gallery updated successfully'));
+    } else {
+        wp_send_json_error(array('message' => 'Failed to update gallery'));
+    }
+}
diff --git a/includes/blocks/lcp-dynamic-container/build/index.asset.php b/includes/blocks/lcp-dynamic-container/build/index.asset.php
index c9eef1f..85af080 100644
--- a/includes/blocks/lcp-dynamic-container/build/index.asset.php
+++ b/includes/blocks/lcp-dynamic-container/build/index.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '40a5279a7e8774abfe4c');
+<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '04e9c02e00cfeee61658');
diff --git a/includes/blocks/lcp-dynamic-container/build/index.js b/includes/blocks/lcp-dynamic-container/build/index.js
index b3ee1af..de44f34 100644
--- a/includes/blocks/lcp-dynamic-container/build/index.js
+++ b/includes/blocks/lcp-dynamic-container/build/index.js
@@ -1 +1 @@
-(()=>{"use strict";var e,l={717:()=>{const e=window.wp.blocks,l=window.wp.blockEditor,t=window.wp.components,n=window.React,o=window.wp.i18n,r=window.ReactJSXRuntime,a=JSON.parse('{"UU":"lcp/dynamic-container"}');(0,e.registerBlockType)(a.UU,{edit:function({attributes:e,setAttributes:a}){const i=(0,l.useBlockProps)(),{padding:s,maxWidthLarge:d,maxWidthMedium:x,maxWidthSmall:p,minHeightLarge:g,minHeightMedium:c,minHeightSmall:h,backgroundColor:u}=e,[m,f]=(0,n.useState)(!1),[C,j]=(0,n.useState)(!1),[v,b]=(0,n.useState)(u||"#ffffff"),_=(e,l,t)=>{const n={...s};n[e][l]=t,a({padding:n})},y=(e,l)=>{a({[`maxWidth${l}`]:e})},w=(e,l)=>{a({[`minHeight${l}`]:e})};return(0,n.useEffect)((()=>{console.log("Updated attributes:",e)}),[e]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(l.InspectorControls,{children:[(0,r.jsxs)(t.__experimentalToggleGroupControl,{label:"my label",value:"vertical",isBlock:!0,__nextHasNoMarginBottom:!0,__next40pxDefaultSize:!0,children:[(0,r.jsx)(t.__experimentalToggleGroupControlOption,{value:"horizontal",label:"Horizontal"}),(0,r.jsx)(t.__experimentalToggleGroupControlOption,{value:"vertical",label:"Vertical"})]}),(0,r.jsxs)(t.BaseControl,{label:"Padding - Desktop",children:[(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"row"},children:[(0,r.jsx)("span",{style:{marginRight:"10px"},children:"Padding"}),(0,r.jsx)(t.ToggleControl,{label:"Use Independent Padding",checked:m,onChange:()=>{f(!m)}})]}),m?(0,r.jsxs)("div",{style:{display:"grid",padding:"10px",gridTemplateColumns:"1fr 1fr",gap:"10px",justifyItems:"center"},children:[(0,r.jsxs)("fieldset",{style:{gridColumn:"span 2",width:"116px"},children:[(0,r.jsx)("legend",{children:"Top"}),(0,r.jsx)(t.__experimentalUnitControl,{value:s.extraLarge?.top||"10px",onChange:e=>_("extraLarge","top",e)})]}),(0,r.jsxs)("fieldset",{children:[(0,r.jsx)("legend",{children:"Left"}),(0,r.jsx)(t.__experimentalUnitControl,{value:s.extraLarge?.left||"10px",onChange:e=>_("extraLarge","left",e)})]}),(0,r.jsxs)("fieldset",{children:[(0,r.jsx)("legend",{children:"Right"}),(0,r.jsx)(t.__experimentalUnitControl,{value:s.extraLarge?.right||"10px",onChange:e=>_("extraLarge","right",e)})]}),(0,r.jsxs)("fieldset",{style:{gridColumn:"span 2",width:"116px"},children:[(0,r.jsx)("legend",{children:"Bottom"}),(0,r.jsx)(t.__experimentalUnitControl,{value:s.extraLarge?.bottom||"10px",onChange:e=>_("extraLarge","bottom",e)})]})]}):(0,r.jsx)(t.__experimentalUnitControl,{label:"Padding Value",value:999,onChange:e=>{a({padding:{extraLarge:{top:e,right:e,bottom:e,left:e},large:{top:e,right:e,bottom:e,left:e},medium:{top:e,right:e,bottom:e,left:e},small:{top:e,right:e,bottom:e,left:e}}})}})]}),(0,r.jsx)(t.BaseControl,{label:"Max Width",children:(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"column"},children:[(0,r.jsx)(t.__experimentalUnitControl,{label:"Large",value:d,onChange:e=>y(e,"Large"),defaultUnit:"px"}),(0,r.jsx)(t.__experimentalUnitControl,{label:"Medium",value:x,onChange:e=>y(e,"Medium"),defaultUnit:"px"}),(0,r.jsx)(t.__experimentalUnitControl,{label:"Small",value:p,onChange:e=>y(e,"Small"),defaultUnit:"px"})]})}),(0,r.jsx)(t.BaseControl,{label:"Min Height",children:(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"column"},children:[(0,r.jsx)(t.__experimentalUnitControl,{label:"Large",value:g,onChange:e=>w(e,"Large"),defaultUnit:"px"}),(0,r.jsx)(t.__experimentalUnitControl,{label:"Medium",value:c,onChange:e=>w(e,"Medium"),defaultUnit:"px"}),(0,r.jsx)(t.__experimentalUnitControl,{label:"Small",value:h,onChange:e=>w(e,"Small"),defaultUnit:"px"})]})}),(0,r.jsx)(t.BaseControl,{label:(0,o.__)("Background Color"),children:(0,r.jsxs)("div",{children:[(0,r.jsx)(t.Button,{onClick:()=>j(!C),children:(0,o.__)("Choose Background Color")}),C&&(0,r.jsx)(t.Popover,{position:"bottom center",children:(0,r.jsx)(t.ColorPalette,{value:v,onChange:e=>{b(e),a({backgroundColor:e})},colors:[{name:"Primary",slug:"primary",color:"#3E5062"},{name:"Secondary",slug:"secondary",color:"#2B3843"},{name:"Light Color - 1",slug:"light-color-1",color:"#ECF0F5"},{name:"Dark Gray",slug:"dark-gray",color:"#333333"},{name:"Accent",slug:"accent",color:"#61FFB6"}],disableCustomColors:!1})}),(0,r.jsx)("div",{style:{backgroundColor:v,width:"30px",height:"30px",marginTop:"10px",borderRadius:"50%"}})]})})]}),(0,r.jsx)("div",{...i,style:{maxWidth:d,minHeight:g},children:(0,r.jsx)(l.InnerBlocks,{})})]})},save:function(){const e=l.useBlockProps.save();return(0,r.jsx)("div",{...e,children:(0,r.jsx)(l.InnerBlocks.Content,{})})}})}},t={};function n(e){var o=t[e];if(void 0!==o)return o.exports;var r=t[e]={exports:{}};return l[e](r,r.exports,n),r.exports}n.m=l,e=[],n.O=(l,t,o,r)=>{if(!t){var a=1/0;for(x=0;x<e.length;x++){t=e[x][0],o=e[x][1],r=e[x][2];for(var i=!0,s=0;s<t.length;s++)(!1&r||a>=r)&&Object.keys(n.O).every((e=>n.O[e](t[s])))?t.splice(s--,1):(i=!1,r<a&&(a=r));if(i){e.splice(x--,1);var d=o();void 0!==d&&(l=d)}}return l}r=r||0;for(var x=e.length;x>0&&e[x-1][2]>r;x--)e[x]=e[x-1];e[x]=[t,o,r]},n.o=(e,l)=>Object.prototype.hasOwnProperty.call(e,l),(()=>{var e={57:0,350:0};n.O.j=l=>0===e[l];var l=(l,t)=>{var o,r,a=t[0],i=t[1],s=t[2],d=0;if(a.some((l=>0!==e[l]))){for(o in i)n.o(i,o)&&(n.m[o]=i[o]);if(s)var x=s(n)}for(l&&l(t);d<a.length;d++)r=a[d],n.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return n.O(x)},t=self.webpackChunklcp_viewport=self.webpackChunklcp_viewport||[];t.forEach(l.bind(null,0)),t.push=l.bind(null,t.push.bind(t))})();var o=n.O(void 0,[350],(()=>n(717)));o=n.O(o)})();
\ No newline at end of file
+(()=>{"use strict";var e,l={717:()=>{const e=window.wp.blocks,l=window.wp.blockEditor,t=window.wp.components,n=window.React,o=window.wp.i18n,r=window.ReactJSXRuntime,a=JSON.parse('{"UU":"lcp/dynamic-container"}');(0,e.registerBlockType)(a.UU,{edit:function({attributes:e,setAttributes:a}){const i=(0,l.useBlockProps)(),{padding:s,maxWidthLarge:d,maxWidthMedium:x,maxWidthSmall:g,minHeightLarge:p,minHeightMedium:c,minHeightSmall:h,backgroundColor:u}=e,[m,f]=(0,n.useState)(!1),[C,j]=(0,n.useState)(!1),[v,b]=(0,n.useState)(u||"#ffffff"),_=(e,l,t)=>{const n={...s};n[e][l]=t,a({padding:n})},y=(e,l)=>{a({[`maxWidth${l}`]:e})},w=(e,l)=>{a({[`minHeight${l}`]:e})};return(0,n.useEffect)((()=>{console.log("Updated attributes:",e)}),[e]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(l.InspectorControls,{children:[(0,r.jsxs)(t.__experimentalToggleGroupControl,{label:"my label",value:"vertical",isBlock:!0,__nextHasNoMarginBottom:!0,__next40pxDefaultSize:!0,children:[(0,r.jsx)(t.__experimentalToggleGroupControlOption,{value:"horizontal",label:"Horizontal"}),(0,r.jsx)(t.__experimentalToggleGroupControlOption,{value:"vertical",label:"Vertical"})]}),(0,r.jsxs)(t.BaseControl,{label:"Padding - Desktop",children:[(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"row"},children:[(0,r.jsx)("span",{style:{marginRight:"10px"},children:"Padding"}),(0,r.jsx)(t.ToggleControl,{label:"Use Independent Padding",checked:m,onChange:()=>{f(!m)}})]}),m?(0,r.jsxs)("div",{style:{display:"grid",padding:"10px",gridTemplateColumns:"1fr 1fr",gap:"10px",justifyItems:"center"},children:[(0,r.jsxs)("fieldset",{style:{gridColumn:"span 2",width:"116px"},children:[(0,r.jsx)("legend",{children:"Top"}),(0,r.jsx)(t.__experimentalUnitControl,{value:s.extraLarge?.top||"10px",onChange:e=>_("extraLarge","top",e)})]}),(0,r.jsxs)("fieldset",{children:[(0,r.jsx)("legend",{children:"Left"}),(0,r.jsx)(t.__experimentalUnitControl,{value:s.extraLarge?.left||"10px",onChange:e=>_("extraLarge","left",e)})]}),(0,r.jsxs)("fieldset",{children:[(0,r.jsx)("legend",{children:"Right"}),(0,r.jsx)(t.__experimentalUnitControl,{value:s.extraLarge?.right||"10px",onChange:e=>_("extraLarge","right",e)})]}),(0,r.jsxs)("fieldset",{style:{gridColumn:"span 2",width:"116px"},children:[(0,r.jsx)("legend",{children:"Bottom"}),(0,r.jsx)(t.__experimentalUnitControl,{value:s.extraLarge?.bottom||"10px",onChange:e=>_("extraLarge","bottom",e)})]})]}):(0,r.jsx)(t.__experimentalUnitControl,{label:"Padding Value",value:999,onChange:e=>{a({padding:{extraLarge:{top:e,right:e,bottom:e,left:e},large:{top:e,right:e,bottom:e,left:e},medium:{top:e,right:e,bottom:e,left:e},small:{top:e,right:e,bottom:e,left:e}}})}})]}),(0,r.jsx)(t.BaseControl,{label:"Max Width",children:(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"column"},children:[(0,r.jsx)(t.__experimentalUnitControl,{label:"Large",value:d,onChange:e=>y(e,"Large"),defaultUnit:"px"}),(0,r.jsx)(t.__experimentalUnitControl,{label:"Medium",value:x,onChange:e=>y(e,"Medium"),defaultUnit:"px"}),(0,r.jsx)(t.__experimentalUnitControl,{label:"Small",value:g,onChange:e=>y(e,"Small"),defaultUnit:"px"})]})}),(0,r.jsx)(t.BaseControl,{label:"Min Height",children:(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"column"},children:[(0,r.jsx)(t.__experimentalUnitControl,{label:"Large",value:p,onChange:e=>w(e,"Large"),defaultUnit:"px"}),(0,r.jsx)(t.__experimentalUnitControl,{label:"Medium",value:c,onChange:e=>w(e,"Medium"),defaultUnit:"px"}),(0,r.jsx)(t.__experimentalUnitControl,{label:"Small",value:h,onChange:e=>w(e,"Small"),defaultUnit:"px"})]})}),(0,r.jsx)(t.BaseControl,{label:(0,o.__)("Background Color"),children:(0,r.jsxs)("div",{children:[(0,r.jsx)(t.Button,{onClick:()=>j(!C),children:(0,o.__)("Choose Background Color")}),C&&(0,r.jsx)(t.Popover,{position:"bottom center",children:(0,r.jsx)(t.ColorPalette,{value:v,onChange:e=>{b(e),a({backgroundColor:e})},colors:[{name:"Primary",slug:"primary",color:"#3E5062"},{name:"Secondary",slug:"secondary",color:"#2B3843"},{name:"Light Color - 1",slug:"light-color-1",color:"#ECF0F5"},{name:"Dark Gray",slug:"dark-gray",color:"#333333"},{name:"Accent",slug:"accent",color:"#61FFB6"}],disableCustomColors:!1})}),(0,r.jsx)("div",{style:{backgroundColor:v,width:"30px",height:"30px",marginTop:"10px",borderRadius:"50%"}})]})})]}),(0,r.jsx)("div",{...i,style:{maxWidth:d,minHeight:p},children:(0,r.jsx)(l.InnerBlocks,{})})]})},save:function(){return(0,r.jsx)(l.InnerBlocks.Content,{})}})}},t={};function n(e){var o=t[e];if(void 0!==o)return o.exports;var r=t[e]={exports:{}};return l[e](r,r.exports,n),r.exports}n.m=l,e=[],n.O=(l,t,o,r)=>{if(!t){var a=1/0;for(x=0;x<e.length;x++){t=e[x][0],o=e[x][1],r=e[x][2];for(var i=!0,s=0;s<t.length;s++)(!1&r||a>=r)&&Object.keys(n.O).every((e=>n.O[e](t[s])))?t.splice(s--,1):(i=!1,r<a&&(a=r));if(i){e.splice(x--,1);var d=o();void 0!==d&&(l=d)}}return l}r=r||0;for(var x=e.length;x>0&&e[x-1][2]>r;x--)e[x]=e[x-1];e[x]=[t,o,r]},n.o=(e,l)=>Object.prototype.hasOwnProperty.call(e,l),(()=>{var e={57:0,350:0};n.O.j=l=>0===e[l];var l=(l,t)=>{var o,r,a=t[0],i=t[1],s=t[2],d=0;if(a.some((l=>0!==e[l]))){for(o in i)n.o(i,o)&&(n.m[o]=i[o]);if(s)var x=s(n)}for(l&&l(t);d<a.length;d++)r=a[d],n.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return n.O(x)},t=self.webpackChunklcp_viewport=self.webpackChunklcp_viewport||[];t.forEach(l.bind(null,0)),t.push=l.bind(null,t.push.bind(t))})();var o=n.O(void 0,[350],(()=>n(717)));o=n.O(o)})();
\ No newline at end of file
diff --git a/includes/blocks/lcp-dynamic-container/build/style-index-rtl.css b/includes/blocks/lcp-dynamic-container/build/style-index-rtl.css
index 47253dd..4c40234 100644
--- a/includes/blocks/lcp-dynamic-container/build/style-index-rtl.css
+++ b/includes/blocks/lcp-dynamic-container/build/style-index-rtl.css
@@ -1 +1 @@
-.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px}
+.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px}.lcp-dynamic-container.lcp-has-background-image{position:relative;width:100%}.lcp-dynamic-container.lcp-has-background-image>.lcp-background-image{height:100%;right:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;position:absolute;top:0;width:100%}
diff --git a/includes/blocks/lcp-dynamic-container/build/style-index.css b/includes/blocks/lcp-dynamic-container/build/style-index.css
index 47253dd..b00889b 100644
--- a/includes/blocks/lcp-dynamic-container/build/style-index.css
+++ b/includes/blocks/lcp-dynamic-container/build/style-index.css
@@ -1 +1 @@
-.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px}
+.wp-block-create-block-lcp-viewport{background-color:#21759b;color:#fff;padding:2px}.lcp-dynamic-container.lcp-has-background-image{position:relative;width:100%}.lcp-dynamic-container.lcp-has-background-image>.lcp-background-image{height:100%;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;position:absolute;top:0;width:100%}
diff --git a/includes/blocks/lcp-dynamic-container/lcp-dynamic-container.php b/includes/blocks/lcp-dynamic-container/lcp-dynamic-container.php
index 84fc3eb..6d1471b 100644
--- a/includes/blocks/lcp-dynamic-container/lcp-dynamic-container.php
+++ b/includes/blocks/lcp-dynamic-container/lcp-dynamic-container.php
@@ -65,10 +65,10 @@ if (!function_exists('lcp_random_string')) {
 }
 
 
- function render_lcp_container( $attributes, $content ) {
+ function render_lcp_dynamic_container( $attributes, $content ) {
     // Debugging: Check the passed attributes
     //var_dump($attributes);
-
+   
     // Generate a random class name (optional, could be customized)
     $random_class = lcp_random_string(12,true);
 
@@ -159,13 +159,39 @@ if (!function_exists('lcp_random_string')) {
     if ( ! empty( $style ) ) {
         $style_tag = sprintf( '<style>.%s { %s }</style>', esc_attr( $random_class ), $style );
     }
+    // Set the post thumbnail
+    if ( has_post_thumbnail() ) {
+        // Get the post thumbnail URL for different sizes
+        $full_size_url = get_the_post_thumbnail_url( get_the_ID(), 'full' );
+        $medium_size_url = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
+        $large_size_url = get_the_post_thumbnail_url( get_the_ID(), 'large' );
+    
+        // Generate the <picture> element with <source> and <img> tags for responsiveness
+        $post_thumb = '<picture class="lcp-background-image">';
+        
+        // Add source for large image (for screens >= 1200px)
+        $post_thumb .= '<source media="(min-width: 1200px)" srcset="' . esc_url( $large_size_url ) . '">';
+        
+        // Add source for medium image (for screens >= 768px)
+        $post_thumb .= '<source media="(min-width: 768px)" srcset="' . esc_url( $medium_size_url ) . '">';
+        
+        // Add fallback image (for smaller screens or if no match for media queries)
+        $post_thumb .= '<img src="' . esc_url( $full_size_url ) . '" alt="Responsive Background Image" class="responsive-background">';
+        
+        $post_thumb .= '</picture>';
+    }
+    
+    $has_background_image = (2 + 2 == 4) ? 'lcp-has-background-image' : '';
 
     // Output the content wrapped in the div with the random class and padding styles
     return $style_tag . sprintf(
-        '<div class="lcp-container %s">%s</div>',
-        esc_attr( $random_class ),
-        $content
+        '<div class="lcp-dynamic-container %s %s">%s%s</div>',
+        esc_attr( $random_class ),    // The random class
+        esc_attr( $has_background_image), // Conditionally add 'lcp-has-background-image' class
+        $post_thumb,  // Add the $post_thumb (responsive image) here,
+        $content      // Keep the original content
     );
+    
 }
 
 
diff --git a/includes/blocks/lcp-dynamic-container/src/save.js b/includes/blocks/lcp-dynamic-container/src/save.js
index 813166b..a6f0e78 100644
--- a/includes/blocks/lcp-dynamic-container/src/save.js
+++ b/includes/blocks/lcp-dynamic-container/src/save.js
@@ -1,12 +1,4 @@
-import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
-
-export default function Save() {
-    // Block props
-    const blockProps = useBlockProps.save();
-
-    return (
-        <div {...blockProps}>
-            <InnerBlocks.Content />
-        </div>
-    );
-}
+import { InnerBlocks } from '@wordpress/block-editor';
+export default function save() {
+    return (<InnerBlocks.Content/>); // No content is saved in the database for dynamic blocks
+}
\ No newline at end of file
diff --git a/includes/blocks/lcp-dynamic-container/src/style.scss b/includes/blocks/lcp-dynamic-container/src/style.scss
index e19fc0b..fe755e9 100644
--- a/includes/blocks/lcp-dynamic-container/src/style.scss
+++ b/includes/blocks/lcp-dynamic-container/src/style.scss
@@ -10,3 +10,20 @@
 	color: #fff;
 	padding: 2px;
 }
+
+.lcp-dynamic-container.lcp-has-background-image {
+	position:relative;
+	width:100%;
+}
+
+.lcp-dynamic-container.lcp-has-background-image > .lcp-background-image {
+
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover; /* Cover the container like a background */
+		object-position: center center; /* Center the image */
+	  
+}
\ No newline at end of file
diff --git a/includes/blocks/lcp-gallery/build/block.json b/includes/blocks/lcp-gallery/build/block.json
index 547b6b9..64affc9 100644
--- a/includes/blocks/lcp-gallery/build/block.json
+++ b/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
diff --git a/includes/blocks/lcp-gallery/lcp-gallery.php b/includes/blocks/lcp-gallery/lcp-gallery.php
index 7feb4c2..e66e830 100644
--- a/includes/blocks/lcp-gallery/lcp-gallery.php
+++ b/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
diff --git a/includes/blocks/lcp-gallery/src/edit.js b/includes/blocks/lcp-gallery/src/edit.js
index 3de96af..c8efcea 100644
--- a/includes/blocks/lcp-gallery/src/edit.js
+++ b/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);
diff --git a/includes/classes/wp-hooks.php b/includes/classes/wp-hooks.php
index 5c72147..567312e 100644
--- a/includes/classes/wp-hooks.php
+++ b/includes/classes/wp-hooks.php
@@ -82,4 +82,31 @@ function lcp_after_setup_theme() {
     lcp_register_custom_image_sizes();
 
 }
-add_action('after_setup_theme', 'lcp_after_setup_theme');
\ No newline at end of file
+add_action('after_setup_theme', 'lcp_after_setup_theme');
+
+function lcp_init_hooks() {
+    lcp_register_pattern_categories();
+    lcp_register_patterns();
+}
+
+add_action('init', 'lcp_init_hooks');
+
+// Register pattern categories
+function lcp_register_pattern_categories() {
+    register_block_pattern_category( 'lcp/customss', array( 
+        'label'       => __( 'Theme Name: Local Content Pro', 'lcp' ),
+        'description' => __( 'Custom patterns for Local Content Pro.', 'lcp' )
+    ) );
+}
+
+// Register block pattern
+function lcp_register_patterns() {
+    register_block_pattern(
+        'lcp/post-content', // Unique slug
+        array(
+            'title'       => __( 'Post Content', 'lcp' ),
+            'description' => __( 'A pattern for displaying post content', 'lcp' ),
+            'content'     => file_get_contents( get_template_directory() . '/patterns/post-content.php' ),
+        )
+    );
+}
\ No newline at end of file
diff --git a/patterns/post-content.php b/patterns/post-content.php
new file mode 100644
index 0000000..4c1aada
--- /dev/null
+++ b/patterns/post-content.php
@@ -0,0 +1,27 @@
+<?php
+/**
+ * Title: Post Content
+ * Slug: twentytwentyfive/banner-about-book
+ * Categories: banner
+ * Description: Banner with book description and accompanying image for promotion.
+ *
+ * @package WordPress
+ * @subpackage Twenty_Twenty_Five
+ * @since Twenty Twenty-Five 1.0
+ */
+
+?>
+
+    <!-- wp:comment-author-name {"fontSize":"small"} /-->
+
+    <!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
+    <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px">
+        <!-- wp:comment-date {"fontSize":"small"} /-->
+        <!-- wp:comment-edit-link {"fontSize":"small"} /-->
+    </div>
+    <!-- /wp:group -->
+    
+    <!-- wp:comment-content /-->
+    
+    <!-- wp:comment-reply-link {"fontSize":"small"} /-->
+
diff --git a/theme.json b/theme.json
index c63fc04..6e324e5 100644
--- a/theme.json
+++ b/theme.json
@@ -44,18 +44,23 @@
 				},
 				{
 					"color": "#00E080",
-					"name": "Accent",
-					"slug": "accent"
+					"name": "Accent - 1",
+					"slug": "accent-1"
 				},
 				{
 					"color": "#00FC90",
-					"name": "Accent 2",
-					"slug": "accent-2"
+					"name": "Accent Light - 1",
+					"slug": "accent-light-1"
 				},
 				{
 					"color": "#232323",
 					"name": "Font 1",
 					"slug": "font-color-1"
+				},
+				{
+					"color": "#a0a0a0",
+					"name": "Font Light 1",
+					"slug": "font-light-1"
 				}
 			]
 		},
@@ -201,6 +206,7 @@
 		"useRootPaddingAwareAlignments": true
 	},
 	"styles": {
+
 		"color": {
 			"background": "var:preset|color|base",
 			"text": "var:preset|color|contrast"
@@ -214,7 +220,7 @@
 		},
 		"typography": {
 			"fontFamily": "var:preset|font-family|manrope",
-			"fontSize": "var:preset|font-size|large",
+			"fontSize": "var:preset|font-size|medium",
 			"fontWeight": "300",
 			"letterSpacing": "-0.1px",
 			"lineHeight": "1.4"