FSE themes, where does pinegrow stand?

Hey!

I just finished watching a preview of the exciting new features and UX improvements coming in WP 6.3 for FSE.

Does anyone have any information about whether there are plans to support FSE themes?

After taking a quick glance at the direction WordPress is heading, it seems like Pinegrow could become outdated in the near future.

I’m a bit skeptical about a complete integration working solely from a desktop app. Perhaps it would be best to add this functionality to the Pinegrow WP plugin instead?

3 Likes

@madjedo we do plan to support FSE in the next few months.

2 Likes

That are great news. Wordpress is slowly becoming the CMS that Impresspages was more than 10 years ago. Thanks.

1 Like

It’s also worth mentioning that many of us are already using Pinegrow for FSE themes. In fact, I’m already remaking my starter theme to use it for FSE. There is still a lot of manual work and duplication between style.css and theme.json, but that’s an issue that goes well beyond Pinegrow.

(Also, @jonroc, block projects for FSE or 3rd party themes is one place where the Pinegrow WP plugin shines).

4 Likes

Hey, Adam! Do you have any tutorial/video regarding this?

This one is pretty rough but should get you started. I made it before Pinegrow added the theme.json exporter. WordPress 6.3 also adds some things that could be leveraged.

I’m making updates to my master theme (classic) at the moment. Then I’m going to re-work it as a block theme. When I’m done, and I have a better idea of how to systematize it, I’ll make another block theme video.

4 Likes

Hello, how is the work for FSE themes coming? I’m really looking forward to it.

2 Likes

My understanding is that Pinegrow isn’t going to do too much to help with FSE or block themes since the workflow mostly happens inside WordPress. (Please correct me if I’m wrong, guys)

I just started a new 6-part video series on creating block themes. Part 1 is an overview, but part 2 (due next week) will go into the details and you’ll see why Pinegrow is staying out of the Block Theme space. That said, when building a block theme, Pinegrow blocks are more useful than ever since the WordPress core blocks are so limited.

2 Likes

I believe there was talk about creating some kind of theme.json editor/creator?

If PG is really not going to provide functionality for FSE I hope they at least give us control over what is put into the functions.php file so we don’t have unneeded functions running that were put there for the legacy themes.

Hmm… I thought that was the stuff where they let us merge a custom.json file with the Pinegrow-created theme.json. I doubt they are going to do anything like giving us a pretty interface to theme.json since it’s such a moving target and 80% of it can already be set through the WP site editor and exported with the “Create block theme” plugin in WP.

1 Like

Thansk for sharing Adam. As usual quality content from you.
Eventually WordPress will boost it’s editing capability. It will look something like Kadence or Spectra. Though predicting the exact trajectory of WordPress’s development can be challenging, the trend towards enhancing its block editor and making it more akin to sophisticated platforms like the ones above mentioned is evident. Whether and when it will reach that level depends on various factors.
Big changes coming to WP world I guess. What do you think?

FSE and its purpose is still a bit of a mystery for me :slight_smile:

PG could generate WP template code and give some control over theme.json styling but wouldn’t this be duplicating core Site editor features?

Of course, at this stage, I can’t imagine how Site editor would be used to implement a fully custom design (for example, after receiving a Figma file from a designer). Would that be done in the WP Site editor, manipulating groups, columns etc like in Adam’s latest video and then changing the styles in theme.json (or in the style editor) while doing extra CSS stuff in normal stylesheets? This feels quite painful and all over the place.

What’s your approach for implementing custom designs into FSE sites at the moment?

Where there is pain, there is the opportunity. What holds me back is competing with core WP features and the burden of keeping any such solution up to date with all the WP FSE changes.

Looking forward to your input here…

2 Likes

At the moment for me I am going with a hybrid approach. I create a classic theme and then “pull” some interesting and useful features from block themes using functions.php. Some are basic stuff, like enabling padding/margin control, but others are more advanced like enabling “template parts” inside a classic theme and such.

Having checked out FSE themes a bit more since my post, I am really uncertain of the future. But WP sure seems commited now to this.

2 Likes

@matjaz if i were you i would focus on ways to implement the “hybrid” approach. At least for the short term. This way you dont put too much at risk. Majority of users still use only classic themes.

The hybrid approach could be giving us toggles in theme/plugin settings for various features that FSE themes have, that could be useful, that classic themes dont have.

What these “features” could be i leave up to your own research. I mentioned a few examples.

1 Like

For me it’s also a mystery how anyone would implement a given design with WP Core FSE UI. The WP Team seems not to think the same way as we do. They think in terms of Theme Developers that create easy customizable themes for “everyone”. As freelancer or agencies we think from a perspective of implementing individual designs for clients websites that do not need a fancy UI for styling. We even do not want any client to tweak the design. Classic themes are a more pragmatic way for that.

I think it will hurt if pinegrow tries to hold pace with every Gutenberg FSE change. It’s a moving target. That said, it might be a nice starting point to implement a theme.json generator based on the design panel.

2 Likes

For me, FSE themes have really taken WP to the next level for custom theme development. There are a lot of benefits, but the biggest one is that our internal non-developer teams can easily update WP sites now, and so can the client while still being forced into a standard design (I hide most of the default WP blocks, which are more or less useless).

To be clear, I’m not creating fully custom designs inside of the WP admin but rather fully custom blocks that create the base design for each archive and single post (saved to patterns when complete). This gives non-tech users flexibility while still being forced to stay within the design scope.

I don’t have time today to go through my whole process and all the huge benefits of FSE over the traditional themes for custom development, but I will come back with all my thoughts on that soon.

For now, I’m happy to hand code my theme.json, but as I continue to build, I’ll create a list of frequent use cases that could benefit from a UI for theme.json beyond the color creation tool we already have.

I’m 100% in FSE going forward, as there is no benefit to a hybrid version for me.

The only thing that I really don’t like right now is all the extra functions that PG puts into fuctions.php which are not needed for for FSE themes. The big one is creating the Menus when I don’t use the old-style menus in WordPress very often and never use a Social menu when I do create them. Here are the ones I’m pretty sure are not needed:

register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'fse_expert' ),
        'social'  => __( 'Social Links Menu', 'fse_expert' ),
    ) );

function fse_expert_widgets_init() {

    /*
     * Register widget areas.
     */
    /* Pinegrow generated Register Sidebars Begin */

    /* Pinegrow generated Register Sidebars End */
}
add_action( 'widgets_init', 'fse_expert_widgets_init' );

function fse_expert_customize_register( $wp_customize ) {
    // Do stuff with $wp_customize, the WP_Customize_Manager object.

    /* Pinegrow generated Customizer Controls Begin */

    /* Pinegrow generated Customizer Controls End */

}
add_action( 'customize_register', 'fse_expert_customize_register' );

I’m also not sure if the ‘add_theme_support’ functions are needed for FSE themes.

Just started experimenting with a custom hybrid theme. It’s tedious because i am switching now between VSCode, Pinegrow and WordPress constantly. And working in the WP Theme editor just saves to database. I need to experiment more to find a better workflow.

I would love to have a deeper insight in your process of building FSE themes @jonroc .
Do you make use of Block Styles / register_block_style()?

1 Like

Hi, Yes I’m registering a style sheet for each block so that the CSS only gets put into the page if the block is used.

Here is one thing we need for FSE themes:

  1. Automatically export files in parts, templates, and patterns folders
2 Likes

I covered that in a recent part of the block theme series I’m working on. It’s a mess, for sure, but it’s not insurmountable.

Block Themes From Scratch: Part 4 - Exporting and Distributing

3 Likes