One of my favorite WordPress tools is WP-CLI, the wp command-line tool. The tool allows you to do numerous things from installing WordPress, to upgrading, installing, and activating plugins and themes, configuring installs, and even generating dummy content. I’ll include a few of the most common things, check out the official WP-CLI documentation for more. […]
Block patterns are great, one of the features I’m most excited for in WordPress. As block patterns mature and people adopt, they will be one of the best ways to share designs and templates. I’m looking forward to a rich repository to pull design ideas, the pattern directory is already filling up. Block patterns aren’t […]
I recently had the need to update Gutenberg packages that are in WordPress core for a point release. This required setting up a development environment where I can test Gutenberg code in WordPress but without using the Gutenberg plugin. This is not something most developers will need to do, it is my first time after […]
Did you know the create-block script can support templates? With templates you can create your own files to be generated for a new block. I see this being quite useful especially if you are an agency or business that creates many custom blocks, or for developers to share different block starting points. What is the […]
WordPress 5.8 introduced theme.json, a way to specify styles to be generated for the editor and front-end. Theme.json is part of a suite of full site editing tools being developed for WordPress. You can start using it now in existing themes. Let’s dive in and show a few things you can do with it. Colors […]
There is a good discussion on modern WordPress development and a general lament about it’s complexity and change in the developer experience. Chris Wiegman tweeted out The deeper I get with modern WP dev the more I understand why newer devs don’t like to work on it. This is not the same project as it […]
In WordPress 5.8, releasing on July 20, there is a much easier way to conditionally load block assets. This is the loading of JavaScript and/or stylesheets on the frontend only if the block is shown on the page. I wrote twice previously about solving this same problem. The first time, I solved checking if each […]
Another post in my series on contributing to the WordPress Gutenberg project. This post complements my Good First Issue post that focused more on a coding contribution. Here I take a step back and focus on documentation and dive deeper into the GitHub pull request process. Find an Issue Browse the Documentation label on GitHub […]
I’ve been reading and learning Typescript recently, and I quite like it. The added type safety is a great feature to help create more error-free and stable code. You can read more about Typescript here. This got me thinking that it should be possible to create a WordPress Block in Typescript, which of course it […]
Another look at conditionally loading block assets for WordPress blocks, assets being JavaScript and CSS files loaded by the browser. In the previous post, I solved using heavy-handed testing of each post in the loop checking to see if it contains our block to load the assets. The company I work for runs a few […]
Using automation makes your current life easier by taking tasks off your hands; plus makes your future life easier by documenting a repeatable process. I recently automated the publishing of my code-syntax-block plugin to the WordPress repository using the Github Action created by 10up. What are Github Actions First, Github Actions allow you to hook […]
Updated: see Part 2 post that explains a better way, as pointed out in the comments. Or see the newer Part 3 post with an even easier way with WP 5.8. One of the great features of the WordPress Block Editor is all the specialty blocks that can be created. This can also be the […]
In this seventh part, I do away with screencasting and work on improving the editor interaction with the QRCode block. Specifically, showing in the editor how the QRCode will look when published. Previous screencasts: Development Environment WordPress Plugin Anatomy of a Block Block Attributes ES6+ Syntax QRCode Intro One of the primary tenets of Gutenberg […]
In this sixth screencast I get down to implementing the QRCode part of the block: loading the qrcode.js library and trigger it using the saved URL to create a QRCode. Previous screencasts: Development Environment WordPress Plugin Anatomy of a Block Block Attributes ES6+ Syntax QRCode Implementation In the cast, I alter the block’s save function […]
The fifth part of my series walking through building a Gutenberg block for the WordPress editor. This part takes a break from new block development to explain some features of ES6+ syntax used, specifically Destructuring assignments, Arrow functions, and Imports. Previous screencasts: Part 1: Development Environment Part 2: WordPress Plugin Part 3: Anatomy of a […]
The third part in my series walking through building a Gutenberg block for the WordPress editor. This lesson continues the anatomy of a block, specifically a block attributes. Previous casts: Development Environment WordPress Plugin Anatomy of a Block Block Attributes Attributes are the way a block stores data, they define how a block is parsed […]
The third part in my series walking through building a Gutenberg block for the WordPress editor. This lesson covers the anatomy of a block. Previous casts: Development Environment WordPress Plugin Anatomy of a Gutenberg Block At its simplest, a block in Gutenberg is a JavaScript object with a specific set of properties. Here is the […]
The second part of my series walking through building a Gutenberg block for the WordPress editor. See Part 1: Development Environment. Part two covers creating a WordPress plugin and setting up the JavaScript build for block development. After this part, all the pieces are in place to start creating a block. WordPress Plugin A WordPress […]
I’m kicking off a new series of screencasts for building a Gutenberg Block for the WordPress Editor. The intended audience is a developer who may not have experience with WordPress and/or JavaScript, so introductory level. The series will focus on building a QRCode block, that I have an idea for but have not yet built. […]
I ran into an issue when trying to save SVG as part of a block. If you are having the same issue, or similar with non-typical tags being used; then here’s how you can fix it. In creating a Gutenberg block, adding an SVG element as part of the save() function it was being stripped […]
wpsync is a command-line tool to sync a local directory of markdown files to your WordPress. I really like markdown and vim. My publishing process was: Create a draft in markdown, When ready to publish v1.0 copy-paste to WordPress; the editor converts markdown nicely, and then publish However, when a revision is needed, it must […]
This post walks through my process of creating the Juxtapose Block for the WordPress block editor. The block implements the JuxtaposeJS library by Knight Lab which allows you to place two images side-by-side and use a slider to reveal the difference between them. Here’s an example: 📌 Note: This block was integrated into the Jetpack […]
WordPress 5.0 introduces a new editor based around blocks. The editor is the first phase of a larger project developed under the Gutenberg name. This post is part three in my unplanned series: Part I – Creating a Gutenberg Block from October 2017 covers how to extend Gutenberg with a basic block. I wrote a […]
You can create Gutenberg blocks in ES6 code without the build step, this makes it easier to maintain and develop. I switched over my Code Syntax Highlighting block and am much happier for it. All of the Gutenberg examples by default use ES5 code, which already does not require transpiling with webpack, but they also include […]
A new editor is coming to WordPress, the project code name is Gutenberg but at some point it will be just the WordPress editor, for now it is referred to as Gutenberg or the Gutenberg editor. The focus of this article is on some of the new features you can do with Gutenberg. If you […]