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...
Whether we like it or use it, the Gutenberg editor is here to stay. While I don't use it for my own content and have developed themes that rely on the classic editor plugins, I realize that any WordPress shop moving forward needs to at least be aware of how to build blocks. It's unlikely that the Classic Editor plugin or other means to disable Gutenberg will remain available past 2022 when the Classic Editor plugin is supposed to stop being fully supported. So this post will cover the creation of Gutenberg blocks and some basic setup in both PHP...
I've been working on a new WordPress theme for a few weeks. Now I'm at the point where I can start worrying about the last finishing touches before I can start dogfooding it. One of the things left in the to-do list is internationalizing the theme. Making sure that it's translated to Spanish and that it is ready for people who want to translate it to other languages to do so. In this post, we'll concentrate on theme i18n internationalization for a theme. Gutenberg and blocks will be discussed in a separate post. Translating Themes For the translations to work,...
Resource hints are a relationship used to indicates that a given origin or resource should be acted upon before they are loaded. Doing this in WordPress is more complicated. While we could add the resources directly to the templates it would require changing the templates whenever we change fonts or any detail of the type of resource hint. The code below is taken from the Twenty Seventeenhttps://wordpress.org/support/article/twenty-seventeen/ theme and with some modifications will work on any theme running on recent versions of WordPress. It requires enqueuing the fonts generated through twentyseventeenfontsurl, which is outside the scope of this post but...
