jrangel/local-content-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes to blocks

Browse Source
This commit is contained in:
Jeremy Rangel
2024-12-22 15:20:12 -08:00
parent cfbb860bf9
commit f3fbe0fa32
25 changed files with 612 additions and 1035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
includes/blocks/lcp-gallery/src/edit.js
View File

@ -1,6 +1,13 @@
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls, MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { useState, useEffect } from 'react';
import {
InspectorControls,
MediaUpload,
MediaUploadCheck
} from '@wordpress/block-editor';
import { useState,
useEffect,
FC
} from 'react';
import { useSelect } from '@wordpress/data';
import {
PanelBody,
@ -18,12 +25,48 @@ import {
import metadata from './block.json';
import './editor.scss';
import LightGallery from 'lightgallery/react';
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-zoom.css';
import 'lightgallery/css/lg-thumbnail.css';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';
//Import the LcpGallery component
import LcpGallery from '../components/LightGallery';
const galleryElements = [
{
src:
"https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80",
responsive:
"https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=480&q=80 480, https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80 800",
thumb:
"https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80",
subHtml: (
<div className="lightGallery-captions">
<h4>
Photo by <a href="https://unsplash.com/@dann">Dan</a>
</h4>
<p>Published on November 13, 2018</p>
</div>
),
},
{
src:
"https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80",
responsive:
"https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=480&q=80 480, https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80 800",
thumb:
"https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80",
subHtml: (
<div className="lightGallery-captions">
<h4>
Photo by <a href="https://unsplash.com/@kylepyt">Kyle Peyton</a>
</h4>
<p>Published on September 14, 2016</p>
</div>
),
},
]
// Aspect ratio options
const aspectRatioOptions = [
@ -41,9 +84,9 @@ const { apiFetch } = wp;
apiFetch({ path: '/custom/v1/get-gallery-supported-plugins-data' })
.then((data) => {
console.log(data); // Log the entire data object
if (data.jetengine_active) {
console.log('Jet Engine is activated');
console.log(data); // Log the entire data object
if (data.jetengine_active) {
console.log('Jet Engine is activated');
// Other logic here
}
})
@ -125,12 +168,7 @@ export default function Edit(props) {
// Handle Updating LightGallery settings
const [settings, setSettings] = useState(lgSettings);
useEffect(() => {
// Only update state if lgSettings actually change
if (JSON.stringify(settings) !== JSON.stringify(lgSettings)) {
setSettings(lgSettings);
}
}, [lgSettings]); // Runs only when lgSettings change
const [borders, setBorders] = useState(thumbnailsBorders || {
top: { color: '#000000', style: 'solid', width: '1px' },
@ -211,38 +249,6 @@ export default function Edit(props) {
];
useEffect(() => {
// Initialize plugins array
const updatedPlugins = [];
// Loop through the plugin requirements
lgPluginRequirements.forEach(({ setting, plugin }) => {
// If the setting is enabled, add the corresponding plugin to the plugins array
if (lgSettings[setting]) {
updatedPlugins.push(plugin);
}
});
// Use function-based setAttributes to get the latest lgSettings and update plugins array
setAttributes((prevAttributes) => {
const updatedLgSettings = {
...prevAttributes.lgSettings,
plugins: updatedPlugins, // Updated plugins array
};
// Log the lgSettings after update
console.log("Updated lgSettings:", updatedLgSettings);
return {
...prevAttributes,
lgSettings: updatedLgSettings,
};
});
}, [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) => {
@ -263,25 +269,57 @@ const { isTemplate, postType, postId } = useSelect((select) => {
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) } ];
{ value: 'lcpPostGallery', label: __('Post Gallery', metadata.textdomain) },
{ value: 'metaField', label: __('Meta field of current post', metadata.textdomain) },
{ value: 'linkedTable', 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) }
{ value: 'lcpPostGallery', label: __('Post Gallery', metadata.textdomain) }
];
// Add logic for post/page editing mode
}
// Now you can use sourceOptions as needed in your block rendering logic
const updateLgSetting = (key, value) => {
setAttributes({
lgSettings: {
...lgSettings,
[key]: value,
},
});
};
// Function to toggle plugins (add/remove a plugin)
const togglePlugin = (plugin, enable) => {
setAttributes({
lgSettings: {
...lgSettings,
plugins: enable
? [...lgSettings.plugins, plugin] // Add the plugin if enabled
: lgSettings.plugins.filter((p) => p !== plugin), // Remove the plugin if disabled
},
});
};
// Toggle Control for enabling 'Hash' and updating the plugin array
const handleToggleHash = (value) => {
updateLgSetting('hash', value);
togglePlugin('lgHash', value); // Add/Remove lgHash plugin based on toggle value
};
// Example control for enabling 'Zoom' and updating the plugin array
const handleToggleZoom = (value) => {
updateLgSetting('zoom', value);
togglePlugin('lgZoom', value); // Add/Remove lgZoom plugin based on toggle value
};
return (
<>
{/* The Gallery */}
<LightGallery {...attributes.lgSettings} />
<InspectorControls>
{/* Settings and Style Tabs */}
<TabPanel
@ -313,14 +351,14 @@ const { isTemplate, postType, postId } = useSelect((select) => {
options={sourceOptions}
/>
{source === 'manual' && <MultiMediaUpload onSelect={handleSelectMedia} />}
{source === 'meta_field' && (
{source === 'metaField' && (
<TextControl
label={__('Meta Field Name')}
value={sourceMetaField}
onChange={(newValue) => setAttributes({ sourceMetaField: newValue })}
/>
)}
{source === 'linked_table' && (
{source === 'linkedTable' && (
<>
<TextControl
label={__('Table Name')}
@ -500,13 +538,14 @@ const { isTemplate, postType, postId } = useSelect((select) => {
label={__('Enable Zoom', 'lcp')}
checked={lgSettings.zoom}
onChange={(value) => {
// Update autoplay
setAttributes({
lgSettings: {
...lgSettings,
zoom: value, // Update the zoom setting
plugins: value
? [...lgSettings.plugins, 'lgZoom'] // Add lgZoom plugin if enabled
: lgSettings.plugins.filter(plugin => plugin !== 'lgZoom'), // Remove lgZoom plugin if disabled
? [...lgSettings.plugins, 'lgZoom'] // Add lgFullScreen plugin if enabled
: lgSettings.plugins.filter(plugin => plugin !== 'lgZoom'), // Remove lgFullScreen plugin if disabled
},
});
}}
@ -814,8 +853,6 @@ const { isTemplate, postType, postId } = useSelect((select) => {
</TabPanel>
</InspectorControls>
</>
);
}