Add stylelint rule to prevent usage of flex-direction reverse values

.stylelintrc.json

@@ -4,6 +4,14 @@
 		"at-rule-empty-line-before": null,
 		"at-rule-no-unknown": null,
 		"comment-empty-line-before": null,
+		"declaration-property-value-allowed-list": [
+			{
+				"flex-direction": "/^(?!(row|column)-reverse).*$/"
+			},
+			{
+				"message": "Avoid the flex-direction reverse values. For accessibility reasons, visual, reading, and DOM order must match. Only use the reverse values when they do not affect reading order, meaning, and interaction."
+			}
+		],
 		"declaration-property-value-disallowed-list": [
 			{
 				"/.*/": [ "/--wp-components-color-/" ]
@@ -18,7 +26,7 @@
 		"property-disallowed-list": [
 			[ "order" ],
 			{
-				"message": "Avoid the order property. For accessibility reasons, visual, reading, and DOM order must match. Only use the order property when it does not affect reading order, meaning, and interaction"
+				"message": "Avoid the order property. For accessibility reasons, visual, reading, and DOM order must match. Only use the order property when it does not affect reading order, meaning, and interaction."
 			}
 		],
 		"rule-empty-line-before": null,

packages/block-editor/src/hooks/block-hooks.scss

@@ -4,6 +4,7 @@
 	 * we need to right-align the toggle.
 	 */
 	.components-toggle-control .components-h-stack {
+		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
 		flex-direction: row-reverse;
 	}
 

packages/block-editor/src/hooks/use-editor-wrapper-styles.native.scss

@@ -5,6 +5,7 @@
 }
 
 .use-editor-wrapper-styles--reversed {
+	/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the column-reverse value. */
 	flex-direction: column-reverse;
 	width: 100%;
 	max-width: 580;

packages/block-library/src/form-input/style.scss

@@ -24,6 +24,7 @@
 	*/
 	&:has(input[type="checkbox"]) {
 		width: fit-content;
+		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
 		flex-direction: row-reverse;
 	}
 }

packages/block-library/src/media-text/style.native.scss

@@ -7,13 +7,15 @@ $media-to-text: 12px;
 }
 
 .has-media-on-the-right {
+	/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
 	flex-direction: row-reverse;
 }
 
 .is-stacked-on-mobile {
 	flex-direction: column;
 
 	&.has-media-on-the-right {
+		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the column-reverse value. */
 		flex-direction: column-reverse;
 	}
 }