try back compat with a new attribute flag

Author: tellthemachines

docs/reference-guides/core-blocks.md

@@ -754,6 +754,7 @@ Contains the block elements used to render a post, like the title, date, feature
 -	**Category:** theme
 -	**Ancestor:** core/query
 -	**Supports:** align (full, wide), anchor, color (background, gradients, link, text), interactivity (clientNavigation), layout, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Attributes:** hasOptionalResponsiveGrid
 
 ## Post Terms
 

packages/block-library/src/post-template/block.json

@@ -16,6 +16,11 @@
 		"enhancedPagination",
 		"postType"
 	],
+	"attributes": {
+		"hasOptionalResponsiveGrid": {
+			"type": "boolean"
+		}
+	},
 	"supports": {
 		"anchor": true,
 		"reusable": false,

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

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { memo, useMemo, useState } from '@wordpress/element';
+import { memo, useEffect, useMemo, useRef, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import {
@@ -113,10 +113,12 @@ export default function PostTemplateEdit( {
 		templateSlug,
 		previewPostType,
 	},
-	attributes: { layout },
+	attributes: { layout, hasOptionalResponsiveGrid },
 	__unstableLayoutClassNames,
 } ) {
 	const { type: layoutType, columnCount = 3 } = layout || {};
+	const previousLayoutRef = useRef( layout );
+	const isFirstRenderRef = useRef( true );
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
 	const { posts, blocks } = useSelect(
 		( select ) => {
@@ -281,9 +283,41 @@ export default function PostTemplateEdit( {
 		className: clsx( __unstableLayoutClassNames, {
 			[ `columns-${ columnCount }` ]:
 				layoutType === 'grid' && columnCount, // Ensure column count is flagged via classname for backwards compatibility.
+			'has-optional-responsive-grid':
+				layoutType === 'grid' && hasOptionalResponsiveGrid,
 		} ),
 	} );
 
+	useEffect( () => {
+		if ( isFirstRenderRef.current ) {
+			isFirstRenderRef.current = false;
+			previousLayoutRef.current = layout;
+
+			return;
+		}
+
+		const hasLayoutChanged =
+			JSON.stringify( previousLayoutRef.current ) !==
+			JSON.stringify( layout );
+
+		if (
+			hasLayoutChanged &&
+			layoutType === 'grid' &&
+			layout?.columnCount &&
+			! hasOptionalResponsiveGrid
+		) {
+			setAttributes( { hasOptionalResponsiveGrid: true } );
+		} else if (
+			hasLayoutChanged &&
+			( layoutType !== 'grid' || ! layout?.columnCount ) &&
+			hasOptionalResponsiveGrid
+		) {
+			setAttributes( { hasOptionalResponsiveGrid: undefined } );
+		}
+
+		previousLayoutRef.current = layout;
+	}, [ hasOptionalResponsiveGrid, layout, layoutType, setAttributes ] );
+
 	if ( ! posts ) {
 		return (
 			<p { ...blockProps }>

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

@@ -93,6 +93,10 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 	// Ensure backwards compatibility by flagging the number of columns via classname when using grid layout.
 	if ( isset( $attributes['layout']['type'] ) && 'grid' === $attributes['layout']['type'] && ! empty( $attributes['layout']['columnCount'] ) ) {
 		$classnames .= ' ' . sanitize_title( 'columns-' . $attributes['layout']['columnCount'] );
+
+		if ( ! empty( $attributes['hasOptionalResponsiveGrid'] ) ) {
+			$classnames .= ' has-optional-responsive-grid';
+		}
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( $classnames ) ) );

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

@@ -32,6 +32,13 @@
 	}
 }
 
+// Legacy fallback for older grid layouts before responsive behaviour was implemented.
+@media (max-width: $break-small) {
+	.wp-block-post-template-is-layout-grid[class*="columns-"]:not(.has-optional-responsive-grid) {
+		grid-template-columns: 1fr;
+	}
+}
+
 .wp-block-post-template-is-layout-constrained > li > .alignright,
 .wp-block-post-template-is-layout-flow > li > .alignright {
 	float: right;
@@ -51,3 +58,4 @@
 	margin-inline-start: auto;
 	margin-inline-end: auto;
 }
+