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"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"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"If you need to distinguish between post types in a block editor script, you can use the following code to get the post type:
wp.data.select('core/editor').getCurrentPostType()Code language: JavaScript (javascript)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"Webpack allows specifying multiple entry points, for example, to compile multiple JavaScript files via Babel. This post shows how to compile SASS to its own file when using various entry points.
Continue reading "Webpack: compile SASS in own file with multiple entry points"My Lazy Loader plugin needs PHP 5.3 or higher. If users count on that, it is annoying if this minimum version is raised through a inadvertency (like using the [] array syntax) in a patch or minor release.
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` = 4691Code 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` = 4691Code language: SQL (Structured Query Language) (sql)\\1 inserts the part inside the brackets from the searched string into the replace string: the week number.
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.
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.