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

…63081)

* Add Stylelint rule to prevent usage of flex-direction *-reverse values.

* Add Stylelint disable comments for valid cases or cases that should be refactored later.

* Remove row-reverse from experimental checkbox form input.

* Add disable comment for the hooked blocks toggles.

* Remove leftovers.

* Fix typo.

* Use regex.

* Revert changes to `form-input/*`

* Revert changes to `form-input/edit.js`

* Update .stylelintrc.json

Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>

---------

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: aristath <aristath@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>

.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;
 	}
 }