@wordpress/edit-site 5.29.0 → 5.30.0

package/src/components/sidebar-navigation-screen-templates-browse/content.js

@@ -9,7 +9,7 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
  * Internal dependencies
  */
 import DataViewItem from '../sidebar-dataviews/dataview-item';
-import { useAddedBy } from '../list/added-by';
+import { useAddedBy } from '../page-templates-template-parts/hooks';
 import { layout } from '@wordpress/icons';
 
 const EMPTY_ARRAY = [];
@@ -31,7 +31,7 @@ function TemplateDataviewItem( { template, isActive } ) {
 export default function DataviewsTemplatesSidebarContent( {
 	activeView,
 	postType,
-	config,
+	title,
 } ) {
 	const { records } = useEntityRecords( 'postType', postType, {
 		per_page: -1,
@@ -54,7 +54,7 @@ export default function DataviewsTemplatesSidebarContent( {
 		<ItemGroup>
 			<DataViewItem
 				slug={ 'all' }
-				title={ config[ postType ].title }
+				title={ title }
 				icon={ layout }
 				isActive={ activeView === 'all' }
 				isCustom="false"

package/src/components/sidebar-navigation-screen-templates-browse/index.js

@@ -21,17 +21,19 @@ import DataviewsTemplatesSidebarContent from './content';
 
 const config = {
 	[ TEMPLATE_POST_TYPE ]: {
-		title: __( 'All templates' ),
+		title: __( 'Manage templates' ),
 		description: __(
 			'Create new templates, or reset any customizations made to the templates supplied by your theme.'
 		),
+		contentTitle: __( 'All templates' ),
 	},
 	[ TEMPLATE_PART_POST_TYPE ]: {
-		title: __( 'All template parts' ),
+		title: __( 'Manage template parts' ),
 		description: __(
 			'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'
 		),
 		backPath: '/patterns',
+		contentTitle: __( 'All template parts' ),
 	},
 };
 
@@ -62,7 +64,7 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 				<DataviewsTemplatesSidebarContent
 					activeView={ activeView }
 					postType={ postType }
-					config={ config }
+					title={ config[ postType ].contentTitle }
 				/>
 			}
 		/>

package/src/components/start-template-options/index.js

@@ -137,7 +137,7 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 			closeLabel={ __( 'Cancel' ) }
 			focusOnMount="firstElement"
 			onRequestClose={ onClose }
-			isFullScreen={ true }
+			isFullScreen
 		>
 			<div className="edit-site-start-template-options__modal-content">
 				<PatternSelection

package/src/hooks/use-theme-style-variations/test/use-theme-style-variations-by-property.js

@@ -8,6 +8,7 @@ import { renderHook } from '@testing-library/react';
  */
 import useThemeStyleVariationsByProperty, {
 	filterObjectByProperty,
+	removePropertyFromObject,
 } from '../use-theme-style-variations-by-property';
 
 describe( 'filterObjectByProperty', () => {
@@ -962,3 +963,175 @@ describe( 'useThemeStyleVariationsByProperty', () => {
 		] );
 	} );
 } );
+
+describe( 'removePropertyFromObject', () => {
+	const mockBaseVariation = {
+		settings: {
+			typography: {
+				fontFamilies: {
+					custom: [
+						{
+							name: 'ADLaM Display',
+							fontFamily: 'ADLaM Display, system-ui',
+							slug: 'adlam-display',
+							fontFace: [
+								{
+									src: 'adlam.woff2',
+									fontWeight: '400',
+									fontStyle: 'normal',
+									fontFamily: 'ADLaM Display',
+								},
+							],
+						},
+					],
+				},
+				fontSizes: [
+					{
+						name: 'Base small',
+						slug: 'base-small',
+						size: '1px',
+					},
+					{
+						name: 'Base medium',
+						slug: 'base-medium',
+						size: '2px',
+					},
+					{
+						name: 'Base large',
+						slug: 'base-large',
+						size: '3px',
+					},
+				],
+			},
+			color: {
+				palette: {
+					custom: [
+						{
+							color: '#c42727',
+							name: 'Color 1',
+							slug: 'custom-color-1',
+						},
+						{
+							color: '#3b0f0f',
+							name: 'Color 2',
+							slug: 'custom-color-2',
+						},
+					],
+				},
+			},
+			layout: {
+				wideSize: '1137px',
+				contentSize: '400px',
+			},
+		},
+		styles: {
+			typography: {
+				fontSize: '12px',
+				lineHeight: '1.5',
+			},
+			color: {
+				backgroundColor: 'cheese',
+				color: 'lettuce',
+			},
+			elements: {
+				cite: {
+					color: {
+						text: 'white',
+					},
+					typography: {
+						letterSpacing: 'white',
+					},
+				},
+			},
+			blocks: {
+				'core/quote': {
+					color: {
+						text: 'hello',
+						background: 'dolly',
+					},
+					typography: {
+						fontSize: '111111px',
+					},
+				},
+				'core/group': {
+					typography: {
+						fontFamily: 'var:preset|font-family|system-sans-serif',
+					},
+				},
+			},
+		},
+	};
+
+	it( 'should return with no property', () => {
+		const object = { test: 'me' };
+		expect( removePropertyFromObject( object, undefined ) ).toEqual(
+			object
+		);
+	} );
+
+	it( 'should return with non-string property', () => {
+		const object = { test: 'you' };
+		expect( removePropertyFromObject( object, true ) ).toEqual( object );
+	} );
+
+	it( 'should return with empty object', () => {
+		const object = {};
+		expect( removePropertyFromObject( object, 'color' ) ).toEqual( object );
+	} );
+
+	it( 'should remove the specified property from the object', () => {
+		expect(
+			removePropertyFromObject(
+				{
+					...mockBaseVariation,
+				},
+				'typography'
+			)
+		).toEqual( {
+			settings: {
+				color: {
+					palette: {
+						custom: [
+							{
+								color: '#c42727',
+								name: 'Color 1',
+								slug: 'custom-color-1',
+							},
+							{
+								color: '#3b0f0f',
+								name: 'Color 2',
+								slug: 'custom-color-2',
+							},
+						],
+					},
+				},
+				layout: {
+					wideSize: '1137px',
+					contentSize: '400px',
+				},
+			},
+			styles: {
+				color: {
+					backgroundColor: 'cheese',
+					color: 'lettuce',
+				},
+				elements: {
+					cite: {
+						color: {
+							text: 'white',
+						},
+					},
+				},
+				blocks: {
+					'core/quote': {
+						color: {
+							text: 'hello',
+							background: 'dolly',
+						},
+					},
+					'core/group': {},
+				},
+			},
+		} );
+	} );
+} );

package/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js

@@ -1,13 +1,76 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useContext, useMemo } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { mergeBaseAndUserConfigs } from '../../components/global-styles/global-styles-provider';
 import cloneDeep from '../../utils/clone-deep';
+import { unlock } from '../../lock-unlock';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+
+/**
+ * Removes all instances of a property from an object.
+ *
+ * @param {Object} object   The object to remove the property from.
+ * @param {string} property The property to remove.
+ * @return {Object} The modified object.
+ */
+export function removePropertyFromObject( object, property ) {
+	if ( ! property || typeof property !== 'string' ) {
+		return object;
+	}
+
+	if ( typeof object !== 'object' || ! Object.keys( object ).length ) {
+		return object;
+	}
+
+	for ( const key in object ) {
+		if ( key === property ) {
+			delete object[ key ];
+		} else if ( typeof object[ key ] === 'object' ) {
+			removePropertyFromObject( object[ key ], property );
+		}
+	}
+	return object;
+}
+
+/**
+ * A convenience wrapper for `useThemeStyleVariationsByProperty()` that fetches the current theme style variations,
+ * and user-defined global style/settings object.
+ *
+ * @param {Object}   props          Object of hook args.
+ * @param {string}   props.property The property to filter by.
+ * @param {Function} props.filter   Optional. The filter function to apply to the variations.
+ * @return {Object[]|*} The merged object.
+ */
+export function useCurrentMergeThemeStyleVariationsWithUserConfig( {
+	property,
+	filter,
+} ) {
+	const variations = useSelect( ( select ) => {
+		return select(
+			coreStore
+		).__experimentalGetCurrentThemeGlobalStylesVariations();
+	}, [] );
+	const { user: baseVariation } = useContext( GlobalStylesContext );
+
+	return useThemeStyleVariationsByProperty( {
+		variations,
+		property,
+		filter,
+		baseVariation: removePropertyFromObject(
+			cloneDeep( baseVariation ),
+			property
+		),
+	} );
+}
 
 /**
  * Returns a new object, with properties specified in `property`,
@@ -40,6 +103,10 @@ export const filterObjectByProperty = ( object, property ) => {
 
 /**
  * Returns a new object with only the properties specified in `property`.
+ * Optional merges the baseVariation object with the variation object.
+ * Note: this function will only overwrite the specified property in baseVariation if it exists.
+ * The baseVariation will not be otherwise modified. To strip a property from the baseVariation object, use `removePropertyFromObject`.
+ * See useCurrentMergeThemeStyleVariationsWithUserConfig for an example of how to use this function.
  *
  * @param {Object}   props               Object of hook args.
  * @param {Object[]} props.variations    The theme style variations to filter.

package/src/style.scss

@@ -8,7 +8,6 @@
 @import "./components/global-styles/style.scss";
 @import "./components/global-styles/screen-revisions/style.scss";
 @import "./components/header-edit-mode/style.scss";
-@import "./components/list/style.scss";
 @import "./components/page/style.scss";
 @import "./components/page-pages/style.scss";
 @import "./components/page-patterns/style.scss";
@@ -49,6 +48,7 @@
 @import "./hooks/push-changes-to-global-styles/style.scss";
 @import "./components/global-styles/font-library-modal/style.scss";
 @import "./components/pagination/style.scss";
+@import "./components/global-styles/variations/style.scss";
 
 body.js #wpadminbar {
 	display: none;
@@ -98,7 +98,7 @@ body.js.site-editor-php {
 	}
 
 	.interface-interface-skeleton__content {
-		background-color: $gray-900;
+		background-color: $gray-300;
 	}
 }
 

package/build/components/global-styles/font-library-modal/collection-font-details.js

@@ -1,50 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _components = require("@wordpress/components");
-var _collectionFontVariant = _interopRequireDefault(require("./collection-font-variant"));
-var _fontsOutline = require("./utils/fonts-outline");
-var _sortFontFaces = require("./utils/sort-font-faces");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-function CollectionFontDetails({
-  font,
-  handleToggleVariant,
-  fontToInstallOutline
-}) {
-  const fontFaces = font.fontFace && font.fontFace.length ? (0, _sortFontFaces.sortFontFaces)(font.fontFace) : [{
-    fontFamily: font.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: '400'
-  }];
-  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 4
-  }), (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: 0
-  }, (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 8
-  }), fontFaces.map((face, i) => (0, _react.createElement)(_collectionFontVariant.default, {
-    font: font,
-    face: face,
-    key: `face${i}`,
-    handleToggleVariant: handleToggleVariant,
-    selected: (0, _fontsOutline.isFontFontFaceInOutline)(font.slug, font.fontFace ? face : null,
-    // If the font has no fontFace, we want to check if the font is in the outline
-    fontToInstallOutline)
-  }))), (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 16
-  }));
-}
-var _default = exports.default = CollectionFontDetails;
-//# sourceMappingURL=collection-font-details.js.map

package/build/components/global-styles/font-library-modal/collection-font-details.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_components","require","_collectionFontVariant","_interopRequireDefault","_fontsOutline","_sortFontFaces","CollectionFontDetails","font","handleToggleVariant","fontToInstallOutline","fontFaces","fontFace","length","sortFontFaces","fontFamily","fontStyle","fontWeight","_react","createElement","Fragment","__experimentalSpacer","margin","__experimentalVStack","spacing","map","face","i","default","key","selected","isFontFontFaceInOutline","slug","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport CollectionFontVariant from './collection-font-variant';\nimport { isFontFontFaceInOutline } from './utils/fonts-outline';\nimport { sortFontFaces } from './utils/sort-font-faces';\n\nfunction CollectionFontDetails( {\n\tfont,\n\thandleToggleVariant,\n\tfontToInstallOutline,\n} ) {\n\tconst fontFaces =\n\t\tfont.fontFace && font.fontFace.length\n\t\t\t? sortFontFaces( font.fontFace )\n\t\t\t: [\n\t\t\t\t\t{\n\t\t\t\t\t\tfontFamily: font.fontFamily,\n\t\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\t\tfontWeight: '400',\n\t\t\t\t\t},\n\t\t\t  ];\n\n\treturn (\n\t\t<>\n\t\t\t<Spacer margin={ 4 } />\n\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t<Spacer margin={ 8 } />\n\t\t\t\t{ fontFaces.map( ( face, i ) => (\n\t\t\t\t\t<CollectionFontVariant\n\t\t\t\t\t\tfont={ font }\n\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\thandleToggleVariant={ handleToggleVariant }\n\t\t\t\t\t\tselected={ isFontFontFaceInOutline(\n\t\t\t\t\t\t\tfont.slug,\n\t\t\t\t\t\t\tfont.fontFace ? face : null, // If the font has no fontFace, we want to check if the font is in the outline\n\t\t\t\t\t\t\tfontToInstallOutline\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</VStack>\n\t\t\t<Spacer margin={ 16 } />\n\t\t</>\n\t);\n}\n\nexport default CollectionFontDetails;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAQA,IAAAC,sBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AAbA;AACA;AACA;;AAMA;AACA;AACA;;AAKA,SAASK,qBAAqBA,CAAE;EAC/BC,IAAI;EACJC,mBAAmB;EACnBC;AACD,CAAC,EAAG;EACH,MAAMC,SAAS,GACdH,IAAI,CAACI,QAAQ,IAAIJ,IAAI,CAACI,QAAQ,CAACC,MAAM,GAClC,IAAAC,4BAAa,EAAEN,IAAI,CAACI,QAAS,CAAC,GAC9B,CACA;IACCG,UAAU,EAAEP,IAAI,CAACO,UAAU;IAC3BC,SAAS,EAAE,QAAQ;IACnBC,UAAU,EAAE;EACb,CAAC,CACA;EAEL,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,EAAClB,WAAA,CAAAoB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAJ,MAAA,CAAAC,aAAA,EAAClB,WAAA,CAAAsB,oBAAM;IAACC,OAAO,EAAG;EAAG,GACpB,IAAAN,MAAA,CAAAC,aAAA,EAAClB,WAAA,CAAAoB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACrBX,SAAS,CAACc,GAAG,CAAE,CAAEC,IAAI,EAAEC,CAAC,KACzB,IAAAT,MAAA,CAAAC,aAAA,EAAChB,sBAAA,CAAAyB,OAAqB;IACrBpB,IAAI,EAAGA,IAAM;IACbkB,IAAI,EAAGA,IAAM;IACbG,GAAG,EAAI,OAAOF,CAAG,EAAG;IACpBlB,mBAAmB,EAAGA,mBAAqB;IAC3CqB,QAAQ,EAAG,IAAAC,qCAAuB,EACjCvB,IAAI,CAACwB,IAAI,EACTxB,IAAI,CAACI,QAAQ,GAAGc,IAAI,GAAG,IAAI;IAAE;IAC7BhB,oBACD;EAAG,CACH,CACA,CACK,CAAC,EACT,IAAAQ,MAAA,CAAAC,aAAA,EAAClB,WAAA,CAAAoB,oBAAM;IAACC,MAAM,EAAG;EAAI,CAAE,CACtB,CAAC;AAEL;AAAC,IAAAW,QAAA,GAAAC,OAAA,CAAAN,OAAA,GAEcrB,qBAAqB"}

package/build/components/global-styles/font-library-modal/confirm-delete-dialog.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _i18n = require("@wordpress/i18n");
-var _components = require("@wordpress/components");
-/**
- * WordPress dependencies
- */
-
-function ConfirmDeleteDialog({
-  font,
-  isConfirmDeleteOpen,
-  handleConfirmUninstall,
-  handleCancelUninstall
-}) {
-  return (0, _react.createElement)(_components.__experimentalConfirmDialog, {
-    isOpen: isConfirmDeleteOpen,
-    cancelButtonText: (0, _i18n.__)('Cancel'),
-    confirmButtonText: (0, _i18n.__)('Delete'),
-    onCancel: handleCancelUninstall,
-    onConfirm: handleConfirmUninstall
-  }, font && (0, _i18n.sprintf)( /* translators: %s: Name of the font. */
-  (0, _i18n.__)('Are you sure you want to delete "%s" font and all its variants and assets?'), font.name));
-}
-var _default = exports.default = ConfirmDeleteDialog;
-//# sourceMappingURL=confirm-delete-dialog.js.map

package/build/components/global-styles/font-library-modal/confirm-delete-dialog.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_i18n","require","_components","ConfirmDeleteDialog","font","isConfirmDeleteOpen","handleConfirmUninstall","handleCancelUninstall","_react","createElement","__experimentalConfirmDialog","isOpen","cancelButtonText","__","confirmButtonText","onCancel","onConfirm","sprintf","name","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/confirm-delete-dialog.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n\nfunction ConfirmDeleteDialog( {\n\tfont,\n\tisConfirmDeleteOpen,\n\thandleConfirmUninstall,\n\thandleCancelUninstall,\n} ) {\n\treturn (\n\t\t<ConfirmDialog\n\t\t\tisOpen={ isConfirmDeleteOpen }\n\t\t\tcancelButtonText={ __( 'Cancel' ) }\n\t\t\tconfirmButtonText={ __( 'Delete' ) }\n\t\t\tonCancel={ handleCancelUninstall }\n\t\t\tonConfirm={ handleConfirmUninstall }\n\t\t>\n\t\t\t{ font &&\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: Name of the font. */\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Are you sure you want to delete \"%s\" font and all its variants and assets?'\n\t\t\t\t\t),\n\t\t\t\t\tfont.name\n\t\t\t\t) }\n\t\t</ConfirmDialog>\n\t);\n}\n\nexport default ConfirmDeleteDialog;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIA,SAASE,mBAAmBA,CAAE;EAC7BC,IAAI;EACJC,mBAAmB;EACnBC,sBAAsB;EACtBC;AACD,CAAC,EAAG;EACH,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACP,WAAA,CAAAQ,2BAAa;IACbC,MAAM,EAAGN,mBAAqB;IAC9BO,gBAAgB,EAAG,IAAAC,QAAE,EAAE,QAAS,CAAG;IACnCC,iBAAiB,EAAG,IAAAD,QAAE,EAAE,QAAS,CAAG;IACpCE,QAAQ,EAAGR,qBAAuB;IAClCS,SAAS,EAAGV;EAAwB,GAElCF,IAAI,IACL,IAAAa,aAAO,GACN;EACA,IAAAJ,QAAE,EACD,4EACD,CAAC,EACDT,IAAI,CAACc,IACN,CACa,CAAC;AAElB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEclB,mBAAmB"}

package/build/components/global-styles/font-library-modal/library-font-card.js

@@ -1,39 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _i18n = require("@wordpress/i18n");
-var _element = require("@wordpress/element");
-var _fontCard = _interopRequireDefault(require("./font-card"));
-var _context = require("./context");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-function LibraryFontCard({
-  font,
-  ...props
-}) {
-  const {
-    getFontFacesActivated
-  } = (0, _element.useContext)(_context.FontLibraryContext);
-  const variantsInstalled = font?.fontFace?.length > 0 ? font.fontFace.length : 1;
-  const variantsActive = getFontFacesActivated(font.slug, font.source).length;
-  const variantsText = (0, _i18n.sprintf)( /* translators: 1: Active font variants, 2: Total font variants. */
-  (0, _i18n.__)('%1$s/%2$s variants active'), variantsActive, variantsInstalled);
-  return (0, _react.createElement)(_fontCard.default, {
-    font: font,
-    variantsText: variantsText,
-    ...props
-  });
-}
-var _default = exports.default = LibraryFontCard;
-//# sourceMappingURL=library-font-card.js.map

package/build/components/global-styles/font-library-modal/library-font-card.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_i18n","require","_element","_fontCard","_interopRequireDefault","_context","LibraryFontCard","font","props","getFontFacesActivated","useContext","FontLibraryContext","variantsInstalled","fontFace","length","variantsActive","slug","source","variantsText","sprintf","__","_react","createElement","default","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/library-font-card.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport FontCard from './font-card';\nimport { FontLibraryContext } from './context';\n\nfunction LibraryFontCard( { font, ...props } ) {\n\tconst { getFontFacesActivated } = useContext( FontLibraryContext );\n\n\tconst variantsInstalled =\n\t\tfont?.fontFace?.length > 0 ? font.fontFace.length : 1;\n\tconst variantsActive = getFontFacesActivated(\n\t\tfont.slug,\n\t\tfont.source\n\t).length;\n\tconst variantsText = sprintf(\n\t\t/* translators: 1: Active font variants, 2: Total font variants. */\n\t\t__( '%1$s/%2$s variants active' ),\n\t\tvariantsActive,\n\t\tvariantsInstalled\n\t);\n\n\treturn (\n\t\t<FontCard font={ font } variantsText={ variantsText } { ...props } />\n\t);\n}\n\nexport default LibraryFontCard;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,SAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASK,eAAeA,CAAE;EAAEC,IAAI;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC9C,MAAM;IAAEC;EAAsB,CAAC,GAAG,IAAAC,mBAAU,EAAEC,2BAAmB,CAAC;EAElE,MAAMC,iBAAiB,GACtBL,IAAI,EAAEM,QAAQ,EAAEC,MAAM,GAAG,CAAC,GAAGP,IAAI,CAACM,QAAQ,CAACC,MAAM,GAAG,CAAC;EACtD,MAAMC,cAAc,GAAGN,qBAAqB,CAC3CF,IAAI,CAACS,IAAI,EACTT,IAAI,CAACU,MACN,CAAC,CAACH,MAAM;EACR,MAAMI,YAAY,GAAG,IAAAC,aAAO,GAC3B;EACA,IAAAC,QAAE,EAAE,2BAA4B,CAAC,EACjCL,cAAc,EACdH,iBACD,CAAC;EAED,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACnB,SAAA,CAAAoB,OAAQ;IAAChB,IAAI,EAAGA,IAAM;IAACW,YAAY,EAAGA,YAAc;IAAA,GAAMV;EAAK,CAAI,CAAC;AAEvE;AAAC,IAAAgB,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEcjB,eAAe"}

package/build/components/global-styles/font-library-modal/tab-panel-layout.js

@@ -1,67 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _element = require("@wordpress/element");
-var _components = require("@wordpress/components");
-var _icons = require("@wordpress/icons");
-var _i18n = require("@wordpress/i18n");
-var _context = require("./context");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-function TabPanelLayout({
-  title,
-  description,
-  notice,
-  handleBack,
-  children,
-  footer
-}) {
-  const {
-    setNotice
-  } = (0, _element.useContext)(_context.FontLibraryContext);
-  return (0, _react.createElement)("div", {
-    className: "font-library-modal__tabpanel-layout"
-  }, (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 4
-  }), (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: 4,
-    justify: "space-between"
-  }, (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: 2
-  }, (0, _react.createElement)(_components.__experimentalHStack, {
-    justify: "flex-start"
-  }, !!handleBack && (0, _react.createElement)(_components.Button, {
-    variant: "tertiary",
-    onClick: handleBack,
-    icon: _icons.chevronLeft,
-    size: "small",
-    label: (0, _i18n.__)('Back')
-  }), title && (0, _react.createElement)(_components.__experimentalHeading, {
-    level: 2,
-    size: 13,
-    className: "edit-site-global-styles-header"
-  }, title)), description && (0, _react.createElement)(_components.__experimentalText, null, description), notice && (0, _react.createElement)(_components.FlexBlock, null, (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 1
-  }), (0, _react.createElement)(_components.Notice, {
-    status: notice.type,
-    onRemove: () => setNotice(null)
-  }, notice.message), (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 1
-  }))), (0, _react.createElement)("div", {
-    className: "font-library-modal__tabpanel-layout__main"
-  }, children), footer && (0, _react.createElement)("div", {
-    className: "font-library-modal__tabpanel-layout__footer"
-  }, footer)));
-}
-var _default = exports.default = TabPanelLayout;
-//# sourceMappingURL=tab-panel-layout.js.map

package/build/components/global-styles/font-library-modal/tab-panel-layout.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_element","require","_components","_icons","_i18n","_context","TabPanelLayout","title","description","notice","handleBack","children","footer","setNotice","useContext","FontLibraryContext","_react","createElement","className","__experimentalSpacer","margin","__experimentalVStack","spacing","justify","__experimentalHStack","Button","variant","onClick","icon","chevronLeft","size","label","__","__experimentalHeading","level","__experimentalText","FlexBlock","Notice","status","type","onRemove","message","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport {\n\t__experimentalText as Text,\n\t__experimentalHeading as Heading,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHStack as HStack,\n\tButton,\n\tNotice,\n\tFlexBlock,\n} from '@wordpress/components';\nimport { chevronLeft } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\n\nfunction TabPanelLayout( {\n\ttitle,\n\tdescription,\n\tnotice,\n\thandleBack,\n\tchildren,\n\tfooter,\n} ) {\n\tconst { setNotice } = useContext( FontLibraryContext );\n\n\treturn (\n\t\t<div className=\"font-library-modal__tabpanel-layout\">\n\t\t\t<Spacer margin={ 4 } />\n\t\t\t<VStack spacing={ 4 } justify=\"space-between\">\n\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t\t{ !! handleBack && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleBack }\n\t\t\t\t\t\t\t\ticon={ chevronLeft }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-header\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HStack>\n\t\t\t\t\t{ description && <Text>{ description }</Text> }\n\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t\t<div className=\"font-library-modal__tabpanel-layout__main\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t\t{ footer && (\n\t\t\t\t\t<div className=\"font-library-modal__tabpanel-layout__footer\">\n\t\t\t\t\t\t{ footer }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default TabPanelLayout;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAUA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAKA,IAAAI,QAAA,GAAAJ,OAAA;AApBA;AACA;AACA;;AAeA;AACA;AACA;;AAGA,SAASK,cAAcA,CAAE;EACxBC,KAAK;EACLC,WAAW;EACXC,MAAM;EACNC,UAAU;EACVC,QAAQ;EACRC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,mBAAU,EAAEC,2BAAmB,CAAC;EAEtD,OACC,IAAAC,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAqC,GACnD,IAAAF,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAJ,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAmB,oBAAM;IAACC,OAAO,EAAG,CAAG;IAACC,OAAO,EAAC;EAAe,GAC5C,IAAAP,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAmB,oBAAM;IAACC,OAAO,EAAG;EAAG,GACpB,IAAAN,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAsB,oBAAM;IAACD,OAAO,EAAC;EAAY,GACzB,CAAC,CAAEb,UAAU,IACd,IAAAM,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAuB,MAAM;IACNC,OAAO,EAAC,UAAU;IAClBC,OAAO,EAAGjB,UAAY;IACtBkB,IAAI,EAAGC,kBAAa;IACpBC,IAAI,EAAC,OAAO;IACZC,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO;EAAG,CACtB,CACD,EACCzB,KAAK,IACN,IAAAS,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAA+B,qBAAO;IACPC,KAAK,EAAG,CAAG;IACXJ,IAAI,EAAG,EAAI;IACXZ,SAAS,EAAC;EAAgC,GAExCX,KACM,CAEH,CAAC,EACPC,WAAW,IAAI,IAAAQ,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiC,kBAAI,QAAG3B,WAAmB,CAAC,EAC3CC,MAAM,IACP,IAAAO,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAkC,SAAS,QACT,IAAApB,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CAAC,EACvB,IAAAJ,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAmC,MAAM;IACNC,MAAM,EAAG7B,MAAM,CAAC8B,IAAM;IACtBC,QAAQ,EAAGA,CAAA,KAAM3B,SAAS,CAAE,IAAK;EAAG,GAElCJ,MAAM,CAACgC,OACF,CAAC,EACT,IAAAzB,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAiB,oBAAM;IAACC,MAAM,EAAG;EAAG,CAAE,CACZ,CAEL,CAAC,EACT,IAAAJ,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA2C,GACvDP,QACE,CAAC,EACJC,MAAM,IACP,IAAAI,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA6C,GACzDN,MACE,CAEC,CACJ,CAAC;AAER;AAAC,IAAA8B,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEctC,cAAc"}