Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

True / False ACF control bug on RTL layouts

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#1,038 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

@elicohenator đang làm issue này rồi.

Từ ngày 20/9/2026.

  • #1039 của @elicohenator — đang mở

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
86/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, sass, wordpress
Lĩnh vực
frontend, internationalization, localization

Hướng nghiên cứu

Bắt đầu với các quy tắc True/False và .acf-switch trong assets/src/sass/_fields.scss, đối chiếu chúng với các mẫu RTL hiện có; markup nằm trong includes/fields/class-acf-field-true_false.php. Tái tạo switch trong giao diện quản trị WordPress bằng tiếng Hebrew, sau đó xác minh rằng các nhãn vẫn hiển thị và slider được phản chiếu chính xác ở cả hai trạng thái; cập nhật assets/build nếu cần.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Description

The True/False Stylized UI switch (.acf-switch) renders incorrectly in a Hebrew WordPress admin (html[dir="rtl"]).

On/Off labels are clipped or missing, and the slider knob stays on the physical left instead of following the flipped grid. The control looks like an empty pill.

This is a core CSS bug in the public ACF stylesheet, not a Pro-only issue. The same rules ship in free ACF.

Environment

  • WordPress: 7.1.1
  • ACF PRO: 6.8.10 (also reproduces on free ACF — same CSS)
  • Site language: he_IL (Hebrew)
  • Document direction: html[dir="rtl"]
  • Browser: Brave 1.95.104 (Chromium 153.0.8010.53)
  • Theme / editor: classic editor

Steps to reproduce

  1. Set the site language to Hebrew (he_IL) so html has dir="rtl".
  2. Create a field group with a True/False field.
  3. Enable Stylized UI (ui => 1). Leave On/Off text at the defaults (Yes/No).
  4. Assign the group to a post type and open that edit screen in wp-admin.

Expected behavior

  • The switch shows the On and Off labels.
  • When off, the slider sits on the inline-start side (right in RTL).
  • When on, the slider moves to the inline-end side (left in RTL).
  • Toggling stays readable and mirrored the same way other ACF RTL controls already do.

Actual behavior

  • Labels disappear or are clipped (overflow: hidden on .acf-switch-on / .acf-switch-off).
  • The slider stays on the physical left in both states, so the control looks like an empty rounded pill with a knob on the wrong side.

Screenshot: see attached screenshot-rtl-true-false.png.

Why it happens

.acf-switch is display: grid with two columns. Grid does reverse under dir="rtl", so On/Off swap sides.

The slider still uses physical left / right and never gets an html[dir="rtl"] override — unlike many other rules in the same file.

Source:

.acf-switch-slider {
  position: absolute;
  top: 2px;
  left: 2px;      /* stays on the physical left in Hebrew */
  right: 50%;
  transition-property: left, right;
}
&.-on .acf-switch-slider {
  left: 50%;
  right: 2px;
}

In RTL the columns flip, but the slider still animates as if the page were LTR.

There is no existing issue for this. Related RTL work that ACF already accepted: #22 (RTL for acf-button-group).

Suggested fix

Add an html[dir="rtl"] override next to the existing .acf-switch rules, matching the pattern already used throughout _fields.scss. Do not rewrite the LTR switch to logical properties.

html[dir="rtl"] .acf-switch {
  span {
    float: right;
  }

  .acf-switch-slider {
    left: 50%;
    right: 2px;
  }

  &.-on .acf-switch-slider {
    left: 2px;
    right: 50%;
  }

  + span {
    margin-left: 0;
    margin-right: 6px;
  }
}

Happy to open a PR against assets/src/sass/_fields.scss (and the compiled CSS in assets/build if that is required).

Related (not blocking)

English field instructions in a Hebrew admin can render with a leading . (Unicode bidi). dir="auto" or unicode-bidi: plaintext on the description would isolate that. Separate from the switch layout bug.

Image
Ngôn ngữ chính
PHP
Star
947
Fork
198
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của AdvancedCustomFields/acf

Tất cả issue của AdvancedCustomFields/acf

Issue tương tự

Thêm issue về PHP

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.