Documenting: Familiarizing Block Based Themes

New Day: Mon 21 Aug 2022 12:00:00 PM CDT

This article is a partner article to this article. I would like to use BBT and FSE to replace the plugins I am using.

talk on how to develop BBT:

Templates are HTML files that contain a full page of layout. They follow the same hierarchy of a typical WordPress theme that we are familiar with. Block template files are where you are are HTML files as well but they’re meant to be reusable. Across multiple full-page templates.

I wonder what selecting code view in the block editor looks like.

The site editor has a panel that allows you to browse create templates and template parts.

if you have the Gutenberg plug installed. You can press the export button and that’ll apparently export the changes that you made with. That wasn’t made with code. This is very interesting.

Really, what I’m looking at is …. you could edit a site to match a large divi theme just based on the editor, export it and it would like like you did those same edits with php or css.

Block based themes use a lot of logic located in the theme json file making the use of style.css lower–thank god.

But you would still use the style.css file for custom block styles or for specific theme styles which would not be editable such as animations or transitions.

I’m watching the video WordPress NYC published discussing block based themes, in it a slide says “Wait, if users can customize the whole site. What’s the purpose of a theme?”

Looking at how this FSE system works, I would answer with, essentially not really, it appears to be more of a jumping off point.

Note, I think that once the BBT paradigm really gets some steam behind it, I think that it will take a lot of jobs from the industry. More specifically, jobs–or gigs–in the WordPress ecosystem that require low amounts of skill.

I plan on reading the official documentation, here.

I have noticed that you can’t use widgets on BBT I wonder what the workaround to that is.

I am now watching this video, covering all the types of theme.

A block theme and a classic theme are so fundamentally different, it is very hard to create a bridge between the two.

Placing style rules within the theme.json makes things LOOK SO MUCH NEATER!

Looking at this, if a developer wanted to get really good at the logic behind these BBT and FSE systems, what you could do is … offer your services to various plugin manufacturers as a service of updating their plugins to use FSE.

Logged out: Mon 22 Aug 2022 00:00:00 AM CDT

New Day: Mon 22 Aug 2022 04:36:10 PM CDT

I am going to work on an empty theme today and try my best to do that I can with the bare basics.

Question: What is the bare basics of a BBT theme?

I would think it would be the only theme.json file in the root folder and one template file folder.

Side Note: Gutenberg starts off in full screen mode and you are unable to view the post, exit full screen mode and the view post button will return. Use Ctrl+Shift+Alt+F to toggle this.

I will be following this course along the way.

I have written a gist (here) which will, “when executed scaffolds a theme structure with just the bare essentials of a BBT (Block Based Theme)”.

Okay, now I am contrasting the bare-theme with the Ona theme.

Viewing the editor drawer of FSE pictured here.

This is what the Templates area of bare-bbt looks like (here).

This is what the Template Parts area of bare-bbt looks like (here).

Okay, now that I know this, I would like to isolate and import the Ona menu from the test site with sample data.

Okay, looking at it I see nothing in Templates or Template Parts that say menu, so I’m thinking the menu logic is in the header.

Okay, I duplicated it and yeah the menu is in the header.

Alright, after making that custom menu, export that zip and then you can access your custom template.

Okay, I got that into a file named menu.html as a template part now let’s add it to the bare theme.

I only added the Template Part and no styles. But somehow, the menu appears to be functioning well. Experiencing this process ….. I am blown away.. NO cap.

Before the theming that I was doing if I had to make a custom theme, getting the menu to link and the JavaScript as well it was like a 45 minute job linking all of the code together so the menu JavaScript would run well. This is incredible. It just worked right away… what.

What’s even more remarkable is that it’s responsive and when it is in mobile mode the menu looks fine.

Mobile menu and Mobile menu expanded

Desktop menu

I don’t know where the styles are for this or how it’s doing it but I look forward to this research.

With that being said…

Logging out: Tue 23 Aug 2022 02:46:06 AM CDT

New Day: Wed 24 Aug 2022 10:50:07 PM CDT

Use / then type the name of the desired block you want and it’ll pop up. This only works if your on a new block and / is the first character that you type.


Leave a Reply