Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import './__block__.view.scss';
- import './__block__.editor.scss';
- const {
- registerBlockType,
- getBlockDefaultClassName
- } = wp.blocks;
- const {
- InspectorControls,
- MediaUpload
- } = wp.editor;
- const {
- Button
- } = wp.components;
- registerBlockType('__namespace__/__block__', {
- title: '__prettyname__(noCase)',
- icon: '__icon__',
- category: '__category__',
- attributes: {
- imgUrl: {
- type: 'array',
- source: 'children',
- selector: 'img',
- },
- },
- edit({ attributes, className, setAttributes }) {
- //Destructuring the images array attribute
- const {images = []} = attributes;
- // This removes an image from the gallery
- const removeImage = (removeImage) => {
- //filter the images
- const newImages = images.filter( (image) => {
- //If the current image is equal to removeImage the image will be returnd
- if(image.id != removeImage.id) {
- return image;
- }
- });
- //Saves the new state
- setAttributes({
- images:newImages,
- })
- }
- //Displays the images
- const displayImages = (images) => {
- return (
- //Loops throug the images
- images.map( (image) => {
- return (
- <div className="gallery-item-container">
- <img className='gallery-item' src={image.url} key={ images.id } />
- <div className='remove-item' onClick={() => removeImage(image)}><span class="dashicons dashicons-trash"></span></div>
- <div className='caption-text'>{image.caption[0]}</div>
- </div>
- )
- })
- )
- }
- //JSX to return
- return (
- <div>
- <MediaUpload
- onSelect={(media) => {setAttributes({images: [...images, ...media]});}}
- type="image"
- multiple={true}
- value={images}
- render={({open}) => (
- <Button className="select-images-button is-button is-default is-large" onClick={open}>
- Add images
- </Button>
- )}
- />
- <br />
- <div class="modal__img">
- <div class="flexslider">
- <ul class="slides" data-total-slides={images.length}>{ displayImages(images) }</ul>
- </div>
- </div>
- </div>
- );
- },
- save({attributes}) {
- // Destructuring the images array attribute
- const { images = [] } = attributes;
- // Displays the images
- const displayImages = (images) => {
- return (
- images.map( (image,index) => {
- return (
- <li><img
- className='lazy'
- key={images.id}
- data-src={image.url}
- data-slide-no={index}
- data-caption={image.caption[0]}
- alt={image.alt}
- /></li>
- )
- })
- )
- }
- //JSX to return
- return (
- <div class="modal__img">
- <div class="flexslider">
- <ul class="slides" data-total-slides={images.length}>{ displayImages(images) }</ul>
- </div>
- </div>
- );
- },
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement