@wordpress/edit-site 4.14.2 → 4.15.1-next.4d3b314fd5.0

package/build-style/style-rtl.css

@@ -741,7 +741,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   margin: 16px;
 }
 .edit-site-global-styles-screen-colors .component-color-indicator {
-  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+  background: #fff linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
   flex-shrink: 0;
 }
 
@@ -1620,6 +1620,24 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-top: 12px;
 }
 
+.edit-site-template-actions-loading-screen-modal {
+  -webkit-backdrop-filter: none;
+          backdrop-filter: none;
+  background-color: transparent;
+}
+.edit-site-template-actions-loading-screen-modal.is-full-screen {
+  background-color: #fff;
+  box-shadow: 0 0 0 transparent;
+  min-width: 100%;
+  min-height: 100%;
+}
+.edit-site-template-actions-loading-screen-modal__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
 .edit-site-sidebar {
   width: 280px;
 }
@@ -1694,8 +1712,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   padding: 16px;
 }
 
-.edit-site-navigation-sidebar__beta,
-.edit-site-global-styles-sidebar__beta {
+.edit-site-navigation-sidebar__beta {
   display: inline-flex;
   margin-right: 8px;
   padding: 0 8px;

package/build-style/style.css

@@ -741,7 +741,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   margin: 16px;
 }
 .edit-site-global-styles-screen-colors .component-color-indicator {
-  background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+  background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
   flex-shrink: 0;
 }
 
@@ -1620,6 +1620,24 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-top: 12px;
 }
 
+.edit-site-template-actions-loading-screen-modal {
+  -webkit-backdrop-filter: none;
+          backdrop-filter: none;
+  background-color: transparent;
+}
+.edit-site-template-actions-loading-screen-modal.is-full-screen {
+  background-color: #fff;
+  box-shadow: 0 0 0 transparent;
+  min-width: 100%;
+  min-height: 100%;
+}
+.edit-site-template-actions-loading-screen-modal__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
 .edit-site-sidebar {
   width: 280px;
 }
@@ -1694,8 +1712,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   padding: 16px;
 }
 
-.edit-site-navigation-sidebar__beta,
-.edit-site-global-styles-sidebar__beta {
+.edit-site-navigation-sidebar__beta {
   display: inline-flex;
   margin-left: 8px;
   padding: 0 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.14.2",
+	"version": "4.15.1-next.4d3b314fd5.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.17.1",
-		"@wordpress/api-fetch": "^6.14.1",
-		"@wordpress/block-editor": "^10.0.2",
-		"@wordpress/block-library": "^7.14.2",
-		"@wordpress/blocks": "^11.16.2",
-		"@wordpress/components": "^21.0.2",
-		"@wordpress/compose": "^5.15.2",
-		"@wordpress/core-data": "^5.0.2",
-		"@wordpress/data": "^7.1.2",
-		"@wordpress/deprecated": "^3.17.1",
-		"@wordpress/editor": "^12.16.2",
-		"@wordpress/element": "^4.15.1",
-		"@wordpress/hooks": "^3.17.1",
-		"@wordpress/html-entities": "^3.17.1",
-		"@wordpress/i18n": "^4.17.1",
-		"@wordpress/icons": "^9.8.1",
-		"@wordpress/interface": "^4.16.2",
-		"@wordpress/keyboard-shortcuts": "^3.15.2",
-		"@wordpress/keycodes": "^3.17.1",
-		"@wordpress/media-utils": "^4.8.1",
-		"@wordpress/notices": "^3.17.2",
-		"@wordpress/plugins": "^4.15.2",
-		"@wordpress/preferences": "^2.9.2",
-		"@wordpress/reusable-blocks": "^3.15.2",
-		"@wordpress/style-engine": "^1.0.1",
-		"@wordpress/url": "^3.18.1",
-		"@wordpress/viewport": "^4.15.2",
+		"@wordpress/a11y": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/api-fetch": "^6.15.1-next.4d3b314fd5.0",
+		"@wordpress/block-editor": "^10.1.1-next.4d3b314fd5.0",
+		"@wordpress/block-library": "^7.15.1-next.4d3b314fd5.0",
+		"@wordpress/blocks": "^11.18.1-next.4d3b314fd5.0",
+		"@wordpress/components": "^21.1.2-next.4d3b314fd5.0",
+		"@wordpress/compose": "^5.16.1-next.4d3b314fd5.0",
+		"@wordpress/core-data": "^5.1.1-next.4d3b314fd5.0",
+		"@wordpress/data": "^7.2.1-next.4d3b314fd5.0",
+		"@wordpress/deprecated": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/editor": "^12.17.1-next.4d3b314fd5.0",
+		"@wordpress/element": "^4.16.1-next.4d3b314fd5.0",
+		"@wordpress/hooks": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/html-entities": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/i18n": "^4.18.1-next.4d3b314fd5.0",
+		"@wordpress/icons": "^9.9.1-next.4d3b314fd5.0",
+		"@wordpress/interface": "^4.17.1-next.4d3b314fd5.0",
+		"@wordpress/keyboard-shortcuts": "^3.16.1-next.4d3b314fd5.0",
+		"@wordpress/keycodes": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/media-utils": "^4.9.1-next.4d3b314fd5.0",
+		"@wordpress/notices": "^3.18.1-next.4d3b314fd5.0",
+		"@wordpress/plugins": "^4.16.1-next.4d3b314fd5.0",
+		"@wordpress/preferences": "^2.10.1-next.4d3b314fd5.0",
+		"@wordpress/reusable-blocks": "^3.16.1-next.4d3b314fd5.0",
+		"@wordpress/style-engine": "^1.1.1-next.4d3b314fd5.0",
+		"@wordpress/url": "^3.19.1-next.4d3b314fd5.0",
+		"@wordpress/viewport": "^4.16.1-next.4d3b314fd5.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f6021282457317c7e12dcc3a3f02c9ac28e16a30"
+	"gitHead": "25054766423cb49d959eb656c2533530073ff5c2"
 }

package/src/components/add-new-template/add-custom-generic-template-modal.js

@@ -16,27 +16,38 @@ import {
 	TextControl,
 } from '@wordpress/components';
 
-function AddCustomGenericTemplateModal( { onClose, createTemplate } ) {
+/**
+ * Internal dependencies
+ */
+import TemplateActionsLoadingScreen from './template-actions-loading-screen';
+
+function AddCustomGenericTemplateModal( {
+	onClose,
+	createTemplate,
+	isCreatingTemplate,
+} ) {
 	const [ title, setTitle ] = useState( '' );
 	const defaultTitle = __( 'Custom Template' );
 	const [ isBusy, setIsBusy ] = useState( false );
 	async function onCreateTemplate( event ) {
 		event.preventDefault();
-
 		if ( isBusy ) {
 			return;
 		}
-
 		setIsBusy( true );
-
-		createTemplate(
-			{
-				slug:
-					'wp-custom-template-' + kebabCase( title || defaultTitle ),
-				title: title || defaultTitle,
-			},
-			false
-		);
+		try {
+			await createTemplate(
+				{
+					slug:
+						'wp-custom-template-' +
+						kebabCase( title || defaultTitle ),
+					title: title || defaultTitle,
+				},
+				false
+			);
+		} finally {
+			setIsBusy( false );
+		}
 	}
 	return (
 		<Modal
@@ -47,6 +58,7 @@ function AddCustomGenericTemplateModal( { onClose, createTemplate } ) {
 			} }
 			overlayClassName="edit-site-custom-generic-template__modal"
 		>
+			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
 			<form onSubmit={ onCreateTemplate }>
 				<Flex align="flex-start" gap={ 8 }>
 					<FlexItem>

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

@@ -21,6 +21,7 @@ import { useEntityRecords } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
+import TemplateActionsLoadingScreen from './template-actions-loading-screen';
 import { mapToIHasNameAndId } from './utils';
 
 const EMPTY_ARRAY = [];
@@ -160,7 +161,12 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 	);
 }
 
-function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
+function AddCustomTemplateModal( {
+	onClose,
+	onSelect,
+	entityForSuggestions,
+	isCreatingTemplate,
+} ) {
 	const [ showSearchEntities, setShowSearchEntities ] = useState(
 		entityForSuggestions.hasGeneralTemplate
 	);
@@ -176,6 +182,7 @@ function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
 			closeLabel={ __( 'Close' ) }
 			onRequestClose={ onClose }
 		>
+			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
 			{ ! showSearchEntities && (
 				<>
 					<p>

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

@@ -44,6 +44,7 @@ import {
 	usePostTypeArchiveMenuItems,
 } from './utils';
 import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
+import TemplateActionsLoadingScreen from './template-actions-loading-screen';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 
@@ -86,6 +87,7 @@ export default function NewTemplate( { postType } ) {
 		setShowCustomGenericTemplateModal,
 	] = useState( false );
 	const [ entityForSuggestions, setEntityForSuggestions ] = useState( {} );
+	const [ isCreatingTemplate, setIsCreatingTemplate ] = useState( false );
 
 	const history = useHistory();
 	const { saveEntityRecord } = useDispatch( coreStore );
@@ -94,6 +96,10 @@ export default function NewTemplate( { postType } ) {
 	const { setTemplate } = useDispatch( editSiteStore );
 
 	async function createTemplate( template, isWPSuggestion = true ) {
+		if ( isCreatingTemplate ) {
+			return;
+		}
+		setIsCreatingTemplate( true );
 		try {
 			const { title, description, slug, templatePrefix } = template;
 			let templateContent = template.content;
@@ -106,7 +112,7 @@ export default function NewTemplate( { postType } ) {
 						template_prefix: templatePrefix,
 					} ),
 				} );
-				templateContent = fallbackTemplate.content;
+				templateContent = fallbackTemplate.content.raw;
 			}
 			const newTemplate = await saveEntityRecord(
 				'postType',
@@ -151,6 +157,8 @@ export default function NewTemplate( { postType } ) {
 			createErrorNotice( errorMessage, {
 				type: 'snackbar',
 			} );
+		} finally {
+			setIsCreatingTemplate( false );
 		}
 	}
 
@@ -176,53 +184,60 @@ export default function NewTemplate( { postType } ) {
 				} }
 			>
 				{ () => (
-					<NavigableMenu className="edit-site-new-template-dropdown__popover">
-						<MenuGroup label={ postType.labels.add_new_item }>
-							{ missingTemplates.map( ( template ) => {
-								const {
-									title,
-									description,
-									slug,
-									onClick,
-									icon,
-								} = template;
-								return (
-									<MenuItem
-										icon={
-											icon ||
-											TEMPLATE_ICONS[ slug ] ||
-											post
-										}
-										iconPosition="left"
-										info={ description }
-										key={ slug }
-										onClick={ () =>
-											onClick
-												? onClick( template )
-												: createTemplate( template )
-										}
-									>
-										{ title }
-									</MenuItem>
-								);
-							} ) }
-						</MenuGroup>
-						<MenuGroup>
-							<MenuItem
-								icon={ customGenericTemplateIcon }
-								iconPosition="left"
-								info={ __(
-									'Custom templates can be applied to any post or page.'
-								) }
-								key="custom-template"
-								onClick={ () =>
-									setShowCustomGenericTemplateModal( true )
-								}
-							>
-								{ __( 'Custom template' ) }
-							</MenuItem>
-						</MenuGroup>
-					</NavigableMenu>
+					<>
+						{ isCreatingTemplate && (
+							<TemplateActionsLoadingScreen />
+						) }
+						<NavigableMenu className="edit-site-new-template-dropdown__popover">
+							<MenuGroup label={ postType.labels.add_new_item }>
+								{ missingTemplates.map( ( template ) => {
+									const {
+										title,
+										description,
+										slug,
+										onClick,
+										icon,
+									} = template;
+									return (
+										<MenuItem
+											icon={
+												icon ||
+												TEMPLATE_ICONS[ slug ] ||
+												post
+											}
+											iconPosition="left"
+											info={ description }
+											key={ slug }
+											onClick={ () =>
+												onClick
+													? onClick( template )
+													: createTemplate( template )
+											}
+										>
+											{ title }
+										</MenuItem>
+									);
+								} ) }
+							</MenuGroup>
+							<MenuGroup>
+								<MenuItem
+									icon={ customGenericTemplateIcon }
+									iconPosition="left"
+									info={ __(
+										'Custom templates can be applied to any post or page.'
+									) }
+									key="custom-template"
+									onClick={ () =>
+										setShowCustomGenericTemplateModal(
+											true
+										)
+									}
+								>
+									{ __( 'Custom template' ) }
+								</MenuItem>
+							</MenuGroup>
+						</NavigableMenu>
+					</>
 				) }
 			</DropdownMenu>
 			{ showCustomTemplateModal && (
@@ -230,12 +245,14 @@ export default function NewTemplate( { postType } ) {
 					onClose={ () => setShowCustomTemplateModal( false ) }
 					onSelect={ createTemplate }
 					entityForSuggestions={ entityForSuggestions }
+					isCreatingTemplate={ isCreatingTemplate }
 				/>
 			) }
 			{ showCustomGenericTemplateModal && (
 				<AddCustomGenericTemplateModal
 					onClose={ () => setShowCustomGenericTemplateModal( false ) }
 					createTemplate={ createTemplate }
+					isCreatingTemplate={ isCreatingTemplate }
 				/>
 			) }
 		</>

package/src/components/add-new-template/style.scss

@@ -158,3 +158,22 @@
 .edit-site-custom-generic-template__modal-actions {
 	margin-top: $grid-unit-15;
 }
+
+.edit-site-template-actions-loading-screen-modal {
+	backdrop-filter: none;
+	background-color: transparent;
+
+	&.is-full-screen {
+		background-color: $white;
+		box-shadow: 0 0 0 transparent;
+		min-width: 100%;
+		min-height: 100%;
+	}
+
+	&__content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+}

package/src/components/add-new-template/template-actions-loading-screen.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { Spinner, Modal } from '@wordpress/components';
+
+export default function TemplateActionsLoadingScreen() {
+	const baseCssClass = 'edit-site-template-actions-loading-screen-modal';
+	return (
+		<Modal
+			isFullScreen
+			isDismissible={ false }
+			shouldCloseOnClickOutside={ false }
+			shouldCloseOnEsc={ false }
+			onRequestClose={ () => {} }
+			__experimentalHideHeader
+			className={ baseCssClass }
+		>
+			<div className={ `${ baseCssClass }__content` }>
+				<Spinner />
+			</div>
+		</Modal>
+	);
+}

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

@@ -253,29 +253,10 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 								};
 							},
 							getSpecificTemplate: ( suggestion ) => {
-								let title = sprintf(
-									// translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the singular name of a post type and %2$s is the name of the post, e.g. "Page: Hello".
-									__( '%1$s: %2$s' ),
-									labels.singular_name,
-									suggestion.name
-								);
-								const description = sprintf(
-									// translators: Represents the description of a user's custom template in the Site Editor, e.g. "Template for Page: Hello"
-									__( 'Template for %1$s' ),
-									title
-								);
-								if ( _needsUniqueIdentifier ) {
-									title = sprintf(
-										// translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the template title and %2$s is the slug of the post type, e.g. "Project: Hello (project_type)"
-										__( '%1$s (%2$s)' ),
-										title,
-										slug
-									);
-								}
+								const templateSlug = `${ templatePrefixes[ slug ] }-${ suggestion.slug }`;
 								return {
-									title,
-									description,
-									slug: `${ templatePrefixes[ slug ] }-${ suggestion.slug }`,
+									title: templateSlug,
+									slug: templateSlug,
 									templatePrefix: templatePrefixes[ slug ],
 								};
 							},
@@ -417,29 +398,10 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 								};
 							},
 							getSpecificTemplate: ( suggestion ) => {
-								let title = sprintf(
-									// translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the singular name of a taxonomy and %2$s is the name of the term, e.g. "Category: shoes".
-									__( '%1$s: %2$s' ),
-									labels.singular_name,
-									suggestion.name
-								);
-								const description = sprintf(
-									// translators: Represents the description of a user's custom template in the Site Editor, e.g. "Template for Category: shoes"
-									__( 'Template for %1$s' ),
-									title
-								);
-								if ( _needsUniqueIdentifier ) {
-									title = sprintf(
-										// translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the template title and %2$s is the slug of the taxonomy, e.g. "Category: shoes (product_tag)"
-										__( '%1$s (%2$s)' ),
-										title,
-										slug
-									);
-								}
+								const templateSlug = `${ templatePrefixes[ slug ] }-${ suggestion.slug }`;
 								return {
-									title,
-									description,
-									slug: `${ templatePrefixes[ slug ] }-${ suggestion.slug }`,
+									title: templateSlug,
+									slug: templateSlug,
 									templatePrefix: templatePrefixes[ slug ],
 								};
 							},
@@ -480,26 +442,6 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 	return taxonomiesMenuItems;
 };
 
-function useAuthorNeedsUniqueIndentifier() {
-	const authors = useSelect(
-		( select ) =>
-			select( coreStore ).getUsers( { who: 'authors', per_page: -1 } ),
-		[]
-	);
-	const authorsCountByName = useMemo( () => {
-		return ( authors || [] ).reduce( ( authorsCount, { name } ) => {
-			authorsCount[ name ] = ( authorsCount[ name ] || 0 ) + 1;
-			return authorsCount;
-		}, {} );
-	}, [ authors ] );
-	return useCallback(
-		( name ) => {
-			return authorsCountByName[ name ] > 1;
-		},
-		[ authorsCountByName ]
-	);
-}
-
 const USE_AUTHOR_MENU_ITEM_TEMPLATE_PREFIX = { user: 'author' };
 const USE_AUTHOR_MENU_ITEM_QUERY_PARAMETERS = { user: { who: 'authors' } };
 export function useAuthorMenuItem( onClickMenuItem ) {
@@ -510,7 +452,6 @@ export function useAuthorMenuItem( onClickMenuItem ) {
 		USE_AUTHOR_MENU_ITEM_TEMPLATE_PREFIX,
 		USE_AUTHOR_MENU_ITEM_QUERY_PARAMETERS
 	);
-	const authorNeedsUniqueId = useAuthorNeedsUniqueIndentifier();
 	let authorMenuItem = defaultTemplateTypes?.find(
 		( { slug } ) => slug === 'author'
 	);
@@ -542,30 +483,10 @@ export function useAuthorMenuItem( onClickMenuItem ) {
 						};
 					},
 					getSpecificTemplate: ( suggestion ) => {
-						const needsUniqueId = authorNeedsUniqueId(
-							suggestion.name
-						);
-						const title = needsUniqueId
-							? sprintf(
-									// translators: %1$s: Represents the name of an author e.g: "Jorge", %2$s: Represents the slug of an author e.g: "author-jorge-slug".
-									__( 'Author: %1$s (%2$s)' ),
-									suggestion.name,
-									suggestion.slug
-							  )
-							: sprintf(
-									// translators: %s: Represents the name of an author e.g: "Jorge".
-									__( 'Author: %s' ),
-									suggestion.name
-							  );
-						const description = sprintf(
-							// translators: %s: Represents the name of an author e.g: "Jorge".
-							__( 'Template for Author: %s' ),
-							suggestion.name
-						);
+						const templateSlug = `author-${ suggestion.slug }`;
 						return {
-							title,
-							description,
-							slug: `author-${ suggestion.slug }`,
+							title: templateSlug,
+							slug: templateSlug,
 							templatePrefix: 'author',
 						};
 					},

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

@@ -68,11 +68,15 @@ function Palette( { name } ) {
 						}
 					>
 						<ZStack isLayered={ false } offset={ -8 }>
-							{ colors.slice( 0, 5 ).map( ( { color } ) => (
-								<ColorIndicatorWrapper key={ color }>
-									<ColorIndicator colorValue={ color } />
-								</ColorIndicatorWrapper>
-							) ) }
+							{ colors
+								.slice( 0, 5 )
+								.map( ( { color }, index ) => (
+									<ColorIndicatorWrapper
+										key={ `${ color }-${ index }` }
+									>
+										<ColorIndicator colorValue={ color } />
+									</ColorIndicatorWrapper>
+								) ) }
 						</ZStack>
 						<FlexItem>{ paletteButtonText }</FlexItem>
 					</HStack>

package/src/components/global-styles/style.scss

@@ -46,7 +46,7 @@
 
 	.component-color-indicator {
 		// Show a diagonal line (crossed out) for empty swatches.
-		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+		background: $white linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 		flex-shrink: 0;
 	}
 }

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

@@ -29,9 +29,6 @@ export default function GlobalStylesSidebar() {
 				<Flex>
 					<FlexBlock>
 						<strong>{ __( 'Styles' ) }</strong>
-						<span className="edit-site-global-styles-sidebar__beta">
-							{ __( 'Beta' ) }
-						</span>
 					</FlexBlock>
 					<FlexItem>
 						<DropdownMenu

package/src/components/sidebar/style.scss

@@ -78,8 +78,7 @@
 	padding: $grid-unit-20;
 }
 
-.edit-site-navigation-sidebar__beta,
-.edit-site-global-styles-sidebar__beta {
+.edit-site-navigation-sidebar__beta {
 	display: inline-flex;
 	margin-left: $grid-unit-10;
 	padding: 0 $grid-unit-10;