Matt made an AI demonstration of multilingual sites. A speaker talked in several languages, and the lip sync was attempted. This technology is in it’s infancy, however the results are very promising.
TT4
The theme for the next year was demonstrated by Mullenweg and the lead developer of Gutenberg Matias Ventura.
The file format .woff2 is recommended, however you can have fallback files in the array with the path to the font-file.
Bug (WP 6.4.2)
However, there is a bug in WP 6.4 – if you try to use this font in headings you cannot save it. I hope that this will be corrected soon. You can use the font in the Gutenberg editor, but not assign the font to the headings.
Here I add the font:
The font is visible in the editor. However, as soon as I press “save” the font is gone! And everything is back to “normal”:
In this tutorial you will learn how to modify a WordPress style and save it as your own. As a bonus you will be able to save your entire theme in a Github repository.
This tutorial is based on the most recent standard theme for WordPress (WP): Twenty Twenty Four. However, the principles should work for any block-based WP theme.
Select a relevant style
Select one of the styles in Appearance / Styles. I used Rust for this tutorial.
Modify the style
Now you can modify your style. In my case there was a lot of irrelevant information in the header and footer templates. I removed the unwanted informations on the frontpages template too.
You can edit the header and footer in Appearance / Edit / Patterns / Header
How to edit all headers in one go There is only one header here. This template pattern is used in many places. So if we edit this header, we will edit all headers in the active style.
In my case the colors were reversed in the header and footer, so that the background was dark and the text was made in a contrasting color. The links were changed too, since they would disaapear with this new background.
Here you see the header with reversed colors from the theme.
In this case a worked on a local computer, but you could work in a staging environment too. Now when the work with the styling is finished it is possible to export the entire theme and upload it to your webserver.
Export the theme
Under Appearance / Edit / Styles you can click the pen.
Then click the three dots icon found in the top right corner.
The menu to the right should appear.
Now you can export the theme. Click on Export. The file will be downloaded to your Downloads directory on the computer.
Fonts
I have tried to add fonts, but this experiment is only a partial success! You can see the fonts in the editor, and sometimes use the additional fonts with the blocks.
Permanent Marker works fine when my petj_rust style is enabled [this sample will only work as long as I use the petj_RUST style] 😉
However, if I try to add the costum font to a heading, the style is overruled!
Even a custom CSS !important clause is ignored by the theme. Perhaps this is a bug in Twenty Twenty Four?
If you open the zip file you’ll see the standard Twenty Twendty Four files. In the styles folder you can see a series of JSON files, one for each of the styles. If you want to have your own styles you can copy the rust.json file and give it a new name, e.g.
aGoodName.json
You can modify the JSON inside the file. A good start is to rename the theme name and add a description in the key value pairs, e.g. like this in your favorite editor:
"$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "title": "PETJ Rust", "description": "Multimusen's take on the RUST style.",
Save the JSON file, and yo are ready to go.
Tweaking All Styles
You can tweak all the styles in the JSON:
Colors
Fonts
Duotones
Blocks
But this has been covered in some of my other tutorials. You can even select to block other users from changing the palettes and similar settings.
Now you can upload the revided theme to WP. Here I’d prefer to upload to the web host via Filezilla. If Twenty Twenty Four is installed, just upload and overwrite the files.
Filezilla in the local directory with Twenty Twnety Four. And pointing to a similar folder in the directory:
wp_content/themes/twentytwentyfour/
The result
Now that’s all it takes to tweak a style. After the upload the theme will look exactly like what you did with the tweaks. Even headers and footers will look like your local version of the WP JSON Style.
Here is the final result, a new styled theme for Multimusen.dk:
Research notes: about styling block based themes via theme.json type pages, e.g. Twenty Twenty Three or Four.
Quick and Dirty Start
As a quick and dirty start you can copy either the theme.json file or one of the additional styles in the ./styles folder of the theme in Twenty Twenty Four. Save your file as ./styles/myFile.json. The styles are:
ember.json
fossil.json
ice.json
maelstrom.json
mint.json
onyx.json
rust.json
Since these files are more simple than theme.json in the root directory of the theme, they are good starting points for developing your personalized theme styles.
Choose a style that is somewhat close to the endresult you want to acheive. Then you’ll have a good starting point for your design.
Give your style a title
First you have to add the title to the file. As soon as the json file is present in ./styles you will be able to activate it in the Dashboard / Appearance / Styles.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"title": "My new style",
"settings": {
... etc ...
If you work in a copy of the theme.json file, remember to add the “title” : “My Way” key pair. The original theme json is more elaborate than the sample styles, since all blocks are controlled by the file. If you want to create your own theme this may be a good way to work.
If you’re like me it may be more easy to edit the file in your favorite editor, and upload the file to WP. Now you should be able to see your style in Appearance / Editor / Styles:
In the WP theme directory ./styles you’ll find the *.json files that will style your theme. They are similar the theme.json file. In my experience the colors are easy to work with. However, fonts can be a challenge.
If you tamper with the theme.json file problems may arise if you update the theme. Your best option is to add a style in the ./styles directory. Here your code is safe – so in many ways this modus operandi is similar to the child themes that were used before we had the block based themes.
Don’t edit the theme.json file. Add your own style JSON. E.g. ./styles/myStyle.json
Below are some notes on how to style with fonts and colors – and other CSS features.
Fonts
The best way to add custom fonts is to download the font from either Google Fonts or another font provider and then use the files after this model:
First you add the fontface with the filenames.
Then you can instantiate the font by the triad
fontfamily, name and slug.
The slug will create CSS-variables. You can use these variables when the block elements are styled. More about this later.
Font File Format: .woff2
According to Carolina Nymark you should use font files in the woff2 format:
“If you choose a font family on https://fonts.google.com/ and then select the “Download family” option, you will only receive a zip file with .ttf files. To get the .woff2 files, you can use a font converter script or an online converter.”
“I recommend using this time saving tool called Google webfonts helper to download the files.”
(Carolina Nymark)
Actually I’ve had strange font problems, perhaps Nymark’s solution is the solution. Sometimes the fonts do not appear no matter what you try. However, now I see that the fonts that gave me problems were actually ttf and odt files. I’ll test this solution and try to use woff2 exclusively.
/** Model: font via a file */
{
"fontFace": [
{
"fontFamily": "Jost",
"fontStyle": "normal",
"fontWeight": "100 900",
"src": ["file:./assets/fonts/jost/Jost-VariableFont_wght.woff2"]
}
],
"fontFamily": "\"Jost\", sans-serif",
"name": "Jost",
"slug": "body"
}
/** Model: standard browser fonts */
/* Sans Serif */
{
"fontFamily": "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif",
"name": "System Sans-serif",
"slug": "system-sans-serif"
}
/* Serif */
{
"fontFamily": "Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
"name": "System Serif",
"slug": "system-serif"
}
Using the Fonts
Mostly the font will not show up after install, which is quite frustrating. Do thus:
Quit the styles editor
Purge the browser cache
Purge the WP cache
See the webpage frontend – if the font is now visible everything is ok.
Return to the editor.
Now you can see the font.
It’s quite cumbersome, and may take a lot of experiments.
Perhaps a good idea is to use an incognito browser window in order to avoid browser cache issues.
How to Add Standard Browser Fonts
Standard fonts are more easy to add. Here is the model for serif and sans serif fonts with the most common fallbacks:
/* Sans Serif */
{
"fontFamily": "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif",
"name": "System Sans-serif",
"slug": "system-sans-serif"
}
/* Serif */
{
"fontFamily": "Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
"name": "System Serif",
"slug": "system-serif"
}
Colours
The colours are straightforeward. Add the colours as an array:
In the JSON file we can style the elements (aka. Blocks) in the elements section.
How do we implement the fonts and styles in the blocks? Here is a typical sample: styling the button block. Other blocks are styled in a similar manner.
WordPress will create CSS-variables from your JSON-file after this model:
var( –wp–preset–CSS—SLUG )
for example:
var(–wp–preset–font-family–heading)
Below you see the styling of a button by JSON. The example below will define the:
Border
Color
Spacing (whitespace: padding etc.)
Typography (fontfamily, fontsize, etc.)
:hover (that’s the way to use pseudo classes
In Practise: Styling the Buttons
Now a button is a fairly typical block. If you can style a button, you know how to style any block.
Let’s break down this code a little bit. I have cut out the samples from the code above.
Give the Button Colours
Here is the :hover pseudo style for our button. A color is defined when the mouse pointer hover over the button. The same principle will work for :link, :active, :hover and so on. In this case the color that will be used is contrast:
We can add fonts after a similar manner. The CSS wee need is font-family. So we use –wp–preset–font-family. To the variable we’ll have to add the slug of the selected font which is heading. Now we have constructed the variable:
Now we have seen how to style one block. Here is a list of styled blocks in the theme.json of TT4, so if you want a deeper study have a look at them, since this article only mentioned “core/button”:
The list above was made via a simple Bash command in a terminal window on a Mac or Linux system, that will filter out any string that contains core/:
# grep “core/” theme.json
With this information we should be able to style most of the Gutenberg blocks. Here is an even more extensive list of the Gutenberg blocks: click here.
Leaflet is a cool JavaScript / CSS library for adding markers, popups and similar to OpenStreetMap maps. Since the library has a CSS library, you could tweak the setings by additional CSS after the link to the Leaflet CSS. E.g.:
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<style>
/** tweak something here ... see below */
</style>
Chiado Apartments (Apartment) 83 Rua do Alecrim, Misericorda Lisbon
Solar dos Poetas (Hotel) Rua da Horta Seca nº11 1200-221 Lisbon
WebSummit Venue Altice Arena and FIL Rossio dos Olivais 1990-231 Lisbon Web: https://websummit.com/
Registration At the airport: Terminal 1 of Humberto Delgado Airport (also known as Lisbon Portela Airport), Alameda das Comunidades Portuguesas, 1700-111 Lisboa, Portugal
Here is the kind of code that we need in order to develop this effect:
<!-- In the Custom HTML Block -->
<!-- add styles first -->
<style>
#foto {
width: 200px;
height: 200px;
border: 1px solid red;
background: pink;
background-image: url('https://woo.thoth.dk/wp-content/uploads/2023/08/beanie-with-logo-1-600x600.jpg');
background-size: cover;
}
#foto:hover {
width: 200px;
height: 200px;
border: 1px solid blue;
background: blue;
background-image: url('https://woo.thoth.dk/wp-content/uploads/2023/08/hoodie-with-zipper-2-600x600.jpg');
background-size: cover;
}
<style>
<!-- then add the HTML -->
<div id="foto"></div>
Avoid Blank Lines
Note the ugliness of the code above. No indentations. No whitespace. Unfortunately there is a reason for this mess.
The reason is this: WP will add stray <p> tags to the code, if whitespace is present. This is utterly destructive to scripts and styles. However, the cure is simple: don’t add any blank lines to the HTML block!
I hope that WP will correct this in the future – and give us colored syntax. We could use better code editing options. To be honest, I don’t edit this kind of code in WordPress. I write my code in an editor, like Nano, Visual Studio Code or Atom.
As soon as the code does the trick, I copy paste the code to WP.
I have wasted several hours on the “Create Block Theme” plugin. Now it’s imposible to add new fonts. This error will come up:
I have filed an error report to WP. The error suggests that you should add something along these lines to wp_config.php. But this has no effect on the plugin.
# define( 'DISALLOW_FILE_EDIT', false );
Now adding fonts to a theme that calls itself “Full Site Editing” should work like a breeze. In reality it’s a stumbling block.
WordPress 6.3 has high ambitions, but honestly speaking, but in practise the UX is too often confusion. So this is perhaps a minor problem.
Introduction to WP If you need a simple easy to read article about WP, what is is – and what it can do for you try “What is WordPress” (Kinsta). In this article you’ll get a fine overview of the many options WP gives.
“Many years ago, WordPress was primarily a tool to create a blog, rather than more traditional websites.
That hasn’t been true for a long time, though.
Nowadays, thanks to changes to the core code, as well as WordPress’ massive ecosystem of plugins and themes, you can create any type of website with WordPress.”
And then … When you know what WP is, then try the tutorials from Learn WordPress.
Another good resource for an overview of WP is this article “What is WordPress” by Blair Thorne. Here WP is defined:
The flexibility of WordPress, combined with its extensive library of themes and plugins, makes it suitable for almost any type of website you can imagine.
In this article Blair Thorne lists several use case scenarios for WP. These samples demonstrate that WP is far more versatile than a mere block.
My Tutorials
In my classes at the Multimedia Design Programme at Business Academy Aarhus I teach eCommerce. Here WP is a key component with the WooCommerce online shops. If you are interested in tutorials about block based themes and block based WooCommerce have a look at these sites.
If you need a tutorial to get started, just click the buttons below.
Is your website is blocked in the browser because it’s “not safe”? In that case you have to install the HTTPS protocol. On Simply.com this operation is relatively simple:
Enable HTTPS
In the Dashboard go to HTTPS settings.
Enable HTTP
Optional: force HTTPS.
How about SubDomains?
The HHTS settings will not work on the subdomains. Here you have to enable HTTPS again on each subdomain.
HTTPS and WordPress
If you have WordPress install the plugin “Really Simple SSL” and activate it.
Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.
