Update Post Template to use auto-fill columns

Author: tellthemachines

packages/block-library/src/post-template/edit.js

@@ -96,7 +96,7 @@ export default function PostTemplateEdit( {
 		} = {},
 		queryContext = [ { page: 1 } ],
 		templateSlug,
-		displayLayout: { type: layoutType = 'grid', columns = 1 } = {},
+		displayLayout: { type: layoutType = 'grid', columnWidth = 12 } = {},
 		previewPostType,
 	},
 	__unstableLayoutClassNames,
@@ -108,11 +108,10 @@ export default function PostTemplateEdit( {
 		setAttributes( {
 			layout: {
 				type: updatedLayoutType,
-				isResponsive: false,
-				numberOfColumns: columns,
+				minimumColumnWidth: `${ columnWidth }rem`,
 			},
 		} );
-	}, [ updatedLayoutType, columns, setAttributes ] );
+	}, [ updatedLayoutType, columnWidth, setAttributes ] );
 
 	const [ { page } ] = queryContext;
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();

packages/block-library/src/query/edit/inspector-controls/index.js

@@ -160,13 +160,15 @@ export default function QueryInspectorControls( {
 							<>
 								<RangeControl
 									__nextHasNoMarginBottom
-									label={ __( 'Columns' ) }
-									value={ displayLayout.columns }
+									label={ __( 'Minimum Column Width' ) }
+									value={ displayLayout.columnWidth }
 									onChange={ ( value ) =>
-										setDisplayLayout( { columns: value } )
+										setDisplayLayout( {
+											columnWidth: value,
+										} )
 									}
 									min={ 2 }
-									max={ Math.max( 6, displayLayout.columns ) }
+									max={ 60 }
 								/>
 								{ displayLayout.columns > 6 && (
 									<Notice