Last April, I wrote Evergreen browsers and looking for a sane JS baselinehttps://publishing-project.rivendellweb.net/evergreen-browsers-and-looking-for-a-sane-js-baseline/ looking for a sane Javascript baseline where I could write scripts without having to worry about transpilation for those browsers that didn't support the features. I took a basic set of features from Publish, ship, and install modern JavaScript for faster applicationshttps://web.dev/publish-modern-javascript/ and wrote about how to use them in ESModules that would run in Node.js. This post follows up on that one and will cover two approaches to using ESModules in the browser. The process below assumes that you already have a browserslist file or section...
Every so often I like to look at my build process and see where I can make improvements or changes that are necessary because the code has changed. For this iteration the changes are: Finally switched to the current recommended method of defining tasks. Moved from Imagemin to gulp-libsquoosh Moved to markdown-it as the Markdown parser The syntax for gulp-exec changed so I moved the PDF generation code to the new syntax Another major and unexpected change is that node-sass is deprecated in favor of gulp-sass and the current dart-sass version As a result the sass task has been modified...
As the Gutenberg ecosystem matures, we get new tools and features to support the creating plugins. One of the newest tools to create block plugins leverages npxhttps://www.npmjs.com/package/npx command to scaffold a new block plugin. The command is: bash npx @wordpress/create-block The script will ask the following questions: The block slug used for identification also the plugin and output folder name The internal namespace for the block name something unique for your block The display title for your block The short description for your block optional The dashicon to make it easier to identify your block optional The category name to...
@wordpress/envhttps://www.npmjs.com/package/@wordpress/env allows you to create a development environment for your WordPress plugin or theme. It addresses the following use case: You want to test your theme or plugin without installing it on a live site, whether development or production. @wordpress/env requires Docker to be installed on your machine.There are instructions available for installing Docker on Windows 10 Prohttps://docs.docker.com/docker-for-windows/install/, all other versions of Windowshttps://docs.docker.com/toolbox/toolboxinstallwindows/, macOShttps://docs.docker.com/docker-for-mac/install/, and Linuxhttps://docs.docker.com/v17.12/install/linux/docker-ce/ubuntu/install-using-the-convenience-script. Installing @wordpress/env I've chosen to install the package globally rather than as a project dependency to make it easier to use across multiple projects. The install command looks like this: bash npm -g i...
XML still hunts us. There are still XML vocabularies that are necessary for the web to work well. One of these vocabularies is SVGhttps://www.w3.org/TR/SVG11/, a means to create vector and mixed vector/raster graphics for the web. Writing these elements by hand can be error-prone and it's definitely not fun. When researching another project how to create a content.opf file for epub, I found the xmlbuilder2https://oozcitak.github.io/xmlbuilder2/ library and it was a huge help for creating basic XML, including nested elements. So I started looking at how to use xmlbuilder to create basic SVG elements that I can reuse in my projects....
This set of features related to multi-column text is near and dear to my heart. I first researched this feature when I wrote about it for the Web Platform Documentation Project since retired. The idea is to let the browser take care of creating the columns and the details about the columns, the gap, and other elements. We can also play with headers and how they span across the columns. Browser support, as always, is the stumbling block for using columns across browsers but it appears to be better than when I first tried it. I searched caniuse.com for column-...
All my Javascript projects include imageminhttps://github.com/imagemin/imagemin/, a tool that allows you to convert images between different formats and do some level of processing to the images as it converts them. Unfortunately, the project is in life support mode and the original maintainer stopped working on it years ago according to the pinned issuehttps://github.com/imagemin/imagemin/issues/385 in the repository issue tracker. So it's time to take a look at the alternatives and see how well they work in a Gulphttps://gulpjs.com/\-based Javascript project. Squooshhttps://squoosh.app/ is an image compression and manipulation tool. The main difference between Squoosh and Imagemin is that Squoosh has created WebAssemblyhttps://webassembly.org/...
One of the hardest files in an epub book is the content.opf manifest file. This file tells an epub reader what files are in a specific rendition of an ebook. There are three components to a content.opf file: Metadata : Provides information about the book using a combination of meta tags and Dublin Core metadata elements : The normative reference is in the EPUB 3.2 package specification metadata sectionhttps://www.w3.org/publishing/epub3/epub-packages.htmlsec-pkg-metadata Manifest : The manifest element provides an exhaustive list of the Publication Resources that constitute the given Rendition, including the media type, the file path and the media encoding : See...
Starting in WordPress 5.8, there is a JSON metadata file we can use to register blocks. The block.json file is the block-level equivalent to theme.json and is now the preferred way to register blocks. The following example contains a block.json definition for a fictional my-plugin/notice block. json { "apiVersion": 2, "name": "my-plugin/notice", "title": "Notice", "category": "text", "parent": "core/group" , "icon": "star", "description": "Shows warning, error or success notices…", "keywords": "alert", "message" , "version": "1.0.3", "textdomain": "my-plugin", "attributes": { "message": { "type": "string", "source": "html", "selector": ".message" } }, "providesContext": { "my-plugin/message": "message" }, "usesContext": "groupId" , "supports": { "align": true...
Meta boxes work in Gutenberg but they may not do so for a while or be the best solution for your needs. During the full migration to the Block Editor, WordPress Provides two compatibility flagshttps://make.wordpress.org/core/2018/11/07/meta-box-compatibility-flags/. Most of the time the compatibility setup works out of the box. However, you must test the meta boxes on Gutenberg to make sure the code will still work and that you won't need to write new blocks to handle the meta box data. You also need to modify the addmetabox function to look like the example that follows: php true, 'backcompatmetabox' => false, ;...
