Update full screen modal dimensions, and pattern grids (#49894)

WordPress · Apr 20, 2023 · 4e94b3c · 4e94b3c · github-actions · Apr 20, 2023
1 parent b44e495
commit 4e94b3c
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 54 deletions.
diff --git a/packages/block-library/src/query/edit/pattern-selection-modal.js b/packages/block-library/src/query/edit/pattern-selection-modal.js
@@ -62,6 +62,7 @@ export default function PatternSelectionModal( {
 			overlayClassName="block-library-query-pattern__selection-modal"
 			title={ __( 'Choose a pattern' ) }
 			onRequestClose={ () => setIsPatternSelectionModalOpen( false ) }
+			isFullScreen={ true }
 		>
 			<div className="block-library-query-pattern__selection-content">
 				<div className="block-library-query-pattern__selection-search">

diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss
@@ -20,20 +20,17 @@
 }
 
 .block-library-query-pattern__selection-modal {
-	// To keep modal dimensions consistent as subsections are navigated, width
-	// and height are used instead of max-(width/height).
-	.components-modal__frame {
-		@include break-small() {
-			width: calc(100% - #{$grid-unit-20 * 2});
-			height: calc(100% - #{$header-height * 2});
-		}
 
-		@include break-medium() {
-			width: $break-medium - $grid-unit-20 * 2;
+	.block-editor-block-patterns-list {
+		column-count: 2;
+		column-gap: $grid-unit-30;
+
+		@include break-wide() {
+			column-count: 3;
 		}
 
-		@include break-large() {
-			height: 70%;
+		.block-editor-block-patterns-list__list-item {
+			break-inside: avoid-column;
 		}
 	}
 

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
@@ -205,6 +205,7 @@ export default function TemplatePartEdit( {
 					onRequestClose={ () =>
 						setIsTemplatePartSelectionOpen( false )
 					}
+					isFullScreen={ true }
 				>
 					<TemplatePartSelectionModal
 						templatePartId={ templatePartId }

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
@@ -1,18 +1,16 @@
 .block-editor-template-part__selection-modal {
 	z-index: z-index(".block-editor-template-part__selection-modal");
 
-	// To keep modal dimensions consistent as subsections are navigated, width
-	// and height are used instead of max-(width/height).
-	.components-modal__frame {
-		@include break-small() {
-			width: calc(100% - #{$grid-unit-20 * 2});
-			height: calc(100% - #{$header-height * 2});
-		}
-		@include break-medium() {
-			width: $break-medium - $grid-unit-20 * 2;
+	.block-editor-block-patterns-list {
+		column-count: 2;
+		column-gap: $grid-unit-30;
+
+		@include break-wide() {
+			column-count: 3;
 		}
-		@include break-large() {
-			height: 70%;
+
+		.block-editor-block-patterns-list__list-item {
+			break-inside: avoid-column;
 		}
 	}
 }

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -13,8 +13,10 @@
 -   `TreeGrid`: Modify keyboard navigation code to use a data-expanded attribute if aria-expanded is to be controlled outside of the TreeGrid component ([#48461](https://github.com/WordPress/gutenberg/pull/48461)).
 -   `Modal`: Equalize internal spacing ([#49890](https://github.com/WordPress/gutenberg/pull/49890)).
 -   `Modal`: Increased border radius ([#49870](https://github.com/WordPress/gutenberg/pull/49870)).
+-   `Modal`: Updated spacing / dimensions of `isFullScreen` ([#49894](https://github.com/WordPress/gutenberg/pull/49894)).
 -   `SlotFill`: Added util for creating private SlotFills and supporting Symbol keys ([#49819](https://github.com/WordPress/gutenberg/pull/49819)).
 
+
 ### Documentation
 
 -   `Autocomplete`: Add heading and fix type for `onReplace` in README. ([#49798](https://github.com/WordPress/gutenberg/pull/49798)).

diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
@@ -39,8 +39,16 @@
 		@include reduce-motion("animation");
 
 		&.is-full-screen {
-			width: 90vw;
-			min-height: 90vh;
+			@include break-small() {
+				width: calc(100% - #{ $grid-unit-20 * 2 });
+				height: calc(100% - #{ $grid-unit-20 * 2 });
+				max-height: none;
+			}
+			@include break-medium() {
+				width: calc(100% - #{ $grid-unit-50 * 2 });
+				height: calc(100% - #{ $grid-unit-50 * 2 });
+				max-width: none;
+			}
 		}
 	}
 

diff --git a/packages/edit-post/src/components/start-page-options/index.js b/packages/edit-post/src/components/start-page-options/index.js
@@ -113,6 +113,7 @@ export default function StartPageOptions() {
 		<Modal
 			className="edit-post-start-page-options__modal"
 			title={ __( 'Choose a pattern' ) }
+			isFullScreen={ true }
 			onRequestClose={ () => {
 				setModalState( START_PAGE_MODAL_STATES.CLOSED );
 			} }

diff --git a/packages/edit-post/src/components/start-page-options/style.scss b/packages/edit-post/src/components/start-page-options/style.scss
@@ -1,18 +1,3 @@
-.edit-post-start-page-options__modal {
-	// To keep modal dimensions consistent as subsections are navigated, width
-	// and height are used instead of max-(width/height).
-	@include break-small() {
-		width: 95vw;
-		height: 95vh;
-		max-height: none;
-	}
-	@include break-medium() {
-		width: 90vw;
-		height: 90vh;
-		max-width: none;
-	}
-}
-
 // 2 column masonry layout.
 .edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
 	column-count: 2;

diff --git a/packages/edit-site/src/components/start-template-options/index.js b/packages/edit-site/src/components/start-template-options/index.js
@@ -121,6 +121,7 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 			closeLabel={ __( 'Cancel' ) }
 			focusOnMount="firstElement"
 			onRequestClose={ onClose }
+			isFullScreen={ true }
 		>
 			<div className="edit-site-start-template-options__modal-content">
 				<PatternSelection

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,18 +1,3 @@
-.edit-site-start-template-options__modal.components-modal__frame {
-	// To keep modal dimensions consistent as subsections are navigated, width
-	// and height are used instead of max-(width/height).
-	@include break-small() {
-		width: calc(100% - #{ $grid-unit-20 * 2 });
-		height: auto;
-	}
-	@include break-medium() {
-		width: 95%;
-	}
-	@include break-large() {
-		max-height: 95%;
-	}
-}
-
 .edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
 	display: flex;
 	flex-wrap: wrap;