This post about Gutenberg is a mix of different thoughts, ideas and code snippets I've worked on while researching how to build blocks for a project I'm working on. Making Custom Post Types work in Gutenberg I've created several custom post types that worked in the classic editor. When I brought them to my Gutenberg playground they would not work or they would not work as I expected them to. It took me a while to realize that you must be really picky on how you configure the Custom Post Type CPT to work as Gutenberg is far less forgiving...
The previous post Revisiting Gutenberg blocks part 1: Building and Styling the blockshttps://publishing-project.rivendellweb.net/revisiting-gutenberg-blocks-part-1-building-and-styling-the-blocks/ discussed how to build a block and reviewed both old and new techniques for creating Gutenberg blocks. This post will revisit related areas of block development in more detail. Block variations Some times it may be easier to create additional styles for an existing core element than create your own. Gutenberg calls this block variations. Authors can also choose whether they want to incorporate core blocks. It is highly likely that you will need to customize the block styles to match the core blocks with the theme...
My dislike of Gutenberg has softened since it was first introduced, mostly because they provided ways to keep the classic editor and they've guaranteed support for it through 2022. I've written about building Gutenberg blocks: Building Gutenberg Blocks Part 1https://publishing-project.rivendellweb.net/building-gutenberg-blocks-part-1/, part 2https://publishing-project.rivendellweb.net/building-gutenberg-blocks-part-2/, part 3https://publishing-project.rivendellweb.net/building-gutenberg-blocks-part-3/ and part4https://publishing-project.rivendellweb.net/building-gutenberg-blocks-part-4/, and another series on using Gutenberg as a design system: Gutenberg as a design system part 1https://publishing-project.rivendellweb.net/gutenberg-as-a-design-system-part-1/, part 2https://publishing-project.rivendellweb.net/gutenberg-as-a-design-system-part-2/, and part 3https://publishing-project.rivendellweb.net/gutenberg-as-design-systems-part-3/ but I want to revisit block design both in light of new developments in Gutenberg and as a way to build more complex blocks using block patterns and, possibly, full-page designs. Build...
Ever so often you see questions in Quora about Bravehttps://brave.com/, a Chromium-based browser that claims to be faster than stock Chromium and other derivative browsers like Edge, or Opera on Desktop. The last time I saw the performance testing results and methodology was when they first released version 1.0, documented in Brave 1.0 Performance: Methodology and Resultshttps://brave.com/brave-one-dot-zero-performance-methodology-and-results/ with the code used to do the analysis available on Githubhttps://github.com/brave-experiments/browser-comparison-toolkit but I haven't seen more recent data. The tests were done in older versions of the browsers tested and the Brave Browser Comparison Kithttps://github.com/brave-experiments/browser-comparison-toolkit hasn't been updated for newer versions not that...
When researching how to use Gutenberg Ramp to partially allow Gutenberg on a WordPress site, I decided that I wanted to use a custom post type for the test so I wouldn't screw up the existing content for my blog. There is a problem with this idea. Custom post types don't appear in the default loop of a WordPress type so they wouldn't appear along with regular posts on the blog homepage. Most times, this is what we want. We want to use the custom post types on their own specialized loops. However, in this case, it is not what...
As much as I dislike Gutenberg, mostly because of the amount of duplicated work it makes you do, there are times when it would be nice to have it for some things but not for others. While researching alternatives to Gutenberg I discovered the Gutenberg Ramphttps://wordpress.org/plugins/gutenberg-ramp/ plugin. It presents an interesting way to grow how you use Gutenberg that lies no use with plugins like Classic Editor and full use letting Gutenberg be the default editor. For this experiment we'll do the following: 1. Create a custom post type for essays 2. Install Gutenberg Ramp and configure it to only...
A question that I've seen frequently in Quora and elsewhere since the Gutenberg editor was announced a few years ago was how to disable it and keep the existing, now classic, editor. Rather than answer the question over and over again I thought I'd document the two alternatives that I now recommend using if Guttenberg is not an option. Why wouldn't Gutenberg be a good option? Even though Gutenberg has been around for a few years, there is no parity with tools like ACF and others. Even though newer versions of ACF provide Gutenberg blocks, the technology is not proven...
I don't hear about this very often but once in a while, I will hear about building print stylesheets so that web pages will look exactly the same in print as they do on screen. While I think the idea is laughable, it made me think about what it would take to make web content printable. This is different than using all of CSS Paged Media as documented in Creating printable content from the webhttps://publishing-project.rivendellweb.net/creating-printable-content-from-the-web/, we might test part of the Paged Mediahttps://www.w3.org/TR/css-page-3/ and Generated Contenthttps://drafts.csswg.org/css-content-3/ specifications but I'm not confident that they'll work in all browsers. What we want...
> Thank you to Rowan Merewood@rowanm for his patient explanation and review of this post. Client Hints are a content negotiation tool and can help with making responsive images easier to work with and give you other tools to help create a better user experience. They are a set of HTTP request headers allowing clients to indicate a list of device and browser preferences. Using client hints isn't automatic: servers must tell clients what hints they want clients to send using the Accept-CH accept client hints header: apache Accept-CH: Width, Viewport-Width, Downlink or an equivalent HTML meta element with the...
When researching client hints, I came across an interesting use case for dynamically inserting meta tags on a Handlebars template based on the route I'm accessing. The different pages of the experiment use different sets of client hints so each needs to request the different hints from the server, an Express application in this case. I wasn't able to do it within Express or Handlebars so I had to hack my way through getting it done with Javascript. We also use local storage to set up a variable when we successfully add the meta tag. If the variable exists then...
