@wordpress/edit-site 6.13.1-next.a9f418477.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,
@@ -191,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,
@@ -217,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 );
@@ -330,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,
@@ -457,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 &&
@@ -494,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 }
 			/>
 		) )
 	);
@@ -524,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">
@@ -540,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/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";

package/build/components/post-edit/header.js

@@ -1,83 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = PostEditHeader;
-var _components = require("@wordpress/components");
-var _element = require("@wordpress/element");
-var _editor = require("@wordpress/editor");
-var _coreData = require("@wordpress/core-data");
-var _data = require("@wordpress/data");
-var _i18n = require("@wordpress/i18n");
-var _lockUnlock = require("../../lock-unlock");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  PostCardPanel
-} = (0, _lockUnlock.unlock)(_editor.privateApis);
-function PostEditHeader({
-  postType,
-  postId
-}) {
-  const ids = (0, _element.useMemo)(() => postId.split(','), [postId]);
-  const {
-    icon,
-    labels
-  } = (0, _data.useSelect)(select => {
-    const {
-      getEditedEntityRecord,
-      getPostType
-    } = select(_coreData.store);
-    const {
-      getPostIcon
-    } = (0, _lockUnlock.unlock)(select(_editor.store));
-    const _record = getEditedEntityRecord('postType', postType, ids[0]);
-    return {
-      icon: getPostIcon(postType, {
-        area: _record?.area
-      }),
-      labels: getPostType(postType)?.labels
-    };
-  }, [ids, postType]);
-  if (ids.length === 1) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PostCardPanel, {
-      postType: postType,
-      postId: parseInt(ids[0], 10)
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-    spacing: 1,
-    className: "edit-site-post-edit-header",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-      spacing: 2,
-      align: "center",
-      justify: "normal",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
-        className: "edit-site-post-edit-header__icon",
-        icon: icon
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
-        numberOfLines: 2,
-        truncate: true,
-        className: "edit-site-post-edit-header__title",
-        as: "h2",
-        children: labels?.name && (0, _i18n.sprintf)(
-        // translators: %i number of selected items %s: Name of the plural post type e.g: "Posts".
-        (0, _i18n.__)('%i %s'), ids.length, labels?.name)
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
-      className: "edit-site-post-edit-header__description",
-      children: (0, _i18n.sprintf)(
-      // translators: %s: Name of the plural post type e.g: "Posts".
-      (0, _i18n.__)('Changes will be applied to all selected %s.'), labels?.name.toLowerCase())
-    })]
-  });
-}
-//# sourceMappingURL=header.js.map

package/build/components/post-edit/header.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_components","require","_element","_editor","_coreData","_data","_i18n","_lockUnlock","_jsxRuntime","PostCardPanel","unlock","editorPrivateApis","PostEditHeader","postType","postId","ids","useMemo","split","icon","labels","useSelect","select","getEditedEntityRecord","getPostType","coreStore","getPostIcon","editorStore","_record","area","length","jsx","parseInt","jsxs","__experimentalVStack","spacing","className","children","__experimentalHStack","align","justify","Icon","__experimentalText","numberOfLines","truncate","as","name","sprintf","__","toLowerCase"],"sources":["@wordpress/edit-site/src/components/post-edit/header.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tIcon,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport {\n\tprivateApis as editorPrivateApis,\n\tstore as editorStore,\n} from '@wordpress/editor';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { PostCardPanel } = unlock( editorPrivateApis );\n\nexport default function PostEditHeader( { postType, postId } ) {\n\tconst ids = useMemo( () => postId.split( ',' ), [ postId ] );\n\tconst { icon, labels } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEditedEntityRecord, getPostType } = select( coreStore );\n\t\t\tconst { getPostIcon } = unlock( select( editorStore ) );\n\t\t\tconst _record = getEditedEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\tpostType,\n\t\t\t\tids[ 0 ]\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\ticon: getPostIcon( postType, {\n\t\t\t\t\tarea: _record?.area,\n\t\t\t\t} ),\n\t\t\t\tlabels: getPostType( postType )?.labels,\n\t\t\t};\n\t\t},\n\t\t[ ids, postType ]\n\t);\n\n\tif ( ids.length === 1 ) {\n\t\treturn (\n\t\t\t<PostCardPanel\n\t\t\t\tpostType={ postType }\n\t\t\t\tpostId={ parseInt( ids[ 0 ], 10 ) }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 1 } className=\"edit-site-post-edit-header\">\n\t\t\t<HStack spacing={ 2 } align=\"center\" justify=\"normal\">\n\t\t\t\t<Icon\n\t\t\t\t\tclassName=\"edit-site-post-edit-header__icon\"\n\t\t\t\t\ticon={ icon }\n\t\t\t\t/>\n\t\t\t\t<Text\n\t\t\t\t\tnumberOfLines={ 2 }\n\t\t\t\t\ttruncate\n\t\t\t\t\tclassName=\"edit-site-post-edit-header__title\"\n\t\t\t\t\tas=\"h2\"\n\t\t\t\t>\n\t\t\t\t\t{ labels?.name &&\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t// translators: %i number of selected items %s: Name of the plural post type e.g: \"Posts\".\n\t\t\t\t\t\t\t__( '%i %s' ),\n\t\t\t\t\t\t\tids.length,\n\t\t\t\t\t\t\tlabels?.name\n\t\t\t\t\t\t) }\n\t\t\t\t</Text>\n\t\t\t</HStack>\n\t\t\t<Text className=\"edit-site-post-edit-header__description\">\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: %s: Name of the plural post type e.g: \"Posts\".\n\t\t\t\t\t__( 'Changes will be applied to all selected %s.' ),\n\t\t\t\t\tlabels?.name.toLowerCase()\n\t\t\t\t) }\n\t\t\t</Text>\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/post-edit/header.js

@@ -1,76 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalHStack as HStack, __experimentalVStack as VStack, Icon, __experimentalText as Text } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-import { privateApis as editorPrivateApis, store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { sprintf, __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  PostCardPanel
-} = unlock(editorPrivateApis);
-export default function PostEditHeader({
-  postType,
-  postId
-}) {
-  const ids = useMemo(() => postId.split(','), [postId]);
-  const {
-    icon,
-    labels
-  } = useSelect(select => {
-    const {
-      getEditedEntityRecord,
-      getPostType
-    } = select(coreStore);
-    const {
-      getPostIcon
-    } = unlock(select(editorStore));
-    const _record = getEditedEntityRecord('postType', postType, ids[0]);
-    return {
-      icon: getPostIcon(postType, {
-        area: _record?.area
-      }),
-      labels: getPostType(postType)?.labels
-    };
-  }, [ids, postType]);
-  if (ids.length === 1) {
-    return /*#__PURE__*/_jsx(PostCardPanel, {
-      postType: postType,
-      postId: parseInt(ids[0], 10)
-    });
-  }
-  return /*#__PURE__*/_jsxs(VStack, {
-    spacing: 1,
-    className: "edit-site-post-edit-header",
-    children: [/*#__PURE__*/_jsxs(HStack, {
-      spacing: 2,
-      align: "center",
-      justify: "normal",
-      children: [/*#__PURE__*/_jsx(Icon, {
-        className: "edit-site-post-edit-header__icon",
-        icon: icon
-      }), /*#__PURE__*/_jsx(Text, {
-        numberOfLines: 2,
-        truncate: true,
-        className: "edit-site-post-edit-header__title",
-        as: "h2",
-        children: labels?.name && sprintf(
-        // translators: %i number of selected items %s: Name of the plural post type e.g: "Posts".
-        __('%i %s'), ids.length, labels?.name)
-      })]
-    }), /*#__PURE__*/_jsx(Text, {
-      className: "edit-site-post-edit-header__description",
-      children: sprintf(
-      // translators: %s: Name of the plural post type e.g: "Posts".
-      __('Changes will be applied to all selected %s.'), labels?.name.toLowerCase())
-    })]
-  });
-}
-//# sourceMappingURL=header.js.map

package/build-module/components/post-edit/header.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["__experimentalHStack","HStack","__experimentalVStack","VStack","Icon","__experimentalText","Text","useMemo","privateApis","editorPrivateApis","store","editorStore","coreStore","useSelect","sprintf","__","unlock","jsx","_jsx","jsxs","_jsxs","PostCardPanel","PostEditHeader","postType","postId","ids","split","icon","labels","select","getEditedEntityRecord","getPostType","getPostIcon","_record","area","length","parseInt","spacing","className","children","align","justify","numberOfLines","truncate","as","name","toLowerCase"],"sources":["@wordpress/edit-site/src/components/post-edit/header.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tIcon,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport {\n\tprivateApis as editorPrivateApis,\n\tstore as editorStore,\n} from '@wordpress/editor';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { PostCardPanel } = unlock( editorPrivateApis );\n\nexport default function PostEditHeader( { postType, postId } ) {\n\tconst ids = useMemo( () => postId.split( ',' ), [ postId ] );\n\tconst { icon, labels } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEditedEntityRecord, getPostType } = select( coreStore );\n\t\t\tconst { getPostIcon } = unlock( select( editorStore ) );\n\t\t\tconst _record = getEditedEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\tpostType,\n\t\t\t\tids[ 0 ]\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\ticon: getPostIcon( postType, {\n\t\t\t\t\tarea: _record?.area,\n\t\t\t\t} ),\n\t\t\t\tlabels: getPostType( postType )?.labels,\n\t\t\t};\n\t\t},\n\t\t[ ids, postType ]\n\t);\n\n\tif ( ids.length === 1 ) {\n\t\treturn (\n\t\t\t<PostCardPanel\n\t\t\t\tpostType={ postType }\n\t\t\t\tpostId={ parseInt( ids[ 0 ], 10 ) }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 1 } className=\"edit-site-post-edit-header\">\n\t\t\t<HStack spacing={ 2 } align=\"center\" justify=\"normal\">\n\t\t\t\t<Icon\n\t\t\t\t\tclassName=\"edit-site-post-edit-header__icon\"\n\t\t\t\t\ticon={ icon }\n\t\t\t\t/>\n\t\t\t\t<Text\n\t\t\t\t\tnumberOfLines={ 2 }\n\t\t\t\t\ttruncate\n\t\t\t\t\tclassName=\"edit-site-post-edit-header__title\"\n\t\t\t\t\tas=\"h2\"\n\t\t\t\t>\n\t\t\t\t\t{ labels?.name &&\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t// translators: %i number of selected items %s: Name of the plural post type e.g: \"Posts\".\n\t\t\t\t\t\t\t__( '%i %s' ),\n\t\t\t\t\t\t\tids.length,\n\t\t\t\t\t\t\tlabels?.name\n\t\t\t\t\t\t) }\n\t\t\t\t</Text>\n\t\t\t</HStack>\n\t\t\t<Text className=\"edit-site-post-edit-header__description\">\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: %s: Name of the plural post type e.g: \"Posts\".\n\t\t\t\t\t__( 'Changes will be applied to all selected %s.' ),\n\t\t\t\t\tlabels?.name.toLowerCase()\n\t\t\t\t) }\n\t\t\t</Text>\n\t\t</VStack>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,IAAI,EACJC,kBAAkB,IAAIC,IAAI,QACpB,uBAAuB;AAC9B,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SACCC,WAAW,IAAIC,iBAAiB,EAChCC,KAAK,IAAIC,WAAW,QACd,mBAAmB;AAC1B,SAASD,KAAK,IAAIE,SAAS,QAAQ,sBAAsB;AACzD,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,OAAO,EAAEC,EAAE,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE3C,MAAM;EAAEC;AAAc,CAAC,GAAGL,MAAM,CAAEP,iBAAkB,CAAC;AAErD,eAAe,SAASa,cAAcA,CAAE;EAAEC,QAAQ;EAAEC;AAAO,CAAC,EAAG;EAC9D,MAAMC,GAAG,GAAGlB,OAAO,CAAE,MAAMiB,MAAM,CAACE,KAAK,CAAE,GAAI,CAAC,EAAE,CAAEF,MAAM,CAAG,CAAC;EAC5D,MAAM;IAAEG,IAAI;IAAEC;EAAO,CAAC,GAAGf,SAAS,CAC/BgB,MAAM,IAAM;IACb,MAAM;MAAEC,qBAAqB;MAAEC;IAAY,CAAC,GAAGF,MAAM,CAAEjB,SAAU,CAAC;IAClE,MAAM;MAAEoB;IAAY,CAAC,GAAGhB,MAAM,CAAEa,MAAM,CAAElB,WAAY,CAAE,CAAC;IACvD,MAAMsB,OAAO,GAAGH,qBAAqB,CACpC,UAAU,EACVP,QAAQ,EACRE,GAAG,CAAE,CAAC,CACP,CAAC;IAED,OAAO;MACNE,IAAI,EAAEK,WAAW,CAAET,QAAQ,EAAE;QAC5BW,IAAI,EAAED,OAAO,EAAEC;MAChB,CAAE,CAAC;MACHN,MAAM,EAAEG,WAAW,CAAER,QAAS,CAAC,EAAEK;IAClC,CAAC;EACF,CAAC,EACD,CAAEH,GAAG,EAAEF,QAAQ,CAChB,CAAC;EAED,IAAKE,GAAG,CAACU,MAAM,KAAK,CAAC,EAAG;IACvB,oBACCjB,IAAA,CAACG,aAAa;MACbE,QAAQ,EAAGA,QAAU;MACrBC,MAAM,EAAGY,QAAQ,CAAEX,GAAG,CAAE,CAAC,CAAE,EAAE,EAAG;IAAG,CACnC,CAAC;EAEJ;EAEA,oBACCL,KAAA,CAACjB,MAAM;IAACkC,OAAO,EAAG,CAAG;IAACC,SAAS,EAAC,4BAA4B;IAAAC,QAAA,gBAC3DnB,KAAA,CAACnB,MAAM;MAACoC,OAAO,EAAG,CAAG;MAACG,KAAK,EAAC,QAAQ;MAACC,OAAO,EAAC,QAAQ;MAAAF,QAAA,gBACpDrB,IAAA,CAACd,IAAI;QACJkC,SAAS,EAAC,kCAAkC;QAC5CX,IAAI,EAAGA;MAAM,CACb,CAAC,eACFT,IAAA,CAACZ,IAAI;QACJoC,aAAa,EAAG,CAAG;QACnBC,QAAQ;QACRL,SAAS,EAAC,mCAAmC;QAC7CM,EAAE,EAAC,IAAI;QAAAL,QAAA,EAELX,MAAM,EAAEiB,IAAI,IACb/B,OAAO;QACN;QACAC,EAAE,CAAE,OAAQ,CAAC,EACbU,GAAG,CAACU,MAAM,EACVP,MAAM,EAAEiB,IACT;MAAC,CACG,CAAC;IAAA,CACA,CAAC,eACT3B,IAAA,CAACZ,IAAI;MAACgC,SAAS,EAAC,yCAAyC;MAAAC,QAAA,EACtDzB,OAAO;MACR;MACAC,EAAE,CAAE,6CAA8C,CAAC,EACnDa,MAAM,EAAEiB,IAAI,CAACC,WAAW,CAAC,CAC1B;IAAC,CACI,CAAC;EAAA,CACA,CAAC;AAEX","ignoreList":[]}

package/src/components/post-edit/header.js

@@ -1,88 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	Icon,
-	__experimentalText as Text,
-} from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-import {
-	privateApis as editorPrivateApis,
-	store as editorStore,
-} from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { sprintf, __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { PostCardPanel } = unlock( editorPrivateApis );
-
-export default function PostEditHeader( { postType, postId } ) {
-	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
-	const { icon, labels } = useSelect(
-		( select ) => {
-			const { getEditedEntityRecord, getPostType } = select( coreStore );
-			const { getPostIcon } = unlock( select( editorStore ) );
-			const _record = getEditedEntityRecord(
-				'postType',
-				postType,
-				ids[ 0 ]
-			);
-
-			return {
-				icon: getPostIcon( postType, {
-					area: _record?.area,
-				} ),
-				labels: getPostType( postType )?.labels,
-			};
-		},
-		[ ids, postType ]
-	);
-
-	if ( ids.length === 1 ) {
-		return (
-			<PostCardPanel
-				postType={ postType }
-				postId={ parseInt( ids[ 0 ], 10 ) }
-			/>
-		);
-	}
-
-	return (
-		<VStack spacing={ 1 } className="edit-site-post-edit-header">
-			<HStack spacing={ 2 } align="center" justify="normal">
-				<Icon
-					className="edit-site-post-edit-header__icon"
-					icon={ icon }
-				/>
-				<Text
-					numberOfLines={ 2 }
-					truncate
-					className="edit-site-post-edit-header__title"
-					as="h2"
-				>
-					{ labels?.name &&
-						sprintf(
-							// translators: %i number of selected items %s: Name of the plural post type e.g: "Posts".
-							__( '%i %s' ),
-							ids.length,
-							labels?.name
-						) }
-				</Text>
-			</HStack>
-			<Text className="edit-site-post-edit-header__description">
-				{ sprintf(
-					// translators: %s: Name of the plural post type e.g: "Posts".
-					__( 'Changes will be applied to all selected %s.' ),
-					labels?.name.toLowerCase()
-				) }
-			</Text>
-		</VStack>
-	);
-}