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....
In part 1https://publishing-project.rivendellweb.net/?p=790075&preview=true we discussed how to build variations for specific components. We'll now see how we can create templates ready for the user to fill and either use as-is or modify it when needed. Block Templates The first type of template is at the block level. This allows the creation of complex blocks without having to do much on the PHP side. We first import our tools like normal, the i18n utilities, registerBlockType and InnerBlockshttps://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inner-blocksREADME.md js import { } from '@wordpress/i18n'; import { registerBlockType } from '@wordpress/blocks'; import { InnerBlocks } from '@wordpress/block-editor'; We then define our template in...
One of the things I've found the most intriguing about Gutenberg is the ability to create variations of a given element and build the basic components of design systems. From there we can also build what Brad Frost calls molecules, compositions of one or more elements that are used together. This post will explore how to create variations of existing blocks and how to create composite blocks for our end users. The examples below will only work when Gutenberg is in visual mode and will not work in the classic editor or when Gutenberg is in HTML mode. Block Variations...
There are many other things we can do with blocks and things to explore. But for right now we'll move into enhancing the blocks we've built and add some flare to them. Making the editor match the front end Before we look at some enhancements for the blocks, let's make sure that the editor matches the front end content. The match will not be 100%; The way I've set up my theme is different than the way blocks are styled in Gutenberg, but it's close enough to make it not look very dissimilar. The following commands are included in an...
Internationalization We'll take a break from building actual blocks and talk about internationalization or i18n. Taking good care of i18n when you build your plugin will allow you or someone else to translate the text of your plugin so it's easier to use in languages other than the one it was written on It works very close to how the PHP i18n functions work and I believe this is deliberate, just different enough to take the Javascript needs into account. First, we import the necessary functions. Most of the time it'll just be but there are others. js import {...
We've only worked with static content so far. But the idea behind Gutenberg is to let you work with your own content. This section will also introduce the RichText block components as opposed to the plain text elements we've been working with. Editable Blocks The first part of this process is to create an editable block where we can enter arbitrary data that will be saved when we save or publish the post. IN addition to i18n and blocks imports we import the RichText component from the block-editor package. This will do the heavy load in the code below. js...
