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 <[email protected]> --------- Co-authored-by: afercia <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: aristath <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: richtabor <[email protected]>
WordPress · Jul 30, 2024 · 5807c04 · 5807c04
1 parent 08fbdab
commit 5807c04
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 1 deletion.
diff --git a/.stylelintrc.json b/.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,

diff --git a/packages/block-editor/src/hooks/block-hooks.scss b/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;
 	}
 

diff --git a/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.scss b/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;

diff --git a/packages/block-library/src/form-input/style.scss b/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;
 	}
 }

diff --git a/packages/block-library/src/media-text/style.native.scss b/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;
 	}
 }