When working with APIs we should never, under any circumstance, remove elements from the endpoint. Even if you're the owner there is no real way to know who's consuming your data and how they are doing it so removing elements of the API can cause unexpected and unpleasant problems down the road. However, there is no problem with adding attributes to your custom endpoints. This post will discuss how to do it using built-in WordPress functions and coding practices. Before we jump into adding attributes we need to ask ourselves if we need a new attribute or if we can...
One of the things I've always liked about WordPress is its flexibility. We can extend WordPress and create pretty much any type of content that we need for specific projects. We can choose whether to build it inside a theme or a plugin. For the most part I would recommend building it in a plugin so that we will retain the capability even if we switch themes. Like all plugins we first declare a preamble that looks like this. This is the block that makes it a plugin that we can load and use. php The actual meat of the...
In the last posts we created a CRUD system for authenticated WordPress requests but it's not complete. It currently only deals with the post content, it doesn't provide an easy way to paginate content, and it doesn't provide for how to access other parts of a WordPress site or app. This post will discuss solutions to these problems. Embedding content related to the post When we load the data from the posts REST endpoint we get references to the post assets like featured image, author, and comments. This is good when we're exploring the API but it becomes troublesome when...
So far we've installed JWT in our WordPress instancehttps://publishing-project.rivendellweb.net/adding-jwt-to-wordpress/ and created a basic infrastructure for the app. This post will take care of the rest of the CRUD system, we'll create/save a post, update it and delete it. All the functions we'll discuss in this post require the user to be authenticated and will not work if there is no authentication token stored in a cookie on the user's machine. A later iteration of this code may do better error handling. Create Creating a new post means, essentially, saving the content of a form into the database. The code completes...
The whole idea of the WordPress REST API is to allow developers to use whatever tools they choose to create front-ends for WordPress systems. We're no longer limited to PHP and the Gutenberg editor and the possibilities are endless. This post will cover authentication using JWT, listing pages of posts, viewing individual posts, and the basic CRUD operations: create, update, and delete. We covered setting up JWT authentication in WordPress in Adding JWT to WordPresshttps://publishing-project.rivendellweb.net/adding-jwt-to-wordpress/ We will write this using ES Modules, so we'll have to build a quick WebPack build system to convert it into something that works in...
One of the things I've struggled with when working with headless WordPress is getting stuff that I need to be authenticated to accomplish; for example, I can get a list of posts and get an individual post but I can't create, update and delete posts from a remote client. While reviewing a Udemy Course on the subject Zach Gordon's Headless WordPress REST API Authenticationhttps://www.udemy.com/course/headless-wordpress-rest-api-authentication-course/l I discovered that the reason this happens is that WordPress doesn't provide third-party clients authentication by default. SO if you want to authenticate you have to set up your authentication infrastructure in WordPress. This post will...
In previous posts this one from 2015https://publishing-project.rivendellweb.net/open-type-features/, this one from 2017https://publishing-project.rivendellweb.net/opentype-features-in-css/ I did brief writeups about OpenType features and what they were. In Open Type Features in CSShttps://publishing-project.rivendellweb.net/open-type-features-in-css/ from 2019, I wrote about OpenType features in the context of variations or what makes variable fonts and briefly touched on other features. In this post, I will dive deeper into other features available on OpenType fonts, how to implement them directly in CSS and how to implement them with CSS custom properties Getting started The first thing we need to do to enable OpenType features is to figure out what features...
CSS provides a set of functions for creating numerical expressions to use without having to resort to complex calculations using calc and variables. Clamp My favorite use for these functions is to control font sizing in a dynamic environment. Until I discovered clamp I couldn't think of any way to not let the font get smaller or larger than preset values. The following CSS rule will restrict the size of our paragraph text: css p { font-size: clamp16px, 1.5vw, 24px; } The rule means that: If 1.5vw is smaller than 16px then keep it at 16px. Likewise, if 1.5vw is...
In May 2019 I wrote a post about Pointer Eventshttps://publishing-project.rivendellweb.net/pointer-events/ as an introduction to Pointer Events and how they could be polyfilled for browsers Safari that didn't support them natively. Almost a year later things have progressed. Safari supports the feature so there's no need for a polyfill and it's now practical to use in production. As a refresher, these are the events, the onEvent handlers and a brief explanation of when they trigger, taken from MDNhttps://developer.mozilla.org/en-US/docs/Web/API/Pointerevents | Event | On Event Handler | Description | | --- | --- | --- | | pointeroverhttps://developer.mozilla.org//en-US/docs/Web/Events/pointerover | onpointeroverhttps://developer.mozilla.org//en-US/docs/Web/API/GlobalEventHandlers/onpointerover | Fired when...
The idea is to use Dudley Storey's The new defaultshttp://dudleystorey.github.io/thenewdefaults/ to automate adding the colors on the list as a set of CSS Custom Properties using both Javascript and CSS properties. We will use Node and its experimental ESM module support. At its most basic, the script consists of three sections. The first section imports the fs methods from the fs module. Note: It is important to note that, in Node 12.x.x, the ESM module is still experimental so you need to run node with the experimental-modules and you will get a warning whenever you run the code. This warning...
