SHARE
TWEET

Untitled

a guest Aug 17th, 2019 74 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top