frontblocks-advanced-option.jsx
11 months ago
frontblocks-carousel.css
11 months ago
frontblocks-carousel.js
11 months ago
frontblocks-carousel.php
10 months ago
frontblocks-advanced-option.jsx
124 lines
| 1 | // Add custom controls to the Advanced panel of GenerateBlocks Grid block |
| 2 | const { addFilter } = wp.hooks; |
| 3 | const { Fragment } = wp.element; |
| 4 | const { InspectorControls, PanelColorSettings } = wp.blockEditor; |
| 5 | const { SelectControl, TextControl, PanelBody, ToggleControl } = wp.components; |
| 6 | const { __ } = wp.i18n; |
| 7 | |
| 8 | function addCustomCarouselPanel(BlockEdit) { |
| 9 | return (props) => { |
| 10 | if (props.name !== 'generateblocks/grid') { |
| 11 | return <BlockEdit {...props} />; |
| 12 | } |
| 13 | |
| 14 | const { |
| 15 | frblGridOption = 'none', |
| 16 | frblItemsToView = '4', |
| 17 | frblResponsiveToView = '1', |
| 18 | frblAutoplay = '', |
| 19 | frblButtons = 'arrows', |
| 20 | frblRewind = true, |
| 21 | frblButtonColor, |
| 22 | frblButtonBgColor, |
| 23 | frblButtonsPosition = 'side', |
| 24 | } = props.attributes; |
| 25 | |
| 26 | return ( |
| 27 | <Fragment> |
| 28 | <BlockEdit {...props} /> |
| 29 | <InspectorControls> |
| 30 | <PanelBody |
| 31 | title={__('Carousel Settings', 'frontblocks')} |
| 32 | initialOpen={true} |
| 33 | > |
| 34 | <SelectControl |
| 35 | label={__('FrontBlocks Grid Option', 'frontblocks')} |
| 36 | value={frblGridOption} |
| 37 | options={[ |
| 38 | { label: __('None', 'frontblocks'), value: 'none' }, |
| 39 | { label: __('Carousel', 'frontblocks'), value: 'carousel' }, |
| 40 | { label: __('Slider', 'frontblocks'), value: 'slider' } |
| 41 | ]} |
| 42 | onChange={(value) => { |
| 43 | props.setAttributes({ frblGridOption: value }); |
| 44 | }} |
| 45 | help={__('This option gives the option to make carousel in your grid block.', 'frontblocks')} |
| 46 | /> |
| 47 | {frblGridOption !== 'none' && ( |
| 48 | <> |
| 49 | <TextControl |
| 50 | label={__('Items to view', 'frontblocks')} |
| 51 | value={frblItemsToView} |
| 52 | onChange={(value) => props.setAttributes({ frblItemsToView: value })} |
| 53 | /> |
| 54 | <TextControl |
| 55 | label={__('Responsive to view', 'frontblocks')} |
| 56 | value={frblResponsiveToView} |
| 57 | onChange={(value) => props.setAttributes({ frblResponsiveToView: value })} |
| 58 | /> |
| 59 | <TextControl |
| 60 | label={__('Autoplay (seconds)', 'frontblocks')} |
| 61 | value={frblAutoplay} |
| 62 | onChange={(value) => props.setAttributes({ frblAutoplay: value })} |
| 63 | /> |
| 64 | {frblGridOption === 'slider' && ( |
| 65 | <> |
| 66 | <ToggleControl |
| 67 | label={__('Rewind', 'frontblocks')} |
| 68 | checked={frblRewind} |
| 69 | onChange={(value) => props.setAttributes({ frblRewind: value })} |
| 70 | /> |
| 71 | </> |
| 72 | )} |
| 73 | <SelectControl |
| 74 | label={__('Buttons', 'frontblocks')} |
| 75 | value={frblButtons} |
| 76 | options={[ |
| 77 | { label: __('None', 'frontblocks'), value: 'none' }, |
| 78 | { label: __('Bullets', 'frontblocks'), value: 'bullets' }, |
| 79 | { label: __('Arrows', 'frontblocks'), value: 'arrows' } |
| 80 | ]} |
| 81 | onChange={(value) => props.setAttributes({ frblButtons: value })} |
| 82 | /> |
| 83 | {frblButtons === 'arrows' && ( |
| 84 | <> |
| 85 | <SelectControl |
| 86 | label={__('Buttons Position', 'frontblocks')} |
| 87 | value={frblButtonsPosition} |
| 88 | options={[ |
| 89 | { label: __('Side', 'frontblocks'), value: 'side' }, |
| 90 | { label: __('Bottom', 'frontblocks'), value: 'bottom' }, |
| 91 | ]} |
| 92 | onChange={(value) => props.setAttributes({ frblButtonsPosition: value })} |
| 93 | /> |
| 94 | </> |
| 95 | )} |
| 96 | <PanelColorSettings |
| 97 | title={__('Button Colors', 'frontblocks')} |
| 98 | colorSettings={[ |
| 99 | { |
| 100 | value: frblButtonColor, |
| 101 | onChange: (color) => props.setAttributes({ frblButtonColor: color }), |
| 102 | label: __('Color button', 'frontblocks'), |
| 103 | }, |
| 104 | { |
| 105 | value: frblButtonBgColor, |
| 106 | onChange: (color) => props.setAttributes({ frblButtonBgColor: color }), |
| 107 | label: __('Color background button', 'frontblocks'), |
| 108 | }, |
| 109 | ]} |
| 110 | /> |
| 111 | </> |
| 112 | )} |
| 113 | </PanelBody> |
| 114 | </InspectorControls> |
| 115 | </Fragment> |
| 116 | ); |
| 117 | }; |
| 118 | } |
| 119 | |
| 120 | addFilter( |
| 121 | 'editor.BlockEdit', |
| 122 | 'frontblocks/gb-grid-carousel-panel', |
| 123 | addCustomCarouselPanel |
| 124 | ); |