From aaf2eec13803ed75bdc73bf0d6dbddf985d6c1d3 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Fri, 28 Apr 2023 14:20:35 +0300
Subject: [PATCH] add skip button

---
 packages/components/CHANGELOG.md              |  3 +
 packages/components/src/modal/index.tsx       |  7 ++-
 .../start-template-options/index.js           | 57 +++++++------------
 .../start-template-options/style.scss         | 34 ++++-------
 4 files changed, 40 insertions(+), 61 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 8c509dfc63e86..9a897c4915a36 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -9,6 +9,9 @@
 ### Documentation
 
 -   `TreeGrid`: Update docs with `data-expanded` attribute usage ([#50026](https://github.com/WordPress/gutenberg/pull/50026)).
+### Enhancements
+
+-   `Modal`: Add css class to children container ([#50099](https://github.com/WordPress/gutenberg/pull/50099)).
 
 ## 23.9.0 (2023-04-26)
 
diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index d9c7b602b8392..a22dc2a4ec671 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -252,7 +252,12 @@ function UnforwardedModal(
 								) }
 							</div>
 						) }
-						<div ref={ childrenContainerRef }>{ children }</div>
+						<div
+							ref={ childrenContainerRef }
+							className="components-modal__children-container"
+						>
+							{ children }
+						</div>
 					</div>
 				</div>
 			</StyleProvider>
diff --git a/packages/edit-site/src/components/start-template-options/index.js b/packages/edit-site/src/components/start-template-options/index.js
index 39ae9a0d08911..6cce84deebfa9 100644
--- a/packages/edit-site/src/components/start-template-options/index.js
+++ b/packages/edit-site/src/components/start-template-options/index.js
@@ -1,13 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { Modal } from '@wordpress/components';
+import { Modal, Flex, FlexItem, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useMemo } from '@wordpress/element';
 import {
 	__experimentalBlockPatternsList as BlockPatternsList,
 	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useAsyncList } from '@wordpress/compose';
@@ -21,9 +20,6 @@ import { store as editSiteStore } from '../../store';
 import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
-import { unlock } from '../../private-apis';
-
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function useFallbackTemplateContent( slug, isCustom = false ) {
 	const [ templateContent, setTemplateContent ] = useState( '' );
@@ -40,8 +36,6 @@ function useFallbackTemplateContent( slug, isCustom = false ) {
 	return templateContent;
 }
 
-const START_BLANK_TITLE = __( 'Start blank' );
-
 function useStartPatterns( fallbackContent ) {
 	const { slug, patterns } = useSelect( ( select ) => {
 		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
@@ -59,13 +53,6 @@ function useStartPatterns( fallbackContent ) {
 	return useMemo( () => {
 		// filter patterns that are supposed to be used in the current template being edited.
 		return [
-			{
-				name: 'start-blank',
-				blocks: parse(
-					'<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->'
-				),
-				title: START_BLANK_TITLE,
-			},
 			{
 				name: 'fallback',
 				blocks: parse( fallbackContent ),
@@ -91,32 +78,15 @@ function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
 	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
 	const blockPatterns = useStartPatterns( fallbackContent );
 	const shownBlockPatterns = useAsyncList( blockPatterns );
-
-	const [ textColor = 'black' ] = useGlobalStyle( 'color.text' );
-	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
-	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
 	return (
-		<div
-			className="edit-site-start-template-options__pattern-container"
-			style={ {
-				'--wp-edit-site-start-template-options-start-blank': `"${ START_BLANK_TITLE }"`,
-				'--wp-edit-site-start-template-options-start-blank-text': `${ textColor }`,
-				'--wp-edit-site-start-template-options-start-blank-background': `${
-					gradientValue || backgroundColor
-				}`,
+		<BlockPatternsList
+			blockPatterns={ blockPatterns }
+			shownPatterns={ shownBlockPatterns }
+			onClickPattern={ ( pattern, blocks ) => {
+				onChange( blocks, { selection: undefined } );
+				onChoosePattern();
 			} }
-		>
-			<BlockPatternsList
-				blockPatterns={ blockPatterns }
-				shownPatterns={ shownBlockPatterns }
-				onClickPattern={ ( pattern, blocks ) => {
-					onChange( 'start-blank' === pattern.name ? [] : blocks, {
-						selection: undefined,
-					} );
-					onChoosePattern();
-				} }
-			/>
-		</div>
+		/>
 	);
 }
 
@@ -145,6 +115,17 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 					} }
 				/>
 			</div>
+			<Flex
+				className="edit-site-start-template-options__modal__actions"
+				justify="flex-end"
+				expanded={ false }
+			>
+				<FlexItem>
+					<Button variant="tertiary" onClick={ onClose }>
+						{ __( 'Skip' ) }
+					</Button>
+				</FlexItem>
+			</Flex>
 		</Modal>
 	);
 }
diff --git a/packages/edit-site/src/components/start-template-options/style.scss b/packages/edit-site/src/components/start-template-options/style.scss
index f3780db8d047e..a438940af8e44 100644
--- a/packages/edit-site/src/components/start-template-options/style.scss
+++ b/packages/edit-site/src/components/start-template-options/style.scss
@@ -1,3 +1,15 @@
+.edit-site-start-template-options__modal {
+	.components-modal__children-container {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+
+		.edit-site-start-template-options__modal__actions {
+			margin-top: auto;
+		}
+	}
+}
+
 .edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
 	column-count: 2;
 	column-gap: $grid-unit-30;
@@ -28,26 +40,4 @@
 			box-shadow: 0 0 0 1px $gray-300;
 		}
 	}
-
-	// The start blank pattern is the last and we are selecting it.
-	.block-editor-block-patterns-list__list-item:nth-child(1) {
-		min-height: $grid-unit-50 * 4;
-		.block-editor-block-preview__container {
-			position: absolute;
-			padding: 0;
-			color: var(--wp-edit-site-start-template-options-start-blank-text);
-			background: var(--wp-edit-site-start-template-options-start-blank-background);
-			min-height: $grid-unit-50 * 4;
-			&::after {
-				width: 100%;
-				top: 50%;
-				margin-top: -1em;
-				content: var(--wp-edit-site-start-template-options-start-blank);
-				text-align: center;
-			}
-		}
-		iframe {
-			display: none;
-		}
-	}
 }