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"If a PHP script runs, the page loads typically as long as the script needs to finish (or throws an error). That is fine for many cases, but if the script needs to process complex and/or many tasks, that take a few minutes or even hours, it would be nice to put that tasks in the background. This post shows you how to create background processes in WordPress.
Continue reading "Creating background processes in WordPress"Before the release of WordPress 5.6, WordPress core had no feature that external services could use to authenticate themself against a WordPress installation. WordPress 5.6 brought Application Passwords into core and with that a user flow, which can be used by third-party services to ask for authorization for later requests.
Continue reading "Application passwords in WordPress 5.6"I am currently working on a side project, which needs to create a copy of a WordPress installation. Because I do not know the server environment where it is used by the users, I can neither expect that I can run Linux commands, nor that there is a long PHP max_execution_time.
So copying needs to be done via PHP and also work when, for example, the maximum execution time for scripts is 30 seconds. 30 seconds are not much for a script that should copy many files. Creating a list of the files and looping it without copying files can already take longer.
Continue reading "Copying directory with many files in multiple steps via PHP"In a project, I wanted to use the sizes attribute for the images in a slider block. But because the slider is used in different widths, the value of the sizes attribute needs to change depending on the position of the slider block.
For some core Gutenberg blocks, like heading, you can set an HTML anchor in the Advanced section of the block sidebar. The value defines the id attribute of the element, to make it possible to create a link that jumps directly to that element.
All you have to do during block registration is add the following code:
supports: {
anchor: true,
},Code language: JavaScript (javascript)Easy, isn’t it? Yes, except we have a dynamic block. In that case, a PHP function does the rendering of the block markup for the frontend. For dynamic blocks, the above code snippet creates the input field, but we cannot access its value in the rendering function, because it is not stored as an attribute.
I found a not-so-nice workaround for that.
Continue reading "Anchor support for dynamic blocks"WordPress only allows admin users to save unfiltered HTML in the editor and removes elements for all other user roles that are not specified in a set of allowed elements and attributes. Disallowed elements and attributes, for example, are the svg element and the sizes attribute for the img element. That is a problem when markup generated by a block contains those elements or attributes and leads to interesting results.
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"WordPress 5.4 introduced the Block Variations API. The API can be used to create variations of blocks, which get listed as own blocks in the block inserter. An example from core are the social media buttons, that are all variations of the social link block.
A variation can predefine attributes of the block, in case of the social link block, for example, each variation defines the service attribute with the identifier of the specific social network.
Like shown in the dev post on WordPress.org, variations are created like that:
variations: [
{
name: 'wordpress',
isDefault: true,
title: __( 'WordPress' ),
description: __( 'Code is poetry!' ),
icon: WordPressIcon,
attributes: { service: 'wordpress' },
},
{
name: 'google',
title: __( 'Google' ),
icon: GoogleIcon,
attributes: { service: 'google' },
},
{
name: 'twitter',
title: __( 'Twitter' ),
icon: TwitterIcon,
attributes: { service: 'twitter' },
},
],Code language: JavaScript (javascript)variations is a key in the object that is passed to registerBlockType(), like title, edit, attributes, et cetera. Each variation gets a name and a title, which is displayed to the user.
Additionally, an icon can be set, and via attributes we can set values for one or more block attributes. isDefault specifies with variation should be the default. Moreover, the innerBlocks key can be used to fill an InnerBlocks component of the block with a set of blocks. That is used, for example, in the columns block, to create the different predefined column layouts.
With scope, we can define in which area the variation should be available, but I did not quite understand what the options block and inserter do. Maybe block means that the variation can only be used as part of another block. When leaving that option, both areas are set.
Currently, the variations do not appear as suggestions when using the / command to add a new block. The pull request for that is merged, but part of Gutenberg 8.5, so will not be part of WordPress 5.5, which contains new Gutenberg releases up to 8.4.