@gem-sdk/pages 1.12.0-next.51 → 1.12.0-next.62

package/dist/cjs/components/AddSectionImageToLayout.js

@@ -27,9 +27,49 @@ const ACTIONS_DATA = [
     }
 ];
 const FOOTER_HEIGHT = 48;
+const defaultMargin = {
+    desktop: '68px',
+    tablet: '16px',
+    mobile: '16px'
+};
 const AddSectionImageToLayout = ()=>{
     const [link, setLink] = react.useState('');
     const [isInput, setIsInput] = react.useState(false);
+    const [margin, setMargin] = react.useState(defaultMargin);
+    react.useEffect(()=>{
+        const $iframe = parent.document.querySelector('.iframe');
+        if (!$iframe) return;
+        const $storefront = document.querySelector('#storefront');
+        if (!$storefront) return;
+        const $iframeDoc = $iframe.contentDocument || $iframe.contentWindow.document;
+        const $section = $iframeDoc.getElementsByTagName('section');
+        let prevWidth = 0;
+        const observer = new ResizeObserver((entries)=>{
+            const currentWidth = entries[0]?.borderBoxSize?.[0]?.inlineSize;
+            const shouldUpdateMargin = !!$section.length && typeof currentWidth === 'number' && currentWidth !== prevWidth;
+            if (shouldUpdateMargin) {
+                prevWidth = currentWidth;
+                const $baseSection = $section[0];
+                const padding = getComputedStyle($baseSection).getPropertyValue('padding-left');
+                const margin = getComputedStyle($baseSection).getPropertyValue('margin-left');
+                const newMargin = parseInt(margin, 10) + parseInt(padding, 10);
+                const baseMargin = 68;
+                if (newMargin > baseMargin) {
+                    setMargin({
+                        desktop: `${newMargin}px`,
+                        tablet: `${newMargin}px`,
+                        mobile: `${newMargin}px`
+                    });
+                } else {
+                    setMargin(defaultMargin);
+                }
+            }
+        });
+        observer.observe($storefront);
+        return ()=>{
+            observer.unobserve($storefront);
+        };
+    }, []);
     const onClick = (index)=>{
         if (index === 0) {
             setIsInput(true);
@@ -52,9 +92,11 @@ const AddSectionImageToLayout = ()=>{
     }
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         id: "gps-add-section-image-to-layout-of-bottom",
-        className: `gps-base-font-family mobile:mx-[16px] mobile:w-[calc(100%_-_32px)] relative mx-[44px] mb-[24px] mt-[40px]  w-[calc(100%_-_88px)] justify-center rounded-[3px] border border-[#EEEEEE] py-[24px] ${totalSection ? 'flex' : 'hidden'}`,
+        className: `gps-base-font-family relative mx-[44px] mb-[24px] mt-[40px] justify-center rounded-[3px] border border-[#EEEEEE] py-[24px] ${totalSection ? 'flex' : 'hidden'}`,
         style: {
-            marginBottom: `${offset + 24}px`
+            marginBottom: `${offset + 24}px`,
+            ...core.makeStyleResponsive('ml', margin),
+            ...core.makeStyleResponsive('mr', margin)
         },
         children: [
             /*#__PURE__*/ jsxRuntime.jsx("span", {
@@ -76,7 +118,7 @@ const AddSectionImageToLayout = ()=>{
                             className: "flex items-center ",
                             children: [
                                 /*#__PURE__*/ jsxRuntime.jsx("span", {
-                                    className: "mr-[3px] text-[12px] font-normal text-[#676767]",
+                                    className: "mr-[3px] text-[12px] font-normal text-[#676767] text-center",
                                     children: action.content
                                 }),
                                 action.hasAILogo && /*#__PURE__*/ jsxRuntime.jsxs("svg", {

package/dist/cjs/components/PagesSuggestion.js

@@ -6,9 +6,7 @@ var react = require('react');
 const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
     const inputRef = react.useRef(null);
     const pages = [
-        'https://gempages-demo/1',
-        'https://www.apple.com/',
-        'https://www.zara.com/ca/'
+        'https://seal-commerce-asia.myshopify.com/pages/virtual-reality-heads'
     ];
     react.useEffect(()=>{
         if (isOpen) {
@@ -103,7 +101,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
                         /*#__PURE__*/ jsxRuntime.jsx("div", {
                             className: "mt-[-1px] max-h-[500px] bg-white p-2",
                             children: pages.map((page)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                    className: "gps-suggestion-item mb-2 flex h-[56px] cursor-pointer items-center justify-between rounded-[3px] px-[16px] py-[12px] last:mb-0 hover:bg-[#F4F4F4]",
+                                    className: " gps-suggestion-item mb-2 flex h-[56px] cursor-pointer items-center justify-between rounded-[3px] px-[16px] py-[12px] last:mb-0 hover:bg-[#F4F4F4]",
                                     "data-url": page,
                                     "aria-hidden": true,
                                     children: [
@@ -132,7 +130,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
                                                     ]
                                                 }),
                                                 /*#__PURE__*/ jsxRuntime.jsx("span", {
-                                                    className: "item-link ml-[24px] text-xs text-[#212121]",
+                                                    className: "item-link ml-[24px] whitespace-nowrap text-xs text-[#212121]",
                                                     children: page
                                                 })
                                             ]

package/dist/cjs/components/builder/Toolbox.js

@@ -9,9 +9,12 @@ var googleFonts = require('../../libs/google-fonts.js');
 var genCss = require('../../libs/helpers/gen-css.js');
 var getStorefrontApi = require('../../libs/get-storefront-api.js');
 var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
+var normalize = require('../../libs/helpers/normalize.js');
+var genFonts = require('../../libs/helpers/gen-fonts.js');
 
 const globalStyleId = 'global-style';
 const globalFontId = 'google-font-builder';
+const fontElementSettingClassName = 'google-font-element';
 const Toolbox = ()=>{
     const matchMutate = core.useMatchMutate();
     const provider = core.useShopStore((s)=>s.provider);
@@ -26,6 +29,7 @@ const Toolbox = ()=>{
     const changeSwatches = core.useShopStore((s)=>s.changeSwatches);
     const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
     const clearModal = core.useModalStore((s)=>s.clearModal);
+    const [fonts, setFonts] = react.useState([]);
     // Revalidate all query with key match query/
     const onRevalidateQuery = react.useCallback(()=>{
         matchMutate(/query\//, {
@@ -96,10 +100,24 @@ const Toolbox = ()=>{
         try {
             const detail = e.detail;
             if (detail.data) {
+                let dataBuilder = {};
                 if (detail.type === 'flat') {
                     initNormalizeState(detail.data);
+                    dataBuilder = detail.data;
                 } else {
                     initState(detail.data);
+                    dataBuilder = detail.data.reduceRight((prev, current)=>{
+                        const item = normalize.normalizeBuilderData(current);
+                        return {
+                            ...prev,
+                            ...item
+                        };
+                    }, {});
+                }
+                // Append link font to head
+                if (dataBuilder) {
+                    const fonts = genFonts.getFontsFromDataBuilder(dataBuilder);
+                    setFonts(fonts);
                 }
             }
         } catch  {
@@ -143,11 +161,38 @@ const Toolbox = ()=>{
                     data: detail.propValue,
                     group: detail.group
                 });
+                // Check link google font to <head>
+                if (detail.propValue?.custom) {
+                    const customFontFamily = detail.propValue?.custom?.fontFamily;
+                    const customFontWeight = detail.propValue?.custom?.fontWeight;
+                    if (customFontFamily && customFontWeight) {
+                        const isExist = fonts.find((item)=>item.family == customFontFamily && item.variants.includes(customFontWeight));
+                        if (!isExist) {
+                            const isFontFamily = fonts.find((item)=>item.family == customFontFamily);
+                            if (isFontFamily) {
+                                isFontFamily.variants.push(customFontWeight);
+                            } else {
+                                setFonts([
+                                    ...fonts,
+                                    {
+                                        family: customFontFamily,
+                                        variants: [
+                                            customFontWeight
+                                        ],
+                                        subsets: [],
+                                        type: 'google'
+                                    }
+                                ]);
+                            }
+                        }
+                    }
+                }
             }
         } catch  {
         //
         }
-    }, [
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         changeItemPropByKey
     ]);
     // Move entity
@@ -196,6 +241,32 @@ const Toolbox = ()=>{
     }, [
         changeLayoutSettings
     ]);
+    react.useEffect(()=>{
+        if (fonts?.length) {
+            fonts.forEach((font)=>{
+                const fontUrl = googleFonts.createFontUrl([
+                    font
+                ]);
+                if (fontUrl) {
+                    const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${encodeURI(font.family)}"]`);
+                    if (googleFont) {
+                        if (googleFont.getAttribute('href') !== fontUrl) {
+                            googleFont.setAttribute('href', fontUrl);
+                        }
+                    } else {
+                        const link = document.createElement('link');
+                        link.className = fontElementSettingClassName;
+                        link.dataset.font = encodeURI(font.family);
+                        link.href = fontUrl;
+                        link.rel = 'stylesheet';
+                        document.head.appendChild(link);
+                    }
+                }
+            });
+        }
+    }, [
+        fonts
+    ]);
     react.useEffect(()=>{
         window.addEventListener('update-shop-info', onChangeShopInfo);
         window.addEventListener('revalidate-query', onRevalidateQuery);

package/dist/cjs/index.js

@@ -6,7 +6,6 @@ var getHomePagePropsV2 = require('./libs/api/get-home-page-props-v2.js');
 var getPreviewProps = require('./libs/api/get-preview-props.js');
 var getBuilderProps = require('./libs/api/get-builder-props.js');
 var getProductProps = require('./libs/api/get-product-props.js');
-var getStaticPageProps = require('./libs/api/get-static-page-props.js');
 var getStaticPagePropsV2 = require('./libs/api/get-static-page-props-v2.js');
 var getStaticPagePropsPreview = require('./libs/api/get-static-page-props-preview.js');
 var fetcher = require('./libs/fetcher.js');
@@ -24,6 +23,7 @@ var _static = require('./pages/static.js');
 var builder = require('./pages/builder.js');
 var staticV2 = require('./pages/static-v2.js');
 var getStaticPaths = require('./libs/getStaticPaths.js');
+var genFonts = require('./libs/helpers/gen-fonts.js');
 var googleFonts = require('./libs/google-fonts.js');
 var getStorefrontApi = require('./libs/get-storefront-api.js');
 var ErrorBoundary = require('./components/ErrorBoundary.js');
@@ -42,7 +42,6 @@ exports.getHomePagePropsV2 = getHomePagePropsV2.getHomePagePropsV2;
 exports.getPreviewProps = getPreviewProps.getPreviewProps;
 exports.getBuilderProps = getBuilderProps.getBuilderProps;
 exports.getProductProps = getProductProps.getProductProps;
-exports.getStaticPageProps = getStaticPageProps.getStaticPageProps;
 exports.getStaticPagePropsV2 = getStaticPagePropsV2.getStaticPagePropsV2;
 exports.getStaticPagePropsPreview = getStaticPagePropsPreview.getStaticPagePropsPreview;
 exports.createFetcher = fetcher.createFetcher;
@@ -62,6 +61,7 @@ exports.StaticPage = _static.default;
 exports.BuilderPage = builder.BuilderPage;
 exports.StaticPageV2 = staticV2.StaticPageV2;
 exports.getStaticPaths = getStaticPaths.getStaticPaths;
+exports.getFontsFromDataBuilder = genFonts.getFontsFromDataBuilder;
 exports.getFontFromGlobalStyle = googleFonts.getFontFromGlobalStyle;
 exports.getFonts = googleFonts.getFonts;
 exports.getStorefrontApi = getStorefrontApi.getStorefrontApi;

package/dist/cjs/libs/api/get-static-page-props-v2.js

@@ -37,7 +37,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 throw new Error(`No data builder found for slug: /${slug}`);
             }
             const pageTemplate = normalize.parseBuilderTemplateV2(dataBuilder);
-            const [fontStyle, fallback] = await Promise.all([
+            const [elementFontStyle, fontStyle, fallback] = await Promise.all([
+                googleFonts.getFontStyleFromPageTemplate(pageTemplate),
                 googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
                 getFallback.getFallbackV2(fetcher, pageTemplate)
             ]);
@@ -117,6 +118,7 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
             return parseJson.serializableJson({
                 themeStyle: genCss.genCSS(dataBuilder?.pageStyle?.data, mobileOnly),
                 fontStyle,
+                elementFontStyle,
                 builderData: pageTemplate,
                 pageType,
                 moneyFormat: shopMeta?.shop.moneyFormat ?? null,

package/dist/cjs/libs/google-fonts.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var genFonts = require('./helpers/gen-fonts.js');
+
 const CHROME_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36';
 const IE_UA = 'Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko';
 async function getFontForUA(url, UA) {
@@ -66,7 +68,14 @@ const getFontFromGlobalStyle = (data, maxSize)=>{
         return '';
     }
 };
+async function getFontStyleFromPageTemplate(pageTemplate) {
+    const fontStyle = pageTemplate.map((sectionData)=>{
+        return getFonts(genFonts.getFontsFromDataBuilder(sectionData.data));
+    });
+    return await Promise.all(fontStyle);
+}
 
 exports.createFontUrl = createFontUrl;
 exports.getFontFromGlobalStyle = getFontFromGlobalStyle;
+exports.getFontStyleFromPageTemplate = getFontStyleFromPageTemplate;
 exports.getFonts = getFonts;

package/dist/cjs/libs/helpers/gen-fonts.js

@@ -0,0 +1,46 @@
+'use strict';
+
+const getFontsFromDataBuilder = (dataBuilder)=>{
+    const fonts = [];
+    for(const uid in dataBuilder){
+        if (Object.prototype.hasOwnProperty.call(dataBuilder, uid)) {
+            const data = dataBuilder[uid];
+            const styles = data.styles;
+            const settings = data.settings;
+            getFontFromGroupSetting(fonts, styles);
+            getFontFromGroupSetting(fonts, settings);
+        }
+    }
+    return fonts;
+};
+const getFontFromGroupSetting = (fonts, groupSetting)=>{
+    for(const attr in groupSetting){
+        if (Object.prototype.hasOwnProperty.call(groupSetting, attr)) {
+            const value = groupSetting[attr];
+            if (value) {
+                const customFontFamily = value.custom?.fontFamily;
+                const customFontWeight = value.custom?.fontWeight;
+                if (customFontFamily && customFontWeight) {
+                    const isExist = fonts.find((item)=>item.family == customFontFamily && item.variants.includes(customFontWeight));
+                    if (!isExist) {
+                        const isFontFamily = fonts.find((item)=>item.family == customFontFamily);
+                        if (isFontFamily) {
+                            isFontFamily.variants.push(customFontWeight);
+                        } else {
+                            fonts.push({
+                                family: customFontFamily,
+                                variants: [
+                                    customFontWeight
+                                ],
+                                subsets: [],
+                                type: 'google'
+                            });
+                        }
+                    }
+                }
+            }
+        }
+    }
+};
+
+exports.getFontsFromDataBuilder = getFontsFromDataBuilder;

package/dist/cjs/pages/static-v2.js

@@ -8,7 +8,7 @@ var router = require('next/router');
 var useTrackingView = require('../libs/hooks/use-tracking-view.js');
 var parseHtml = require('../libs/parse-html.js');
 
-const StaticPageV2 = ({ components , builderData , sectionData , seo , themeStyle , fontStyle , customCodeHeader , shopToken , pageHandle  })=>{
+const StaticPageV2 = ({ components , builderData , sectionData , seo , themeStyle , fontStyle , elementFontStyle , customCodeHeader , shopToken , pageHandle  })=>{
     const router$1 = router.useRouter();
     useTrackingView.useTrackingView(shopToken, pageHandle, router$1.isFallback);
     if (router$1.isFallback) {
@@ -51,7 +51,14 @@ const StaticPageV2 = ({ components , builderData , sectionData , seo , themeStyl
                         dangerouslySetInnerHTML: {
                             __html: fontStyle
                         }
-                    })
+                    }),
+                    elementFontStyle && elementFontStyle.map((fontStyle)=>/*#__PURE__*/ jsxRuntime.jsx("style", {
+                            "data-id": "google-element-fonts",
+                            type: "text/css",
+                            dangerouslySetInnerHTML: {
+                                __html: fontStyle
+                            }
+                        }, fontStyle))
                 ]
             }),
             /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {

package/dist/esm/components/AddSectionImageToLayout.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useMemo } from 'react';
-import { useShopStore, useBuilderPreviewStore } from '@gem-sdk/core';
+import { useState, useEffect, useMemo } from 'react';
+import { useShopStore, useBuilderPreviewStore, makeStyleResponsive } from '@gem-sdk/core';
 
 const ACTIONS_DATA = [
     {
@@ -23,9 +23,49 @@ const ACTIONS_DATA = [
     }
 ];
 const FOOTER_HEIGHT = 48;
+const defaultMargin = {
+    desktop: '68px',
+    tablet: '16px',
+    mobile: '16px'
+};
 const AddSectionImageToLayout = ()=>{
     const [link, setLink] = useState('');
     const [isInput, setIsInput] = useState(false);
+    const [margin, setMargin] = useState(defaultMargin);
+    useEffect(()=>{
+        const $iframe = parent.document.querySelector('.iframe');
+        if (!$iframe) return;
+        const $storefront = document.querySelector('#storefront');
+        if (!$storefront) return;
+        const $iframeDoc = $iframe.contentDocument || $iframe.contentWindow.document;
+        const $section = $iframeDoc.getElementsByTagName('section');
+        let prevWidth = 0;
+        const observer = new ResizeObserver((entries)=>{
+            const currentWidth = entries[0]?.borderBoxSize?.[0]?.inlineSize;
+            const shouldUpdateMargin = !!$section.length && typeof currentWidth === 'number' && currentWidth !== prevWidth;
+            if (shouldUpdateMargin) {
+                prevWidth = currentWidth;
+                const $baseSection = $section[0];
+                const padding = getComputedStyle($baseSection).getPropertyValue('padding-left');
+                const margin = getComputedStyle($baseSection).getPropertyValue('margin-left');
+                const newMargin = parseInt(margin, 10) + parseInt(padding, 10);
+                const baseMargin = 68;
+                if (newMargin > baseMargin) {
+                    setMargin({
+                        desktop: `${newMargin}px`,
+                        tablet: `${newMargin}px`,
+                        mobile: `${newMargin}px`
+                    });
+                } else {
+                    setMargin(defaultMargin);
+                }
+            }
+        });
+        observer.observe($storefront);
+        return ()=>{
+            observer.unobserve($storefront);
+        };
+    }, []);
     const onClick = (index)=>{
         if (index === 0) {
             setIsInput(true);
@@ -48,9 +88,11 @@ const AddSectionImageToLayout = ()=>{
     }
     return /*#__PURE__*/ jsxs("div", {
         id: "gps-add-section-image-to-layout-of-bottom",
-        className: `gps-base-font-family mobile:mx-[16px] mobile:w-[calc(100%_-_32px)] relative mx-[44px] mb-[24px] mt-[40px]  w-[calc(100%_-_88px)] justify-center rounded-[3px] border border-[#EEEEEE] py-[24px] ${totalSection ? 'flex' : 'hidden'}`,
+        className: `gps-base-font-family relative mx-[44px] mb-[24px] mt-[40px] justify-center rounded-[3px] border border-[#EEEEEE] py-[24px] ${totalSection ? 'flex' : 'hidden'}`,
         style: {
-            marginBottom: `${offset + 24}px`
+            marginBottom: `${offset + 24}px`,
+            ...makeStyleResponsive('ml', margin),
+            ...makeStyleResponsive('mr', margin)
         },
         children: [
             /*#__PURE__*/ jsx("span", {
@@ -72,7 +114,7 @@ const AddSectionImageToLayout = ()=>{
                             className: "flex items-center ",
                             children: [
                                 /*#__PURE__*/ jsx("span", {
-                                    className: "mr-[3px] text-[12px] font-normal text-[#676767]",
+                                    className: "mr-[3px] text-[12px] font-normal text-[#676767] text-center",
                                     children: action.content
                                 }),
                                 action.hasAILogo && /*#__PURE__*/ jsxs("svg", {

package/dist/esm/components/PagesSuggestion.js

@@ -4,9 +4,7 @@ import { useRef, useEffect } from 'react';
 const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
     const inputRef = useRef(null);
     const pages = [
-        'https://gempages-demo/1',
-        'https://www.apple.com/',
-        'https://www.zara.com/ca/'
+        'https://seal-commerce-asia.myshopify.com/pages/virtual-reality-heads'
     ];
     useEffect(()=>{
         if (isOpen) {
@@ -101,7 +99,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
                         /*#__PURE__*/ jsx("div", {
                             className: "mt-[-1px] max-h-[500px] bg-white p-2",
                             children: pages.map((page)=>/*#__PURE__*/ jsxs("div", {
-                                    className: "gps-suggestion-item mb-2 flex h-[56px] cursor-pointer items-center justify-between rounded-[3px] px-[16px] py-[12px] last:mb-0 hover:bg-[#F4F4F4]",
+                                    className: " gps-suggestion-item mb-2 flex h-[56px] cursor-pointer items-center justify-between rounded-[3px] px-[16px] py-[12px] last:mb-0 hover:bg-[#F4F4F4]",
                                     "data-url": page,
                                     "aria-hidden": true,
                                     children: [
@@ -130,7 +128,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
                                                     ]
                                                 }),
                                                 /*#__PURE__*/ jsx("span", {
-                                                    className: "item-link ml-[24px] text-xs text-[#212121]",
+                                                    className: "item-link ml-[24px] whitespace-nowrap text-xs text-[#212121]",
                                                     children: page
                                                 })
                                             ]

package/dist/esm/components/builder/Toolbox.js

@@ -1,13 +1,16 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore, useModalStore } from '@gem-sdk/core';
-import { memo, useCallback, useEffect } from 'react';
+import { memo, useState, useCallback, useEffect } from 'react';
 import { createFontUrl } from '../../libs/google-fonts.js';
 import { genCSS } from '../../libs/helpers/gen-css.js';
 import { getStorefrontApi } from '../../libs/get-storefront-api.js';
 import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
+import { normalizeBuilderData } from '../../libs/helpers/normalize.js';
+import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
 
 const globalStyleId = 'global-style';
 const globalFontId = 'google-font-builder';
+const fontElementSettingClassName = 'google-font-element';
 const Toolbox = ()=>{
     const matchMutate = useMatchMutate();
     const provider = useShopStore((s)=>s.provider);
@@ -22,6 +25,7 @@ const Toolbox = ()=>{
     const changeSwatches = useShopStore((s)=>s.changeSwatches);
     const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
     const clearModal = useModalStore((s)=>s.clearModal);
+    const [fonts, setFonts] = useState([]);
     // Revalidate all query with key match query/
     const onRevalidateQuery = useCallback(()=>{
         matchMutate(/query\//, {
@@ -92,10 +96,24 @@ const Toolbox = ()=>{
         try {
             const detail = e.detail;
             if (detail.data) {
+                let dataBuilder = {};
                 if (detail.type === 'flat') {
                     initNormalizeState(detail.data);
+                    dataBuilder = detail.data;
                 } else {
                     initState(detail.data);
+                    dataBuilder = detail.data.reduceRight((prev, current)=>{
+                        const item = normalizeBuilderData(current);
+                        return {
+                            ...prev,
+                            ...item
+                        };
+                    }, {});
+                }
+                // Append link font to head
+                if (dataBuilder) {
+                    const fonts = getFontsFromDataBuilder(dataBuilder);
+                    setFonts(fonts);
                 }
             }
         } catch  {
@@ -139,11 +157,38 @@ const Toolbox = ()=>{
                     data: detail.propValue,
                     group: detail.group
                 });
+                // Check link google font to <head>
+                if (detail.propValue?.custom) {
+                    const customFontFamily = detail.propValue?.custom?.fontFamily;
+                    const customFontWeight = detail.propValue?.custom?.fontWeight;
+                    if (customFontFamily && customFontWeight) {
+                        const isExist = fonts.find((item)=>item.family == customFontFamily && item.variants.includes(customFontWeight));
+                        if (!isExist) {
+                            const isFontFamily = fonts.find((item)=>item.family == customFontFamily);
+                            if (isFontFamily) {
+                                isFontFamily.variants.push(customFontWeight);
+                            } else {
+                                setFonts([
+                                    ...fonts,
+                                    {
+                                        family: customFontFamily,
+                                        variants: [
+                                            customFontWeight
+                                        ],
+                                        subsets: [],
+                                        type: 'google'
+                                    }
+                                ]);
+                            }
+                        }
+                    }
+                }
             }
         } catch  {
         //
         }
-    }, [
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         changeItemPropByKey
     ]);
     // Move entity
@@ -192,6 +237,32 @@ const Toolbox = ()=>{
     }, [
         changeLayoutSettings
     ]);
+    useEffect(()=>{
+        if (fonts?.length) {
+            fonts.forEach((font)=>{
+                const fontUrl = createFontUrl([
+                    font
+                ]);
+                if (fontUrl) {
+                    const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${encodeURI(font.family)}"]`);
+                    if (googleFont) {
+                        if (googleFont.getAttribute('href') !== fontUrl) {
+                            googleFont.setAttribute('href', fontUrl);
+                        }
+                    } else {
+                        const link = document.createElement('link');
+                        link.className = fontElementSettingClassName;
+                        link.dataset.font = encodeURI(font.family);
+                        link.href = fontUrl;
+                        link.rel = 'stylesheet';
+                        document.head.appendChild(link);
+                    }
+                }
+            });
+        }
+    }, [
+        fonts
+    ]);
     useEffect(()=>{
         window.addEventListener('update-shop-info', onChangeShopInfo);
         window.addEventListener('revalidate-query', onRevalidateQuery);

package/dist/esm/index.js

@@ -4,7 +4,6 @@ export { getHomePagePropsV2 } from './libs/api/get-home-page-props-v2.js';
 export { getPreviewProps } from './libs/api/get-preview-props.js';
 export { getBuilderProps } from './libs/api/get-builder-props.js';
 export { getProductProps } from './libs/api/get-product-props.js';
-export { getStaticPageProps } from './libs/api/get-static-page-props.js';
 export { getStaticPagePropsV2 } from './libs/api/get-static-page-props-v2.js';
 export { getStaticPagePropsPreview } from './libs/api/get-static-page-props-preview.js';
 export { createFetcher, createShopifyFetcher } from './libs/fetcher.js';
@@ -22,6 +21,7 @@ export { default as StaticPage } from './pages/static.js';
 export { BuilderPage } from './pages/builder.js';
 export { StaticPageV2 } from './pages/static-v2.js';
 export { getStaticPaths } from './libs/getStaticPaths.js';
+export { getFontsFromDataBuilder } from './libs/helpers/gen-fonts.js';
 export { getFontFromGlobalStyle, getFonts } from './libs/google-fonts.js';
 export { getStorefrontApi } from './libs/get-storefront-api.js';
 export { ErrorBoundary } from './components/ErrorBoundary.js';

package/dist/esm/libs/api/get-static-page-props-v2.js

@@ -1,6 +1,6 @@
 import { PublishedThemePagesDocument, StorePropertyDocument } from '@gem-sdk/core';
 import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
-import { getFontFromGlobalStyle } from '../google-fonts.js';
+import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-fonts.js';
 import { genCSS } from '../helpers/gen-css.js';
 import { generateManifest } from '../helpers/generate-manifres.js';
 import { getFallbackV2 } from '../helpers/get-fallback.js';
@@ -35,7 +35,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 throw new Error(`No data builder found for slug: /${slug}`);
             }
             const pageTemplate = parseBuilderTemplateV2(dataBuilder);
-            const [fontStyle, fallback] = await Promise.all([
+            const [elementFontStyle, fontStyle, fallback] = await Promise.all([
+                getFontStyleFromPageTemplate(pageTemplate),
                 getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
                 getFallbackV2(fetcher, pageTemplate)
             ]);
@@ -115,6 +116,7 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
             return serializableJson({
                 themeStyle: genCSS(dataBuilder?.pageStyle?.data, mobileOnly),
                 fontStyle,
+                elementFontStyle,
                 builderData: pageTemplate,
                 pageType,
                 moneyFormat: shopMeta?.shop.moneyFormat ?? null,

package/dist/esm/libs/google-fonts.js

@@ -1,3 +1,5 @@
+import { getFontsFromDataBuilder } from './helpers/gen-fonts.js';
+
 const CHROME_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36';
 const IE_UA = 'Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko';
 async function getFontForUA(url, UA) {
@@ -64,5 +66,11 @@ const getFontFromGlobalStyle = (data, maxSize)=>{
         return '';
     }
 };
+async function getFontStyleFromPageTemplate(pageTemplate) {
+    const fontStyle = pageTemplate.map((sectionData)=>{
+        return getFonts(getFontsFromDataBuilder(sectionData.data));
+    });
+    return await Promise.all(fontStyle);
+}
 
-export { createFontUrl, getFontFromGlobalStyle, getFonts };
+export { createFontUrl, getFontFromGlobalStyle, getFontStyleFromPageTemplate, getFonts };

package/dist/esm/libs/helpers/gen-fonts.js

@@ -0,0 +1,44 @@
+const getFontsFromDataBuilder = (dataBuilder)=>{
+    const fonts = [];
+    for(const uid in dataBuilder){
+        if (Object.prototype.hasOwnProperty.call(dataBuilder, uid)) {
+            const data = dataBuilder[uid];
+            const styles = data.styles;
+            const settings = data.settings;
+            getFontFromGroupSetting(fonts, styles);
+            getFontFromGroupSetting(fonts, settings);
+        }
+    }
+    return fonts;
+};
+const getFontFromGroupSetting = (fonts, groupSetting)=>{
+    for(const attr in groupSetting){
+        if (Object.prototype.hasOwnProperty.call(groupSetting, attr)) {
+            const value = groupSetting[attr];
+            if (value) {
+                const customFontFamily = value.custom?.fontFamily;
+                const customFontWeight = value.custom?.fontWeight;
+                if (customFontFamily && customFontWeight) {
+                    const isExist = fonts.find((item)=>item.family == customFontFamily && item.variants.includes(customFontWeight));
+                    if (!isExist) {
+                        const isFontFamily = fonts.find((item)=>item.family == customFontFamily);
+                        if (isFontFamily) {
+                            isFontFamily.variants.push(customFontWeight);
+                        } else {
+                            fonts.push({
+                                family: customFontFamily,
+                                variants: [
+                                    customFontWeight
+                                ],
+                                subsets: [],
+                                type: 'google'
+                            });
+                        }
+                    }
+                }
+            }
+        }
+    }
+};
+
+export { getFontsFromDataBuilder };

package/dist/esm/pages/static-v2.js

@@ -6,7 +6,7 @@ import { useRouter } from 'next/router';
 import { useTrackingView } from '../libs/hooks/use-tracking-view.js';
 import { parseHtml } from '../libs/parse-html.js';
 
-const StaticPageV2 = ({ components , builderData , sectionData , seo , themeStyle , fontStyle , customCodeHeader , shopToken , pageHandle  })=>{
+const StaticPageV2 = ({ components , builderData , sectionData , seo , themeStyle , fontStyle , elementFontStyle , customCodeHeader , shopToken , pageHandle  })=>{
     const router = useRouter();
     useTrackingView(shopToken, pageHandle, router.isFallback);
     if (router.isFallback) {
@@ -49,7 +49,14 @@ const StaticPageV2 = ({ components , builderData , sectionData , seo , themeStyl
                         dangerouslySetInnerHTML: {
                             __html: fontStyle
                         }
-                    })
+                    }),
+                    elementFontStyle && elementFontStyle.map((fontStyle)=>/*#__PURE__*/ jsx("style", {
+                            "data-id": "google-element-fonts",
+                            type: "text/css",
+                            dangerouslySetInnerHTML: {
+                                __html: fontStyle
+                            }
+                        }, fontStyle))
                 ]
             }),
             /*#__PURE__*/ jsx(BuilderComponentProvider, {

package/dist/types/index.d.ts

@@ -12,6 +12,7 @@ type PageBuilderProps = {
     sectionData?: Record<string, SectionData$1>;
     themeStyle?: string | null;
     fontStyle?: string | null;
+    elementFontStyle?: string[] | null;
     swr?: React.ComponentProps<typeof SWRConfig>['value'];
     plugins?: string[];
     pageType?: ShopType.PublishedThemePageType;
@@ -77,8 +78,6 @@ declare const ProductDetailPage: React.FC<ProductPageProps & AdditionalPageBuild
 
 declare const getProductProps: (fetcher: FetchFunc) => (handle?: string) => Promise<ProductPageProps>;
 
-declare const getStaticPageProps: (fetcher: FetchFunc, shopifyFetcher: FetchFunc) => (slug?: string) => Promise<PageBuilderProps>;
-
 declare const getStaticPagePropsV2: (fetcher: FetchFunc, shopifyFetcher: FetchFunc) => (slug: string) => Promise<PageBuilderPropsV2>;
 
 declare const getStaticPagePropsPreview: (fetcher: FetchFunc, shopifyFetcher: FetchFunc) => (slug: string) => Promise<PageBuilderPropsV2>;
@@ -168,6 +167,8 @@ type FontOption = {
 declare function getFonts(fonts: FontItem[], option?: FontOption, maxSize?: number): Promise<string>;
 declare const getFontFromGlobalStyle: (data?: string, maxSize?: number) => Promise<string> | "";
 
+declare const getFontsFromDataBuilder: (dataBuilder: Record<string, any>) => FontItem[];
+
 declare const getStorefrontApi: (handle: string, provider?: 'BIGCOMMERCE' | 'SHOPIFY') => string;
 
 type ErrorBoundaryProps = {
@@ -215,4 +216,4 @@ type Props = {
 };
 declare const TikTokPixel: ({ pixelId }: Props) => JSX.Element | null;
 
-export { AppPropsWithLayout, BuilderPage, CollectionDetailPage, CollectionPageProps, ErrorBoundary, ErrorFallback, FacebookPixel, GoogleAnalytic, NextPageWithLayout, Page404, Page500, PageBuilderProps, PreviewPage, ProductDetailPage, ProductPageProps, StaticPage, StaticPageProps, StaticPagePropsV2, StaticPageV2, TikTokPixel, createFetcher, createShopifyFetcher, genCSS, getBuilderProps, getCollectionProps, getFallbackV2, getFontFromGlobalStyle, getFonts, getHomePageProps, getHomePagePropsV2, getLayout, getPreviewProps, getProductProps, getStaticPageProps, getStaticPagePropsPreview, getStaticPagePropsV2, getStaticPaths, getStorefrontApi, isBot, normalizePageSectionResponseV2, parseBuilderTemplateV2, retryWithDelay, useTrackingView };
+export { AppPropsWithLayout, BuilderPage, CollectionDetailPage, CollectionPageProps, ErrorBoundary, ErrorFallback, FacebookPixel, GoogleAnalytic, NextPageWithLayout, Page404, Page500, PageBuilderProps, PreviewPage, ProductDetailPage, ProductPageProps, StaticPage, StaticPageProps, StaticPagePropsV2, StaticPageV2, TikTokPixel, createFetcher, createShopifyFetcher, genCSS, getBuilderProps, getCollectionProps, getFallbackV2, getFontFromGlobalStyle, getFonts, getFontsFromDataBuilder, getHomePageProps, getHomePagePropsV2, getLayout, getPreviewProps, getProductProps, getStaticPagePropsPreview, getStaticPagePropsV2, getStaticPaths, getStorefrontApi, isBot, normalizePageSectionResponseV2, parseBuilderTemplateV2, retryWithDelay, useTrackingView };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.12.0-next.51",
+  "version": "1.12.0-next.62",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
     "next-seo": "^6.0.0"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.12.0-next.50",
+    "@gem-sdk/core": "1.12.0-next.59",
     "@gem-sdk/plugin-cookie-bar": "*",
     "@gem-sdk/plugin-quick-view": "*",
     "@gem-sdk/plugin-sticky-add-to-cart": "*"