AdvancedCustomFields / AdvancedCustomFields/acf
Field groups in editor sidebar looks very different to the native style
Nobody has claimed this yet.
- Dominant language
- PHP
- Stars
- 945
- Forks
- 197
- PR merge metrics
- No merged PRs in 30d
Description
Hey @lgladdy @polevaultweb,
like you can see in the screenshot, the ACF field groups toggle area located in editor sidebar looks very different to the native style:
Here is the CSS code I use to get exactly the same result like the native accordions:
/******************************************************/
/* ACF - FIX WRONG STYLE OF TOGGLE AREAS IN EDITOR SIDEBAR */
/******************************************************/
#side-sortables .acf-postbox .postbox-header {
position: relative!important;
}
#side-sortables .acf-postbox:first-child .postbox-header {
border-top: 0!important;
}
#side-sortables .acf-postbox h2.hndle {
padding: 0 16px!important;
font-size: 13px!important;
font-weight: 500!important;
}
#side-sortables .acf-postbox .acf-hndle-cog,
#side-sortables .acf-postbox .order-higher-indicator,
#side-sortables .acf-postbox .order-lower-indicator {
display: none!important;
}
#side-sortables .acf-postbox .toggle-indicator {
position: absolute;
right: 16px;
top: 50%;
width: 24px;
height: 24px;
transform: translateY(-50%);
transition: color .1s ease-in-out;
}
#side-sortables .acf-postbox .handlediv {
box-shadow: none!important;
}
#side-sortables .acf-postbox .handlediv .toggle-indicator:before {
content: ''!important;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="components-panel__arrow" aria-hidden="true" focusable="false"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg>');
background-repeat: no-repeat;
background-position: center;
}
#side-sortables .acf-postbox .handlediv[aria-expanded="true"] .toggle-indicator:before {
background: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="components-panel__arrow" aria-hidden="true" focusable="false"><path d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"></path></svg>');
}
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start from the ACF field groups toggle area in the editor sidebar and compare its appearance with the native accordion style. Use the CSS in the issue as a visual reference for the affected states and controls. Done means the sidebar styling matches the native style without requiring the reported custom CSS.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- php, wordpress
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100