Metabox Custom Fields have no padding in Gutenberg Editor

This topic has 4 replies, 2 voices, and was last updated 1 year, 4 months ago by Basil Babaa.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
August 18, 2023 at 4:05 AM #42963

Basil Babaa
Participant

When we view Metabox custom fields in the Gutenberg editor, there is no padding on the fields. They appear inline without padding and the field names and field boxes go all the way to the edge of the editor window. When viewed in the classic editor there is padding which makes the UI/UX appear in a better format.

Can this be adjusted/fixed so that the fields in Gutenberg have some padding around them so that they are not touching the edges of the editor window?

Please advise. Thank you.

Add New Note to this Reply

August 18, 2023 at 4:22 AM #42964

Basil Babaa
Participant

The previous post does not look like the images posted. Let's try this.

Gutenberg Editor: https://1drv.ms/i/s!AjHCE41XxAiZgZ1Yuqw_Ig-JIwjH0Q?e=oI6Pkd
Classic Editor: https://1drv.ms/i/s!AjHCE41XxAiZgZ1YIQd9ouJuMSwvEA?e=ao2JX2

Add New Note to this Reply

August 18, 2023 at 4:24 AM #42965

Basil Babaa
Participant

Classic Editor: https://1drv.ms/i/s!AjHCE41XxAiZgZ1XByXIR5yFwodbPg?e=ubjR8j

Add New Note to this Reply

August 18, 2023 at 9:10 PM #42975

Peter
Moderator

Hello,

Please use the field group style Standard (WordPress meta box) to have padding, screenshot https://monosnap.com/file/FCFRHweV48VYwlFECMgmCvhVjGDNmB

Add New Note to this Reply

August 18, 2023 at 10:05 PM #42979

Basil Babaa
Participant

Thanks. I found it. I also wrote my own CSS Tweaks to further customize the look and feel and move the Gutenberg Editor below the MetaBox Custom fields boxes area.

/* Add Padding to Metabox Standard Style */
.postbox {color: #000 !important;}
.edit-post-meta-boxes-area .postbox {
border: 1px solid #ccc;
background-color: #f2f2f2;
margin: 0 0 ;
padding: 0 50px;
}

/* Move Gutenberg Editor Window below Custom Fields */
.edit-post-visual-editor {
background-color: #1e1e1e;
order: 10;
}

Add New Note to this Reply
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.