# PG and WP 6.2 - capabilities of making a block based theme like 2022 and 2023

**URL:** <https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887>\
**Category:** Styling (CSS)\
**Created:** [March 31, 2023, 3:13pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887 "2023-03-31T15:13:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![smgitner](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/smgitner/32/4615_2.png) [@smgitner](https://forum.pinegrow.com/u/smgitner)\
**Post date:** [March 31, 2023, 3:13pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/1 "2023-03-31T15:13:07Z")

</div>

Have you ever thought of adding functionality to export a theme.json file - something that would work with the new wp 6.2 - something to make real block-based themes?

6.2 removes the customizer and adds an editor instead. This gives options for themes to be changed after the theme is exported from PG.

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [March 31, 2023, 4:08pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/2 "2023-03-31T16:08:15Z")

</div>

I’d also love the ability to export a theme.json file.

As for the customizer, I think that only goes away if you use a block theme. Classic themes can still use the customizer as long as the support is added in your theme (as always).

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [April 3, 2023, 6:42am UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/3 "2023-04-03T06:42:59Z")

</div>

@smgitner @adamslowe yes, have just added the theme.json export.

For now, colors and fonts from the Design panel get added to theme.json:

 ![themejson](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/95e3f421187d86698a28b65f8ec82e1886b91162.jpeg)

theme.json gets overwriten on every export, so do not put any custom values in there. Instead, put them in custom\_theme.json and they will get merged into the exported theme.json.

Here is the DEV build of the PG WP Plugin, please take it for a spin and let me know about any issues:

[https://github.com/Pinegrow/PinegrowReleases/releases/download/pgwp1.0.0/pinegrow.1.0.9\_DEV\_themejson.zip](https://github.com/Pinegrow/PinegrowReleases/releases/download/pgwp1.0.0/pinegrow.1.0.9_DEV_themejson.zip)

Note, version number in this build is still 1.0.9 so you might have to Hard reload the editor to clear the browser cache.

---

<div class="post-metadata">

**Author:** ![smgitner](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/smgitner/32/4615_2.png) [@smgitner](https://forum.pinegrow.com/u/smgitner)\
**Post date:** [April 9, 2023, 8:13pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/4 "2023-04-09T20:13:00Z")

</div>

@matjaz thank you for doing that. I appreciate it. I look forward to seeing it added to the standalone version of Pinegrow, as that is where I’d like to use it. My Local Pinegrow locks up when I try to upload my webflow zip. So I tested with a smaller version of my file.

I’d like my Gutenberg FSE styling to match my front-end styling. That is ultimately what I’d like to make happen using Pinegrow. I want my designers to think that they are designing on the front end an dto be able better “visualize” their designs.

Does Pinegrow add code to the functions file that helps to define backend styling?

// Editor Styles  
add\_theme\_support( ‘editor-styles’ );  
add\_editor\_style( ‘assets/css/editor-style.css’ )

---

<div class="post-metadata">

**Author:** ![smgitner](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/smgitner/32/4615_2.png) [@smgitner](https://forum.pinegrow.com/u/smgitner)\
**Post date:** [April 9, 2023, 8:13pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/5 "2023-04-09T20:13:54Z")

</div>

Is there a way to add the theme.json file export to the standalone as a plugin?

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [April 10, 2023, 2:32am UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/6 "2023-04-10T02:32:43Z")

</div>

@smgitner theme.json export will come out in the next release. I posted the dev version of the plugin here to get some validation for the new (highly requested) feature, but so far nobody said anything 🙂 cc @adamslowe @Emmanuel

Editor styles are already supported with [Displaying the Site Styling in the Block Editor | Pinegrow Web Editor](https://pinegrow.com/docs/wordpress/creating-custom-wordpress-blocks/displaying-the-site-styling-in-the-block-editor/)

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [April 10, 2023, 2:46am UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/7 "2023-04-10T02:46:57Z")

</div>

Oh crap, I’m so sorry. Spring break with my 5 year old screwed with my schedule this week. I’m really excited about this, so I’ll take a look at it on Monday.

---

<div class="post-metadata">

**Author:** ![smgitner](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/smgitner/32/4615_2.png) [@smgitner](https://forum.pinegrow.com/u/smgitner)\
**Post date:** [April 10, 2023, 3:25am UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/8 "2023-04-10T03:25:01Z")

</div>

ok, thx. yea I admit I am a hard-code person that does not use Pinegrow in all its glory . . . yet . . . but I am getting there.

---

<div class="post-metadata">

**Author:** ![smgitner](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/smgitner/32/4615_2.png) [@smgitner](https://forum.pinegrow.com/u/smgitner)\
**Post date:** [April 10, 2023, 2:51pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/9 "2023-04-10T14:51:53Z")

</div>

is there any way to make it work so that it is compatible with 6.2 so that once the theme.json is defined in pinegrow, the typefaces can then be changed in 6.2’s editor feature? so say for example a user does not have access to pinegrow but wants to make changes to a theme.

wp-admin/site-editor.php?

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [April 10, 2023, 5:01pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/10 "2023-04-10T17:01:22Z")

</div>

@smgitner I just tested this with an FSE theme and the site editor, and it works as expected where settings from the site editor override anything that was manually set in theme.json.

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [April 10, 2023, 5:04pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/11 "2023-04-10T17:04:42Z")

</div>

Initial thoughts:

- Some people might not want this automatically generated, so having an option to disable it would be nice. Although, I suppose you could just choose not to export it with the theme.
- It might be nice, although completely unnecessary, to add a GUI to enable/disable some of the more common theme.json settings from the design panel rather than having to create a custom\_theme.json file for them. My boilerplate theme.json file is below. I suspect this covers most of the commonly changed settings.

```auto
{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
        "appearanceTools": true,
        "layout": {
            "contentSize": "768px",
            "wideSize": "1280px"
        },
        "spacing": {
            "padding": true,
            "margin": true,
            "units": ["px", "em", "rem", "vh", "vw", "%"],
            "blockGap": null
        },
        "border": {
            "color": true,
            "radius": true,
            "style": true,
            "width": true
        },
        "color": {
            "defaultPalette": false,
            "custom": true,
            "background": true,
            "text": true,
            "link": true,
            "gradients": [],
            "defaultGradients": false,
            "customGradient": true,
            "duotone": [],
            "defaultDuotone": false,
            "customDuotone": false
        },
        "typography": {
            "lineHeight": true,
            "customFontSize": true,
            "dropCap": true,
            "fontWeight": true,
            "fontStyle": true,
            "textDecoration": true,
            "textTransform": true,
            "letterSpacing": false,
            "fluid": true
        }
    }
}

```

- Exporting TW colors to Gutenberg works as expected  

- I don’t see the custom\_theme.json file, but manually creating it let me apply custom settings. I love having the ability to do this, BTW. Thank you!!!  

- It also worked well with a vanilla CSS project  

- The theme.json seems to work well with FSE themes in my limited testing. And, as I said in a previous post, settings from the site editor override anything that was manually set in theme.json.(as expected)

- One suggestion that I do think would be an enormous value-add would be an interface to change the default typography styles; particularly the sizes, weights, and line heights. Bonus points for making them CLAMPS 🙂 In a regular HTML/CSS project you can set these properties in the design panel, but they don’t seem to come through to the theme.json.  

Gutenberg now lets you do a lot of this through the style panel for FSE themes, but it’s all manual for classic themes.  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/abee8db91d9a34f783645dd09825ead51ec7eb5a.png)

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [April 24, 2023, 5:27pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/12 "2023-04-24T17:27:44Z")

</div>

I just released a new video showing how Pinegrow can be used to help make block themes. The process is pretty simple now and it’ll get even better once that theme.json feature is available.

[![](https://img.youtube.com/vi/xB_WoUpRzhs/maxresdefault.jpg "From Classic to Block Themes with Pinegrow") ](https://www.youtube.com/watch?v=xB_WoUpRzhs)

---

<div class="post-metadata">

**Author:** ![chipriggs](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/chipriggs/32/5076_2.png) [@chipriggs](https://forum.pinegrow.com/u/chipriggs)\
**Post date:** [April 24, 2023, 8:34pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/13 "2023-04-24T20:34:40Z")

</div>

Just watched it & also picked up your course as I’ve been slacking on doing so.  
Awesome work as always and a huge THANKS for everything you’ve been doing. 🙏 🙏

---

<div class="post-metadata">

**Author:** ![smgitner](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/smgitner/32/4615_2.png) [@smgitner](https://forum.pinegrow.com/u/smgitner)\
**Post date:** [April 24, 2023, 9:15pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/14 "2023-04-24T21:15:40Z")

</div>

Ditto. I am wondering what best practice is to us vacode and pinegrow together and how to keep them insync

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [April 24, 2023, 9:41pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/15 "2023-04-24T21:41:56Z")

</div>

@chipriggs Thanks for your support and for picking up the course. I hope you find it helpful!

@smgitner I’m still feeling that out, as I suspect most people are right now. For block themes, I’m trying to do as much as possible with native WordPress Blocks, supplementing them with Pinegrow or other 3rd party blocks when needed. I’m still using Pinegrow to manage the theme since it takes care of a lot of the logic writing for me. I’m eager to see what Pinegrow has in store for us regarding theme.json and other Block Theme-enabling tools.

---

<div class="post-metadata">

**Author:** ![smgitner](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/smgitner/32/4615_2.png) [@smgitner](https://forum.pinegrow.com/u/smgitner)\
**Post date:** [April 25, 2023, 3:31am UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/16 "2023-04-25T03:31:47Z")

</div>

@adamlowe just got through it. this is great stuff. but what about FSE typefaces? If I enter the typefaces in Pinegrow how do I get that to show up in FSE?

sg

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [April 25, 2023, 11:33am UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/17 "2023-04-25T11:33:50Z")

</div>

@smgitner Today, the easiest thing to do is to create a theme.json file to define them. Once Pinegrow’s theme.json tool is out of beta that should all be handled for us.

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [April 25, 2023, 4:05pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/18 "2023-04-25T16:05:58Z")

</div>

And it’s coming shortly 😉

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [April 25, 2023, 4:31pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/19 "2023-04-25T16:31:57Z")

</div>

Damn, I should have waited to make the video.

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [April 25, 2023, 5:56pm UTC](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887/20 "2023-04-25T17:56:36Z")

</div>

This will be the opportunity to make a new one, and as many of us like the content of your videos, it’s a good news 😉

[Next page](https://forum.pinegrow.com/t/pg-and-wp-6-2-capabilities-of-making-a-block-based-theme-like-2022-and-2023/7887.md?page=2)