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

[smgitner]

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.

[adamslowe]

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).

[matjaz]

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

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

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

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.

[smgitner]

@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’ )

[smgitner]

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

[matjaz]

@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

[adamslowe]

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.

[smgitner]

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.

[smgitner]

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?

[adamslowe]

@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.

[adamslowe]

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.

{
    "$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.

[adamslowe]

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.

From Classic to Block Themes with Pinegrow

[chipriggs]

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.

[smgitner]

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

[adamslowe]

@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.

[smgitner]

@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

[adamslowe]

@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.

[Emmanuel]

And it’s coming shortly

[adamslowe]

Damn, I should have waited to make the video.

[Emmanuel]

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