AdvancedCustomFields / AdvancedCustomFields/acf

Field groups in editor sidebar looks very different to the native style

Open
#753 6 comments 1 reaction 0 assignees View on GitHub

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:

Bildschirmfoto 2022-11-10 um 21 25 04

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.