Showing all posts (13)
Gutenberg: Case study: convert group of file blocks to ACF block
How to convert a block into another block? Let’s convert this (source block) to this (target block): Before we can do that, we need to define the template for the target block. I’m going to use some very basic Mustache syntax for the template. Should be self-explanatory: Now, all we need to do is create … Read More
Gutenberg – How to update blocks and block-templates in bulk
At the time of writing, there is still no documented way to update blocks. So here is how I would update all my blocks: Loop trough all posts. Find patterns matching:<!– your-block –>*<!– /your-block –> Optional: convert the block to PHP Array with parse_blocks() Replace according to your new block Save post with the updated … Read More
Create your own wp-env npm package
wp-env is a super nice tool to kickstart plugin and/or theme development. It is zero-config, which makes it very usefult for people who don’t like to mess around with Dockerfiles, manually downloading WP, basic configuration, setting up a DB, … So that’s almost everyone, right? Well.. I don’t think so. While I do believe that … Read More
Contact Form 7 toggle buttons
You don’t need any fancy plugins to turn your checkboxes or radiobuttons into actual buttons. Just good old CF7 with some basic CSS will do. Simply create your form like this: It’s very important to include: use_label_element and class:togglebuttons. Then add these CSS style rules to your theme (or via the Customizer): Extra: tabs Did … Read More
Gutenberg: how to insert a reusable block in the editor with JavaScript
Accessing core blocks and custom made blocks, is pretty straight forward. For example, if you want to get the paragraph block, you could do so with: And if you want to insert a paragraph, you can easily do so with: There’s even a convenient way to get ALL registered blocks as an array with However, … Read More
Gutenberg: how to force sidebar to be always open on post edit screen
Add this to your functions.php … Read More
Gutenberg: custom validation / how to prevent post from being saved
This script will disable the Publish/Update button: To make the post publishable again, you can do: Very nice. But how is this useful? Here are a couple of use cases. Force users to enter a post title. Let’s say you want to force your users to at least enter a title before they can save … Read More
Gutenberg: Prevent specific block from being removable
Ideally, we should use template_lock as much as we possibly can. But with the problems it introduces currently, and because there might be special use cases that template locking cannot handle, I wanted to explore a way to prevent a specific block from being deletable. If you’re comming from a jQuery background (which is likely … Read More
Gutenberg: Problems with template_lock
In my previous post, I described a way for developers to create a custom user interface for a specific post type. This approach relies heavily on using template_lock=’all’ in combination with templateLock={false} on some of the child blocks. Problem 1: there’s a warning Each published Book that you try to edit, will show this warning … Read More
Gutenberg: creating an advanced custom admin user interface for your post types with the block editor using template lock.
As a freelance developer, I want my clients to have an easy to use interface when creating posts. Before WP 5.0 (and before Gutenberg) I used Advanced Custom Fields a lot for this purpose. An example interface for a Book post, could look something like this: As you can see, I want to add the … Read More
Gutenberg: set category with dispatch
Set the category with id termId and post ID currentPostId: Both termID and currentPostId need to be integers. use parseInt to enforce this if necessary. Custom taxonomy Same thing, just use your custom taxonomy slug instead of ‘category’: Set multiple categories If you want to set categories with term ID’s 24, 45 and 87: … Read More
WordPress core development with Xdebug and VS Code
I had a bit of a struggle to get Xdebug working with wordpress-develop, but the solution turned out to be very simple. So I’m sharing it here for future reference. … Read More
Dynamically populate a Contact Form 7 dropdown list (or any other input field)
With Contact Form 7 the normal way to create a drop down list, looks like this: That’s all very nice, but what if this information tends to change often? You probably have a data source already, be it a web API, an excel sheet, or a simple text file. Wouldn’t it be nice to write … Read More