import classnames from 'classnames/dedupe'; import { InspectorControls } from '@wordpress/block-editor'; import { ExternalLink, PanelBody, Placeholder, SelectControl, Spinner, TextControl, ToggleControl, } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { applyFilters } from '@wordpress/hooks'; import { __ } from '@wordpress/i18n'; import RangeControl from '../../components/range-control'; import getIcon from '../../utils/get-icon'; /** * Block Edit Class. * * @param props */ export default function BlockEdit(props) { const { setAttributes, attributes } = props; let { className } = props; const { consumerKey, consumerSecret, accessToken, accessTokenSecret, userName, count, showReplies, showRetweets, showFeedAvatar, feedAvatarSize, showFeedName, showFeedDate, feedTextMode, feedTextConvertLinks, showFeedActions, showProfile, showProfileAvatar, profileAvatarSize, showProfileName, showProfileStats, showProfileDescription, showProfileWebsite, showProfileLocation, } = attributes; const { twitterFeed, twitterProfile } = useSelect((select) => { const APIDataReady = consumerKey && consumerSecret && accessToken && accessTokenSecret && userName; if (!APIDataReady) { return false; } const apiKeys = { consumer_key: consumerKey, consumer_secret: consumerSecret, access_token: accessToken, access_token_secret: accessTokenSecret, screen_name: userName, }; return { twitterFeed: select('ghostkit/blocks/twitter').getTwitterFeed({ count, exclude_replies: showReplies ? 'false' : 'true', include_rts: showRetweets ? 'true' : 'false', tweet_mode_extended: feedTextMode === 'full' ? 'true' : 'false', ...apiKeys, }), twitterProfile: select('ghostkit/blocks/twitter').getTwitterProfile( apiKeys ), }; })(BlockEdit); className = classnames('ghostkit-twitter', className); className = applyFilters('ghostkit.editor.className', className, props); const APIDataReady = consumerKey && consumerSecret && accessToken && accessTokenSecret && userName; return ( <> {APIDataReady ? ( <> setAttributes({ userName: value }) } __next40pxDefaultSize __nextHasNoMarginBottom /> setAttributes({ count: value }) } min={1} max={20} __next40pxDefaultSize __nextHasNoMarginBottom /> setAttributes({ showReplies: value }) } __nextHasNoMarginBottom /> setAttributes({ showRetweets: value }) } __nextHasNoMarginBottom /> setAttributes({ showFeedAvatar: value }) } __nextHasNoMarginBottom /> {showFeedAvatar ? ( setAttributes({ feedAvatarSize: value }) } min={10} max={100} allowCustomMin allowCustomMax __next40pxDefaultSize __nextHasNoMarginBottom /> ) : null} setAttributes({ showFeedName: value }) } __nextHasNoMarginBottom /> setAttributes({ showFeedDate: value }) } __nextHasNoMarginBottom /> setAttributes({ showFeedActions: value }) } __nextHasNoMarginBottom /> setAttributes({ feedTextMode: value }) } __next40pxDefaultSize __nextHasNoMarginBottom /> setAttributes({ feedTextConvertLinks: value, }) } __next40pxDefaultSize __nextHasNoMarginBottom /> setAttributes({ showProfile: value }) } __nextHasNoMarginBottom /> {showProfile ? ( <> setAttributes({ showProfileAvatar: value, }) } __nextHasNoMarginBottom /> {showProfileAvatar ? ( setAttributes({ profileAvatarSize: value, }) } min={30} max={150} allowCustomMin allowCustomMax __next40pxDefaultSize __nextHasNoMarginBottom /> ) : null} setAttributes({ showProfileName: value, }) } __nextHasNoMarginBottom /> setAttributes({ showProfileStats: value, }) } __nextHasNoMarginBottom /> setAttributes({ showProfileDescription: value, }) } __nextHasNoMarginBottom /> setAttributes({ showProfileWebsite: value, }) } __nextHasNoMarginBottom /> setAttributes({ showProfileLocation: value, }) } __nextHasNoMarginBottom /> ) : null} ) : null} setAttributes({ consumerKey: value }) } __next40pxDefaultSize __nextHasNoMarginBottom /> setAttributes({ consumerSecret: value }) } __next40pxDefaultSize __nextHasNoMarginBottom /> setAttributes({ accessToken: value }) } __next40pxDefaultSize __nextHasNoMarginBottom /> setAttributes({ accessTokenSecret: value }) } __next40pxDefaultSize __nextHasNoMarginBottom />

{__( 'A valid API data is required to use Twitter feed. How to get it', 'ghostkit' )}{' '} http://www.gabfirethemes.com/create-twitter-api-key/

{APIDataReady && showProfile && twitterProfile ? (
{showProfileAvatar && twitterProfile.profile_images_https ? (
{twitterProfile.fullName}
) : null}
{showProfileName && twitterProfile.name ? (

{twitterProfile.name} {twitterProfile.verified ? ( {__( 'Verified account', 'ghostkit' )} ) : null}

@{twitterProfile.screen_name}

) : null} {showProfileStats ? (
{ twitterProfile.statuses_count_short } {' '} {__('Tweets', 'ghostkit')}
{twitterProfile.friends_count_short} {' '} {__('Following', 'ghostkit')}
{ twitterProfile.followers_count_short } {' '} {__('Followers', 'ghostkit')}
) : null} {showProfileDescription && twitterProfile.description_entitled ? (
) : null} {showProfileWebsite && twitterProfile.url_entitled ? (
${twitterProfile.url_entitled}`, }} /> ) : null} {showProfileLocation && twitterProfile.location ? (
${twitterProfile.location}`, }} /> ) : null}
) : null} {APIDataReady && twitterFeed ? (
{twitterFeed.map((item, i) => { const oldItem = item; let isRetweet = false; if (item.retweeted_status) { item = item.retweeted_status; isRetweet = true; } const itemName = `twitter-item-${i}`; return (
{showFeedAvatar ? (
{isRetweet &&
} {item.user.screen_name}
) : null}
{isRetweet ? (
', }} /> {oldItem.user.name} {__('Retweeted', 'ghostkit')}
) : null} {showFeedName || showFeedDate ? (
{showFeedName ? (
{item.user.name} {' '} {item.user .verified ? ( {__( 'Verified account', 'ghostkit' )} ) : null}{' '} @ { item.user .screen_name }
) : null} {showFeedDate ? (
{ item.date_formatted }
) : null}
) : null} {feedTextConvertLinks === 'links_media' ? (
) : null} {feedTextConvertLinks === 'links' ? (
) : null} {feedTextConvertLinks !== 'links_media' && feedTextConvertLinks !== 'links' ? (
); })}
) : null} {APIDataReady && !twitterFeed ? (
) : null} {!APIDataReady ? ( ) : null}
); }