@wordpress/edit-site 4.15.1-next.4d3b314fd5.0 → 4.16.0

package/build-module/components/block-editor/resizable-editor.js

@@ -53,34 +53,14 @@ function ResizableEditor(_ref) {
   const mouseMoveTypingResetRef = useMouseMoveTypingReset();
   const ref = useMergeRefs([iframeRef, mouseMoveTypingResetRef]);
   useEffect(function autoResizeIframeHeight() {
-    const iframe = iframeRef.current;
-
-    if (!iframe || !enableResizing) {
+    if (!iframeRef.current || !enableResizing) {
       return;
     }
 
-    let timeoutId = null;
-
-    function resizeHeight() {
-      if (!timeoutId) {
-        // Throttle the updates on timeout. This code previously
-        // used `requestAnimationFrame`, but that seems to not
-        // always work before an iframe is ready.
-        timeoutId = iframe.contentWindow.setTimeout(() => {
-          const {
-            readyState
-          } = iframe.contentDocument; // Continue deferring the timeout until the document is ready.
-          // Only then will it have a height.
-
-          if (readyState !== 'interactive' && readyState !== 'complete') {
-            resizeHeight();
-            return;
-          }
+    const iframe = iframeRef.current;
 
-          setHeight(iframe.contentDocument.body.scrollHeight);
-          timeoutId = null; // 30 frames per second.
-        }, 1000 / 30);
-      }
+    function setFrameHeight() {
+      setHeight(iframe.contentDocument.body.scrollHeight);
     }
 
     let resizeObserver;
@@ -89,25 +69,21 @@ function ResizableEditor(_ref) {
       var _resizeObserver;
 
       (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 ? void 0 : _resizeObserver.disconnect();
-      resizeObserver = new iframe.contentWindow.ResizeObserver(resizeHeight); // Observe the body, since the `html` element seems to always
+      resizeObserver = new iframe.contentWindow.ResizeObserver(setFrameHeight); // Observe the body, since the `html` element seems to always
       // have a height of `100%`.
 
       resizeObserver.observe(iframe.contentDocument.body);
-      resizeHeight();
-    } // This is only required in Firefox for some unknown reasons.
-
-
-    iframe.addEventListener('load', registerObserver); // This is required in Chrome and Safari.
+      setFrameHeight();
+    }
 
-    registerObserver();
+    iframe.addEventListener('load', registerObserver);
     return () => {
-      var _iframe$contentWindow, _resizeObserver2;
+      var _resizeObserver2;
 
-      (_iframe$contentWindow = iframe.contentWindow) === null || _iframe$contentWindow === void 0 ? void 0 : _iframe$contentWindow.clearTimeout(timeoutId);
       (_resizeObserver2 = resizeObserver) === null || _resizeObserver2 === void 0 ? void 0 : _resizeObserver2.disconnect();
       iframe.removeEventListener('load', registerObserver);
     };
-  }, [enableResizing]);
+  }, [enableResizing, iframeRef.current]);
   const resizeWidthBy = useCallback(deltaPixels => {
     if (iframeRef.current) {
       setWidth(iframeRef.current.offsetWidth + deltaPixels);

package/build-module/components/block-editor/resizable-editor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/block-editor/resizable-editor.js"],"names":["useState","useEffect","useRef","useCallback","ResizableBox","__experimentalUseResizeCanvas","useResizeCanvas","__unstableEditorStyles","EditorStyles","__unstableIframe","Iframe","__unstableUseMouseMoveTypingReset","useMouseMoveTypingReset","store","blockEditorStore","useSelect","useMergeRefs","editSiteStore","ResizeHandle","DEFAULT_STYLES","width","height","HANDLE_STYLES_OVERRIDE","position","undefined","userSelect","cursor","top","right","bottom","left","ResizableEditor","enableResizing","settings","children","props","deviceType","isZoomOutMode","select","__experimentalGetPreviewDeviceType","__unstableGetEditorMode","deviceStyles","setWidth","setHeight","iframeRef","mouseMoveTypingResetRef","ref","autoResizeIframeHeight","iframe","current","timeoutId","resizeHeight","contentWindow","setTimeout","readyState","contentDocument","body","scrollHeight","resizeObserver","registerObserver","disconnect","ResizeObserver","observe","addEventListener","clearTimeout","removeEventListener","resizeWidthBy","deltaPixels","offsetWidth","event","direction","element","style","styles","__unstableResolvedAssets","svgFilters"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useRef, useCallback } from '@wordpress/element';\nimport { ResizableBox } from '@wordpress/components';\nimport {\n\t__experimentalUseResizeCanvas as useResizeCanvas,\n\t__unstableEditorStyles as EditorStyles,\n\t__unstableIframe as Iframe,\n\t__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport ResizeHandle from './resize-handle';\n\nconst DEFAULT_STYLES = {\n\twidth: '100%',\n\theight: '100%',\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDE = {\n\tposition: undefined,\n\tuserSelect: undefined,\n\tcursor: undefined,\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nfunction ResizableEditor( { enableResizing, settings, children, ...props } ) {\n\tconst { deviceType, isZoomOutMode } = useSelect(\n\t\t( select ) => ( {\n\t\t\tdeviceType:\n\t\t\t\tselect( editSiteStore ).__experimentalGetPreviewDeviceType(),\n\t\t\tisZoomOutMode:\n\t\t\t\tselect( blockEditorStore ).__unstableGetEditorMode() ===\n\t\t\t\t'zoom-out',\n\t\t} ),\n\t\t[]\n\t);\n\tconst deviceStyles = useResizeCanvas( deviceType );\n\tconst [ width, setWidth ] = useState( DEFAULT_STYLES.width );\n\tconst [ height, setHeight ] = useState( DEFAULT_STYLES.height );\n\tconst iframeRef = useRef();\n\tconst mouseMoveTypingResetRef = useMouseMoveTypingReset();\n\tconst ref = useMergeRefs( [ iframeRef, mouseMoveTypingResetRef ] );\n\n\tuseEffect(\n\t\tfunction autoResizeIframeHeight() {\n\t\t\tconst iframe = iframeRef.current;\n\n\t\t\tif ( ! iframe || ! enableResizing ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet timeoutId = null;\n\n\t\t\tfunction resizeHeight() {\n\t\t\t\tif ( ! timeoutId ) {\n\t\t\t\t\t// Throttle the updates on timeout. This code previously\n\t\t\t\t\t// used `requestAnimationFrame`, but that seems to not\n\t\t\t\t\t// always work before an iframe is ready.\n\t\t\t\t\ttimeoutId = iframe.contentWindow.setTimeout( () => {\n\t\t\t\t\t\tconst { readyState } = iframe.contentDocument;\n\n\t\t\t\t\t\t// Continue deferring the timeout until the document is ready.\n\t\t\t\t\t\t// Only then will it have a height.\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\treadyState !== 'interactive' &&\n\t\t\t\t\t\t\treadyState !== 'complete'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tresizeHeight();\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tsetHeight( iframe.contentDocument.body.scrollHeight );\n\t\t\t\t\t\ttimeoutId = null;\n\n\t\t\t\t\t\t// 30 frames per second.\n\t\t\t\t\t}, 1000 / 30 );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tlet resizeObserver;\n\n\t\t\tfunction registerObserver() {\n\t\t\t\tresizeObserver?.disconnect();\n\n\t\t\t\tresizeObserver = new iframe.contentWindow.ResizeObserver(\n\t\t\t\t\tresizeHeight\n\t\t\t\t);\n\n\t\t\t\t// Observe the body, since the `html` element seems to always\n\t\t\t\t// have a height of `100%`.\n\t\t\t\tresizeObserver.observe( iframe.contentDocument.body );\n\n\t\t\t\tresizeHeight();\n\t\t\t}\n\n\t\t\t// This is only required in Firefox for some unknown reasons.\n\t\t\tiframe.addEventListener( 'load', registerObserver );\n\t\t\t// This is required in Chrome and Safari.\n\t\t\tregisterObserver();\n\n\t\t\treturn () => {\n\t\t\t\tiframe.contentWindow?.clearTimeout( timeoutId );\n\t\t\t\tresizeObserver?.disconnect();\n\t\t\t\tiframe.removeEventListener( 'load', registerObserver );\n\t\t\t};\n\t\t},\n\t\t[ enableResizing ]\n\t);\n\n\tconst resizeWidthBy = useCallback( ( deltaPixels ) => {\n\t\tif ( iframeRef.current ) {\n\t\t\tsetWidth( iframeRef.current.offsetWidth + deltaPixels );\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<ResizableBox\n\t\t\tsize={ {\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t} }\n\t\t\tonResizeStop={ ( event, direction, element ) => {\n\t\t\t\tsetWidth( element.style.width );\n\t\t\t} }\n\t\t\tminWidth={ 300 }\n\t\t\tmaxWidth=\"100%\"\n\t\t\tmaxHeight=\"100%\"\n\t\t\tenable={ {\n\t\t\t\tright: enableResizing,\n\t\t\t\tleft: enableResizing,\n\t\t\t} }\n\t\t\tshowHandle={ enableResizing }\n\t\t\t// The editor is centered horizontally, resizing it only\n\t\t\t// moves half the distance. Hence double the ratio to correctly\n\t\t\t// align the cursor to the resizer handle.\n\t\t\tresizeRatio={ 2 }\n\t\t\thandleComponent={ {\n\t\t\t\tleft: (\n\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\tdirection=\"left\"\n\t\t\t\t\t\tresizeWidthBy={ resizeWidthBy }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tright: (\n\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\tdirection=\"right\"\n\t\t\t\t\t\tresizeWidthBy={ resizeWidthBy }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t} }\n\t\t\thandleClasses={ undefined }\n\t\t\thandleStyles={ {\n\t\t\t\tleft: HANDLE_STYLES_OVERRIDE,\n\t\t\t\tright: HANDLE_STYLES_OVERRIDE,\n\t\t\t} }\n\t\t>\n\t\t\t<Iframe\n\t\t\t\tisZoomedOut={ isZoomOutMode }\n\t\t\t\tstyle={ enableResizing ? { height } : deviceStyles }\n\t\t\t\thead={\n\t\t\t\t\t<>\n\t\t\t\t\t\t<EditorStyles styles={ settings.styles } />\n\t\t\t\t\t\t<style>{\n\t\t\t\t\t\t\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t\t\t\t\t\t\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t\t\t\t\t\t\t`.is-root-container { display: flow-root; }`\n\t\t\t\t\t\t}</style>\n\t\t\t\t\t\t{ enableResizing && (\n\t\t\t\t\t\t\t<style>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t// Force the <html> and <body>'s heights to fit the content.\n\t\t\t\t\t\t\t\t\t`html, body { height: -moz-fit-content !important; height: fit-content !important; min-height: 0 !important; }`\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t// Some themes will have `min-height: 100vh` for the root container,\n\t\t\t\t\t\t\t\t\t// which isn't a requirement in auto resize mode.\n\t\t\t\t\t\t\t\t\t`.is-root-container { min-height: 0 !important; }`\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</style>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\tassets={ settings.__unstableResolvedAssets }\n\t\t\t\tref={ ref }\n\t\t\t\tname=\"editor-canvas\"\n\t\t\t\tclassName=\"edit-site-visual-editor__editor-canvas\"\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }\n\t\t\t\t{ settings.svgFilters }\n\t\t\t\t{ children }\n\t\t\t</Iframe>\n\t\t</ResizableBox>\n\t);\n}\n\nexport default ResizableEditor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/block-editor/resizable-editor.js"],"names":["useState","useEffect","useRef","useCallback","ResizableBox","__experimentalUseResizeCanvas","useResizeCanvas","__unstableEditorStyles","EditorStyles","__unstableIframe","Iframe","__unstableUseMouseMoveTypingReset","useMouseMoveTypingReset","store","blockEditorStore","useSelect","useMergeRefs","editSiteStore","ResizeHandle","DEFAULT_STYLES","width","height","HANDLE_STYLES_OVERRIDE","position","undefined","userSelect","cursor","top","right","bottom","left","ResizableEditor","enableResizing","settings","children","props","deviceType","isZoomOutMode","select","__experimentalGetPreviewDeviceType","__unstableGetEditorMode","deviceStyles","setWidth","setHeight","iframeRef","mouseMoveTypingResetRef","ref","autoResizeIframeHeight","current","iframe","setFrameHeight","contentDocument","body","scrollHeight","resizeObserver","registerObserver","disconnect","contentWindow","ResizeObserver","observe","addEventListener","removeEventListener","resizeWidthBy","deltaPixels","offsetWidth","event","direction","element","style","styles","__unstableResolvedAssets","svgFilters"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useRef, useCallback } from '@wordpress/element';\nimport { ResizableBox } from '@wordpress/components';\nimport {\n\t__experimentalUseResizeCanvas as useResizeCanvas,\n\t__unstableEditorStyles as EditorStyles,\n\t__unstableIframe as Iframe,\n\t__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport ResizeHandle from './resize-handle';\n\nconst DEFAULT_STYLES = {\n\twidth: '100%',\n\theight: '100%',\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDE = {\n\tposition: undefined,\n\tuserSelect: undefined,\n\tcursor: undefined,\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nfunction ResizableEditor( { enableResizing, settings, children, ...props } ) {\n\tconst { deviceType, isZoomOutMode } = useSelect(\n\t\t( select ) => ( {\n\t\t\tdeviceType:\n\t\t\t\tselect( editSiteStore ).__experimentalGetPreviewDeviceType(),\n\t\t\tisZoomOutMode:\n\t\t\t\tselect( blockEditorStore ).__unstableGetEditorMode() ===\n\t\t\t\t'zoom-out',\n\t\t} ),\n\t\t[]\n\t);\n\tconst deviceStyles = useResizeCanvas( deviceType );\n\tconst [ width, setWidth ] = useState( DEFAULT_STYLES.width );\n\tconst [ height, setHeight ] = useState( DEFAULT_STYLES.height );\n\tconst iframeRef = useRef();\n\tconst mouseMoveTypingResetRef = useMouseMoveTypingReset();\n\tconst ref = useMergeRefs( [ iframeRef, mouseMoveTypingResetRef ] );\n\n\tuseEffect(\n\t\tfunction autoResizeIframeHeight() {\n\t\t\tif ( ! iframeRef.current || ! enableResizing ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst iframe = iframeRef.current;\n\n\t\t\tfunction setFrameHeight() {\n\t\t\t\tsetHeight( iframe.contentDocument.body.scrollHeight );\n\t\t\t}\n\n\t\t\tlet resizeObserver;\n\n\t\t\tfunction registerObserver() {\n\t\t\t\tresizeObserver?.disconnect();\n\n\t\t\t\tresizeObserver = new iframe.contentWindow.ResizeObserver(\n\t\t\t\t\tsetFrameHeight\n\t\t\t\t);\n\n\t\t\t\t// Observe the body, since the `html` element seems to always\n\t\t\t\t// have a height of `100%`.\n\t\t\t\tresizeObserver.observe( iframe.contentDocument.body );\n\t\t\t\tsetFrameHeight();\n\t\t\t}\n\n\t\t\tiframe.addEventListener( 'load', registerObserver );\n\n\t\t\treturn () => {\n\t\t\t\tresizeObserver?.disconnect();\n\t\t\t\tiframe.removeEventListener( 'load', registerObserver );\n\t\t\t};\n\t\t},\n\t\t[ enableResizing, iframeRef.current ]\n\t);\n\n\tconst resizeWidthBy = useCallback( ( deltaPixels ) => {\n\t\tif ( iframeRef.current ) {\n\t\t\tsetWidth( iframeRef.current.offsetWidth + deltaPixels );\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<ResizableBox\n\t\t\tsize={ {\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t} }\n\t\t\tonResizeStop={ ( event, direction, element ) => {\n\t\t\t\tsetWidth( element.style.width );\n\t\t\t} }\n\t\t\tminWidth={ 300 }\n\t\t\tmaxWidth=\"100%\"\n\t\t\tmaxHeight=\"100%\"\n\t\t\tenable={ {\n\t\t\t\tright: enableResizing,\n\t\t\t\tleft: enableResizing,\n\t\t\t} }\n\t\t\tshowHandle={ enableResizing }\n\t\t\t// The editor is centered horizontally, resizing it only\n\t\t\t// moves half the distance. Hence double the ratio to correctly\n\t\t\t// align the cursor to the resizer handle.\n\t\t\tresizeRatio={ 2 }\n\t\t\thandleComponent={ {\n\t\t\t\tleft: (\n\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\tdirection=\"left\"\n\t\t\t\t\t\tresizeWidthBy={ resizeWidthBy }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tright: (\n\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\tdirection=\"right\"\n\t\t\t\t\t\tresizeWidthBy={ resizeWidthBy }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t} }\n\t\t\thandleClasses={ undefined }\n\t\t\thandleStyles={ {\n\t\t\t\tleft: HANDLE_STYLES_OVERRIDE,\n\t\t\t\tright: HANDLE_STYLES_OVERRIDE,\n\t\t\t} }\n\t\t>\n\t\t\t<Iframe\n\t\t\t\tisZoomedOut={ isZoomOutMode }\n\t\t\t\tstyle={ enableResizing ? { height } : deviceStyles }\n\t\t\t\thead={\n\t\t\t\t\t<>\n\t\t\t\t\t\t<EditorStyles styles={ settings.styles } />\n\t\t\t\t\t\t<style>{\n\t\t\t\t\t\t\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t\t\t\t\t\t\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t\t\t\t\t\t\t`.is-root-container { display: flow-root; }`\n\t\t\t\t\t\t}</style>\n\t\t\t\t\t\t{ enableResizing && (\n\t\t\t\t\t\t\t<style>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t// Force the <html> and <body>'s heights to fit the content.\n\t\t\t\t\t\t\t\t\t`html, body { height: -moz-fit-content !important; height: fit-content !important; min-height: 0 !important; }`\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t// Some themes will have `min-height: 100vh` for the root container,\n\t\t\t\t\t\t\t\t\t// which isn't a requirement in auto resize mode.\n\t\t\t\t\t\t\t\t\t`.is-root-container { min-height: 0 !important; }`\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</style>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\tassets={ settings.__unstableResolvedAssets }\n\t\t\t\tref={ ref }\n\t\t\t\tname=\"editor-canvas\"\n\t\t\t\tclassName=\"edit-site-visual-editor__editor-canvas\"\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }\n\t\t\t\t{ settings.svgFilters }\n\t\t\t\t{ children }\n\t\t\t</Iframe>\n\t\t</ResizableBox>\n\t);\n}\n\nexport default ResizableEditor;\n"]}

package/build-module/components/global-styles/preview.js

@@ -68,12 +68,12 @@ const StylesPreview = _ref => {
       color
     } = _ref2;
     return color !== backgroundColor && color !== headingColor;
-  }).slice(0, 2); // Reset leaked styles from WP common.css and remove main content layout padding.
+  }).slice(0, 2); // Reset leaked styles from WP common.css and remove main content layout padding and border.
 
   const editorStyles = useMemo(() => {
     if (styles) {
       return [...styles, {
-        css: 'body{min-width: 0;padding: 0;}',
+        css: 'body{min-width: 0;padding: 0;border: none;}',
         isGlobalStyles: true
       }];
     }

package/build-module/components/global-styles/preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","__unstableMotion","motion","__experimentalHStack","HStack","__experimentalVStack","VStack","useReducedMotion","useResizeObserver","useState","useMemo","useSetting","useStyle","useGlobalStylesOutput","firstFrame","start","opacity","display","hover","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","linkColor","backgroundColor","gradientValue","styles","disableMotion","coreColors","themeColors","customColors","isHovered","setIsHovered","containerResizeListener","width","ratio","paletteColors","concat","highlightedColors","filter","color","slice","editorStyles","css","isGlobalStyles","height","visibility","background","cursor","overflow","fontSize","map","slug","borderRadius","padding","boxSizing","lineHeight","index","flexGrow"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useSetting, useStyle } from './hooks';\nimport { useGlobalStylesOutput } from './use-global-styles-output';\n\nconst firstFrame = {\n\tstart: {\n\t\topacity: 1,\n\t\tdisplay: 'block',\n\t},\n\thover: {\n\t\topacity: 0,\n\t\tdisplay: 'none',\n\t},\n};\n\nconst secondFrame = {\n\thover: {\n\t\topacity: 1,\n\t\tdisplay: 'block',\n\t},\n\tstart: {\n\t\topacity: 0,\n\t\tdisplay: 'none',\n\t},\n};\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\nconst StylesPreview = ( { label, isFocused } ) => {\n\tconst [ fontWeight ] = useStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' );\n\tconst [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );\n\tconst [ backgroundColor = 'white' ] = useStyle( 'color.background' );\n\tconst [ gradientValue ] = useStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ coreColors ] = useSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useSetting( 'color.palette.custom' );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\t// Reset leaked styles from WP common.css and remove main content layout padding.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'body{min-width: 0;padding: 0;}',\n\t\t\t\t\tisGlobalStyles: true,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\n\treturn (\n\t\t<Iframe\n\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\thead={ <EditorStyles styles={ editorStyles } /> }\n\t\t\tstyle={ {\n\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\tvisibility: ! width ? 'hidden' : 'visible',\n\t\t\t} }\n\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\ttabIndex={ -1 }\n\t\t>\n\t\t\t{ containerResizeListener }\n\t\t\t<motion.div\n\t\t\t\tstyle={ {\n\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t} }\n\t\t\t\tinitial=\"start\"\n\t\t\t\tanimate={\n\t\t\t\t\t( isHovered || isFocused ) && ! disableMotion\n\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t: 'start'\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t{ highlightedColors.map( ( { slug, color } ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize * ratio,\n\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize * ratio,\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t2,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 35 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<HStack spacing={ 2 * ratio } justify=\"flex-start\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontFamily,\n\t\t\t\t\t\t\t\t\tfontSize: 24 * ratio,\n\t\t\t\t\t\t\t\t\tcolor: textColor,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontFamily,\n\t\t\t\t\t\t\t\t\tfontSize: 24 * ratio,\n\t\t\t\t\t\t\t\t\tcolor: linkColor,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ paletteColors && (\n\t\t\t\t\t\t\t<HStack spacing={ 0 }>\n\t\t\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: 10 * ratio,\n\t\t\t\t\t\t\t\t\t\t\t\twidth: 30 * ratio,\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t</motion.div>\n\t\t</Iframe>\n\t);\n};\n\nexport default StylesPreview;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","__unstableMotion","motion","__experimentalHStack","HStack","__experimentalVStack","VStack","useReducedMotion","useResizeObserver","useState","useMemo","useSetting","useStyle","useGlobalStylesOutput","firstFrame","start","opacity","display","hover","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","linkColor","backgroundColor","gradientValue","styles","disableMotion","coreColors","themeColors","customColors","isHovered","setIsHovered","containerResizeListener","width","ratio","paletteColors","concat","highlightedColors","filter","color","slice","editorStyles","css","isGlobalStyles","height","visibility","background","cursor","overflow","fontSize","map","slug","borderRadius","padding","boxSizing","lineHeight","index","flexGrow"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useSetting, useStyle } from './hooks';\nimport { useGlobalStylesOutput } from './use-global-styles-output';\n\nconst firstFrame = {\n\tstart: {\n\t\topacity: 1,\n\t\tdisplay: 'block',\n\t},\n\thover: {\n\t\topacity: 0,\n\t\tdisplay: 'none',\n\t},\n};\n\nconst secondFrame = {\n\thover: {\n\t\topacity: 1,\n\t\tdisplay: 'block',\n\t},\n\tstart: {\n\t\topacity: 0,\n\t\tdisplay: 'none',\n\t},\n};\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\nconst StylesPreview = ( { label, isFocused } ) => {\n\tconst [ fontWeight ] = useStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' );\n\tconst [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );\n\tconst [ backgroundColor = 'white' ] = useStyle( 'color.background' );\n\tconst [ gradientValue ] = useStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ coreColors ] = useSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useSetting( 'color.palette.custom' );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\t// Reset leaked styles from WP common.css and remove main content layout padding and border.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'body{min-width: 0;padding: 0;border: none;}',\n\t\t\t\t\tisGlobalStyles: true,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\n\treturn (\n\t\t<Iframe\n\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\thead={ <EditorStyles styles={ editorStyles } /> }\n\t\t\tstyle={ {\n\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\tvisibility: ! width ? 'hidden' : 'visible',\n\t\t\t} }\n\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\ttabIndex={ -1 }\n\t\t>\n\t\t\t{ containerResizeListener }\n\t\t\t<motion.div\n\t\t\t\tstyle={ {\n\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t} }\n\t\t\t\tinitial=\"start\"\n\t\t\t\tanimate={\n\t\t\t\t\t( isHovered || isFocused ) && ! disableMotion\n\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t: 'start'\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t{ highlightedColors.map( ( { slug, color } ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize * ratio,\n\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize * ratio,\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t2,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 35 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<HStack spacing={ 2 * ratio } justify=\"flex-start\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontFamily,\n\t\t\t\t\t\t\t\t\tfontSize: 24 * ratio,\n\t\t\t\t\t\t\t\t\tcolor: textColor,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontFamily,\n\t\t\t\t\t\t\t\t\tfontSize: 24 * ratio,\n\t\t\t\t\t\t\t\t\tcolor: linkColor,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ paletteColors && (\n\t\t\t\t\t\t\t<HStack spacing={ 0 }>\n\t\t\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: 10 * ratio,\n\t\t\t\t\t\t\t\t\t\t\t\twidth: 30 * ratio,\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t</motion.div>\n\t\t</Iframe>\n\t);\n};\n\nexport default StylesPreview;\n"]}

package/build-module/components/global-styles/screen-typography-element.js

@@ -4,12 +4,15 @@ import { createElement, Fragment } from "@wordpress/element";
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalSpacer as Spacer } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 
 import TypographyPanel from './typography-panel';
 import ScreenHeader from './header';
+import TypographyPreview from './typography-preview';
 const elements = {
   text: {
     description: __('Manage the fonts used on the site.'),
@@ -34,12 +37,55 @@ function ScreenTypographyElement(_ref) {
     name,
     element
   } = _ref;
+  const [headingLevel, setHeadingLevel] = useState('heading');
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: elements[element].title,
     description: elements[element].description
-  }), createElement(TypographyPanel, {
+  }), createElement(Spacer, {
+    marginX: 4
+  }, createElement(TypographyPreview, {
     name: name,
-    element: element
+    element: element,
+    headingLevel: headingLevel
+  })), element === 'heading' && createElement(Spacer, {
+    marginX: 4,
+    marginBottom: "1em"
+  }, createElement(ToggleGroupControl, {
+    label: __('Select heading level'),
+    hideLabelFromVision: true,
+    value: headingLevel,
+    onChange: setHeadingLevel,
+    isBlock: true,
+    size: "__unstable-large",
+    __nextHasNoMarginBottom: true
+  }, createElement(ToggleGroupControlOption, {
+    value: "heading"
+    /* translators: 'All' refers to selecting all heading levels 
+    and applying the same style to h1-h6. */
+    ,
+    label: __('All')
+  }), createElement(ToggleGroupControlOption, {
+    value: "h1",
+    label: __('H1')
+  }), createElement(ToggleGroupControlOption, {
+    value: "h2",
+    label: __('H2')
+  }), createElement(ToggleGroupControlOption, {
+    value: "h3",
+    label: __('H3')
+  }), createElement(ToggleGroupControlOption, {
+    value: "h4",
+    label: __('H4')
+  }), createElement(ToggleGroupControlOption, {
+    value: "h5",
+    label: __('H5')
+  }), createElement(ToggleGroupControlOption, {
+    value: "h6",
+    label: __('H6')
+  }))), createElement(TypographyPanel, {
+    name: name,
+    element: element,
+    headingLevel: headingLevel
   }));
 }
 

package/build-module/components/global-styles/screen-typography-element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography-element.js"],"names":["__","TypographyPanel","ScreenHeader","elements","text","description","title","link","heading","button","ScreenTypographyElement","name","element"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,OAAOC,YAAP,MAAyB,UAAzB;AAEA,MAAMC,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,WAAW,EAAEL,EAAE,CAAE,oCAAF,CADV;AAELM,IAAAA,KAAK,EAAEN,EAAE,CAAE,MAAF;AAFJ,GADU;AAKhBO,EAAAA,IAAI,EAAE;AACLF,IAAAA,WAAW,EAAEL,EAAE,CAAE,oDAAF,CADV;AAELM,IAAAA,KAAK,EAAEN,EAAE,CAAE,OAAF;AAFJ,GALU;AAShBQ,EAAAA,OAAO,EAAE;AACRH,IAAAA,WAAW,EAAEL,EAAE,CAAE,mDAAF,CADP;AAERM,IAAAA,KAAK,EAAEN,EAAE,CAAE,UAAF;AAFD,GATO;AAahBS,EAAAA,MAAM,EAAE;AACPJ,IAAAA,WAAW,EAAEL,EAAE,CAAE,kDAAF,CADR;AAEPM,IAAAA,KAAK,EAAEN,EAAE,CAAE,SAAF;AAFF;AAbQ,CAAjB;;AAmBA,SAASU,uBAAT,OAAsD;AAAA,MAApB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAoB;AACrD,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGT,QAAQ,CAAES,OAAF,CAAR,CAAoBN,KAD7B;AAEC,IAAA,WAAW,EAAGH,QAAQ,CAAES,OAAF,CAAR,CAAoBP;AAFnC,IADD,EAKC,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAGM,IAAxB;AAA+B,IAAA,OAAO,EAAGC;AAAzC,IALD,CADD;AASA;;AAED,eAAeF,uBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport TypographyPanel from './typography-panel';\nimport ScreenHeader from './header';\n\nconst elements = {\n\ttext: {\n\t\tdescription: __( 'Manage the fonts used on the site.' ),\n\t\ttitle: __( 'Text' ),\n\t},\n\tlink: {\n\t\tdescription: __( 'Manage the fonts and typography used on the links.' ),\n\t\ttitle: __( 'Links' ),\n\t},\n\theading: {\n\t\tdescription: __( 'Manage the fonts and typography used on headings.' ),\n\t\ttitle: __( 'Headings' ),\n\t},\n\tbutton: {\n\t\tdescription: __( 'Manage the fonts and typography used on buttons.' ),\n\t\ttitle: __( 'Buttons' ),\n\t},\n};\n\nfunction ScreenTypographyElement( { name, element } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ elements[ element ].title }\n\t\t\t\tdescription={ elements[ element ].description }\n\t\t\t/>\n\t\t\t<TypographyPanel name={ name } element={ element } />\n\t\t</>\n\t);\n}\n\nexport default ScreenTypographyElement;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography-element.js"],"names":["__","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","__experimentalSpacer","Spacer","useState","TypographyPanel","ScreenHeader","TypographyPreview","elements","text","description","title","link","heading","button","ScreenTypographyElement","name","element","headingLevel","setHeadingLevel"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport TypographyPanel from './typography-panel';\nimport ScreenHeader from './header';\nimport TypographyPreview from './typography-preview';\n\nconst elements = {\n\ttext: {\n\t\tdescription: __( 'Manage the fonts used on the site.' ),\n\t\ttitle: __( 'Text' ),\n\t},\n\tlink: {\n\t\tdescription: __( 'Manage the fonts and typography used on the links.' ),\n\t\ttitle: __( 'Links' ),\n\t},\n\theading: {\n\t\tdescription: __( 'Manage the fonts and typography used on headings.' ),\n\t\ttitle: __( 'Headings' ),\n\t},\n\tbutton: {\n\t\tdescription: __( 'Manage the fonts and typography used on buttons.' ),\n\t\ttitle: __( 'Buttons' ),\n\t},\n};\n\nfunction ScreenTypographyElement( { name, element } ) {\n\tconst [ headingLevel, setHeadingLevel ] = useState( 'heading' );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ elements[ element ].title }\n\t\t\t\tdescription={ elements[ element ].description }\n\t\t\t/>\n\t\t\t<Spacer marginX={ 4 }>\n\t\t\t\t<TypographyPreview\n\t\t\t\t\tname={ name }\n\t\t\t\t\telement={ element }\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t/>\n\t\t\t</Spacer>\n\t\t\t{ element === 'heading' && (\n\t\t\t\t<Spacer marginX={ 4 } marginBottom=\"1em\">\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\tlabel={ __( 'Select heading level' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvalue={ headingLevel }\n\t\t\t\t\t\tonChange={ setHeadingLevel }\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"heading\"\n\t\t\t\t\t\t\t/* translators: 'All' refers to selecting all heading levels \n\t\t\t\t\t\t\tand applying the same style to h1-h6. */\n\t\t\t\t\t\t\tlabel={ __( 'All' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h1\"\n\t\t\t\t\t\t\tlabel={ __( 'H1' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h2\"\n\t\t\t\t\t\t\tlabel={ __( 'H2' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h3\"\n\t\t\t\t\t\t\tlabel={ __( 'H3' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h4\"\n\t\t\t\t\t\t\tlabel={ __( 'H4' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h5\"\n\t\t\t\t\t\t\tlabel={ __( 'H5' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tvalue=\"h6\"\n\t\t\t\t\t\t\tlabel={ __( 'H6' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t</Spacer>\n\t\t\t) }\n\t\t\t<TypographyPanel\n\t\t\t\tname={ name }\n\t\t\t\telement={ element }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypographyElement;\n"]}

package/build-module/components/global-styles/typography-panel.js

@@ -4,20 +4,26 @@ import { createElement } from "@wordpress/element";
  * WordPress dependencies
  */
 import { LineHeightControl, __experimentalFontFamilyControl as FontFamilyControl, __experimentalFontAppearanceControl as FontAppearanceControl, __experimentalLetterSpacingControl as LetterSpacingControl, __experimentalTextTransformControl as TextTransformControl } from '@wordpress/block-editor';
-import { PanelBody, FontSizePicker, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalGrid as Grid } from '@wordpress/components';
+import { FontSizePicker, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 
 import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
 export function useHasTypographyPanel(name) {
+  const hasFontFamily = useHasFontFamilyControl(name);
   const hasLineHeight = useHasLineHeightControl(name);
   const hasFontAppearance = useHasAppearanceControl(name);
   const hasLetterSpacing = useHasLetterSpacingControl(name);
   const supports = getSupportedGlobalStylesPanels(name);
-  return hasLineHeight || hasFontAppearance || hasLetterSpacing || supports.includes('fontSize');
+  return hasFontFamily || hasLineHeight || hasFontAppearance || hasLetterSpacing || supports.includes('fontSize');
+}
+
+function useHasFontFamilyControl(name) {
+  const supports = getSupportedGlobalStylesPanels(name);
+  const [fontFamilies] = useSetting('typography.fontFamilies', name);
+  return supports.includes('fontFamily') && !!(fontFamilies !== null && fontFamilies !== void 0 && fontFamilies.length);
 }
 
 function useHasLineHeightControl(name) {
@@ -32,6 +38,22 @@ function useHasAppearanceControl(name) {
   return hasFontStyles || hasFontWeights;
 }
 
+function useAppearanceControlLabel(name) {
+  const supports = getSupportedGlobalStylesPanels(name);
+  const hasFontStyles = useSetting('typography.fontStyle', name)[0] && supports.includes('fontStyle');
+  const hasFontWeights = useSetting('typography.fontWeight', name)[0] && supports.includes('fontWeight');
+
+  if (!hasFontStyles) {
+    return __('Font weight');
+  }
+
+  if (!hasFontWeights) {
+    return __('Font style');
+  }
+
+  return __('Appearance');
+}
+
 function useHasLetterSpacingControl(name, element) {
   const setting = useSetting('typography.letterSpacing', name)[0];
 
@@ -62,17 +84,51 @@ function useHasTextTransformControl(name, element) {
   return supports.includes('textTransform');
 }
 
+function useStyleWithReset(path, blockName) {
+  const [style, setStyle] = useStyle(path, blockName);
+  const [userStyle] = useStyle(path, blockName, 'user');
+
+  const hasStyle = () => !!userStyle;
+
+  const resetStyle = () => setStyle(undefined);
+
+  return [style, setStyle, hasStyle, resetStyle];
+}
+
+function useFontAppearance(prefix, name) {
+  const [fontStyle, setFontStyle] = useStyle(prefix + 'typography.fontStyle', name);
+  const [userFontStyle] = useStyle(prefix + 'typography.fontStyle', name, 'user');
+  const [fontWeight, setFontWeight] = useStyle(prefix + 'typography.fontWeight', name);
+  const [userFontWeight] = useStyle(prefix + 'typography.fontWeight', name, 'user');
+
+  const hasFontAppearance = () => !!userFontStyle || !!userFontWeight;
+
+  const resetFontAppearance = () => {
+    setFontStyle(undefined);
+    setFontWeight(undefined);
+  };
+
+  return {
+    fontStyle,
+    setFontStyle,
+    fontWeight,
+    setFontWeight,
+    hasFontAppearance,
+    resetFontAppearance
+  };
+}
+
 export default function TypographyPanel(_ref) {
   let {
     name,
-    element
+    element,
+    headingLevel
   } = _ref;
-  const [selectedLevel, setCurrentTab] = useState('heading');
   const supports = getSupportedGlobalStylesPanels(name);
   let prefix = '';
 
   if (element === 'heading') {
-    prefix = `elements.${selectedLevel}.`;
+    prefix = `elements.${headingLevel}.`;
   } else if (element && element !== 'text') {
     prefix = `elements.${element}.`;
   }
@@ -82,102 +138,77 @@ export default function TypographyPanel(_ref) {
   const [fontFamilies] = useSetting('typography.fontFamilies', name);
   const hasFontStyles = useSetting('typography.fontStyle', name)[0] && supports.includes('fontStyle');
   const hasFontWeights = useSetting('typography.fontWeight', name)[0] && supports.includes('fontWeight');
+  const hasFontFamilyEnabled = useHasFontFamilyControl(name);
   const hasLineHeightEnabled = useHasLineHeightControl(name);
   const hasAppearanceControl = useHasAppearanceControl(name);
+  const appearanceControlLabel = useAppearanceControlLabel(name);
   const hasLetterSpacingControl = useHasLetterSpacingControl(name, element);
   const hasTextTransformControl = useHasTextTransformControl(name, element);
   /* Disable font size controls when the option to style all headings is selected. */
 
   let hasFontSizeEnabled = supports.includes('fontSize');
 
-  if (element === 'heading' && selectedLevel === 'heading') {
+  if (element === 'heading' && headingLevel === 'heading') {
     hasFontSizeEnabled = false;
   }
 
-  const [fontFamily, setFontFamily] = useStyle(prefix + 'typography.fontFamily', name);
-  const [fontSize, setFontSize] = useStyle(prefix + 'typography.fontSize', name);
-  const [fontStyle, setFontStyle] = useStyle(prefix + 'typography.fontStyle', name);
-  const [fontWeight, setFontWeight] = useStyle(prefix + 'typography.fontWeight', name);
-  const [lineHeight, setLineHeight] = useStyle(prefix + 'typography.lineHeight', name);
-  const [letterSpacing, setLetterSpacing] = useStyle(prefix + 'typography.letterSpacing', name);
-  const [textTransform, setTextTransform] = useStyle(prefix + 'typography.textTransform', name);
-  const [backgroundColor] = useStyle(prefix + 'color.background', name);
-  const [gradientValue] = useStyle(prefix + 'color.gradient', name);
-  const [color] = useStyle(prefix + 'color.text', name);
-  const extraStyles = element === 'link' ? {
-    textDecoration: 'underline'
-  } : {};
-  return createElement(PanelBody, {
-    className: "edit-site-typography-panel",
-    initialOpen: true
-  }, createElement("div", {
-    className: "edit-site-typography-panel__preview",
-    style: {
-      fontFamily: fontFamily !== null && fontFamily !== void 0 ? fontFamily : 'serif',
-      background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
-      color,
-      fontSize,
-      fontStyle,
-      fontWeight,
-      letterSpacing,
-      ...extraStyles
-    }
-  }, "Aa"), createElement(Grid, {
-    columns: 2,
-    rowGap: 16,
-    columnGap: 8
-  }, element === 'heading' && createElement("div", {
-    className: "edit-site-typography-panel__full-width-control"
-  }, createElement(ToggleGroupControl, {
-    label: __('Select heading level'),
-    hideLabelFromVision: true,
-    value: selectedLevel,
-    onChange: setCurrentTab,
-    isBlock: true,
-    size: "__unstable-large",
-    __nextHasNoMarginBottom: true
-  }, createElement(ToggleGroupControlOption, {
-    value: "heading"
-    /* translators: 'All' refers to selecting all heading levels 
-    and applying the same style to h1-h6. */
-    ,
-    label: __('All')
-  }), createElement(ToggleGroupControlOption, {
-    value: "h1",
-    label: __('H1')
-  }), createElement(ToggleGroupControlOption, {
-    value: "h2",
-    label: __('H2')
-  }), createElement(ToggleGroupControlOption, {
-    value: "h3",
-    label: __('H3')
-  }), createElement(ToggleGroupControlOption, {
-    value: "h4",
-    label: __('H4')
-  }), createElement(ToggleGroupControlOption, {
-    value: "h5",
-    label: __('H5')
-  }), createElement(ToggleGroupControlOption, {
-    value: "h6",
-    label: __('H6')
-  }))), supports.includes('fontFamily') && createElement("div", {
-    className: "edit-site-typography-panel__full-width-control"
+  const [fontFamily, setFontFamily, hasFontFamily, resetFontFamily] = useStyleWithReset(prefix + 'typography.fontFamily', name);
+  const [fontSize, setFontSize, hasFontSize, resetFontSize] = useStyleWithReset(prefix + 'typography.fontSize', name);
+  const {
+    fontStyle,
+    setFontStyle,
+    fontWeight,
+    setFontWeight,
+    hasFontAppearance,
+    resetFontAppearance
+  } = useFontAppearance(prefix, name);
+  const [lineHeight, setLineHeight, hasLineHeight, resetLineHeight] = useStyleWithReset(prefix + 'typography.lineHeight', name);
+  const [letterSpacing, setLetterSpacing, hasLetterSpacing, resetLetterSpacing] = useStyleWithReset(prefix + 'typography.letterSpacing', name);
+  const [textTransform, setTextTransform, hasTextTransform, resetTextTransform] = useStyleWithReset(prefix + 'typography.textTransform', name);
+
+  const resetAll = () => {
+    resetFontFamily();
+    resetFontSize();
+    resetFontAppearance();
+    resetLineHeight();
+    resetLetterSpacing();
+    resetTextTransform();
+  };
+
+  return createElement(ToolsPanel, {
+    label: __('Typography'),
+    resetAll: resetAll
+  }, hasFontFamilyEnabled && createElement(ToolsPanelItem, {
+    label: __('Font family'),
+    hasValue: hasFontFamily,
+    onDeselect: resetFontFamily,
+    isShownByDefault: true
   }, createElement(FontFamilyControl, {
     fontFamilies: fontFamilies,
     value: fontFamily,
     onChange: setFontFamily,
     size: "__unstable-large",
     __nextHasNoMarginBottom: true
-  })), hasFontSizeEnabled && createElement("div", {
-    className: "edit-site-typography-panel__full-width-control"
+  })), hasFontSizeEnabled && createElement(ToolsPanelItem, {
+    label: __('Font size'),
+    hasValue: hasFontSize,
+    onDeselect: resetFontSize,
+    isShownByDefault: true
   }, createElement(FontSizePicker, {
     value: fontSize,
     onChange: setFontSize,
     fontSizes: fontSizes,
     disableCustomFontSizes: disableCustomFontSizes,
+    withReset: false,
     size: "__unstable-large",
     __nextHasNoMarginBottom: true
-  })), hasAppearanceControl && createElement(FontAppearanceControl, {
+  })), hasAppearanceControl && createElement(ToolsPanelItem, {
+    className: "single-column",
+    label: appearanceControlLabel,
+    hasValue: hasFontAppearance,
+    onDeselect: resetFontAppearance,
+    isShownByDefault: true
+  }, createElement(FontAppearanceControl, {
     value: {
       fontStyle,
       fontWeight
@@ -194,19 +225,34 @@ export default function TypographyPanel(_ref) {
     hasFontWeights: hasFontWeights,
     size: "__unstable-large",
     __nextHasNoMarginBottom: true
-  }), hasLineHeightEnabled && createElement(LineHeightControl, {
+  })), hasLineHeightEnabled && createElement(ToolsPanelItem, {
+    className: "single-column",
+    label: __('Line height'),
+    hasValue: hasLineHeight,
+    onDeselect: resetLineHeight,
+    isShownByDefault: true
+  }, createElement(LineHeightControl, {
     __nextHasNoMarginBottom: true,
     __unstableInputWidth: "auto",
     value: lineHeight,
     onChange: setLineHeight,
     size: "__unstable-large"
-  }), hasLetterSpacingControl && createElement(LetterSpacingControl, {
+  })), hasLetterSpacingControl && createElement(ToolsPanelItem, {
+    className: "single-column",
+    label: __('Letter spacing'),
+    hasValue: hasLetterSpacing,
+    onDeselect: resetLetterSpacing,
+    isShownByDefault: true
+  }, createElement(LetterSpacingControl, {
     value: letterSpacing,
     onChange: setLetterSpacing,
     size: "__unstable-large",
     __unstableInputWidth: "auto"
-  }), hasTextTransformControl && createElement("div", {
-    className: "edit-site-typography-panel__full-width-control"
+  })), hasTextTransformControl && createElement(ToolsPanelItem, {
+    label: __('Letter case'),
+    hasValue: hasTextTransform,
+    onDeselect: resetTextTransform,
+    isShownByDefault: true
   }, createElement(TextTransformControl, {
     value: textTransform,
     onChange: setTextTransform,
@@ -214,6 +260,6 @@ export default function TypographyPanel(_ref) {
     isBlock: true,
     size: "__unstable-large",
     __nextHasNoMarginBottom: true
-  }))));
+  })));
 }
 //# sourceMappingURL=typography-panel.js.map