index.js (9772B)
1 /** 2 * External dependencies 3 */ 4 import React, {Component} from 'react'; 5 6 import SVGRedux from '../../assets/img/icon.svg' 7 import SVGAcfBlocks from './images/acf-blocks.svg' 8 import SVGAtomicBlocks from './images/atomic-blocks.svg' 9 import SVGAdvancedCustomFields from './images/advanced-custom-fields.svg' 10 import SVGAdvancedGutenbergBlocks from './images/advanced-gutenberg-blocks.svg' 11 import SVGBlockOptions from './images/block-options.svg' 12 import SVGBlockSlider from './images/block-slider.svg' 13 import SVGCoblocks from './images/coblocks.svg' 14 import SVGCreativeBlocks from './images/creative-blocks.svg' 15 import SVGEditorPlus from './images/editorplus.svg' 16 import SVGElegantBlocks from './images/elegant-blocks.svg' 17 import SVGEnhancedBlocks from './images/enhanced-blocks.svg' 18 import SVGEssentialBlocks from './images/essential-blocks.svg' 19 import SVGFormsGutenberg from './images/forms-gutenberg.svg' 20 import SVGGetwid from './images/getwid.svg' 21 import SVGGhostkit from './images/ghostkit.svg' 22 import SVGGuteblock from './images/guteblock.svg' 23 // import SVGGutenbergBlock from './images/gutenberg-blocks.png' 24 import SVGGutentor from './images/gutentor.svg' 25 import SVGKadenceBlocks from './images/kadence-blocks.svg' 26 import SVGKiokenBlocks from './images/kioken-blocks.svg' 27 import SVGOtterBlocks from './images/otter-blocks.svg' 28 import SVGQodeblock from './images/qodeblock.svg' 29 import SVGQubely from './images/qubely.svg' 30 import SVGSnowMonkeyBlocks from './images/snow-monkey-blocks.svg' 31 import SVGStackableUltimateGutenbergBlocks from './images/stackable-ultimate-gutenberg-blocks.svg' 32 import SVGUltimateAddonsForGutenberg from './images/ultimate-addons-for-gutenberg.svg' 33 import SVGUltimateBlocks from './images/ultimate-blocks.svg' 34 import SVGUltimatePost from './images/ultimate-post.svg' 35 import SVGWordPress from './images/wordpress.svg' 36 37 // export const gutentor = () => { 38 // return <SVGGutentorIcon width="20" height="20"/> 39 // } 40 41 42 export const redux = () => { return <SVGRedux width="20" height="20"/> } 43 export const acfblocks = () => { return <SVGAcfBlocks width="20" height="20"/> } 44 export const atomicblocks = () => { return <SVGAtomicBlocks width="20" height="20"/> } 45 export const advancedcustomfields = () => { return <SVGAdvancedCustomFields width="20" height="20"/> } 46 export const advancedgutenbergblocks = () => { return <SVGAdvancedGutenbergBlocks width="20" height="20"/> } 47 export const blockoptions = () => { return <SVGBlockOptions width="20" height="20"/> } 48 export const blockslider = () => { return <SVGBlockSlider width="20" height="20"/> } 49 export const coblocks = () => { return <SVGCoblocks width="20" height="20"/> } 50 export const creativeblocks = () => { return <SVGCreativeBlocks width="20" height="20"/> } 51 export const editorplus = () => { return <SVGEditorPlus width="20" height="20"/> } 52 export const elegantblocks = () => { return <SVGElegantBlocks width="20" height="20"/> } 53 export const enhancedblocks = () => { return <SVGEnhancedBlocks width="20" height="20"/> } 54 export const essentialblocks = () => { return <SVGEssentialBlocks width="20" height="20"/> } 55 export const formsgutenberg = () => { return <SVGFormsGutenberg width="20" height="20"/> } 56 export const getwid = () => { return <SVGGetwid width="20" height="20"/> } 57 export const ghostkit = () => { return <SVGGhostkit width="20" height="20"/> } 58 export const guteblock = () => { return <SVGGuteblock width="20" height="20"/> } 59 export const gutenbergblock = () => { return <SVGGutenbergBlock width="20" height="20"/> } 60 export const gutentor = () => { return <SVGGutentor width="20" height="20"/> } 61 export const kadenceblocks = () => { return <SVGKadenceBlocks width="20" height="20"/> } 62 export const kiokenblocks = () => { return <SVGKiokenBlocks width="20" height="20"/> } 63 export const otterblocks = () => { return <SVGOtterBlocks width="20" height="20"/> } 64 export const qodeblock = () => { return <SVGQodeblock width="20" height="20"/> } 65 export const qubely = () => { return <SVGQubely width="20" height="20"/> } 66 export const snowmonkeyblocks = () => { return <SVGSnowMonkeyBlocks width="20" height="20"/> } 67 export const stackableultimategutenbergblocks = () => { return <SVGStackableUltimateGutenbergBlocks width="20" height="20"/> } 68 export const ultimateaddonsforgutenberg = () => { return <SVGUltimateAddonsForGutenberg width="20" height="20"/> } 69 export const ultimateblocks = () => { return <SVGUltimateBlocks width="20" height="20"/> } 70 export const ultimatepost = () => { return <SVGUltimatePost width="20" height="20"/> } 71 export const wordpress = () => { return <SVGWordPress width="20" height="20"/> } 72 73 import SVGReduxTemplatesIcon from '../../assets/img/icon.svg' 74 import SVGReduxTemplatesColorIcon from '../../assets/img/icon-color.svg' 75 // 76 // 77 // export const reqSvgs = require.context ( './images/third-party', true, /\.svg$/ ) 78 // 79 // export const reqSvgsKeys = reqSvgs.keys() 80 // 81 // const iconLoader = (path) => import(path); 82 // 83 // export const icons = { 84 // 'redux': iconLoader('../../assets/img/icon.svg'), 85 // 'forms-gutenberg': iconLoader('./images/forms-gutenberg.svg') 86 // } 87 // 88 // export const svgs = reqSvgs 89 // .keys () 90 // .reduce ( ( images, path ) => { 91 // images[path.replace('./', '').replace('.svg', '')] = reqSvgs ( path ) 92 // return images 93 // }, {} ) 94 // 95 // function importAll(r) { 96 // let images = {}; 97 // r.keys().map((item, index) => { images[item.replace('./', '').replace('.svg', '')] = r(item); }); 98 // return images; 99 // } 100 // export const images = importAll(require.context( './images/third-party', false, /\.(svg)$/)); 101 102 103 104 /** 105 * WordPress dependencies 106 */ 107 import {cloneElement, render} from '@wordpress/element' 108 import domReady from '@wordpress/dom-ready' 109 import {updateCategory} from '@wordpress/blocks' 110 111 export const colorizeIcon = SvgIcon => { 112 return cloneElement(SvgIcon, { 113 fill: 'url(#redux-gradient)', 114 className: 'redux-icon-gradient', 115 }) 116 } 117 118 export const thirdPartyIcon = (icon) => { 119 if (icon) { 120 return <icon width="20" height="20"/> 121 } 122 } 123 124 // Add an icon to our block category. 125 if (typeof window.wp.blocks !== 'undefined' && typeof window.wp.blocks.updateCategory !== 'undefined') { 126 updateCategory(redux_templates.i18n, { 127 icon: colorizeIcon(<SVGReduxTemplatesIcon className="components-panel__icon" width="20" height="20"/>), 128 }) 129 } 130 131 // Add our SVG gradient placeholder definition that we'll reuse. 132 domReady(() => { 133 const redux_templatesGradient = document.createElement('DIV') 134 document.querySelector('body').appendChild(redux_templatesGradient) 135 render( 136 <svg 137 xmlns="http://www.w3.org/2000/svg" 138 className="redux-gradient" 139 height="0" 140 width="0" 141 style={{opacity: 0}} 142 > 143 <defs> 144 <linearGradient id="redux-gradient"> 145 <stop offset="0%" stopColor="#8c33da" stopOpacity="1"/> 146 <stop offset="100%" stopColor="#f34957" stopOpacity="1"/> 147 </linearGradient> 148 </defs> 149 </svg>, 150 redux_templatesGradient 151 ) 152 }) 153 154 export const ReduxTemplatesIcon = () => { 155 return <SVGReduxTemplatesIcon width="20" height="20"/> 156 } 157 158 export const ReduxTemplatesIconColor = () => { 159 return <SVGReduxTemplatesColorIcon width="20" height="20"/> 160 } 161 162 export const ReduxTemplatesIconColorize = () => { 163 return colorizeIcon(<SVGReduxTemplatesIcon width="20" height="20"/>) 164 } 165 export const core = () => { 166 return <SVGWordPress width="20" height="20"/> 167 } 168 // 169 // export const AdvancedGutenbergBlocks = () => { 170 // return <SVGAdvancedGutenbergBlocksIcon width="20" height="20"/> 171 // } 172 // export const advancedgutenbergblocks = () => <AdvancedGutenbergBlocks/> 173 // 174 // export const AdvancedGutenberg = () => { 175 // return <SVGAdvancedGutenbergIcon width="20" height="20"/> 176 // } 177 // export const advancedgutenbergIcon = () => <AdvancedGutenberg/> 178 // 179 // export const AtomicBlocks = () => { 180 // return <SVGAtomicBlocksIcon width="20" height="20"/> 181 // } 182 // export const atomicblocks = () => <AtomicBlocks/> 183 // 184 // export const CoBlocks = () => { 185 // return <SVGCoBlocksIcon width="20" height="20"/> 186 // } 187 // export const Coblocks = () => <CoBlocks/> 188 // export const coblocks = () => <CoBlocks/> 189 // 190 // export const Stackable = () => { 191 // return <SVGStackableIcon width="20" height="20"/> 192 // } 193 // export const stackable = () => <Stackable/> 194 // export const stackableultimategutenbergblocks = () => <Stackable/> 195 // 196 // export const Qubely = () => { 197 // return <SVGQubelyIcon width="20" height="20"/> 198 // } 199 // export const qubely = () => <Qubely/> 200 // 201 // export const Kioken = () => { 202 // return <SVGKiokenIcon width="20" height="20"/> 203 // } 204 // export const kioken = () => <Kioken/> 205 // export const kiokenblocks = () => <Kioken/> 206 // 207 // export const kadenceblocks = () => { 208 // return <SVGKadenceIcon width="20" height="20"/> 209 // } 210 // 211 // export const CreativeBlocks = () => { 212 // return <SVGCreativeBlocksIcon width="20" height="20"/> 213 // } 214 // export const creativeblocks = () => <CreativeBlocks/> 215 // export const qb = () => <CreativeBlocks/> 216 // 217 // export const EssentialBlocks = () => { 218 // return <SVGEssentialBlocksIcon width="20" height="20"/> 219 // } 220 // export const essentialblocks = () => <EssentialBlocks/> 221 // export const eb = () => <EssentialBlocks/> 222 // 223 // export const UltimateAddonsForGutenberg = () => { 224 // return <SVGUltimateAddonsForGutenbergIcon width="20" height="20"/> 225 // } 226 // export const ultimateaddonsforgutenberg = () => <UltimateAddonsForGutenberg/> 227 // 228 // 229 // export const UltimateBlocks = () => { 230 // return <SVGUltimateBlocksIcon width="20" height="20"/> 231 // } 232 // export const ultimateblocks = () => <UltimateBlocks/> 233 // 234 // export const gutentor = () => { 235 // return <SVGGutentorIcon width="20" height="20"/> 236 // } 237 // 238 // 239 // export const GutenbergForms = () => { 240 // return <SVGGutenbergFormsIcon width="20" height="20"/> 241 // } 242 // export const gutenbergforms = () => <GutenbergForms/> 243 // export const formsgutenberg = () => <GutenbergForms/> 244 //