Additional CSS: Add code comments contextualising tranformStyles for …

…clarity (#60267)

* Additional CSS: Add code comments contextualising tranformStyles for clarity

* Simplify comments, use a classname that more obviously flags that the classname will not be used in output

Co-authored-by: andrewserong <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>

packages/block-editor/src/components/global-styles/advanced-panel.js

@@ -28,9 +28,12 @@ export default function AdvancedPanel( {
 			css: newValue,
 		} );
 		if ( cssError ) {
+			// Check if the new value is valid CSS, and pass a wrapping selector
+			// to ensure that `transformStyles` validates the CSS. Note that the
+			// wrapping selector here is not used in the actual output of any styles.
 			const [ transformed ] = transformStyles(
 				[ { css: newValue } ],
-				'.editor-styles-wrapper'
+				'.for-validation-only'
 			);
 			if ( transformed ) {
 				setCSSError( null );
@@ -43,9 +46,12 @@ export default function AdvancedPanel( {
 			return;
 		}
 
+		// Check if the new value is valid CSS, and pass a wrapping selector
+		// to ensure that `transformStyles` validates the CSS. Note that the
+		// wrapping selector here is not used in the actual output of any styles.
 		const [ transformed ] = transformStyles(
 			[ { css: event.target.value } ],
-			'.editor-styles-wrapper'
+			'.for-validation-only'
 		);
 
 		setCSSError(