import { __, sprintf } from '@wordpress/i18n'; import { useEffect, useMemo, useRef, useState } from '@wordpress/element'; import { useSelect, useDispatch } from "@wordpress/data"; import { Panel, PanelBody, Spinner } from '@wordpress/components'; import { InspectorControls, useBlockProps, InnerBlocks, RichText, BlockControls, AlignmentToolbar } from '@wordpress/block-editor'; import { useMergeRefs } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; import { alignNone } from '@wordpress/icons'; import { decodeEntities } from '@wordpress/html-entities'; import { store as persistentTabsStore } from '../../block-editor/store/persistent-tabs-store'; import { Swiper, SwiperSlide } from 'swiper/react'; import { Pagination, Navigation, Autoplay } from 'swiper/modules'; import 'swiper/css/bundle'; import { RadioButtons } from '../../block-editor/controls/radio-buttons/radio-buttons'; import { RangeSlider } from '../../block-editor/controls/range-slider/range-slider'; import { Select } from '../../block-editor/controls/select/select'; import { TextInput } from '../../block-editor/controls/text-input/text-input'; import { SwitchToggle } from '../../block-editor/controls/switch-toggle/switch-toggle'; import { ColorPicker } from '../../block-editor/controls/color-picker/color-picker'; import { Typography } from '../../block-editor/controls/typography/typography'; import { Border } from '../../block-editor/controls/border/border'; import { Dimensions } from '../../block-editor/controls/dimensions/dimensions'; import { RadioImages } from '../../block-editor/controls/radio-images/radio-images'; import { createAttributeUpdater } from '../../utils/block-attributes'; import { withTabsNavigation } from '../../block-editor/hoc/with-tabs-navigation'; import { withAdvancedTab } from '../../block-editor/hoc/with-advanced-tab'; import { withDynamicCSS } from '../../block-editor/hoc/with-dynamic-css'; import { withPersistentPanelToggle } from '../../block-editor/hoc/with-persistent-panel-toggle'; import { withGoogleFonts } from '../../block-editor/hoc/with-google-fonts'; import { withQueryPostTypesData } from '../../block-editor/hoc/with-query-post-types-data'; import { blockPropsWithAnimation } from '../../utils/block-animations'; import { getSettingValue, getSettingUnit, getSettingDefaultValue, getSettingDefaultUnit, getInnerSettingValue, getColorPickerSettingDefaultValue, getColorPickerSettingValue, getDimensionsSettingDefaultValue, getDimensionsSettingConnectValue, getDimensionsSettingDirectionsValue, getDimensionsSettingValue } from '../../utils/settings'; import postCardPresets from './presets'; import postCardPresetsImages from './presets-images'; import { icons } from '../../utils/icons'; const attributesDefaults = PostGridBlockData.attributes; const Edit = (props) => { const { attributes, setAttributes, clientId, postTypes, setUpdateCss, setUpdatePresetCss, isPanelOpened, onTogglePanelBodyHandler, posts, isLoading } = props; const { content } = attributes; const atts = attributes; const updateAttribute = createAttributeUpdater(attributes, setAttributes); const currentDevice = useSelect((select) => select('core/edit-post').__experimentalGetPreviewDeviceType().toLowerCase()); const currentTab = useSelect((select) => select('persistent-tabs-store').getCurrentTab()); const swiperRef = useRef(null); const { // General. postCardLayout, postType, taxonomy, taxonomyTerm, postsPerPage, stickyPosts, excludeCurrentPost, offsetStartingPoint, offsetStartingPointValue, orderBy, order, displayCarousel, displayCarouselNavigation, carouselPauseOnHover, carouselAutoplay, carouselAutoplaySpeed, carouselLoop, carouselAutoHeight, carouselTransitionDuration, carouselNavigation, pagination, paginationPageLimit, paginationType, paginationAlignment, displayImage, imageRatio, imageSize, imagePosition, displaySaleBadge, displayTitle, titleTag, displayAuthor, displayDate, displayComments, displayReviewsRating, displayPrice, displayTaxonomy, displayMetaIcon, displayExcerpt, excerptMaxWords, displayButton, buttonOpenInNewTab, // Style. columns, columnsGap, rowsGap, cardBackgroundColor, cardBorder, cardHorizontalAlignment, cardVerticalAlignment, cardPadding, cardPaddingToContentOnly, carouselPadding, arrowSize, arrowBorderSize, arrowBorderRadius, arrowOffset, navigationColor, navigationBackgroundColor, navigationBorderColor, dotsColor, dotsOffset, imageBottomSpacing, imageWidth, imageGap, imageBorderRadius, imageOverlay, imageOverlayColor, imageOverlayOpacity, saleBadgePosition, saleBadgeColor, saleBadgeBackgroundColor, saleBadgeTypography, saleBadgeBorder, saleBadgePadding, saleBadgeOffset, titleColor, titleTypography, titleBottomSpacing, reviewsRatingColor, reviewsRatingBackgroundColor, reviewsRatingBottomSpacing, metaColor, metaIconColor, metaTypography, metaBottomSpacing, excerptColor, excerptTypography, excerptBottomSpacing, priceColor, priceTypography, priceBottomSpacing, buttonColor, buttonTypography, buttonBackgroundColor, buttonBorder, buttonPadding, buttonBottomSpacing, paginationTextColor, paginationActiveBackgroundColor, paginationActiveTextColor, paginationBorder, paginationItemsGap, paginationTopSpacing, paginationButtonBackgroundColor, paginationButtonTextColor, paginationButtonBorder, paginationButtonPadding, // Advanced. hideOnDesktop, hideOnTablet, hideOnMobile, } = useMemo(() => { return { // General. postCardLayout: atts.postCardLayout, postType: atts.postType, taxonomy: atts.taxonomy, taxonomyTerm: atts.taxonomyTerm, postsPerPage: atts.postsPerPage, stickyPosts: atts.stickyPosts, excludeCurrentPost: atts.excludeCurrentPost, offsetStartingPoint: atts.offsetStartingPoint, offsetStartingPointValue: atts.offsetStartingPointValue, orderBy: atts.orderBy, order: atts.order, displayCarousel: atts.displayCarousel, displayCarouselNavigation: atts.displayCarouselNavigation, carouselPauseOnHover: atts.carouselPauseOnHover, carouselAutoplay: atts.carouselAutoplay, carouselAutoplaySpeed: atts.carouselAutoplaySpeed, carouselLoop: atts.carouselLoop, carouselAutoHeight: atts.carouselAutoHeight, carouselTransitionDuration: atts.carouselTransitionDuration, carouselNavigation: atts.carouselNavigation, pagination: atts.pagination, paginationPageLimit: atts.paginationPageLimit, paginationType: atts.paginationType, paginationAlignment: getSettingValue('paginationAlignment', currentDevice, atts), displayImage: atts.displayImage, imageRatio: atts.imageRatio, imageSize: atts.imageSize, imagePosition: atts.imagePosition, displaySaleBadge: atts.displaySaleBadge, displayTitle: atts.displayTitle, titleTag: atts.titleTag, displayAuthor: atts.displayAuthor, displayDate: atts.displayDate, displayComments: atts.displayComments, displayReviewsRating: atts.displayReviewsRating, displayPrice: atts.displayPrice, displayTaxonomy: atts.displayTaxonomy, displayMetaIcon: atts.displayMetaIcon, displayExcerpt: atts.displayExcerpt, excerptMaxWords: atts.excerptMaxWords, displayButton: atts.displayButton, buttonOpenInNewTab: atts.buttonOpenInNewTab, // Style. columns: getSettingValue('columns', currentDevice, atts), columnsGap: getSettingValue('columnsGap', currentDevice, atts), rowsGap: getSettingValue('rowsGap', currentDevice, atts), cardBackgroundColor: getSettingValue('cardBackgroundColor', 'desktop', atts), cardHorizontalAlignment: getSettingValue('cardHorizontalAlignment', 'desktop', atts), cardVerticalAlignment: getSettingValue('cardVerticalAlignment', 'desktop', atts), cardPadding: getDimensionsSettingValue('cardPadding', currentDevice, atts), cardPaddingToContentOnly: atts.cardPaddingToContentOnly, carouselPadding: getDimensionsSettingValue('carouselPadding', currentDevice, atts), arrowSize: getSettingValue('arrowSize', 'desktop', atts), arrowBorderSize: getSettingValue('arrowBorderSize', 'desktop', atts), arrowBorderRadius: getSettingValue('arrowBorderRadius', 'desktop', atts), arrowOffset: getSettingValue('arrowOffset', 'desktop', atts), navigationColor: getSettingValue('navigationColor', 'desktop', atts), navigationBackgroundColor: getSettingValue('navigationBackgroundColor', 'desktop', atts), navigationBorderColor: getSettingValue('navigationBorderColor', 'desktop', atts), dotsColor: getSettingValue('dotsColor', 'desktop', atts), dotsOffset: getSettingValue('dotsOffset', 'desktop', atts), imageWidth: getSettingValue('imageWidth', currentDevice, atts), imageGap: getSettingValue('imageGap', currentDevice, atts), imageBottomSpacing: getSettingValue('imageBottomSpacing', currentDevice, atts), imageBorderRadius: getDimensionsSettingValue('imageBorderRadius', currentDevice, atts), imageOverlay: atts.imageOverlay, imageOverlayColor: getSettingValue('imageOverlayColor', 'desktop', atts), imageOverlayOpacity: getSettingValue('imageOverlayOpacity', 'desktop', atts), saleBadgePosition: atts.saleBadgePosition, saleBadgeColor: getSettingValue('saleBadgeColor', 'desktop', atts), saleBadgeBackgroundColor: getSettingValue('saleBadgeBackgroundColor', 'desktop', atts), saleBadgeTypography: atts.saleBadgeTypography, saleBadgeBorder: atts.saleBadgeBorder, saleBadgePadding: getDimensionsSettingValue('saleBadgePadding', currentDevice, atts), saleBadgeOffset: getSettingValue('saleBadgeOffset', 'desktop', atts), titleColor: getSettingValue('titleColor', 'desktop', atts), titleTypography: atts.titleTypography, titleBottomSpacing: getSettingValue('titleBottomSpacing', currentDevice, atts), reviewsRatingColor: getSettingValue('reviewsRatingColor', 'desktop', atts), reviewsRatingBackgroundColor: getSettingValue('reviewsRatingBackgroundColor', 'desktop', atts), reviewsRatingBottomSpacing: getSettingValue('reviewsRatingBottomSpacing', currentDevice, atts), metaColor: getSettingValue('metaColor', 'desktop', atts), metaIconColor: getSettingValue('metaIconColor', 'desktop', atts), metaTypography: atts.metaTypography, metaBottomSpacing: getSettingValue('metaBottomSpacing', currentDevice, atts), excerptColor: getSettingValue('excerptColor', 'desktop', atts), excerptTypography: atts.excerptTypography, excerptBottomSpacing: getSettingValue('excerptBottomSpacing', currentDevice, atts), priceColor: getSettingValue('priceColor', 'desktop', atts), priceTypography: atts.priceTypography, priceBottomSpacing: getSettingValue('priceBottomSpacing', currentDevice, atts), buttonColor: getSettingValue('buttonColor', 'desktop', atts), buttonTypography: atts.buttonTypography, buttonBackgroundColor: getSettingValue('buttonBackgroundColor', 'desktop', atts), buttonBorder: atts.buttonBorder, buttonPadding: getDimensionsSettingValue('buttonPadding', currentDevice, atts), buttonBottomSpacing: getSettingValue('buttonBottomSpacing', currentDevice, atts), paginationTextColor: getSettingValue('paginationTextColor', 'desktop', atts), paginationActiveBackgroundColor: getSettingValue('paginationActiveBackgroundColor', 'desktop', atts), paginationActiveTextColor: getSettingValue('paginationActiveTextColor', 'desktop', atts), paginationBorder: atts.paginationBorder, paginationItemsGap: getSettingValue('paginationItemsGap', currentDevice, atts), paginationTopSpacing: getSettingValue('paginationTopSpacing', currentDevice, atts), paginationButtonBackgroundColor: getSettingValue('paginationButtonBackgroundColor', 'desktop', atts), paginationButtonTextColor: getSettingValue('paginationButtonTextColor', 'desktop', atts), paginationButtonBorder: atts.paginationButtonBorder, paginationButtonPadding: getDimensionsSettingValue('paginationButtonPadding', currentDevice, atts), cardBorder: atts.cardBorder, // Advanced. hideOnDesktop: getSettingValue('hideOnDesktop', 'desktop', atts), hideOnTablet: getSettingValue('hideOnTablet', 'desktop', atts), hideOnMobile: getSettingValue('hideOnMobile', 'desktop', atts), }; }, [atts, currentDevice]); // Save the Client ID to attributes. useEffect(() => { setAttributes({ clientId: clientId }); }, [clientId]); // Prevent the default click event handler for the block if the html tag is 'a'. const blockRef = useRef(null); useEffect(() => { if ( blockRef === null ) { return; } if (blockRef.current) { const handleClick = (event) => { event.preventDefault(); }; if ( blockRef.current ) { blockRef.current.addEventListener('click', handleClick); } return () => { if ( blockRef.current ) { blockRef.current.removeEventListener('click', handleClick); } }; } }, []); // Prevent links clicks. const preventClickHandler = (event) => { event.preventDefault(); }; // Order by options. const orderByOptions = useMemo(() => { const generalOptions = [ { label: __( 'Date', 'athemes-blocks' ), value: 'date' }, { label: __( 'Modified', 'athemes-blocks' ), value: 'modified' }, { label: __( 'Title', 'athemes-blocks' ), value: 'title' }, { label: __( 'Author', 'athemes-blocks' ), value: 'author' }, { label: __( 'Random', 'athemes-blocks' ), value: 'rand' }, ] if ( postType === 'product' ) { return [ ...generalOptions, { label: __( 'Popularity', 'athemes-blocks' ), value: 'popularity' }, { label: __( 'Rating', 'athemes-blocks' ), value: 'rating' }, { label: __( 'Price', 'athemes-blocks' ), value: 'price' }, { label: __( 'Sales', 'athemes-blocks' ), value: 'sales' }, { label: __( 'Menu Order', 'athemes-blocks' ), value: 'menu_order' }, ]; } return generalOptions; }, [postType]); // Get taxonomies for the selected post type. const taxonomies = useSelect((select) => { const { getTaxonomies } = select('core'); const taxonomies = getTaxonomies({ per_page: -1, post: postType }) || []; const filteredTaxonomies = taxonomies.filter(taxonomy => taxonomy.types.includes(postType)); if ( filteredTaxonomies.length === 0 ) { return [{ value: 0, label: sprintf( __( 'No taxonomies found for %s', 'athemes-blocks' ), postType ), }]; } return [ { value: 'all', label: __( 'All', 'athemes-blocks' ) }, ...filteredTaxonomies.map(taxonomy => ({ value: taxonomy.slug, label: taxonomy.name, })) ]; }, [postType]); // Get taxonomy terms for the selected taxonomy. const taxonomyTerms = useSelect((select) => { const { getEntityRecords } = select('core'); const terms = getEntityRecords('taxonomy', taxonomy, { per_page: -1, type: postType }) || []; if ( terms.length === 0 ) { return [{ value: 0, label: sprintf( __( 'No terms found for %s', 'athemes-blocks' ), taxonomy ), }]; } return [ { value: 'all', label: __( 'All', 'athemes-blocks' ) }, ...terms.map(term => ({ value: term.id, label: term.name, })) ]; }, [taxonomy, postType]); // Swiper Options. const swiperOptions = { slidesPerView: columns, spaceBetween: columnsGap, loop: carouselLoop, autoplay: carouselAutoplay ? { delay: carouselAutoplaySpeed, disableOnInteraction: false, pauseOnMouseEnter: carouselPauseOnHover } : false, speed: carouselTransitionDuration, navigation: ( carouselNavigation === 'arrows' || carouselNavigation === 'both' ) && displayCarouselNavigation ? { enabled: true, nextEl: 'at-block-nav--next', prevEl: 'at-block-nav--prev', } : false, pagination: ( postsPerPage > 1 && postsPerPage > columns ) && ( carouselNavigation === 'dots' || carouselNavigation === 'both' ) && displayCarouselNavigation ? { type: 'bullets', bulletClass: 'at-block-bullets--bullet', bulletActiveClass: 'at-block-bullets--bullet-active', clickable: true, } : false, draggable: false, allowTouchMove: false, autoHeight: carouselAutoHeight, }; // Swiper Navigation. const swiperNavigationPrevHandler = () => { if ( ! swiperRef.current ) return; swiperRef.current.swiper.slidePrev(); }; const swiperNavigationNextHandler = () => { if ( ! swiperRef.current ) return; swiperRef.current.swiper.slideNext(); }; // Swiper Pause on Hover. const swiperPauseMouseEnterHandler = () => { if ( ! swiperRef.current ) return; if ( carouselPauseOnHover && carouselAutoplay ) { console.log('PAUSE!'); swiperRef.current.swiper.autoplay.stop(); } }; const swiperPauseMouseLeaveHandler = () => { if ( ! swiperRef.current ) return; if ( carouselPauseOnHover && carouselAutoplay ) { console.log('RESUME!'); swiperRef.current.swiper.autoplay.start(); } }; // Refresh the swiper every time a attribute change. useEffect(() => { if ( displayCarousel === false ) { return; } if ( swiperRef === null || swiperRef.current === null || swiperRef.current.swiper === null ) { return; } swiperRef.current.swiper.update(); // Handle autoplay state changes if (carouselAutoplay) { swiperRef.current.swiper.autoplay.start(); } else { swiperRef.current.swiper.autoplay.stop(); } }, [atts]); return ( <> { currentTab === 'general' && ( onTogglePanelBodyHandler( 'presets' ) } > { const presetSettings = postCardPresets[value]; setAttributes({ ...presetSettings, }); setUpdatePresetCss(presetSettings); } } onClickReset={ () => { const presetSettings = postCardPresets['default']; setAttributes({ ...presetSettings, }); setUpdatePresetCss(presetSettings); } } /> onTogglePanelBodyHandler( 'query-settings' ) } > { setAttributes({ taxonomy: value }); } } onClickReset={ () => { setAttributes({ taxonomy: attributesDefaults.taxonomy.default }); } } /> ) } { ( postType !== 'page' && taxonomy !== 'all' ) && ( <> { setAttributes({ stickyPosts: value }); } } onClickReset={ () => { setAttributes({ stickyPosts: attributesDefaults.stickyPosts.default }); } } /> ) } { setAttributes({ excludeCurrentPost: value }); } } onClickReset={ () => { setAttributes({ excludeCurrentPost: attributesDefaults.excludeCurrentPost.default }); } } /> { setAttributes({ offsetStartingPoint: value }); } } onClickReset={ () => { setAttributes({ offsetStartingPoint: attributesDefaults.offsetStartingPoint.default }); } } /> { offsetStartingPoint && ( { setAttributes({ offsetStartingPointValue: value }); } } onClickReset={ () => { setAttributes({ offsetStartingPointValue: attributesDefaults.offsetStartingPointValue.default }); } } /> ) } { setAttributes({ order: value }); } } onClickReset={ () => { setAttributes({ order: attributesDefaults.order.default }); } } /> onTogglePanelBodyHandler( 'carousel' ) } > { setAttributes({ displayCarousel: value }); } } onClickReset={ () => { setAttributes({ displayCarousel: attributesDefaults.displayCarousel.default }); } } /> { displayCarousel && ( <> { setAttributes({ displayCarouselNavigation: value }); } } onClickReset={ () => { setAttributes({ displayCarouselNavigation: attributesDefaults.displayCarouselNavigation.default }); } } /> { setAttributes({ carouselPauseOnHover: value }); } } onClickReset={ () => { setAttributes({ carouselPauseOnHover: getSettingDefaultValue( 'carouselPauseOnHover', '', attributesDefaults ) }); } } /> { setAttributes({ carouselAutoplay: value }); } } onClickReset={ () => { setAttributes({ carouselAutoplay: getSettingDefaultValue( 'carouselAutoplay', '', attributesDefaults ) }); } } /> { carouselAutoplay && ( { setAttributes({ carouselAutoplaySpeed: value }); } } onClickReset={ () => { setAttributes({ carouselAutoplaySpeed: getSettingDefaultValue( 'carouselAutoplaySpeed', '', attributesDefaults ) }); } } /> ) } { setAttributes({ carouselLoop: value }); } } onClickReset={ () => { setAttributes({ carouselLoop: getSettingDefaultValue( 'carouselLoop', '', attributesDefaults ) }); } } /> { setAttributes({ carouselAutoHeight: value }); } } onClickReset={ () => { setAttributes({ carouselAutoHeight: getSettingDefaultValue( 'carouselAutoHeight', '', attributesDefaults ) }); } } /> { setAttributes({ carouselTransitionDuration: value }); } } onClickReset={ () => { setAttributes({ carouselTransitionDuration: getSettingDefaultValue( 'carouselTransitionDuration', '', attributesDefaults ) }); } } /> { setAttributes({ carouselNavigation: value }); } } onClickReset={ () => { setAttributes({ carouselNavigation: getSettingDefaultValue( 'carouselNavigation', '', attributesDefaults ) }); } } /> ) } { displayCarousel === false && ( onTogglePanelBodyHandler( 'pagination' ) } > { setAttributes({ pagination: value }); } } onClickReset={ () => { setAttributes({ pagination: attributesDefaults.pagination.default }); } } /> { pagination && ( <> { setAttributes({ paginationPageLimit: value }); } } onClickReset={ () => { setAttributes({ paginationPageLimit: attributesDefaults.paginationPageLimit.default }); } } /> { setAttributes({ imageRatio: value }); } } onClickReset={ () => { setAttributes({ imageRatio: attributesDefaults.imageRatio.default }); } } /> { setAttributes({ imagePosition: value }); } } onClickReset={ () => { setAttributes({ imagePosition: attributesDefaults.imagePosition.default }); } } /> ) } onTogglePanelBodyHandler( 'content' ) } > { postType === 'product' && ( { setAttributes({ displaySaleBadge: value }); } } onClickReset={ () => { setAttributes({ displaySaleBadge: attributesDefaults.displaySaleBadge.default }); } } /> ) } { setAttributes({ displayTitle: value }); } } onClickReset={ () => { setAttributes({ displayTitle: attributesDefaults.displayTitle.default }); } } /> { displayTitle && (