Sibylle

Forum Replies Created

Viewing 10 replies - 1 through 10 (of 10 total)
  • 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);
    	}
    }
    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)

    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 ??

    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.
    Thread Starter Sibylle

    (@sibweber)

    I just found an answer to this by checking out the twentytwentythree theme: “level”: 0 will wrap the site-title in a <p>-Element instead of a heading.

    <!-- wp:site-title {"level":0} /-->
    Thread Starter Sibylle

    (@sibweber)

    Thanks George, is there a way to make it a different element? Like a div?

    Thread Starter Sibylle

    (@sibweber)

    Thank you!

    Thread Starter Sibylle

    (@sibweber)

    Thanks Faisal, for taking the time to write such a detailed reply ??

    I cannot get it to work, though. The “global” property is coming back as not allowed. I’m on version 2, so maybe this has changed. I’ve tried to put the link to the reset file and the “custom” property inside “styles” but that did not work either.

    It does seem to me as if theme.json is really just for those styles that you want the user to be able to change. Everything else seems to have to go in a regular CSS file, as I cannot see any options for media queries and more complex CSS in theme.json either.

    Thread Starter Sibylle

    (@sibweber)

    Thanks!

    I eventually managed to solve the problem by going to the permalink settings in the admin panel and just clicking save w/o changing anything.

    Somebody had suggested to do that (‘flush the permalinks’) for a slightly different problem and it worked.

    I can’t believe I wasted an entire day on this.

    Thread Starter Sibylle

    (@sibweber)

    Thanks Laura, that’s more or less exactly the code but I am using.

    Apologies if I’ve been unclear, but I am not trying to display a list of custom taxonomies. I am trying to output a list of the default categories (which does work using the above code) that displays posts of my custom post type.

    I have registered the default ‘category’ taxonomy for my custom post type with this function:

    function share_categories() {
  register_taxonomy_for_object_type('category', 'organisation');
}
add_action( 'init', 'share_categories');

    But when I display a list of categories and click on any of them, only posts of type ‘post’ will be displayed. Posts of my custom post type ‘organisation’ will not.

Viewing 10 replies - 1 through 10 (of 10 total)