Category: Tutorial

How to Enable Frontend Editing with Gutenberg Blocks (Part 2)

Welcome back! In Part 1, we covered preparing our block for frontend editing by implementing unique block identifiers, rendering the block dynamically, and establishing a frontend component. Now, we’ll dive into the WordPress REST API to set up a custom route and call that...

How to Enable Frontend Editing with Gutenberg Blocks (Part 1)

The WordPress Block Editor (aka Gutenberg), despite all the bumps along the way, has completely changed how we write pages and posts. Instead of a text document, we now have access to an interactive page builder of sorts while editing content, at...

Contributing to the WordPress Core

There are many ways to contribute to WordPress and its community. This article is focused on helping developers set up and get started on contributing to the WordPress core. Spoiler: You can definitely do this without SVN! Before anything, I would like...

How to Make Your Custom Block Accessible

It has been almost two years since the initial release of Gutenberg; and although a lot of users have embraced it, there are still a few who prefer the old WordPress way of doing things. It will take a bit more time...

Retroactively Sign Git Commits

It’s a classic situation. You’re contributing to a project, filed your pull request, and gotten it approved by your peers. You’re all ready to merge your code and add your humble contribution to the project when, out of nowhere, GitHub gives you...

Speed Up Your Development with Visual Studio Code

Visual Studio (VS) Code was released on April 29, 2015 by Microsoft. In a very short time, it has taken the coding world by storm. As of 2020, nearly 51% of developers claim to use it as their primary development environment. This,...

Scroll Animations with Intersection Observer

When creating even the most basic scrolling animations, there are many steps involved just to add or remove a class name with JavaScript. With modern ES6 syntax, it’s time to simplify how much effort is needed by taking advantage of the Intersection...

Integrating Advanced Custom Fields + Gutenberg Into wd_s

With version 5.8 of Advanced Custom Fields (ACF), a new way to build Gutenberg blocks was introduced. The mission statement of ACF with this pivotal update was to: …radically change the perception of block development in Gutenberg by reducing learning time, hurdles,...

Debugging WordPress with Local by Flywheel, (neo)vim, and xdebug

Introduction Local by Flywheel is a popular tool for getting quick and reliable WordPress installations running on your computer. One of its lesser-known features is the inclusion of xdebug support. xdebug is a PHP extension that allows for real-time debugging of PHP...

Compile JavaScript with Webpack in a WordPress Plugin

The goal of this article is to show you how to configure webpack to watch and compile the JavaScript files in a WordPress plugin. What this article will not cover is how to configure webpack to work with every file type known...