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

Changes to theme.json and gallery

Browse Source
This commit is contained in:
Jeremy Rangel
2024-12-19 01:23:40 -08:00
parent 94d2c7c8a2
commit cfbb860bf9
7 changed files with 58 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
includes/blocks/lcp-gallery/src/block.json
View File

@ -43,6 +43,21 @@
"fullScreen": false,
"autoplay": false,
"download": false,
"loop": true,
"closeOnTap": true,
"enableDrag": true,
"enableSwipe": true,
"escKey": true,
"getCaptionFromTitleOrAlt ": true,
"hideBarsDelay": 0,
"hideControlOnEnd": false,
"hideScrollbar ": false,
"controls": true,
"counter": true,
"container": "",
"closable": true,
"zoomFromOrigin": false,
@ -326,6 +341,10 @@
"numberOfSlideItemsInDom": {
"type": "number",
"default": 10
},
"galleryCustomStyles": {
"type": "string",
"default": ""
}
},

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

@ -11,7 +11,9 @@ import {
__experimentalNumberControl as NumberControl,
__experimentalUnitControl as UnitControl,
TabPanel,
__experimentalBorderControl as BorderControl
__experimentalBorderControl as BorderControl,
TextareaControl,
Popover
} from '@wordpress/components';
import metadata from './block.json';
import './editor.scss';
@ -33,6 +35,7 @@ const aspectRatioOptions = [
{ 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;
@ -116,7 +119,7 @@ export default function Edit(props) {
thumbnailActiveStyle,
showCaptions,
zoomFromOrigin,
galleryCustomStyles,
lgSettings
} = attributes;
@ -358,41 +361,26 @@ const { isTemplate, postType, postId } = useSelect((select) => {
</PanelBody>
{/* Display Settings */}
<PanelBody title={__('Display Settings')}>
<SelectControl
<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
}
setAttributes({
initialLayout: newValue,
lgSettings: {
...attributes.lgSettings, // Preserve existing lgSettings
closable: newValue !== 'inline', // Set closable based on the layout choice
showMaximizeIcon: newValue === 'inline', // Show maximize icon only if 'inline' is selected
}
});
}}
}}
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 })}
@ -469,7 +457,7 @@ const { isTemplate, postType, postId } = useSelect((select) => {
{initialLayout !== 'inline' && (
<NumberControl
label={__('Max Initial Images')}
onChange={(newValue) => setAttributes({ maxInitialItems: newValue })}
onChange={(newValue) => setAttributes({ maxInitialItems: 1})}
value={maxInitialItems}
isShiftStepEnabled
shiftStep={1}
@ -479,6 +467,20 @@ const { isTemplate, postType, postId } = useSelect((select) => {
</PanelBody>
{/* Gallery Settings */}
<PanelBody title={__('Gallery Settings')}>
{/* 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
}
})}
/>
)}
{/* Dynamic Settings */}
<ToggleControl
label={__('Dynamic Load', 'lcp')}
@ -801,10 +803,15 @@ const { isTemplate, postType, postId } = useSelect((select) => {
/>
</>
)}
</PanelBody>
);
}
}}
</TabPanel>
</InspectorControls>

2
includes/blocks/lcp-gallery/src/style.scss
View File

@ -13,6 +13,8 @@
.admin-bar .lg-container:not(.lg-inline) .lg-outer {top:32px;height:calc(100% - 32px)!important}