@wordpress/edit-site 4.12.1-next.d6164808d3.0 → 4.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.12.1-next.d6164808d3.0",
+	"version": "4.14.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/api-fetch": "^6.12.1-next.d6164808d3.0",
-		"@wordpress/block-editor": "^9.7.1-next.d6164808d3.0",
-		"@wordpress/block-library": "^7.12.2-next.d6164808d3.0",
-		"@wordpress/blocks": "^11.14.1-next.d6164808d3.0",
-		"@wordpress/components": "^20.0.1-next.d6164808d3.0",
-		"@wordpress/compose": "^5.13.1-next.d6164808d3.0",
-		"@wordpress/core-data": "^4.14.1-next.d6164808d3.0",
-		"@wordpress/data": "^7.0.1-next.d6164808d3.0",
-		"@wordpress/deprecated": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/editor": "^12.14.1-next.d6164808d3.0",
-		"@wordpress/element": "^4.13.1-next.d6164808d3.0",
-		"@wordpress/hooks": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/html-entities": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/i18n": "^4.15.1-next.d6164808d3.0",
-		"@wordpress/icons": "^9.6.1-next.d6164808d3.0",
-		"@wordpress/interface": "^4.14.1-next.d6164808d3.0",
-		"@wordpress/keyboard-shortcuts": "^3.13.1-next.d6164808d3.0",
-		"@wordpress/keycodes": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/media-utils": "^4.6.1-next.d6164808d3.0",
-		"@wordpress/notices": "^3.15.1-next.d6164808d3.0",
-		"@wordpress/plugins": "^4.13.1-next.d6164808d3.0",
-		"@wordpress/preferences": "^2.7.1-next.d6164808d3.0",
-		"@wordpress/reusable-blocks": "^3.13.1-next.d6164808d3.0",
-		"@wordpress/style-engine": "^0.14.1-next.d6164808d3.0",
-		"@wordpress/url": "^3.16.1-next.d6164808d3.0",
-		"@wordpress/viewport": "^4.13.1-next.d6164808d3.0",
+		"@wordpress/a11y": "^3.17.0",
+		"@wordpress/api-fetch": "^6.14.0",
+		"@wordpress/block-editor": "^10.0.0",
+		"@wordpress/block-library": "^7.14.0",
+		"@wordpress/blocks": "^11.16.0",
+		"@wordpress/components": "^21.0.0",
+		"@wordpress/compose": "^5.15.0",
+		"@wordpress/core-data": "^5.0.0",
+		"@wordpress/data": "^7.1.0",
+		"@wordpress/deprecated": "^3.17.0",
+		"@wordpress/editor": "^12.16.0",
+		"@wordpress/element": "^4.15.0",
+		"@wordpress/hooks": "^3.17.0",
+		"@wordpress/html-entities": "^3.17.0",
+		"@wordpress/i18n": "^4.17.0",
+		"@wordpress/icons": "^9.8.0",
+		"@wordpress/interface": "^4.16.0",
+		"@wordpress/keyboard-shortcuts": "^3.15.0",
+		"@wordpress/keycodes": "^3.17.0",
+		"@wordpress/media-utils": "^4.8.0",
+		"@wordpress/notices": "^3.17.0",
+		"@wordpress/plugins": "^4.15.0",
+		"@wordpress/preferences": "^2.9.0",
+		"@wordpress/reusable-blocks": "^3.15.0",
+		"@wordpress/style-engine": "^0.16.0",
+		"@wordpress/url": "^3.18.0",
+		"@wordpress/viewport": "^4.15.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ba8a396d2f418e53a6c4c50575582f3f3eb11ff7"
+	"gitHead": "0d732d4b184adcb28cc83087603e81b764390d4b"
 }

package/src/components/add-new-template/new-template.js

@@ -41,6 +41,7 @@ import {
 	useTaxonomiesMenuItems,
 	usePostTypeMenuItems,
 	useAuthorMenuItem,
+	usePostTypeArchiveMenuItems,
 } from './utils';
 import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import { useHistory } from '../routes';
@@ -301,6 +302,7 @@ function useMissingTemplates(
 	} );
 	const missingTemplates = [
 		...enhancedMissingDefaultTemplateTypes,
+		...usePostTypeArchiveMenuItems(),
 		...postTypesMenuItems,
 		...taxonomiesMenuItems,
 	];

package/src/components/add-new-template/utils.js

@@ -12,7 +12,7 @@ import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useMemo, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { blockMeta, post } from '@wordpress/icons';
+import { blockMeta, post, archive } from '@wordpress/icons';
 
 /**
  * @typedef IHasNameAndId
@@ -86,10 +86,90 @@ const usePublicTaxonomies = () => {
 	}, [ taxonomies ] );
 };
 
+function usePostTypeNeedsUniqueIdentifier( publicPostTypes ) {
+	const postTypeLabels = useMemo( () =>
+		publicPostTypes?.reduce( ( accumulator, { labels } ) => {
+			const singularName = labels.singular_name.toLowerCase();
+			accumulator[ singularName ] =
+				( accumulator[ singularName ] || 0 ) + 1;
+			return accumulator;
+		}, {} )
+	);
+	return useCallback(
+		( { labels, slug } ) => {
+			const singularName = labels.singular_name.toLowerCase();
+			return postTypeLabels[ singularName ] > 1 && singularName !== slug;
+		},
+		[ postTypeLabels ]
+	);
+}
+
+export function usePostTypeArchiveMenuItems() {
+	const publicPostTypes = usePublicPostTypes();
+	const postTypesWithArchives = useMemo(
+		() => publicPostTypes?.filter( ( postType ) => postType.has_archive ),
+		[ publicPostTypes ]
+	);
+	const existingTemplates = useExistingTemplates();
+	const needsUniqueIdentifier = usePostTypeNeedsUniqueIdentifier(
+		postTypesWithArchives
+	);
+	return useMemo(
+		() =>
+			postTypesWithArchives
+				?.filter(
+					( postType ) =>
+						! ( existingTemplates || [] ).some(
+							( existingTemplate ) =>
+								existingTemplate.slug ===
+								'archive-' + postType.slug
+						)
+				)
+				.map( ( postType ) => {
+					let title;
+					if ( needsUniqueIdentifier( postType ) ) {
+						title = sprintf(
+							// translators: %1s: Name of the post type e.g: "Post"; %2s: Slug of the post type e.g: "book".
+							__( 'Archive: %1$s (%2$s)' ),
+							postType.labels.singular_name,
+							postType.slug
+						);
+					} else {
+						title = sprintf(
+							// translators: %s: Name of the post type e.g: "Post".
+							__( 'Archive: %s' ),
+							postType.labels.singular_name
+						);
+					}
+					return {
+						slug: 'archive-' + postType.slug,
+						description: sprintf(
+							// translators: %s: Name of the post type e.g: "Post".
+							__(
+								'Displays an archive with the latests posts of type: %s.'
+							),
+							postType.labels.singular_name
+						),
+						title,
+						// `icon` is the `menu_icon` property of a post type. We
+						// only handle `dashicons` for now, even if the `menu_icon`
+						// also supports urls and svg as values.
+						icon: postType.icon?.startsWith( 'dashicons-' )
+							? postType.icon.slice( 10 )
+							: archive,
+						templatePrefix: 'archive',
+					};
+				} ) || [],
+		[ postTypesWithArchives, existingTemplates, needsUniqueIdentifier ]
+	);
+}
+
 export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 	const publicPostTypes = usePublicPostTypes();
 	const existingTemplates = useExistingTemplates();
 	const defaultTemplateTypes = useDefaultTemplateTypes();
+	const needsUniqueIdentifier =
+		usePostTypeNeedsUniqueIdentifier( publicPostTypes );
 	// `page`is a special case in template hierarchy.
 	const templatePrefixes = useMemo(
 		() =>
@@ -103,21 +183,6 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 			}, {} ),
 		[ publicPostTypes ]
 	);
-	// We need to keep track of naming conflicts. If a conflict
-	// occurs, we need to add slug.
-	const postTypeLabels = publicPostTypes?.reduce(
-		( accumulator, { labels } ) => {
-			const singularName = labels.singular_name.toLowerCase();
-			accumulator[ singularName ] =
-				( accumulator[ singularName ] || 0 ) + 1;
-			return accumulator;
-		},
-		{}
-	);
-	const needsUniqueIdentifier = ( labels, slug ) => {
-		const singularName = labels.singular_name.toLowerCase();
-		return postTypeLabels[ singularName ] > 1 && singularName !== slug;
-	};
 	const postTypesInfo = useEntitiesInfo( 'postType', templatePrefixes );
 	const existingTemplateSlugs = ( existingTemplates || [] ).map(
 		( { slug } ) => slug
@@ -134,10 +199,7 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 			);
 			const hasGeneralTemplate =
 				existingTemplateSlugs?.includes( generalTemplateSlug );
-			const _needsUniqueIdentifier = needsUniqueIdentifier(
-				labels,
-				slug
-			);
+			const _needsUniqueIdentifier = needsUniqueIdentifier( postType );
 			let menuItemTitle = sprintf(
 				// translators: %s: Name of the post type e.g: "Post".
 				__( 'Single item: %s' ),

package/src/components/block-editor/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit, unionBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -80,31 +79,50 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	);
 
 	const blockPatterns = useMemo(
-		() => unionBy( settingsBlockPatterns, restBlockPatterns, 'name' ),
-		[ settingsBlockPatterns, restBlockPatterns ]
+		() =>
+			[
+				...( settingsBlockPatterns || [] ),
+				...( restBlockPatterns || [] ),
+			]
+				.filter(
+					( x, index, arr ) =>
+						index === arr.findIndex( ( y ) => x.name === y.name )
+				)
+				.filter( ( { postTypes } ) => {
+					return (
+						! postTypes ||
+						( Array.isArray( postTypes ) &&
+							postTypes.includes( templateType ) )
+					);
+				} ),
+		[ settingsBlockPatterns, restBlockPatterns, templateType ]
 	);
 
 	const blockPatternCategories = useMemo(
 		() =>
-			unionBy(
-				settingsBlockPatternCategories,
-				restBlockPatternCategories,
-				'name'
+			[
+				...( settingsBlockPatternCategories || [] ),
+				...( restBlockPatternCategories || [] ),
+			].filter(
+				( x, index, arr ) =>
+					index === arr.findIndex( ( y ) => x.name === y.name )
 			),
 		[ settingsBlockPatternCategories, restBlockPatternCategories ]
 	);
 
-	const settings = useMemo(
-		() => ( {
-			...omit( storedSettings, [
-				'__experimentalAdditionalBlockPatterns',
-				'__experimentalAdditionalBlockPatternCategories',
-			] ),
+	const settings = useMemo( () => {
+		const {
+			__experimentalAdditionalBlockPatterns,
+			__experimentalAdditionalBlockPatternCategories,
+			...restStoredSettings
+		} = storedSettings;
+
+		return {
+			...restStoredSettings,
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
-		} ),
-		[ storedSettings, blockPatterns, blockPatternCategories ]
-	);
+		};
+	}, [ storedSettings, blockPatterns, blockPatternCategories ] );
 
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',

package/src/components/block-editor/resizable-editor.js

@@ -8,6 +8,7 @@ import {
 	__unstableEditorStyles as EditorStyles,
 	__unstableIframe as Iframe,
 	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useMergeRefs } from '@wordpress/compose';
@@ -37,9 +38,14 @@ const HANDLE_STYLES_OVERRIDE = {
 };
 
 function ResizableEditor( { enableResizing, settings, children, ...props } ) {
-	const deviceType = useSelect(
-		( select ) =>
-			select( editSiteStore ).__experimentalGetPreviewDeviceType(),
+	const { deviceType, isZoomOutMode } = useSelect(
+		( select ) => ( {
+			deviceType:
+				select( editSiteStore ).__experimentalGetPreviewDeviceType(),
+			isZoomOutMode:
+				select( blockEditorStore ).__unstableGetEditorMode() ===
+				'zoom-out',
+		} ),
 		[]
 	);
 	const deviceStyles = useResizeCanvas( deviceType );
@@ -163,6 +169,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 			} }
 		>
 			<Iframe
+				isZoomedOut={ isZoomOutMode }
 				style={ enableResizing ? { height } : deviceStyles }
 				head={
 					<>

package/src/components/code-editor/style.scss

@@ -6,14 +6,13 @@
 
 	&__body {
 		width: 100%;
-		padding: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
+		padding: $grid-unit-15;
 		max-width: $break-xlarge;
 		margin-left: auto;
 		margin-right: auto;
 
 		@include break-large() {
-			padding: $grid-unit-20 $grid-unit-30 #{ $grid-unit-60 * 2 } $grid-unit-30;
-			padding: 0 $grid-unit-30 $grid-unit-30 $grid-unit-30;
+			padding: $grid-unit-30;
 		}
 	}
 

package/src/components/editor/index.js

@@ -9,6 +9,7 @@ import {
 	BlockContextProvider,
 	BlockBreadcrumb,
 	BlockStyles,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	InterfaceSkeleton,
@@ -77,6 +78,7 @@ function Editor( { onError } ) {
 		nextShortcut,
 		editorMode,
 		showIconLabels,
+		blockEditorMode,
 	} = useSelect( ( select ) => {
 		const {
 			isInserterOpened,
@@ -89,6 +91,7 @@ function Editor( { onError } ) {
 			getEditorMode,
 		} = select( editSiteStore );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
 
@@ -125,6 +128,7 @@ function Editor( { onError } ) {
 				'core/edit-site',
 				'showIconLabels'
 			),
+			blockEditorMode: __unstableGetEditorMode(),
 		};
 	}, [] );
 	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
@@ -320,11 +324,14 @@ function Editor( { onError } ) {
 												</>
 											}
 											footer={
-												<BlockBreadcrumb
-													rootLabelText={ __(
-														'Template'
-													) }
-												/>
+												blockEditorMode !==
+												'zoom-out' ? (
+													<BlockBreadcrumb
+														rootLabelText={ __(
+															'Template'
+														) }
+													/>
+												) : undefined
 											}
 											shortcuts={ {
 												previous: previousShortcut,

package/src/components/global-styles/dimensions-panel.js

@@ -121,20 +121,21 @@ function splitStyleValue( value ) {
 function splitGapValue( value ) {
 	// Check for shorthand value (a string value).
 	if ( value && typeof value === 'string' ) {
-		// Convert to value for individual sides for BoxControl.
+		// If the value is a string, treat it as a single side (top) for the spacing controls.
 		return {
 			top: value,
-			right: value,
-			bottom: value,
-			left: value,
 		};
 	}
 
-	return {
-		...value,
-		right: value?.left,
-		bottom: value?.top,
-	};
+	if ( value ) {
+		return {
+			...value,
+			right: value?.left,
+			bottom: value?.top,
+		};
+	}
+
+	return value;
 }
 
 // Props for managing `layout.contentSize`.
@@ -238,21 +239,26 @@ function useMarginProps( name ) {
 function useBlockGapProps( name ) {
 	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
 	const gapValues = splitGapValue( gapValue );
-	const setGapValues = ( nextBoxGapValue ) => {
-		if ( ! nextBoxGapValue ) {
-			setGapValue( null );
-		}
-		setGapValue( {
-			top: nextBoxGapValue?.top,
-			left: nextBoxGapValue?.left,
-		} );
-	};
 	const gapSides = useCustomSides( name, 'blockGap' );
 	const isAxialGap =
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const resetGapValue = () => setGapValue( undefined );
 	const [ userSetGapValue ] = useStyle( 'spacing.blockGap', name, 'user' );
 	const hasGapValue = () => !! userSetGapValue;
+	const setGapValues = ( nextBoxGapValue ) => {
+		if ( ! nextBoxGapValue ) {
+			setGapValue( null );
+		}
+		// If axial gap is not enabled, treat the 'top' value as the shorthand gap value.
+		if ( ! isAxialGap && nextBoxGapValue?.hasOwnProperty( 'top' ) ) {
+			setGapValue( nextBoxGapValue.top );
+		} else {
+			setGapValue( {
+				top: nextBoxGapValue?.top,
+				left: nextBoxGapValue?.left,
+			} );
+		}
+	};
 	return {
 		gapValue,
 		gapValues,
@@ -469,27 +475,42 @@ export default function DimensionsPanel( { name } ) {
 					label={ __( 'Block spacing' ) }
 					onDeselect={ resetGapValue }
 					isShownByDefault={ true }
+					className={ classnames( {
+						'tools-panel-item-spacing': showSpacingPresetsControl,
+					} ) }
 				>
-					{ isAxialGap ? (
-						<BoxControl
+					{ ! showSpacingPresetsControl &&
+						( isAxialGap ? (
+							<BoxControl
+								label={ __( 'Block spacing' ) }
+								min={ 0 }
+								onChange={ setGapValues }
+								units={ units }
+								sides={ gapSides }
+								values={ gapValues }
+								allowReset={ false }
+								splitOnAxis={ isAxialGap }
+							/>
+						) : (
+							<UnitControl
+								label={ __( 'Block spacing' ) }
+								__unstableInputWidth="80px"
+								min={ 0 }
+								onChange={ setGapValue }
+								units={ units }
+								value={ gapValue }
+							/>
+						) ) }
+					{ showSpacingPresetsControl && (
+						<SpacingSizesControl
 							label={ __( 'Block spacing' ) }
 							min={ 0 }
 							onChange={ setGapValues }
-							units={ units }
-							sides={ gapSides }
+							sides={ isAxialGap ? gapSides : [ 'top' ] } // Use 'top' as the shorthand property in non-axial configurations.
 							values={ gapValues }
 							allowReset={ false }
 							splitOnAxis={ isAxialGap }
 						/>
-					) : (
-						<UnitControl
-							label={ __( 'Block spacing' ) }
-							__unstableInputWidth="80px"
-							min={ 0 }
-							onChange={ setGapValue }
-							units={ units }
-							value={ gapValue }
-						/>
 					) }
 				</ToolsPanelItem>
 			) }

package/src/components/global-styles/gradients-palette-panel.js

@@ -45,7 +45,18 @@ export default function GradientPalettePanel( { name } ) {
 		'color.defaultGradients',
 		name
 	);
-	const [ duotonePalette ] = useSetting( 'color.duotone' ) || [];
+
+	const [ customDuotone ] = useSetting( 'color.duotone.custom' ) || [];
+	const [ defaultDuotone ] = useSetting( 'color.duotone.default' ) || [];
+	const [ themeDuotone ] = useSetting( 'color.duotone.theme' ) || [];
+	const [ defaultDuotoneEnabled ] = useSetting( 'color.defaultDuotone' );
+
+	const duotonePalette = [
+		...( customDuotone || [] ),
+		...( themeDuotone || [] ),
+		...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),
+	];
+
 	return (
 		<VStack
 			className="edit-site-global-styles-gradient-palette-panel"
@@ -80,17 +91,19 @@ export default function GradientPalettePanel( { name } ) {
 				) }
 				slugPrefix="custom-"
 			/>
-			<div>
-				<Subtitle>{ __( 'Duotone' ) }</Subtitle>
-				<Spacer margin={ 3 } />
-				<DuotonePicker
-					duotonePalette={ duotonePalette }
-					disableCustomDuotone={ true }
-					disableCustomColors={ true }
-					clearable={ false }
-					onChange={ noop }
-				/>
-			</div>
+			{ !! duotonePalette && !! duotonePalette.length && (
+				<div>
+					<Subtitle>{ __( 'Duotone' ) }</Subtitle>
+					<Spacer margin={ 3 } />
+					<DuotonePicker
+						duotonePalette={ duotonePalette }
+						disableCustomDuotone={ true }
+						disableCustomColors={ true }
+						clearable={ false }
+						onChange={ noop }
+					/>
+				</div>
+			) }
 		</VStack>
 	);
 }

package/src/components/global-styles/hooks.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, cloneDeep, set, isEqual, has } from 'lodash';
+import { get, set, isEqual } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -48,7 +48,8 @@ export function useSetting( path, blockName, source = 'all' ) {
 
 	const setSetting = ( newValue ) => {
 		setUserConfig( ( currentConfig ) => {
-			const newUserConfig = cloneDeep( currentConfig );
+			// Deep clone `currentConfig` to avoid mutating it later.
+			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
 			const pathToSet = PATHS_WITH_MERGE[ path ]
 				? fullPath + '.custom'
 				: fullPath;
@@ -109,7 +110,8 @@ export function useStyle( path, blockName, source = 'all' ) {
 
 	const setStyle = ( newValue ) => {
 		setUserConfig( ( currentConfig ) => {
-			const newUserConfig = cloneDeep( currentConfig );
+			// Deep clone `currentConfig` to avoid mutating it later.
+			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
 			set(
 				newUserConfig,
 				finalPath,
@@ -210,10 +212,8 @@ export function getSupportedGlobalStylesPanels( name ) {
 		// unset, we still enable it.
 		if ( STYLE_PROPERTY[ styleName ].requiresOptOut ) {
 			if (
-				has(
-					blockType.supports,
-					STYLE_PROPERTY[ styleName ].support[ 0 ]
-				) &&
+				STYLE_PROPERTY[ styleName ].support[ 0 ] in
+					blockType.supports &&
 				get(
 					blockType.supports,
 					STYLE_PROPERTY[ styleName ].support

package/src/components/global-styles/preview.js

@@ -79,13 +79,13 @@ const StylesPreview = ( { label, isFocused } ) => {
 		)
 		.slice( 0, 2 );
 
-	// Reset leaked styles from WP common.css.
+	// Reset leaked styles from WP common.css and remove main content layout padding.
 	const editorStyles = useMemo( () => {
 		if ( styles ) {
 			return [
 				...styles,
 				{
-					css: 'body{min-width: 0;}',
+					css: 'body{min-width: 0;padding: 0;}',
 					isGlobalStyles: true,
 				},
 			];