Prepend a class to CSS selectors in PHP

For a slider Gutenberg block, I added the option to enter custom CSS into a text field, that should only apply to that one block. Of course, the user should not need to write the selector that way, that it only applies to this specific block – that should be done in the background before rendering the frontend markup.

To get this done, I searched for a PHP solution for PHP parsing and found the right tool with PHP CSS Parser.

Continue reading "Prepend a class to CSS selectors in PHP"

Visual regression tests with JLineup

With visual regression tests, one can check two versions of a website for visual differences. Those tests are, for example, useful to check a website on a test server before and after deploying changes, to only move the changes to the live server when no differences are found.

There are various solutions to run such tests, here I will show you JLineup. JLineup can be used as a command-line tool or as a web service. I only tried the CLI version and am not going to describe the web service possibility.

Continue reading "Visual regression tests with JLineup"

Make custom block full-width in Gutenberg by default

By default, all blocks are inserted with the same width in the Gutenberg editor. Depending on the block and theme support, you get the option to set blocks to wide or full width, to let the block go beyond the normal content width on the website.

Now I had the case that a custom block should be displayed full-width by default, without the option to change that. On the frontend, I just modified the styling, but in the editor, there are a few more adjustments necessary because the block controls for a full-width block are above the block, not on the left side.

Continue reading "Make custom block full-width in Gutenberg by default"

Get post type in block editor

If you need to distinguish between post types in a block editor script, you can use the following code to get the post type:'core/editor').getCurrentPostType()
Code language: JavaScript (javascript)

Display specific Gutenberg blocks of a post outside of the post content in the theme

Sometimes it could be useful to display parts of a post or page on another place on the site. For example, a slider above the title of the post/page. Here I show you how to loop through the blocks of a post block per block in a theme to get this done.

Continue reading "Display specific Gutenberg blocks of a post outside of the post content in the theme"

Search and replace in MySQL

Currently, I want to wrap all acronyms – »PHP«, for example – in a span element to display them as small capitals. So I searched for a way to search and replace in MySQL, and there it is: REGEXP_REPLACE.

For example, the following command wraps WOFF in the post titles in the wanted markup (it is a good idea to create a backup before):

UPDATE `wp_posts` SET `post_title` = REGEXP_REPLACE(post_title COLLATE utf8mb4_bin, 'WOFF', '<span class="smcp">WOFF</span>' ) WHERE `ID` = 4691
Code language: SQL (Structured Query Language) (sql)

The first param of REGEXP_REPLACE is the string to search in – we set the column’s name we want to search in. The second parameter is the searched string and the third the string to replace the searched string with. Setting COLLATE utf8mb4_bin (you may need to adjust the collation if you use another one) is important because otherwise, the search would be case insensitive.

Like written in the MariaDB documentation (and as the name suggests) you can also use regular expressions with REGEXP_REPLACE. For my German version of the weekly recap, I used the following:

UPDATE `wp_posts` SET `post_title` = REGEXP_REPLACE(post_title COLLATE utf8mb4_bin, 'KW([0-9]+)', '<span class="smcp">KW</span>\\1' ) WHERE `ID` = 4691
Code language: SQL (Structured Query Language) (sql)

\\1 inserts the part inside the brackets from the searched string into the replace string: the week number.

SSH key and the »Windows Subsystem for Linux«

With Bash on Ubuntu on Windows, you can use a Windows Subsystem for Linux on Windows 10. With that, you can run many Linux commands, for example, ssh. This post shows you how to create an SSH key, which should be used on both, the Linux subsystem and Windows.

Continue reading "SSH key and the »Windows Subsystem for Linux«"

Conversion of fonts to WOFF/WOFF2 and font subsetting with Glyphhanger

To use web fonts with wide browser support, we need the font files in .woff and .woff2 format. Who does not care about Internet Explorer, Safari on Mac OS before Sierra, and a few mobile browsers can choose only .woff2 (there are tables with the browser support of the two formats on Can I use).

In this post, I show how to use the command line tool Glyphhanger to convert .ttf files to .woff and .woff2 and subset fonts to remove unused characters.

Continue reading "Conversion of fonts to WOFF/WOFF2 and font subsetting with Glyphhanger"