diff --git a/.stylelintrc.json b/.stylelintrc.json index df01978222e63..663befa2e4ce0 100644 --- 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 index 4d871233de482..c8f2027483ccf 100644 --- 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 index c980253ee6425..2ae4ed8b86144 100644 --- 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 index d45fc8d7f1f72..f9e1753cf0a7b 100644 --- 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 index 07b584059203e..4c0f80a5008a8 100644 --- a/packages/block-library/src/media-text/style.native.scss +++ b/packages/block-library/src/media-text/style.native.scss @@ -7,6 +7,7 @@ $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; } @@ -14,6 +15,7 @@ $media-to-text: 12px; 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; } }