← All changes
|
src/Agent/workflows/theme/components/change-site-design/DesignOption.jsx
+24
-15
3.0.4
→
trunk
View file →
| @@ -1,16 +1,13 @@ | ||
| 1 | 1 | import { useIframeScale } from '@agent/hooks/useIframeScale'; |
| 2 | 2 | import { removeAnimationClasses } from '@agent/workflows/theme/components/change-site-design/utils/removeAnimationClasses'; |
| 3 | -import { useMemo, useRef } from '@wordpress/element'; | |
| 3 | +import { useMemo } from '@wordpress/element'; | |
| 4 | 4 | import { __ } from '@wordpress/i18n'; |
| 5 | 5 | import classnames from 'classnames'; |
| 6 | 6 | import { colord } from 'colord'; |
| 7 | 7 | |
| 8 | -const VIEWPORT_WIDTH = Math.max(window.innerWidth, 1400); | |
| 9 | -const VIEWPORT_HEIGHT = | |
| 10 | - (document.querySelector('header')?.offsetHeight ?? 0) + | |
| 11 | - (document.querySelector('.ext-hero-section')?.offsetHeight ?? 0) || | |
| 12 | - window.innerHeight; | |
| 8 | +const PREVIEW_VIEWPORT_WIDTH = 1440; | |
| 9 | +const PREVIEW_VIEWPORT_HEIGHT = 1024; | |
| 13 | 10 | |
| 14 | 11 | const lowerImageQuality = (html) => |
| 15 | 12 | html.replace( |
| 16 | 13 | /(https?:\/\/\S+\?w=\d+)/gi, |
| @@ -59,14 +56,20 @@ | ||
| 59 | 56 | el.remove(); |
| 60 | 57 | }); |
| 61 | 58 | |
| 62 | 59 | clone.querySelector('#block-style-variation-styles-inline-css')?.remove(); |
| 60 | + clone.querySelector('#extendify-palette-preview-css')?.remove(); | |
| 63 | 61 | clone.querySelector('#admin-bar-inline-css')?.remove(); |
| 62 | + clone.querySelector('#admin-bar-css')?.remove(); | |
| 63 | + clone.querySelector('#extendify-toolbar-reset')?.remove(); | |
| 64 | + body.classList.remove('admin-bar'); | |
| 64 | 65 | |
| 65 | 66 | // Inject variation styles |
| 66 | 67 | const styleEl = head.appendChild(document.createElement('style')); |
| 67 | 68 | styleEl.textContent = [ |
| 68 | 69 | styles?.colorAndFontsVariations ?? '', |
| 70 | + // Ties the option on specificity, so it only wins by coming after it. | |
| 71 | + styles?.paletteCss ?? '', | |
| 69 | 72 | styles?.vibes ?? '', |
| 70 | 73 | styles?.blockSupportsCss ?? '', |
| 71 | 74 | ].join('\n'); |
| 72 | 75 | |
| @@ -84,11 +87,15 @@ | ||
| 84 | 87 | |
| 85 | 88 | const duotoneSvgNodes = getDuotoneSvgNodes(styles?.duotoneTheme); |
| 86 | 89 | |
| 87 | 90 | // Set body to header + hero section, then append duotone SVGs |
| 88 | - const headerHtml = | |
| 89 | - removeAnimationClasses(document.querySelector('header'))?.outerHTML ?? ''; | |
| 90 | - body.innerHTML = `${headerHtml}${lowerImageQuality(renderedHtml)}`; | |
| 91 | + body.removeAttribute('style'); | |
| 92 | + | |
| 93 | + const headerNode = removeAnimationClasses(document.querySelector('header')); | |
| 94 | + headerNode?.classList.remove('is-past-hero', 'is-scrolled'); | |
| 95 | + headerNode?.removeAttribute('style'); | |
| 96 | + const headerHtml = headerNode?.outerHTML ?? ''; | |
| 97 | + body.innerHTML = `${headerHtml}<div class="entry-content">${lowerImageQuality(renderedHtml)}</div>`; | |
| 91 | 98 | duotoneSvgNodes.forEach((node) => { |
| 92 | 99 | body.appendChild(node); |
| 93 | 100 | }); |
| 94 | 101 | |
| @@ -95,11 +102,10 @@ | ||
| 95 | 102 | return `<!DOCTYPE html>${clone.outerHTML}`; |
| 96 | 103 | }; |
| 97 | 104 | |
| 98 | 105 | export const DesignOption = ({ renderedHtml, styles, isSelected, onClick }) => { |
| 99 | - const iframeRef = useRef(null); | |
| 100 | 106 | const { containerRef, scale, contentHeight, handleIframeLoad } = |
| 101 | - useIframeScale(); | |
| 107 | + useIframeScale({ viewportWidth: PREVIEW_VIEWPORT_WIDTH }); | |
| 102 | 108 | |
| 103 | 109 | const srcdoc = useMemo( |
| 104 | 110 | () => generatePreviewHtml(renderedHtml, styles), |
| 105 | 111 | [ |
| @@ -105,8 +111,9 @@ | ||
| 105 | 111 | [ |
| 106 | 112 | renderedHtml, |
| 107 | 113 | styles?.linkStyles, |
| 108 | 114 | styles?.colorAndFontsVariations, |
| 115 | + styles?.paletteCss, | |
| 109 | 116 | styles?.duotoneTheme, |
| 110 | 117 | styles?.vibes, |
| 111 | 118 | styles?.blockSupportsCss, |
| 112 | 119 | ], |
| @@ -116,9 +123,9 @@ | ||
| 116 | 123 | <button |
| 117 | 124 | ref={containerRef} |
| 118 | 125 | type="button" |
| 119 | 126 | style={{ |
| 120 | - height: `${(contentHeight ?? VIEWPORT_HEIGHT) * scale}px`, | |
| 127 | + height: `${(contentHeight ?? PREVIEW_VIEWPORT_HEIGHT) * scale}px`, | |
| 121 | 128 | }} |
| 122 | 129 | className={classnames( |
| 123 | 130 | 'relative w-full cursor-pointer overflow-hidden rounded-md border shadow-md', |
| 124 | 131 | { |
| @@ -131,21 +138,23 @@ | ||
| 131 | 138 | > |
| 132 | 139 | <div |
| 133 | 140 | className="overflow-hidden" |
| 134 | 141 | style={{ |
| 135 | - width: VIEWPORT_WIDTH, | |
| 142 | + width: PREVIEW_VIEWPORT_WIDTH, | |
| 136 | 143 | transform: `scale(${scale})`, |
| 137 | 144 | transformOrigin: 'top left', |
| 138 | 145 | }} |
| 139 | 146 | > |
| 140 | 147 | <iframe |
| 141 | - ref={iframeRef} | |
| 142 | 148 | title={__('Preview site design', 'extendify-local')} |
| 143 | 149 | onLoad={handleIframeLoad} |
| 144 | 150 | srcDoc={srcdoc} |
| 145 | 151 | style={{ |
| 146 | 152 | width: '100%', |
| 147 | - height: Math.max(contentHeight ?? VIEWPORT_HEIGHT, VIEWPORT_HEIGHT), | |
| 153 | + height: Math.max( | |
| 154 | + contentHeight ?? PREVIEW_VIEWPORT_HEIGHT, | |
| 155 | + PREVIEW_VIEWPORT_HEIGHT, | |
| 156 | + ), | |
| 148 | 157 | border: 0, |
| 149 | 158 | pointerEvents: 'none', |
| 150 | 159 | display: 'block', |
| 151 | 160 | overflow: 'hidden', |