frontblocks-gallery-option.js
8 months ago
frontblocks-gallery-option.jsx
1 month ago
frontblocks-gallery.css
9 months ago
frontblocks-gallery.js
8 months ago
masonry.min.js
8 months ago
frontblocks-gallery-option.js
91 lines
| 1 | "use strict"; |
| 2 | |
| 3 | // Add custom controls to the Gallery block |
| 4 | var addFilter = wp.hooks.addFilter; |
| 5 | var _wp$element = wp.element, |
| 6 | Fragment = _wp$element.Fragment, |
| 7 | useEffect = _wp$element.useEffect; |
| 8 | var InspectorControls = wp.blockEditor.InspectorControls; |
| 9 | var _wp$components = wp.components, |
| 10 | SelectControl = _wp$components.SelectControl, |
| 11 | PanelBody = _wp$components.PanelBody, |
| 12 | ToggleControl = _wp$components.ToggleControl, |
| 13 | RangeControl = _wp$components.RangeControl; |
| 14 | var __ = wp.i18n.__; |
| 15 | var createHigherOrderComponent = wp.compose.createHigherOrderComponent; |
| 16 | function addCustomGalleryPanel(BlockEdit) { |
| 17 | return function (props) { |
| 18 | if (props.name !== 'core/gallery') { |
| 19 | return /*#__PURE__*/React.createElement(BlockEdit, props); |
| 20 | } |
| 21 | var _props$attributes = props.attributes, |
| 22 | _props$attributes$frb = _props$attributes.frblGalleryLayout, |
| 23 | frblGalleryLayout = _props$attributes$frb === void 0 ? 'grid' : _props$attributes$frb, |
| 24 | _props$attributes$frb2 = _props$attributes.frblGutterSize, |
| 25 | frblGutterSize = _props$attributes$frb2 === void 0 ? 20 : _props$attributes$frb2, |
| 26 | _props$attributes$frb3 = _props$attributes.frblEnableLightbox, |
| 27 | frblEnableLightbox = _props$attributes$frb3 === void 0 ? false : _props$attributes$frb3; |
| 28 | |
| 29 | // Apply dynamic styles in the editor. |
| 30 | useEffect(function () { |
| 31 | var blockElement = document.querySelector("[data-block=\"".concat(props.clientId, "\"] .wp-block-gallery")); |
| 32 | if (blockElement) { |
| 33 | // Remove previous layout classes. |
| 34 | blockElement.classList.remove('frontblocks-gallery-grid', 'frontblocks-gallery-masonry'); |
| 35 | |
| 36 | // Add current layout class. |
| 37 | if (frblGalleryLayout === 'masonry') { |
| 38 | blockElement.classList.add('frontblocks-gallery-masonry'); |
| 39 | } else { |
| 40 | blockElement.classList.add('frontblocks-gallery-grid'); |
| 41 | } |
| 42 | |
| 43 | // Set gutter size as CSS variable. |
| 44 | blockElement.style.setProperty('--frontblocks-gutter', frblGutterSize + 'px'); |
| 45 | } |
| 46 | }, [frblGalleryLayout, frblGutterSize, props.clientId]); |
| 47 | return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BlockEdit, props), /*#__PURE__*/React.createElement(InspectorControls, null, /*#__PURE__*/React.createElement(PanelBody, { |
| 48 | title: __('FrontBlocks Gallery Settings', 'frontblocks'), |
| 49 | initialOpen: true |
| 50 | }, /*#__PURE__*/React.createElement(SelectControl, { |
| 51 | label: __('Gallery Layout', 'frontblocks'), |
| 52 | value: frblGalleryLayout, |
| 53 | options: [{ |
| 54 | label: __('Grid', 'frontblocks'), |
| 55 | value: 'grid' |
| 56 | }, { |
| 57 | label: __('Masonry', 'frontblocks'), |
| 58 | value: 'masonry' |
| 59 | }], |
| 60 | onChange: function onChange(value) { |
| 61 | props.setAttributes({ |
| 62 | frblGalleryLayout: value |
| 63 | }); |
| 64 | }, |
| 65 | help: __('Choose between grid or masonry layout for your gallery.', 'frontblocks') |
| 66 | }), /*#__PURE__*/React.createElement(RangeControl, { |
| 67 | label: __('Gutter Size (px)', 'frontblocks'), |
| 68 | value: frblGutterSize, |
| 69 | onChange: function onChange(value) { |
| 70 | props.setAttributes({ |
| 71 | frblGutterSize: value |
| 72 | }); |
| 73 | }, |
| 74 | min: 0, |
| 75 | max: 50, |
| 76 | step: 5, |
| 77 | help: __('Set the spacing between gallery items.', 'frontblocks') |
| 78 | }), /*#__PURE__*/React.createElement(ToggleControl, { |
| 79 | label: __('Enable Lightbox', 'frontblocks'), |
| 80 | checked: frblEnableLightbox, |
| 81 | onChange: function onChange(value) { |
| 82 | props.setAttributes({ |
| 83 | frblEnableLightbox: value |
| 84 | }); |
| 85 | }, |
| 86 | help: __('Enable lightbox functionality for gallery images.', 'frontblocks') |
| 87 | })))); |
| 88 | }; |
| 89 | } |
| 90 | addFilter('editor.BlockEdit', 'frontblocks/gallery-panel', addCustomGalleryPanel); |
| 91 |