RAY MORTIMER

UK Web Developer

Wordpress and Front-End Tips December 2022

Here are a few interesting front-end and Wordpress things I've used or learnt this month, including:

1. Installing Google Fonts Locally

Google offers a wide variety of good quality fonts that you can use for free on your website.

The normal way to use the is to link to the font files on the server - though performance will be dependent on Google's servers.

Sometimes, this can result in a default font appearing momentarily. By hosting locally, you can attempt to get this down to the shortest possible time.

You can also freely download font families, if for example you want to use the fonts in another application.

If we download the modern WOFF files and put them on our web server, we can use some @font-face CSS to server them up locally from our server rather than relying on Googles.

In fact, Mario Ranftl has already semi-automated this process, so here are the steps involved.

In my testing, this really did shorten the time that you could potentially see the default font appearing, leading to a better user experience.

2. Regex to Trim Path Points In SVG files

Applications like Inkscape have an annoying habit of setting coordinates in paths and shapes using a high number of decimal places. This doesn't add anything when rendered in a web browser, and can bloat the file size unnecessarily.

Use this search and replace regular expression to trim them down to 2 decimal points to make smaller files:

(?<=\d\.\d{2})\d+

3. How to Save Wordpress Blocks for Re-Use

The Wordpress Blocks interface (previously called Gutenberg) offers some useful and advanced ways of creating page layouts far beyond what the classic editor could do.

However, it's still very much work-in-progress and there are some basic omissions.

One of the things you may want to to is to build a custom block and then re-use it throughout your site to build your layouts.

Wordpress offers two types of custom blocks - reusable blocks, and block patterns.

The Reusable Block
You can make any block a reusable block and add it to your library. You should note that this block is more of a central reference rather than a standalone block and always has the same content - changing one instance of it (in the library or on a page) will update all of them.

Sometimes this is useful, such as an address block or similar. You can use these throughout your site and know that changing one in future will update all of them.

Block Pattern
A block pattern is a template - maybe with some dummy content - that you can place into your page and modify. Each inserted block pattern is independent of others, so changes will only affect that block.

While you can easily add reusable blocks to the block editor through the front-end, creating a block pattern is a little more complicated and will involve editing your theme file (functions.php) or creating a plugin for your custom block.

If the block will be reused across different sites, it is recommended to make a plugin.

Creating Your Custom Block
Design your template block using the block editor tools. You may want to include example text that also gives instructions for use. Don't forget to add any classes under advanced, if required.

function function_name() {
  register_block_pattern(
    'slug',
    array(
        'title'       => __( 'Your Title', 'text-domain' ),
        'description' => _x( 'Your Description.', 'Block pattern description', 'text-domain' ),
        'content'     => "",
        'categories'  => array('featured'),
    )
);
}
add_action( 'init', 'function_name' );

Paste this function into the functions.php file for the theme. When you refresh the page, you should see your new block appear as an option within the Patterns tab of the block inserter.