Changes to theme.json and gallery

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

View File

@ -1,2 +0,0 @@
.admin-bar .lg-outer {top:32px;height:calc(100% - 32px)!important}

Binary file not shown.

View File

@ -156,9 +156,7 @@ function get_gallery_items_data($media_ids) {
$alt_text = get_post_meta($media_id, '_wp_attachment_image_alt', true);
// Use a fallback for alt text if it's empty
if (empty($alt_text)) {
$alt_text = 'No alt text available';
}
// Add the gallery item to the array
$gallery_items[] = array(
@ -444,7 +442,6 @@ add_action( 'init', 'lcp_gallery_block_init' );
/* Enqueue scripts and styles */
function enqueue_lightgallery_scripts() {
// Enqueue styles
wp_enqueue_style('lcp-gallery', get_template_directory_uri() . '/includes/blocks/lcp-gallery/assets/css/lcp-gallery.css');
wp_enqueue_style('lightgallery-css', get_template_directory_uri() . '/includes/blocks/lcp-gallery/assets/css/lightgallery-bundle.min.css');
wp_enqueue_style('lg-transitions-css', get_template_directory_uri() . '/includes/blocks/lcp-gallery/assets/css/lg-transitions.css');

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": ""
}
},

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>

View File

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

View File

@ -56,8 +56,8 @@
]
},
"layout": {
"contentSize": "645px",
"wideSize": "1340px"
"contentSize": "1140px",
"wideSize": "1440px"
},
"spacing": {
"defaultSpacingSizes": false,