Meta Box

Metabox Custom Fields have no padding in Gutenberg Editor

Support › General › Metabox Custom Fields have no padding in Gutenberg EditorResolved

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 18, 2023 at 4:05 AM #42963
    Basil BabaaBasil 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.

    Classic Editor view
    Gutenberg Editor view

    August 18, 2023 at 4:22 AM #42964
    Basil BabaaBasil 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

    August 18, 2023 at 4:24 AM #42965
    Basil BabaaBasil Babaa
    Participant

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

    August 18, 2023 at 9:10 PM #42975
    PeterPeter
    Moderator

    Hello,

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

    August 18, 2023 at 10:05 PM #42979
    Basil BabaaBasil 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;
    }

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.