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 RecordBest 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
]]>