# ghostkit/3.4.1/gutenberg/blocks/gif/edit.js
Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.4.1. 308 lines.
- Page: https://pluginprobe.com/plugins/ghostkit/3.4.1/code/gutenberg/blocks/gif/edit.js
- Raw: https://pluginprobe.com/plugins/ghostkit/3.4.1/raw/gutenberg/blocks/gif/edit.js
- Modified: 2024-12-18T21:19:20+00:00
Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/3.4.1/code/gutenberg/blocks/gif/edit.js#L10-L20`.
```javascript
import { GiphyFetch } from '@giphy/js-fetch-api';
import classnames from 'classnames/dedupe';
import {
InspectorControls,
RichText,
useBlockProps,
} from '@wordpress/block-editor';
import {
Button,
ExternalLink,
PanelBody,
Placeholder,
Spinner,
TextareaControl,
TextControl,
} from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import getIcon from '../../utils/get-icon';
const GIPHY_API_KEY = 'Qm6AupESs2abqy7fSeHNQ892EWSS28r8';
// use @giphy/js-fetch-api to fetch gifs, instantiate with your api key
const gf = new GiphyFetch(GIPHY_API_KEY);
function splitAndLast(array, delimiter) {
const split = array.split(delimiter);
return split[split.length - 1];
}
/**
* Block Edit Class.
*
* @param props
*/
export default function BlockEdit(props) {
const { attributes, isSelected, setAttributes } = props;
let { className } = props;
const { caption, url, srcset, alt, width, height, searchText } = attributes;
const [results, setResults] = useState(null);
const [loading, setLoading] = useState(false);
function parseSearch() {
let giphyID = null;
// If search is hardcoded Giphy URL following this pattern: https://giphy.com/embed/4ZFekt94LMhNK
if (searchText.indexOf('//giphy.com/gifs') !== -1) {
giphyID = splitAndLast(splitAndLast(searchText, '/'), '-');
}
// If search is hardcoded Giphy URL following this pattern: http://i.giphy.com/4ZFekt94LMhNK.gif
if (searchText.indexOf('//i.giphy.com') !== -1) {
giphyID = splitAndLast(searchText, '/').replace('.gif', '');
}
// https://media.giphy.com/media/gt0hYzKlMpfOg/giphy.gif
const match = searchText.match(
/http[s]?:\/\/media.giphy.com\/media\/([A-Za-z0-9\-.]+)\/giphy.gif/
);
if (match) {
// eslint-disable-next-line prefer-destructuring
giphyID = match[1];
}
if (giphyID) {
return {
id: giphyID,
};
}
return {
search: searchText,
};
}
function fetch() {
setLoading(true);
const searchData = parseSearch();
let request = false;
if (searchData.id) {
request = gf.gifs([searchData.id]);
} else {
request = gf.search(searchData.search || '', {
sort: 'relevant',
limit: 10,
});
}
request.then((result) => {
setLoading(false);
if (
result.meta &&
result.meta.status &&
result.meta.status === 200
) {
// If there is only one result, Giphy's API does not return an array.
// The following statement normalizes the data into an array with one member in this case.
const newResults =
typeof result.data.images !== 'undefined'
? [result.data]
: result.data;
const giphyData = newResults[0];
// No results
if (!giphyData.images) {
return;
}
setResults(newResults);
} else {
// Error
}
});
}
function onSubmit() {
fetch();
}
function onFormSubmit(event) {
event.preventDefault();
onSubmit();
}
function selectGiphy(giphy) {
const { images } = giphy;
const sizes = [
'preview_gif',
'downsized_small',
'downsized_medium',
'downsized_large',
'downsized',
];
let newSrcset = '';
sizes.forEach((sizeName) => {
if (
images[sizeName] &&
images[sizeName].url &&
!new RegExp(` ${images[sizeName].width}w`).test(newSrcset)
) {
newSrcset += `${newSrcset ? ', ' : ''}${images[sizeName].url} ${
images[sizeName].width
}w`;
}
});
setAttributes({
url: images.original.url,
srcset: newSrcset,
caption: giphy.title,
alt: giphy.title,
width: parseInt(images.original.width, 10),
height: parseInt(images.original.height, 10),
});
}
const inputFields = (
<>
{loading && }
{!loading && results && results.length > 1 && (
{results.map((thumbnail) => {
const thumbnailStyle = {
backgroundImage: `url(${thumbnail.images.downsized_still.url})`,
};
return (
// eslint-disable-next-line react/button-has-type
);
})}
)}
);
className = classnames('ghostkit-gif', className);
const blockProps = useBlockProps({ className });
return (
<>
{url ? (
{inputFields}
setAttributes({ alt: val })}
help={
<>
{__(
'Describe the purpose of the image',
'ghostkit'
)}
{__(
'Leave empty if the image is purely decorative.',
'ghostkit'
)}
}
__nextHasNoMarginBottom
/>
) : null}
{!url ? (
{inputFields}
) : (
<>
{(!RichText.isEmpty(caption) || isSelected) &&
!!url && (
setAttributes({ caption: value })
}
placeholder={__(
'Write caption…',
'jetpack'
)}
tagName="figcaption"
value={caption}
/>
)}
)}
);
}
```