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