Advertisement
Guest User

Untitled

a guest
Aug 17th, 2019
109
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.69 KB | None | 0 0
  1. import './__block__.view.scss';
  2. import './__block__.editor.scss';
  3.  
  4. const {
  5. registerBlockType,
  6. getBlockDefaultClassName
  7. } = wp.blocks;
  8.  
  9. const {
  10. InspectorControls,
  11. MediaUpload
  12. } = wp.editor;
  13.  
  14. const {
  15. Button
  16. } = wp.components;
  17.  
  18. registerBlockType('__namespace__/__block__', {
  19. title: '__prettyname__(noCase)',
  20. icon: '__icon__',
  21. category: '__category__',
  22.  
  23. attributes: {
  24. imgUrl: {
  25. type: 'array',
  26. source: 'children',
  27. selector: 'img',
  28. },
  29. },
  30.  
  31. edit({ attributes, className, setAttributes }) {
  32.  
  33. //Destructuring the images array attribute
  34. const {images = []} = attributes;
  35.  
  36. // This removes an image from the gallery
  37. const removeImage = (removeImage) => {
  38. //filter the images
  39. const newImages = images.filter( (image) => {
  40. //If the current image is equal to removeImage the image will be returnd
  41. if(image.id != removeImage.id) {
  42. return image;
  43. }
  44. });
  45.  
  46. //Saves the new state
  47. setAttributes({
  48. images:newImages,
  49. })
  50. }
  51.  
  52. //Displays the images
  53. const displayImages = (images) => {
  54. return (
  55. //Loops throug the images
  56. images.map( (image) => {
  57. return (
  58. <div className="gallery-item-container">
  59. <img className='gallery-item' src={image.url} key={ images.id } />
  60. <div className='remove-item' onClick={() => removeImage(image)}><span class="dashicons dashicons-trash"></span></div>
  61. <div className='caption-text'>{image.caption[0]}</div>
  62. </div>
  63. )
  64. })
  65.  
  66. )
  67. }
  68.  
  69. //JSX to return
  70. return (
  71. <div>
  72. <MediaUpload
  73. onSelect={(media) => {setAttributes({images: [...images, ...media]});}}
  74. type="image"
  75. multiple={true}
  76. value={images}
  77. render={({open}) => (
  78. <Button className="select-images-button is-button is-default is-large" onClick={open}>
  79. Add images
  80. </Button>
  81. )}
  82. />
  83. <br />
  84. <div class="modal__img">
  85. <div class="flexslider">
  86. <ul class="slides" data-total-slides={images.length}>{ displayImages(images) }</ul>
  87. </div>
  88. </div>
  89. </div>
  90. );
  91. },
  92.  
  93. save({attributes}) {
  94. // Destructuring the images array attribute
  95. const { images = [] } = attributes;
  96.  
  97. // Displays the images
  98. const displayImages = (images) => {
  99. return (
  100. images.map( (image,index) => {
  101. return (
  102. <li><img
  103. className='lazy'
  104. key={images.id}
  105. data-src={image.url}
  106. data-slide-no={index}
  107. data-caption={image.caption[0]}
  108. alt={image.alt}
  109. /></li>
  110. )
  111. })
  112. )
  113. }
  114.  
  115. //JSX to return
  116. return (
  117. <div class="modal__img">
  118. <div class="flexslider">
  119. <ul class="slides" data-total-slides={images.length}>{ displayImages(images) }</ul>
  120. </div>
  121. </div>
  122. );
  123.  
  124. },
  125. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement