Changes to directory structure
This commit is contained in:
Jeremy Rangel
339
includes/blocks/lcp-gallery/src/block.json
Normal file
339
includes/blocks/lcp-gallery/src/block.json
Normal file
@ -0,0 +1,339 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "lcp/lcp-gallery",
|
||||
"version": "0.1.0",
|
||||
"title": "LCP Gallery",
|
||||
"category": "widgets",
|
||||
"icon": "",
|
||||
"description": "A dynamic or static gallery based on the Lightgallery javascript plugin",
|
||||
"example": {},
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
|
||||
"parseElementForItems": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"parsedTargetElement": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"parsedExcludedElements": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"lgSettings": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"zoom": false,
|
||||
"thumbnail": false,
|
||||
"toggleThumb":false,
|
||||
"thumbWidth": 120,
|
||||
"thumbHeight": "80px",
|
||||
"thumbMargin": 4,
|
||||
"hash": false,
|
||||
"galleryId": "1",
|
||||
"dynamic": false,
|
||||
"mode": "lg-fade",
|
||||
"cssEasing": "ease",
|
||||
"rotate": false,
|
||||
"fullScreen": false,
|
||||
"autoplay": false,
|
||||
"download": false,
|
||||
"container": "",
|
||||
"closable": true,
|
||||
"zoomFromOrigin": false,
|
||||
"showMaximizeIcon": false,
|
||||
"plugins": []
|
||||
}
|
||||
},
|
||||
"hashGalleryId": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"source": {
|
||||
"type": "string",
|
||||
"default": "manual"
|
||||
},
|
||||
"galleryItems": {
|
||||
"type": "array"
|
||||
},
|
||||
"sourceMetaField": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"sourceTable": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"sourceColumn": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"includePostThumbnail": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"initialLayout": {
|
||||
"type": "string",
|
||||
"default": "grid"
|
||||
},
|
||||
"initialLayoutLarge": {
|
||||
"type": "string",
|
||||
"default": "inline"
|
||||
},
|
||||
"initialLayoutSmall": {
|
||||
"type": "string",
|
||||
"default": "inline"
|
||||
},
|
||||
"justifiedRowHeightSmall": {
|
||||
"type": "string",
|
||||
"default": "150px"
|
||||
},
|
||||
"justifiedRowHeightMedium": {
|
||||
"type": "string",
|
||||
"default": "150px"
|
||||
},
|
||||
"justifiedRowHeightLarge": {
|
||||
"type": "string",
|
||||
"default": "150px"
|
||||
},
|
||||
"justifiedLastRow": {
|
||||
"type": "string",
|
||||
"default": "justify"
|
||||
},
|
||||
"maxInitialItems": {
|
||||
"type": "number",
|
||||
"default": 0
|
||||
},
|
||||
"initialImageSize": {
|
||||
"type": "string",
|
||||
"default": "medium-large"
|
||||
},
|
||||
"inlineHeightSmall": {
|
||||
"type": "string",
|
||||
"default": "300px"
|
||||
},
|
||||
"inlineHeightMedium": {
|
||||
"type": "string",
|
||||
"default": "400px"
|
||||
},
|
||||
"inlineHeightLarge": {
|
||||
"type": "string",
|
||||
"default": "500px"
|
||||
},
|
||||
"containerWidthDesktop": {
|
||||
"type": "string",
|
||||
"default": "100%"
|
||||
},
|
||||
"containerWidthTablet": {
|
||||
"type": "string",
|
||||
"default": "100%"
|
||||
},
|
||||
"containerWidthMobile": {
|
||||
"type": "string",
|
||||
"default": "100%"
|
||||
},
|
||||
"itemsAspectRatio": {
|
||||
"type": "string",
|
||||
"default": "1-1"
|
||||
},
|
||||
"gridColumns": {
|
||||
"type": "number",
|
||||
"default": 4
|
||||
},
|
||||
"gridColumnsLarge": {
|
||||
"type": "number",
|
||||
"default": 4
|
||||
},
|
||||
"gridColumnsMedium": {
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"gridColumnsSmall": {
|
||||
"type": "number",
|
||||
"default": 2
|
||||
},
|
||||
"gridGapLarge": {
|
||||
"type": "number",
|
||||
"default": 10
|
||||
},
|
||||
"gridGapMedium": {
|
||||
"type": "number",
|
||||
"default": 10
|
||||
},
|
||||
"gridGapSmall": {
|
||||
"type": "number",
|
||||
"default": 10
|
||||
},
|
||||
"downloadLimitRoles": {
|
||||
"type": "array",
|
||||
"default": ""
|
||||
},
|
||||
"allowHideThumbnails": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"thumbnailsStyle": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"thumbnailActiveStyle": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"thumbnailBorders": {
|
||||
"type": "object"
|
||||
},
|
||||
"thumbnailBordersSelected": {
|
||||
"type": "object"
|
||||
},
|
||||
"thumbsBackgroundColor": {
|
||||
"type": "string"
|
||||
},
|
||||
"backdropBackgroundColor": {
|
||||
"type": "string"
|
||||
},
|
||||
"showCaptions": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"showItemTitle": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"showItemDescription": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"lgMode": {
|
||||
"type": "string",
|
||||
"default": "lg-slide"
|
||||
},
|
||||
"downloadSize": {
|
||||
"type": "string",
|
||||
"default": "full"
|
||||
},
|
||||
"allowShare": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"lgVideo": {
|
||||
"type": "boolean",
|
||||
"default": "true"
|
||||
},
|
||||
"dynamic": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
|
||||
"loop": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
|
||||
|
||||
"speed": {
|
||||
"type": "number",
|
||||
"default": 500
|
||||
},
|
||||
"slideDelay": {
|
||||
"type": "number",
|
||||
"default": 200
|
||||
},
|
||||
"hash": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"allowZoom": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"closable": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"closeOnTap": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"container": {
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"showControls": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"showCounter": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"showMaximizeIcon": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"easing": {
|
||||
"type": "string",
|
||||
"default": "ease"
|
||||
},
|
||||
"download": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"appendThumbnailsTo": {
|
||||
"type": "string",
|
||||
"default": ".lg-components"
|
||||
},
|
||||
"appendSubHtmlTo": {
|
||||
"type": "string",
|
||||
"default": ".lg-item"
|
||||
},
|
||||
"thumbWidth": {
|
||||
"type": "string",
|
||||
"default": "80px"
|
||||
},
|
||||
"thumbHeight": {
|
||||
"type": "string",
|
||||
"default": "80px"
|
||||
},
|
||||
"thumbnailsBorders": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"top": { "color": "#000000", "style": "solid", "width": "10px" },
|
||||
"right": { "color": "#000000", "style": "solid", "width": "10px" },
|
||||
"bottom": { "color": "#000000", "style": "solid", "width": "10px" },
|
||||
"left": { "color": "#000000", "style": "solid", "width": "10px" }
|
||||
}
|
||||
},
|
||||
"thumbnailsBordersSelected": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"top": { "color": "#000000", "style": "solid", "width": "1px" },
|
||||
"right": { "color": "#000000", "style": "solid", "width": "1px" },
|
||||
"bottom": { "color": "#000000", "style": "solid", "width": "1px" },
|
||||
"left": { "color": "#000000", "style": "solid", "width": "1px" }
|
||||
}
|
||||
},
|
||||
"thumbMargin": {
|
||||
"type": "number",
|
||||
"default": 5
|
||||
},
|
||||
"toggleThumb": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"numberOfSlideItemsInDom": {
|
||||
"type": "number",
|
||||
"default": 10
|
||||
}
|
||||
|
||||
},
|
||||
"textdomain": "lcp",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"viewScript": ["file:./view.js"],
|
||||
"viewStyle": [ "file:./lightgallery-bundle.min.css" ]
|
||||
|
||||
}
|
||||
815
includes/blocks/lcp-gallery/src/edit.js
Normal file
815
includes/blocks/lcp-gallery/src/edit.js
Normal file
@ -0,0 +1,815 @@
|
||||
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,
|
||||
Button,
|
||||
ToggleControl,
|
||||
TextControl,
|
||||
__experimentalNumberControl as NumberControl,
|
||||
__experimentalUnitControl as UnitControl,
|
||||
TabPanel,
|
||||
__experimentalBorderControl as BorderControl
|
||||
} from '@wordpress/components';
|
||||
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';
|
||||
|
||||
// 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;
|
||||
|
||||
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');
|
||||
// Other logic here
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching Jet Engine status:', error);
|
||||
});
|
||||
|
||||
|
||||
const MultiMediaUpload = ({ onSelect }) => {
|
||||
const [mediaIds, setMediaIds] = useState([]);
|
||||
|
||||
const handleSelectMedia = (media) => {
|
||||
const selectedMedia = media.map((item) => ({
|
||||
id: item.id,
|
||||
url: item.url,
|
||||
alt: item.alt || ''
|
||||
}));
|
||||
setMediaIds(selectedMedia);
|
||||
onSelect(selectedMedia);
|
||||
};
|
||||
|
||||
return (
|
||||
<MediaUploadCheck>
|
||||
<MediaUpload
|
||||
onSelect={handleSelectMedia}
|
||||
allowedTypes={['image', 'video']}
|
||||
multiple
|
||||
gallery
|
||||
render={({ open }) => (
|
||||
<Button onClick={open} isPrimary>
|
||||
{__('Open Media Library')}
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
</MediaUploadCheck>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Edit(props) {
|
||||
const { attributes, setAttributes } = props;
|
||||
const {
|
||||
galleryItems = [],
|
||||
source,
|
||||
sourceMetaField,
|
||||
sourceTable,
|
||||
sourceColumn,
|
||||
includePostThumbnail,
|
||||
initialLayout,
|
||||
itemsAspectRatio,
|
||||
gridColumnsLarge,
|
||||
gridColumnsMedium,
|
||||
gridColumnsSmall,
|
||||
gridGapLarge,
|
||||
gridGapMedium,
|
||||
gridGapSmall,
|
||||
|
||||
download,
|
||||
|
||||
downloadSize,
|
||||
|
||||
maxInitialItems,
|
||||
thumbnail,
|
||||
inlineHeightLarge,
|
||||
inlineHeightMedium,
|
||||
inlineHeightSmall,
|
||||
justifiedRowHeightSmall,
|
||||
justifiedRowHeightMedium,
|
||||
justifiedRowHeightLarge,
|
||||
justifiedLastRow,
|
||||
thumbnailsBorders,
|
||||
thumbnailsBordersSelected,
|
||||
thumbnailsStyle,
|
||||
thumbnailActiveStyle,
|
||||
showCaptions,
|
||||
zoomFromOrigin,
|
||||
|
||||
lgSettings
|
||||
} = attributes;
|
||||
|
||||
// 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' },
|
||||
right: { color: '#000000', style: 'solid', width: '1px' },
|
||||
bottom: { color: '#000000', style: 'solid', width: '1px' },
|
||||
left: { color: '#000000', style: 'solid', width: '1px' }
|
||||
});
|
||||
|
||||
const [selectedBorders, setSelectedBorders] = useState(thumbnailsBordersSelected || {
|
||||
top: { color: '#000000', style: 'solid', width: '1px' },
|
||||
right: { color: '#000000', style: 'solid', width: '1px' },
|
||||
bottom: { color: '#000000', style: 'solid', width: '1px' },
|
||||
left: { color: '#000000', style: 'solid', width: '1px' }
|
||||
});
|
||||
|
||||
const handleSelectMedia = (selectedMedia) => {
|
||||
setAttributes({ galleryItems: selectedMedia });
|
||||
};
|
||||
|
||||
const handleBorderChange = (newBorders) => {
|
||||
setBorders(newBorders);
|
||||
setAttributes({ thumbnailsBorders: newBorders });
|
||||
};
|
||||
|
||||
const handleBorderSelectedChange = (newBorders) => {
|
||||
setSelectedBorders(newBorders);
|
||||
setAttributes({ thumbnailsBordersSelected: newBorders });
|
||||
};
|
||||
|
||||
|
||||
|
||||
// lightGallery Transistion Styles
|
||||
const lgTransitionStyles = [
|
||||
{ label: 'lg-slide', value: 'lg-slide' },
|
||||
{ label: 'lg-fade', value: 'lg-fade' },
|
||||
{ label: 'lg-zoom-in', value: 'lg-zoom-in' },
|
||||
{ label: 'lg-zoom-in-big', value: 'lg-zoom-in-big' },
|
||||
{ label: 'lg-zoom-out', value: 'lg-zoom-out' },
|
||||
{ label: 'lg-zoom-out-big', value: 'lg-zoom-out-big' },
|
||||
{ label: 'lg-zoom-out-in', value: 'lg-zoom-out-in' },
|
||||
{ label: 'lg-zoom-in-out', value: 'lg-zoom-in-out' },
|
||||
{ label: 'lg-soft-zoom', value: 'lg-soft-zoom' },
|
||||
{ label: 'lg-scale-up', value: 'lg-scale-up' },
|
||||
{ label: 'lg-slide-circular', value: 'lg-slide-circular' },
|
||||
{ label: 'lg-slide-circular-vertical', value: 'lg-slide-circular-vertical' },
|
||||
{ label: 'lg-slide-vertical', value: 'lg-slide-vertical' },
|
||||
{ label: 'lg-slide-vertical-growth', value: 'lg-slide-vertical-growth' },
|
||||
{ label: 'lg-slide-skew-only', value: 'lg-slide-skew-only' },
|
||||
{ label: 'lg-slide-skew-only-rev', value: 'lg-slide-skew-only-rev' },
|
||||
{ label: 'lg-slide-skew-only-y', value: 'lg-slide-skew-only-y' },
|
||||
{ label: 'lg-slide-skew-only-y-rev', value: 'lg-slide-skew-only-y-rev' },
|
||||
{ label: 'lg-slide-skew', value: 'lg-slide-skew' },
|
||||
{ label: 'lg-slide-skew-rev', value: 'lg-slide-skew-rev' },
|
||||
{ label: 'lg-slide-skew-cross', value: 'lg-slide-skew-cross' },
|
||||
{ label: 'lg-slide-skew-cross-rev', value: 'lg-slide-skew-cross-rev' },
|
||||
{ label: 'lg-slide-skew-ver', value: 'lg-slide-skew-ver' },
|
||||
{ label: 'lg-slide-skew-ver-rev', value: 'lg-slide-skew-ver-rev' },
|
||||
{ label: 'lg-slide-skew-ver-cross', value: 'lg-slide-skew-ver-cross' },
|
||||
{ label: 'lg-slide-skew-ver-cross-rev', value: 'lg-slide-skew-ver-cross-rev' },
|
||||
{ label: 'lg-lollipop', value: 'lg-lollipop' },
|
||||
{ label: 'lg-lollipop-rev', value: 'lg-lollipop-rev' },
|
||||
{ label: 'lg-rotate', value: 'lg-rotate' },
|
||||
{ label: 'lg-rotate-rev', value: 'lg-rotate-rev' },
|
||||
{ label: 'lg-tube', value: 'lg-tube' }
|
||||
];
|
||||
|
||||
const galleryClasses = `lcp-gallery ${initialLayout}`;
|
||||
|
||||
|
||||
const lgPluginRequirements = [
|
||||
{ setting: 'zoom', plugin: 'lgZoom' },
|
||||
{ setting: 'thumbnail', plugin: 'lgThumbnail' },
|
||||
{ setting: 'rotate', plugin: 'lgRotate' },
|
||||
{ setting: 'autoplay', plugin: 'lgAutoplay' },
|
||||
{ setting: 'fullScreen', plugin: 'lgFullScreen' },
|
||||
{ setting: 'download', plugin: 'lgDownload' },
|
||||
// Add more settings and corresponding plugins as needed
|
||||
];
|
||||
|
||||
|
||||
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) => {
|
||||
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
|
||||
className="my-tab-panel"
|
||||
activeClass="active-tab"
|
||||
tabs={[
|
||||
{
|
||||
name: 'settings',
|
||||
title: __('Settings'),
|
||||
className: 'settings-tab'
|
||||
},
|
||||
{
|
||||
name: 'style',
|
||||
title: __('Style Settings'),
|
||||
className: 'style-tab'
|
||||
}
|
||||
]}
|
||||
>
|
||||
{({ name }) => {
|
||||
if (name === 'settings') {
|
||||
return (
|
||||
<>
|
||||
{/* Source Settings */}
|
||||
<PanelBody title={__('Source Settings')}>
|
||||
<SelectControl
|
||||
label={__('Gallery Items Source', metadata.textdomain)}
|
||||
value={source}
|
||||
onChange={(newValue) => setAttributes({ source: newValue })}
|
||||
options={sourceOptions}
|
||||
/>
|
||||
{source === 'manual' && <MultiMediaUpload onSelect={handleSelectMedia} />}
|
||||
{source === 'meta_field' && (
|
||||
<TextControl
|
||||
label={__('Meta Field Name')}
|
||||
value={sourceMetaField}
|
||||
onChange={(newValue) => setAttributes({ sourceMetaField: newValue })}
|
||||
/>
|
||||
)}
|
||||
{source === 'linked_table' && (
|
||||
<>
|
||||
<TextControl
|
||||
label={__('Table Name')}
|
||||
value={sourceTable}
|
||||
onChange={(newValue) => setAttributes({ sourceTable: newValue })}
|
||||
/>
|
||||
<TextControl
|
||||
label={__('Column Name')}
|
||||
value={sourceColumn}
|
||||
onChange={(newValue) => setAttributes({ sourceColumn: newValue })}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{/* Parse an element for gallery items */}
|
||||
<ToggleControl
|
||||
checked={attributes.parseElementForItems}
|
||||
label={__('Parse element for gallery items', metadata.textdomain)}
|
||||
onChange={(value) => {
|
||||
setAttributes({
|
||||
parseElementForItems: value, // Set as a boolean directly
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
{attributes.parseElementForItems && (
|
||||
<TextControl
|
||||
label={__('Elements to parse')}
|
||||
value={attributes.parsedTargetElement} // Corrected to use string directly
|
||||
onChange={(newValue) => setAttributes({ parsedTargetElement: newValue })}
|
||||
/>
|
||||
)}
|
||||
<ToggleControl
|
||||
onChange={(isChecked) => setAttributes({ includePostThumbnail: isChecked })}
|
||||
checked={includePostThumbnail}
|
||||
label={__('Include Post Thumbnail (Featured Image)', metadata.textdomain)}
|
||||
/>
|
||||
|
||||
</PanelBody>
|
||||
{/* Display Settings */}
|
||||
<PanelBody title={__('Display Settings')}>
|
||||
<SelectControl
|
||||
label={__('Initial Layout', metadata.textdomain)}
|
||||
value={initialLayout}
|
||||
onChange={(newValue) => {
|
||||
// Update the initialLayout attribute
|
||||
setAttributes({
|
||||
initialLayout: newValue,
|
||||
lgSettings: {
|
||||
...attributes.lgSettings, // Preserve existing lgSettings
|
||||
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) }, 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
|
||||
label={__('Button Text')}
|
||||
value={sourceColumn}
|
||||
onChange={(newValue) => setAttributes({ sourceColumn: newValue })}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<ToggleControl
|
||||
onChange={(isChecked) => {
|
||||
// Check if lgSettings exists, then update thumbnail value
|
||||
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
|
||||
label={__('Thumbnails Position - Desktop', metadata.textdomain)}
|
||||
value={itemsAspectRatio}
|
||||
onChange={(newValue) => setAttributes({ itemsAspectRatio: newValue })}
|
||||
options={[
|
||||
{ value: 'bottom', label: __('Bottom', metadata.textdomain) },
|
||||
{ value: 'right', label: __('Right', metadata.textdomain) },
|
||||
{ value: 'left', label: __('Left', metadata.textdomain) },
|
||||
{ value: 'hidden', label: __('Hidden', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
<SelectControl
|
||||
label={__('Thumbnails Position - Tablet', metadata.textdomain)}
|
||||
value={itemsAspectRatio}
|
||||
onChange={(newValue) => setAttributes({ itemsAspectRatio: newValue })}
|
||||
options={[
|
||||
{ value: 'bottom', label: __('Bottom', metadata.textdomain) },
|
||||
{ value: 'right', label: __('Right', metadata.textdomain) },
|
||||
{ value: 'left', label: __('Left', metadata.textdomain) },
|
||||
{ value: 'hidden', label: __('Hidden', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
<SelectControl
|
||||
label={__('Thumbnails Position - Mobile', metadata.textdomain)}
|
||||
value={itemsAspectRatio}
|
||||
onChange={(newValue) => setAttributes({ itemsAspectRatio: newValue })}
|
||||
options={[
|
||||
{ value: 'bottom', label: __('Bottom', metadata.textdomain) },
|
||||
{ value: 'right', label: __('Right', metadata.textdomain) },
|
||||
{ value: 'left', label: __('Left', metadata.textdomain) },
|
||||
{ value: 'hidden', label: __('Hidden', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{initialLayout !== 'inline' && initialLayout !== 'justified' && (
|
||||
<SelectControl
|
||||
label={__('Items Aspect Ratio', metadata.textdomain)}
|
||||
value={itemsAspectRatio}
|
||||
onChange={(newValue) => setAttributes({ itemsAspectRatio: newValue })}
|
||||
options={aspectRatioOptions}
|
||||
/>
|
||||
)}
|
||||
{initialLayout !== 'inline' && (
|
||||
<NumberControl
|
||||
label={__('Max Initial Images')}
|
||||
onChange={(newValue) => setAttributes({ maxInitialItems: newValue })}
|
||||
value={maxInitialItems}
|
||||
isShiftStepEnabled
|
||||
shiftStep={1}
|
||||
min={0}
|
||||
/>
|
||||
)}
|
||||
</PanelBody>
|
||||
{/* Gallery Settings */}
|
||||
<PanelBody title={__('Gallery Settings')}>
|
||||
{/* Dynamic Settings */}
|
||||
<ToggleControl
|
||||
label={__('Dynamic Load', 'lcp')}
|
||||
checked={lgSettings.dynamic}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
['dynamic']: value,
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Zoom Settings - Zoom requires lgZoom plugin */}
|
||||
<ToggleControl
|
||||
label={__('Enable Zoom', 'lcp')}
|
||||
checked={lgSettings.zoom}
|
||||
onChange={(value) => {
|
||||
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
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Fullscreen Settings - fullScreen requires lgFullscreen plugin */}
|
||||
<ToggleControl
|
||||
label={__('Enable Fullscreen', 'lcp')}
|
||||
checked={lgSettings.fullScreen}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
fullScreen: value, // Update the zoom setting
|
||||
plugins: value
|
||||
? [...lgSettings.plugins, 'lgFullScreen'] // Add lgFullScreen plugin if enabled
|
||||
: lgSettings.plugins.filter(plugin => plugin !== 'lgFullScreen'), // Remove lgFullScreen plugin if disabled
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Sharing Settings - Sharing requires lgShare plugin */}
|
||||
<ToggleControl
|
||||
label={__('Enable Sharing', 'lcp')}
|
||||
checked={lgSettings.share}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
share: value, // Update the zoom setting
|
||||
plugins: value
|
||||
? [...lgSettings.plugins, 'lgShare'] // Add lgShare plugin if enabled
|
||||
: lgSettings.plugins.filter(plugin => plugin !== 'lgShare'), // Remove lgShare plugin if disabled
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Autoplay Settings - Autoplay requires lgAutoplay plugin */}
|
||||
<ToggleControl
|
||||
label={__('Enable Autoplay', 'lcp')}
|
||||
checked={lgSettings.autoplay}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
autoplay: value, // Update the zoom setting
|
||||
plugins: value
|
||||
? [...lgSettings.plugins, 'lgAutoplay'] // Add lgAutoplay plugin if enabled
|
||||
: lgSettings.plugins.filter(plugin => plugin !== 'lgAutoplay'), // Remove lgAutoplay plugin if disabled
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* HASH SETTINGS - Hashrequires lghash plugin */}
|
||||
<ToggleControl
|
||||
label={__('Enable Hash', 'lcp')}
|
||||
checked={lgSettings.hash}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
hash: value, // Update the zoom setting
|
||||
plugins: value
|
||||
? [...lgSettings.plugins, 'lgHash'] // Add lgAutoplay plugin if enabled
|
||||
: lgSettings.plugins.filter(plugin => plugin !== 'lgHash'), // Remove lgAutoplay plugin if disabled
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Hash requires a unique id in lgSettings.galleryId */}
|
||||
{lgSettings.hash && (
|
||||
<TextControl
|
||||
label={__('Hash', 'lcp')}
|
||||
value={lgSettings.hashGalleryId} // Use an appropriate value for this input
|
||||
onChange={(newValue) => {
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
galleryId: newValue, // Update the hashValue based on the text input
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<ToggleControl
|
||||
label={__('Zoom From Origin', 'lcp')}
|
||||
checked={lgSettings.zoomFromOrigin}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
zoomFromOrigin: value, // Update the zoomFromOrigin setting
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/*Captions Settings */}
|
||||
<ToggleControl
|
||||
onChange={(isChecked) => setAttributes({ showCaptions: isChecked })}
|
||||
checked={showCaptions}
|
||||
label={__('Show Captions', metadata.textdomain)}
|
||||
/>
|
||||
|
||||
{/*Download Controls - If download is true, show options to set download size */}
|
||||
<ToggleControl
|
||||
checked={lgSettings.download}
|
||||
label={__('Allow Download', metadata.textdomain)}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
['download']: value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Options to set available download size */}
|
||||
{download && (
|
||||
<SelectControl
|
||||
label={__('Download Size', metadata.textdomain)}
|
||||
value={downloadSize}
|
||||
onChange={(newValue) => setAttributes({ downloadSize: newValue })}
|
||||
options={[
|
||||
{ value: 'full', label: __('Full', metadata.textdomain) },
|
||||
{ value: 'medium', label: __('Medium', metadata.textdomain) },
|
||||
{ value: 'large', label: __('Large', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
{/* Add the SelectControl for Transition */}
|
||||
<SelectControl
|
||||
label="Transition Style"
|
||||
value={lgSettings.mode || 'lg-slide'} // Default value is 'lg-slide'
|
||||
options={lgTransitionStyles}
|
||||
onChange={(value) => {
|
||||
// Update autoplay
|
||||
setAttributes({
|
||||
lgSettings: {
|
||||
...lgSettings,
|
||||
['mode']: value,
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* 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')}
|
||||
value={lgSettings.container}
|
||||
onChange={(newValue) => setAttributes({ lgSettings: {
|
||||
...lgSettings, // spread the current lgSettings object
|
||||
container: newValue // update only the container property
|
||||
} })}
|
||||
/>
|
||||
}
|
||||
</PanelBody>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'style') {
|
||||
return (
|
||||
<PanelBody title={__('Style Settings')}>
|
||||
{initialLayout === 'inline' && (
|
||||
<>
|
||||
<UnitControl
|
||||
label={__('Inline Height - Desktop')}
|
||||
onChange={(value) => setAttributes({ inlineHeightLarge: value })}
|
||||
value={inlineHeightLarge}
|
||||
/>
|
||||
<UnitControl
|
||||
label={__('Inline Height - Tablet')}
|
||||
onChange={(value) => setAttributes({ inlineHeightMedium: value })}
|
||||
value={inlineHeightMedium}
|
||||
/>
|
||||
<UnitControl
|
||||
label={__('Inline Height - Mobile')}
|
||||
onChange={(value) => setAttributes({ inlineHeightSmall: value })}
|
||||
value={inlineHeightSmall}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{initialLayout === 'justified' && (
|
||||
<>
|
||||
<SelectControl
|
||||
label={__('Last Row', metadata.textdomain)}
|
||||
value={justifiedLastRow}
|
||||
onChange={(newValue) => setAttributes({ justifiedLastRow: newValue })}
|
||||
options={[
|
||||
{ value: 'justify', label: __('Justify', metadata.textdomain) },
|
||||
{ value: 'nojustify', label: __('Unjustified', metadata.textdomain) },
|
||||
{ value: 'left', label: __('Align Left', metadata.textdomain) },
|
||||
{ value: 'center', label: __('Align Center', metadata.textdomain) },
|
||||
{ value: 'right', label: __('Align Right', metadata.textdomain) },
|
||||
{ value: 'hide', label: __('Hide', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
<UnitControl
|
||||
label={__('Row Height - Desktop')}
|
||||
onChange={(value) => setAttributes({ justifiedRowHeightLarge: value })}
|
||||
value={justifiedRowHeightLarge}
|
||||
/>
|
||||
<UnitControl
|
||||
label={__('Row Height - Tablet')}
|
||||
onChange={(value) => setAttributes({ justifiedRowHeightMedium: value })}
|
||||
value={justifiedRowHeightMedium}
|
||||
/>
|
||||
<UnitControl
|
||||
label={__('Row Height - Mobile')}
|
||||
onChange={(value) => setAttributes({ justifiedRowHeightSmall: value })}
|
||||
value={justifiedRowHeightSmall}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{initialLayout === 'grid' && (
|
||||
<>
|
||||
<NumberControl
|
||||
label={__('Grid Columns - Desktop')}
|
||||
onChange={(newValue) => setAttributes({ gridColumnsLarge: newValue })}
|
||||
value={gridColumnsLarge}
|
||||
isShiftStepEnabled
|
||||
shiftStep={1}
|
||||
min={1}
|
||||
max={9}
|
||||
/>
|
||||
<NumberControl
|
||||
label={__('Grid Columns - Tablet')}
|
||||
onChange={(newValue) => setAttributes({ gridColumnsMedium: newValue })}
|
||||
value={gridColumnsMedium}
|
||||
isShiftStepEnabled
|
||||
shiftStep={1}
|
||||
min={1}
|
||||
max={9}
|
||||
/>
|
||||
<NumberControl
|
||||
label={__('Grid Columns - Mobile')}
|
||||
onChange={(newValue) => setAttributes({ gridColumnsSmall: newValue })}
|
||||
value={gridColumnsSmall}
|
||||
isShiftStepEnabled
|
||||
shiftStep={1}
|
||||
min={1}
|
||||
max={9}
|
||||
/>
|
||||
<NumberControl
|
||||
label={__('Grid Gap')}
|
||||
onChange={(newValue) => setAttributes({ gridGapLarge: newValue })}
|
||||
value={gridGapLarge}
|
||||
isShiftStepEnabled
|
||||
shiftStep={1}
|
||||
min={0}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{thumbnail && (
|
||||
<>
|
||||
<BorderControl
|
||||
label={__('Thumbnail Borders')}
|
||||
value={borders}
|
||||
onChange={handleBorderChange}
|
||||
/>
|
||||
<BorderControl
|
||||
label={__('Thumbnail Borders - Selected')}
|
||||
value={thumbnailsBordersSelected}
|
||||
onChange={handleBorderSelectedChange}
|
||||
/>
|
||||
<SelectControl
|
||||
label={__('Thumbnail Style', metadata.textdomain)}
|
||||
value={thumbnailsStyle}
|
||||
onChange={(newValue) => setAttributes({ thumbnailsStyle: newValue })}
|
||||
options={[
|
||||
{ value: '', label: __('None', metadata.textdomain) },
|
||||
{ value: 'lg-thumbnail-blur', label: __('Blur', metadata.textdomain) },
|
||||
{ value: 'lg-thumbnail-grayscale', label: __('Monochrome', metadata.textdomain) }
|
||||
]}
|
||||
/>
|
||||
<SelectControl
|
||||
label={__('Thumbnail Style - Selected', metadata.textdomain)}
|
||||
value={thumbnailActiveStyle}
|
||||
onChange={(newValue) => setAttributes({ thumbnailActiveStyle: newValue })}
|
||||
options={[
|
||||
{ value: '', label: __('None', metadata.textdomain) },
|
||||
{ value: 'lg-thumbnail-active-grayscale', label: __('Monochrome', metadata.textdomain) },
|
||||
{ value: 'lg-thumbnail-active-blur', label: __('Blur', metadata.textdomain) }
|
||||
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</PanelBody>
|
||||
);
|
||||
}
|
||||
}}
|
||||
</TabPanel>
|
||||
</InspectorControls>
|
||||
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
171
includes/blocks/lcp-gallery/src/editor.scss
Normal file
171
includes/blocks/lcp-gallery/src/editor.scss
Normal file
@ -0,0 +1,171 @@
|
||||
/**
|
||||
* The following styles get applied inside the editor only.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-lcp-gallery {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.lcp-gallery.inline {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lcp-gallery.inline .gallery-item {
|
||||
display:none
|
||||
}
|
||||
|
||||
|
||||
.lcp-gallery .gallery-item,.lcp-gallery .gallery-item > img {
|
||||
width:100%
|
||||
}
|
||||
|
||||
.lcp-gallery .gallery-item.last:after {content:"";width:100%;height:100%;background:red;position:absolute;top:0;left:0;opacity:.5}
|
||||
|
||||
// Thumbnails
|
||||
.lg-thumbnail-grayscale .lg-thumb-item:not(.active) img {filter: grayscale(100%);}
|
||||
.lg-thumbnail-active-grayscale .lg-thumb-item.active img {filter: grayscale(100%);}
|
||||
.lg-thumbnail-blur .lg-thumb-item:not(.active) img {filter: blur(1px);}
|
||||
.lg-thumbnail-active-blur .lg-thumb-item.active img {filter: blur(1px);}
|
||||
|
||||
.lg-outer {background:none}
|
||||
// Gallery More Images
|
||||
.lcp-display-none {display:none}
|
||||
.gallery-item {position:relative}
|
||||
span.gallery-more {position: absolute;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
color: white;}
|
||||
|
||||
/* Aspect Ratio */
|
||||
.lcp-gallery.aspect-1-1 .gallery-item {aspect-ratio:1/1}
|
||||
.lcp-gallery.aspect-2-3 .gallery-item {aspect-ratio:2/3}
|
||||
.lcp-gallery.aspect-3-4 .gallery-item {aspect-ratio:3/4}
|
||||
.lcp-gallery.aspect-4-5 .gallery-item {aspect-ratio:4/5}
|
||||
.lcp-gallery.aspect-3-2 .gallery-item {aspect-ratio:3/2}
|
||||
.lcp-gallery.aspect-16-9 .gallery-item {aspect-ratio:16/9}
|
||||
|
||||
.gallery-item img {object-fit:cover}
|
||||
/* Container Styles */
|
||||
|
||||
/* Grid Styles */
|
||||
.lcp-gallery.grid {
|
||||
display:grid
|
||||
}
|
||||
.lcp-gallery.grid .gallery-item img{
|
||||
height:100%;
|
||||
object-fit:cover
|
||||
|
||||
}
|
||||
.lcp-gallery.grid {
|
||||
gap:1rem;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr
|
||||
}
|
||||
@media only screen and (min-width: 1167px) {
|
||||
.lcp-gallery.grid.large-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium screens (min-width: 768px and max-width: 1166px) */
|
||||
@media only screen and (min-width: 768px) and (max-width: 1166px) {
|
||||
.lcp-gallery.grid.medium-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small screens (max-width: 767px) */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.lcp-gallery.grid.small-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
39
includes/blocks/lcp-gallery/src/index.js
Normal file
39
includes/blocks/lcp-gallery/src/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Registers a new block provided a unique name and an object defining its behavior.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
/**
|
||||
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
|
||||
* All files containing `style` keyword are bundled together. The code used
|
||||
* gets applied both to the front of your site and to the editor.
|
||||
*
|
||||
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Edit from './edit';
|
||||
import save from './save';
|
||||
import metadata from './block.json';
|
||||
|
||||
/**
|
||||
* Every block starts by registering a new block type definition.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
registerBlockType( metadata.name, {
|
||||
/**
|
||||
* @see ./edit.js
|
||||
*/
|
||||
edit: Edit,
|
||||
|
||||
/**
|
||||
* @see ./save.js
|
||||
*/
|
||||
save,
|
||||
} );
|
||||
22
includes/blocks/lcp-gallery/src/save.js
Normal file
22
includes/blocks/lcp-gallery/src/save.js
Normal file
@ -0,0 +1,22 @@
|
||||
/**
|
||||
* React hook that is used to mark the block wrapper element.
|
||||
* It provides all the necessary props like the class name.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
|
||||
*/
|
||||
import { useBlockProps } from '@wordpress/block-editor';
|
||||
|
||||
/**
|
||||
* The save function defines the way in which the different attributes should
|
||||
* be combined into the final markup, which is then serialized by the block
|
||||
* editor into `post_content`.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
|
||||
*
|
||||
* @return {Element} Element to render.
|
||||
*/
|
||||
export default function save() {
|
||||
return (
|
||||
null
|
||||
);
|
||||
}
|
||||
188
includes/blocks/lcp-gallery/src/style.scss
Normal file
188
includes/blocks/lcp-gallery/src/style.scss
Normal file
@ -0,0 +1,188 @@
|
||||
/**
|
||||
* The following styles get applied both on the front of your site
|
||||
* and in the editor.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-create-block-gallery {
|
||||
background-color: #21759b;
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.lcp-inline-gallery {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lcp-inline-gallery .lcp-gallery-item .img-fluid {
|
||||
display:none
|
||||
}
|
||||
|
||||
|
||||
.lcp-gallery .gallery-item,.lcp-gallery .gallery-item > img {
|
||||
width:100%
|
||||
}
|
||||
|
||||
.lcp-gallery .gallery-item.last:after {content:"";width:100%;height:100%;background:red;position:absolute;top:0;left:0;opacity:.5}
|
||||
|
||||
// Thumbnails
|
||||
.lg-thumbnail-grayscale .lg-thumb-item:not(.active) img {filter: grayscale(100%);}
|
||||
.lg-thumbnail-active-grayscale .lg-thumb-item.active img {filter: grayscale(100%);}
|
||||
.lg-thumbnail-blur .lg-thumb-item:not(.active) img {filter: blur(1px);}
|
||||
.lg-thumbnail-active-blur .lg-thumb-item.active img {filter: blur(1px);}
|
||||
|
||||
.lg-outer {background:none}
|
||||
// Gallery More Images
|
||||
.lcp-display-none {display:none}
|
||||
.gallery-item {position:relative}
|
||||
span.gallery-more {position: absolute;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
color: white;}
|
||||
|
||||
/* Aspect Ratio */
|
||||
.lcp-gallery.aspect-1-1 .lcp-gallery-item {aspect-ratio:1/1}
|
||||
.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}
|
||||
|
||||
.gallery-item img {object-fit:cover}
|
||||
/* Container Styles */
|
||||
|
||||
/* Grid Styles */
|
||||
.lcp-gallery.grid {
|
||||
display:grid
|
||||
}
|
||||
.lcp-gallery.grid .gallery-item img{
|
||||
height:100%;
|
||||
object-fit:cover
|
||||
|
||||
}
|
||||
.lcp-gallery.grid {
|
||||
gap:1rem;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr
|
||||
}
|
||||
@media only screen and (min-width: 1167px) {
|
||||
.lcp-gallery.grid.large-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.large-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium screens (min-width: 768px and max-width: 1166px) */
|
||||
@media only screen and (min-width: 768px) and (max-width: 1166px) {
|
||||
.lcp-gallery.grid.medium-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.medium-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small screens (max-width: 767px) */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.lcp-gallery.grid.small-1-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-2-columns {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-3-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-4-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-5-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-6-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-7-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-8-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.lcp-gallery.grid.small-9-columns {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.lcp-gallery.grid > a > img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover
|
||||
}
|
||||
|
||||
.lcp-gallery.grid>a>img {
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
display: block; /* Add this */
|
||||
}
|
||||
79
includes/blocks/lcp-gallery/src/view.js
Normal file
79
includes/blocks/lcp-gallery/src/view.js
Normal file
@ -0,0 +1,79 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Check if LightGallery is loaded
|
||||
if (typeof lightGallery === 'function') {
|
||||
// Select all elements with the class '.lcp-gallery'
|
||||
const galleryContainers = document.querySelectorAll('.lcp-gallery');
|
||||
|
||||
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 {
|
||||
// Parse the JSON string to a JavaScript object
|
||||
const lgSettings = JSON.parse(lgSettingsAttr);
|
||||
|
||||
// Log the settings to debug
|
||||
console.log("LightGallery Settings:", lgSettings);
|
||||
|
||||
// Ensure that plugins are mapped to actual functions if available
|
||||
const availablePlugins = {
|
||||
lgZoom: lgZoom,
|
||||
lgThumbnail: lgThumbnail,
|
||||
lgFullScreen: lgFullscreen,
|
||||
lgRotate: lgRotate,
|
||||
lgAutoplay: lgAutoplay,
|
||||
lgShare: lgShare,
|
||||
lgComment: lgComment,
|
||||
lgHash: lgHash,
|
||||
lgPager: lgPager,
|
||||
lgVideo: lgVideo,
|
||||
lgMediumZoom: lgMediumZoom
|
||||
};
|
||||
|
||||
// Map the plugin names to actual plugin functions
|
||||
if (Array.isArray(lgSettings.plugins)) {
|
||||
lgSettings.plugins = lgSettings.plugins.map(pluginName => availablePlugins[pluginName] || pluginName);
|
||||
}
|
||||
|
||||
// Initialize LightGallery for the gallery container (only once)
|
||||
let galleryInstance = null;
|
||||
|
||||
// Initialize the gallery immediately if 'init-on-load' is set or it's an inline gallery
|
||||
if (!galleryContainer.classList.contains('lcp-inline-gallery') || initOnLoad || isInlineGallery) {
|
||||
galleryInstance = lightGallery(galleryContainer, lgSettings);
|
||||
|
||||
// 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
|
||||
const galleryItems = galleryContainer.querySelectorAll('.lcp-gallery-item');
|
||||
galleryItems.forEach((item, index) => {
|
||||
item.addEventListener('click', () => {
|
||||
// Check if galleryInstance is valid and open the gallery at the correct index
|
||||
if (galleryInstance && typeof galleryInstance.openGallery === 'function') {
|
||||
galleryInstance.openGallery(index); // Pass the index to open the correct image
|
||||
} else {
|
||||
console.error('LightGallery instance is not initialized correctly or missing openGallery method.');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error parsing data-lgsettings JSON:', error);
|
||||
}
|
||||
} else {
|
||||
console.error('data-lgsettings attribute is missing for a gallery.');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('LightGallery is not defined');
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user