Modify gap of flex-container

  • Resolved Sibylle

    (@sibweber)


    5 months, 2 weeks ago

    Hi,

    I am developing a block theme locally on my Mac, using Local.

    Inside the query block, the <ul> element has a default gap of 1.25em, applied to the class .wp-block-post-template.is-flex-container.

    How can I modify this value?

    I have tried changing the "blockGap" setting inside theme.json (styles -> spacing -> blockGap), but that only changes the vertical spacing between blocks. I am looking to specifically change the gap value applied to flexbox containers.

    Edit: The same is true when using the Twenty-Twenty-Three theme. I have added a link above.

    • This topic was modified 5 months, 2 weeks ago by Sibylle.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator t-p

    (@t-p)

    For building a block themes or classic themes:
    WP has a Theme Handbook at https://developer.www.ads-software.com/themes/

    Twenty-Twenty-Three theme: If you have a questions about this theme, I recommend asking at https://www.ads-software.com/support/theme/twentytwentythree/#new-post so its developers and support community can help you with this.

    Thread Starter Sibylle

    (@sibweber)

    This behaviour is not specific to the Twenty Twenty Three theme. This is WordPress Core CSS that is applied to a class, which is automatically added to the query block.

    Quoting links at me is not very helpful. I have googled the issue and researched the theme developer handbook. Unfortunately, I have been unable to find instructions on how to set a custom flexbox gap.

    Thread Starter Sibylle

    (@sibweber)

    So, apparently, it is not (yet) possible to edit flexbox settings in theme.json. We have to use plain old CSS to override the default WordPress settings:

    .wp-block-post-template.is-flex-container {
    	gap: var(--wp--preset--spacing--l); // In my case: 24px
    }
    @media (min-width: 600px) {
    	.wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li {
    		width: calc(33.33333% - 16px);
    	}
    }
Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Tags