Second Full Site Editing (FSE) Adventure: Matching a Divi Site
The organization I work for has a beautiful Divi-based public facing site thp.org. Much of its basic layout relies on the Divi default, and the company that set it up did so before WordPress Full Site Editing (FSE) existed. Now with the release of WordPress 6.1, FSE has added important new functionalities.
I personally dislike using add-on page builders. Most of them are pretty sludgy to use, and many of them, like Divi, fill the text of your posts and pages with Short Codes which rather locks you into their theme. If you go to a theme outside the page builder, you wind up looking at a very ugly mess. This violates the whole principle of separating content from design.
So, can FSE compete on a practical basis with Divi, Elementor and others?
In 2020, I found I could copy our Divi-based style by building my own Classic theme based on Tania Rascia’s very nice Untheme — which, as a PHP coder, was not terribly difficult. Thus I had a head start for this project by having a style sheet that worked. But a “pure” FSE theme does not use a separate style sheet. FSE is designed to let you set your theme styles directly, or you can manually edit the theme’s theme.json file to fine tune it. If you find you need some special css, as noted in my previous article, you can use the Customizer for custom css (although those will not appear in the Site Editor) by going directly to the url /wp-admin/customize.php.
Starting from scratch
Step one: If you want to create a site from scratch in FSE, you can use Wordpress’s own create-block-theme plugin, which adds two new options under you Dashboard Appearance tab: Create Block Theme and Manage Theme Fonts. I used these to create my theme named thp2022 and added the two Google Fonts that thp.org uses, Unna and Source Sans Pro. I was pleased to see that the plugin loads the fonts locally, as I’ve been warned that sites visible in Europe that load fonts directly from Google might be illegal.
Step two: If you are not simply changing the theme on an existing site, then you will want to create at least stubs for all the pages that will appear on your main menu, as well as a few posts. FSE can import an existing menu, but left to its own devices it will create a new one directly from the site editor.
Fire up the Site Editor
From Dashboard / Appearance / Editor (beta) you see a new bunch of icons. I’m used to seeing self-evident icons but these are not. As you would expect the Plus box will add a new Gutenberg block, and Save will Save your work. The Pencil means your cursor is where you can edit, and it can switch to a pointer tool to drag things around.
The staggered three lines shows you the hierarchy of blocks, which you can drag around (very handy!). The gear is settings for a particular block, and the black and white circle is for “Styles” which can be for the whole site or for all instances of a particular block across the site.
Styles is where you want to start. You can ALMOST define everything about your theme from here. You can add custom colors to your pallet, set the basic site layout (especially width for the page and the content), and typography. At the bottom of the Styles menu you’ll see “blocks” which will then let you select any of the Gutenberg blocks and style them individually. You should only use the Gear if you have a particular block that needs styling in a particular context, such as in the header or footer. The three dots will let you do all sorts of things such as exporting your theme to share with friends!
Your blank theme only includes one initial template named index. You will want to click on the icon at the far left (which shows your own icon once you select it) and select Templates — here I’ve added a Front Page, Page, Single, Search and 404 templates.
Why you might need custom css
There are features you may want which, as far as I can tell, are not yet available in the customer. Take “sticky header” for example. In the customizer, I was able to add stickiness to the header tag and overcome the block spacing with:
header {position:sticky; top:0; background-color:white; z-index:100; bottom-margin:-25px !important;}I was also able to add hover action to the buttons by finding class that WordPress uses (which I found with the Chrome Inspect tool) for its buttons and add css to it:
a.wp-block-button__link:hover {color:white; background-color:#0000aa;}The other thing I like to do is NOT use plugins. So having a big countup counter on my home page is important — yes, it’s available in various plugins but those usually add a whole stack of features and additional css that I did not want, so I just add a bit of css:
.countup {text-align:center;font-family:sans-serif; font-size:50px;}and then I add my own custom html blocks to add countup spans and (for the last one) link them to my own css stored elsewhere in a cdn:
<div class="has-text-align-center"><span class="countup">11994810</span><br>people reached</div><script src="https://storage.googleapis.com/thp/countup.js"></script>Conclusion
I’m pretty happy with FSE, and I’m still learning it. I’m not one of those people who learns from the documentation — I learn by doing.
The answer to my question, however, is “yes.” With WP 6.1, I would not hesitate to recommend FSE to anyone wanting to create a great looking site and will continue to recommend people NOT start new projects with add-on site builders.
