components
1 year ago
block.json
1 year ago
edit.js
1 year ago
index.js
1 year ago
looper.js
1 year ago
query-parameters.js
1 year ago
save.js
1 year ago
templates.js
1 year ago
toolbar-appenders.js
1 year ago
templates.js
338 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | |
| 3 | import { getAtRuleValue } from '@edge22/styles-builder'; |
| 4 | |
| 5 | const mobileAtRule = getAtRuleValue( 'smallWidth' ); |
| 6 | |
| 7 | export const buttonStyles = { |
| 8 | paddingTop: '1rem', |
| 9 | paddingRight: '1rem', |
| 10 | paddingBottom: '1rem', |
| 11 | paddingLeft: '1rem', |
| 12 | borderTopColor: '#000', |
| 13 | borderRightColor: '#000', |
| 14 | borderBottomColor: '#000', |
| 15 | borderLeftColor: '#000', |
| 16 | borderTopStyle: 'solid', |
| 17 | borderRightStyle: 'solid', |
| 18 | borderBottomStyle: 'solid', |
| 19 | borderLeftStyle: 'solid', |
| 20 | borderTopWidth: '1px', |
| 21 | borderRightWidth: '1px', |
| 22 | borderBottomWidth: '1px', |
| 23 | borderLeftWidth: '1px', |
| 24 | backgroundColor: '#ffffff', |
| 25 | color: '#000000', |
| 26 | display: 'inline-flex', |
| 27 | textDecoration: 'none', |
| 28 | lineHeight: '1', |
| 29 | fontSize: '14px', |
| 30 | }; |
| 31 | |
| 32 | export const PAGINATION_TEMPLATE = [ 'generateblocks/element', |
| 33 | { |
| 34 | styles: { |
| 35 | display: 'flex', |
| 36 | justifyContent: 'center', |
| 37 | alignItems: 'center', |
| 38 | marginTop: '20px', |
| 39 | columnGap: '10px', |
| 40 | rowGap: '10px', |
| 41 | }, |
| 42 | className: 'gb-query-loop-pagination', |
| 43 | }, |
| 44 | [ |
| 45 | [ 'generateblocks/text', |
| 46 | { |
| 47 | tagName: 'a', |
| 48 | content: __( 'Previous', 'generateblocks' ), |
| 49 | htmlAttributes: { |
| 50 | href: '{{previous_posts_page_url}}', |
| 51 | }, |
| 52 | styles: { |
| 53 | ...buttonStyles, |
| 54 | }, |
| 55 | }, |
| 56 | ], |
| 57 | [ 'generateblocks/query-page-numbers', |
| 58 | { |
| 59 | styles: { |
| 60 | display: 'flex', |
| 61 | justifyContent: 'center', |
| 62 | alignItems: 'center', |
| 63 | columnGap: '5px', |
| 64 | rowGap: '5px', |
| 65 | '.page-numbers': { |
| 66 | ...buttonStyles, |
| 67 | }, |
| 68 | '.page-numbers.current': { |
| 69 | borderTopWidth: '0', |
| 70 | borderRightWidth: '0', |
| 71 | borderBottomWidth: '0', |
| 72 | borderLeftWidth: '0', |
| 73 | }, |
| 74 | '.page-numbers.dots': { |
| 75 | borderTopWidth: '0', |
| 76 | borderRightWidth: '0', |
| 77 | borderBottomWidth: '0', |
| 78 | borderLeftWidth: '0', |
| 79 | }, |
| 80 | }, |
| 81 | }, |
| 82 | ], |
| 83 | [ 'generateblocks/text', |
| 84 | { |
| 85 | tagName: 'a', |
| 86 | content: __( 'Next', 'generateblocks' ), |
| 87 | htmlAttributes: { |
| 88 | href: '{{next_posts_page_url}}', |
| 89 | }, |
| 90 | styles: { |
| 91 | ...buttonStyles, |
| 92 | }, |
| 93 | }, |
| 94 | ], |
| 95 | ], |
| 96 | ]; |
| 97 | |
| 98 | export const NO_RESULTS_TEMPLATE = [ 'generateblocks/query-no-results', |
| 99 | {}, |
| 100 | [ |
| 101 | [ 'generateblocks/text', |
| 102 | { |
| 103 | tagName: 'p', |
| 104 | content: __( 'No results found.', 'generateblocks' ), |
| 105 | }, |
| 106 | ], |
| 107 | ], |
| 108 | ]; |
| 109 | |
| 110 | export const TEMPLATES = [ |
| 111 | { |
| 112 | id: 'title-date-excerpt', |
| 113 | label: __( 'Title, date, & excerpt', 'generateblocks' ), |
| 114 | icon: <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M15 33h171v11H15zM15 51h79v5H15zM15 71h171v5H15zM15 82h171v5H15zM15 116h171v11H15zM15 134h79v5H15zM15 154h171v5H15zM15 165h171v5H15z" /></svg>, |
| 115 | innerBlocks: [ |
| 116 | [ 'generateblocks/looper', |
| 117 | { |
| 118 | styles: { |
| 119 | display: 'flex', |
| 120 | flexDirection: 'column', |
| 121 | rowGap: '40px', |
| 122 | }, |
| 123 | }, |
| 124 | [ |
| 125 | [ 'generateblocks/loop-item', |
| 126 | {}, |
| 127 | [ |
| 128 | [ 'generateblocks/text', { |
| 129 | tagName: 'h2', |
| 130 | content: '{{post_title link:post}}', |
| 131 | styles: { |
| 132 | marginBottom: '5px', |
| 133 | }, |
| 134 | } ], |
| 135 | [ 'generateblocks/text', { |
| 136 | tagName: 'p', |
| 137 | content: '{{post_date}}', |
| 138 | styles: { |
| 139 | fontSize: '14px', |
| 140 | }, |
| 141 | } ], |
| 142 | [ 'generateblocks/text', { |
| 143 | tagName: 'p', |
| 144 | content: '{{post_excerpt}}', |
| 145 | } ], |
| 146 | ], |
| 147 | ], |
| 148 | ], |
| 149 | ], |
| 150 | PAGINATION_TEMPLATE, |
| 151 | NO_RESULTS_TEMPLATE, |
| 152 | ], |
| 153 | }, |
| 154 | { |
| 155 | id: 'title-date', |
| 156 | label: __( 'Title & date', 'generateblocks' ), |
| 157 | icon: <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M14 30h171v11H14zM14 48h79v5H14zM14 88h171v11H14zM14 106h79v5H14zM14 146h171v11H14zM14 164h79v5H14z" /></svg>, |
| 158 | innerBlocks: [ |
| 159 | [ 'generateblocks/looper', |
| 160 | { |
| 161 | styles: { |
| 162 | display: 'flex', |
| 163 | flexDirection: 'column', |
| 164 | rowGap: '20px', |
| 165 | }, |
| 166 | }, |
| 167 | [ |
| 168 | [ 'generateblocks/loop-item', |
| 169 | {}, |
| 170 | [ |
| 171 | [ 'generateblocks/text', { |
| 172 | tagName: 'h2', |
| 173 | styles: { |
| 174 | fontSize: '20px', |
| 175 | marginBottom: '5px', |
| 176 | }, |
| 177 | content: '{{post_title link:post}}', |
| 178 | } ], |
| 179 | [ 'generateblocks/text', { |
| 180 | tagName: 'p', |
| 181 | styles: { |
| 182 | marginBottom: '0px', |
| 183 | fontSize: '14px', |
| 184 | }, |
| 185 | content: '{{post_date}}', |
| 186 | } ], |
| 187 | ], |
| 188 | ], |
| 189 | ], |
| 190 | ], |
| 191 | PAGINATION_TEMPLATE, |
| 192 | NO_RESULTS_TEMPLATE, |
| 193 | ], |
| 194 | }, |
| 195 | { |
| 196 | id: 'two-columns', |
| 197 | label: __( 'Two columns', 'generateblocks' ), |
| 198 | icon: <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M14 28h78v11H14zM14 46h36.035v5H14zM14 66h78v5H14zM14 77h78v5H14zM108 28h78v11h-78zM108 46h36.035v5H108zM108 66h78v5h-78zM108 77h78v5h-78zM14 118h78v11H14zM14 136h36.035v5H14zM14 156h78v5H14zM14 167h78v5H14zM108 118h78v11h-78zM108 136h36.035v5H108zM108 156h78v5h-78zM108 167h78v5h-78z" /></svg>, |
| 199 | innerBlocks: [ |
| 200 | [ 'generateblocks/looper', |
| 201 | { |
| 202 | styles: { |
| 203 | display: 'grid', |
| 204 | gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', |
| 205 | columnGap: '20px', |
| 206 | rowGap: '20px', |
| 207 | [ mobileAtRule ]: { |
| 208 | gridTemplateColumns: '1fr', |
| 209 | }, |
| 210 | }, |
| 211 | }, |
| 212 | [ |
| 213 | [ 'generateblocks/loop-item', |
| 214 | { |
| 215 | styles: { |
| 216 | backgroundColor: '#fafafa', |
| 217 | paddingTop: '20px', |
| 218 | paddingRight: '20px', |
| 219 | paddingBottom: '20px', |
| 220 | paddingLeft: '20px', |
| 221 | }, |
| 222 | }, |
| 223 | [ |
| 224 | [ 'generateblocks/text', { |
| 225 | tagName: 'h2', |
| 226 | styles: { |
| 227 | fontSize: '30px', |
| 228 | marginBottom: '5px', |
| 229 | }, |
| 230 | content: '{{post_title link:post}}', |
| 231 | } ], |
| 232 | [ 'generateblocks/text', { |
| 233 | tagName: 'p', |
| 234 | styles: { |
| 235 | marginBottom: '30px', |
| 236 | fontSize: '14px', |
| 237 | }, |
| 238 | content: '{{post_date}}', |
| 239 | } ], |
| 240 | [ 'generateblocks/text', { |
| 241 | tagName: 'p', |
| 242 | content: '{{post_excerpt}}', |
| 243 | } ], |
| 244 | ], |
| 245 | ], |
| 246 | ], |
| 247 | ], |
| 248 | PAGINATION_TEMPLATE, |
| 249 | NO_RESULTS_TEMPLATE, |
| 250 | ], |
| 251 | }, |
| 252 | { |
| 253 | id: 'two-columns-feature-image', |
| 254 | label: __( 'Two columns & featured image', 'generateblocks' ), |
| 255 | icon: <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M110 57h78v11h-78V57ZM110 16h78v35h-78V16ZM110 76h78v5h-78zM110 87h55v5h-55zM110 149h78v11h-78v-11ZM110 108h78v35h-78v-35ZM110 168h78v5h-78zM110 179h55v5h-55zM15 149h78v11H15v-11ZM15 108h78v35H15v-35ZM15 168h78v5H15zM15 179h55v5H15zM15 57h78v11H15V57ZM15 16h78v35H15V16ZM15 76h78v5H15zM15 87h55v5H15z" /></svg>, |
| 256 | innerBlocks: [ |
| 257 | [ 'generateblocks/looper', |
| 258 | { |
| 259 | styles: { |
| 260 | display: 'grid', |
| 261 | gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', |
| 262 | columnGap: '20px', |
| 263 | rowGap: '20px', |
| 264 | [ mobileAtRule ]: { |
| 265 | gridTemplateColumns: '1fr', |
| 266 | }, |
| 267 | }, |
| 268 | }, |
| 269 | [ |
| 270 | [ 'generateblocks/loop-item', |
| 271 | { |
| 272 | styles: { |
| 273 | backgroundColor: '#fafafa', |
| 274 | paddingTop: '20px', |
| 275 | paddingRight: '20px', |
| 276 | paddingBottom: '20px', |
| 277 | paddingLeft: '20px', |
| 278 | }, |
| 279 | }, |
| 280 | [ |
| 281 | [ 'generateblocks/media', { |
| 282 | tagName: 'img', |
| 283 | htmlAttributes: { |
| 284 | src: '{{featured_image key:url}}', |
| 285 | alt: '{{post_title}}', |
| 286 | }, |
| 287 | styles: { |
| 288 | display: 'block', |
| 289 | height: 'auto', |
| 290 | marginBottom: '30px', |
| 291 | maxWidth: '100%', |
| 292 | }, |
| 293 | } ], |
| 294 | [ 'generateblocks/text', { |
| 295 | tagName: 'h2', |
| 296 | styles: { |
| 297 | fontSize: '30px', |
| 298 | marginBottom: '5px', |
| 299 | }, |
| 300 | content: '{{post_title link:post}}', |
| 301 | } ], |
| 302 | [ 'generateblocks/text', { |
| 303 | tagName: 'p', |
| 304 | styles: { |
| 305 | marginBottom: '30px', |
| 306 | fontSize: '14px', |
| 307 | }, |
| 308 | content: '{{post_date}}', |
| 309 | } ], |
| 310 | [ 'generateblocks/text', { |
| 311 | tagName: 'p', |
| 312 | content: '{{post_excerpt}}', |
| 313 | } ], |
| 314 | ], |
| 315 | ], |
| 316 | ], |
| 317 | ], |
| 318 | PAGINATION_TEMPLATE, |
| 319 | NO_RESULTS_TEMPLATE, |
| 320 | ], |
| 321 | }, |
| 322 | { |
| 323 | id: 'blank', |
| 324 | label: __( 'Start blank', 'generateblocks' ), |
| 325 | icon: <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"></svg>, |
| 326 | innerBlocks: [ |
| 327 | [ 'generateblocks/looper', |
| 328 | {}, |
| 329 | [ |
| 330 | [ 'generateblocks/loop-item', |
| 331 | {}, |
| 332 | ], |
| 333 | ], |
| 334 | ], |
| 335 | ], |
| 336 | }, |
| 337 | ]; |
| 338 |