Remove start blank option in template pattern suggestions and add `…

…skip` button (#50099) * Update `start blank` in template pattern suggestions * add skip button * add empty line in changelog * Make actions bar sticky * z-index * update snapshots --------- Co-authored-by: James Koster <james@jameskoster.co.uk>
WordPress · May 2, 2023 · 305c93f · 305c93f
1 parent bdb22cd
commit 305c93f
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 51 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -189,6 +189,9 @@ $z-layers: (
 	".edit-site-layout__canvas-container.is-resizing::after": 100,
 	// Title needs to appear above other UI the section content.
 	".edit-site-sidebar-navigation-screen__title-icon": 1,
+
+	// Ensure modal footer actions appear above modal contents
+	".edit-site-start-template-options__modal__actions": 1,
 );
 
 @function z-index( $key ) {

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -13,6 +13,10 @@
 
 -   `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)
 
 ### Internal

diff --git 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/...es/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap b/...es/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap
@@ -43,7 +43,9 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
         </svg>
       </button>
     </div>
-    <div>
+    <div
+      class="components-modal__children-container"
+    >
       <section
         class="edit-post-keyboard-shortcut-help-modal__section edit-post-keyboard-shortcut-help-modal__main-shortcuts"
       >

diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
@@ -102,7 +102,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
         </svg>
       </button>
     </div>
-    <div>
+    <div
+      class="components-modal__children-container"
+    >
       <div
         class="interface-preferences__tabs"
       >
@@ -723,7 +725,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
         </svg>
       </button>
     </div>
-    <div>
+    <div
+      class="components-modal__children-container"
+    >
       <div
         class="components-navigator-provider interface-preferences__provider emotion-0 emotion-1"
         data-wp-c16t="true"

diff --git a/packages/edit-site/src/components/start-template-options/index.js b/packages/edit-site/src/components/start-template-options/index.js
@@ -1,7 +1,7 @@
 /**
  * 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 {
@@ -36,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 );
@@ -72,13 +70,6 @@ function useStartPatterns( fallbackContent ) {
 				.map( ( pattern ) => {
 					return { ...pattern, blocks: parse( pattern.content ) };
 				} ),
-			{
-				name: 'start-blank',
-				blocks: parse(
-					'<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->'
-				),
-				title: START_BLANK_TITLE,
-			},
 		];
 	}, [ fallbackContent, slug, patterns ] );
 }
@@ -87,25 +78,15 @@ function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
 	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
 	const blockPatterns = useStartPatterns( fallbackContent );
 	const shownBlockPatterns = useAsyncList( blockPatterns );
-
 	return (
-		<div
-			className="edit-site-start-template-options__pattern-container"
-			style={ {
-				'--wp-edit-site-start-template-options-start-blank': `"${ START_BLANK_TITLE }"`,
+		<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>
+		/>
 	);
 }
 
@@ -134,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
@@ -1,3 +1,31 @@
+.edit-site-start-template-options__modal {
+	.components-modal__content {
+		padding-bottom: 0;
+	}
+
+	.components-modal__children-container {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+
+		.edit-site-start-template-options__modal__actions {
+			margin-top: auto;
+			position: sticky;
+			bottom: 0;
+			background-color: $white;
+			margin-left: - $grid-unit-40;
+			margin-right: - $grid-unit-40;
+			padding: $grid-unit-30 $grid-unit-40 $grid-unit-40;
+			border-top: 1px solid $gray-300;
+			z-index: z-index(".edit-site-start-template-options__modal__actions");
+		}
+	}
+
+	.block-editor-block-patterns-list {
+		padding-bottom: $grid-unit-40;
+	}
+}
+
 .edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
 	column-count: 2;
 	column-gap: $grid-unit-30;
@@ -28,24 +56,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-last-child(2) {
-		.block-editor-block-preview__container {
-			position: absolute;
-			padding: 0;
-			background: #f0f0f0;
-			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;
-		}
-	}
 }