Changes to gallery block and custom code inserter
This commit is contained in:
Jeremy Rangel
File diff suppressed because one or more lines are too long
@ -335,8 +335,16 @@ function build_gallery_settings_json($attributes, $unique_class) {
|
||||
|
||||
|
||||
// Build the gallery styles based on $attributes and a unique class for rendering multiple galleries on the same page
|
||||
function build_gallery_styles($attributes,$unique_class) {
|
||||
function build_gallery_styles($attributes, $unique_class) {
|
||||
// Extract background color and item spacing from attributes
|
||||
$thumbs_background_color = isset($attributes['thumbsBackgroundColor']) ? esc_attr($attributes['thumbs_background_color']) : '#000000'; // Default to black if not set
|
||||
$backdrop_background_color = isset($attributes['backdropBackgroundColor']) ? esc_attr($attributes['backdropBackgroundColor']) : '#000000'; // Default to black if not set
|
||||
$item_spacing = isset($attributes['item_spacing']) ? esc_attr($attributes['item_spacing']) : '10px'; // Default spacing if not set
|
||||
|
||||
// Start generating styles
|
||||
$styles = "<style>";
|
||||
|
||||
// Gallery container styles
|
||||
$styles .= "
|
||||
.$unique_class {
|
||||
background-color: $background_color;
|
||||
@ -344,16 +352,27 @@ function build_gallery_styles($attributes,$unique_class) {
|
||||
flex-wrap: wrap;
|
||||
gap: $item_spacing;
|
||||
justify-content: center;
|
||||
background:red;
|
||||
}
|
||||
";
|
||||
}";
|
||||
|
||||
// LightGallery thumbnail styles
|
||||
$styles .= "
|
||||
.$unique_class .lg-thumb-outer {
|
||||
background-color: $thumbs_background_color
|
||||
}";
|
||||
|
||||
$styles .= "
|
||||
.$unique_class .lg-backdrop {
|
||||
background-color: $backdrop_background_color
|
||||
}";
|
||||
|
||||
// Close the style tag
|
||||
$styles .= "</style>";
|
||||
|
||||
// Return the generated styles
|
||||
return $styles;
|
||||
}
|
||||
|
||||
|
||||
// Render the block
|
||||
function render_lcp_gallery_block($attributes) {
|
||||
// Generate a unique class for each gallery
|
||||
@ -427,7 +446,7 @@ function enqueue_lightgallery_scripts() {
|
||||
// Enqueue styles
|
||||
wp_enqueue_style('lcp-gallery', get_template_directory_uri() . '/blocks/lcp-gallery/assets/css/lcp-gallery.css');
|
||||
wp_enqueue_style('lightgallery-css', get_template_directory_uri() . '/blocks/lcp-gallery/assets/css/lightgallery-bundle.min.css');
|
||||
wp_enqueue_style('lg-transitions-css', get_template_directory_uri() . '/blocks/gallery/assets/css/lg-transitions.css');
|
||||
wp_enqueue_style('lg-transitions-css', get_template_directory_uri() . '/blocks/lcp-gallery/assets/css/lg-transitions.css');
|
||||
|
||||
// Enqueue scripts
|
||||
wp_enqueue_script('lightgallery-js', get_template_directory_uri() . '/blocks/lcp-gallery/assets/js/lightgallery.min.js', array(), null, true);
|
||||
|
||||
@ -12,80 +12,7 @@
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"lgSettingsOld" :{
|
||||
"type": "object",
|
||||
"default": {
|
||||
"mode": "fade",
|
||||
"cssEasing": "ease",
|
||||
"loop": true,
|
||||
"keyPress": true,
|
||||
"controls": true,
|
||||
"thumbs": false,
|
||||
"zoom": true,
|
||||
"slideEndAnimatoin": true,
|
||||
"fullScreen": true,
|
||||
"autoplay": false,
|
||||
"slideShowAutoplay": false,
|
||||
"autoplayControls": true,
|
||||
"pauseOnHover": false,
|
||||
"progressBar": false,
|
||||
"exThumbImage": "data-exthumbimage",
|
||||
"showThumbByDefault": false,
|
||||
"currentPagerPosition": "middle",
|
||||
"addClass": "",
|
||||
"isMobile": false,
|
||||
"mobileSettings": {
|
||||
"controls": false,
|
||||
"showCloseIcon": true,
|
||||
"enableTouch": true,
|
||||
"enableDrag": true
|
||||
},
|
||||
"imageAutoPlay": true,
|
||||
"slideShowInterval": 5000,
|
||||
"counter": true,
|
||||
"closeOnEscape": true,
|
||||
"showCloseIcon": true,
|
||||
"swipeThreshold": 50,
|
||||
"draggable": true,
|
||||
"slideSpeed": 400,
|
||||
"hideBarsDelay": 3000,
|
||||
"dynamic": true,
|
||||
"dynamicEl": [],
|
||||
"captionDelay": 0,
|
||||
"videoMaxWidth": "100%",
|
||||
"videoAutoplay": true,
|
||||
"videoJS": false,
|
||||
"audio": false,
|
||||
"audioJS": false,
|
||||
"lightboxWidth": "auto",
|
||||
"lightboxHeight": "auto",
|
||||
"videojs": {
|
||||
"autoplay": true,
|
||||
"controls": true
|
||||
},
|
||||
"gestureSettings": {
|
||||
"zoom": true,
|
||||
"drag": true
|
||||
},
|
||||
"ariaLabelledby": "lightgallery-caption",
|
||||
"ariaDescribedby": "lightgallery-description",
|
||||
"thumbnailSelector": ".lg-thumbnail",
|
||||
"galleryClass": "lg-gallery",
|
||||
"selectableThumbs": false,
|
||||
"slideTransition": "ease-in-out",
|
||||
"share": false,
|
||||
"hash": false,
|
||||
"download": false,
|
||||
"allowMediaOverlap": false,
|
||||
"responsive": true,
|
||||
"fullscreenBtn": true,
|
||||
"prevHtml": "",
|
||||
"nextHtml": "",
|
||||
"closeHtml": "",
|
||||
"playHtml": "<i class='lg-icon lg-icon-play'></i>",
|
||||
"pauseHtml": "<i class='lg-icon lg-icon-pause'></i>"
|
||||
}
|
||||
},
|
||||
|
||||
"parseElementForItems": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
@ -119,6 +46,7 @@
|
||||
"container": "",
|
||||
"closable": true,
|
||||
"zoomFromOrigin": false,
|
||||
"showMaximizeIcon": false,
|
||||
"plugins": []
|
||||
}
|
||||
},
|
||||
@ -263,6 +191,12 @@
|
||||
"thumbnailBordersSelected": {
|
||||
"type": "object"
|
||||
},
|
||||
"thumbsBackgroundColor": {
|
||||
"type": "string"
|
||||
},
|
||||
"backdropBackgroundColor": {
|
||||
"type": "string"
|
||||
},
|
||||
"showCaptions": {
|
||||
"type": "boolean"
|
||||
},
|
||||
@ -347,10 +281,6 @@
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"thumbnail": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"appendThumbnailsTo": {
|
||||
"type": "string",
|
||||
"default": ".lg-components"
|
||||
|
||||
@ -241,21 +241,20 @@ export default function Edit(props) {
|
||||
|
||||
|
||||
|
||||
// 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
|
||||
|
||||
// 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) {
|
||||
@ -368,16 +367,37 @@ export default function Edit(props) {
|
||||
initialLayout: newValue,
|
||||
lgSettings: {
|
||||
...attributes.lgSettings, // Preserve existing lgSettings
|
||||
closable: false // Set closable to false
|
||||
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) },
|
||||
// { 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
|
||||
|
||||
Reference in New Issue
Block a user