Ensure Post Template fallback styles don't apply when minimumColumnWidth is defined

Author: tellthemachines

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

@@ -116,7 +116,11 @@ export default function PostTemplateEdit( {
 	attributes: { layout },
 	__unstableLayoutClassNames,
 } ) {
-	const { type: layoutType, columnCount = 3 } = layout || {};
+	const {
+		type: layoutType,
+		columnCount = 3,
+		minimumColumnWidth,
+	} = layout || {};
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
 	const { posts, blocks } = useSelect(
 		( select ) => {
@@ -281,6 +285,8 @@ export default function PostTemplateEdit( {
 		className: clsx( __unstableLayoutClassNames, {
 			[ `columns-${ columnCount }` ]:
 				layoutType === 'grid' && columnCount, // Ensure column count is flagged via classname for backwards compatibility.
+			'has-native-responsive-grid':
+				layoutType === 'grid' && columnCount && minimumColumnWidth, // Flag native responsive grid when minimum column width is provided.
 		} ),
 	} );
 

packages/block-library/src/post-template/index.php

@@ -94,6 +94,9 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 	if ( isset( $attributes['layout']['type'] ) && 'grid' === $attributes['layout']['type'] && ! empty( $attributes['layout']['columnCount'] ) ) {
 		$classnames .= ' ' . sanitize_title( 'columns-' . $attributes['layout']['columnCount'] );
 	}
+	if ( isset( $attributes['layout']['type'] ) && 'grid' === $attributes['layout']['type'] && ! empty( $attributes['layout']['columnCount'] ) && ! empty( $attributes['layout']['minimumColumnWidth'] ) ) {
+		$classnames .= ' has-native-responsive-grid';
+	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( $classnames ) ) );
 

packages/block-library/src/post-template/style.scss

@@ -32,9 +32,9 @@
 	}
 }
 
-@media ( max-width: $break-small ) {
+@media (max-width: $break-small) {
 	// Temporary specificity bump until "wp-container" layout specificity is revisited.
-	.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
+	.wp-block-post-template-is-layout-grid[class*="columns-"]:not(.has-native-responsive-grid) {
 		grid-template-columns: 1fr;
 	}
 }