How to set flexbox gap in theme.json

  • Resolved Sibylle

    (@sibweber)


    1 year, 2 months ago

    I am working on my first FSE theme and have been trying to figure out how to change the gap value on a flex-container via theme.json:

    I set settings.spacing.blockgap to true and would have thought that the value I defined in styles.blocks.core/columns.spacing.blockgap is used for gap, but the gap value in the frontend CSS remains at 1.25em, no matter what I enter in theme.json.

    What am I doing wrong?

    Appreciate your help ??

    Sibylle

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Sibylle

    (@sibweber)

    Thanks for looking into this. This might have worked in version 1, which I see you’re using, but in version 2, the settings.spacing.blockgap value needs to be boolean.

    The value needs to be defined in styles.spacing.blockgap (see https://fullsiteediting.com/lessons/theme-json-layout-and-spacing-options/#h-blockgap). 

    "version": 2,
"settings": {
	"spacing": {
		"blockGap": true
		}
	}
},
"styles": {
	"blocks": {
		"core/columns": {
			"spacing": {
				"blockGap": "48px"
			}
		}
	}
}

    Setting styles.spacing.blockgap to a custom value adds a top margin to blocks like post-title and post-date, but does not change the gap value of the flex-container inside wp-block-query. Neither does setting blockGap for the core/columns block.

    The result stays the same:

    .wp-block-post-template.is-flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25em;
}
    • This reply was modified 1 year, 2 months ago by Sibylle.

    Hello, I tried editing the theme.json on the WordPress playground (PHP 8.0 – WP 6.3) and added the following lines, similar to what you’re doing …

    	"settings": {
	...more settings here
+		"spacing": {
+			"blockGap": true,
	...more settings here

	"styles": {
		"blocks": {
			... more blocks here
+			"core/columns":{
+				"spacing": {
+					"blockGap": "64px"
+				}
+			},
			... more blocks here

    The following rules were added in <style id="wp-block-columns-inline-css"> …

    .wp-block-columns-is-layout-flow > * {
	margin-block-start: 64px;margin-block-end: 0;}

.wp-block-columns-is-layout-constrained > :first-child:first-child {
	margin-block-start: 0;}

.wp-block-columns-is-layout-constrained > :last-child:last-child {
	margin-block-end: 0;}

.wp-block-columns-is-layout-constrained > * {
	margin-block-start: 64px;margin-block-end: 0;}

.wp-block-columns-is-layout-flex {
	gap: 64px;
}
.wp-block-columns-is-layout-grid {
	gap: 64px;
}

    I had added a columns block before editing theme.json, so at first the 64px gap was not getting applied; I had to reset the styles for the columns block before the 64px gap worked, so I am not sure if the flex-container you mentioned refers to the columns block or could it be a different block?

    Hope these help point you in the right direction. Good luck!

    Thread Starter Sibylle

    (@sibweber)

    Hi Gerry, thanks for pointing me into the right direction.

    It seems I was using the wrong block after all. When I apply the blockGap to core/post-template, at least some code is added to the <head> in <style id='wp-block-post-template-inline-css'>:

    .wp-block-post-template-is-layout-flex {
            gap: 48px;
 }        
.wp-block-post-template-is-layout-grid {
            gap: 48px;
 }

    At first glance, this looks right, but this is not the class applied to the <ul> containing the query items (truncated for readability):

    <div class="wp-block-query alignwide is-layout-flow wp-block-query-is-layout-flow">

    <ul class="is-flex-container columns-3 wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow">
        <li class="wp-block-post">...</li>
        <li class="wp-block-post">...</li>
        <li class="wp-block-post">...</li>
    </ul>
    ...
</div>

    The class applied to the <ul> is .is-flex-container. And this class has the rule 

    .wp-block-post-template.is-flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25em;
}

    applied in 

    <style id='wp-block-post-template-inline-css'>

    This is the code from my index.html template:

    <!-- wp:query {"queryId":1,"query":{"perPage":12,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":""},"displayLayout":{"type":"flex","columns":3}} -->
    <div class="wp-block-query alignwide">

        <!-- wp:post-template -->
        <!-- wp:post-featured-image {"isLink":true} /-->
        <!-- wp:group {"className":"entry-header"} -->
        <div class="wp-block-group entry-header">
            <!-- wp:post-terms {"term":"category"} /-->
            <!-- wp:post-title {"level":2,"isLink":true} /-->
            <!-- wp:post-date /-->
        </div>
        <!-- /wp:group -->
        <!-- wp:post-excerpt /-->
        <!-- /wp:post-template -->

    I am using "displayLayout":{"type":"flex","columns":3} on the <!-- wp:query --> comment, which, I assume, applies the .is-flex-container class to the <ul>. Oddly enough, it also applies is-layout-flow, which does have my 48px applied to margin-block-start (which, of course, is ignored in flexbox).

    Obviously, I could just override the class .is-flex-container, but I would like to understand how it should be done the right way. But maybe the right way is styling the theme with proper CSS for now ??

    Gerry

    (@metamezzo)

    Hi, the CSS rules generated by the theme.json edits you made look okay to me and you were targetting the correct block, the Post template block.

    I did notice that ul.wp-block-post-template also has the class is-layout-flow so the Post template block in your Query Loop block could be set to show posts in List view — please double-check, because your 48px blockGap settings should then take effect if the Post template block is set to Grid view.

    Grid view in Post template block

    Good luck!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to set flexbox gap in theme.json’ is closed to new replies.