AdvancedCustomFields / AdvancedCustomFields/acf
[Feature] SASS/CSS snippet to tidy up Gutenberg Postbox for ACF fields
Open
Nobody has claimed this yet.
- Dominant language
- PHP
- Stars
- 945
- Forks
- 197
- PR merge metrics
- No merged PRs in 30d
Description
Hey all, this is less so an issue and more of a helpful suggestion.
This snippet aims to revert this;

back to this;

I'm not a fan of the new UI Options so I've just hidden them.
SCSS
/* Admin editor*/
.postbox-header .handle-actions {
display: none;
}
.acf-postbox {
.postbox-header {
position: relative;
&::after {
pointer-events: none;
display: block;
content: '';
height: 24px;
width: 24px;
background-size: contain;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0iY29tcG9uZW50cy1wYW5lbF9fYXJyb3ciIHJvbGU9ImltZyIgYXJpYS1oaWRkZW49InRydWUiIGZvY3VzYWJsZT0iZmFsc2UiPjxwYXRoIGQ9Ik0xMiA4bC02IDUuNCAxIDEuMiA1LTQuNiA1IDQuNiAxLTEuMnoiPjwvcGF0aD48L3N2Zz4=');
}
}
&.closed {
.postbox-header {
&::after {
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0iY29tcG9uZW50cy1wYW5lbF9fYXJyb3ciIHJvbGU9ImltZyIgYXJpYS1oaWRkZW49InRydWUiIGZvY3VzYWJsZT0iZmFsc2UiPjxwYXRoIGQ9Ik0xNyA5LjRMMTIgMTQgNyA5LjRsLTEgMS4yIDYgNS40IDYtNS40eiI+PC9wYXRoPjwvc3ZnPg==');
}
}
}
}
Compiled CSS;
.postbox-header .handle-actions {
display: none;
}
.acf-postbox .postbox-header {
position: relative;
}
.acf-postbox .postbox-header::after {
pointer-events: none;
display: block;
content: "";
height: 24px;
width: 24px;
background-size: contain;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0iY29tcG9uZW50cy1wYW5lbF9fYXJyb3ciIHJvbGU9ImltZyIgYXJpYS1oaWRkZW49InRydWUiIGZvY3VzYWJsZT0iZmFsc2UiPjxwYXRoIGQ9Ik0xMiA4bC02IDUuNCAxIDEuMiA1LTQuNiA1IDQuNiAxLTEuMnoiPjwvcGF0aD48L3N2Zz4=");
}
.acf-postbox.closed .postbox-header::after {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0iY29tcG9uZW50cy1wYW5lbF9fYXJyb3ciIHJvbGU9ImltZyIgYXJpYS1oaWRkZW49InRydWUiIGZvY3VzYWJsZT0iZmFsc2UiPjxwYXRoIGQ9Ik0xNyA5LjRMMTIgMTQgNyA5LjRsLTEgMS4yIDYgNS40IDYtNS40eiI+PC9wYXRoPjwvc3ZnPg==");
}
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
The issue names no repository file, test, or entry point; start by locating the admin editor styles and comparing the supplied SCSS/CSS with the screenshots. Done would require an agreed project integration and verification that Gutenberg ACF postboxes match the requested layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, sass
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100