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...
I'm not very partial to working with colors in general and with gradients in particular. They used to only be available when working with SVG and not CSS. At some point we gained the ability to work with gradients in CSS and, more recently, it became possible to work with multiple kinds of gradients. This post will dive into linear gradients, the ones that I use most often on web content. What is a gradient? Gradients are images that show a transition between two or more colors. These transitions are shown as either linear, radial, or radial. Gradients can be...
Using fonts on the web has a longer story than many would think. The @font-face at-rule has been around since the early days of the web. Initially, there were no fonts on the web... the goal was to share documents, not to produce the polished documents that we see today. In the beginning, web browsers relied on locally installed fonts both for performance the modems of the time would take forever to download a font. We could use any of the pre-defined fonts: Andale Mono Arial Arial Black Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS...
CSS Fonts Level 4 introduces support for color fontshttps://www.w3.org/TR/css-fonts-4/color-font-support. The idea is that these fonts will be less resource-intensive because they will make fewer round trips to the server to manipulate the colors available to display the font. In theory there are no browsers that currently support this defining a custom palette for color fonts look like this: The @font-paletter-values at-rule The name of the palette we are creating The font family that the palette is associated with The base palette that we're overriding A list of one or more override colors css @font-palette-values Cooler { font-family: Bradley; base-palette: 1;...
