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? The templates allows you to create your own files to be generated for a new block. I can see this being quite useful especially if you are an agency or business that creates many custom blocks, or just to share different block starting points. What is […]
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 […]