@wordpress/edit-site 6.13.1-next.cd6172eb0.0 → 6.15.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,
@@ -31,8 +32,11 @@ import {
 	useContext,
 	useRef,
 	useLayoutEffect,
+	useEffect,
 } from '@wordpress/element';
 import { ENTER, SPACE } from '@wordpress/keycodes';
+import { uploadMedia } from '@wordpress/media-utils';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -45,6 +49,13 @@ import {
 	getTopLevelStyleBookCategories,
 } from './categories';
 import { getExamples } from './examples';
+import { store as siteEditorStore } from '../../store';
+import { useSection } from '../sidebar-global-styles-wrapper';
+import { GlobalStylesRenderer } from '../global-styles-renderer';
+import {
+	STYLE_BOOK_COLOR_GROUPS,
+	STYLE_BOOK_PREVIEW_CATEGORIES,
+} from '../style-book/constants';
 
 const {
 	ExperimentalBlockEditorProvider,
@@ -67,11 +78,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',
@@ -80,29 +94,24 @@ const scrollToSection = ( anchorId, iframe ) => {
 };
 
 /**
- * Parses a Block Editor navigation path to extract the block name and
- * build a style book navigation path. The object can be extended to include a category,
- * representing a style book tab/section.
+ * Parses a Block Editor navigation path to build a style book navigation path.
+ * The object can be extended to include a category, representing a style book tab/section.
  *
  * @param {string} path An internal Block Editor navigation path.
  * @return {null|{block: string}} An object containing the example to navigate to.
  */
 const getStyleBookNavigationFromPath = ( path ) => {
 	if ( path && typeof path === 'string' ) {
-		if ( path.startsWith( '/typography' ) ) {
+		if (
+			path === '/' ||
+			path.startsWith( '/typography' ) ||
+			path.startsWith( '/colors' ) ||
+			path.startsWith( '/blocks' )
+		) {
 			return {
-				block: 'typography',
+				top: true,
 			};
 		}
-		let block = path.includes( '/blocks/' )
-			? decodeURIComponent( path.split( '/blocks/' )[ 1 ] )
-			: null;
-		// Default to theme-colors if the path ends with /colors.
-		block = path.endsWith( '/colors' ) ? 'theme-colors' : block;
-
-		return {
-			block,
-		};
 	}
 	return null;
 };
@@ -182,6 +191,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 +242,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 );
@@ -285,29 +305,43 @@ function StyleBook( {
 								) ) }
 							</Tabs.TabList>
 						</div>
-						{ tabs.map( ( tab ) => (
-							<Tabs.TabPanel
-								key={ tab.slug }
-								tabId={ tab.slug }
-								focusable={ false }
-								className="edit-site-style-book__tabpanel"
-							>
-								<StyleBookBody
-									category={ tab.slug }
-									examples={ examples }
-									isSelected={ isSelected }
-									onSelect={ onSelect }
-									settings={ settings }
-									sizes={ sizes }
-									title={ tab.title }
-									goTo={ goTo }
-								/>
-							</Tabs.TabPanel>
-						) ) }
+						{ tabs.map( ( tab ) => {
+							const categoryDefinition = tab.slug
+								? getTopLevelStyleBookCategories().find(
+										( _category ) =>
+											_category.slug === tab.slug
+								  )
+								: null;
+							const filteredExamples = categoryDefinition
+								? getExamplesByCategory(
+										categoryDefinition,
+										examples
+								  )
+								: { examples };
+							return (
+								<Tabs.TabPanel
+									key={ tab.slug }
+									tabId={ tab.slug }
+									focusable={ false }
+									className="edit-site-style-book__tabpanel"
+								>
+									<StyleBookBody
+										category={ tab.slug }
+										examples={ filteredExamples }
+										isSelected={ isSelected }
+										onSelect={ onSelect }
+										settings={ settings }
+										sizes={ sizes }
+										title={ tab.title }
+										goTo={ goTo }
+									/>
+								</Tabs.TabPanel>
+							);
+						} ) }
 					</Tabs>
 				) : (
 					<StyleBookBody
-						examples={ examplesForSinglePageUse }
+						examples={ { examples: examplesForSinglePageUse } }
 						isSelected={ isSelected }
 						onClick={ onClick }
 						onSelect={ onSelect }
@@ -321,8 +355,157 @@ function StyleBook( {
 	);
 }
 
-const StyleBookBody = ( {
-	category,
+/**
+ * Style Book Preview component renders the stylebook without the Editor dependency.
+ *
+ * @param {Object}  props            Component props.
+ * @param {Object}  props.userConfig User configuration.
+ * @param {boolean} props.isStatic   Whether the stylebook is static or clickable.
+ * @return {Object} Style Book Preview component.
+ */
+export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
+	const siteEditorSettings = useSelect(
+		( select ) => select( siteEditorStore ).getSettings(),
+		[]
+	);
+
+	const canUserUploadMedia = useSelect(
+		( select ) =>
+			select( coreStore ).canUser( 'create', {
+				kind: 'root',
+				name: 'media',
+			} ),
+		[]
+	);
+
+	// Update block editor settings because useMultipleOriginColorsAndGradients fetch colours from there.
+	useEffect( () => {
+		dispatch( blockEditorStore ).updateSettings( {
+			...siteEditorSettings,
+			mediaUpload: canUserUploadMedia ? uploadMedia : undefined,
+		} );
+	}, [ siteEditorSettings, canUserUploadMedia ] );
+
+	const [ section, onChangeSection ] = useSection();
+
+	const isSelected = ( blockName ) => {
+		// Match '/blocks/core%2Fbutton' and
+		// '/blocks/core%2Fbutton/typography', but not
+		// '/blocks/core%2Fbuttons'.
+		return (
+			section === `/blocks/${ encodeURIComponent( blockName ) }` ||
+			section.startsWith(
+				`/blocks/${ encodeURIComponent( blockName ) }/`
+			)
+		);
+	};
+
+	const onSelect = ( blockName ) => {
+		if (
+			STYLE_BOOK_COLOR_GROUPS.find(
+				( group ) => group.slug === blockName
+			)
+		) {
+			// Go to color palettes Global Styles.
+			onChangeSection( '/colors/palette' );
+			return;
+		}
+		if ( blockName === 'typography' ) {
+			// Go to typography Global Styles.
+			onChangeSection( '/typography' );
+			return;
+		}
+
+		// Now go to the selected block.
+		onChangeSection( `/blocks/${ encodeURIComponent( blockName ) }` );
+	};
+
+	const [ resizeObserver, sizes ] = useResizeObserver();
+	const colors = useMultiOriginPalettes();
+	const examples = getExamples( colors );
+	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
+
+	let previewCategory = null;
+	if ( section.includes( '/colors' ) ) {
+		previewCategory = 'colors';
+	} else if ( section.includes( '/typography' ) ) {
+		previewCategory = 'text';
+	} else if ( section.includes( '/blocks' ) ) {
+		previewCategory = 'blocks';
+		const blockName =
+			decodeURIComponent( section ).split( '/blocks/' )[ 1 ];
+		if (
+			blockName &&
+			examples.find( ( example ) => example.name === blockName )
+		) {
+			previewCategory = blockName;
+		}
+	} else if ( ! isStatic ) {
+		previewCategory = 'overview';
+	}
+	const categoryDefinition = STYLE_BOOK_PREVIEW_CATEGORIES.find(
+		( category ) => category.slug === previewCategory
+	);
+
+	// If there's no category definition there may be a single block.
+	const filteredExamples = categoryDefinition
+		? getExamplesByCategory( categoryDefinition, examples )
+		: {
+				examples: [
+					examples.find(
+						( example ) => example.name === previewCategory
+					),
+				],
+		  };
+
+	// If there's no preview category, show all examples.
+	const displayedExamples = previewCategory
+		? filteredExamples
+		: { examples: examplesForSinglePageUse };
+
+	const { base: baseConfig } = useContext( GlobalStylesContext );
+	const goTo = getStyleBookNavigationFromPath( section );
+
+	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 }>
+				<GlobalStylesRenderer disableRootPadding />
+				<StyleBookBody
+					examples={ displayedExamples }
+					settings={ settings }
+					goTo={ goTo }
+					sizes={ sizes }
+					isSelected={ ! isStatic ? isSelected : null }
+					onSelect={ ! isStatic ? onSelect : null }
+				/>
+			</BlockEditorProvider>
+		</div>
+	);
+};
+
+export const StyleBookBody = ( {
 	examples,
 	isSelected,
 	onClick,
@@ -365,10 +548,12 @@ 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 );
+			}
 		}
-	}, [ iframeRef?.current, goTo?.block, scrollToSection, hasIframeLoaded ] );
+	}, [ iframeRef?.current, goTo, scrollToSection, hasIframeLoaded ] );
 
 	return (
 		<Iframe
@@ -392,8 +577,7 @@ const StyleBookBody = ( {
 				className={ clsx( 'edit-site-style-book__examples', {
 					'is-wide': sizes.width > 600,
 				} ) }
-				examples={ examples }
-				category={ category }
+				filteredExamples={ examples }
 				label={
 					title
 						? sprintf(
@@ -405,24 +589,14 @@ const StyleBookBody = ( {
 				}
 				isSelected={ isSelected }
 				onSelect={ onSelect }
-				key={ category }
+				key={ title }
 			/>
 		</Iframe>
 	);
 };
 
 const Examples = memo(
-	( { className, examples, category, label, isSelected, onSelect } ) => {
-		const categoryDefinition = category
-			? getTopLevelStyleBookCategories().find(
-					( _category ) => _category.slug === category
-			  )
-			: null;
-
-		const filteredExamples = categoryDefinition
-			? getExamplesByCategory( categoryDefinition, examples )
-			: { examples };
-
+	( { className, filteredExamples, label, isSelected, onSelect } ) => {
 		return (
 			<Composite
 				orientation="vertical"
@@ -439,7 +613,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 +654,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 +682,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 +699,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":[]}