How cool it is you came alive. Congrats to all that participated. I know you are busy, however, some things remain unclear to me and others may have the same questions., so before upgrade to TT5, here are a few questions that went unanswered under TT4:
Scope – Child theme under TT4 and here TT5 asap. Latest WordPress and Woo
- I try to leverage from theme.json all I can such as create my variables and styling inside child T.J (theme.json) I have set TJ to version 3 and I assume this will work with TT5. After initiating the child, I have suffered immensely from fonts being incorrect, switching at will and opposite on computer while correct on mobile. Fx. paragraphs would be Cardo when set to default, which should be inter and headings at default would show as inter. I did not set any font stuff in T.J, so what can cause this and is it fixed for TT5?
- Everytime I switch theme I loose everything custom in FSE. This is one of my primary 5 bullits why I went child theme. Redoing everything for multiple sites is just not alright. Has this been sorted for TT5?
- I started out in just TT4. Edited Templates and more. That means some of my stuff has the original name and slug. Ere you for TT5 using the same template names and slugs, cause if so I will not see your templates, since they are overwritten by child. How can I fix this best?
- If required that I custom name and change slug to not overwrite TT5 stuff, has a duplicate template option been added in TT5 / latest WordPress? I wonder if I should switch to TT5 first and then rename templates or I should do it in TT4 first and after upgrade?
- Is TT5 Version 2 or Version 3 T.J?
- Headers and footers go everywhere in FSE sites. Again they are lost at theme upgrades. I have custom of both with own name and slug. Can you confirm that, since I have child theme, they will this time survive?
- Has Wp / TT5 started enqueing style.css child so that I can remove this function from functions.php child, Or do I leave it in? Why? Almost all plugins have simply not transitioned into the world of T.J, hence, style.css is a must. That’s why.
- In my css I use theme.json variables extensively for anything and all to adapt to WordPress FSE upgrades or a style change. Fx. var( ………..–font-size–medium ) / color–base-2 etc. etc. Are there any changes to the default variables in TT5. Is there anywhere a doc regarding new variables added in latest WordPress and TT5.
Again thx for your efforts. I am super excited about this.
]]>this is my themes.json file:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"useRootPaddingAwareAlignments": true,
"layout": {
"contentSize": "1200px",
"wideSize": "1200px"
},
"spacing": {
"units": ["px", "em", "rem", "vh", "vw", "%"]
},
"typography": {}
},
"styles": {},
"customTemplates": [
{
"name": "home",
"title": "Home",
"postTypes": ["page"]
},
{
"name": "archive",
"title": "Archive",
"postTypes": ["page", "post"]
},
{
"name": "blank",
"title": "Blank",
"postTypes": ["page", "post"]
}
]
}I would also apppreciate if you can recommend a resource that deals with creating these block themes from scrach without having to rely on usin another theme as a starter so that it will help my undertanding.
]]>I spent ages searching around trying to find a solution to this and I haven’t so does anyone have a definitive answer for this?
]]>{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "620px",
"wideSize": "1200px"
},
"spacing": {
"units": ["px", "em", "rem", "vh", "vw", "%"]
},
"typography": {}
},
"styles": {},
"customTemplates": [
{
"name": "home",
"title": "Home",
"postTypes": ["page"]
},
{
"name": "archive",
"title": "Archive",
"postTypes": ["page", "post"]
},
{
"name": "blank",
"title": "Blank",
"postTypes": ["page", "post"]
}
]
}tree 17:54:26
.
├── parts
│?? ├── comments.html
│?? ├── footer.html
│?? ├── header.html
│?? └── sidebar.html
├── patterns
│?? └── header-default.php
├── style.css
├── templates
│?? ├── 404.html
│?? ├── archive.html
│?? ├── blank.html
│?? ├── home.html
│?? ├── index.html
│?? ├── no-title.html
│?? ├── page.html
│?? ├── search.html
│?? └── single.html
└── theme.json.is-layout-constrained > *,
.is-layout-flow > * {
margin-block-start: 3rem;
margin-block-end: 0;
}
In my theme.json i defined:
blockGap: 3rem (for general)
and h2 for example: margin: 2.5rem 0 2.5rem 0;
The margin, I defined for h2 are now overwritten by the margin-block-start (and end) commands.
Can someone tell me why does that happen now? I have this problem on all my client sites with different themes now.
]]>It’s been a year since Ben Ritner’s blog post about his thoughts on the state of Full Site Editing. As time goes on, and FSE features continue to advance, I become more curious about what approach Kadence might take to bridge the gaps between legacy WordPress features and FSE. I don’t even know at this point if Kadence Theme is likely to incorporate more FSE features in the future, or if they’ll release a separate Block Theme instead.
We support some enormous websites and need to support our theme/platform for a very extended period of time. It would be unfortunate to build a new site based on Widgets, Sidebars, and Appearance>Menus only to be stuck there long after it’s made sense to move on to Template Parts, Synced Patterns, and the new Navigation CPT.
This has been a long post, but I’ll end by saying that it would be very much appreciated there were more communication (follow-up blog posts?) that provides insight into how Kadence might handle this transition, even if it’s at a high level and not set in stone.
]]>I’ve been looking for a way to disable the automatic overlay color that is applied to new cover blocks as of WP 6.5. I would much rather specify the color, or go back to the default black that was set, as that will be more reliably accessible. Is there a way to disable this or force a default with theme.json or functions.php?
]]>I am currently using wp-env to develop a custom theme with wordpress 6.4.3. In my header template (header.html), I am using the core/social-links block and I wish to add a standard customization so that any of the icons have a :hover state and change color. This option doesn’t appear in the settings tab for the block. I would prefer to do this in theme.json. According to the documentation here, under the heading “Styling elements nested in blocks”, it seems like you can do just that. After inspecting the block, you can see that it’s just an unordered list with each list element containing a link wrapped around an svg icon. I tried adding a valid CSS color value to styles->blocks->core/social-links->elements->link->:hover->color->link in my theme.json but this did not produce the result. Since the documentation also mentions that the pseudo element :hover can only be applied to links and buttons, I thought it would work in this context. My JSON is valid so that’s not the issue. How can I achieve this result?
Thank you.
]]>For standard links the following works fine:
"link": {
"color": {
"text": "var(--wp--preset--color--primary)"
},
":hover": {
"color": {
"text": "var(--wp--preset--color--secondary)"
}
}
}However applying the same styles to navigation block links does nothing:
"core/navigation": {
"elements": {
"link": {
"typography": {
"textDecoration": "none",
"fontSize": "var(--wp--preset--font-size--x-small)"
},
"color": {
"text": "var(--wp--preset--color--base)"
},
":hover": {
"color": {
"text": "var(--wp--preset--color--contrast)"
}
}
}
}
},I’ve checked this out across multiple sites with three different themes: a custom one i built, Frost and Twenty Twenty Four and all are doing the same thing.
Inspecting the nav links I can see that the color applied is being inherited from somewhere and this is overwriting the style I am setting in on the navigation block.
The only way to set the nav link color seems to be in CSS with an !important flag which is obviously generally considered bad practice, or by setting the color in the editor. However the nav block does not have a provision to add a hover color so I’d still have to do a hover state in CSS anyway.
]]>i saw a lot of topics about changes wont show on frontend, but here its the other way around.
the stack:
– server is LocalWP running nginx
– latest wordpress (6.4.2)
– latest WooCoomerce (8.4.0)
– also my own plugin called Epalle
– my theme is custom developed Storefront-child (child-theme of storefront)
– also some custom blocks and gutenberg modifications
the case was changing the “outline” style variation of the block “core/button” in theme.json/style.blocks section. i kept it simple: just change the colors and add shadow, just to see a diffrenece:
"styles": {
"blocks": {
"core/button": {
"variations": {
"outline": {
"color": {
"text": "green",
"background": "pink"
},
"shadow": "6px 6px blue"
}
}
}
}
}those changes just didnt show up in the block editor. it did showed in the frontend of the site.
i would mention that changes i made to the theme.json/settings section did took place in the block editor (i added and removed the settings.blocks.core/button.border.radius and it affected the block editor)
things i have done to try to fix it:
- clear cache at the browesr level (CMD+SHIFT+R hard refresh)
- set WP_DEBUG and SCRIPT_DEBUG to TRUE, in wp-config.php
- set WP_DEVELOPMENT_MODE to ‘theme’, and then ‘all’
- remove all my custom code related to gutenberg
- change theme to TT4, and also try TT4-child theme to change theme.json
- deactivate my plugin, and WC plugin
none of the above worked. i have to admin that it make me frustrated.
i did spin up a fresh server of wordpress in LocalWP with TT4, and TT4-child theme, added theme.json to TT4-child and added this:
"styles": {
"blocks": {
"core/button": {
"variations": {
"outline": {
"border": {
"width": "15px"
}
}
}
}
}
}it did worked, which make me a bit more frustrated 