fix(gutenberg): prevent setAttributes on initial mount to avoid dirtying blocks

packages/gutenberg/src/index.tsx

@@ -106,6 +106,9 @@ window.coreframework = {
 
 const removeDuplicates = <T extends unknown>(arr: T[]): T[] => [...new Set(arr)];
 
+const parseClassNames = (className?: string): string[] =>
+	className ? className.replace(/\s\s+/g, " ").trim().split(" ").filter(Boolean) : [];
+
 const stylesGroupsIconsMap: Record<string, React.ComponentType<any>> = {
 	colorStyles: ColorPalette,
 	typographyStyles: Typography,
@@ -200,38 +203,27 @@ const withInspectorControls = createHigherOrderComponent((BlockEdit: React.Compo
 
 		const [searchValue, setSearchValue] = useState("");
 
+		// Seed from the saved className so the first render already matches the block.
 		const [classNames, setClassNames] = useState<{
 			active: string[];
 			dynamic: string[];
-		}>({
-			active: [],
+		}>(() => ({
+			active: parseClassNames(props.attributes.className),
 			dynamic: [],
-		});
+		}));
 
 		const [selectedSearchResult, setSelectedSearchResult] = useState(-1);
 
 		useEffect(() => {
-			if (!props.attributes.className) {
+			const className = [...classNames.active, ...classNames.dynamic].join(" ");
+
+			// Any differing write, even "" over no className or a whitespace-only change, marks a clean post, template or template part as modified.
+			if (className === parseClassNames(props.attributes.className).join(" ")) {
 				return;
 			}
 
-			const regExpToRemoveMultipleSpaces = /\s\s+/g;
-			const parsedClassNames = props.attributes.className.replace(regExpToRemoveMultipleSpaces, " ").trim();
-			const initialClassNames = parsedClassNames.split(" ");
-			setClassNames((prev) => ({
-				...prev,
-				active: initialClassNames,
-			}));
-		}, []);
-
-		useEffect(
-			() => {
-				props.setAttributes({
-					className: [...classNames.active, ...classNames.dynamic].join(" "),
-				});
-			},
-			[classNames],
-		);
+			props.setAttributes({ className });
+		}, [classNames]);
 
 		useEffect(() => {
 			setSearchValue("");

packages/wp/gutenberg/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-plugins'), 'version' => '22d01165d701dd03054a');
+<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-plugins'), 'version' => '2acb1b0b908a40c3b7a8');