advanced-ads.block.js
547 lines
| 1 | ( () => { |
| 2 | window.wp.domReady( () => { |
| 3 | init( window.wp ); |
| 4 | } ); |
| 5 | |
| 6 | function init( wp ) { |
| 7 | /** |
| 8 | * Shortcut variables |
| 9 | */ |
| 10 | const el = wp.element.createElement, |
| 11 | registerBlockType = wp.blocks.registerBlockType, |
| 12 | RawHTML = wp.element.RawHTML, |
| 13 | aaGut = window.advadsGutenberg, |
| 14 | i18n = aaGut.i18n, |
| 15 | textFlow = aaGut.textFlow, |
| 16 | safeHTML = wp.dom.safeHTML, |
| 17 | editor = wp.blockEditor, |
| 18 | comp = wp.components; |
| 19 | |
| 20 | /** |
| 21 | * Custom SVG icon |
| 22 | * could move to a separated file if we need it in other places, too |
| 23 | * |
| 24 | * <source> https://gist.github.com/zgordon/e837e29f77c343d29ebb7290a1a75eea |
| 25 | */ |
| 26 | const advadsIconEl = el( |
| 27 | 'svg', |
| 28 | { |
| 29 | width: '24px', |
| 30 | height: '24px', |
| 31 | viewBox: '1.396 3276 24 24', |
| 32 | xmlns: 'http://www.w3.org/2000/svg', |
| 33 | x: '0px', |
| 34 | y: '0px', |
| 35 | }, |
| 36 | el( |
| 37 | 'g', |
| 38 | {}, |
| 39 | el( 'path', { |
| 40 | fill: '#1C1B3A', |
| 41 | d: 'M18.602,3286.2v8.53H6.677v-11.925h8.53c-0.355-0.804-0.545-1.684-0.545-2.625s0.205-1.82,0.545-2.625 h-2.57H1.406v18.266l0.6,0.6l-0.6-0.6c0,2.304,1.875,4.179,4.18,4.179l0,0h7.05h11.216v-13.821 c-0.805,0.355-1.705,0.566-2.645,0.566C20.286,3286.745,19.406,3286.541,18.602,3286.2z', |
| 42 | } ), |
| 43 | el( 'circle', { |
| 44 | fill: '#0E75A4', |
| 45 | cx: '21.206', |
| 46 | cy: '3280.179', |
| 47 | r: '4.18', |
| 48 | } ) |
| 49 | ) |
| 50 | ); |
| 51 | |
| 52 | const wpMajorMinor = parseFloat( aaGut.wpVersion || '0' ); |
| 53 | const apiVersion = wpMajorMinor >= 6.9 ? 3 : 2; |
| 54 | |
| 55 | const blockConfig = { |
| 56 | apiVersion, |
| 57 | title: i18n.advads, |
| 58 | icon: advadsIconEl, |
| 59 | category: 'common', |
| 60 | attributes: { |
| 61 | className: { |
| 62 | type: 'string', |
| 63 | default: '', |
| 64 | }, |
| 65 | itemID: { |
| 66 | type: 'string', |
| 67 | default: '', |
| 68 | }, |
| 69 | width: { |
| 70 | type: 'string', |
| 71 | default: '', |
| 72 | }, |
| 73 | height: { |
| 74 | type: 'string', |
| 75 | default: '', |
| 76 | }, |
| 77 | align: { |
| 78 | type: 'string', |
| 79 | default: 'default', |
| 80 | }, |
| 81 | }, |
| 82 | // todo: make the keywords translatable |
| 83 | keywords: [ 'advert', 'adsense', 'banner' ], |
| 84 | edit: ( props ) => { |
| 85 | const itemID = props.attributes.itemID; |
| 86 | |
| 87 | /** |
| 88 | * Update itemID |
| 89 | * |
| 90 | * @param {Event} event change event on the select input. |
| 91 | */ |
| 92 | function setID( event ) { |
| 93 | props.setAttributes( { |
| 94 | itemID: event.target.querySelector( 'option:checked' ) |
| 95 | .value, |
| 96 | } ); |
| 97 | } |
| 98 | |
| 99 | /** |
| 100 | * Update width |
| 101 | * |
| 102 | * @param {Event} event change event on the number input. |
| 103 | */ |
| 104 | function setWidth( event ) { |
| 105 | props.setAttributes( { width: event.target.value } ); |
| 106 | } |
| 107 | |
| 108 | /** |
| 109 | * Update height |
| 110 | * |
| 111 | * @param {Event} event change event on the number input. |
| 112 | */ |
| 113 | function setHeight( event ) { |
| 114 | props.setAttributes( { height: event.target.value } ); |
| 115 | } |
| 116 | |
| 117 | /** |
| 118 | * Request hints related to the item. |
| 119 | * |
| 120 | * @param {string} ID Item ID. |
| 121 | */ |
| 122 | function requestHints( ID ) { |
| 123 | if ( ! ID || 0 !== ID.indexOf( 'group_' ) ) { |
| 124 | setHints( [] ); |
| 125 | |
| 126 | return; |
| 127 | } |
| 128 | |
| 129 | const data = new FormData(); |
| 130 | data.append( 'action', 'advads-get-block-hints' ); |
| 131 | data.append( 'nonce', window.advadsglobal.ajax_nonce ); |
| 132 | data.append( 'itemID', itemID ); |
| 133 | |
| 134 | fetch( window.ajaxurl, { |
| 135 | method: 'POST', |
| 136 | credentials: 'same-origin', |
| 137 | body: data, |
| 138 | } ) |
| 139 | .then( ( response ) => response.json() ) |
| 140 | .then( ( json ) => { |
| 141 | if ( json.success ) { |
| 142 | setHints( json.data ); |
| 143 | } |
| 144 | } ) |
| 145 | .catch( ( error ) => { |
| 146 | // eslint-disable-next-line no-console -- Might help experienced users |
| 147 | console.info( error ); |
| 148 | } ); |
| 149 | } |
| 150 | |
| 151 | function createSizeInputs( label, name, onchange ) { |
| 152 | const randomID = |
| 153 | 'advanced-ads-size' + |
| 154 | ( Math.random() + 1 ).toString( 36 ).substring( 1 ); |
| 155 | return el( |
| 156 | 'div', |
| 157 | { className: 'size-group' }, |
| 158 | el( |
| 159 | 'label', |
| 160 | { htmlFor: randomID }, |
| 161 | el( 'span', { className: 'head' }, label ) |
| 162 | ), |
| 163 | el( |
| 164 | 'div', |
| 165 | { className: 'size-input' }, |
| 166 | el( 'input', { |
| 167 | type: 'number', |
| 168 | inputMode: 'numeric', |
| 169 | id: randomID, |
| 170 | value: props.attributes[ name ], |
| 171 | name, |
| 172 | min: 0, |
| 173 | max: Infinity, |
| 174 | step: 1, |
| 175 | onChange: onchange, |
| 176 | } ), |
| 177 | el( 'span', { className: 'suffix' }, 'px' ) |
| 178 | ) |
| 179 | ); |
| 180 | } |
| 181 | |
| 182 | const [ hints, setHints ] = window.wp.element.useState( [] ); |
| 183 | window.wp.element.useEffect( () => { |
| 184 | requestHints( itemID ); |
| 185 | }, [ itemID ] ); |
| 186 | |
| 187 | // the form children elements |
| 188 | const children = []; |
| 189 | |
| 190 | // argument list (in array form) for the children creation |
| 191 | const args = [], |
| 192 | ads = [], |
| 193 | groups = [], |
| 194 | placements = []; |
| 195 | |
| 196 | args.push( 'select' ); |
| 197 | args.push( { |
| 198 | value: props.attributes.itemID, |
| 199 | onChange: setID, |
| 200 | key: 'advads-select-item', |
| 201 | } ); |
| 202 | args.push( |
| 203 | el( 'option', { key: 'empty' }, i18n[ '--empty--' ] ) |
| 204 | ); |
| 205 | |
| 206 | for ( const adID in aaGut.ads ) { |
| 207 | if ( typeof aaGut.ads[ adID ].id === 'undefined' ) { |
| 208 | continue; |
| 209 | } |
| 210 | ads.push( |
| 211 | el( |
| 212 | 'option', |
| 213 | { |
| 214 | value: 'ad_' + aaGut.ads[ adID ].id, |
| 215 | key: adID, |
| 216 | }, |
| 217 | aaGut.ads[ adID ].title |
| 218 | ) |
| 219 | ); |
| 220 | } |
| 221 | |
| 222 | for ( const GID in aaGut.groups ) { |
| 223 | if ( 'undefined' === typeof aaGut.groups[ GID ].id ) { |
| 224 | continue; |
| 225 | } |
| 226 | groups.push( |
| 227 | el( |
| 228 | 'option', |
| 229 | { |
| 230 | value: 'group_' + aaGut.groups[ GID ].id, |
| 231 | key: GID, |
| 232 | }, |
| 233 | aaGut.groups[ GID ].name |
| 234 | ) |
| 235 | ); |
| 236 | } |
| 237 | |
| 238 | if ( aaGut.placements ) { |
| 239 | for ( const pid in aaGut.placements ) { |
| 240 | if ( |
| 241 | 'undefined' === typeof aaGut.placements[ pid ].id |
| 242 | ) { |
| 243 | continue; |
| 244 | } |
| 245 | placements.push( |
| 246 | el( |
| 247 | 'option', |
| 248 | { |
| 249 | value: |
| 250 | 'place_' + aaGut.placements[ pid ].id, |
| 251 | key: pid, |
| 252 | }, |
| 253 | aaGut.placements[ pid ].name |
| 254 | ) |
| 255 | ); |
| 256 | } |
| 257 | } |
| 258 | |
| 259 | if ( aaGut.placements ) { |
| 260 | args.push( |
| 261 | el( |
| 262 | 'optgroup', |
| 263 | { |
| 264 | label: i18n.placements, |
| 265 | key: 'placements', |
| 266 | }, |
| 267 | placements |
| 268 | ) |
| 269 | ); |
| 270 | } |
| 271 | |
| 272 | args.push( |
| 273 | el( |
| 274 | 'optgroup', |
| 275 | { |
| 276 | label: i18n.adGroups, |
| 277 | key: 'adGroups', |
| 278 | }, |
| 279 | groups |
| 280 | ) |
| 281 | ); |
| 282 | |
| 283 | args.push( |
| 284 | el( 'optgroup', { label: i18n.ads, key: 'ads' }, ads ) |
| 285 | ); |
| 286 | |
| 287 | // add a <label /> first and style it. |
| 288 | children.push( |
| 289 | el( |
| 290 | 'div', |
| 291 | { |
| 292 | className: 'components-placeholder__label', |
| 293 | key: 'advads-block-title', |
| 294 | }, |
| 295 | advadsIconEl, |
| 296 | el( |
| 297 | 'label', |
| 298 | { style: { display: 'block' } }, |
| 299 | i18n.advads |
| 300 | ) |
| 301 | ) |
| 302 | ); |
| 303 | |
| 304 | if ( itemID && i18n[ '--empty--' ] !== itemID ) { |
| 305 | let url = '#'; |
| 306 | if ( 0 === itemID.indexOf( 'place_' ) ) { |
| 307 | url = aaGut.editLinks.placement; |
| 308 | } else if ( 0 === itemID.indexOf( 'group_' ) ) { |
| 309 | url = aaGut.editLinks.group; |
| 310 | } else if ( 0 === itemID.indexOf( 'ad_' ) ) { |
| 311 | url = aaGut.editLinks.ad.replace( |
| 312 | '%ID%', |
| 313 | itemID.substr( 3 ) |
| 314 | ); |
| 315 | } |
| 316 | |
| 317 | children.push( |
| 318 | el( |
| 319 | 'div', |
| 320 | { |
| 321 | className: 'components-placeholder__fieldset', |
| 322 | key: 'advads-select-wrap', |
| 323 | }, |
| 324 | // then add the <select /> input with its own children |
| 325 | el.apply( null, args ), |
| 326 | el( 'a', { |
| 327 | className: 'dashicons dashicons-external', |
| 328 | style: { |
| 329 | margin: 5, |
| 330 | }, |
| 331 | href: url, |
| 332 | target: '_blank', |
| 333 | key: 'advads-item-link', |
| 334 | } ) |
| 335 | ) |
| 336 | ); |
| 337 | |
| 338 | hints.forEach( function ( item, index ) { |
| 339 | children.push( |
| 340 | el( |
| 341 | RawHTML, |
| 342 | { |
| 343 | key: index, |
| 344 | className: |
| 345 | 'advads-block-hint advads-notice-inline advads-error', |
| 346 | }, |
| 347 | safeHTML( item ) |
| 348 | ) |
| 349 | ); |
| 350 | } ); |
| 351 | } else { |
| 352 | children.push( el.apply( null, args ) ); |
| 353 | } |
| 354 | |
| 355 | if ( ! aaGut.ads.length ) { |
| 356 | children.push( |
| 357 | el( |
| 358 | 'div', |
| 359 | { |
| 360 | className: 'components-placeholder__label', |
| 361 | key: 'advads-first-ad', |
| 362 | }, |
| 363 | '', |
| 364 | el( |
| 365 | 'a', |
| 366 | { |
| 367 | href: window.advadsglobal.create_ad_url, |
| 368 | className: 'button', |
| 369 | target: '_blank', |
| 370 | style: { |
| 371 | display: 'block', |
| 372 | marginTop: '10px', |
| 373 | }, |
| 374 | }, |
| 375 | window.advadsglobal.create_your_first_ad |
| 376 | ) |
| 377 | ) |
| 378 | ); |
| 379 | } |
| 380 | |
| 381 | const sizePanel = el( |
| 382 | 'div', |
| 383 | { id: 'advanced-ads-size-wrap' }, |
| 384 | el( |
| 385 | 'div', |
| 386 | null, |
| 387 | createSizeInputs( i18n.width, 'width', setWidth ), |
| 388 | createSizeInputs( i18n.height, 'height', setHeight ) |
| 389 | ) |
| 390 | ); |
| 391 | |
| 392 | const sidebar = el( |
| 393 | editor.InspectorControls, |
| 394 | { key: 'advads-sidebar' }, |
| 395 | el( |
| 396 | comp.PanelBody, |
| 397 | { |
| 398 | title: i18n.size, |
| 399 | initialOpen: true, |
| 400 | }, |
| 401 | sizePanel |
| 402 | ) |
| 403 | ); |
| 404 | |
| 405 | children.push( sidebar ); |
| 406 | |
| 407 | const alignmentItems = []; |
| 408 | |
| 409 | for ( const slug in textFlow ) { |
| 410 | const isSelected = props.attributes.align === slug; |
| 411 | alignmentItems.push( |
| 412 | el( |
| 413 | comp.MenuItem, |
| 414 | { |
| 415 | key: slug, |
| 416 | label: textFlow[ slug ].label, |
| 417 | onClick: () => |
| 418 | props.setAttributes( { align: slug } ), |
| 419 | isSelected, |
| 420 | }, |
| 421 | el( |
| 422 | 'div', |
| 423 | { |
| 424 | className: |
| 425 | 'text-flow-wrap' + |
| 426 | ( isSelected ? ' current' : '' ), |
| 427 | }, |
| 428 | el( |
| 429 | 'div', |
| 430 | { |
| 431 | className: 'text-flow-icon', |
| 432 | }, |
| 433 | el( 'img', { |
| 434 | src: `${ aaGut.imagesUrl }${ slug }.png`, |
| 435 | alt: slug, |
| 436 | title: textFlow[ slug ].label, |
| 437 | className: 'standard', |
| 438 | } ), |
| 439 | el( 'img', { |
| 440 | src: `${ aaGut.imagesUrl }${ slug }-alt.png`, |
| 441 | alt: slug, |
| 442 | title: textFlow[ slug ].label, |
| 443 | className: 'alternate', |
| 444 | } ) |
| 445 | ), |
| 446 | el( |
| 447 | 'div', |
| 448 | { |
| 449 | className: 'text-flow-label', |
| 450 | title: textFlow[ slug ].description, |
| 451 | }, |
| 452 | el( 'span', {}, textFlow[ slug ].label ) |
| 453 | ) |
| 454 | ) |
| 455 | ) |
| 456 | ); |
| 457 | } |
| 458 | |
| 459 | const toolBar = el( |
| 460 | editor.BlockControls, |
| 461 | { |
| 462 | key: 'advads-toolbar', |
| 463 | group: 'block', |
| 464 | }, |
| 465 | el( |
| 466 | comp.ToolbarGroup, |
| 467 | { |
| 468 | title: 'Alignment', |
| 469 | }, |
| 470 | el( comp.ToolbarDropdownMenu, { |
| 471 | icon: 'editor-alignleft', |
| 472 | label: 'Choose an alignment', |
| 473 | children: () => |
| 474 | el( |
| 475 | 'div', |
| 476 | { className: 'advads-align-dropdown' }, |
| 477 | alignmentItems |
| 478 | ), |
| 479 | } ) |
| 480 | ) |
| 481 | ); |
| 482 | |
| 483 | // return the complete form |
| 484 | return el( |
| 485 | 'div', |
| 486 | editor.useBlockProps(), |
| 487 | el( |
| 488 | 'form', |
| 489 | { |
| 490 | className: 'components-placeholder is-large', |
| 491 | }, |
| 492 | children |
| 493 | ), |
| 494 | toolBar |
| 495 | ); |
| 496 | }, |
| 497 | |
| 498 | // Transforms legacy widget to Advanced Ads block. |
| 499 | transforms: { |
| 500 | from: [ |
| 501 | { |
| 502 | type: 'block', |
| 503 | blocks: [ 'core/legacy-widget' ], |
| 504 | isMatch: ( attributes ) => { |
| 505 | if ( |
| 506 | ! attributes.instance || |
| 507 | ! attributes.instance.raw |
| 508 | ) { |
| 509 | // Can't transform if raw instance is not shown in REST API. |
| 510 | return false; |
| 511 | } |
| 512 | return attributes.idBase === 'advads_ad_widget'; |
| 513 | }, |
| 514 | transform: ( attributes ) => { |
| 515 | const instance = attributes.instance.raw; |
| 516 | const transformedBlock = wp.blocks.createBlock( |
| 517 | 'advads/gblock', |
| 518 | { |
| 519 | name: instance.name, |
| 520 | itemID: instance.item_id, |
| 521 | } |
| 522 | ); |
| 523 | if ( ! instance.title ) { |
| 524 | return transformedBlock; |
| 525 | } |
| 526 | return [ |
| 527 | wp.blocks.createBlock( 'core/heading', { |
| 528 | content: instance.title, |
| 529 | } ), |
| 530 | transformedBlock, |
| 531 | ]; |
| 532 | }, |
| 533 | }, |
| 534 | ], |
| 535 | }, |
| 536 | }; |
| 537 | |
| 538 | if ( apiVersion >= 3 ) { |
| 539 | blockConfig.render = () => null; |
| 540 | } else { |
| 541 | blockConfig.save = () => null; |
| 542 | } |
| 543 | |
| 544 | registerBlockType( 'advads/gblock', blockConfig ); |
| 545 | } |
| 546 | } )(); |
| 547 |