@wordpress/edit-site 6.13.1-next.cd6172eb0.0 → 6.14.0

package/src/components/style-book/index.js

@@ -17,12 +17,13 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 	useSettings,
+	BlockEditorProvider,
 	__unstableEditorStyles as EditorStyles,
 	__unstableIframe as Iframe,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, dispatch } from '@wordpress/data';
 import { useResizeObserver } from '@wordpress/compose';
 import {
 	useMemo,
@@ -45,6 +46,7 @@ import {
 	getTopLevelStyleBookCategories,
 } from './categories';
 import { getExamples } from './examples';
+import { store as siteEditorStore } from '../../store';
 
 const {
 	ExperimentalBlockEditorProvider,
@@ -67,11 +69,14 @@ function isObjectEmpty( object ) {
  * @param {HTMLIFrameElement} iframe   The target iframe.
  */
 const scrollToSection = ( anchorId, iframe ) => {
-	if ( ! iframe || ! iframe?.contentDocument ) {
+	if ( ! anchorId || ! iframe || ! iframe?.contentDocument ) {
 		return;
 	}
 
-	const element = iframe.contentDocument.getElementById( anchorId );
+	const element =
+		anchorId === 'top'
+			? iframe.contentDocument.body
+			: iframe.contentDocument.getElementById( anchorId );
 	if ( element ) {
 		element.scrollIntoView( {
 			behavior: 'smooth',
@@ -89,6 +94,12 @@ const scrollToSection = ( anchorId, iframe ) => {
  */
 const getStyleBookNavigationFromPath = ( path ) => {
 	if ( path && typeof path === 'string' ) {
+		if ( path === '/' ) {
+			return {
+				top: true,
+			};
+		}
+
 		if ( path.startsWith( '/typography' ) ) {
 			return {
 				block: 'typography',
@@ -182,6 +193,31 @@ function useMultiOriginPalettes() {
 	return palettes;
 }
 
+/**
+ * Get deduped examples for single page stylebook.
+ * @param {Array} examples Array of examples.
+ * @return {Array} Deduped examples.
+ */
+export function getExamplesForSinglePageUse( examples ) {
+	const examplesForSinglePageUse = [];
+	const overviewCategoryExamples = getExamplesByCategory(
+		{ slug: 'overview' },
+		examples
+	);
+	examplesForSinglePageUse.push( ...overviewCategoryExamples.examples );
+	const otherExamples = examples.filter( ( example ) => {
+		return (
+			example.category !== 'overview' &&
+			! overviewCategoryExamples.examples.find(
+				( overviewExample ) => overviewExample.name === example.name
+			)
+		);
+	} );
+	examplesForSinglePageUse.push( ...otherExamples );
+
+	return examplesForSinglePageUse;
+}
+
 function StyleBook( {
 	enableResizing = true,
 	isSelected,
@@ -208,21 +244,7 @@ function StyleBook( {
 		[ examples ]
 	);
 
-	const examplesForSinglePageUse = [];
-	const overviewCategoryExamples = getExamplesByCategory(
-		{ slug: 'overview' },
-		examples
-	);
-	examplesForSinglePageUse.push( ...overviewCategoryExamples.examples );
-	const otherExamples = examples.filter( ( example ) => {
-		return (
-			example.category !== 'overview' &&
-			! overviewCategoryExamples.examples.find(
-				( overviewExample ) => overviewExample.name === example.name
-			)
-		);
-	} );
-	examplesForSinglePageUse.push( ...otherExamples );
+	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
 
 	const { base: baseConfig } = useContext( GlobalStylesContext );
 	const goTo = getStyleBookNavigationFromPath( path );
@@ -321,7 +343,76 @@ function StyleBook( {
 	);
 }
 
-const StyleBookBody = ( {
+/**
+ * Style Book Preview component renders the stylebook without the Editor dependency.
+ *
+ * @param {Object}   props            Component props.
+ * @param {string}   props.path       Path to the selected block.
+ * @param {Object}   props.userConfig User configuration.
+ * @param {Function} props.isSelected Function to check if a block is selected.
+ * @param {Function} props.onSelect   Function to select a block.
+ * @return {Object} Style Book Preview component.
+ */
+export const StyleBookPreview = ( {
+	path = '',
+	userConfig = {},
+	isSelected,
+	onSelect,
+} ) => {
+	const siteEditorSettings = useSelect(
+		( select ) => select( siteEditorStore ).getSettings(),
+		[]
+	);
+	// Update block editor settings because useMultipleOriginColorsAndGradients fetch colours from there.
+	dispatch( blockEditorStore ).updateSettings( siteEditorSettings );
+
+	const [ resizeObserver, sizes ] = useResizeObserver();
+	const colors = useMultiOriginPalettes();
+	const examples = getExamples( colors );
+	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
+
+	const { base: baseConfig } = useContext( GlobalStylesContext );
+	const goTo = getStyleBookNavigationFromPath( path );
+
+	const mergedConfig = useMemo( () => {
+		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
+			return mergeBaseAndUserConfigs( baseConfig, userConfig );
+		}
+		return {};
+	}, [ baseConfig, userConfig ] );
+
+	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
+
+	const settings = useMemo(
+		() => ( {
+			...siteEditorSettings,
+			styles:
+				! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )
+					? globalStyles
+					: siteEditorSettings.styles,
+			isPreviewMode: true,
+		} ),
+		[ globalStyles, siteEditorSettings, userConfig ]
+	);
+
+	return (
+		<div className="edit-site-style-book">
+			{ resizeObserver }
+			<BlockEditorProvider settings={ settings }>
+				<StyleBookBody
+					examples={ examplesForSinglePageUse }
+					settings={ settings }
+					goTo={ goTo }
+					sizes={ sizes }
+					isSelected={ isSelected }
+					onSelect={ onSelect }
+				/>
+			</BlockEditorProvider>
+		</div>
+	);
+};
+
+export const StyleBookBody = ( {
 	category,
 	examples,
 	isSelected,
@@ -365,10 +456,19 @@ const StyleBookBody = ( {
 
 	const handleLoad = () => setHasIframeLoaded( true );
 	useLayoutEffect( () => {
-		if ( goTo?.block && hasIframeLoaded && iframeRef?.current ) {
-			scrollToSection( `example-${ goTo?.block }`, iframeRef?.current );
+		if ( hasIframeLoaded && iframeRef?.current ) {
+			if ( goTo?.top ) {
+				scrollToSection( 'top', iframeRef?.current );
+				return;
+			}
+			if ( goTo?.block ) {
+				scrollToSection(
+					`example-${ goTo?.block }`,
+					iframeRef?.current
+				);
+			}
 		}
-	}, [ iframeRef?.current, goTo?.block, scrollToSection, hasIframeLoaded ] );
+	}, [ iframeRef?.current, goTo, scrollToSection, hasIframeLoaded ] );
 
 	return (
 		<Iframe
@@ -439,7 +539,11 @@ const Examples = memo(
 							content={ example.content }
 							blocks={ example.blocks }
 							isSelected={ isSelected?.( example.name ) }
-							onClick={ () => onSelect?.( example.name ) }
+							onClick={
+								!! onSelect
+									? () => onSelect( example.name )
+									: null
+							}
 						/>
 					) ) }
 				{ !! filteredExamples?.subcategories?.length &&
@@ -476,9 +580,7 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => {
 				content={ example.content }
 				blocks={ example.blocks }
 				isSelected={ isSelected?.( example.name ) }
-				onClick={ () => {
-					onSelect?.( example.name );
-				} }
+				onClick={ !! onSelect ? () => onSelect( example.name ) : null }
 			/>
 		) )
 	);
@@ -506,12 +608,13 @@ const Example = ( { id, title, blocks, isSelected, onClick, content } ) => {
 		[ blocks ]
 	);
 
-	const disabledProps = disabledExamples.includes( id )
-		? {
-				disabled: true,
-				accessibleWhenDisabled: true,
-		  }
-		: {};
+	const disabledProps =
+		disabledExamples.includes( id ) || ! onClick
+			? {
+					disabled: true,
+					accessibleWhenDisabled: !! onClick,
+			  }
+			: {};
 
 	return (
 		<div role="row">
@@ -522,13 +625,17 @@ const Example = ( { id, title, blocks, isSelected, onClick, content } ) => {
 						'is-disabled-example': !! disabledProps?.disabled,
 					} ) }
 					id={ id }
-					aria-label={ sprintf(
-						// translators: %s: Title of a block, e.g. Heading.
-						__( 'Open %s styles in Styles panel' ),
-						title
-					) }
+					aria-label={
+						!! onClick
+							? sprintf(
+									// translators: %s: Title of a block, e.g. Heading.
+									__( 'Open %s styles in Styles panel' ),
+									title
+							  )
+							: undefined
+					}
 					render={ <div /> }
-					role="button"
+					role={ !! onClick ? 'button' : null }
 					onClick={ onClick }
 					{ ...disabledProps }
 				>

package/src/components/style-book/style.scss

@@ -12,6 +12,10 @@
 }
 
 .edit-site-style-book__iframe {
+	display: block;
+	height: 100%;
+	width: 100%;
+
 	&.is-button {
 		border-radius: $radius-large;
 	}

package/src/components/style-book/types.ts

@@ -1,4 +1,4 @@
-type Block = {
+export type Block = {
 	name: string;
 	attributes: Record< string, unknown >;
 	innerBlocks?: Block[];

package/src/style.scss

@@ -21,9 +21,11 @@
 @import "./components/sidebar-navigation-screen-details-footer/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
 @import "./components/sidebar-navigation-screen-patterns/style.scss";
+@import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
+@import "./components/sidebar-navigation-screen-main/style.scss";
+@import "./components/sidebar-navigation-screen-templates-browse/style.scss";
 @import "./components/sidebar-dataviews/style.scss";
 @import "./components/site-hub/style.scss";
-@import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
 @import "./components/editor-canvas-container/style.scss";
@@ -47,6 +49,7 @@
 	mix-blend-mode: normal;
 	display: block;
 }
+
 /* stylelint-enable */
 
 body.js #wpadminbar {

package/build/components/error-boundary/index.js

@@ -1,47 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var _hooks = require("@wordpress/hooks");
-var _warning = _interopRequireDefault(require("./warning"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-class ErrorBoundary extends _element.Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      error: null
-    };
-  }
-  componentDidCatch(error) {
-    (0, _hooks.doAction)('editor.ErrorBoundary.errorLogged', error);
-  }
-  static getDerivedStateFromError(error) {
-    return {
-      error
-    };
-  }
-  render() {
-    if (!this.state.error) {
-      return this.props.children;
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_warning.default, {
-      message: (0, _i18n.__)('The editor has encountered an unexpected error.'),
-      error: this.state.error
-    });
-  }
-}
-exports.default = ErrorBoundary;
-//# sourceMappingURL=index.js.map

package/build/components/error-boundary/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_element","require","_i18n","_hooks","_warning","_interopRequireDefault","_jsxRuntime","ErrorBoundary","Component","constructor","arguments","state","error","componentDidCatch","doAction","getDerivedStateFromError","render","props","children","jsx","default","message","__","exports"],"sources":["@wordpress/edit-site/src/components/error-boundary/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { doAction } from '@wordpress/hooks';\n\n/**\n * Internal dependencies\n */\nimport ErrorBoundaryWarning from './warning';\n\nexport default class ErrorBoundary extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\n\t\tthis.state = {\n\t\t\terror: null,\n\t\t};\n\t}\n\n\tcomponentDidCatch( error ) {\n\t\tdoAction( 'editor.ErrorBoundary.errorLogged', error );\n\t}\n\n\tstatic getDerivedStateFromError( error ) {\n\t\treturn { error };\n\t}\n\n\trender() {\n\t\tif ( ! this.state.error ) {\n\t\t\treturn this.props.children;\n\t\t}\n\n\t\treturn (\n\t\t\t<ErrorBoundaryWarning\n\t\t\t\tmessage={ __(\n\t\t\t\t\t'The editor has encountered an unexpected error.'\n\t\t\t\t) }\n\t\t\t\terror={ this.state.error }\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAKA,IAAAG,QAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA6C,IAAAK,WAAA,GAAAL,OAAA;AAV7C;AACA;AACA;;AAKA;AACA;AACA;;AAGe,MAAMM,aAAa,SAASC,kBAAS,CAAC;EACpDC,WAAWA,CAAA,EAAG;IACb,KAAK,CAAE,GAAGC,SAAU,CAAC;IAErB,IAAI,CAACC,KAAK,GAAG;MACZC,KAAK,EAAE;IACR,CAAC;EACF;EAEAC,iBAAiBA,CAAED,KAAK,EAAG;IAC1B,IAAAE,eAAQ,EAAE,kCAAkC,EAAEF,KAAM,CAAC;EACtD;EAEA,OAAOG,wBAAwBA,CAAEH,KAAK,EAAG;IACxC,OAAO;MAAEA;IAAM,CAAC;EACjB;EAEAI,MAAMA,CAAA,EAAG;IACR,IAAK,CAAE,IAAI,CAACL,KAAK,CAACC,KAAK,EAAG;MACzB,OAAO,IAAI,CAACK,KAAK,CAACC,QAAQ;IAC3B;IAEA,oBACC,IAAAZ,WAAA,CAAAa,GAAA,EAACf,QAAA,CAAAgB,OAAoB;MACpBC,OAAO,EAAG,IAAAC,QAAE,EACX,iDACD,CAAG;MACHV,KAAK,EAAG,IAAI,CAACD,KAAK,CAACC;IAAO,CAC1B,CAAC;EAEJ;AACD;AAACW,OAAA,CAAAH,OAAA,GAAAb,aAAA","ignoreList":[]}

package/build/components/error-boundary/warning.js

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ErrorBoundaryWarning;
-var _i18n = require("@wordpress/i18n");
-var _components = require("@wordpress/components");
-var _blockEditor = require("@wordpress/block-editor");
-var _compose = require("@wordpress/compose");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-function CopyButton({
-  text,
-  children
-}) {
-  const ref = (0, _compose.useCopyToClipboard)(text);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-    __next40pxDefaultSize: true,
-    variant: "secondary",
-    ref: ref,
-    children: children
-  });
-}
-function ErrorBoundaryWarning({
-  message,
-  error
-}) {
-  const actions = [/*#__PURE__*/(0, _jsxRuntime.jsx)(CopyButton, {
-    text: error.stack,
-    children: (0, _i18n.__)('Copy Error')
-  }, "copy-error")];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.Warning, {
-    className: "editor-error-boundary",
-    actions: actions,
-    children: message
-  });
-}
-//# sourceMappingURL=warning.js.map

package/build/components/error-boundary/warning.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_i18n","require","_components","_blockEditor","_compose","_jsxRuntime","CopyButton","text","children","ref","useCopyToClipboard","jsx","Button","__next40pxDefaultSize","variant","ErrorBoundaryWarning","message","error","actions","stack","__","Warning","className"],"sources":["@wordpress/edit-site/src/components/error-boundary/warning.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport { Warning } from '@wordpress/block-editor';\nimport { useCopyToClipboard } from '@wordpress/compose';\n\nfunction CopyButton( { text, children } ) {\n\tconst ref = useCopyToClipboard( text );\n\treturn (\n\t\t<Button __next40pxDefaultSize variant=\"secondary\" ref={ ref }>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\nexport default function ErrorBoundaryWarning( { message, error } ) {\n\tconst actions = [\n\t\t<CopyButton key=\"copy-error\" text={ error.stack }>\n\t\t\t{ __( 'Copy Error' ) }\n\t\t</CopyButton>,\n\t];\n\n\treturn (\n\t\t<Warning className=\"editor-error-boundary\" actions={ actions }>\n\t\t\t{ message }\n\t\t</Warning>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAAwD,IAAAI,WAAA,GAAAJ,OAAA;AANxD;AACA;AACA;;AAMA,SAASK,UAAUA,CAAE;EAAEC,IAAI;EAAEC;AAAS,CAAC,EAAG;EACzC,MAAMC,GAAG,GAAG,IAAAC,2BAAkB,EAAEH,IAAK,CAAC;EACtC,oBACC,IAAAF,WAAA,CAAAM,GAAA,EAACT,WAAA,CAAAU,MAAM;IAACC,qBAAqB;IAACC,OAAO,EAAC,WAAW;IAACL,GAAG,EAAGA,GAAK;IAAAD,QAAA,EAC1DA;EAAQ,CACH,CAAC;AAEX;AAEe,SAASO,oBAAoBA,CAAE;EAAEC,OAAO;EAAEC;AAAM,CAAC,EAAG;EAClE,MAAMC,OAAO,GAAG,cACf,IAAAb,WAAA,CAAAM,GAAA,EAACL,UAAU;IAAkBC,IAAI,EAAGU,KAAK,CAACE,KAAO;IAAAX,QAAA,EAC9C,IAAAY,QAAE,EAAE,YAAa;EAAC,GADL,YAEJ,CAAC,CACb;EAED,oBACC,IAAAf,WAAA,CAAAM,GAAA,EAACR,YAAA,CAAAkB,OAAO;IAACC,SAAS,EAAC,uBAAuB;IAACJ,OAAO,EAAGA,OAAS;IAAAV,QAAA,EAC3DQ;EAAO,CACD,CAAC;AAEZ","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["_blockEditor","require","_components","_compose","_element","_lockUnlock","_jsxRuntime","useGlobalStyle","useGlobalStylesOutput","unlock","blockEditorPrivateApis","normalizedWidth","normalizedHeight","THROTTLE_OPTIONS","leading","trailing","PreviewIframe","children","label","isFocused","withHoverView","backgroundColor","gradientValue","styles","disableMotion","useReducedMotion","isHovered","setIsHovered","useState","containerResizeListener","width","useResizeObserver","throttledWidth","setThrottledWidthState","ratioState","setRatioState","setThrottledWidth","useThrottle","useLayoutEffect","newRatio","ratioDiff","isRatioDiffBigEnough","Math","abs","fallbackRatio","ratio","editorStyles","useMemo","css","isGlobalStyles","isReady","jsxs","Fragment","jsx","style","position","__unstableIframe","className","height","onMouseEnter","onMouseLeave","tabIndex","__unstableEditorStyles","__unstableMotion","div","background","cursor","undefined","initial","animate","concat","map","child","key"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-iframe.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\nexport default function PreviewIframe( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n} ) {\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the iframe at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the iframe at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/*\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t */\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\t/*\n\t * Reset leaked styles from WP common.css and remove main content layout padding and border.\n\t * Add pointer cursor to the body to indicate the iframe is interactive,\n\t * similar to Typography variation previews.\n\t */\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: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;cursor: pointer;}',\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\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<Iframe\n\t\t\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<EditorStyles styles={ editorStyles } />\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t\tcursor: withHoverView ? 'pointer' : undefined,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ []\n\t\t\t\t\t\t\t.concat( children ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child, key ) => child( { ratio, key } ) ) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</Iframe>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/error-boundary/index.js

@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { doAction } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import ErrorBoundaryWarning from './warning';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default class ErrorBoundary extends Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      error: null
-    };
-  }
-  componentDidCatch(error) {
-    doAction('editor.ErrorBoundary.errorLogged', error);
-  }
-  static getDerivedStateFromError(error) {
-    return {
-      error
-    };
-  }
-  render() {
-    if (!this.state.error) {
-      return this.props.children;
-    }
-    return /*#__PURE__*/_jsx(ErrorBoundaryWarning, {
-      message: __('The editor has encountered an unexpected error.'),
-      error: this.state.error
-    });
-  }
-}
-//# sourceMappingURL=index.js.map

package/build-module/components/error-boundary/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Component","__","doAction","ErrorBoundaryWarning","jsx","_jsx","ErrorBoundary","constructor","arguments","state","error","componentDidCatch","getDerivedStateFromError","render","props","children","message"],"sources":["@wordpress/edit-site/src/components/error-boundary/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { doAction } from '@wordpress/hooks';\n\n/**\n * Internal dependencies\n */\nimport ErrorBoundaryWarning from './warning';\n\nexport default class ErrorBoundary extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\n\t\tthis.state = {\n\t\t\terror: null,\n\t\t};\n\t}\n\n\tcomponentDidCatch( error ) {\n\t\tdoAction( 'editor.ErrorBoundary.errorLogged', error );\n\t}\n\n\tstatic getDerivedStateFromError( error ) {\n\t\treturn { error };\n\t}\n\n\trender() {\n\t\tif ( ! this.state.error ) {\n\t\t\treturn this.props.children;\n\t\t}\n\n\t\treturn (\n\t\t\t<ErrorBoundaryWarning\n\t\t\t\tmessage={ __(\n\t\t\t\t\t'The editor has encountered an unexpected error.'\n\t\t\t\t) }\n\t\t\t\terror={ this.state.error }\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,QAAQ,QAAQ,kBAAkB;;AAE3C;AACA;AACA;AACA,OAAOC,oBAAoB,MAAM,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,eAAe,MAAMC,aAAa,SAASN,SAAS,CAAC;EACpDO,WAAWA,CAAA,EAAG;IACb,KAAK,CAAE,GAAGC,SAAU,CAAC;IAErB,IAAI,CAACC,KAAK,GAAG;MACZC,KAAK,EAAE;IACR,CAAC;EACF;EAEAC,iBAAiBA,CAAED,KAAK,EAAG;IAC1BR,QAAQ,CAAE,kCAAkC,EAAEQ,KAAM,CAAC;EACtD;EAEA,OAAOE,wBAAwBA,CAAEF,KAAK,EAAG;IACxC,OAAO;MAAEA;IAAM,CAAC;EACjB;EAEAG,MAAMA,CAAA,EAAG;IACR,IAAK,CAAE,IAAI,CAACJ,KAAK,CAACC,KAAK,EAAG;MACzB,OAAO,IAAI,CAACI,KAAK,CAACC,QAAQ;IAC3B;IAEA,oBACCV,IAAA,CAACF,oBAAoB;MACpBa,OAAO,EAAGf,EAAE,CACX,iDACD,CAAG;MACHS,KAAK,EAAG,IAAI,CAACD,KAAK,CAACC;IAAO,CAC1B,CAAC;EAEJ;AACD","ignoreList":[]}

package/build-module/components/error-boundary/warning.js

@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { Warning } from '@wordpress/block-editor';
-import { useCopyToClipboard } from '@wordpress/compose';
-import { jsx as _jsx } from "react/jsx-runtime";
-function CopyButton({
-  text,
-  children
-}) {
-  const ref = useCopyToClipboard(text);
-  return /*#__PURE__*/_jsx(Button, {
-    __next40pxDefaultSize: true,
-    variant: "secondary",
-    ref: ref,
-    children: children
-  });
-}
-export default function ErrorBoundaryWarning({
-  message,
-  error
-}) {
-  const actions = [/*#__PURE__*/_jsx(CopyButton, {
-    text: error.stack,
-    children: __('Copy Error')
-  }, "copy-error")];
-  return /*#__PURE__*/_jsx(Warning, {
-    className: "editor-error-boundary",
-    actions: actions,
-    children: message
-  });
-}
-//# sourceMappingURL=warning.js.map

package/build-module/components/error-boundary/warning.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["__","Button","Warning","useCopyToClipboard","jsx","_jsx","CopyButton","text","children","ref","__next40pxDefaultSize","variant","ErrorBoundaryWarning","message","error","actions","stack","className"],"sources":["@wordpress/edit-site/src/components/error-boundary/warning.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport { Warning } from '@wordpress/block-editor';\nimport { useCopyToClipboard } from '@wordpress/compose';\n\nfunction CopyButton( { text, children } ) {\n\tconst ref = useCopyToClipboard( text );\n\treturn (\n\t\t<Button __next40pxDefaultSize variant=\"secondary\" ref={ ref }>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\nexport default function ErrorBoundaryWarning( { message, error } ) {\n\tconst actions = [\n\t\t<CopyButton key=\"copy-error\" text={ error.stack }>\n\t\t\t{ __( 'Copy Error' ) }\n\t\t</CopyButton>,\n\t];\n\n\treturn (\n\t\t<Warning className=\"editor-error-boundary\" actions={ actions }>\n\t\t\t{ message }\n\t\t</Warning>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,OAAO,QAAQ,yBAAyB;AACjD,SAASC,kBAAkB,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExD,SAASC,UAAUA,CAAE;EAAEC,IAAI;EAAEC;AAAS,CAAC,EAAG;EACzC,MAAMC,GAAG,GAAGN,kBAAkB,CAAEI,IAAK,CAAC;EACtC,oBACCF,IAAA,CAACJ,MAAM;IAACS,qBAAqB;IAACC,OAAO,EAAC,WAAW;IAACF,GAAG,EAAGA,GAAK;IAAAD,QAAA,EAC1DA;EAAQ,CACH,CAAC;AAEX;AAEA,eAAe,SAASI,oBAAoBA,CAAE;EAAEC,OAAO;EAAEC;AAAM,CAAC,EAAG;EAClE,MAAMC,OAAO,GAAG,cACfV,IAAA,CAACC,UAAU;IAAkBC,IAAI,EAAGO,KAAK,CAACE,KAAO;IAAAR,QAAA,EAC9CR,EAAE,CAAE,YAAa;EAAC,GADL,YAEJ,CAAC,CACb;EAED,oBACCK,IAAA,CAACH,OAAO;IAACe,SAAS,EAAC,uBAAuB;IAACF,OAAO,EAAGA,OAAS;IAAAP,QAAA,EAC3DK;EAAO,CACD,CAAC;AAEZ","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","useThrottle","useReducedMotion","useResizeObserver","useLayoutEffect","useState","useMemo","unlock","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useGlobalStyle","useGlobalStylesOutput","normalizedWidth","normalizedHeight","THROTTLE_OPTIONS","leading","trailing","PreviewIframe","children","label","isFocused","withHoverView","backgroundColor","gradientValue","styles","disableMotion","isHovered","setIsHovered","containerResizeListener","width","throttledWidth","setThrottledWidthState","ratioState","setRatioState","setThrottledWidth","newRatio","ratioDiff","isRatioDiffBigEnough","Math","abs","fallbackRatio","ratio","editorStyles","css","isGlobalStyles","isReady","style","position","className","height","onMouseEnter","onMouseLeave","tabIndex","div","background","cursor","undefined","initial","animate","concat","map","child","key"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-iframe.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\nexport default function PreviewIframe( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n} ) {\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the iframe at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the iframe at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/*\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t */\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\t/*\n\t * Reset leaked styles from WP common.css and remove main content layout padding and border.\n\t * Add pointer cursor to the body to indicate the iframe is interactive,\n\t * similar to Typography variation previews.\n\t */\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: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;cursor: pointer;}',\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\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<Iframe\n\t\t\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<EditorStyles styles={ editorStyles } />\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t\tcursor: withHoverView ? 'pointer' : undefined,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ []\n\t\t\t\t\t\t\t.concat( children ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child, key ) => child( { ratio, key } ) ) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</Iframe>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/src/components/error-boundary/index.js

@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { doAction } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import ErrorBoundaryWarning from './warning';
-
-export default class ErrorBoundary extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.state = {
-			error: null,
-		};
-	}
-
-	componentDidCatch( error ) {
-		doAction( 'editor.ErrorBoundary.errorLogged', error );
-	}
-
-	static getDerivedStateFromError( error ) {
-		return { error };
-	}
-
-	render() {
-		if ( ! this.state.error ) {
-			return this.props.children;
-		}
-
-		return (
-			<ErrorBoundaryWarning
-				message={ __(
-					'The editor has encountered an unexpected error.'
-				) }
-				error={ this.state.error }
-			/>
-		);
-	}
-}

package/src/components/error-boundary/test/error-boundary.js

@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import * as wpHooks from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import ErrorBoundary from '../index';
-
-const theError = new Error( 'Kaboom' );
-
-const ChildComponent = () => {
-	throw theError;
-};
-
-describe( 'Error Boundary', () => {
-	describe( 'when error is thrown from a Child component', () => {
-		it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => {
-			const doAction = jest.spyOn( wpHooks, 'doAction' );
-
-			render(
-				<ErrorBoundary>
-					<ChildComponent />
-				</ErrorBoundary>
-			);
-
-			expect( doAction ).toHaveBeenCalledWith(
-				'editor.ErrorBoundary.errorLogged',
-				theError
-			);
-			expect( console ).toHaveErrored();
-		} );
-	} );
-} );