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...
CSS Properties and Values API Level 1https://drafts.css-houdini.org/css-properties-values-api-1/syntax-string provides a CSS equivalent solution to CSS.registerProperty, the @propertyhttps://drafts.css-houdini.org/css-properties-values-api-1/at-property-rule at-rule. Unfortunately, it is not implemented by any browser yet. The reason why I'm writing about it now is that Chrome filed an Intent to Shiphttps://groups.google.com/a/chromium.org/forum/!msg/blink-dev/3ygpsew53a0/T7acB6sRBQAJ the feature. What problem are Houdini Custom Properties trying to solve? Custom properties are treated as strings, so developers have to jump through hoops to make them work and have to do things that are not necessarily intuitive to create the effects they need. css :root { --base-font-size: 16; --base-text-color: 'aaa'; } body { font-size: calcvar--base-font-size 1px; color:...
Blocks are awesome and provide a graphical way to create content but sharing them is not as intuitive as I would like to be, at least not yet. This post will discuss how to use plugins to share both custom blocks, variations, and combined blocks and variations. Custom Blocks In the plugin's index.php we create a block category where we can place all our blocks. The comment at the top of the page contains the information that will appear on the plugins page. The first functions rivendellwebblocksblockcategory defines a callback function that creates a category for the blocks we create....
