There are times when I need to check out a specific tag from a repository. I do this often enough that I chose to document the process. A concrete example: I need to get the latest revision of the Gutenberg plugin so I can compile it and install it on my testing machine. Because there is no branch, I can't just do: bash git checkout -b So I had to research how to get creative in doing this. The first step is to make sure we have all the tags available both to our origin and any upstream repositories. We...
Alternate stylesheets provide a mechanism for defining additional stylesheets that the user can select to apply to the site they are visiting, usually via the View menu. In this post, we'll talk about adding alternate stylesheets to a site and show an example of how they work in Firefox. How do you write alternate stylesheets and include them on a page? Each alternate stylesheet is a complete and valid stylesheet. From the CSS perspective, there's no syntactic difference between an alternate stylesheet and the primary one. To include the alternate stylesheet in a page, you use the link element as...
CSS provides four mathematical expression functions: calc, min, max, and clamp. We'll take look at each one in some detail and we'll also talk about how we can use them in CSS variables. calc The calc function supports four arithmetic operations: addition +, subtraction -, multiplication , and division /. This will allow you to dynamically calculate the width and height of a container to create responsive layouts. In this example, you can set the margins of an element minus a fixed amount: css div { width: calc80vw - 20px; } min The min function is used to set the...
In the last posthttps://publishing-project.rivendellweb.net/getting-markdown-plugins-to-work-with-gulp/ we modified a Gulp workflow to include Markdown-it directly. But some parts can't be done with plugins and are not part of the Markdown-It API. This post will explore some of the customizations I've done with the Markdown-It API. Manipulating images: adding the loading attribute The first example is a simple one. We will add the loading="lazy" attribute to all images so that browsers that support native lazy loading will use the feature and only load the image when it's about to appear in the viewport or already in the viewport. js md.renderer.rules.image = function tokens,...
I finally solved two big misteries: Why does Gulp give you the ability to write your own code and how to integrate plugins into a Gulp-based Markdown project. Why write your own code There are times when there is no plugin available for a certain task or the plugin doesn't as expected. In my gulp-starterhttps://github.com/caraya/gulp-starter-2021 I use Markdown-Ithttps://github.com/markdown-it/markdown-it to convert Markdown to HTML. I would love to use plugins to provide equivalent functionality to what I get using Markdown in WordPress via the Jetpack Plugin in the classic editorhttps://wordpress.com/support/markdown-quick-reference/. Using a Gulp plugin gulp-markdown-ithttps://www.npmjs.com/package/gulp-markdown-it is a good way to get...
With WordPress 6.0 themes can also use local patterns stored in the patterns top-level directory of the theme. These will be picked up automatically by WordPress and used in your theme. text . ├── patterns │ └── demo-404.php Building the patterns The patterns in the theme's patterns directory use the PHP plugin syntax. You need a PHP plugin-style comment to define the pattern before actually writing the pattern: php Hello World This is from a pattern The following fields are available in the pattern comment: Title required : implicitly translatable : The human-reaadable title of the pattern Slug required :...
In Gutenberg, you can create patterns of reusable code for use in your theme. You can load in the editor from those available in the WordPress pattern directory using the patterns top-level key. In this example, the pattern partner-logos refers to the pattern at https://wordpress.org/patterns/pattern/partner-logoshttps://wordpress.org/patterns/pattern/partner-logos json { "version": 2, "patterns": "short-text-surrounded-by-round-images", "partner-logos" } This will make it easier to add new third-party patterns to your theme without having to create them yourself.
When the block editor first came out, one of the things I found lacking was the ability to save theme templates and template blocks to files on my computer. WordPress 6.0 gives developers the ability to export a full theme as a zipped archive. This feature was first available in version 5.9 but it only allowed you to save the template files. In 6.0 the export feature produces a fully working theme archive that can be imported into another WordPress site or unzipped into a directory we can push into a Git repository or to do work in preparation to...
There are many ways to run WordPress locally on your development machine. You can install MAMP/WAMP/XAMP or any other bundled LAMP stack, configure a database and install WordPress You can install Local by Flywheel, start it up and get a WordPress instance There is one more way to do it: You can use Docker. Docker provides a way to run container-based applications on your local system. All it requires is that you have Docker Engine for Linux or Docker Desktop for macOS and Windows installed. As a quick introduction: Our WordPress installation using Docker requires two images: A WordPress image...
There are times when we need to round numbers to show on a web page. For example, we might want to round a number to two decimal places when showing currency values. It is tempting just to truncate the values but that has its drawbacks. You may lose precision if you truncate the value without rounding it. Enter toFixed. This method takes a number and returns the rounded value to the number of places specified in the parameter. The code below does the following: 1. set up a constant holding the number we want to round 2. use the toFixed...
