diff --git a/src/components/design-library-list/favorite-button.js b/src/components/design-library-list/favorite-button.js deleted file mode 100644 index efff646ff1..0000000000 --- a/src/components/design-library-list/favorite-button.js +++ /dev/null @@ -1,53 +0,0 @@ -/** - * Internal dependencies - */ -import SVGHeart from './images/heart.svg' -import SVGHeartFill from './images/heart-fill.svg' - -/** - * External dependencies - */ -import classnames from 'classnames' - -/** - * WordPress dependencies - */ -import { useState } from '@wordpress/element' - -const FavoriteButton = props => { - const [ isFavorite, setIsFavorite ] = useState( props.isFavorite ) - // const [ isBusy, setIsBusy ] = useState( true ) - - const mainClasses = classnames( [ - 'ugb-design-library-item__favorite', - ], { - 'ugb--is-favorite': isFavorite, - // 'ugb--is-busy': isBusy, - } ) - - return ( - - ) -} - -FavoriteButton.defaultProps = { - isFavorite: false, - // onClick: () => new Promise( resolve => setTimeout( resolve, 2000 ) ), - onClick: () => {}, -} - -export default FavoriteButton - diff --git a/src/components/design-library-list/images/heart-fill.svg b/src/components/design-library-list/images/heart-fill.svg deleted file mode 100644 index f3b8e84990..0000000000 --- a/src/components/design-library-list/images/heart-fill.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/src/components/design-library-list/images/heart.svg b/src/components/design-library-list/images/heart.svg deleted file mode 100644 index c2f605a080..0000000000 --- a/src/components/design-library-list/images/heart.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - diff --git a/src/components/index.js b/src/components/index.js index 3f33e1ae84..04d009af78 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -20,7 +20,6 @@ export { default as SortControl } from './sort-control' export { default as PanelAdvancedSettings } from './panel-advanced-settings' export { default as PanelDesignLibrary } from './panel-design-library' export { default as InspectorPanelControls } from './panel-tabs/inspector-panel-controls' -export { default as DesignLibraryList } from './design-library-list' export { default as PanelTabs } from './panel-tabs' export { default as Button } from './button' export { default as DesignPanelBody } from './design-panel-body' diff --git a/src/components/modal-design-library/index.js b/src/components/modal-design-library/index.js index e70740123b..9f4663928f 100644 --- a/src/components/modal-design-library/index.js +++ b/src/components/modal-design-library/index.js @@ -1,13 +1,10 @@ -/** - * Internal dependencies - */ -import { ModalDesignLibrary } from './modal' - /** * WordPress dependencies */ import { applyFilters } from '@wordpress/hooks' -import { useMemo, useCallback } from '@wordpress/element' +import { + useMemo, useCallback, Suspense, lazy, +} from '@wordpress/element' import { useLocalStorage } from '~stackable/util' export const Switcher = props => { @@ -21,19 +18,25 @@ export const Switcher = props => { // disabled, always default to the first version const apiVersion = versions.includes( _apiVersion ) ? _apiVersion : versions[ 0 ] + // Lazy-load the ModalDesignLibrary to reduce initial bundle size + // Note: We import the named export and set it as default for React.lazy + const LazyModalDesignLibrary = lazy( () => import( /* webpackChunkName: "design-library" */ '~stackable/lazy-components/design-library' ) ) + const ModalComponent = useMemo( () => { - return applyFilters( 'stackable.design-library.modal-component', ModalDesignLibrary, apiVersion ) + return applyFilters( 'stackable.design-library.modal-component', LazyModalDesignLibrary, apiVersion ) }, [ apiVersion ] ) const onChangeApiVersion = useCallback( v => setApiVersion( v ), [] ) return ( - 1 } - apiVersion={ apiVersion } - onChangeApiVersion={ onChangeApiVersion } - { ...props } - /> + + 1 } + apiVersion={ apiVersion } + onChangeApiVersion={ onChangeApiVersion } + { ...props } + /> + ) } diff --git a/src/design-library/index.js b/src/design-library/index.js index 851a410735..72c87d36cb 100644 --- a/src/design-library/index.js +++ b/src/design-library/index.js @@ -29,13 +29,13 @@ export const fetchDesignLibrary = async ( forceReset = false, version = '', type designLibrary[ type ] = designsPerType if ( type === 'patterns' ) { - designs = designsPerType[ LATEST_API_VERSION ] + designs = designsPerType[ LATEST_API_VERSION ] ?? {} } else { - pages = designsPerType[ LATEST_API_VERSION ] + pages = designsPerType[ LATEST_API_VERSION ] ?? {} } } - return designLibrary[ type ][ version || LATEST_API_VERSION ] + return designLibrary[ type ]?.[ version || LATEST_API_VERSION ] ?? designLibrary[ type ] } export const fetchDesign = async designId => { @@ -63,6 +63,13 @@ export const getDesigns = async ( { } ) => { const designLibrary = await fetchDesignLibrary( reset, LATEST_API_VERSION, type ) + if ( designLibrary.wp_remote_get_error || designLibrary.content_error ) { + const error = designLibrary.wp_remote_get_error ?? designLibrary.content_error + // eslint-disable-next-line no-console + console.error( 'Stackable: ', error ) + return { error } + } + // pre-fetch patterns if ( type === 'pages' ) { await fetchDesignLibrary() diff --git a/src/components/modal-design-library/block-list.js b/src/lazy-components/design-library/block-list.js similarity index 100% rename from src/components/modal-design-library/block-list.js rename to src/lazy-components/design-library/block-list.js diff --git a/src/lazy-components/design-library/context.js b/src/lazy-components/design-library/context.js new file mode 100644 index 0000000000..af48e24d3b --- /dev/null +++ b/src/lazy-components/design-library/context.js @@ -0,0 +1,7 @@ +import { createContext, useContext } from '@wordpress/element' + +export const DesignLibraryContext = createContext( null ) + +export const useDesignLibraryContext = () => { + return useContext( DesignLibraryContext ) +} diff --git a/src/components/design-library-list/default.json b/src/lazy-components/design-library/design-library-list/default.json similarity index 100% rename from src/components/design-library-list/default.json rename to src/lazy-components/design-library/design-library-list/default.json diff --git a/src/components/design-library-list/design-library-list-item.js b/src/lazy-components/design-library/design-library-list/design-library-list-item.js similarity index 97% rename from src/components/design-library-list/design-library-list-item.js rename to src/lazy-components/design-library/design-library-list/design-library-list-item.js index 89e8a010b9..d4983380e8 100644 --- a/src/components/design-library-list/design-library-list-item.js +++ b/src/lazy-components/design-library/design-library-list/design-library-list-item.js @@ -1,8 +1,6 @@ /** * Internal dependencies. */ -import ProControl from '../pro-control' -import Button from '../button' import { DesignPreview } from './design-preview' import { useShadowRoot } from './use-shadow-root' import { usePreviewRenderer } from './use-preview-renderer' @@ -13,7 +11,9 @@ import { useAutoScroll } from './use-auto-scroll' */ import { isPro, i18n } from 'stackable' import classnames from 'classnames' -import { Tooltip } from '~stackable/components' +import { + Tooltip, Button, ProControl, +} from '~stackable/components' /** * WordPress dependencies. diff --git a/src/components/design-library-list/design-preview.js b/src/lazy-components/design-library/design-library-list/design-preview.js similarity index 100% rename from src/components/design-library-list/design-preview.js rename to src/lazy-components/design-library/design-library-list/design-preview.js diff --git a/src/components/design-library-list/editor.scss b/src/lazy-components/design-library/design-library-list/editor.scss similarity index 100% rename from src/components/design-library-list/editor.scss rename to src/lazy-components/design-library/design-library-list/editor.scss diff --git a/src/components/design-library-list/index.js b/src/lazy-components/design-library/design-library-list/index.js similarity index 93% rename from src/components/design-library-list/index.js rename to src/lazy-components/design-library/design-library-list/index.js index 4e0b2ac579..9a9b79a3f1 100644 --- a/src/components/design-library-list/index.js +++ b/src/lazy-components/design-library/design-library-list/index.js @@ -2,11 +2,13 @@ * Internal dependencies */ import DesignLibraryListItem from './design-library-list-item' +import { useDesignLibraryContext } from '../context' /** * External dependencies */ import { i18n } from 'stackable' +import { usePresetControls } from '~stackable/hooks' import classnames from 'classnames' /** @@ -17,14 +19,13 @@ import { __ } from '@wordpress/i18n' import { useState, useEffect, useRef, memo, useMemo, } from '@wordpress/element' -import { usePresetControls } from '~stackable/hooks' -import { useDesignLibraryContext } from '../modal-design-library/modal' const DesignLibraryList = memo( props => { const { className = '', designs, isBusy, + errors, } = props const containerRef = useRef( null ) @@ -57,6 +58,12 @@ const DesignLibraryList = memo( props => { { ! ( designs || [] ).length &&

{ __( 'No designs found', i18n ) }

} + { typeof errors === 'object' && errors && Object.keys( errors ).length && +

+ { __( 'An error has occurred:', i18n ) } +
+ { Object.values( errors ).join( '; ' ) } +

} } diff --git a/src/components/design-library-list/use-auto-scroll.js b/src/lazy-components/design-library/design-library-list/use-auto-scroll.js similarity index 100% rename from src/components/design-library-list/use-auto-scroll.js rename to src/lazy-components/design-library/design-library-list/use-auto-scroll.js diff --git a/src/components/design-library-list/use-preview-renderer.js b/src/lazy-components/design-library/design-library-list/use-preview-renderer.js similarity index 99% rename from src/components/design-library-list/use-preview-renderer.js rename to src/lazy-components/design-library/design-library-list/use-preview-renderer.js index 83578b8ede..737ad6c805 100644 --- a/src/components/design-library-list/use-preview-renderer.js +++ b/src/lazy-components/design-library/design-library-list/use-preview-renderer.js @@ -3,7 +3,7 @@ * Internal dependencies. */ import DEFAULT from './default.json' -import mapsGraphic from './images/maps.webp' +import mapsGraphic from '../images/maps.webp' import { addBackgroundScheme, addContainerScheme, addPlaceholderForPostsBlock, cleanParse, @@ -11,7 +11,7 @@ import { replacePlaceholders, replaceImages, getCategorySlug, -} from './util' +} from '../util' /** * External dependencies. diff --git a/src/components/design-library-list/use-shadow-root.js b/src/lazy-components/design-library/design-library-list/use-shadow-root.js similarity index 98% rename from src/components/design-library-list/use-shadow-root.js rename to src/lazy-components/design-library/design-library-list/use-shadow-root.js index 02db2f9a11..f27af95543 100644 --- a/src/components/design-library-list/use-shadow-root.js +++ b/src/lazy-components/design-library/design-library-list/use-shadow-root.js @@ -1,5 +1,5 @@ import { wpGlobalStylesInlineCss } from 'stackable' -import { getAdditionalStylesForPreview } from './util' +import { getAdditionalStylesForPreview } from '../util' import { useEffect, useRef, useState, diff --git a/src/components/modal-design-library/editor.scss b/src/lazy-components/design-library/editor.scss similarity index 100% rename from src/components/modal-design-library/editor.scss rename to src/lazy-components/design-library/editor.scss diff --git a/src/components/modal-design-library/header-actions.js b/src/lazy-components/design-library/header-actions.js similarity index 96% rename from src/components/modal-design-library/header-actions.js rename to src/lazy-components/design-library/header-actions.js index 1ba1798c8d..3e87fb3f31 100644 --- a/src/components/modal-design-library/header-actions.js +++ b/src/lazy-components/design-library/header-actions.js @@ -1,12 +1,10 @@ - -import AdvancedToolbarControl from '../advanced-toolbar-control' -import Button from '../button' /** * External deprendencies */ import { i18n, isPro, devMode, } from 'stackable' +import { AdvancedToolbarControl, Button } from '~stackable/components' /** * WordPress deprendencies diff --git a/src/components/modal-design-library/images/help.svg b/src/lazy-components/design-library/images/help.svg similarity index 100% rename from src/components/modal-design-library/images/help.svg rename to src/lazy-components/design-library/images/help.svg diff --git a/src/components/design-library-list/images/maps.webp b/src/lazy-components/design-library/images/maps.webp similarity index 100% rename from src/components/design-library-list/images/maps.webp rename to src/lazy-components/design-library/images/maps.webp diff --git a/src/components/modal-design-library/images/view-few.svg b/src/lazy-components/design-library/images/view-few.svg similarity index 100% rename from src/components/modal-design-library/images/view-few.svg rename to src/lazy-components/design-library/images/view-few.svg diff --git a/src/components/modal-design-library/images/view-many.svg b/src/lazy-components/design-library/images/view-many.svg similarity index 100% rename from src/components/modal-design-library/images/view-many.svg rename to src/lazy-components/design-library/images/view-many.svg diff --git a/src/components/modal-design-library/images/view-single.svg b/src/lazy-components/design-library/images/view-single.svg similarity index 100% rename from src/components/modal-design-library/images/view-single.svg rename to src/lazy-components/design-library/images/view-single.svg diff --git a/src/components/modal-design-library/modal.js b/src/lazy-components/design-library/index.js similarity index 96% rename from src/components/modal-design-library/modal.js rename to src/lazy-components/design-library/index.js index 1531c1214f..4a53a20b8f 100644 --- a/src/components/modal-design-library/modal.js +++ b/src/lazy-components/design-library/index.js @@ -3,10 +3,9 @@ */ import HelpSVG from './images/help.svg' import BlockList from './block-list' -import Button from '../button' -import DesignLibraryList from '~stackable/components/design-library-list' -import { GuidedModalTour } from '~stackable/components' -import { getDesigns, filterDesigns } from '~stackable/design-library' +import { HeaderActions, PLAN_OPTIONS } from './header-actions' +import DesignLibraryList from './design-library-list' +import { DesignLibraryContext } from './context' /** * External deprendencies @@ -14,6 +13,11 @@ import { getDesigns, filterDesigns } from '~stackable/design-library' import { i18n } from 'stackable' import classnames from 'classnames' import { useLocalStorage } from '~stackable/util' +import { useBlockColorSchemes } from '~stackable/hooks' +import { + GuidedModalTour, Button, ColorSchemePreview, ColorSchemesHelp, Tooltip, +} from '~stackable/components' +import { getDesigns, filterDesigns } from '~stackable/design-library' /** * WordPress deprendencies @@ -26,15 +30,10 @@ import { ToggleControl, } from '@wordpress/components' import { - useEffect, useState, createContext, useContext, useCallback, + useEffect, useState, useCallback, useMemo, } from '@wordpress/element' import { sprintf, __ } from '@wordpress/i18n' -import { useBlockColorSchemes } from '~stackable/hooks' -import ColorSchemePreview from '../color-scheme-preview' -import { ColorSchemesHelp } from '../color-schemes-help' -import Tooltip from '../tooltip' -import { HeaderActions, PLAN_OPTIONS } from './header-actions' const popoverProps = { className: 'ugb-design-library__color-scheme-popover', @@ -46,13 +45,7 @@ const popoverProps = { // This is to make sure that the design library shows "all" at the start. localStorage?.setItem( 'stk__design_library__block-list__selected', '' ) -export const DesignLibraryContext = createContext( null ) - -export const useDesignLibraryContext = () => { - return useContext( DesignLibraryContext ) -} - -export const ModalDesignLibrary = props => { +const ModalDesignLibrary = props => { const { backgroundModeColorScheme, containerModeColorScheme, colorSchemesCollection, } = useBlockColorSchemes() @@ -73,6 +66,8 @@ export const ModalDesignLibrary = props => { // The display designs are used to list the available designs the user can choose. const [ displayDesigns, setDisplayDesigns ] = useState( [] ) + const [ errors, setErrors ] = useState( null ) + const [ enableBackground, setEnableBackground ] = useState( false ) const [ selectedContainerScheme, setSelectedContainerScheme ] = useState( '' ) const [ selectedBackgroundScheme, setSelectedBackgroundScheme ] = useState( '' ) @@ -92,12 +87,20 @@ export const ModalDesignLibrary = props => { useEffect( () => { setIsBusy( true ) setSidebarDesigns( [] ) + setErrors( null ) getDesigns( { reset: doReset, type: selectedTab, } ).then( designs => { - setSidebarDesigns( designs ) + let _designs = designs + + if ( typeof designs === 'object' && designs.error ) { + _designs = [] + setErrors( designs.error ) + } + + setSidebarDesigns( _designs ) setSelectedCategory( '' ) } ).finally( () => { setDoReset( false ) @@ -390,6 +393,7 @@ export const ModalDesignLibrary = props => { className={ `stk-design-library__item-${ selectedTab }` } isBusy={ isBusy } designs={ displayDesigns } + errors={ errors } /> { selectedTab === 'patterns' &&