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 […]
Category: WordPress
Conditionally Load Block Assets, Part 2
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 […]
Deploy WordPress Plugins Using Github Actions
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 […]
Conditionally Load Block Assets
Updated: see Part 2 post that explains a better way, as pointed out in the comments. One of the great features of the WordPress Block Editor is all the specialty blocks that can be created. This can also be the downside, each of these niche blocks might load their own view assets; and if not […]
Allowing SVG in WordPress Content
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 – Markdown to WP
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 […]
Making the Juxtapose Block
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: Breaking down the problem When creating a block, I […]
Block Rocking WordPress
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 […]
Gutenberg blocks without the build step
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 […]
Gutenberg can do that!
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 […]
Code Syntax Highlighting in Gutenberg
I’ve developed a WordPress plugin which extends the core Gutenberg code block adding color syntax highlighting. If you are using Gutenberg to display code and want some color, install and check it out. It is available at github.com/mkaz/code-syntax-block. I initially started to build as a separate block, but that introduced the issue of converting existing […]
Creating a Gutenberg Block
A tutorial on how to build a Gutenberg block. The intended audience is a WordPress theme or plugin developers with some Javascript experience interested in learning what it takes to create a block in the new Gutenberg editor. Updated: See my new post post Gutenberg blocks without the build step for a simpler example without the extra […]
Install WordPress on Windows Subsystem for Linux
With the latest Creative Update on Windows you can run a full Linux environment, without the need of a virtual machine or other container system. It’s Linux on Windows, and it is pretty nice. The following instructions are how to setup WordPress on Windows Subsystem for Linux (WSL), it also sometimes called Bash on Windows, […]