+ { __( 'These blocks can be enabled in the Stackable settings page. Do you want to keep the disabled blocks or substitute them with other Stackable or core blocks?', i18n ) }
+
+
+
+
+
+
+
+
+
+ }
)
}
diff --git a/src/components/color-scheme-preview/editor.scss b/src/components/color-scheme-preview/editor.scss
index 3960c92a55..6f7347181d 100644
--- a/src/components/color-scheme-preview/editor.scss
+++ b/src/components/color-scheme-preview/editor.scss
@@ -76,3 +76,15 @@
.stk-scheme--is-disabled {
opacity: 0.1;
}
+
+.stk-scheme--is-collapsed {
+ flex-direction: row;
+ gap: 4px;
+ align-items: center;
+ max-height: 30px;
+
+ .stk-global-color-scheme__preview__typography {
+ margin-bottom: 0;
+ font-size: 12px;
+ }
+}
diff --git a/src/components/color-scheme-preview/index.js b/src/components/color-scheme-preview/index.js
index 2389b92799..3dcff64a4b 100644
--- a/src/components/color-scheme-preview/index.js
+++ b/src/components/color-scheme-preview/index.js
@@ -14,13 +14,18 @@ export const DEFAULT_COLOR_SCHEME_COLORS = {
const NOOP = () => {}
const ColorSchemePreview = ( {
- colors, withWrapper = false, onClick = NOOP, isDisabled = false,
+ colors,
+ withWrapper = false,
+ onClick = NOOP,
+ isDisabled = false,
+ isCollapsed = false,
} ) => {
const TagName = onClick === NOOP ? 'div' : Button
const additionalProps = onClick === NOOP ? {} : { onClick }
const classNames = classnames( 'stk-global-color-scheme__preview__background', {
'stk-scheme--is-disabled': isDisabled,
+ 'stk-scheme--is-collapsed': isCollapsed,
} )
return (
diff --git a/src/components/color-schemes-help/index.js b/src/components/color-schemes-help/index.js
index caeef807a1..d390c8222b 100644
--- a/src/components/color-schemes-help/index.js
+++ b/src/components/color-schemes-help/index.js
@@ -4,8 +4,15 @@ import { Link } from '~stackable/components'
import { __ } from '@wordpress/i18n'
import { dispatch } from '@wordpress/data'
-export const ColorSchemesHelp = () => {
+export const ColorSchemesHelp = props => {
+ const {
+ customText, callback, renderComponent,
+ } = props
const onClick = () => {
+ if ( callback ) {
+ callback()
+ }
+
// Open the global settings sidebar.
dispatch( 'core/edit-post' )?.openGeneralSidebar( 'stackable-global-settings/sidebar' ) // For Block Editor
dispatch( 'core/edit-site' )?.openGeneralSidebar( 'stackable-global-settings/sidebar' ) // For Site Editor
@@ -30,8 +37,13 @@ export const ColorSchemesHelp = () => {
}, 10 )
}
+ if ( renderComponent ) {
+ return renderComponent( onClick )
+ }
+
return <>
- { __( 'Change the color scheme.', i18n ) }
+ { customText ? customText
+ : { __( 'Change the color scheme.', i18n ) } }
{ __( 'Manage your color schemes.', i18n ) }
diff --git a/src/components/design-library-list/default.json b/src/components/design-library-list/default.json
new file mode 100644
index 0000000000..14d092695c
--- /dev/null
+++ b/src/components/design-library-list/default.json
@@ -0,0 +1,30 @@
+{
+ "FAQ": {
+ "heading_placeholder": "Frequently Asked Questions (FAQs)",
+ "description_placeholder": "Find answers to the most common questions about [Your Product/Service]. If you can't find what you're looking for here, please contact us.",
+
+ "question-1_placeholder": "What features does your service offer?",
+ "answer-1_placeholder": "Our service offers a comprehensive set of features designed to help you manage your tasks. Key features include Feature A, Feature B, and Feature C. You can find a full list and details on our Features Page.",
+
+ "question-2_placeholder": "Is our Service integrated with other products?",
+ "answer-2_placeholder": "Yes, our Service offers integrations with various popular products and services to streamline your workflow. We currently integrate with Product A, Product B, and Product C. You can find more information about our current integrations and how to set them up on our [Integrations Page Link]. We are continuously working on adding more integrations.",
+
+ "question-3_placeholder": "What are the pricing options involved?",
+ "answer-3_placeholder": "We offer several pricing options to suit different needs. You can view a detailed breakdown of our plans and features on our Pricing Page. We have a free tier, monthly subscriptions, and annual plans.",
+
+ "question-4_placeholder": "What payment methods do you accept?",
+ "answer-4_placeholder": "We accept various convenient payment methods, including major credit cards (Visa, MasterCard, American Express), and in some cases, bank transfers. You can select your preferred payment method during the checkout or subscription process.",
+
+ "question-5_placeholder": "What is your cancellation/refund policy?",
+ "answer-5_placeholder": "Our cancellation policy allows you to cancel your subscription at any time through your account settings. Regarding refunds, our policy is we offer a 30-day money-back guarantee. Please refer to our Terms of Service Page for complete details.",
+
+ "question-6_placeholder": "What are your hours of operation?",
+ "answer-6_placeholder": "Our standard hours of operation are Monday to Friday, 9:00 AM to 5:00 PM in Pacific Standard Time (PST).",
+
+ "question-7_placeholder": "How can I contact customer support?",
+ "answer-7_placeholder": "You can contact our customer support team through several channels: Submit a request via our Support Contact Form. Email us directly at support@email.com. Use our live chat feature available on our website during business hours. Our support hours are Monday-Friday, 9 AM - 5 PM Pacific Standard Time (PST).",
+
+ "question-8_placeholder": "How can I provide feedback?",
+ "answer-8_placeholder": "We highly value your feedback as it helps us improve. You can provide feedback through several methods: Use the feedback form on our website, or email your suggestions or comments to feedback@email.com. You can also participate in surveys. We review all feedback submitted."
+ }
+}
\ No newline at end of file
diff --git a/src/components/design-library-list/design-library-list-item.js b/src/components/design-library-list/design-library-list-item.js
index e079b9ce86..7a351bcb83 100644
--- a/src/components/design-library-list/design-library-list-item.js
+++ b/src/components/design-library-list/design-library-list-item.js
@@ -2,71 +2,255 @@
* Internal dependencies.
*/
import ProControl from '../pro-control'
+import DEFAULT from './default.json'
+import {
+ addBackgroundScheme, addContainerScheme, cleanParse, parseDisabledBlocks,
+} from './util'
/**
* External dependencies.
*/
-import { getDesign } from '~stackable/design-library'
-import { isPro, i18n } from 'stackable'
+import { createRoot } from '~stackable/util'
+import {
+ isPro, i18n, wpGlobalStylesInlineCss,
+} from 'stackable'
import classnames from 'classnames'
+import { Tooltip } from '~stackable/components'
/**
* WordPress dependencies.
*/
-import { useState } from '@wordpress/element'
-import { Spinner } from '@wordpress/components'
+import {
+ forwardRef, useEffect, useRef, useState,
+} from '@wordpress/element'
+import { useSelect } from '@wordpress/data'
+import { Dashicon, Spinner } from '@wordpress/components'
import { __ } from '@wordpress/i18n'
+import { serialize } from '@wordpress/blocks'
+import { applyFilters } from '@wordpress/hooks'
+import { cloneDeep } from 'lodash'
-const DesignLibraryListItem = props => {
+const DEFAULT_CONTENT = { ...DEFAULT }
+
+const DesignLibraryListItem = forwardRef( ( props, ref ) => {
const {
designId,
- image,
label,
onClick,
+ template = '',
+ category = '',
plan,
- isPro,
- apiVersion,
- isMultiSelectMode = false,
selectedNum = false,
+ isBusy,
+ containerScheme,
+ backgroundScheme,
+ enableBackground,
+ forceUpdate,
+ cardHeight,
+ setCardHeight,
+ previewSize,
+ setPreviewSize,
} = props
- const [ isBusy, setIsBusy ] = useState( false )
- // const [ isFavorite, setIsFavorite ] = useState( props.isFavorite )
+ const [ parsedBlocks, setParsedBlocks ] = useState( null )
+ const [ content, setContent ] = useState( '' )
+
+ const hostRef = useRef( null )
+ const previewRef = useRef( null )
+ const prevEnableBackgroundRef = useRef( null )
+ const blocksForSubstitutionRef = useRef( false )
+ const hasBackgroundTargetRef = useRef( false )
+
+ const { getEditorDom } = useSelect( 'stackable/editor-dom' )
+ const editorDom = getEditorDom()
const mainClasses = classnames( [
'ugb-design-library-item',
+ 'ugb-design-library-item--toggle',
], {
'ugb--is-busy': isBusy,
[ `ugb--is-${ plan }` ]: ! isPro && plan !== 'free',
- 'ugb-design-library-item--toggle': isMultiSelectMode,
- 'ugb--is-toggled': isMultiSelectMode && selectedNum,
+ 'ugb--is-toggled': selectedNum,
} )
+ const STYLE_IDS = applyFilters( 'stackable.global-styles.ids', [
+ 'ugb-dep-native-global-style-css-nodep-inline-css',
+ 'ugb-style-css-css',
+ 'ugb-style-css-responsive-css',
+ 'ugb-block-style-inheritance-nodep-inline-css',
+ 'ugb-style-css-premium-css',
+ ] )
+
+ const adjustScale = () => {
+ if ( ref.current && hostRef.current?.shadowRoot && ! selectedNum ) {
+ const newPreviewSize = { ...previewSize }
+ const newCardHeight = { ...cardHeight }
+ const cardRect = ref.current.getBoundingClientRect()
+
+ const cardWidth = cardRect.width // Get width of the card
+ const scaleFactor = cardWidth > 0 ? cardWidth / 1200 : 1 // Divide by 1200, which is the width of preview in the shadow DOM
+ newPreviewSize.scale = scaleFactor
+
+ const shadowBody = hostRef.current.shadowRoot.querySelector( 'body' )
+ if ( shadowBody ) {
+ const _height = parseFloat( shadowBody.offsetHeight ) * scaleFactor // Also adjust the height
+
+ const heightKey = enableBackground ? 'heightBackground' : 'heightNoBackground'
+ newPreviewSize[ heightKey ] = _height
+ setPreviewSize( newPreviewSize )
+ }
+
+ const CardHeightKey = enableBackground ? 'background' : 'noBackground'
+ newCardHeight[ CardHeightKey ] = cardRect.height
+ setTimeout( () => setCardHeight( newCardHeight ), 500 )
+ }
+ }
+
+ const renderPreview = () => {
+ let blocks = cloneDeep( content )
+
+ // No need to add the color scheme attribute if the selected scheme is the default
+ if ( containerScheme !== '' ) {
+ blocks = addContainerScheme( blocks, containerScheme )
+ }
+
+ // Only add a background scheme if it is enabled
+ if ( enableBackground ) {
+ blocks = addBackgroundScheme( blocks, enableBackground, backgroundScheme )
+ }
+
+ setParsedBlocks( blocks )
+
+ const preview = serialize( blocks )
+ const cleanedBlock = preview.replace( //g, '' ) // removes comment
+
+ previewRef.current.render( )
+ }
+
+ // Replace the placeholders with the default content
+ useEffect( () => {
+ const defaultValues = DEFAULT_CONTENT[ category ]
+ let _content = template
+ if ( defaultValues ) {
+ Object.keys( defaultValues ).forEach( key => {
+ _content = _content.replace( key, defaultValues[ key ] )
+ } )
+ }
+
+ if ( _content.includes( 'stk-design-library__bg-target="true"' ) ) {
+ hasBackgroundTargetRef.current = true
+ }
+
+ // We need to parse the content because this is what we use to insert the blocks in the Editor
+ const _block = cleanParse( _content )[ 0 ]
+ const { block, blocksForSubstitution } = parseDisabledBlocks( _block )
+ blocksForSubstitutionRef.current = blocksForSubstitution
+
+ setContent( block )
+ }, [ template ] )
+
+ useEffect( () => {
+ if ( ! content ||
+ ! hostRef.current ||
+ selectedNum // Do not re-render if the design has been selected
+ ) {
+ return
+ }
+
+ const shadowRoot = hostRef.current.shadowRoot || hostRef.current.attachShadow( { mode: 'open' } )
+
+ // Initialize the shadow DOM for the first time
+ if ( ! previewRef.current ) {
+ // Get all styles needed and make a copy for the shadow DOM
+ const styleNodes = STYLE_IDS.map( id => {
+ let style = null
+ let node = document.getElementById( id )
+ if ( ! node && editorDom ) {
+ node = editorDom.querySelector( `#${ id }` )
+ }
+
+ if ( node ) {
+ style = node.cloneNode( true )
+ }
+
+ return style
+ } ).filter( node => node !== null )
+
+ // Add global and theme styles
+ const globalStylesNode = document.createElement( 'style' )
+ globalStylesNode.setAttribute( 'id', 'global-styles-inline-css' )
+ globalStylesNode.innerHTML = wpGlobalStylesInlineCss
+ styleNodes.push( globalStylesNode )
+
+ const hostStyles = document.createElement( 'style' )
+ hostStyles.setAttribute( 'id', 'stk-design-library-styles' )
+ hostStyles.innerHTML = ! hasBackgroundTargetRef.current
+ ? `body > .stk-block-columns { padding: 75px; } body > .stk-block-background:not(.stk--no-padding) { padding: calc(75px + var(--stk-block-background-padding)); }`
+ : `[stk-design-library__bg-target="true"] { padding: 25px; } [stk-design-library__bg-target="true"].stk-block-background:not(.stk--no-padding) { padding: calc(25px + var(--stk-block-background-padding)); }`
+ styleNodes.push( hostStyles )
+
+ styleNodes.forEach( node => {
+ if ( node.textContent ) {
+ // we use :host in the shadow DOM to target the root
+ node.textContent = node.textContent.replace( /:root/g, ':host' )
+ }
+ shadowRoot.appendChild( node )
+ } )
+
+ previewRef.current = createRoot( shadowRoot )
+ }
+
+ renderPreview()
+
+ prevEnableBackgroundRef.current = enableBackground
+ }, [ content, containerScheme, backgroundScheme, enableBackground ] )
+
+ useEffect( () => {
+ setTimeout( adjustScale, 50 )
+ }, [ forceUpdate ] )
+
+ useEffect( () => {
+ if ( selectedNum === 0 && content ) {
+ renderPreview()
+ setTimeout( adjustScale, 50 )
+ }
+ }, [ selectedNum ] )
+
+ const getPreviewHeight = () => {
+ return selectedNum ? previewSize.heightSelected : ( enableBackground ? previewSize.heightBackground : previewSize.heightNoBackground )
+ }
+
return (
-