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"

Only apply CSS rules when JavaScript is disabled

Sometimes there is CSS that should only apply when JavaScript is disabled. The lazy loading plugin Lazy Loader, for example, hides the images with the lazyload class, if JS is not active.

Until now I implemented that with a class that was added via JS to the html or body element. Without the class, the images are hidden, and if the class is present, the images are displayed.

Now the user wprox showed me an alternative solution in the support forum, that he got from the article »Nice and easy lazy loading with lazysizes.js« by Steve McKinney: Simply put the styles for disabled JS into a noscript element.

So instead of adding a class via JS to an element, and use that class in CSS to overwrite styles for disabled JavaScript, this is what it looks like in my plugin now:

<noscript> <style> .lazyload { display: none; } </style> </noscript>
Code language: HTML, XML (xml)

If you think about it, that is an obvious solution, but it never came to my mind before.