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.

The containers are from generate blocks and have been set to:

• the container holding the two containers: display: flex (row, centre, centre); width: 100%;
• the two containers within are: display: flex; justify left, centre and right, centre. They each have a width of 45%.

Does anyone know why it displays correctly on my homepage but not the template page I created where I put a header up the top?

In the FSE editor, columns are stacked instead of side-by-side.

The block.json file looks as follows:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "test/section-card",
  "version": "0.1.0",
  "title": "Section Card",
  "description": "A card containing text.",
  "icon": "admin-comments",
  "category": "layout",
  "attributes": {
    "backgroundColor": {
        "type": "string",
        "default":"#eee"
    },
    "textColor": {
        "type": "string"
    },
    "cardWidth": {
        "type": "string",
        "default":"40%"
    }
},
  "example": {},
  "supports": {
    "html": false,
    "color": {
      "text": true,
      "background": true
    },
    "layout": {
      "default": {"type": "flex", "orientation": "vertical", "verticalAlignment": "center"},
      "allowVerticalAlignment": true,
      "allowJustification": true,
      "allowOrientation": false
    }
  },
  "textdomain": "section-arrow",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "viewScript":""
}

If I use the following .save-method, the code works as expected:

save({ attributes }) {
	const { backgroundColor, cardWidth } = attributes;
	const colorClass = backgroundColor.includes('#') ? "" : has-${backgroundColor}-background;
	return (
			<div {...useBlockProps.save()} style={{background:"none !important"}}>
					<div
						className={colorClass}
						style={{ width:cardWidth, backgroundColor:(backgroundColor.includes('#') ? backgroundColor :'') }}>
							<InnerBlocks.Content />
					</div>
			</div>
	)
}

If I include any other class name such as the letter “a”, the layout is suddenly applied to the child element:

className={colorClass+" a"}

The output without the letter “a” looks like expected. As soon as any class is added (even when the has-background class is removed), the output is wrong:

View post on imgur.com

This bug is incredibly weird. I have no idea what sort of strange bug is triggering this behaviour, but it is definitely not expected. I also want to note, that the block is located inside a core/column block. Any help is greatly appreciated. For now, I will simply restrict the class name to the colour slug.

The block code can be dowloaded here:

https://drive.google.com/drive/folders/13YtczFFTYuGubJ3XwLQrA9sOpfg7lwf4?usp=drive_link

Thanks for the help.
Dirk

i’m making a website for someone and i wish to make a landingpage with a specific picture gallery.
I linked the “design” here below. I’m wondering if my english is bad or i’m just looking for the wrong thing but i want to recreate this in wordpress.
Can i do this without plugins or do i need something specific to make this?

wordpress picture box

thanks for assisting!

(ps: i can make this myself in flexbox/grid/css, but finding it in wordpress is still rather new.

ACF Views

ISBN:

9780226971513

T��tulo nativo:

���[ӛ���μ�Xi You Ji

T��tulos:

Journey to the WestViaje al oesteWest Journey Record

Editorial:

Bla bla

P��ginas:

587

Fecha de edici��n:

01/01/1500

I need (In the same line) ?It��s possible?

ISBN: 9780226971513

The other thing is that if you have more values in the fields, it puts it all together. How can you add a separator?

Example:
T��tulos: Journey to the West, Viaje al oeste, West Journey Record
Or:
T��tulos: Journey to the West
Viaje al oeste
West Journey Record

Best regards,

Dalia

We updated today from 3.18 to the most recent version and now have an issue with the [cusrev-reviews-slider] css.

Before the update, the section which the slider was in would flex and change size to accommodate the size of the card – if the card was smaller, the section would flex to match and the same for larger cards.

Now there is no flex and the section is set at a static value for the largest or the cards.

You can see any example of this at this link – https://streamable.com/dtjpc8

Any help would be greatly appreciated, many thanks for your time!

yesterday I asked question about the gap between 2 classes. I understand now that I had too many containers and it was very complicated.

so I started from scratch to create header with flex to see where the problem lies.

I am using 2 containers of flex in the first-header class.

this is HTML:

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
	
	<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'auto-repair-service' ); ?></a>

	<header id="masthead" class="site-header"> 
		
		<div id="first-header" class="flex-container">
			
	
			
		<div class="info"> Hello 	</div>	
                
	<div class="first-header-second-section">
		
			
		
	<div class="title">Hello Hello

			</div> 
			
			
		
			
			
			<div class="info2">Klanten Beoordeling 9.2/10</div>
		<div class="info3">Vooraf prijs opgave</div>
			
		</div>  
		
		
		
		
		</div>
		
		
		</header>
		
	
	

this is CSS:

#first-header{
		width:100%;
    	height:65px;
		background:#45accb;	
		border:0.01px solid #45accb;	  
		z-index:9999;
		display:flex;
		flex-direction:column;
        position:fixed;
	}
	
	.info {
	   width:96%;
		margin-right:4%;
		display:flex;
		justify-content:flex-end;
		color:white;
		font-size:1.2rem;

		
	}
	
	.first-header-second-section {
		width:100%;
		display:flex;
		flex-direction:row;
		
	}
	
	.title{
	width:33.333%;
	font-size:1.2rem;
	color:#ffd978; 
    display:flex;
	justify-content:flex-start;
    margin-left:4%;
  


}

	
	
	.info2{
	width:33.333%;
	font-size:1.2rem;
	color:#ffd978; 
	display:flex;
	justify-content:center;
	align-items:center;
    


}

.info3{
	width:33.333%;
	font-size:1.2rem;
	color:#ffd978; 
  	display:flex;
	justify-content:flex-end;
	align-items:center;
	margin-right:4%;

	
}

everything is ok untill I add position:fixed in the first-header (class)

when I add this (position:fixed) code the first-header goes few rem down from its normaal position. when I remove it the first-header goes back to its normaal position.

I see this problem is coming from the 2 flex containers I am using in the first-header.

my aim is to have 2 rows (in flex)in the header.

how I can solve this problem?

thanks