Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

True / False ACF control bug on RTL layouts

Abierto Apto para principiantes
  • ¿Algo no está bien?
#1,038 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
86/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, sass, wordpress
Área
frontend, internationalization, localization

Línea de trabajo

Comienza con las reglas de True/False y .acf-switch en assets/src/sass/_fields.scss, comparándolas con los patrones RTL existentes; el marcado está en includes/fields/class-acf-field-true_false.php. Reproduce el interruptor en una administración de WordPress en hebreo y verifica después que las etiquetas sigan siendo visibles y que el control deslizante se refleje correctamente en ambos estados; actualiza assets/build si es necesario.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
PHP
Estrellas
946
Forks
197
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de AdvancedCustomFields/acf

Todos los issues de AdvancedCustomFields/acf

Issues similares

Más issues de PHP

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.